LayoutTests/fast/repaint/animation-after-layer-scroll.html - WebKit - Git at Google

 <html>
 <head>
 <script>jsTestIsAsync = true;</script>
 <script src="../../resources/js-test-pre.js"></script>
 <script>
     description("Test that animated gif on layer that is scrolled to view starts animating.");
     function startTrackingRepaints()
     {
         window.internals.startTrackingRepaints();
         document.getElementById('scroller').scrollTop = 800;
         testRunner.display();

         setTimeout(logRepaints, 200);
     }

     function logRepaints()
     {
         layerTreeAsText =  window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
         window.internals.stopTrackingRepaints();

         shouldBeTrue("layerTreeAsText.indexOf('repaint rect') > -1");

         finishJSTest();
     }

     function test()
     {
         testRunner.display();
         setTimeout(startTrackingRepaints, 200);
     }

     function start() {
         if (!window.testRunner || !window.internals)
             return;

         var img = new Image();
         img.onload = test;
         img.src = "resources/animated.gif";
     }
 </script>
 </head>
 <body onload="start()">
 <div style="overflow:scroll; height:200px; width:200px; border: 2px solid blue" id=scroller>
 <div style="-webkit-transform: translateZ(0);">
 <div style="height:800px"></div>
 <img src="resources/animated.gif" id=anim>
 <div style="height:800px"></div>
 </div>
 </div>
 <script src="../../resources/js-test-post.js"></script>
 </html>
	<html>
	<head>
	<script>jsTestIsAsync = true;</script>
	<script src="../../resources/js-test-pre.js"></script>
	<script>
	description("Test that animated gif on layer that is scrolled to view starts animating.");
	function startTrackingRepaints()
	{
	window.internals.startTrackingRepaints();
	document.getElementById('scroller').scrollTop = 800;
	testRunner.display();

	setTimeout(logRepaints, 200);
	}

	function logRepaints()
	{
	layerTreeAsText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
	window.internals.stopTrackingRepaints();

	shouldBeTrue("layerTreeAsText.indexOf('repaint rect') > -1");

	finishJSTest();
	}

	function test()
	{
	testRunner.display();
	setTimeout(startTrackingRepaints, 200);
	}

	function start() {
	if (!window.testRunner \|\| !window.internals)
	return;

	var img = new Image();
	img.onload = test;
	img.src = "resources/animated.gif";
	}
	</script>
	</head>
	<body onload="start()">
	<div style="overflow:scroll; height:200px; width:200px; border: 2px solid blue" id=scroller>
	<div style="-webkit-transform: translateZ(0);">
	<div style="height:800px"></div>
	<img src="resources/animated.gif" id=anim>
	<div style="height:800px"></div>
	</div>
	</div>
	<script src="../../resources/js-test-post.js"></script>
	</html>