| <!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) { |
| const style = document.createElement('style'); |
| style.appendChild(document.createTextNode(testCase.style)); |
| document.head.appendChild(style); |
| |
| test(function () { |
| assert_implements(window.CSSLayerBlockRule); |
| assert_implements(window.CSSLayerStatementRule); |
| |
| 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); |
| |
| style.remove(); |
| } |
| </script> |