LayoutTests/compositing/scrolling/touch-scrolling-repaint.html - WebKit - Git at Google

 <!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
 <html>
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <style>
             .scroller {
                 margin: 10px;
                 width: 300px;
                 padding: 10px;
                 overflow-y: hidden;
                 overflow-x: scroll;
                 border: 8px solid black;
                 -webkit-overflow-scrolling: touch;
             }

             .contents {
                 height: 100px;
                 width: 480px;
                 background-color: red;
                 letter-spacing: 12px;
                 color: white;
                 font-size: 28pt;
             }

             body.changed .contents {
                 background-color: green;
             }
         </style>
         <script>
             if (window.testRunner)
                 testRunner.waitUntilDone();

             function doTest()
             {
                 document.getElementById('scroller2').scrollLeft = 120;
                 document.getElementById('scroller4').scrollLeft = -120;

                 window.setTimeout(function() {
                     document.body.classList.add('changed');
                     if (window.testRunner)
                         testRunner.notifyDone();
                 }, 0);
             }
             window.addEventListener('load', doTest, false);
         </script>
     </head>
     <body>
         <div class="scroller" id="scroller1">
             <div class='contents'>ABCDEFGHIJKLM</div>
         </div>

         <div class="scroller" id="scroller2">
             <div class='contents'>ABCDEFGHIJKLM</div>
         </div>

         <div class="scroller" id="scroller3" dir="rtl">
             <div class='contents'>ABCDEFGHIJKLM</div>
         </div>

         <div class="scroller" id="scroller4" dir="rtl">
             <div class='contents'>ABCDEFGHIJKLM</div>
         </div>
     </body>
 </html>
	<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.scroller {
	margin: 10px;
	width: 300px;
	padding: 10px;
	overflow-y: hidden;
	overflow-x: scroll;
	border: 8px solid black;
	-webkit-overflow-scrolling: touch;
	}

	.contents {
	height: 100px;
	width: 480px;
	background-color: red;
	letter-spacing: 12px;
	color: white;
	font-size: 28pt;
	}

	body.changed .contents {
	background-color: green;
	}
	</style>
	<script>
	if (window.testRunner)
	testRunner.waitUntilDone();

	function doTest()
	{
	document.getElementById('scroller2').scrollLeft = 120;
	document.getElementById('scroller4').scrollLeft = -120;

	window.setTimeout(function() {
	document.body.classList.add('changed');
	if (window.testRunner)
	testRunner.notifyDone();
	}, 0);
	}
	window.addEventListener('load', doTest, false);
	</script>
	</head>
	<body>
	<div class="scroller" id="scroller1">
	<div class='contents'>ABCDEFGHIJKLM</div>
	</div>

	<div class="scroller" id="scroller2">
	<div class='contents'>ABCDEFGHIJKLM</div>
	</div>

	<div class="scroller" id="scroller3" dir="rtl">
	<div class='contents'>ABCDEFGHIJKLM</div>
	</div>

	<div class="scroller" id="scroller4" dir="rtl">
	<div class='contents'>ABCDEFGHIJKLM</div>
	</div>
	</body>
	</html>