CSSStyleSheet-constructable-invalidation.html (2499B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSSStyleSheet rule mutation invalidation</title> 4 <link rel="author" href="mailto:wpt@keithcirkel.co.uk" title="Keith Cirkel"> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#extensions-to-the-document-or-shadow-root-interface"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <span id="span1">Should be green.</span> 9 <span id="span2">Should be green.</span> 10 <script> 11 promise_test(async function(t) { 12 const sheet = new CSSStyleSheet(); 13 sheet.replaceSync('span {color:var(--color, red);}'); 14 document.adoptedStyleSheets = [sheet]; 15 t.add_cleanup(() => { 16 document.adoptedStyleSheets = []; 17 }) 18 assert_equals(getComputedStyle(span1).color, "rgb(255, 0, 0)", "Sheet should apply"); 19 sheet.rules[0].style.setProperty('--color', 'green'); 20 assert_equals(getComputedStyle(span1).color, "rgb(0, 128, 0)", "Sheet should invalidate style"); 21 document.adoptedStyleSheets = []; 22 assert_equals(getComputedStyle(span1).color, "rgb(0, 0, 0)", "Removing sheet should apply"); 23 }, "mutating constructed CSSStyleSheet applied to root invalidates styles"); 24 25 promise_test(async function() { 26 span1.attachShadow({mode:'open'}) 27 span1.shadowRoot.append(document.createElement('slot')) 28 const sheet = new CSSStyleSheet(); 29 sheet.replaceSync(':host {color:var(--color, red);}'); 30 span1.shadowRoot.adoptedStyleSheets = [sheet]; 31 assert_equals(getComputedStyle(span1).color, "rgb(255, 0, 0)", "Sheet should apply"); 32 sheet.rules[0].style.setProperty('--color', 'green'); 33 assert_equals(getComputedStyle(span1).color, "rgb(0, 128, 0)", "Sheet should invalidate style"); 34 }, "mutating constructed CSSStyleSheet applied to shadowdom invalidates styles"); 35 36 promise_test(async function() { 37 span2.attachShadow({mode:'open'}) 38 span2.shadowRoot.append(document.createElement('slot')) 39 const sheet1 = new CSSStyleSheet(); 40 const sheet2 = new CSSStyleSheet(); 41 sheet1.replaceSync(':host {color:var(--color, hotpink);}'); 42 sheet2.replaceSync(':host {--color: blue}'); 43 const style2 = sheet2.rules[0].style; 44 span2.shadowRoot.adoptedStyleSheets = [sheet1, sheet2]; 45 assert_equals(getComputedStyle(span2).color, "rgb(0, 0, 255)", "Sheet should apply"); 46 style2.setProperty('--color', 'green'); 47 assert_equals(getComputedStyle(span2).color, "rgb(0, 128, 0)", "Sheet should invalidate style"); 48 }, "mutating dependent constructed CSSStyleSheet applied to shadowdom invalidates styles"); 49 </script>