<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
    #outer { width: 100px; height: 100px }
    span { color: white }
    span:nth-child(2) { color: green }
</style>
<p>You should see a green square below, and no FAIL.</p>
<div id="outer">
    <span id="inner">FAIL</span>
</div>
<script>
    description("An existing LocalStyleChange on parent should not inhibit forward/backward rule update on children.");

    shouldBeEqualToString("getComputedStyle(inner).color", "rgb(255, 255, 255)");

    outer.style.backgroundColor = "green";
    outer.insertBefore(document.createElement("span"), inner);

    shouldBeEqualToString("getComputedStyle(inner).color", "rgb(0, 128, 0)");
</script>