LayoutTests/compositing/layers-inside-overflow-scroll.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
   <head>
     <title>Layers inside overflow-scroll</title>

     <style type="text/css" media="screen">

     #container {
       width: 300px;
       margin: 10px;
       border: 1px solid black;
     }

     #details {
      width: 300px;
      height: 150px;
      margin: 10px;
      overflow: auto;
      border: 1px solid black;
     }

     #details > div {
       width: 100%;
       height: 500px;
       font-size: 24pt;
       line-height: 150%;
     }

     .compositing {
       height: 100px;
       width: 100px;
       background-color: red;
       -webkit-transform: translateZ(0);
     }
     </style>
     <script type="text/javascript" charset="utf-8">
       if (window.layoutTestController)
         layoutTestController.waitUntilDone();

       function testOnLoad()
       {
         window.setTimeout(function() {
           document.getElementById('details').scrollTop = 100;
           if (window.layoutTestController)
             layoutTestController.notifyDone();
         }, 0);
       }

       window.addEventListener('load', function() {
         var video = document.getElementById('video');
         video.addEventListener('loadeddata', testOnLoad, false);
         video.src = 'resources/video.' + (video.canPlayType('video/ogg') ? 'ogv' : 'mp4');
       }, false);
     </script>
   </head>
   <body>
       <p>The red box in the overflow:scroll div should be scrolled out of view.</p>
         <div id="container">
           <video id="video" width="300" height="200"></video>
         </div>

         <div id="details">
             <div>
               <div class="compositing"></div>
             </div>
         </div>

   </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Layers inside overflow-scroll</title>

	<style type="text/css" media="screen">

	#container {
	width: 300px;
	margin: 10px;
	border: 1px solid black;
	}

	#details {
	width: 300px;
	height: 150px;
	margin: 10px;
	overflow: auto;
	border: 1px solid black;
	}

	#details > div {
	width: 100%;
	height: 500px;
	font-size: 24pt;
	line-height: 150%;
	}

	.compositing {
	height: 100px;
	width: 100px;
	background-color: red;
	-webkit-transform: translateZ(0);
	}
	</style>
	<script type="text/javascript" charset="utf-8">
	if (window.layoutTestController)
	layoutTestController.waitUntilDone();

	function testOnLoad()
	{
	window.setTimeout(function() {
	document.getElementById('details').scrollTop = 100;
	if (window.layoutTestController)
	layoutTestController.notifyDone();
	}, 0);
	}

	window.addEventListener('load', function() {
	var video = document.getElementById('video');
	video.addEventListener('loadeddata', testOnLoad, false);
	video.src = 'resources/video.' + (video.canPlayType('video/ogg') ? 'ogv' : 'mp4');
	}, false);
	</script>
	</head>
	<body>
	<p>The red box in the overflow:scroll div should be scrolled out of view.</p>
	<div id="container">
	<video id="video" width="300" height="200"></video>
	</div>

	<div id="details">
	<div>
	<div class="compositing"></div>
	</div>
	</div>

	</body>
	</html>