| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #container { |
| width: 500px; |
| height: 500px; |
| position: relative; |
| } |
| #container > div { |
| position: relative; |
| border: 1px solid red; |
| font-size: 20px; |
| width: 100px; |
| height: 100px; |
| } |
| #test-fixed { |
| left: 100px; |
| right: 100px; |
| top: 100px; |
| bottom: 100px; |
| } |
| #test-percentage { |
| left: 20%; |
| right: 20%; |
| top: 10%; |
| bottom: 10%; |
| } |
| #test-viewport { |
| left: 10vw; |
| right: 10vw; |
| top: 10vh; |
| bottom: 10vh; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <p> |
| Reported computed offset should not change with zoom level. |
| </p> |
| <div id="container"> |
| <div id="test-fixed"></div> |
| <div id="test-percentage"></div> |
| <div id="test-viewport"></div> |
| </div> |
| <script> |
| var fixedElement = document.getElementById('test-fixed'); |
| var percentageElement = document.getElementById('test-percentage'); |
| var viewportElement = document.getElementById('test-viewport'); |
| function test(zoomLevel) |
| { |
| document.body.style.zoom = zoomLevel; |
| var windowWidth = "'" + (window.innerWidth / 10) + "px'"; |
| var windowHeight = "'" + (window.innerHeight / 10) + "px'"; |
| |
| shouldBe("window.getComputedStyle(fixedElement).top", "'100px'"); |
| shouldBe("window.getComputedStyle(fixedElement).right", "'100px'"); |
| shouldBe("window.getComputedStyle(fixedElement).bottom", "'100px'"); |
| shouldBe("window.getComputedStyle(fixedElement).left", "'100px'"); |
| |
| shouldBe("window.getComputedStyle(percentageElement).top", "'50px'"); |
| shouldBe("window.getComputedStyle(percentageElement).right", "'100px'"); |
| shouldBe("window.getComputedStyle(percentageElement).bottom", "'50px'"); |
| shouldBe("window.getComputedStyle(percentageElement).left", "'100px'"); |
| |
| shouldBe("window.getComputedStyle(viewportElement).top", windowHeight); |
| shouldBe("window.getComputedStyle(viewportElement).right", windowWidth); |
| shouldBe("window.getComputedStyle(viewportElement).bottom", windowHeight); |
| shouldBe("window.getComputedStyle(viewportElement).left", windowWidth); |
| } |
| test(0.5); |
| test(1.25); |
| test(1.0); |
| </script> |
| </body> |
| </html> |
