LayoutTests/compositing/tiling/tiled-mask-inwindow.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
     <style>
         .container {
             height: 300px;
             width: 400px;
             border: 2px solid black;
             overflow: hidden;
         }

         .box {
             height: 300px;
             width: 2800px;
             border: 1px solid black;
             background-color: gray;
         }

         .composited {
             transform: translateZ(0);
         }

         .masked {
             -webkit-mask-image: url(../resources/alpha-gradient.png);
             -webkit-mask-repeat: repeat-x;
         }
     </style>
     <script>
         if (window.testRunner) {
             testRunner.dumpAsText();
             testRunner.waitUntilDone();
         }

         function getUIScript()
         {
             return `
             (function() {
                 uiController.removeViewFromWindow(function() {
                     uiController.uiScriptComplete('');
                 });
             })();`
         }

         function dumpTiles(outputId)
         {
             if (window.internals)
                 document.getElementById(outputId).innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_TILE_CACHES);
         }
         function doTest()
         {
             if (!testRunner.runUIScript)
                 return;

             dumpTiles('before-layers');

             testRunner.runUIScript(getUIScript(), function(result) {
                 dumpTiles('after-layers');
                 if (window.testRunner)
                     testRunner.notifyDone();
             });
         }
         window.addEventListener('load', doTest, false);
     </script>
 </head>
 <body>
     <div class="composited container">
         <div class="composited masked box"></div>
     </div>

 <pre id="before-layers">Layer tree goes here</pre>
 <pre id="after-layers">Layer tree goes here</pre>
 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	.container {
	height: 300px;
	width: 400px;
	border: 2px solid black;
	overflow: hidden;
	}

	.box {
	height: 300px;
	width: 2800px;
	border: 1px solid black;
	background-color: gray;
	}

	.composited {
	transform: translateZ(0);
	}

	.masked {
	-webkit-mask-image: url(../resources/alpha-gradient.png);
	-webkit-mask-repeat: repeat-x;
	}
	</style>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	function getUIScript()
	{
	return `
	(function() {
	uiController.removeViewFromWindow(function() {
	uiController.uiScriptComplete('');
	});
	})();`
	}

	function dumpTiles(outputId)
	{
	if (window.internals)
	document.getElementById(outputId).innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_TILE_CACHES);
	}
	function doTest()
	{
	if (!testRunner.runUIScript)
	return;

	dumpTiles('before-layers');

	testRunner.runUIScript(getUIScript(), function(result) {
	dumpTiles('after-layers');
	if (window.testRunner)
	testRunner.notifyDone();
	});
	}
	window.addEventListener('load', doTest, false);
	</script>
	</head>
	<body>
	<div class="composited container">
	<div class="composited masked box"></div>
	</div>

	<pre id="before-layers">Layer tree goes here</pre>
	<pre id="after-layers">Layer tree goes here</pre>
	</body>
	</html>