layer-statement-before-import.html (4216B)
1 <!DOCTYPE html> 2 <title>CSS Cascade Layers: Empty layer statements before import rules</title> 3 <link rel="author" href="mailto:xiaochengh@chromium.org"> 4 <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <div id="target"></div> 9 <div id="reference" style="color: green"></div> 10 11 <script> 12 // In all test cases, the 'color' property value of #target should be green. 13 14 const testCases = [ 15 { 16 title: 'length and item', 17 style: ` 18 @layer first, second; 19 @import url(data:text/css,); 20 @layer second { 21 #target { color: green; } 22 } 23 @layer first { 24 #target { color: red; } 25 } 26 `, 27 operations: function(sheet) { 28 assert_equals(sheet.cssRules.length, 4); 29 assert_equals(sheet.cssRules.item(0).cssText, '@layer first, second;'); 30 assert_equals(sheet.cssRules.item(1).cssText, `@import url("data:text/css,");`); 31 assert_equals(sheet.cssRules.item(2).cssText, 32 '@layer second {\n #target { color: green; }\n}'); 33 assert_equals(sheet.cssRules.item(3).cssText, 34 '@layer first {\n #target { color: red; }\n}'); 35 } 36 }, 37 { 38 title: 'insertRule before imports', 39 style: ` 40 @import url(data:text/css,); 41 @layer second { 42 #target { color: green; } 43 } 44 @layer first { 45 #target { color: red; } 46 } 47 `, 48 operations: function(sheet) { 49 sheet.insertRule('@layer first, second', 0); 50 } 51 }, 52 { 53 title: 'insertRule after imports', 54 style: ` 55 @layer first, second; 56 @import url(data:text/css,); 57 @layer first { 58 #target { color: red; } 59 } 60 `, 61 operations: function(sheet) { 62 sheet.insertRule('@layer second { #target { color: green; } }', 2); 63 } 64 }, 65 { 66 title: 'insert other rules to pre-import layer statements fails', 67 style: ` 68 @layer first, second; 69 @import url(data:text/css,); 70 @layer second { 71 #target { color: green; } 72 } 73 @layer first { 74 #target { color: red; } 75 } 76 `, 77 operations: function(sheet) { 78 assert_throws_dom('HierarchyRequestError', 79 () => sheet.insertRule('#target { color: red !important; }', 0)); 80 assert_throws_dom('HierarchyRequestError', 81 () => sheet.insertRule('#target { color: red !important; }', 1)); 82 } 83 }, 84 { 85 title: 'insert other rules before the first layer statement without imports', 86 style: ` 87 @layer first, second; 88 @layer second { 89 #target { color: red !important; } 90 } 91 `, 92 operations: function(sheet) { 93 sheet.insertRule(`@layer first { 94 #target { color: green !important; } 95 }`, 0); 96 } 97 }, 98 { 99 title: 'deleteRule before imports', 100 style: ` 101 @layer second, first; 102 @import url(data:text/css,); 103 @layer first { 104 #target { color: red; } 105 } 106 @layer second { 107 #target { color: green; } 108 } 109 `, 110 operations: function(sheet) { 111 sheet.deleteRule(0); 112 } 113 }, 114 { 115 title: 'deleteRule after imports', 116 style: ` 117 @layer first, second; 118 @import url(data:text/css,); 119 @layer second { 120 #target { color: green; } 121 } 122 @layer first { 123 #target { color: red; } 124 } 125 #target { 126 color: red; 127 } 128 `, 129 operations: function(sheet) { 130 sheet.deleteRule(4); 131 } 132 }, 133 ]; 134 135 const target = document.getElementById('target'); 136 const reference = document.getElementById('reference'); 137 138 for (let testCase of testCases) { 139 promise_test(async t => { 140 let styleElement = document.createElement('style'); 141 styleElement.textContent = testCase.style; 142 await new Promise(resolve => { 143 styleElement.onload = resolve; 144 styleElement.onerror = resolve; 145 document.head.append(styleElement); 146 }); 147 let sheet = styleElement.sheet; 148 149 try { 150 testCase.operations(sheet); 151 assert_equals(getComputedStyle(target).color, getComputedStyle(reference).color); 152 } finally { 153 styleElement.remove(); 154 } 155 }, testCase.title); 156 } 157 </script>