adoptedstylesheets-modify-array-and-sheet.html (1145B)
1 <!DOCTYPE html> 2 <title>adoptedStyleSheet - Add and remove the same sheet with modifications</title> 3 <link rel="help" href="https://drafts.csswg.org/cssom/#extensions-to-the-document-or-shadow-root-interface"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <div id="target">This text should be green</div> 7 <script> 8 const sheet_a = new CSSStyleSheet(); 9 sheet_a.replaceSync("#target { color: red; }"); 10 const sheet_b = new CSSStyleSheet(); 11 sheet_b.replaceSync("#target {}"); 12 13 test(() => { 14 document.adoptedStyleSheets = [sheet_a, sheet_b]; 15 assert_equals(getComputedStyle(target).color, "rgb(255, 0, 0)"); 16 }, "Add the two sheets. Text should be red."); 17 18 test(() => { 19 document.adoptedStyleSheets[1] = sheet_a; 20 document.adoptedStyleSheets[0] = sheet_b; 21 assert_equals(getComputedStyle(target).color, "rgb(255, 0, 0)"); 22 }, "Flip the two sheet. Still red."); 23 24 test(() => { 25 sheet_a.cssRules[0].style.color = "green"; 26 assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)"); 27 }, "Modify the color declaration. Should now be green."); 28 </script>