third_party/WebKit/LayoutTests/fast/sub-pixel/size-of-box-with-zoom.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>size of box zoom test</title>
   5     <style>
   6         body {
   7             background: silver;
   8         }
   9         #container {
  10             background: white;
  11             width: 500px;
  12             height: 50px;
  13         }
  14         #ruler > div {
  15             float: left;
  16             width: 49px;
  17             border-right: 1px solid black;
  18             text-align: right;
  19             height: 50px;
  20         }
  21         #test {
  22             clear: left;
  23             position: absolute;
  24             top: 30px;
  25         }
  26         #test > div {
  27             clear: left;
  28         }
  29         #test > div > div {
  30             float: left;
  31             width: 5px;
  32             height: 10px;
  33             background: navy;
  34         }
  35         #console {
  36             clear: left;
  37         }
  38     </style>
  39 </head>
  40 <body>
  41     <div id="container">
  42         <div id="ruler"></div>
  43         <div id="test"><div></div></div>
  44     </div>
  45 </body>
  46 <script>
  47     var testContainer = document.getElementById('test');
  48     var rulerElement = document.getElementById('ruler');
  49
  50     function init()
  51     {
  52         rulerElement.innerHTML = '';
  53         for (var i = 0; i < 10; i++) {
  54             rulerElement.appendChild(document.createElement('div'));
  55             rulerElement.lastChild.appendChild(document.createTextNode(50 + i * 50));
  56         }
  57     }
  58
  59     function test(zoom)
  60     {
  61         var testElement = document.createElement('div');
  62         testElement.style.zoom = zoom + '%';
  63         for (var i = 0; i < 100; i++)
  64             testElement.appendChild(document.createElement('div'));
  65         testContainer.appendChild(testElement);
  66     }
  67
  68     init();
  69     test(100);
  70     test(65);
  71     test(30);
  72
  73 </script>
  74 </html>