LayoutTests/compositing/contents-opaque/background-color.html - WebKit - Git at Google

 <html>
     <head>
         <style type="text/css">
             .box {
                 width: 100px;
                 height: 100px;
             }
             .opaque {
                 background-color: green;
             }
             .translucent {
                 background-color: rgba(0, 255, 0, 0.5);
             }
             .composited {
                 -webkit-transform: translateZ(0);
             }
         </style>
         <script type="text/javascript">
             if (window.testRunner)
                 testRunner.dumpAsText();

             function doTest() {
                 if (window.testRunner && window.internals)
                     document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
             }
             window.addEventListener('load', doTest, false);
         </script>
     </head>
     <body>
         <!-- Box with transparent background. -->
         <!-- GraphicsLayer::contentsOpaque for this box should be false. -->
         <div class="box composited"></div>
         <!-- Box with translucent background color. -->
         <!-- GraphicsLayer::contentsOpaque for this box should be false. -->
         <div class="box translucent composited"></div>
         <!-- Box with opaque background color. -->
         <!-- GraphicsLayer::contentsOpaque for this box should be true. -->
         <div class="box opaque composited"></div>

         <pre id="layertree"></pre>
     </body>
 </html>
	<html>
	<head>
	<style type="text/css">
	.box {
	width: 100px;
	height: 100px;
	}
	.opaque {
	background-color: green;
	}
	.translucent {
	background-color: rgba(0, 255, 0, 0.5);
	}
	.composited {
	-webkit-transform: translateZ(0);
	}
	</style>
	<script type="text/javascript">
	if (window.testRunner)
	testRunner.dumpAsText();

	function doTest() {
	if (window.testRunner && window.internals)
	document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
	}
	window.addEventListener('load', doTest, false);
	</script>
	</head>
	<body>
	<!-- Box with transparent background. -->
	<!-- GraphicsLayer::contentsOpaque for this box should be false. -->
	<div class="box composited"></div>
	<!-- Box with translucent background color. -->
	<!-- GraphicsLayer::contentsOpaque for this box should be false. -->
	<div class="box translucent composited"></div>
	<!-- Box with opaque background color. -->
	<!-- GraphicsLayer::contentsOpaque for this box should be true. -->
	<div class="box opaque composited"></div>

	<pre id="layertree"></pre>
	</body>
	</html>