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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3     <head>
   4         <script src="../../resources/run-after-display.js"></script>
   5         <style>
   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             }
  18         </style>
  19         <script>
  20             var sizeX = 121, sizeY = 93, spaceX = 15, spaceY = 9, width = 800, height = 400;
  21
  22             var urls = Array(), size = Array(), position = Array(), repeat = Array(),
  23                 origin = Array(), clip = Array();
  24
  25             function addMasks() {
  26                 for (var x = 0; x < width; x += sizeX + spaceX) {
  27                     for (var y = 0; y < height; y += sizeY + spaceY) {
  28                         urls.push("url(resources/circle-alpha.svg)");
  29                         size.push(sizeX + "px " + sizeY + "px");
  30                         position.push(x + "px " + y + "px");
  31                     }
  32                 }
  33
  34                 div = document.getElementById("front");
  35
  36                 div.style.cssText += "-webkit-mask-image: " + urls.join(", ") + ";" +
  37                                      "-webkit-mask-size: " + size.join(", ")  + ";" +
  38                                      "-webkit-mask-position: " + position.join(", ") + ";" +
  39                                      "-webkit-mask-repeat: no-repeat;" +
  40                                      "-webkit-mask-origin: content-box;" +
  41                                      "-webkit-mask-clip: content-box;";
  42            }
  43        </script>
  44     </head>
  45
  46     <body onload="addMasks()">
  47         <div id="back">
  48             <div id="front" />
  49         </div>
  50         <script>
  51             if (window.testRunner)
  52                 testRunner.waitUntilDone();
  53
  54             runAfterDisplay(function() {
  55                 if (window.testRunner)
  56                     testRunner.notifyDone();
  57             });
  58         </script>
  59     </body>
  60 </html>
  61