blob: 137673c163bf2498e274af8562e6d571bc2834ed [file] [log] [blame]
<!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>
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.");
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.");