src/third_party/WebKit/LayoutTests/fast/images/repaint-subrect-grid.html

   1 <html>
   2 <head>
   3 <script src="../repaint/resources/text-based-repaint.js"></script>
   4 </head>
   5 <body style="background: url(resources/grid-large.png) no-repeat; background-size: 55px 55px;">
   6     <div id="mask" style="position: absolute; top: -100px; left: -100px;
   7                           background-color: blue; width: 18.33px; height: 18.33px;"></div>
   8     <script>
   9         var pos = [
  10             // First row.
  11             [0, 0],
  12             [0, 18.33],
  13             [0, 36.67],
  14
  15             // Second row.
  16             [18.33, -9.17],
  17             [18.33, 9.17],
  18             [18.33, 27.5],
  19             [18.33, 45.83],
  20
  21             // Third row.
  22             [36.67, 0],
  23             [36.67, 18.33],
  24             [36.67, 36.67],
  25
  26             // Disappear.
  27             [-100, -100],
  28         ];
  29
  30         var currentPos = 0;
  31
  32         function repaintTest()
  33         {
  34             if (currentPos >= pos.length)
  35                 return;
  36
  37             var mask = document.getElementById("mask");
  38             mask.style.top = pos[currentPos][0];
  39             mask.style.left = pos[currentPos][1];
  40             ++currentPos;
  41
  42             // Force a style recalc.
  43             document.body.offsetWidth;
  44
  45             if (window.testRunner)
  46                 repaintTest();
  47             else
  48                 setTimeout("repaintTest();", 1000);
  49         }
  50
  51         onload = runRepaintTest;
  52     </script>
  53 </body>
  54 </html>