blob: c55ed46984ea023e9c90afef7cc7b89d8aa6425e [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
div {
margin: 10px;
}
.test {
height: 200px;
width: 200px;
background-color: blue;
}
.slow {
-webkit-mask-image: url('resources/slow-image-load.pl?name=mask.png&mimetype=image/png&loadtime=1'); /* takes 1 second to load */
}
.slow-box {
-webkit-mask-image: url('resources/slow-image-load.pl?name=mask.png&mimetype=image/png&loadtime=1'); /* takes 1 second to load */
}
</style>
</head>
<body>
<p>Tests that masked elements do not render until their mask images are fully loaded. You should not see any blue boxes below.</p>
<div class="slow test"></div>
<div class="slow-box test"></div>
<script type="text/javascript" charset="utf-8">
window.setTimeout(function() {
window.stop();
}, 100);
</script>
</body>
</html>