LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.html - WebKit - Git at Google

 <!-- webkit-test-runner [ useThreadedScrolling=false ] -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>Opting into composited scrolling</title>
   <style type="text/css" media="screen">
     .container {
       width: 200px;
       height: 200px;
       overflow: scroll;
       margin: 20px;
       border: 1px solid black;
     }

     .scrolled {
       width: 180px;
       height: 90px;
       margin: 10px;
       background-color: gray;
       position: relative;
     }

     .positioned {
       width: 120px;
       height: 240px;
       background-color: green;
       position: absolute;
     }

     #predecessor {
       left: 20px;
       top: 20px;
     }

     #successor {
       left: 160px;
       top: 20px;
     }

     #descendant {
       left: 90px;
       top: 20px;
       background-color: blue;
       z-index: -20;
     }
   </style>
   <script type="text/javascript" charset="utf-8">
     var debugMode = false;

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

     if (window.internals)
       window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);

     function write(str)
     {
       var pre = document.getElementById('console');
       var text = document.createTextNode(str + '\n');
       pre.appendChild(text);
     }

     var iteration = 0;
     function printResult(expectedResult)
     {
       // Force a style recalc.
       document.body.offsetTop;

       if (window.internals) {
         // Force a layout.
         window.internals.boundingBox(container);
         var layerTree = window.internals.layerTreeAsText(document);

         if (!layerTree == !expectedResult)
           write('Iteration ' + iteration.toString() + ': Passed')
         else
           write('Iteration ' + iteration.toString() + ': FAILED')

         if (layerTree) {
           write('Iteration ' + iteration.toString() + ', layer tree');
           if (debugMode)
               write(layerTree);
         } else
           write('Iteration ' + iteration.toString() + ', no layer tree');
       }
       iteration++;
     }

     function doTest()
     {
       var predecessor = document.getElementById('predecessor');
       var successor = document.getElementById('successor');
       var container = document.getElementById('container');
       var firstChild = document.getElementById('firstChild');
       var secondChild = document.getElementById('secondChild');
       var descendant = document.getElementById('descendant');
       var count = 0;

       descendant.style.display = 'none';

       // descendants in stacking order.
       for (i = 0; i < 3; ++i) {
         for (j = 0; j < 5; ++j) {
           for (k = 0; k < 2; ++k) {
             for (l = 0; l < 2; ++l) {
               var minZIndex = 0;
               var maxZIndex = 0;
               if (i == 0) {
                 firstChild.style.zIndex = '1';
                 secondChild.style.zIndex = '3';
                 maxZIndex = 3;
               } else if (i == 1) {
                 firstChild.style.zIndex = '-1';
                 secondChild.style.zIndex = '-3';
                 minZIndex = -3;
               } else {
                 firstChild.style.zIndex = '-1';
                 secondChild.style.zIndex = '3';
                 minZIndex = -1;
                 maxZIndex = 3;
               }

               var sibling = predecessor;
               var toHide = successor;
               if (k == 1) {
                 sibling = successor;
                 toHide = predecessor;
               }

               // The result should be the same if the the element to hide is
               // display:hidden or display:none.
               if (l == 0)
                 toHide.style.display = 'none';
               else
                 toHide.style.display = 'hidden';

               sibling.style.display = '';

               if (j == 0)
                 sibling.style.zIndex = (maxZIndex + 1).toString();
               else if (j == 1)
                 sibling.style.zIndex = (minZIndex - 1).toString();
               else if (j == 2)
                 sibling.style.zIndex = maxZIndex.toString();
               else if (j == 3)
                 sibling.style.zIndex = minZIndex.toString();
               else
                 sibling.style.zIndex = ((minZIndex + maxZIndex) / 2).toString();

               var areContiguous = false;
               if (sibling.style.zIndex > maxZIndex ||
                   sibling.style.zIndex < minZIndex) {
                   // sibling is outside the range of our descendants.
                   areContiguous = true;
               } else if (sibling.style.zIndex < maxZIndex &&
                          sibling.style.zIndex > minZIndex) {
                   // sibling is between our descendants.
                   areContiguous = false;
               } else if (sibling.style.zIndex == minZIndex) {
                   if (minZIndex == 0) {
                       // sibling lies between us (normal flow) and our pos
                       // z-order descendants, so we are not contiguous.
                       areContiguous = false;
                   } else {
                       // sibling's zIndex matches the min; we're only ok if it
                       // appears first.
                       areContiguous = k == 0;
                   }
               } else if (sibling.style.zIndex == maxZIndex) {
                   if (maxZIndex < 0) {
                       // sibling lies between us (normal flow) and neg z-order
                       // descendants, so we are not contiguous.
                       areContiguous = false;
                   } else if (maxZIndex == 0) {
                       // sibling is in the pos z-order list and does not affect
                       // us since we're in the normal flow list and our
                       // descandants are in the neg z-order list.
                       areContiguous = true;
                   } else {
                       // sibling's zIndex matches the max; we're only ok if it
                       // appears after.
                       areContiguous = k == 1;
                   }
               }

               printResult(areContiguous);
             } // for l
           } // for k
         } // for j
       } // for i

       // Now check that we don't promote if we have an out of flow descendant.
       // We need to hide the predecessor and successor so they don't interfere
       // with this experiment.
       predecessor.style.display = 'none';
       successor.style.display = 'none';
       for (i = 0; i < 3; ++i) {
         if (i == 0)
           descendant.style.display = 'hidden';
         else if (i == 1)
           descendant.style.display = '';
         else
           descendant.style.display = 'none';

         // If the out of flow positioned descendant is visible, we cannot opt
         // into composited scrolling.
         printResult(i != 1);
         count++;
       } // for i

     } // function doTest

     window.addEventListener('load', doTest, false);
   </script>
 </head>

 <body>
   <div class="positioned" id="predecessor"></div>
   <div class="container" id="container">
     <div class="scrolled" id="firstChild"></div>
     <div class="scrolled" id="secondChild"></div>
     <div class="positioned" id="descendant"></div>
   </div>
   <div class="positioned" id="successor"></div>
   <pre id="console"></pre>
 </body>
 </html>
	<!-- webkit-test-runner [ useThreadedScrolling=false ] -->
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Opting into composited scrolling</title>
	<style type="text/css" media="screen">
	.container {
	width: 200px;
	height: 200px;
	overflow: scroll;
	margin: 20px;
	border: 1px solid black;
	}

	.scrolled {
	width: 180px;
	height: 90px;
	margin: 10px;
	background-color: gray;
	position: relative;
	}

	.positioned {
	width: 120px;
	height: 240px;
	background-color: green;
	position: absolute;
	}

	#predecessor {
	left: 20px;
	top: 20px;
	}

	#successor {
	left: 160px;
	top: 20px;
	}

	#descendant {
	left: 90px;
	top: 20px;
	background-color: blue;
	z-index: -20;
	}
	</style>
	<script type="text/javascript" charset="utf-8">
	var debugMode = false;

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

	if (window.internals)
	window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);

	function write(str)
	{
	var pre = document.getElementById('console');
	var text = document.createTextNode(str + '\n');
	pre.appendChild(text);
	}

	var iteration = 0;
	function printResult(expectedResult)
	{
	// Force a style recalc.
	document.body.offsetTop;

	if (window.internals) {
	// Force a layout.
	window.internals.boundingBox(container);
	var layerTree = window.internals.layerTreeAsText(document);

	if (!layerTree == !expectedResult)
	write('Iteration ' + iteration.toString() + ': Passed')
	else
	write('Iteration ' + iteration.toString() + ': FAILED')

	if (layerTree) {
	write('Iteration ' + iteration.toString() + ', layer tree');
	if (debugMode)
	write(layerTree);
	} else
	write('Iteration ' + iteration.toString() + ', no layer tree');
	}
	iteration++;
	}

	function doTest()
	{
	var predecessor = document.getElementById('predecessor');
	var successor = document.getElementById('successor');
	var container = document.getElementById('container');
	var firstChild = document.getElementById('firstChild');
	var secondChild = document.getElementById('secondChild');
	var descendant = document.getElementById('descendant');
	var count = 0;

	descendant.style.display = 'none';

	// descendants in stacking order.
	for (i = 0; i < 3; ++i) {
	for (j = 0; j < 5; ++j) {
	for (k = 0; k < 2; ++k) {
	for (l = 0; l < 2; ++l) {
	var minZIndex = 0;
	var maxZIndex = 0;
	if (i == 0) {
	firstChild.style.zIndex = '1';
	secondChild.style.zIndex = '3';
	maxZIndex = 3;
	} else if (i == 1) {
	firstChild.style.zIndex = '-1';
	secondChild.style.zIndex = '-3';
	minZIndex = -3;
	} else {
	firstChild.style.zIndex = '-1';
	secondChild.style.zIndex = '3';
	minZIndex = -1;
	maxZIndex = 3;
	}

	var sibling = predecessor;
	var toHide = successor;
	if (k == 1) {
	sibling = successor;
	toHide = predecessor;
	}

	// The result should be the same if the the element to hide is
	// display:hidden or display:none.
	if (l == 0)
	toHide.style.display = 'none';
	else
	toHide.style.display = 'hidden';

	sibling.style.display = '';

	if (j == 0)
	sibling.style.zIndex = (maxZIndex + 1).toString();
	else if (j == 1)
	sibling.style.zIndex = (minZIndex - 1).toString();
	else if (j == 2)
	sibling.style.zIndex = maxZIndex.toString();
	else if (j == 3)
	sibling.style.zIndex = minZIndex.toString();
	else
	sibling.style.zIndex = ((minZIndex + maxZIndex) / 2).toString();

	var areContiguous = false;
	if (sibling.style.zIndex > maxZIndex \|\|
	sibling.style.zIndex < minZIndex) {
	// sibling is outside the range of our descendants.
	areContiguous = true;
	} else if (sibling.style.zIndex < maxZIndex &&
	sibling.style.zIndex > minZIndex) {
	// sibling is between our descendants.
	areContiguous = false;
	} else if (sibling.style.zIndex == minZIndex) {
	if (minZIndex == 0) {
	// sibling lies between us (normal flow) and our pos
	// z-order descendants, so we are not contiguous.
	areContiguous = false;
	} else {
	// sibling's zIndex matches the min; we're only ok if it
	// appears first.
	areContiguous = k == 0;
	}
	} else if (sibling.style.zIndex == maxZIndex) {
	if (maxZIndex < 0) {
	// sibling lies between us (normal flow) and neg z-order
	// descendants, so we are not contiguous.
	areContiguous = false;
	} else if (maxZIndex == 0) {
	// sibling is in the pos z-order list and does not affect
	// us since we're in the normal flow list and our
	// descandants are in the neg z-order list.
	areContiguous = true;
	} else {
	// sibling's zIndex matches the max; we're only ok if it
	// appears after.
	areContiguous = k == 1;
	}
	}

	printResult(areContiguous);
	} // for l
	} // for k
	} // for j
	} // for i

	// Now check that we don't promote if we have an out of flow descendant.
	// We need to hide the predecessor and successor so they don't interfere
	// with this experiment.
	predecessor.style.display = 'none';
	successor.style.display = 'none';
	for (i = 0; i < 3; ++i) {
	if (i == 0)
	descendant.style.display = 'hidden';
	else if (i == 1)
	descendant.style.display = '';
	else
	descendant.style.display = 'none';

	// If the out of flow positioned descendant is visible, we cannot opt
	// into composited scrolling.
	printResult(i != 1);
	count++;
	} // for i

	} // function doTest

	window.addEventListener('load', doTest, false);
	</script>
	</head>

	<body>
	<div class="positioned" id="predecessor"></div>
	<div class="container" id="container">
	<div class="scrolled" id="firstChild"></div>
	<div class="scrolled" id="secondChild"></div>
	<div class="positioned" id="descendant"></div>
	</div>
	<div class="positioned" id="successor"></div>
	<pre id="console"></pre>
	</body>
	</html>