<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;
        -webkit-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>