<html>
<head>
<style type="text/css">
body {
overflow: hidden; /* hide scrollbars */
}
.container {
border: 2px solid blue;
width: 400px;
}
#masked {
width: 400px;
height: 200px;
background-color: black;
-webkit-mask-image: url(../resources/alpha-blocks.png);
-webkit-mask-position: 0px 0px;
-webkit-mask-size: 200px 200px;
-webkit-mask-repeat: no-repeat;
transform: translateZ(0);
}
#layers {
opacity: 0; /* hide in pixel test */
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.testRunner)
testRunner.dumpAsText();
function dumpLayers()
{
if (window.testRunner)
document.getElementById('layers').textContent = window.internals.layerTreeAsText(document);
}
window.addEventListener('load', dumpLayers, false);
</script>
</head>
<body>
<div class="container">
<div id="masked" onwebkitanimationstart="pauseAnimation()"></div>
</div>
<pre id="layers">Layer tree goes here when testing</pre>
</body>
</html>