| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <div id="host1">This text should have a green background.</div> |
| <div id="host2">This text should not have a red background.</div> |
| <script> |
| test(() => { |
| var root = host1.attachShadow({mode:'open'}); |
| root.innerHTML = '<link rel="stylesheet" href="data:text/css,:host{background:green}"><slot />'; |
| assert_equals(getComputedStyle(host1).backgroundColor, "rgb(0, 128, 0)", "Host background should be green."); |
| }, "Check that :host rule from link stylesheet applies to host element."); |
| |
| test(() => { |
| var root = host2.attachShadow({mode:'open'}); |
| root.innerHTML = '<link rel="stylesheet" href="data:text/css,:host{background:red}"><slot />'; |
| assert_equals(getComputedStyle(host2).backgroundColor, "rgb(255, 0, 0)", "Host background should be red."); |
| root.querySelector("link").remove(); |
| assert_equals(getComputedStyle(host2).backgroundColor, "rgba(0, 0, 0, 0)", "Host background should be transparent."); |
| }, "Check that :host rule from link stylesheet no longer applies after the sheet is removed."); |
| </script> |
