LayoutTests/webanimations/partly-accelerated-transition-by-removing-property.html - WebKit - Git at Google

 <!DOCTYPE html>
 <body>
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 <script src="resources/request-frames-until-true.js"></script>
 <style>

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

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

 promise_test(async t => {
     const target = document.getElementById("target");

     const acceleratedAnimationsStarted = async numberOfAnimations => {
         return requestFramesUntilTrue(
             () => internals.acceleratedAnimationsForElement(target).length == numberOfAnimations,
             () => !"acceleratedAnimationsForElement" in window.internals);
     };

     // Set initial styles.
     target.style.opacity = "0.5";
     target.style.marginLeft = "100px";

     await new Promise(setTimeout);

     // Now update styles to trigger a transition for properties, only one of which should yield an accelerated animation.
     target.style.removeProperty("opacity");
     target.style.removeProperty("margin-left");
     target.style.transitionProperty = "margin-left opacity";
     target.style.transitionDuration = "1s";

     // Wait a few frames for the opacity animation to be commited.
     await acceleratedAnimationsStarted(1);
 }, "Transtioning two properties, one of which can be accelerated while the other cannot, yields only one accelerated animation.");

 </script>
 </body>
	<!DOCTYPE html>
	<body>
	<script src="../resources/testharness.js"></script>
	<script src="../resources/testharnessreport.js"></script>
	<script src="resources/request-frames-until-true.js"></script>
	<style>

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

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

	promise_test(async t => {
	const target = document.getElementById("target");

	const acceleratedAnimationsStarted = async numberOfAnimations => {
	return requestFramesUntilTrue(
	() => internals.acceleratedAnimationsForElement(target).length == numberOfAnimations,
	() => !"acceleratedAnimationsForElement" in window.internals);
	};

	// Set initial styles.
	target.style.opacity = "0.5";
	target.style.marginLeft = "100px";

	await new Promise(setTimeout);

	// Now update styles to trigger a transition for properties, only one of which should yield an accelerated animation.
	target.style.removeProperty("opacity");
	target.style.removeProperty("margin-left");
	target.style.transitionProperty = "margin-left opacity";
	target.style.transitionDuration = "1s";

	// Wait a few frames for the opacity animation to be commited.
	await acceleratedAnimationsStarted(1);
	}, "Transtioning two properties, one of which can be accelerated while the other cannot, yields only one accelerated animation.");

	</script>
	</body>