<!DOCTYPE html>

<html>
<head>
    <style>
    * {
        box-sizing: border-box;
    }
    .container {
        position: absolute;
        height: 100px;
        width: 100px;
        background-color: green;
        margin: 100px;
    }

    .spinner {
        position: absolute;
        top: -50px;
        left: -50px;
    }
    
    .spinner.animating {
        -webkit-animation: imageSpin 999999999s linear 0s infinite
    }

    .inner {
        width: 50px;
        height: 50px;
    }

    .bordered {
        width: 100px;
        height: 100px;
        border: 20px solid black;
    }

    @-webkit-keyframes imageSpin {
        from {
            -webkit-transform: rotateZ(0deg) translate3d(50px, 50px, 0)
        }

        to {
            -webkit-transform: rotateZ(360deg) translate3d(50px, 50px 0)
        }
    }
    </style>
    <script src="../../resources/ui-helper.js"></script>
    <script>
        if (window.testRunner)
            testRunner.waitUntilDone();
        
        window.addEventListener('load', async () => {
            const box = document.getElementById('spinner');
            box.classList.add('animating');
            const animation = box.getAnimations()[0];

            await animation.ready;
            await UIHelper.renderingUpdate();

            if (window.testRunner)
                testRunner.notifyDone();
        });
    </script>
</head>
<body>

<div class="container">
    <div id="spinner" class="spinner">
        <div class="inner">
            <div class="bordered"></div>
        </div>
    </div>
</div>

</body>
</html>