src/third_party/WebKit/LayoutTests/css3/masking/mask-repeat-space-padding-expected.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3     <head>
   4         <style>
   5             #back {
   6                 width: 1000px;
   7                 height: 600px;
   8                 background-color: green;
   9             }
  10             #front {
  11                 width: 800px;
  12                 height: 400px;
  13                 background-color: red;
  14                 border: 50px solid blue;
  15                 padding: 50px;
  16             }
  17         </style>
  18         <script>
  19             var sizeX = 121, sizeY = 93, spaceX = 9, spaceY = 0, width = 900, height = 500;
  20
  21             var urls = Array(), size = Array(), position = Array(), repeat = Array(),
  22                 origin = Array(), clip = Array();
  23
  24             function addMasks() {
  25                 for (var x = 0; x < width; x += sizeX + spaceX) {
  26                     for (var y = 0; y < height; y += sizeY + spaceY) {
  27                         urls.push("url(resources/circle.png)");
  28                         size.push(sizeX + "px " + sizeY + "px");
  29                         position.push(x + "px " + y + "px");
  30                     }
  31                 }
  32
  33                 div = document.getElementById("front");
  34
  35                 div.style.cssText += "-webkit-mask-image: " + urls.join(", ") + ";" +
  36                                      "-webkit-mask-size: " + size.join(", ")  + ";" +
  37                                      "-webkit-mask-position: " + position.join(", ") + ";" +
  38                                      "-webkit-mask-repeat: no-repeat;" +
  39                                      "-webkit-mask-origin: padding-box;" +
  40                                      "-webkit-mask-clip: padding-box;";
  41            }
  42        </script>
  43     </head>
  44
  45     <body onload="addMasks()">
  46         <div id="back">
  47             <div id="front" />
  48         </div>
  49     </body>
  50 </html>
  51