| <!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: 500px; | |
| 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 + '%'; | |
| testElement.appendChild(document.createElement('div')); | |
| testContainer.appendChild(testElement); | |
| } | |
| init(); | |
| test(100); | |
| test(65); | |
| test(30); | |
| </script> | |
| </html> |