add-keyframes-in-shadow-recalc.html

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="host"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    test(() => assert_not_equals(window.internals, undefined, "Needs window.internals for testing."), "Check that window.internals is defined");

    var root = host.attachShadow({mode:"open"});
    root.innerHTML = "<div></div><div></div><div></div>";
    host.offsetTop;

    test(() => {
        var sheet = document.createElement("style");
        sheet.appendChild(document.createTextNode(`
            @keyframes unused {
                from { color: pink }
                to { color: orange }
            }`));
        root.appendChild(sheet);
        assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1,
            "Recalc for shadow tree, including host and inserted style element.");
    }, "Check that adding @keyframes does not cause a style recalc of the host element when no animations are running.");
</script>

chromium/third_party/blink/web_tests/animations/add-keyframes-in-shadow-recalc.html