LayoutTests/webanimations/accelerated-transform-animation-from-scale-zero-and-implicit-to-kefyrame.html - WebKit - Git at Google

 <!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>
	<!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>