LayoutTests/http/tests/misc/slow-loading-mask.html - WebKit - Git at Google

 <!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>
	<!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>