<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 220px;
    height: 220px;
    background-color: green;
    clip-path: url(#chevron);
}
svg {
    height: 0px;
    width: 0px;
}
</style>
<script src="../../resources/js-test-pre.js"></script>
<script>
    jsTestIsAsync = true;
    let repaintRects;

    async function animationFrame()
    {
        return new Promise(requestAnimationFrame);
    }

    async function delayFor(ms)
    {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function renderingUpdate()
    {
        await animationFrame();
        await delayFor(0);
    }

    async function changeClipPathAndFinish()
    {
        if (!window.internals)
            return;

        internals.startTrackingRepaints();
        
        await renderingUpdate();
        await renderingUpdate();
        await renderingUpdate();

        repaintRects = internals.repaintRectsAsText();
        // Look for at least one repaint.
        shouldNotBe("repaintRects.indexOf('rect 8 8 220 220')", "-1");

        internals.stopTrackingRepaints();
        finishJSTest();
    }

    window.addEventListener('load', () => {
        setTimeout(() => {
            changeClipPathAndFinish()
        }, 0);
    }, false);
</script>
</head>
<body>
<div></div>
<svg>
    <clipPath id="chevron">
        <polygon points="0,100 22.222,133.333 8.333,147.222 -13.889,113.889 -47.222,91.667 -33.333,77.778">
        <animateTransform attributeType="XML" attributeName="transform" type="translate" 
            values="0,100;144.444,-44.444" dur="0.5s" repeatCount="indefinite"/>
        </polygon>
    </clipPath>
</svg>
<div id="console"></div>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>