<script>
if (testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}
</script>
<style>
@keyframes color-keyframes {
    from { color: red; }
    to {  color: green; }
}
.color-animation {
    animation-duration: 0.5s;
    animation-name: color-keyframes;
}
#test { position: relative; }
</style>
<div id=test>
Test that a simple animation on an element with a layer doesn't generate compositing updates.
</div>
<script>
let initialCompositingUpdateCount = 0;

if (window.internals)
    internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();

setTimeout(() => {
    test.className = "color-animation";
    if (window.internals) {
        internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
        initialCompositingUpdateCount = internals.compositingUpdateCount();
    }
}, 0);

test.onanimationend = () => {
    if (!window.internals)
        return;
    log.innerHTML += `compositingUpdateCount: ${internals.compositingUpdateCount() - initialCompositingUpdateCount}`;
    testRunner.notifyDone();
};

</script>
<div id=log></div>