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">
6 <span id=
"host" style=
"display: block"></span>
8 const gIOService
= SpecialPowers
.Cc
["@mozilla.org/network/io-service;1"]
9 .getService(SpecialPowers
.Ci
.nsIIOService
)
11 const gSSService
= SpecialPowers
.Cc
["@mozilla.org/content/style-sheet-service;1"]
12 .getService(SpecialPowers
.Ci
.nsIStyleSheetService
);
14 const windowUtils
= SpecialPowers
.getDOMWindowUtils(window
);
16 function loadUserSheet(style
) {
17 const uri
= gIOService
.newURI("data:text/css," + style
);
18 windowUtils
.loadSheet(uri
, windowUtils
.USER_SHEET
);
21 SimpleTest
.waitForExplicitFinish();
28 background-color: red;
31 background-color: green;
34 let host
= document
.querySelector("#host");
35 host
.attachShadow({ mode
: "open" }).innerHTML
= `
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");