<!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>