blob: 6373d9b5bf1c3691f2a890d4e8fe133e6e0ba69e [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncFrameScrollingEnabled=true ] -->
<!DOCTYPE html>
<html>
<head>
<style>
iframe {
display: block;
width: 400px;
height: 250px;
margin: 5px;
}
/* It's important for the test that the main frame does not become scrollable */
#console {
height: 1em;
overflow: hidden;
}
</style>
<script src="../../../resources/js-test-pre.js"></script>
<script src="../../../resources/ui-helper.js"></script>
<script>
window.jsTestIsAsync = true;
var iframeScrollPositionBeforeGlide;
var divScrollPositionBeforeSnap;
function locationInWindowCoordinates(element)
{
var position = {};
position.x = element.offsetLeft;
position.y = element.offsetTop;
while (element.offsetParent) {
position.x = position.x + element.offsetParent.offsetLeft;
position.y = position.y + element.offsetParent.offsetTop;
if (element == document.getElementsByTagName("body")[0])
break;
element = element.offsetParent;
}
return position;
}
function checkForScrollSnap(targetLabel)
{
var iframeTarget = document.getElementById(targetLabel);
var actualPosition = iframeTarget.scrollTop;
if (targetLabel == 'horizontalTarget')
actualPosition = iframeTarget.scrollLeft;
// The div should have snapped back to the previous position
if (actualPosition != divScrollPositionBeforeSnap)
testFailed("div did not snap back to proper location for " + targetLabel +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
else
testPassed("div honored snap points.");
}
async function scrollSnapTest(targetLabel)
{
debug("Testing scroll-snap snap for " + targetLabel + ":");
var iframeTarget = document.getElementById(targetLabel);
var dx = 0;
var dy = 0;
if (targetLabel == 'horizontalTarget') {
divScrollPositionBeforeSnap = iframeTarget.scrollLeft;
dx = -1;
} else {
divScrollPositionBeforeSnap = iframeTarget.scrollTop;
dy = -1;
}
var windowPosition = locationInWindowCoordinates(iframeTarget);
var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
eventSender.monitorWheelEvents();
eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
await UIHelper.waitForScrollCompletion();
checkForScrollSnap(targetLabel);
}
function checkForScrollGlide(targetLabel)
{
var iframeTarget = document.getElementById(targetLabel);
var iframeScrollingElement = window.frames[targetLabel].contentDocument.scrollingElement;
var actualPosition = iframeScrollingElement.scrollTop;
var expectedPosition = iframeTarget.clientHeight;
if (targetLabel == 'horizontalTarget') {
actualPosition = iframeScrollingElement.scrollLeft;
expectedPosition = iframeTarget.clientWidth;
}
// The div should have scrolled (glided) to the next snap point.
if (actualPosition == expectedPosition)
testPassed("div scrolled to next window.");
else
testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
}
async function scrollGlideTest(targetLabel)
{
debug("Testing scroll-snap glide for " + targetLabel + ":");
var iframeTarget = document.getElementById(targetLabel);
var iframeScrollingElement = window.frames[targetLabel].contentDocument.scrollingElement;
var dx = 0;
var dy = 0;
if (targetLabel == 'horizontalTarget') {
iframeScrollPositionBeforeGlide = iframeScrollingElement.scrollLeft;
dx = -1;
} else {
iframeScrollPositionBeforeGlide = iframeScrollingElement.scrollTop;
dy = -1;
}
if (!eventSender)
return;
var windowPosition = locationInWindowCoordinates(iframeTarget);
var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
eventSender.monitorWheelEvents();
eventSender.mouseMoveTo(startPosX, startPosY);
eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'begin');
eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue');
eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
await UIHelper.waitForScrollCompletion();
checkForScrollGlide(targetLabel);
}
async function runTests()
{
await scrollGlideTest('horizontalTarget');
await scrollSnapTest('horizontalTarget');
await scrollGlideTest('verticalTarget');
await scrollSnapTest('verticalTarget');
finishJSTest();
}
window.addEventListener('load', () => {
if (window.internals)
internals.setPlatformMomentumScrollingPredictionEnabled(false);
setTimeout(runTests, 0);
}, false);
</script>
</head>
<body>
<div>Tests that the scroll-snap feature works properly in iframes.</div>
<iframe id="horizontalTarget" class="horizontalGallery" src="resources/horizontal-mainframe.html"></iframe>
<iframe id="verticalTarget" class="verticalGallery" src="resources/vertical-mainframe.html"></iframe>
<div id="console"></div>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>