LayoutTests/compositing/layer-creation/fixed-position-out-of-view.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
   <style>
     .fixed {
       position: fixed;
       width: 10px;
       height: 10px;
     }
   </style>

   <script type="text/javascript">
     if (window.internals)
       window.internals.settings.setEnableCompositingForFixedPosition(true);

     if (window.testRunner) {
       testRunner.dumpAsText();

       window.addEventListener("load", function() {
         document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
       }, false);
     }
   </script>
 </head>

 <body>
   <div style="height: 1000px">
     <pre id="layertree"></pre>
   </div>

   <!-- Neither of the following elements gets its own layer. -->
   <div class="fixed" style="z-index: -1"></div>
   <div class="fixed" style="z-index: -1; top: -100px"></div>
   <div class="fixed" style="z-index: -1; top: 0px; left: 1000px"></div>

   <!-- This element gets its own layer because it intersects with the viewport. -->
   <div class="fixed" style="z-index: -1; top: 0px; left: 0px"></div>
 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	.fixed {
	position: fixed;
	width: 10px;
	height: 10px;
	}
	</style>

	<script type="text/javascript">
	if (window.internals)
	window.internals.settings.setEnableCompositingForFixedPosition(true);

	if (window.testRunner) {
	testRunner.dumpAsText();

	window.addEventListener("load", function() {
	document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
	}, false);
	}
	</script>
	</head>

	<body>
	<div style="height: 1000px">
	<pre id="layertree"></pre>
	</div>

	<!-- Neither of the following elements gets its own layer. -->
	<div class="fixed" style="z-index: -1"></div>
	<div class="fixed" style="z-index: -1; top: -100px"></div>
	<div class="fixed" style="z-index: -1; top: 0px; left: 1000px"></div>

	<!-- This element gets its own layer because it intersects with the viewport. -->
	<div class="fixed" style="z-index: -1; top: 0px; left: 0px"></div>
	</body>
	</html>