third_party/WebKit/LayoutTests/fast/sub-pixel/layout-boxes-with-zoom.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>layout zoom test</title>
   5     <style>
   6         #test {
   7             width: 500px;
   8             height: 1500px;
   9             background: skyblue;
  10         }
  11         #test > div {
  12             background: navy;
  13             height: 15px;
  14         }
  15     </style>
  16 </head>
  17 <body>
  18     <div id="test"></div>
  19     <div id="console">
  20         The box above should be navy blue with no banding effects.<br>
  21     </div>
  22 </body>
  23 <script>
  24     var testElement = document.getElementById('test');
  25     var consoleElement = document.getElementById('console');
  26
  27     function init()
  28     {
  29         testElement.innerHTML = '';
  30         for (var i = 0; i < 100; i++)
  31             testElement.appendChild(document.createElement('div'));
  32     }
  33
  34     function test(zoom)
  35     {
  36         testElement.style.zoom = zoom + '%';
  37
  38         var lastElementBottom = testElement.lastChild.getBoundingClientRect().bottom;
  39         var containerBottom = testElement.getBoundingClientRect().bottom;
  40
  41         var tolerance = Math.ceil(1 / (zoom / 100));
  42         if (Math.abs(lastElementBottom - containerBottom) <= tolerance)
  43             log('PASS: With zoom of ' + zoom + '% bottom edge of last child lines up with bottom edge of container.');
  44         else
  45             log('FAIL: With zoom of ' + zoom + '% bottom edge of last child at ' + lastElementBottom + ', container at ' + containerBottom + '.');
  46     }
  47
  48     function log(str)
  49     {
  50         consoleElement.appendChild(document.createTextNode(str));
  51         consoleElement.appendChild(document.createElement('br'));
  52     }
  53
  54     init();
  55     test(100);
  56     test(110);
  57     test(125);
  58     test(133);
  59     test(150);
  60     test(166);
  61     test(175);
  62     test(200);
  63     test(250);
  64     test(300);
  65     test(400);
  66     test(500);
  67     test(750);
  68     test(1000);
  69     test(90);
  70     test(80);
  71     test(75);
  72     test(66);
  73     test(50);
  74     test(33);
  75     test(25);
  76     test(10);
  77     test(5);
  78 </script>
  79 </html>