LayoutTests/animations/no-style-recalc-during-accelerated-animation.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <style>
         #box {
             width: 100px;
             height: 100px;
             background-color: blue;
         }

         .animating {
             animation: move 150ms linear 2;
         }

         @keyframes move {
             from { transform: translateX(0); }
             to   { transform: translateX(500px); }
         }
     </style>
     <script>

         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }

         window.addEventListener("load", () => {
             if (!window.internals || !window.testRunner)
                 return;

             const box = document.getElementById("box");
             const result = document.getElementById("result");

             box.addEventListener("animationstart", () => internals.startTrackingStyleRecalcs());
             box.addEventListener("animationiteration", () => result.innerText = "Got iteration event.\n");
             box.addEventListener("animationend", () => {
                 const numRecalcs = internals.styleRecalcCount();
                 if (numRecalcs > 3)
                     result.innerText += "FAIL: saw " + numRecalcs + " style recalcs during the animation, should only see three."
                 else
                     result.innerText += "PASS: saw three or fewer style recalcs during the animation."

                 if (window.testRunner)
                     testRunner.notifyDone();
             });
             box.classList.add("animating");
         });
     </script>
 </head>
 <body>
 <div id="box"></div>
 <p id="result"></p>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#box {
	width: 100px;
	height: 100px;
	background-color: blue;
	}

	.animating {
	animation: move 150ms linear 2;
	}

	@keyframes move {
	from { transform: translateX(0); }
	to { transform: translateX(500px); }
	}
	</style>
	<script>

	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	window.addEventListener("load", () => {
	if (!window.internals \|\| !window.testRunner)
	return;

	const box = document.getElementById("box");
	const result = document.getElementById("result");

	box.addEventListener("animationstart", () => internals.startTrackingStyleRecalcs());
	box.addEventListener("animationiteration", () => result.innerText = "Got iteration event.\n");
	box.addEventListener("animationend", () => {
	const numRecalcs = internals.styleRecalcCount();
	if (numRecalcs > 3)
	result.innerText += "FAIL: saw " + numRecalcs + " style recalcs during the animation, should only see three."
	else
	result.innerText += "PASS: saw three or fewer style recalcs during the animation."

	if (window.testRunner)
	testRunner.notifyDone();
	});
	box.classList.add("animating");
	});
	</script>
	</head>
	<body>
	<div id="box"></div>
	<p id="result"></p>
	</body>
	</html>