src/third_party/WebKit/LayoutTests/fast/sub-pixel/sub-pixel-composited-layers.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     #test {
   6         margin: 5px;
   7     }
   8     #test.composite > .container {
   9         -webkit-transform: translateZ(0);
  10         opacity: 0.95;
  11     }
  12     .container {
  13         position: absolute;
  14     }
  15     .shifter {
  16         position: absolute;
  17         background-color: black;
  18         width: 12.5px;
  19         height: 12.5px;
  20     }
  21 </style>
  22 </head>
  23 <body>
  24 <div id=test class=composite>
  25 </div>
  26 <script>
  27     function setupGrid(leftOffset, topOffset, leftFraction, topFraction, multiplier)
  28     {
  29         var test = document.getElementById('test');
  30         for (var i = 0; i < 10; i++) {
  31             if (i == 5)
  32                 topOffset += 5;
  33             var leftOffsetj = leftOffset;
  34             for (var j = 0; j < 10; j++) {
  35                 if (j == 5)
  36                     leftOffsetj += 5;
  37                 var container = document.createElement("div");
  38                 var shifter = document.createElement("div");
  39                 container.setAttribute('class', 'container');
  40                 shifter.setAttribute('class', 'shifter');
  41                 container.style.left = (leftOffsetj + j * multiplier + i * leftFraction) + "px"
  42                 container.style.top = (topOffset + i * multiplier + i * topFraction) + "px"
  43                 shifter.style.left = (5 + j * leftFraction) + "px"
  44                 shifter.style.top = (5 + j * topFraction) + "px"
  45                 container.appendChild(shifter);
  46                 test.appendChild(container);
  47             }
  48         }
  49     }
  50
  51     function setupTest()
  52     {
  53         // Vertical shifts:
  54         setupGrid(10, 10, 0, 0.1, 16)
  55         // Horizontal shifts:
  56         setupGrid(300, 10, 0.1, 0, 16);
  57
  58         // And in 8x8 (where exactly 0.5 is more common)
  59         setupGrid(10, 200, 0, 0.125, 20);
  60         setupGrid(300, 200, 0.125, 0, 20);
  61     }
  62
  63     setupTest();
  64 </script>
  65 </body>
  66 </html>