1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE html>
<title>The CSSOM API for Cascade Layers</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layer-apis">
<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>
|
