src/third_party/WebKit/LayoutTests/compositing/masks/simple-composited-mask.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <title>Simple composited masks</title>
   6   <style type="text/css" media="screen">
   7       #container {
   8         height: 560px;
   9         width: 260px;
  10         border: 1px solid black;
  11         display: inline-block;
  12       }
  13       .box {
  14         position: relative;
  15         width: 200px;
  16         height: 200px;
  17         margin: 30px;
  18         border: 10px solid black;
  19         background-color:rgba(100, 100, 255, 0.8);
  20         -webkit-box-sizing: border-box;
  21         -webkit-box-shadow: black 0 4px 4px;
  22       }
  23
  24       .compositing {
  25         transform: translateZ(0);
  26       }
  27
  28       #container .masked {
  29         -webkit-mask-image: url(../resources/alpha-gradient.png);
  30         -webkit-mask-repeat: no-repeat;
  31       }
  32
  33       #container .masked2 {
  34         -webkit-mask-image: url(../resources/alpha-gradient.png);
  35         -webkit-mask-repeat: repeat;
  36         -webkit-mask-size: 25%;
  37       }
  38
  39   </style>
  40 </head>
  41 <body>
  42
  43   <p>Testing masks on compositing layers. Left and right columns should look the same.</p>
  44   <div id="container">
  45     <div class="masked box"></div>
  46     <div class="masked2 box"></div>
  47   </div>
  48
  49   <div id="container">
  50     <div class="compositing masked box"></div>
  51     <div class="compositing masked2 box"></div>
  52   </div>
  53
  54 </body>
  55 </html>