| <!DOCTYPE html> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| #spacer { |
| width: 1000px; |
| height: 1000px; |
| } |
| #target { |
| width: 100px; |
| height: 100px; |
| position: absolute; |
| left: 200px; |
| top: 200px; |
| background-color: green; |
| z-index: -1; |
| } |
| body { |
| margin: 0px; |
| } |
| </style> |
| <script> |
| var rect; |
| var rectAfterScaleAndScroll; |
| var layoutXScroll = 20; |
| var layoutYScroll = 30; |
| var xPos = 200; |
| var yPos = 200; |
| var visualXScroll = 40; |
| var visualYScroll = 50; |
| var expectedX = xPos - layoutXScroll; |
| var expectedY = yPos - layoutYScroll; |
| |
| onload = function() { |
| description("This test ensures that getBoundingClientRect remains relative to the layout viewport under page scale."); |
| |
| var target = document.getElementById('target'); |
| rect = target.getBoundingClientRect(); |
| |
| shouldBe('rect.left', 'xPos'); |
| shouldBe('rect.top', 'yPos'); |
| |
| if (window.internals) { |
| window.scrollTo(layoutXScroll, layoutYScroll); |
| |
| internals.setPageScaleFactor(2.0); |
| internals.setVisualViewportOffset(visualXScroll, visualYScroll); |
| } |
| |
| debug(' '); |
| debug('===getBoundingClientRect==='); |
| debug(' '); |
| rectAfterScaleAndScroll = target.getBoundingClientRect(); |
| |
| shouldBe('rectAfterScaleAndScroll.left', 'expectedX'); |
| shouldBe('rectAfterScaleAndScroll.top', 'expectedY'); |
| shouldBe('rectAfterScaleAndScroll.width', 'rect.width'); |
| shouldBe('rectAfterScaleAndScroll.height', 'rect.height'); |
| |
| rectAfterScaleAndScroll = target.getClientRects()[0]; |
| debug(' '); |
| debug('===getClientRects==='); |
| debug(' '); |
| |
| shouldBe('rectAfterScaleAndScroll.left', 'expectedX'); |
| shouldBe('rectAfterScaleAndScroll.top', 'expectedY'); |
| shouldBe('rectAfterScaleAndScroll.width', 'rect.width'); |
| shouldBe('rectAfterScaleAndScroll.height', 'rect.height'); |
| } |
| </script> |
| <div id="target"></div> |
| <div id="spacer"></div> |
