LayoutTests/animations/trigger-container-scroll-simple.html - WebKit - Git at Google

 <!DOCTYPE html>
 <style>
 body {
     height: 2000px;
 }

 #box {
     position: relative;
     width: 20px;
     height: 20px;
     background-color: blue;
 }

 .animating {
     animation-name: slide;
     animation-duration: 1ms;
     animation-fill-mode: forwards;
     animation-timing-function: step-start;
     -webkit-animation-trigger: container-scroll(20px);
 }

 @-webkit-keyframes slide {
   from {
       left: 0px;
   }
   to {
       left: 100px;
   }
 }
 </style>
 <script>

 var results;
 var box;

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

 function runTest() {
     results = document.getElementById("results");
     box = document.getElementById("box");
     results.innerHTML = "Value before animation is applied: " + window.getComputedStyle(box).left + " (should be auto)<br>";
     box.className = "animating";
     setTimeout(checkValueWithoutScroll, 0);
 }

 function checkValueWithoutScroll() {
     results.innerHTML += "Value with animation but no scroll: " + window.getComputedStyle(box).left + " (should be 0px)<br>";
     window.scrollTo(0, 30);
     setTimeout(checkValueWithScroll, 0);
 }

 function checkValueWithScroll() {
     results.innerHTML += "Value with animation after scroll: " + window.getComputedStyle(box).left + " (should be 100px)<br>";
     if (window.testRunner)
         window.testRunner.notifyDone();
 }

 window.addEventListener("load", runTest, false);

 </script>

 <p>This element should begin animating only when the page scrolls to 20px from
 the top. The animation is almost instantaneous, so it will snap to its final
 position. Remember to scroll to the top of the page before reloading!</p>
 <div id="box"></div>

 <div id="results"></div>
	<!DOCTYPE html>
	<style>
	body {
	height: 2000px;
	}

	#box {
	position: relative;
	width: 20px;
	height: 20px;
	background-color: blue;
	}

	.animating {
	animation-name: slide;
	animation-duration: 1ms;
	animation-fill-mode: forwards;
	animation-timing-function: step-start;
	-webkit-animation-trigger: container-scroll(20px);
	}

	@-webkit-keyframes slide {
	from {
	left: 0px;
	}
	to {
	left: 100px;
	}
	}
	</style>
	<script>

	var results;
	var box;

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

	function runTest() {
	results = document.getElementById("results");
	box = document.getElementById("box");
	results.innerHTML = "Value before animation is applied: " + window.getComputedStyle(box).left + " (should be auto)<br>";
	box.className = "animating";
	setTimeout(checkValueWithoutScroll, 0);
	}

	function checkValueWithoutScroll() {
	results.innerHTML += "Value with animation but no scroll: " + window.getComputedStyle(box).left + " (should be 0px)<br>";
	window.scrollTo(0, 30);
	setTimeout(checkValueWithScroll, 0);
	}

	function checkValueWithScroll() {
	results.innerHTML += "Value with animation after scroll: " + window.getComputedStyle(box).left + " (should be 100px)<br>";
	if (window.testRunner)
	window.testRunner.notifyDone();
	}

	window.addEventListener("load", runTest, false);

	</script>

	<p>This element should begin animating only when the page scrolls to 20px from
	the top. The animation is almost instantaneous, so it will snap to its final
	position. Remember to scroll to the top of the page before reloading!</p>
	<div id="box"></div>

	<div id="results"></div>