LayoutTests/compositing/shared-backing/clipping-and-shared-backing.html - WebKit - Git at Google

 <!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
 <html>
 <head>
     <style>
         .wrapper {
             overflow-x: hidden;
             margin: 20px 50px;
         }

         video {
             display: block;
             width: 300px;
             height: 100px;
         }

         .obscurer {
             position: absolute;
             top: 18px;
             left: 48px;
             width: 320px;
             height: 120px;
             background-color: gray;
         }

         .test {
             position: relative;
             width: 100%;
             height: 300px;
             background-color: green;
         }
     </style>
     <script src="../resources/media-testing.js"></script>
     <script src="../../media/media-file.js"></script>
     <script>
         if (window.testRunner)
             testRunner.waitUntilDone();

         function setupTest()
         {
             var video = document.getElementsByTagName('video')[0];
             setupVideo(video, '../resources/video', null, () => {
                 if (window.testRunner)
                     testRunner.notifyDone();
             });
         }

         window.addEventListener('load', setupTest, false);
     </script>
 </head>
 <body>
     <section class="wrapper">
         <video ></video>
         <div class="test">Some text here</div>
     </section>
     <!--Hide the video; we just want its side-effects -->
     <div class="obscurer"></div>

 </body>
 </html>
	<!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] -->
	<html>
	<head>
	<style>
	.wrapper {
	overflow-x: hidden;
	margin: 20px 50px;
	}

	video {
	display: block;
	width: 300px;
	height: 100px;
	}

	.obscurer {
	position: absolute;
	top: 18px;
	left: 48px;
	width: 320px;
	height: 120px;
	background-color: gray;
	}

	.test {
	position: relative;
	width: 100%;
	height: 300px;
	background-color: green;
	}
	</style>
	<script src="../resources/media-testing.js"></script>
	<script src="../../media/media-file.js"></script>
	<script>
	if (window.testRunner)
	testRunner.waitUntilDone();

	function setupTest()
	{
	var video = document.getElementsByTagName('video')[0];
	setupVideo(video, '../resources/video', null, () => {
	if (window.testRunner)
	testRunner.notifyDone();
	});
	}

	window.addEventListener('load', setupTest, false);
	</script>
	</head>
	<body>
	<section class="wrapper">
	<video ></video>
	<div class="test">Some text here</div>
	</section>
	<!--Hide the video; we just want its side-effects -->
	<div class="obscurer"></div>

	</body>
	</html>