test_user_sheet_shadow_dom.html (1735B)
1 <!DOCTYPE HTML> 2 <title>Test for bug 1576229 - Nodes in Shadow DOM react properly to dynamic changes in user sheets</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 5 <div></div> 6 <span id="host" style="display: block"></span> 7 <script> 8 const gIOService = SpecialPowers.Cc["@mozilla.org/network/io-service;1"] 9 .getService(SpecialPowers.Ci.nsIIOService) 10 11 const gSSService = SpecialPowers.Cc["@mozilla.org/content/style-sheet-service;1"] 12 .getService(SpecialPowers.Ci.nsIStyleSheetService); 13 14 const windowUtils = SpecialPowers.getDOMWindowUtils(window); 15 16 function loadUserSheet(style) { 17 const uri = gIOService.newURI("data:text/css," + style); 18 windowUtils.loadSheet(uri, windowUtils.USER_SHEET); 19 } 20 21 SimpleTest.waitForExplicitFinish(); 22 23 onload = function() { 24 loadUserSheet(` 25 div { 26 width: 100px; 27 height: 100px; 28 background-color: red; 29 } 30 .foo { 31 background-color: green; 32 } 33 `); 34 let host = document.querySelector("#host"); 35 host.attachShadow({ mode: "open" }).innerHTML = ` 36 <div></div> 37 `; 38 let light = document.querySelector('div'); 39 let shadow = host.shadowRoot.querySelector('div'); 40 is(getComputedStyle(light).backgroundColor, "rgb(255, 0, 0)", "User sheet works in light DOM"); 41 is(getComputedStyle(shadow).backgroundColor, "rgb(255, 0, 0)", "User sheet works in shadow DOM"); 42 light.classList.add("foo"); 43 shadow.classList.add("foo"); 44 is(getComputedStyle(light).backgroundColor, "rgb(0, 128, 0)", "Dynamic change for user sheet works in light DOM"); 45 is(getComputedStyle(shadow).backgroundColor, "rgb(0, 128, 0)", "Dynamic change for user sheet works in shadow DOM"); 46 SimpleTest.finish(); 47 } 48 </script>