| <!DOCTYPE html> <!-- webkit-test-runner [ ScrollAnimatorEnabled=false ] --> |
| <html> |
| <head> |
| <style> |
| .box { |
| width: 200px; |
| height: 200px; |
| } |
| |
| .gallery { |
| overflow: scroll; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../resources/ui-helper.js"></script> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| function clickOnElement(targetElement) { |
| var clientRect = targetElement.getBoundingClientRect(); |
| eventSender.mouseMoveTo(clientRect.x + 5, clientRect.y + 5); |
| eventSender.mouseDown(); |
| } |
| |
| async function runTests() |
| { |
| try { |
| var container = document.getElementById("container"); |
| |
| clickOnElement(container); |
| await UIHelper.keyDown("pageDown"); |
| |
| expectTrue(container.scrollTop != 0, "paging moved container"); |
| let defaultPagePosition = container.scrollTop; |
| let pageProportion = container.scrollTop / container.clientHeight; |
| |
| container.scrollTop = 0; |
| container.style.scrollPaddingTop = "10px"; |
| await UIHelper.keyDown("pageDown"); |
| |
| let expected = (container.clientHeight - 10) * pageProportion; |
| expectTrue(container.scrollTop != 0, "paging moved padded container"); |
| shouldBeCloseTo("container.scrollTop", expected, 1); |
| |
| container.scrollTop = 0; |
| container.style.scrollPaddingTop = "0px"; |
| container.style.scrollPaddingBottom = "10px"; |
| await UIHelper.keyDown("pageDown"); |
| |
| expectTrue(container.scrollTop != 0, "paging moved padded container"); |
| shouldBeCloseTo("container.scrollTop", expected, 1); |
| |
| container.scrollTop = 0; |
| container.style.scrollPaddingTop = "10px"; |
| container.style.scrollPaddingBottom = "10px"; |
| await UIHelper.keyDown("pageDown"); |
| |
| expected = (container.clientHeight - 20) * pageProportion; |
| expectTrue(container.scrollTop != 0, "paging moved padded container"); |
| shouldBeCloseTo("container.scrollTop", expected, 1); |
| } catch (e) { |
| console.log(e); |
| } finally { |
| finishJSTest(); |
| } |
| } |
| |
| function onLoad() |
| { |
| if (window.eventSender) { |
| runTests(); |
| } else { |
| var console = document.getElementById('console'); |
| console.innerText = "This test cannot be run manually." |
| } |
| } |
| </script> |
| </head> |
| <body onload="onLoad();"> |
| <div id="console"></div> |
| <div id="container" class="box" style="overflow: scroll;"> |
| <div class="box" style="background: green;"></div> |
| <div class="box" style="background: red;"></div> |
| <div class="box" style="background: pink;"></div> |
| <div class="box" style="background: yellow;"></div> |
| <div class="box" style="background: orange;"></div> |
| </div> |
| </body> |
| </html> |
