children-affected-by-style-sharing.html

<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
    :focus { outline: none }
    li:focus span { background: green }
    li { list-style-type: none }
    li span { color: green }
</style>
<p>You should see a green rectangle below.</p>
<li>
    <div></div>
</li>
<li>
    <div>
        <span></span>
    </div>
</li>
<li tabIndex="1">
    <div>
        <span id="span">FAIL</span>
    </div>
</li>
<script>
    description("childrenOrSiblingsAffectedBy* disables style sharing");

    document.body.offsetTop;
    document.querySelectorAll("li")[2].focus();
    shouldBeEqualToString("getComputedStyle(span).backgroundColor", "rgb(0, 128, 0)");
</script>

chromium/third_party/blink/web_tests/fast/css/children-affected-by-style-sharing.html