| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
| 4 <div id="host">This text should have a green background.</div> | 4 <div id="host1">This text should have a green background.</div> |
| 5 <div id="host2">This text should not have a red background.</div> |
| 5 <script> | 6 <script> |
| 6 test(() => { | 7 test(() => { |
| 7 var root = host.attachShadow({mode:'open'}); | 8 var root = host1.attachShadow({mode:'open'}); |
| 8 root.innerHTML = '<link rel="stylesheet" href="data:text/css,:host{backg
round:green}"><slot />'; | 9 root.innerHTML = '<link rel="stylesheet" href="data:text/css,:host{backg
round:green}"><slot />'; |
| 9 assert_equals(getComputedStyle(host).backgroundColor, "rgb(0, 128, 0)",
"Host background should be green."); | 10 assert_equals(getComputedStyle(host1).backgroundColor, "rgb(0, 128, 0)",
"Host background should be green."); |
| 10 }, "Check that :host rule from link stylesheet applies to host element."); | 11 }, "Check that :host rule from link stylesheet applies to host element."); |
| 12 |
| 13 test(() => { |
| 14 var root = host2.attachShadow({mode:'open'}); |
| 15 root.innerHTML = '<link rel="stylesheet" href="data:text/css,:host{backg
round:red}"><slot />'; |
| 16 assert_equals(getComputedStyle(host2).backgroundColor, "rgb(255, 0, 0)",
"Host background should be red."); |
| 17 root.querySelector("link").remove(); |
| 18 assert_equals(getComputedStyle(host2).backgroundColor, "rgba(0, 0, 0, 0)
", "Host background should be transparent."); |
| 19 }, "Check that :host rule from link stylesheet no longer applies after the s
heet is removed."); |
| 11 </script> | 20 </script> |
| OLD | NEW |