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