LayoutTests/fast/shadow-dom/scoped-style-invalidation.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<div></div>
<div class=styled><div></div></div>
<div><div class=styled></div></div>

<div id=host></div>

<script>
var host = document.getElementById('host');
var shadow = host.attachShadow({mode: 'closed'});
shadow.innerHTML = `
    <div></div>
    <div class=styled><div></div></div>
    <div><div class=styled></div></div>
`;

function testInvalidation(scope, cssText, shouldInvalidate, name)
{
    test(() => {
        internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();

        var style = document.createElement("style");
        style.textContent = cssText;
        scope.appendChild(style);

        var styledDiv = scope.querySelectorAll("div.styled");
        for (var div of styledDiv)
            assert_equals(internals.styleChangeType(div), shouldInvalidate ? "InlineStyleChange" : "NoStyleChange");

        var notStyledDiv = scope.querySelectorAll("div:not(.styled)");
        for (var div of notStyledDiv)
            assert_equals(internals.styleChangeType(div), "NoStyleChange");
    }, name);
}

testInvalidation(document.body, ".styled { color: red }", true, "Test that adding stylesheet with matching selector invalidates in document scope");
testInvalidation(document.body, ".nothere { color: red }", false, "Test that adding stylesheet without matching selector does not invalidate in document scope");
testInvalidation(shadow, ".styled { color: red }", true, "Test that adding stylesheet with matching selector invalidates in shadow scope");
testInvalidation(shadow, ".nothere { color: red }", false, "Test that adding stylesheet without matching selector does not invalidate in shadow scope");

</script>