LayoutTests/compositing/media-controls-bar-appearance.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <style>
         div {
             position: relative;
             height: 100px;
             width: 100px;
         }
         .media-controls-dark {
             -webkit-appearance: media-controls-dark-bar-background;
         }
         .media-controls-light {
             -webkit-appearance: media-controls-light-bar-background;
         }
         .with-layer {
             -webkit-transform: translate3d(0, 0, 0);
         }
     </style>
     <script>
         if (window.testRunner)
             testRunner.dumpAsText();

         function dumpLayers()
         {
             var layersResult = document.getElementById('layers');
             if (window.testRunner)
                 layersResult.innerText = window.internals.layerTreeAsText(document);

         }
         window.addEventListener('load', dumpLayers, false)
     </script>
 </head>
 <body>
     <p>These elements should not get their own layers.</p>
     <div class="media-controls-dark">
     </div>
     <div class="media-controls-light">
     </div>
     <p>These elements explicitly request layers.</p>
     <div class="media-controls-dark with-layer">
     </div>
     <div class="media-controls-light with-layer">
     </div>
 <pre id="layers"></pre>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	div {
	position: relative;
	height: 100px;
	width: 100px;
	}
	.media-controls-dark {
	-webkit-appearance: media-controls-dark-bar-background;
	}
	.media-controls-light {
	-webkit-appearance: media-controls-light-bar-background;
	}
	.with-layer {
	-webkit-transform: translate3d(0, 0, 0);
	}
	</style>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText();

	function dumpLayers()
	{
	var layersResult = document.getElementById('layers');
	if (window.testRunner)
	layersResult.innerText = window.internals.layerTreeAsText(document);

	}
	window.addEventListener('load', dumpLayers, false)
	</script>
	</head>
	<body>
	<p>These elements should not get their own layers.</p>
	<div class="media-controls-dark">
	</div>
	<div class="media-controls-light">
	</div>
	<p>These elements explicitly request layers.</p>
	<div class="media-controls-dark with-layer">
	</div>
	<div class="media-controls-light with-layer">
	</div>
	<pre id="layers"></pre>
	</body>
	</html>