third_party/WebKit/LayoutTests/fast/backgrounds/mask-box-image.html

   1 <html>
   2     <head>
   3         <style>
   4             .container {
   5                 display: inline-block;
   6                 border: 1px solid black;
   7                 margin: 20px;
   8             }
   9
  10             .scaled {
  11                 transform: scale(1.0001);
  12                 -webkit-transform-origin: top left;
  13             }
  14
  15             .box {
  16                 width: 100px;
  17                 height: 100px;
  18                 background-color: black;
  19                 margin: 10px;
  20             }
  21
  22             .mask3 {
  23                 -webkit-mask-box-image: url(resources/dot.png) 3 stretch stretch;
  24             }
  25
  26             .mask6 {
  27                 -webkit-mask-box-image: url(resources/dot.png) 6 stretch stretch;
  28             }
  29         </style>
  30     </head>
  31     <body>
  32         <!-- Other than the scale, left and right sides should look the same. -->
  33         <div class="container">
  34             <div class="mask3 box"></div>
  35             <div class="mask6 box"></div>
  36         </div>
  37         <div class="scaled container">
  38             <div class="mask3 box"></div>
  39             <div class="mask6 box"></div>
  40         </div>
  41     </body>
  42 </html>