blob: ec3fc1c4ee57e242d9cd8e8ef54916561af0b4a3 [file] [log] [blame]
<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<div id="host">
<div slot="s1">This text should be green</div>
</div>
<script>
description("A changed inherited property on a slot parent should propagate down to slotted elements.");
var root = host.attachShadow({mode:"open"});
root.innerHTML = '<style>.p1 { color: green }</style><div id="p1"><slot name="s1"></slot></div>';
var p1 = root.querySelector("#p1");
var s1 = host.querySelector("[slot]");
shouldBeEqualToString("getComputedStyle(s1).color", "rgb(0, 0, 0)");
p1.className = "p1";
shouldBeEqualToString("getComputedStyle(s1).color", "rgb(0, 128, 0)");
</script>