mirror of
https://github.com/servo/servo.git
synced 2025-06-25 09:34:32 +01:00
182 lines
6.3 KiB
HTML
182 lines
6.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Viewport: Scroll Event</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="viewport_support.js"></script>
|
|
<script>
|
|
setup({explicit_timeout: true, explicit_done: true})
|
|
</script>
|
|
<style>
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Viewport: Scroll Event</h1>
|
|
<h4>
|
|
Test Description: This test checks that a scroll event is fired against
|
|
the window.visualViewport object when the viewport is scrolled.
|
|
</h4>
|
|
<h2 style="color: red">THIS IS A MANUAL TEST</h2>
|
|
<p id="skip">
|
|
<button id="skipbtn" onclick="skipManualTest();">Skip Test</button>
|
|
</p>
|
|
<h4>Instruction</h4>
|
|
<p id="instruction"></p>
|
|
<button id="continue">Start Test</button>
|
|
<div id="log"></div>
|
|
</body>
|
|
<script>
|
|
var continueBtn = document.getElementById("continue");
|
|
|
|
function continueTest() {
|
|
nextStep(function(instructionText) {
|
|
var instruction = document.getElementById("instruction");
|
|
continueBtn.innerText = "Continue";
|
|
instruction.innerText = instructionText;
|
|
});
|
|
}
|
|
|
|
continueBtn.addEventListener('click', continueTest);
|
|
|
|
var didGetScrollEvent = false;
|
|
var cancelable = undefined;
|
|
var bubbles = undefined;
|
|
|
|
function resetValues() {
|
|
didGetScrollEvent = false;
|
|
cancelable = undefined;
|
|
bubbles = undefined;
|
|
}
|
|
|
|
addManualTestStep(
|
|
function() {
|
|
window.visualViewport.addEventListener('scroll', function(e) {
|
|
didGetScrollEvent = true;
|
|
cancelable = e.cancelable;
|
|
bubbles = e.bubbles;
|
|
});
|
|
document.documentElement.style.overflow = "hidden";
|
|
},
|
|
null,
|
|
'1. Pinch-zoom a little near the "Continue" button but don\'t ' +
|
|
'perform any scrolling.');
|
|
|
|
addManualTestStep(
|
|
function() {
|
|
requestAnimationFrame(continueTest);
|
|
assert_true(didGetScrollEvent, "Got event");
|
|
assert_false(cancelable, "Event is not cancelable");
|
|
assert_false(bubbles, "Event does not bubble");
|
|
},
|
|
'Got scroll event while pinch-zooming',
|
|
'');
|
|
|
|
addManualTestStep(
|
|
resetValues,
|
|
null,
|
|
'2. Scroll in any direction.');
|
|
|
|
addManualTestStep(
|
|
function() {
|
|
requestAnimationFrame(continueTest);
|
|
assert_true(didGetScrollEvent, "Got event");
|
|
assert_false(cancelable, "Event is not cancelable");
|
|
assert_false(bubbles, "Event does not bubble");
|
|
},
|
|
'Panning viewport fires a scroll event',
|
|
'');
|
|
|
|
addManualTestStep(
|
|
function() {
|
|
continueBtn.style.position = "absolute";
|
|
continueBtn.style.right = "10px";
|
|
continueBtn.style.bottom = "10px";
|
|
},
|
|
null,
|
|
'3. Scroll fully to the bottom right and click the continue ' +
|
|
'button.');
|
|
|
|
var offsetLeft;
|
|
var offsetTop;
|
|
addManualTestStep(
|
|
function() {
|
|
resetValues();
|
|
document.documentElement.style.overflow = "";
|
|
document.body.style.width = "500%";
|
|
document.body.style.height = "500%";
|
|
continueBtn.style.position = "";
|
|
continueBtn.style.left = "";
|
|
continueBtn.style.top = "";
|
|
|
|
offsetLeft = window.visualViewport.offsetLeft;
|
|
offsetTop = window.visualViewport.offsetTop;
|
|
|
|
// The visual viewport should be fully scrolled so even if
|
|
// scrollTo does normally "push" the layout viewport with the
|
|
// visual, there should be no change to either offsetValue
|
|
window.scrollTo(10000, 10000);
|
|
|
|
requestAnimationFrame(continueTest);
|
|
assert_equals(window.visualViewport.offsetLeft, offsetLeft,
|
|
"OffsetLeft Unchanged");
|
|
assert_equals(window.visualViewport.offsetTop, offsetTop,
|
|
"OffsetTop Unchanged");
|
|
assert_false(didGetScrollEvent,
|
|
"Should not get view scroll event");
|
|
},
|
|
'scrollTo down and right on a fully scrolled visual viewport ' +
|
|
'shouldn\'t change offsets',
|
|
'');
|
|
|
|
addManualTestStep(
|
|
function() {
|
|
requestAnimationFrame(continueTest);
|
|
assert_false(didGetScrollEvent,
|
|
"Should not get view scroll event");
|
|
resetValues();
|
|
},
|
|
'scrollTo without changing offsets shouldn\'t fire scroll event ' +
|
|
'on view',
|
|
'');
|
|
|
|
addManualTestStep(
|
|
function() {
|
|
requestAnimationFrame(continueTest);
|
|
resetValues();
|
|
window.scrollTo(0, 0);
|
|
},
|
|
null,
|
|
'');
|
|
|
|
addManualTestStep(
|
|
function() {
|
|
// How scrollTo behaves in this case isn't fully spec'd but
|
|
// make sure it's at least rational if it does change the
|
|
// offset values.
|
|
var scrollChangedOffset =
|
|
offsetLeft != window.visualViewport.offsetLeft ||
|
|
offsetTop != window.visualViewport.offsetTop;
|
|
|
|
document.body.style.width = "";
|
|
document.body.style.height = "";
|
|
|
|
assert_equals(didGetScrollEvent, scrollChangedOffset,
|
|
'If the scrollTo changed offsets it must have fired a ' +
|
|
'scroll event');
|
|
},
|
|
'scrollTo must fire scroll event if it changes visualViewport.offsetLeft|Top',
|
|
'6. Pinch-zoom out fully');
|
|
|
|
addManualTestStep(
|
|
function() { continueBtn.remove(); },
|
|
null,
|
|
'Test Complete');
|
|
</script>
|
|
</html>
|