src/third_party/WebKit/LayoutTests/svg/as-background-image/tiled-background-image.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5   #div1 {
   6     width: 64px;
   7     height: 32px;
   8     background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><circle fill="#3364c2" cx="64" cy="64" r="64" /></svg>');
   9     background-size: 32px 32px;
  10     background-repeat: repeat;
  11   }
  12   #div2 {
  13     width: 64px;
  14     height: 32px;
  15     background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128"><circle fill="#f31900" cx="64" cy="64" r="64" /></svg>');
  16     background-size: 50% 100%;
  17     background-repeat: repeat;
  18   }
  19   #div3 {
  20     width: 64px;
  21     height: 32px;
  22     background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle fill="#f7d72b" cx="16" cy="16" r="16" /></svg>');
  23     background-size: 32px 32px;
  24     background-repeat: repeat;
  25   }
  26   #div4 {
  27     width: 64px;
  28     height: 32px;
  29     background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle fill="#44c400" cx="16" cy="16" r="16" /></svg>');
  30     background-size: 50% 100%;
  31     background-repeat: repeat;
  32   }
  33   p {
  34     font-size: x-small;
  35   }
  36   ::-webkit-scrollbar {
  37     width: 0px;
  38     height: 0px;
  39   }
  40 </style>
  41 <script>
  42   function setScale() {
  43     if (window.eventSender)
  44       window.eventSender.setPageScaleFactor(2, 0, 0);
  45   }
  46 </script>
  47 </head>
  48 <body onload="setScale()">
  49 <div id="div1"></div>
  50 <div id="div2"></div>
  51 <div id="div3"></div>
  52 <div id="div4"></div>
  53 <p>Test for WK110047: This test passes if there are 4 rows of 2 circles and they all have sharp edges.</p>
  54 </body>
  55 </html>