third_party/WebKit/LayoutTests/css3/masking/mask-luminance-png.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3     <head>
   4         <style>
   5             body { overflow: hidden; }
   6             #back {
   7                 width: 1000px;
   8                 height: 600px;
   9                 background-color: green;
  10             }
  11             #front {
  12                 width: 800px;
  13                 height: 400px;
  14                 background-color: red;
  15                 border: 50px solid blue;
  16                 padding: 50px;
  17                 -webkit-mask-image: url(resources/dice.png);
  18                 mask-source-type: luminance;
  19                 -webkit-mask-size: 200px auto;
  20                 -webkit-mask-repeat: repeat;
  21                 -webkit-mask-origin: border-box;
  22                 -webkit-mask-clip: border-box;
  23             }
  24         </style>
  25     </head>
  26
  27     <body>
  28         <div id="back">
  29             <div id="front" />
  30         </div>
  31             </body>
  32 </html>
  33