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/layer-rules-cssom.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>The CSSOM API for Cascade Layers</title>
<link rel="author" href="mailto:xiaochengh@chromium.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const testCases = [
{
style: `@layer foo { }`,
expectedNames: ['foo'],
title: 'Basic layer block name',
},
{
style: `@layer { }`,
expectedNames: [''],
title: 'Anonymous layer block name',
},
{
style: `
@layer foo;
`,
expectedNames: [['foo']],
title: 'Basic layer statement name',
},
{
style: `
@layer foo, bar;
`,
expectedNames: [['foo', 'bar']],
title: 'Layer statement with multiple names',
},
{
style: `
@layer outer {
@layer foo.bar { }
}
@layer outer.foo.bar { }
`,
expectedNames: ['outer', 'foo.bar', 'outer.foo.bar'],
title: 'Nested layer block names',
},
{
style: `
@layer outer {
@layer foo.bar, baz;
}
@layer outer.foo.bar, outer.baz;
`,
expectedNames: ['outer', ['foo.bar', 'baz'], ['outer.foo.bar', 'outer.baz']],
title: 'Nested layer statement name lists',
},
{
style: `
@import url('data:text/css,') layer;
`,
expectedNames: [''],
title: 'Import into anonymous layer',
},
{
style: `
@import url('data:text/css,') layer(foo);
`,
expectedNames: ['foo'],
title: 'Import into named layer',
},
{
style: `
@import url('data:text/css,');
`,
expectedNames: [null],
title: 'Import without layer',
},
];
for (let testCase of testCases) {
promise_test(async function (t) {
assert_implements(window.CSSLayerBlockRule);
assert_implements(window.CSSLayerStatementRule);
const style = document.createElement('style');
t.add_cleanup(() => style.remove());
const isLoadAsync = testCase.style.includes("@import");
const load = new Promise(resolve => {
style.addEventListener("load", resolve, { once: true });
});
style.appendChild(document.createTextNode(testCase.style));
document.head.appendChild(style);
if (isLoadAsync) {
await load;
}
let index = 0;
function compareNames(ruleOrSheet) {
if (ruleOrSheet instanceof CSSLayerBlockRule)
assert_equals(ruleOrSheet.name, testCase.expectedNames[index++]);
else if (ruleOrSheet instanceof CSSImportRule)
assert_equals(ruleOrSheet.layerName, testCase.expectedNames[index++]);
else if (ruleOrSheet instanceof CSSLayerStatementRule)
assert_array_equals(ruleOrSheet.nameList, testCase.expectedNames[index++]);
if (ruleOrSheet.cssRules) {
for (let i = 0; i < ruleOrSheet.cssRules.length; ++i)
compareNames(ruleOrSheet.cssRules.item(i));
}
}
compareNames(style.sheet);
assert_equals(index, testCase.expectedNames.length);
}, testCase.title);
}
</script>