replace-filling-transform.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: green;
         }

        .running {
            animation: anim1 0.1s ease 0s forwards;
         }

         #correctposition {
             position: absolute;
             height: 100px;
             width: 100px;
             background-color: red;
             transform: translate3d(50px, 200px, 0);
         }

         @keyframes anim1 {
           from {
             transform: translate3d(100px, 0, 0);
           }
           to {
             transform: translate3d(200px, 0, 0);
           }
         }

         @keyframes anim2 {
           from {
             transform: translate3d(50px, 0, 0);
           }
           to {
             transform: translate3d(50px, 200px, 0);
           }
         }
    </style>
    <script>
        'use strict';
        var box;
        var expectedValue = "matrix(1, 0, 0, 1, 50, 200)";

        function testState()
        {
            var result = document.getElementById("result");
            var computedValue = window.getComputedStyle(box).transform;

            if (computedValue == expectedValue)
                result.innerHTML = "PASS - final state was " + expectedValue;
            else
                result.innerHTML = "FAIL - final state was " + computedValue + " expected " + expectedValue;

            requestAnimationFrame(function() {
                requestAnimationFrame(function() {
                    if (window.testRunner)
                        testRunner.notifyDone();
                });
            });
        }

        function swapAnim()
        {
            // remove this listener
            box.removeEventListener("animationend", swapAnim);
            // add the test listener
            box.addEventListener("animationend", testState, false);
            // change the animation
            box.style.animation = "anim2 0.1s ease 0s forwards";
        }

        function setup()
        {
            box = document.getElementById("box");
            document.addEventListener("animationend", swapAnim, false);
            // start the animation
            box.classList.add('running');
        }

        if (window.testRunner) {
            testRunner.waitUntilDone();
        }

        window.addEventListener("load", setup, false);
    </script>
</head>
<body>
<!--
This sets up two animations. It runs the first and then triggers the 2nd. The first fills
forwards, but should still be replaced by the second. The first is a horizontal animation, the second is
vertical, so the box should end up translated vertically down the page.
-->
<div id="correctposition">
</div>
<div id="box">
</div>
<div id="result">
</div>
</body>
</html>
chromium/third_party/blink/web_tests/animations/3d/replace-filling-transform.html
