| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>size of box zoom test</title> |
| <style> |
| body { |
| background: silver; |
| } |
| #container { |
| background: white; |
| width: 500px; |
| height: 50px; |
| } |
| #ruler > div { |
| float: left; |
| width: 49px; |
| border-right: 1px solid black; |
| text-align: right; |
| height: 50px; |
| } |
| #test { |
| clear: left; |
| position: absolute; |
| top: 30px; |
| } |
| #test > div { |
| clear: left; |
| } |
| #test > div > div { |
| float: left; |
| width: 5px; |
| height: 10px; |
| background: navy; |
| } |
| #console { |
| clear: left; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="container"> |
| <div id="ruler"></div> |
| <div id="test"><div></div></div> |
| </div> |
| </body> |
| <script> |
| var testContainer = document.getElementById('test'); |
| var rulerElement = document.getElementById('ruler'); |
| |
| function init() |
| { |
| rulerElement.innerHTML = ''; |
| for (var i = 0; i < 10; i++) { |
| rulerElement.appendChild(document.createElement('div')); |
| rulerElement.lastChild.appendChild(document.createTextNode(50 + i * 50)); |
| } |
| } |
| |
| function test(zoom) |
| { |
| var testElement = document.createElement('div'); |
| testElement.style.zoom = zoom + '%'; |
| for (var i = 0; i < 100; i++) |
| testElement.appendChild(document.createElement('div')); |
| testContainer.appendChild(testElement); |
| } |
| |
| init(); |
| test(100); |
| test(65); |
| test(30); |
| |
| </script> |
| </html> |
