| <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; |
| will-change: transform; |
| } |
| |
| #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 = 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> |
