LayoutTests/compositing/geometry/fixed-position-composited-switch.html - WebKit - Git at Google

 <!DOCTYPE>
 <html>
 <head>
   <title>Creating composited layers for fixed position elements</title>

   <style type="text/css" media="screen">
     #tall {
       height: 100px;
     }

     #fixed {
       width: 300px;
       height: 100px;
       position: fixed;
       top: 30px;
       right: 5px;
       background-color: green;
     }
   </style>
   <script type="text/javascript" charset="utf-8">
     if (window.internals)
       window.internals.settings.setEnableCompositingForFixedPosition(true);

     function doTest()
     {
       var layerTreeOutput = '';

       // If the fixed position element doesn't have its own stacking context then
       // it cannot get a composited layer.
       if (window.testRunner)
         layerTreeOutput += 'Before (should be empty): \n' + testRunner.layerTreeAsText() + '\n';

       // Adding a z-index to the fixed position element will give it a stacking context
       // and allow it to be composited.
       document.getElementById('fixed').style.zIndex = '1';

       if (window.testRunner) {
         layerTreeOutput += 'After (should not be empty): \n' + testRunner.layerTreeAsText();
         document.getElementById('layertree').innerText = layerTreeOutput;
         testRunner.dumpAsText();
       }

       // Adding a transform to the container will turn off compositing.
       document.getElementById('container').style.webkitTransform = 'translateX(0)';
       if (window.testRunner) {
         layerTreeOutput += 'After (should be empty): \n' + testRunner.layerTreeAsText();
         document.getElementById('layertree').innerText = layerTreeOutput;
         testRunner.dumpAsText();
       }

     }

     window.addEventListener("load", doTest, false);

     </script>
 </head>
 <body>
 <!-- Fixed position element should get its own layer -->
 <pre id="layertree"></pre>
 <div id="tall"></div>
 <div id="container">
   <div id="fixed"></div>
 </div>
 </body>
 </html>
	<!DOCTYPE>
	<html>
	<head>
	<title>Creating composited layers for fixed position elements</title>

	<style type="text/css" media="screen">
	#tall {
	height: 100px;
	}

	#fixed {
	width: 300px;
	height: 100px;
	position: fixed;
	top: 30px;
	right: 5px;
	background-color: green;
	}
	</style>
	<script type="text/javascript" charset="utf-8">
	if (window.internals)
	window.internals.settings.setEnableCompositingForFixedPosition(true);

	function doTest()
	{
	var layerTreeOutput = '';

	// If the fixed position element doesn't have its own stacking context then
	// it cannot get a composited layer.
	if (window.testRunner)
	layerTreeOutput += 'Before (should be empty): \n' + testRunner.layerTreeAsText() + '\n';

	// Adding a z-index to the fixed position element will give it a stacking context
	// and allow it to be composited.
	document.getElementById('fixed').style.zIndex = '1';

	if (window.testRunner) {
	layerTreeOutput += 'After (should not be empty): \n' + testRunner.layerTreeAsText();
	document.getElementById('layertree').innerText = layerTreeOutput;
	testRunner.dumpAsText();
	}

	// Adding a transform to the container will turn off compositing.
	document.getElementById('container').style.webkitTransform = 'translateX(0)';
	if (window.testRunner) {
	layerTreeOutput += 'After (should be empty): \n' + testRunner.layerTreeAsText();
	document.getElementById('layertree').innerText = layerTreeOutput;
	testRunner.dumpAsText();
	}

	}

	window.addEventListener("load", doTest, false);

	</script>
	</head>
	<body>
	<!-- Fixed position element should get its own layer -->
	<pre id="layertree"></pre>
	<div id="tall"></div>
	<div id="container">
	<div id="fixed"></div>
	</div>
	</body>
	</html>