<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>

<div id="test">
    <div id="first"></div>
</div>

<script>
description("Test that :host-context(:first-child) is re-evaluated when :first-child changes.");

var test = document.getElementById("test");
var first = document.getElementById("first");

first.appendChild(
    createDOM("div", {"id": "host"},
        createShadowRoot(
            createDOM('style', {},
                document.createTextNode(":host-context(#first:first-child) { background-color: red; }")),
            createDOM('div', {},
                document.createTextNode("You should see no red.")))));

document.body.offsetTop; // Force style recalc.

var red = "rgb(255, 0, 0)";

shouldBe("getComputedStyle(first.firstChild, null).backgroundColor", "red");

test.insertBefore(document.createElement("div"), first);

shouldNotBe("getComputedStyle(first.firstChild, null).backgroundColor", "red");
</script>