| <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] --> |
| <html> |
| <meta name="viewport" content="width=device-width"> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="../../../resources/ui-helper.js"></script> |
| <style> |
| body, html { |
| margin: 0; |
| width: 100%; |
| } |
| |
| body { |
| height: 5000px; |
| } |
| |
| .fixed { |
| width: 100%; |
| height: 50px; |
| background-color: green; |
| position: fixed; |
| left: 0; |
| } |
| |
| #top { |
| top: 0; |
| background-color: green; |
| } |
| |
| #bottom { |
| bottom: 0; |
| background-color: blue; |
| } |
| </style> |
| <script> |
| async function runTest() { |
| jsTestIsAsync = true; |
| |
| await UIHelper.ensureVisibleContentRectUpdate(); |
| |
| topRectBeforeScrolling = document.getElementById("top").getBoundingClientRect(); |
| bottomRectBeforeScrolling = document.getElementById("bottom").getBoundingClientRect(); |
| layoutViewportBeforeScrolling = internals.layoutViewportRect(); |
| |
| const verticalScrollAmount = 2500; |
| scrollBy(0, verticalScrollAmount); |
| |
| topRectAfterScrolling = document.getElementById("top").getBoundingClientRect(); |
| bottomRectAfterScrolling = document.getElementById("bottom").getBoundingClientRect(); |
| layoutViewportAfterScrolling = internals.layoutViewportRect(); |
| |
| document.body.style.height = "100px"; |
| await UIHelper.ensureVisibleContentRectUpdate(); |
| |
| topRectAfterShorteningBody = document.getElementById("top").getBoundingClientRect(); |
| bottomRectAfterShorteningBody = document.getElementById("bottom").getBoundingClientRect(); |
| layoutViewportAfterShorteningBody = internals.layoutViewportRect(); |
| |
| finalDocumentHeight = Math.round(innerHeight * 1.5); |
| document.body.style.height = `${finalDocumentHeight}px`; |
| await UIHelper.ensureVisibleContentRectUpdate(); |
| |
| topRectAfterExtendingBody = document.getElementById("top").getBoundingClientRect(); |
| bottomRectAfterExtendingBody = document.getElementById("bottom").getBoundingClientRect(); |
| layoutViewportAfterExtendingBody = internals.layoutViewportRect(); |
| |
| debug("\nBefore scrolling.") |
| shouldBe("topRectBeforeScrolling.top", "0"); |
| shouldBe("topRectBeforeScrolling.left", "0"); |
| shouldBe("topRectBeforeScrolling.width", "innerWidth"); |
| shouldBe("topRectBeforeScrolling.height", "50"); |
| shouldBeGreaterThanOrEqual("bottomRectBeforeScrolling.top", "innerHeight"); |
| shouldBe("bottomRectBeforeScrolling.left", "0"); |
| shouldBe("bottomRectBeforeScrolling.width", "innerWidth"); |
| shouldBe("bottomRectBeforeScrolling.height", "50"); |
| shouldBe("layoutViewportBeforeScrolling.top", "0"); |
| shouldBe("layoutViewportBeforeScrolling.left", "0"); |
| shouldBe("layoutViewportBeforeScrolling.width", "innerWidth"); |
| shouldBeGreaterThanOrEqual("layoutViewportBeforeScrolling.height", "innerHeight"); |
| |
| debug(`\nAfter scrolling ${verticalScrollAmount}px down.`); |
| shouldBeGreaterThanOrEqual("0", "topRectAfterScrolling.bottom"); |
| shouldBe("topRectAfterScrolling.left", "0"); |
| shouldBe("topRectAfterScrolling.width", "innerWidth"); |
| shouldBe("topRectAfterScrolling.height", "50"); |
| shouldBe("bottomRectAfterScrolling.bottom", "innerHeight"); |
| shouldBe("bottomRectAfterScrolling.left", "0"); |
| shouldBe("bottomRectAfterScrolling.width", "innerWidth"); |
| shouldBe("bottomRectAfterScrolling.height", "50"); |
| shouldBe("layoutViewportAfterScrolling.bottom", `${verticalScrollAmount} + innerHeight`); |
| shouldBe("layoutViewportAfterScrolling.left", "0"); |
| shouldBe("layoutViewportAfterScrolling.width", "innerWidth"); |
| shouldBeGreaterThanOrEqual("layoutViewportAfterScrolling.height", "innerHeight"); |
| |
| debug("\nAfter shortening document height to 100px."); |
| shouldBe("topRectAfterShorteningBody.top", "0"); |
| shouldBe("topRectAfterShorteningBody.left", "0"); |
| shouldBe("topRectAfterShorteningBody.width", "innerWidth"); |
| shouldBe("topRectAfterShorteningBody.height", "50"); |
| shouldBe("bottomRectAfterShorteningBody.bottom", "innerHeight"); |
| shouldBe("bottomRectAfterShorteningBody.left", "0"); |
| shouldBe("bottomRectAfterShorteningBody.width", "innerWidth"); |
| shouldBe("bottomRectAfterShorteningBody.height", "50"); |
| shouldBe("layoutViewportAfterShorteningBody.top", "0"); |
| shouldBe("layoutViewportAfterShorteningBody.left", "0"); |
| shouldBe("layoutViewportAfterShorteningBody.width", "innerWidth"); |
| shouldBe("layoutViewportAfterShorteningBody.height", "innerHeight"); |
| |
| debug("\nAfter extending document height to 1.5x innerHeight.") |
| shouldBe("topRectAfterExtendingBody.top", "0"); |
| shouldBe("topRectAfterExtendingBody.left", "0"); |
| shouldBe("topRectAfterExtendingBody.width", "innerWidth"); |
| shouldBe("topRectAfterExtendingBody.height", "50"); |
| shouldBeGreaterThanOrEqual("bottomRectAfterExtendingBody.top", "innerHeight"); |
| shouldBe("bottomRectAfterExtendingBody.left", "0"); |
| shouldBe("bottomRectAfterExtendingBody.width", "innerWidth"); |
| shouldBe("bottomRectAfterExtendingBody.height", "50"); |
| shouldBe("layoutViewportAfterExtendingBody.top", "0"); |
| shouldBe("layoutViewportAfterExtendingBody.left", "0"); |
| shouldBe("layoutViewportAfterExtendingBody.width", "innerWidth"); |
| shouldBeGreaterThanOrEqual("layoutViewportAfterExtendingBody.height", "innerHeight"); |
| |
| // The layout viewport should not be expanded past document bounds. Before scrolling, the document height |
| // was much taller than the window height, but afterwards, the document height is short enough that we |
| // should clamp the extended layout viewport to its bounds. |
| shouldBeTrue("layoutViewportAfterExtendingBody.height < layoutViewportBeforeScrolling.height"); |
| shouldBe("finalDocumentHeight", "layoutViewportAfterExtendingBody.height"); |
| |
| finishJSTest(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <div class="fixed" id="top"></div> |
| <div class="fixed" id="bottom"></div> |
| </body> |
| </html> |
