| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>layout zoom test</title> |
| <style> |
| #test { |
| width: 500px; |
| height: 1500px; |
| background: skyblue; |
| } |
| #test > div { |
| background: navy; |
| height: 15px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="test"></div> |
| <div id="console"> |
| The box above should be navy blue with no banding effects.<br> |
| </div> |
| </body> |
| <script> |
| var testElement = document.getElementById('test'); |
| var consoleElement = document.getElementById('console'); |
| |
| function init() |
| { |
| testElement.innerHTML = ''; |
| for (var i = 0; i < 100; i++) |
| testElement.appendChild(document.createElement('div')); |
| } |
| |
| function test(zoom) |
| { |
| testElement.style.zoom = zoom + '%'; |
| |
| var lastElementBottom = testElement.lastChild.getBoundingClientRect().bottom; |
| var containerBottom = testElement.getBoundingClientRect().bottom; |
| |
| var tolerance = Math.ceil(1 / (zoom / 100)); |
| if (Math.abs(lastElementBottom - containerBottom) <= tolerance) |
| log('PASS: With zoom of ' + zoom + '% bottom edge of last child lines up with bottom edge of container.'); |
| else |
| log('FAIL: With zoom of ' + zoom + '% bottom edge of last child at ' + lastElementBottom + ', container at ' + containerBottom + '.'); |
| } |
| |
| function log(str) |
| { |
| consoleElement.appendChild(document.createTextNode(str)); |
| consoleElement.appendChild(document.createElement('br')); |
| } |
| |
| init(); |
| test(100); |
| test(110); |
| test(125); |
| test(133); |
| test(150); |
| test(166); |
| test(175); |
| test(200); |
| test(250); |
| test(300); |
| test(400); |
| test(500); |
| test(750); |
| test(1000); |
| test(90); |
| test(80); |
| test(75); |
| test(66); |
| test(50); |
| test(33); |
| test(25); |
| test(10); |
| test(5); |
| </script> |
| </html> |
