add-keyframes-recalc.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="anim"></div>
<script>
    test(() => assert_not_equals(window.internals, undefined, "Needs window.internals for testing."), "Check that window.internals is defined");
    anim.offsetTop;
</script>
<style>
    @keyframes unused {
        from { color: pink }
        to { color: orange }
    }
</style>
<script>
    test(() =>
        assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 2, "Recalc for style and script.")
    , "Check that adding @keyframes does not cause a style recalc of the anim element when no animations are running.");
</script>
<style>
    #anim {
        color: red;
        animation-name: later;
        animation-duration: 100s;
        animation-timing-function: step-end;
    }
</style>
<script>
    test(() =>
        assert_equals(getComputedStyle(anim).color, "rgb(255, 0, 0)", "Initial color of #anim.")
    , "Check initial color of #anim.");

    anim.offsetTop;
</script>
<style>
    @keyframes later {
        from { color: green }
        to { color: red }
    }
</style>
<script>
    test(() =>
        assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 11, "Full document recalc.")
    , "Check that adding @keyframes after keyframe resolution failed, recalculates whole document");

    test(() =>
        assert_equals(getComputedStyle(anim).color, "rgb(0, 128, 0)", "Color of #anim during animation.")
    , "Check that @keyframes rule applies.");

    anim.offsetTop;
</script>
<style>
    @keyframes later {
        from { color: lime }
        to { color: red }
    }
</style>
<script>
    test(() =>
        assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Recalc of style, script, and #anim.")
    , "Check that adding @keyframes causes a style recalc of the #anim element when an animation is running.");

    test(() =>
        assert_equals(getComputedStyle(anim).color, "rgb(0, 255, 0)", "Color of #anim during animation for new @keyframes.")
    , "Check that the new @keyframes rule for 'later' applies.");

    anim.offsetTop;
</script>
<style>
    @keyframes unused2 {
        from { color: pink }
        to { color: orange }
    }
</style>
<script>
    test(() =>
        assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 3, "Recalc of style, script, and #anim.")
    , "Check that adding unused @keyframes causes a style recalc of the #anim element when an animation is running.");
</script>
chromium/third_party/blink/web_tests/animations/add-keyframes-recalc.html
