layer-replaceSync-clears-stale.html (1475B)
1 <!DOCTYPE html> 2 <title>CSS Cascade Layers: CSSStyleSheet.replaceSync clears stale statements</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: 'replaceSync clears stale layer statements', 17 style: ` 18 @layer second, first; 19 @layer second { 20 #target { color: green; } 21 } 22 @layer first { 23 #target { color: red; } 24 } 25 `, 26 operations: function(sheet) { 27 sheet.replaceSync(` 28 @layer first { 29 #target { color: red; } 30 } 31 @layer second { 32 #target { color: green; } 33 } 34 `); 35 } 36 }, 37 ]; 38 39 const target = document.getElementById('target'); 40 const reference = document.getElementById('reference'); 41 42 for (let testCase of testCases) { 43 test(t => { 44 let sheet = new CSSStyleSheet(); 45 sheet.replaceSync(testCase.style); 46 document.adoptedStyleSheets = [sheet]; 47 48 try { 49 testCase.operations(sheet); 50 assert_equals(getComputedStyle(target).color, getComputedStyle(reference).color); 51 } finally { 52 document.adoptedStyleSheets = []; 53 } 54 }, testCase.title); 55 } 56 </script>