third_party/WebKit/LayoutTests/css3/calc/simple-composited-mask.html

   1 <!DOCTYPE html>
   2 <style>
   3     #container {
   4         height: 760px;
   5         width: 260px;
   6         border: solid black;
   7         display: inline-block;
   8     }
   9     .box {
  10         position: relative;
  11         width: 200px;
  12         height: 200px;
  13         margin: 30px;
  14         border: 10px solid black;
  15         background-color: rgba(100, 100, 255, 0.8);
  16         -webkit-box-sizing: border-box;
  17         -webkit-box-shadow: black 0 4px 4px;
  18     }
  19
  20     #container .masked-px {
  21         -webkit-mask-image: url(resources/alpha-gradient.png);
  22         -webkit-mask-repeat: repeat;
  23         -webkit-mask-size: calc(50px);
  24     }
  25
  26     #container .masked-percent {
  27         -webkit-mask-image: url(resources/alpha-gradient.png);
  28         -webkit-mask-repeat: repeat;
  29         -webkit-mask-size: calc(25%);
  30     }
  31
  32     #container .masked-percent-px {
  33         -webkit-mask-image: url(resources/alpha-gradient.png);
  34         -webkit-mask-repeat: repeat;
  35         -webkit-mask-size: calc(10% + 30px);
  36     }
  37 </style>
  38 <p>Testing masks on compositing layers.</p>
  39 <div id="container">
  40     <div class="masked-px box"></div>
  41     <div class="masked-percent box"></div>
  42     <div class="masked-percent-px box"></div>
  43 </div>