mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -31,32 +31,55 @@ const topRight = document.getElementById("top-right");
|
|||
scrollLeft = () => scroller.scrollLeft;
|
||||
scrollTop = () => scroller.scrollTop;
|
||||
|
||||
function ScrollCounter(test, eventTarget) {
|
||||
this.count = 0;
|
||||
const scrollListener = () => {
|
||||
this.count++;
|
||||
}
|
||||
eventTarget.addEventListener('scroll', scrollListener);
|
||||
test.add_cleanup(() => {
|
||||
eventTarget.removeEventListener('scroll', scrollListener);
|
||||
});
|
||||
}
|
||||
|
||||
promise_test(async t => {
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
|
||||
const scrollCounter = new ScrollCounter(t, scroller);
|
||||
await keyPress(scroller, "ArrowDown");
|
||||
await waitForScrollEnd(scroller, scrollTop, 400);
|
||||
// Make sure we don't jump directly to the new snap position.
|
||||
assert_greater_than(scrollCounter.count, 2);
|
||||
}, "Snaps to bottom-left after pressing ArrowDown");
|
||||
|
||||
promise_test(async t => {
|
||||
scroller.scrollTo(0, 400);
|
||||
assert_equals(scroller.scrollTop, 400, "verify test pre-condition");
|
||||
const scrollCounter = new ScrollCounter(t, scroller);
|
||||
await keyPress(scroller, "ArrowUp");
|
||||
await waitForScrollEnd(scroller, scrollTop, 0);
|
||||
// Make sure we don't jump directly to the new snap position.
|
||||
assert_greater_than(scrollCounter.count, 2);
|
||||
}, "Snaps to top-left after pressing ArrowUp");
|
||||
|
||||
promise_test(async t => {
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
|
||||
const scrollCounter = new ScrollCounter(t, scroller);
|
||||
await keyPress(scroller, "ArrowRight");
|
||||
await waitForScrollEnd(scroller, scrollLeft, 400);
|
||||
// Make sure we don't jump directly to the new snap position.
|
||||
assert_greater_than(scrollCounter.count, 2);
|
||||
}, "Snaps to top-right after pressing ArrowRight");
|
||||
|
||||
promise_test(async t => {
|
||||
scroller.scrollTo(400, 0);
|
||||
assert_equals(scroller.scrollLeft, 400, "verify test pre-condition");
|
||||
const scrollCounter = new ScrollCounter(t, scroller);
|
||||
await keyPress(scroller, "ArrowLeft");
|
||||
await waitForScrollEnd(scroller, scrollLeft, 0);
|
||||
// Make sure we don't jump directly to the new snap position.
|
||||
assert_greater_than(scrollCounter.count, 2);
|
||||
}, "Snaps to top-left after pressing ArrowLeft");
|
||||
|
||||
promise_test(async t => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
|
||||
<title>Mouse-wheel scroll snapping speed</title>
|
||||
<meta name="assert"
|
||||
content="Test passes if mousewheel snaps without pausing">
|
||||
<style>
|
||||
#scroller {
|
||||
scroll-snap-type: block mandatory;
|
||||
overflow: scroll;
|
||||
height: 400px;
|
||||
width: 400px
|
||||
}
|
||||
#space {
|
||||
width: 200px;
|
||||
height: 4000px;
|
||||
}
|
||||
.box {
|
||||
scroll-snap-align: start;
|
||||
background: blue;
|
||||
margin-bottom: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="../support/common.js"></script>
|
||||
<div id="scroller">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div id="space"></div>
|
||||
</div>
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
const scroller = document.getElementById("scroller");
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
|
||||
const scrollTop = () => {
|
||||
return scroller.scrollTop;
|
||||
};
|
||||
const scrollPromise = waitForScrollEvent(scroller);
|
||||
const wheelPromise = waitForWheelEvent(scroller);
|
||||
const actions = new test_driver.Actions()
|
||||
.scroll(50, 50, 0, 50, {origin: scroller, duration: 100});
|
||||
await actions.send();
|
||||
await wheelPromise;
|
||||
await scrollPromise;
|
||||
let scrollEndTime;
|
||||
let snapEndTime;
|
||||
// Detect first pause in scrolling.
|
||||
const scrollStabilizedPromise =
|
||||
waitForAnimationEnd(scrollTop).then((timestamp) => {
|
||||
scrollEndTime = timestamp;
|
||||
});
|
||||
const snapEndPromise =
|
||||
waitForScrollTo(scroller, () => {
|
||||
return scroller.scrollTop;
|
||||
}, 110).then((evt) => {
|
||||
snapEndTime = evt.timestamp;
|
||||
});
|
||||
await Promise.all([scrollStabilizedPromise, snapEndPromise]);
|
||||
assert_equals(scroller.scrollTop, 110,
|
||||
'Failed to advance to next snap target');
|
||||
assert_true(snapEndTime < scrollEndTime,
|
||||
'Detected pause in scrolling before reaching snap target');
|
||||
}, "Wheel-scroll triggers snap to target position immediately.");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-scroll-snap-1/#snap-overflow" />
|
||||
<title></title>
|
||||
<meta name="assert" content="Test passes if snap is to the nearest edge">
|
||||
<style>
|
||||
#scroller {
|
||||
scroll-snap-type: block mandatory;
|
||||
overflow-y: scroll;
|
||||
height: 400px;
|
||||
width: 400px
|
||||
}
|
||||
#space {
|
||||
width: 200px;
|
||||
height: 4000px;
|
||||
}
|
||||
.box {
|
||||
scroll-snap-align: start;
|
||||
background: #ccccff;
|
||||
margin-bottom: 10px;
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
}
|
||||
.header {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.footer {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="../support/common.js"></script>
|
||||
|
||||
<div id="scroller">
|
||||
<div id="target" class="box">
|
||||
<div class="header">Header 1</div>
|
||||
<div class="footer">Footer 1</div>
|
||||
</div>
|
||||
<div id="next" class="box">
|
||||
<div class="header">Header 2</div>
|
||||
<div class="footer">Footer 2</div>
|
||||
</div>
|
||||
<div id="space"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// If all of the following conditions are met:
|
||||
// 1. the snap area is larger than the snapport along the scroll axis, and
|
||||
// 2. the distance between the previous and subsequent snap positions along
|
||||
// the axis is greater then the snapport size.
|
||||
//
|
||||
// Then any scroll position in which the snap area covers the snapport is
|
||||
// valid snap position. This rule facilitates scrolling around in oversized
|
||||
// elements.
|
||||
//
|
||||
// These test covers edge cases with snap-areas that overflow the snapport.
|
||||
// It should be possible to scroll to the end of an oversized snap-area.
|
||||
|
||||
const scroller = document.getElementById("scroller");
|
||||
const target = document.getElementById("target");
|
||||
const next = document.getElementById("next");
|
||||
const scrollTop = () => {
|
||||
return scroller.scrollTop;
|
||||
};
|
||||
const cleanup = () => {
|
||||
target.style.height = '500px';
|
||||
};
|
||||
|
||||
promise_test(async t => {
|
||||
t.add_cleanup(cleanup);
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
|
||||
|
||||
// Ensure we can freely scroll in an oversized element.
|
||||
const scrollPromise = waitForScrollEvent(scroller);
|
||||
await keyPress(scroller, "ArrowDown");
|
||||
await scrollPromise;
|
||||
await waitForAnimationEnd(scrollTop);
|
||||
assert_greater_than(scroller.scrollTop, 0,
|
||||
'Arrowkey scroll moved scroll position');
|
||||
assert_less_than_equal(scroller.scrollTop, target.clientHeight,
|
||||
'Scroll within snap-area overflow');
|
||||
|
||||
// Resize the element so it is oversized by less than the line scroll amount.
|
||||
// The next keyboard-triggered scroll should stop at the end of the snap-area.
|
||||
// Otherwise it is not possible to scroll to the last line of the snap-area
|
||||
// via keyboard.
|
||||
const scrollAmount = scroller.scrollTop;
|
||||
target.style.height = `${scroller.clientHeight + scrollAmount - 1}px`;
|
||||
assert_equals(scroller.scrollTop, 0, "Verify snap on relayout");
|
||||
await keyPress(scroller, "ArrowDown");
|
||||
await waitForAnimationEnd(scrollTop);
|
||||
assert_equals(scroller.scrollTop,
|
||||
target.clientHeight - scroller.clientHeight,
|
||||
'End boundary of snap-area is valid snap target');
|
||||
|
||||
// Must not get stuck at a snap position. Since already at the end of the
|
||||
// snap area, we should advance to the next.
|
||||
await keyPress(scroller, "ArrowDown");
|
||||
await waitForAnimationEnd(scrollTop);
|
||||
assert_equals(scroller.scrollTop,
|
||||
next.clientTop,
|
||||
'Advance to next snap-area');
|
||||
|
||||
}, "Keyboard scrolling with vertical snap-area overflow");
|
||||
|
||||
promise_test(async t => {
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollTop, 0, "verify test pre-condition");
|
||||
|
||||
// Ensure we can freely scroll in an oversized element.
|
||||
const scrollPromise = waitForScrollEvent(scroller);
|
||||
await new test_driver.Actions()
|
||||
.scroll(50, 50, 0, 50, {origin: scroller})
|
||||
.send();
|
||||
await scrollPromise;
|
||||
await waitForAnimationEnd(scrollTop);
|
||||
assert_equals(scroller.scrollTop, 50,
|
||||
'Wheel-scroll moved scroll position');
|
||||
|
||||
// Target position for wheel scroll overshoots the boundary of the snap-area.
|
||||
// Ensure that we stop at the boundary.
|
||||
const scrollAmount =
|
||||
target.clientHeight - scroller.clientHeight - scroller.scrollTop + 1;
|
||||
|
||||
await new test_driver.Actions()
|
||||
.scroll(50, 50, 0, scrollAmount, {origin: scroller})
|
||||
.send();
|
||||
await waitForAnimationEnd(scrollTop);
|
||||
assert_equals(scroller.scrollTop, 100,
|
||||
'End boundary of snap-area is valid snap target');
|
||||
|
||||
// Must not get stuck at a snap position. Since already at the end of the
|
||||
// snap area, we should advance to the next.
|
||||
await new test_driver.Actions()
|
||||
.scroll(50, 50, 0, 50, {origin: scroller})
|
||||
.send();
|
||||
await waitForAnimationEnd(scrollTop);
|
||||
assert_equals(scroller.scrollTop,
|
||||
next.clientTop,
|
||||
'Advance to next snap-area');
|
||||
|
||||
}, "Mouse-wheel scrolling with vertical snap-area overflow");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>scroll-margin on input widget</title>
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1729292">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
scroll-margin-top: 200px;
|
||||
}
|
||||
.padding {
|
||||
height: 5000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="container">
|
||||
<div class="padding"></div>
|
||||
<input type="date" id="target">
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
document.scrollingElement.scrollTo(0, 20000);
|
||||
document.getElementById("target").focus();
|
||||
// Should be around 4900 (5000 - 200px of margin). Give some leeway to account for line height / borders / input padding / etc.
|
||||
assert_between_exclusive(document.scrollingElement.scrollTop, 4750, 4850, "Should honor date input scroll-margin");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -41,7 +41,7 @@ function waitForAnimationEnd(getValue) {
|
|||
// MAX_UNCHANGED_FRAMES with no change have been observed.
|
||||
if (time - start_time > TIMEOUT ||
|
||||
frames - last_changed_frame >= MAX_UNCHANGED_FRAMES) {
|
||||
resolve();
|
||||
resolve(time);
|
||||
} else {
|
||||
current_value = getValue();
|
||||
if (last_value != current_value) {
|
||||
|
|
@ -55,22 +55,38 @@ function waitForAnimationEnd(getValue) {
|
|||
});
|
||||
}
|
||||
|
||||
function waitForScrollEvent(eventTarget) {
|
||||
|
||||
function waitForEvent(eventTarget, type) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const scrollListener = () => {
|
||||
eventTarget.removeEventListener('scroll', scrollListener);
|
||||
resolve();
|
||||
const eventListener = (evt) => {
|
||||
eventTarget.removeEventListener('scroll', eventListener);
|
||||
resolve(evt);
|
||||
};
|
||||
eventTarget.addEventListener('scroll', scrollListener);
|
||||
eventTarget.addEventListener(type, eventListener);
|
||||
});
|
||||
}
|
||||
|
||||
function waitForScrollEvent(eventTarget) {
|
||||
return waitForEvent(eventTarget, 'scroll');
|
||||
}
|
||||
|
||||
function waitForWheelEvent(eventTarget) {
|
||||
return waitForEvent(eventTarget, 'wheel');
|
||||
}
|
||||
|
||||
// TODO: Update tests to replace call to this method with calls to
|
||||
// waitForScrollTo, since this method does not test that scrolling has in fact
|
||||
// stopped.
|
||||
function waitForScrollEnd(eventTarget, getValue, targetValue) {
|
||||
return waitForScrollTo(eventTarget, getValue, targetValue);
|
||||
}
|
||||
|
||||
function waitForScrollTo(eventTarget, getValue, targetValue) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const scrollListener = () => {
|
||||
const scrollListener = (evt) => {
|
||||
if (getValue() == targetValue) {
|
||||
eventTarget.removeEventListener('scroll', scrollListener);
|
||||
resolve();
|
||||
resolve(evt);
|
||||
}
|
||||
};
|
||||
if (getValue() == targetValue)
|
||||
|
|
@ -79,4 +95,3 @@ function waitForScrollEnd(eventTarget, getValue, targetValue) {
|
|||
eventTarget.addEventListener('scroll', scrollListener);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue