<!DOCTYPE html>
<style>
@layer A, B, C;
@layer A {
#target {
color: red;
}
}
@layer B {
#target {
color: blue;
}
}
@layer C {
#target {
color: revert;
}
}
</style>
<script src="../include.js"></script>
<div id="target"></div>
<div id="initial"></div>
<script>
test(() => {
const target = document.getElementById("target");
const initial = document.getElementById("target");
const expected = getComputedStyle(initial).color;
const actual = getComputedStyle(target).color;
if (expected === actual) {
println('PASS, revert skipped the layers');
} else {
println(`FAIL: got ${actual}, expected ${expected}`);
}
});
</script>
