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 src="resources/media-testing.js"></script>
     <script src="../media/media-file.js"></script>

     <script type="text/javascript" charset="utf-8">
       function testDone()
       {
         if (window.testRunner)
           testRunner.notifyDone();
       }

       function modifyDocument()
       {
           document.getElementById('details').scrollTop = 100;
       }

       function doTest()
       {
           var video = document.getElementsByTagName('video')[0];
           setupVideo(video, 'resources/video', modifyDocument, testDone);
       }
     </script>
   </head>
   <body onload="doTest()">
       <p>The red box in the overflow:scroll div should be scrolled out of view.</p>
         <div id="container">
           <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 src="resources/media-testing.js"></script>
	<script src="../media/media-file.js"></script>

	<script type="text/javascript" charset="utf-8">
	function testDone()
	{
	if (window.testRunner)
	testRunner.notifyDone();
	}

	function modifyDocument()
	{
	document.getElementById('details').scrollTop = 100;
	}

	function doTest()
	{
	var video = document.getElementsByTagName('video')[0];
	setupVideo(video, 'resources/video', modifyDocument, testDone);
	}
	</script>
	</head>
	<body onload="doTest()">
	<p>The red box in the overflow:scroll div should be scrolled out of view.</p>
	<div id="container">
	<video width="300" height="200"></video>
	</div>

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

	</body>
	</html>