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 |