<!DOCTYPE html>
<html>
<head>
<style>

div {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 100px;
    height: 100px;
    outline: 0px solid green;
}

.animated {
    transition: outline 100ms;
    outline: 20px solid green;
}

</style>
</head>
<body>
<div></div>
<script src="../../resources/js-test-pre.js"></script>
<script>

jsTestIsAsync = true;

description("Test that using a CSS Transition to animate the 'outline' property causes repaints.");

(async function () {
    await new Promise(setTimeout);
    window.internals?.startTrackingRepaints();
    const target = document.querySelector("div");
    target.classList.add("animated");

    await new Promise(resolve => target.addEventListener("transitionend", resolve)); 

    shouldBeTrue("window.internals?.repaintRectsAsText().indexOf('(rect 0 0 140 140)') > -1");
    window.internals.stopTrackingRepaints();

    finishJSTest();
})();

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>