object-position-transition.html | Explore in Territory

<!DOCTYPE html>

<html>
    <head>
        <title>Transitioning object-position</title>
        <style>
            #box {
                width: 400px;
                height: 400px;
                object-position:-50px -50px;
                transition-duration: 0.5s;
                transition-timing-function: linear;
                transition-property: object-position;
            }
        </style>
        <script src="../animations/resources/animation-test-helpers.js"></script>
        <script>
            const expectedValues = [
              // [time, element-id, property, expected-value, tolerance]
              [0.25, 'box', 'object-position', "25px 75px", 10]
            ];

            function setupTest()
            {
                document.getElementById('box').style.objectPosition = "100px 200px";
            }
            runTransitionTest(expectedValues, setupTest);
        </script>
    </head>
    <body>
        <img id="box" src="../animations/resources/stripes-100.png">
        <div id="result"></div>
    </body>
</html>

chromium/third_party/blink/web_tests/transitions/object-position-transition.html