<!doctype html>
<html lang="en">
<meta charset="utf-8">
<style>

@keyframes explicit {
    from { transform: scale(0) }
    to   { transform: scale(1) }
}

@keyframes implicit {
    from { transform: scale(0) }
}

div {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0, 1, 0, 1);
}

div.explicit {
    width: 50px;
    height: 50px;
    background: black;
    animation-name: explicit;
}

div.implicit {
    width: 100px;
    height: 100px;
    background: linear-gradient(white, white);
    animation-name: implicit;
}

</style>
<div class="explicit"></div>
<div class="implicit"></div>

<script>

(async function () {
    window.testRunner?.waitUntilDone();
    await new Promise(requestAnimationFrame);
    await new Promise(requestAnimationFrame);
    await new Promise(requestAnimationFrame);
    window.testRunner?.notifyDone();
})();

</script>