Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-cascade/layers-basic.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS @layers basic example</title>
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@layer foo, bar;
@layer foo {
p {
color: yellow;
}
}
@layer bar {
p {
background-color: black;
}
}
p {
font-size: 4rem;
}
</style>
<p id="testP">Test paragraph</p>
<script>
"use strict";
test(() => {
const p = document.getElementById("testP");
const styles = window.getComputedStyle(p);
assert_equals(styles.color, "rgb(255, 255, 0)");
assert_equals(styles.backgroundColor, "rgb(0, 0, 0)");
assert_equals(styles.fontSize, "64px");
});
</script>