LayoutTests/webanimations/transform-animation-with-delay-yields-accelerated-animation.html - WebKit - Git at Google

 <!DOCTYPE html>
 <body>
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 <style>

     #target {
         position: absolute;
         left: 0;
         top: 0;
         width: 100px;
         height: 100px;
         background-color: black;
     }

 </style>
 <div id="target"></div>
 <script>

 promise_test(async t => {
     // Start an accelerated "transform" animation with a tiny delay.
     const animation = document.getElementById("target").animate({ transform: "translateX(600px)" }, { duration: 1000 * 1000, delay: 1 });

     // Wait two frames for the accelerated animation to be committed.
     await animation.ready;
     await new Promise(requestAnimationFrame);
     await new Promise(requestAnimationFrame);
     // And another one since the delay means it will take another frame until the animation enters its active phase.
     await new Promise(requestAnimationFrame);

     assert_equals(internals.acceleratedAnimationsForElement(target).length, 1, "There should be an accelerated animation.");
 }, "A transform animation with a delay should run accelerated.");

 </script>
 </body>
	<!DOCTYPE html>
	<body>
	<script src="../resources/testharness.js"></script>
	<script src="../resources/testharnessreport.js"></script>
	<style>

	#target {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
	background-color: black;
	}

	</style>
	<div id="target"></div>
	<script>

	promise_test(async t => {
	// Start an accelerated "transform" animation with a tiny delay.
	const animation = document.getElementById("target").animate({ transform: "translateX(600px)" }, { duration: 1000 * 1000, delay: 1 });

	// Wait two frames for the accelerated animation to be committed.
	await animation.ready;
	await new Promise(requestAnimationFrame);
	await new Promise(requestAnimationFrame);
	// And another one since the delay means it will take another frame until the animation enters its active phase.
	await new Promise(requestAnimationFrame);

	assert_equals(internals.acceleratedAnimationsForElement(target).length, 1, "There should be an accelerated animation.");
	}, "A transform animation with a delay should run accelerated.");

	</script>
	</body>