<html>
<style>
.container {
    background-color: blue;
    width: 200px;
    height: 600px;
    position: absolute;
}
.inert {
    background-color: yellow;
        width: 100px;
    height: 100px;
    position: relative;
}
.target {
    background-color: red;
    width: 100px;
    height: 100px;
    position: relative;
}
.inert:focus-within ~ .target {
    background-color: green;
}
.inert:focus-within ~ .inert > .target {
    background-color: green;
}
.child {
    width: 50px;
    height: 50px;
}
</style>
<div class=container>
    <div class=inert>
        <!--Style change due to to UA style sheet.-->
        <div class="target child" tabindex=1 id=focusTarget>
        </div>
    </div>
    <div class=target>
    </div>
    <div class=inert>
    </div>
    <div class=target>
        <div class="inert child">
        </div>
    </div>
    <div class=inert>
        <div class="target child">
        </div>
    </div>
</div>
<pre id=log></pre>

<script>
function testStyleChangeType(selector, expectedType)
{
    let pass = true;
    const elements = document.querySelectorAll(selector);
    for (var i = 0; i < elements.length; ++i) {
        const type = window.internals.styleChangeType(elements[i]);
        if (type != expectedType) {
            log.textContent += `FAIL ${selector} styleChangeType was ${type} expected ${expectedType}\n`;
            pass = false;
        }
    }
    if (pass)
        log.textContent += "PASS\n";
}

window.onload = function () {
    if (!window.testRunner)
        return;
    testRunner.dumpAsText();

    document.body.offsetLeft;
    focusTarget.focus();

    testStyleChangeType(".target", "InlineStyleChange");
    testStyleChangeType(".container", "NoStyleChange");
    testStyleChangeType(".inert", "NoStyleChange");

    document.body.offsetLeft;
    focusTarget.blur();

    testStyleChangeType(".target", "InlineStyleChange");
    testStyleChangeType(".container", "NoStyleChange");
    testStyleChangeType(".inert", "NoStyleChange");
};
</script>