LayoutTests/compositing/visibility/visibility-image-layers-dynamic.html - WebKit - Git at Google

 <!DOCTYPE html>

 <html>
 <head>
   <style>
     .set {
       position: absolute;
       top: 8px;
     }
     .box {
       height: 100px;
       width: 100px;
     }

     .hidden {
       visibility: hidden;
     }

     .container {
       margin: 10px;
       padding: 20px;
     }
     .container.hidden {
       outline: 4px solid red;
     }

     .visible {
       visibility: visible;
     }
     .should-be-hidden {
       background-color: red !important;
     }
     .should-be-visible {
       background-color: green !important;
     }
     .composited {
       -webkit-transform: translateZ(0);
     }

     .visible-indicator {
       background-color: green;
     }

     .hidden-indicator {
       background-color: red;
     }
   </style>
   <script>
     if (window.testRunner) {
       testRunner.dumpAsText();
       testRunner.waitUntilDone();
     }

     function doTest()
     {
       if (window.testRunner)
         document.getElementById('layers1').innerText = window.internals.layerTreeAsText(document);

       window.setTimeout(function() {
         var firstImage = document.querySelectorAll('img')[0];
         firstImage.style.visibility = 'visible';

         if (window.testRunner)
           document.getElementById('layers2').innerText = window.internals.layerTreeAsText(document);

           window.setTimeout(function() {
             var secondContainer = document.querySelectorAll('.container')[1];
             secondContainer.style.visibility = 'visible';

             if (window.testRunner) {
               document.getElementById('layers3').innerText = window.internals.layerTreeAsText(document);
               testRunner.notifyDone();
             }
           }, 0);
       }, 0);
     }
     window.addEventListener('load', doTest, false);
   </script>
 </head>
 <body>
     <!-- Tests dynamic changes of visibility, using directly composited images. -->
     <!-- FIXME: The size of the layer tree dumps effect the size of the layer bounds in this test. So if more
          or less information is added to or removed from the dump, the bounds will also change. -->
     <div class="composited container"><img src="../resources/thiswayup.png" class="hidden composited box"></div>
     <div class="composited hidden container"><img src="../resources/thiswayup.png" class="composited box"></div>
     <div class="composited hidden container"><img src="../resources/thiswayup.png" class="visible composited box"></div>

 <h2>Initial</h2>
 <pre id="layers1"></pre>

 <h2>After step 1</h2>
 <pre id="layers2"></pre>

 <h2>After step 2</h2>
 <pre id="layers3"></pre>
 </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<style>
	.set {
	position: absolute;
	top: 8px;
	}
	.box {
	height: 100px;
	width: 100px;
	}

	.hidden {
	visibility: hidden;
	}

	.container {
	margin: 10px;
	padding: 20px;
	}
	.container.hidden {
	outline: 4px solid red;
	}

	.visible {
	visibility: visible;
	}
	.should-be-hidden {
	background-color: red !important;
	}
	.should-be-visible {
	background-color: green !important;
	}
	.composited {
	-webkit-transform: translateZ(0);
	}

	.visible-indicator {
	background-color: green;
	}

	.hidden-indicator {
	background-color: red;
	}
	</style>
	<script>
	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}

	function doTest()
	{
	if (window.testRunner)
	document.getElementById('layers1').innerText = window.internals.layerTreeAsText(document);

	window.setTimeout(function() {
	var firstImage = document.querySelectorAll('img')[0];
	firstImage.style.visibility = 'visible';

	if (window.testRunner)
	document.getElementById('layers2').innerText = window.internals.layerTreeAsText(document);

	window.setTimeout(function() {
	var secondContainer = document.querySelectorAll('.container')[1];
	secondContainer.style.visibility = 'visible';

	if (window.testRunner) {
	document.getElementById('layers3').innerText = window.internals.layerTreeAsText(document);
	testRunner.notifyDone();
	}
	}, 0);
	}, 0);
	}
	window.addEventListener('load', doTest, false);
	</script>
	</head>
	<body>
	<!-- Tests dynamic changes of visibility, using directly composited images. -->
	<!-- FIXME: The size of the layer tree dumps effect the size of the layer bounds in this test. So if more
	or less information is added to or removed from the dump, the bounds will also change. -->
	<div class="composited container"><img src="../resources/thiswayup.png" class="hidden composited box"></div>
	<div class="composited hidden container"><img src="../resources/thiswayup.png" class="composited box"></div>
	<div class="composited hidden container"><img src="../resources/thiswayup.png" class="visible composited box"></div>

	<h2>Initial</h2>
	<pre id="layers1"></pre>

	<h2>After step 1</h2>
	<pre id="layers2"></pre>

	<h2>After step 2</h2>
	<pre id="layers3"></pre>
	</body>
	</html>