diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap')
125 files changed, 8458 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap/META.yml b/testing/web-platform/tests/css/css-scroll-snap/META.yml new file mode 100644 index 0000000000..df776353a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/META.yml @@ -0,0 +1,3 @@ +spec: https://drafts.csswg.org/css-scroll-snap/ +suggested_reviewers: + - tabatkins diff --git a/testing/web-platform/tests/css/css-scroll-snap/capturing-snap-positions.html b/testing/web-platform/tests/css/css-scroll-snap/capturing-snap-positions.html new file mode 100644 index 0000000000..7bc96b9d33 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/capturing-snap-positions.html @@ -0,0 +1,55 @@ +<!doctype html> +<meta charset=utf-8> +<title>scroll-snap-type on non-scrollers traps snap positions</title> +<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + +.scroller { + width: 100px; + height: 100px; + overflow: auto; + scroll-snap-type: block mandatory; +} +.item { + background: gray; + height: 100px; + scroll-snap-type: block mandatory; +} +.item.snapped { + background: green; + scroll-snap-align: center; +} +.subitem { + background: red; + height: 100px; + scroll-snap-align: center; +} + +</style> + + +<!-- +Boxes with a non-none value for scroll-snap-type +will capture snap positions from their descendents, +preventing them from affecting higher-up scrollers, +even if they are not, themselves, scrollers. +--> + +<div class=scroller> + <div class=item></div> + <div class=item><div class=subitem></div></div> + <div class="item snapped"></div> + <div class=item></div> +</div> + +<script> + +test(()=>{ + const el = document.querySelector('.scroller'); + assert_equals(el.scrollTop, 200); +}, "The third item should be snapped to by default, not the second's child."); + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/crashtests/fractional-covering-area-crash.html b/testing/web-platform/tests/css/css-scroll-snap/crashtests/fractional-covering-area-crash.html new file mode 100644 index 0000000000..6905b0fd39 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/crashtests/fractional-covering-area-crash.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<html> +<style> + #container { + scroll-snap-type: both mandatory; + overflow: overlay; + position: absolute; + height: 33554400px; + width: 33554400px; + } + + #area { + scroll-snap-align: end; + position: absolute; + left: 33554400px; + top: -57971.9px; + width: 0px; + height: 33554400px; + } +</style> +<div id="container"> + <div id="area"></div> +</div> + +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/ignore-snap-points-orthogonal-to-snap-axis.html b/testing/web-platform/tests/css/css-scroll-snap/ignore-snap-points-orthogonal-to-snap-axis.html new file mode 100644 index 0000000000..b0cde7fed1 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/ignore-snap-points-orthogonal-to-snap-axis.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<title>Ignore snap points orthogonal to scroll snap axis</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#snap-axis" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: x mandatory; +} + +#y-target { + width: 300px; + height: 300px; + top: 100px; + left: 0; + background-color: green; + /* align only on y-axis */ + scroll-snap-align: start none; +} + +#x-target { + width: 300px; + height: 300px; + top: 0; + left: 100px; + background-color: red; + scroll-snap-align: none start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="x-target"></div> + <div id="y-target"></div> +</div> + +<script> +test(t => { + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 100); +}, "Ignore snap points orthogonal to scroll snap axis"); + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/inheritance.html b/testing/web-platform/tests/css/css-scroll-snap/inheritance.html new file mode 100644 index 0000000000..2569cf3d8b --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/inheritance.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Scroll Snap properties</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<script> +assert_not_inherited('scroll-margin-block-end', '0px', '10px'); +assert_not_inherited('scroll-margin-block-start', '0px', '10px'); +assert_not_inherited('scroll-margin-bottom', '0px', '10px'); +assert_not_inherited('scroll-margin-inline-end', '0px', '10px'); +assert_not_inherited('scroll-margin-inline-start', '0px', '10px'); +assert_not_inherited('scroll-margin-left', '0px', '10px'); +assert_not_inherited('scroll-margin-right', '0px', '10px'); +assert_not_inherited('scroll-margin-top', '0px', '10px'); +assert_not_inherited('scroll-padding-block-end', 'auto', '10px'); +assert_not_inherited('scroll-padding-block-start', 'auto', '10px'); +assert_not_inherited('scroll-padding-bottom', 'auto', '10px'); +assert_not_inherited('scroll-padding-inline-end', 'auto', '10px'); +assert_not_inherited('scroll-padding-inline-start', 'auto', '10px'); +assert_not_inherited('scroll-padding-left', 'auto', '10px'); +assert_not_inherited('scroll-padding-right', 'auto', '10px'); +assert_not_inherited('scroll-padding-top', 'auto', '10px'); +assert_not_inherited('scroll-snap-align', 'none', 'start end'); +assert_not_inherited('scroll-snap-stop', 'normal', 'always'); +assert_not_inherited('scroll-snap-type', 'none', 'inline'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/input/keyboard.html b/testing/web-platform/tests/css/css-scroll-snap/input/keyboard.html new file mode 100644 index 0000000000..79d0fc9f36 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/input/keyboard.html @@ -0,0 +1,182 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<title>Arrow key scroll snapping</title> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<meta name="flags" content="should"> +<meta name="assert" + content="Test passes if keyboard scrolling correctly snaps on a snap + container"> + +<link rel="stylesheet" href="../support/common.css"> + +<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="/dom/events/scrolling/scroll_support.js"></script> +<script src="../support/common.js"></script> + + +<div id="scroller" tabindex="0"> + <div id="space"></div> + <div class="snap left top" id="top-left"></div> + <div class="snap right top" id="top-right"></div> + <div class="snap left bottom" id="bottom-left"></div> +</div> + +<script> +const scroller = document.getElementById("scroller"); +const topLeft = document.getElementById("top-left"); +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); + }); +} + +async function initializeScrollPosition(scroller, x, y) { + return new Promise(async (resolve) => { + if (scroller.scrollLeft != x || scroller.scrollTop != y) { + const scrollEndPromise = waitForScrollEnd(scroller); + scroller.scrollTo(x, y); + await scrollEndPromise; + } + resolve(); + }); +} + +promise_test(async t => { + await initializeScrollPosition(scroller, 0, 0); + assert_equals(scroller.scrollTop, 0, "verify test pre-condition"); + const scrollCounter = new ScrollCounter(t, scroller); + const scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowDown"); + await scrollEndPromise; + assert_equals(scroller.scrollTop, 400); + // Make sure we don't jump directly to the new snap position. + assert_greater_than(scrollCounter.count, 1); +}, "Snaps to bottom-left after pressing ArrowDown"); + +promise_test(async t => { + await initializeScrollPosition(scroller, 0, 400); + assert_equals(scroller.scrollTop, 400, "verify test pre-condition"); + const scrollCounter = new ScrollCounter(t, scroller); + const scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowUp"); + await scrollEndPromise; + assert_equals(scroller.scrollTop, 0); + // Make sure we don't jump directly to the new snap position. + assert_greater_than(scrollCounter.count, 1); +}, "Snaps to top-left after pressing ArrowUp"); + +promise_test(async t => { + await initializeScrollPosition(scroller, 0, 0); + assert_equals(scroller.scrollTop, 0, "verify test pre-condition"); + const scrollCounter = new ScrollCounter(t, scroller); + const scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowRight"); + await scrollEndPromise; + assert_equals(scroller.scrollLeft, 400); + // Make sure we don't jump directly to the new snap position. + assert_greater_than(scrollCounter.count, 1); +}, "Snaps to top-right after pressing ArrowRight"); + +promise_test(async t => { + await initializeScrollPosition(scroller, 400, 0); + assert_equals(scroller.scrollLeft, 400, "verify test pre-condition"); + const scrollCounter = new ScrollCounter(t, scroller); + const scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowLeft"); + await scrollEndPromise; + assert_equals(scroller.scrollLeft, 0); + // Make sure we don't jump directly to the new snap position. + assert_greater_than(scrollCounter.count, 1); +}, "Snaps to top-left after pressing ArrowLeft"); + +promise_test(async t => { + t.add_cleanup(function() { + topLeft.style.width = ""; + topRight.style.left = "400px"; + }); + + // Make the snap area cover the snapport. + topLeft.style.width = "800px"; + // Make the distance between the previous and the next snap position larger + // than snapport. + topRight.style.left = "500px"; + await initializeScrollPosition(scroller, 0, 0); + assert_equals(scroller.scrollLeft, 0, "verify test pre-condition"); + const scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowRight"); + await scrollEndPromise; + assert_between_exclusive(scroller.scrollLeft, 0, 500); +}, "If the original intended offset is valid as making a snap area cover the" ++ "snapport, and there's no other snap offset in between, use the original" ++ "intended offset"); + +promise_test(async t => { + t.add_cleanup(function() { + topLeft.style.width = ""; + topRight.style.left = "400px"; + topRight.style.scrollSnapStop = ""; + }); + + // Make the snap area cover the snapport. + topLeft.style.width = "800px"; + // Make the next snap offset closer than the original intended offset. + topRight.style.left = "20px"; + topRight.style.scrollSnapStop = "always"; + await initializeScrollPosition(scroller, 0, 0); + assert_equals(scroller.scrollLeft, 0, "verify test pre-condition"); + const scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowRight"); + await scrollEndPromise; + assert_equals(scroller.scrollLeft, 20); +}, "If the original intended offset is valid as making a snap area cover the " ++ "snapport, but there's a defined snap offset in between, use the defined snap" ++ " offset."); + +promise_test(async t => { + await initializeScrollPosition(scroller, 400, 0); + await keyPress(scroller, "ArrowRight"); + await waitForScrollStop(scroller); + assert_equals(scroller.scrollLeft, 400); +}, "If there is no valid snap offset on the arrow key's direction other than " ++ "the current offset, and the scroll-snap-type is mandatory, stay at the " ++ "current offset."); + +promise_test(async t => { + t.add_cleanup(function() { + scroller.style.scrollSnapType = "both mandatory"; + scroller.style.width = ""; + topLeft.style.width = ""; + }); + + scroller.style.scrollSnapType = "both proximity"; + + // This test case works only if the scroll amount of pressing "ArrowRight" is + // greater than the scroll snap proximity value of the scroll container. + // "100px" width of the scroll container works on major browsers. + scroller.style.width = "100px"; + topLeft.style.width = "80px"; + + await initializeScrollPosition(scroller, 400, 0); + assert_equals(scroller.scrollLeft, 400, "verify test pre-condition"); + const scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowRight"); + await scrollEndPromise; + assert_greater_than(scroller.scrollLeft, 400); +}, "If there is no valid snap offset on the arrow key's direction other than " ++ "the current offset, and the scroll-snap-type is proximity, go to the " ++ "original intended offset"); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/input/mouse-wheel.html b/testing/web-platform/tests/css/css-scroll-snap/input/mouse-wheel.html new file mode 100644 index 0000000000..287e594cab --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/input/mouse-wheel.html @@ -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> diff --git a/testing/web-platform/tests/css/css-scroll-snap/input/snap-area-overflow-boundary-viewport-covering.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/input/snap-area-overflow-boundary-viewport-covering.tentative.html new file mode 100644 index 0000000000..0978f127fa --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/input/snap-area-overflow-boundary-viewport-covering.tentative.html @@ -0,0 +1,158 @@ +<!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> + body { + margin: 0px; + } + #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="/dom/events/scrolling/scroll_support.js"></script> +<script src="../support/common.js"></script> + +<div id="scroller" tabindex="0"> + <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. + let scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowDown"); + await scrollEndPromise; + 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 + 2 * scrollAmount - 1}px`; + assert_equals(scroller.scrollTop, scrollAmount, "Verify container remains " + + "at the same covering snap offset."); + scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowDown"); + await scrollEndPromise; + 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. + scrollEndPromise = waitForScrollEnd(scroller); + await keyPress(scroller, "ArrowDown"); + await scrollEndPromise; + assert_equals(scroller.scrollTop, + next.offsetTop, + '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. + let scrollEndPromise = waitForScrollEnd(scroller); + await new test_driver.Actions() + .scroll(50, 50, 0, 50, {origin: scroller}) + .send(); + await scrollEndPromise; + 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. + let scrollAmount = + target.clientHeight - scroller.clientHeight - scroller.scrollTop + 1; + + scrollEndPromise = waitForScrollEnd(scroller); + await new test_driver.Actions() + .scroll(50, 50, 0, scrollAmount, {origin: scroller}) + .send(); + await scrollEndPromise; + 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. scrollAmount must be enough to + // advance to next snap position. + scrollAmount = next.clientHeight / 2 + 10 /* margin-bottom */; + scrollEndPromise = waitForScrollEnd(scroller); + await new test_driver.Actions() + .scroll(50, 50, 0, scrollAmount, {origin: scroller}) + .send(); + await scrollEndPromise; + assert_equals(scroller.scrollTop, next.offsetTop, + 'Advance to next snap-area'); + +}, "Mouse-wheel scrolling with vertical snap-area overflow"); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/nested-scrollIntoView-snaps.html b/testing/web-platform/tests/css/css-scroll-snap/nested-scrollIntoView-snaps.html new file mode 100644 index 0000000000..b7a2d6551d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/nested-scrollIntoView-snaps.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<meta name="viewport" content="user-scalable=no"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; +} +:root { + overflow: scroll; + scroll-snap-type: both mandatory; +} +.scroller { + overflow: scroll; + scroll-snap-type: both mandatory; + padding: 0px; +} +#outer { + left: 1000px; + top: 1000px; + width: 600px; + height: 600px; +} +#out-snap-1 { + scroll-snap-align: start; + left: 1200px; + top: 1200px; + width: 10px; + height: 10px; +} +#out-snap-2 { + scroll-snap-align: start; + left: 1100px; + top: 1100px; + width: 10px; + height: 10px; +} +#inner { + left: 1000px; + top: 1000px; + width: 400px; + height: 400px; +} +.space { + left: 0px; + top: 0px; + width: 3000px; + height: 3000px; +} +#target { + scroll-snap-align: end; + left: 800px; + top: 800px; + width: 200px; + height: 200px; +} +</style> + +<div class="space"></div> +<div id="out-snap-1"></div> +<div id="out-snap-2"></div> +<div class="scroller" id="outer"> + <div class="space"></div> + <div class="scroller" id="inner"> + <div class="space"></div> + <div id="target"></div> + </div> +</div> + +<script> +var outer = document.getElementById("outer"); +var inner = document.getElementById("inner"); +var target = document.getElementById("target"); + +test(() => { + // Initial layout triggers a scroll snap. Reset position before calling + // scrollIntoView. + window.scrollTo(0, 0); + outer.scrollTo(0, 0); + inner.scrollTo(0, 0); + + target.scrollIntoView({inline: "start", block: "start"}); + // Although the scrollIntoView specified "start" as the alignment, the target + // has "end" as its snap-alignment. So the inner scroller finishes with "end" + // alignment + assert_equals(inner.scrollLeft, 1000 - inner.clientWidth, "ScrollIntoView lands on the target's snap position regardless of the specified alignment."); + assert_equals(inner.scrollTop, 1000 - inner.clientHeight, "ScrollIntoView lands on the target's snap position regardless of the specified alignment."); + + // Since there is no snap points defined in the outer scroller, the outer + // scroller finishes with "start" alignment, as specified in scrollIntoView. + // Note that the "start" alignment aligns the target's top-left corner + //(inner.left + inner.clientWidth - target.width, inner.top + inner.clientHeight - target.height) + // with the outer scroller's top-left corner. + assert_equals(outer.scrollLeft, 800 + inner.clientWidth, "ScrollIntoView ends with the specified alignment if no snap position is specified."); + assert_equals(outer.scrollTop, 800 + inner.clientHeight, "ScrollIntoView ends with the specified alignment if no snap position is specified."); + + // Although the scrollIntoView specified "start" as the alignment, the window + // has two other elements with snap points. So the window finishes with the + // closest snap point. + assert_equals(window.scrollX, 1100, "ScrollIntoView lands on the snap position closest to the specified alignment."); + assert_equals(window.scrollY, 1100, "ScrollIntoView lands on the snap position closest to the specified alignment."); +}, "All the scrollers affected by scrollIntoView should land on a snap position if one exists. Otherwise, land according to the specified alignment"); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/no-red-ref.html b/testing/web-platform/tests/css/css-scroll-snap/no-red-ref.html new file mode 100644 index 0000000000..061454fb67 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/no-red-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html> +<title>CSS Reference: No Red</title> + +<p>Test passes if there is no red. diff --git a/testing/web-platform/tests/css/css-scroll-snap/no-snap-position.html b/testing/web-platform/tests/css/css-scroll-snap/no-snap-position.html new file mode 100644 index 0000000000..8f1f44af59 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/no-snap-position.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-snap-type-mandatory" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="./support/common.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} +#scroller { + height: 500px; + width: 500px; + overflow: hidden; +} +.child { + width: 300px; + height: 300px; + background-color: blue; +} +</style> + +<div id="scroller"> + <div class="child" style="top: 0px; left: 0px;"></div> + <div class="child" style="top: 1000px; left: 1000px;"></div> + <div style="width: 2000px; height: 2000px;"></div> +</div> + +<script> +test(() => { + scroller.style.scrollSnapType = "both mandatory"; + + // Scroll to where the first child is in view. + scroller.scrollTo(100, 100); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 100); + + // Scroll to where the second child is in view. + scroller.scrollTo(900, 900); + assert_equals(scroller.scrollLeft, 900); + assert_equals(scroller.scrollTop, 900); +}, "No snapping occurs if there is no valid snap position"); + +test(() => { + scroller.style.scrollSnapType = "x mandatory"; + + for (const target of document.querySelectorAll(".child")) { + target.scrollSnapAlign = "start none"; + } + + // Scroll to where the first child is in view. + scroller.scrollTo(100, 100); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 100); + + // Scroll to where the second child is in view. + scroller.scrollTo(900, 900); + assert_equals(scroller.scrollLeft, 900); + assert_equals(scroller.scrollTop, 900); +}, "No snapping occurs if there is no valid snap position matches scroll-snap-type"); + +promise_test(async t => { + // Start with valid snap positions. + scroller.style.scrollSnapType = "y mandatory"; + document.querySelectorAll('.child').forEach(el => { + el.style.scrollSnapAlign = 'start'; + t.add_cleanup(() => { + el.style.scrollSnapAlign = ''; + }); + }); + scroller.scrollTo(100, 100); + await waitForNextFrame(); + const scrollPosition = scroller.scrollTop; + // Elements no longer snap along the y-axis. + document.querySelectorAll('.child').forEach(el => { + el.style.scrollSnapAlign = 'none start'; + // Bump the position to verify that we don't stay pinned to the same element + // after layout update. + el.style.top = `${parseInt(el.style.top) + 100}px`; + }); + await waitForNextFrame(); + assert_equals(scroller.scrollTop, scrollPosition); + scroller.scrollTo(900, 900); + assert_equals(scroller.scrollLeft, 900); + assert_equals(scroller.scrollTop, 900); + +}, "No snapping occurs when last remaining valid snap point is no longer " + + "valid."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/overflowing-snap-areas-nested.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/overflowing-snap-areas-nested.tentative.html new file mode 100644 index 0000000000..046f3c88ed --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/overflowing-snap-areas-nested.tentative.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; +} +.scroller-x { + overflow: scroll; + scroll-snap-type: x mandatory; + width: 500px; + height: 500px; +} +.scroller-y { + overflow: scroll; + scroll-snap-type: y mandatory; + width: 500px; + height: 500px; +} +.space { + width: 4000px; + height: 4000px; +} +.target { + scroll-snap-align: start; + height: 400px; + width: 400px; +} +.large-x { + width: 3000px; + background-color: yellow; +} +.large-y { + height: 2000px; + background-color: yellow; +} +.small { + height: 200px; + width: 200px; + background-color: black; +} +</style> +<div class="scroller-x" id="one-target"> + <div class="space"></div> + <div class="large-x target" id="single" style="left: 200px;"></div> +</div> + +<div class="scroller-x" id="x"> + <div class="space"></div> + <div style="left: 200px;"> + <div class="target large-x"></div> + <div class="target small" style="left: 200px"></div> + <div class="target small" style="left: 600px"></div> + <div class="target small" style="left: 1200px"></div> + </div> +</div> + +<div class="scroller-y" id="y"> + <div class="space"></div> + <div style="top: 200px;"> + <div class="target large-y"></div> + <div class="target small" style="top: 200px"></div> + <div class="target small" style="top: 600px"></div> + <div class="target small" style="top: 1200px"></div> + <div class="target large-y" style="top: 2000px"></div> + </div> +</div> + +<div class="scroller-x" id="two-axes" style="scroll-snap-type: both mandatory"> + <div class="space"></div> + <div class="target large-x" style="top: 200px"></div> +</div> + +<div class="scroller-x" id="overlapping-overflow" style="scroll-snap-type: both mandatory"> + <div class="space"></div> + <div style="left: 200px; top: 200px;"> + <div class="target small"></div> + <div class="target small"></div> + <div class="target small"></div> + <div class="target large-y large-x"></div> + <div class="target small"></div> + <div class="target small"></div> + <div class="target small"></div> + </div> +</div> + +<script> +var one_target_scroller = document.getElementById("one-target"); +var scroller_x = document.getElementById("x"); +var scroller_y = document.getElementById("y"); +var two_axes_scroller = document.getElementById("two-axes"); +var overlapping_scroller = document.getElementById("overlapping-overflow"); + +test(() => { + scroller_x.scrollTo(950, 0); + assert_equals(scroller_x.scrollLeft, 1000); + assert_equals(scroller_x.scrollTop, 0); +}, "Snap within a snap area which covers snapport on x selects a valid snap " + + "position that avoids the overlapping areas at 800-1000 and 1400-1600."); + +test(() => { + scroller_y.scrollTo(0, 950); + assert_equals(scroller_y.scrollLeft, 0); + assert_equals(scroller_y.scrollTop, 1000); +}, "Snap within a snap area which covers snapport on y selects a valid snap " + + "position that avoids the overlapping areas at 800-1000 and 1400-1600."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/overflowing-snap-areas.html b/testing/web-platform/tests/css/css-scroll-snap/overflowing-snap-areas.html new file mode 100644 index 0000000000..1e72710811 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/overflowing-snap-areas.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; +} +.scroller-x { + overflow: scroll; + scroll-snap-type: x mandatory; + width: 500px; + height: 500px; +} +.scroller-y { + overflow: scroll; + scroll-snap-type: y mandatory; + width: 500px; + height: 500px; +} +.space { + width: 4000px; + height: 4000px; +} +.target { + scroll-snap-align: start; + height: 400px; + width: 400px; +} +.large-x { + width: 3000px; + background-color: yellow; +} +.large-y { + height: 2000px; + background-color: yellow; +} +.small { + height: 200px; + width: 200px; + background-color: black; +} +</style> +<div class="scroller-x" id="one-target"> + <div class="space"></div> + <div class="large-x target" id="single" style="left: 200px;"></div> +</div> + +<div class="scroller-x" id="x"> + <div class="space"></div> + <div style="left: 200px;"> + <div class="target large-x"></div> + <div class="target small" style="left: 200px"></div> + <div class="target small" style="left: 600px"></div> + <div class="target small" style="left: 1200px"></div> + </div> +</div> + +<div class="scroller-y" id="y"> + <div class="space"></div> + <div style="top: 200px;"> + <div class="target large-y"></div> + <div class="target small" style="top: 200px"></div> + <div class="target small" style="top: 600px"></div> + <div class="target small" style="top: 1200px"></div> + <div class="target large-y" style="top: 2000px"></div> + </div> +</div> + +<div class="scroller-x" id="two-axes" style="scroll-snap-type: both mandatory"> + <div class="space"></div> + <div class="target large-x" style="top: 200px"></div> +</div> + +<div class="scroller-x" id="overlapping-overflow" style="scroll-snap-type: both mandatory"> + <div class="space"></div> + <div style="left: 200px; top: 200px;"> + <div class="target small"></div> + <div class="target small"></div> + <div class="target small"></div> + <div class="target large-y large-x"></div> + <div class="target small"></div> + <div class="target small"></div> + <div class="target small"></div> + </div> +</div> + +<script> +var one_target_scroller = document.getElementById("one-target"); +var scroller_x = document.getElementById("x"); +var scroller_y = document.getElementById("y"); +var two_axes_scroller = document.getElementById("two-axes"); +var overlapping_scroller = document.getElementById("overlapping-overflow"); + +test(() => { + one_target_scroller.scrollTo(10, 0); + assert_equals(one_target_scroller.scrollLeft, 200); + assert_equals(one_target_scroller.scrollTop, 0); +}, "Snaps to the snap position if the snap area doesn't cover the snapport on x."); + +test(() => { + var right_align = 3200 - one_target_scroller.clientWidth; + one_target_scroller.scrollTo(right_align, 0); + assert_equals(one_target_scroller.scrollLeft, right_align); + assert_equals(one_target_scroller.scrollTop, 0); +}, "Snaps to the snap position if the snap area covers the snapport on x on the right border."); + +// We use end alignment for this test so that we don't fall on a snap +// position when the snap area just covers the snapport on the left border. +test(() => { + document.getElementById("single").style.scrollSnapAlign = 'end'; + one_target_scroller.scrollTo(200, 0); + assert_equals(one_target_scroller.scrollLeft, 200); + assert_equals(one_target_scroller.scrollTop, 0); +}, "Snaps to the snap position if the snap area covers the snapport on x on the left border."); + +test(() => { + scroller_x.scrollTo(450, 0); + assert_equals(scroller_x.scrollLeft, 400); + assert_equals(scroller_x.scrollTop, 0); +}, "Snaps to a snap area (400) that is closer than the position that reveals " + + "the space between snap areas (600) within the larger snap area on x."); + +test(() => { + scroller_y.scrollTo(0, 450); + assert_equals(scroller_y.scrollLeft, 0); + assert_equals(scroller_y.scrollTop, 400); +}, "Snaps to a snap area (400) that is closer than the position that reveals " + + "the space between snap areas (600) within the larger snap area on y."); + +test(() => { + scroller_x.scrollTo(1650, 0); + assert_equals(scroller_x.scrollLeft, 1650); + assert_equals(scroller_x.scrollTop, 0); +}, "Snap to current scroll position which is a valid snap position, as the " + + "snap area covers snapport on x and there is no intruding snap area."); + +test(() => { + scroller_y.scrollTo(0, 1650); + assert_equals(scroller_y.scrollLeft, 0); + assert_equals(scroller_y.scrollTop, 1650); +}, "Snap to current scroll position which is a valid snap position, as the " + + "snap area covers snapport on y and there is no intruding snap area."); + +test(() => { + const maxScrollTop = scroller_y.scrollHeight - scroller_y.clientHeight; + + // Scroll to the bottom edge which is a valid snap position that a large + // target element covers the snapport. + scroller_y.scrollTo(0, maxScrollTop); + assert_equals(scroller_y.scrollTop, maxScrollTop); + + // Scroll to `the bottom edge + 1`. + scroller_y.scrollTo(0, maxScrollTop + 1); + assert_equals(scroller_y.scrollTop, maxScrollTop); +}, "Don't snap back even if scrollTo tries to scroll to positions which are " + + "outside of the scroll range and if a snap target element covers the snaport"); + +test(() => { + two_axes_scroller.scrollTo(10, 100); + assert_equals(two_axes_scroller.scrollLeft, 10); + assert_equals(two_axes_scroller.scrollTop, 200); +}, "Snap to current scroll position on x as the area is covering x axis." + + "However, we snap to the specified snap position on y as the area is not " + + "covering y axis."); + +test(() => { + overlapping_scroller.scrollTo(200, 800); + assert_equals(overlapping_scroller.scrollLeft, 200); + assert_equals(overlapping_scroller.scrollTop, 800); +}, "snap to current scroll position on y as the area is covering y axis, " + + "even though that area is not the only scroll area at the same position."); + +test(() => { + overlapping_scroller.scrollTo(800, 200); + assert_equals(overlapping_scroller.scrollLeft, 800); + assert_equals(overlapping_scroller.scrollTop, 200); +}, "snap to current scroll position on x as the area is covering x axis, " + + "even though that area is not the only scroll area at the same position."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/overscroll-snap.html b/testing/web-platform/tests/css/css-scroll-snap/overscroll-snap.html new file mode 100644 index 0000000000..13437492ca --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/overscroll-snap.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/dom/events/scrolling/scroll_support.js"></script> + </head> + <body> + <style> + #scroller { + width: 200px; + height: 400px; + overflow-y: scroll; + scroll-snap-type: y mandatory; + background-color: blue; + } + #snap_target { + width: 100px; + height: 1942.5px; + scroll-snap-align: start; + background-color: pink; + } + </style> + <div id="scroller"> + <div id="snap_target"></div> + </div> + <script> + promise_test(async (t) => { + await waitForCompositorCommit(); + let scrollend_promise = new Promise((resolve) => { + scroller.addEventListener("scrollend", resolve); + }); + let scroll_promise = new Promise((resolve) => { + scroller.addEventListener("scroll", resolve); + }); + await new test_driver.Actions().scroll(0, 0, 0, + scroller.scrollHeight, { origin: scroller }).send(); + await scroll_promise; + await scrollend_promise; + assert_approx_equals(scroller.scrollTop, + scroller.scrollHeight - scroller.clientHeight, 1, + "scroller is scrolled to its bottom and not its top."); + }, "snapport covered by snap area doesn't jump"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-computed.html new file mode 100644 index 0000000000..3bb0e740ac --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-computed.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollMarginBlock / scrollMarginInline</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical"> +<meta name="assert" content="scroll-margin-block, scroll-margin-inline computed value is absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("scroll-margin-block-start", "10px"); +test_computed_value("scroll-margin-block-start", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("scroll-margin-block-end", "10px"); +test_computed_value("scroll-margin-block-end", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("scroll-margin-inline-start", "10px"); +test_computed_value("scroll-margin-inline-start", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("scroll-margin-inline-end", "10px"); +test_computed_value("scroll-margin-inline-end", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin-block", "10px"); +test_computed_value("scroll-margin-block", "calc(10px - 0.5em)", "-10px"); +test_computed_value("scroll-margin-block", "1px 2px"); + +test_computed_value("scroll-margin-inline", "10px"); +test_computed_value("scroll-margin-inline", "calc(10px - 0.5em)", "-10px"); +test_computed_value("scroll-margin-inline", "1px 2px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-invalid.html new file mode 100644 index 0000000000..b8a70b0d48 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-invalid.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin-block, scroll-margin-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical"> +<meta name="assert" content="scroll-margin-block, scroll-margin-inline support only the grammar '<length>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("scroll-margin-block-start", "auto"); +test_invalid_value("scroll-margin-block-start", "20%"); +test_invalid_value("scroll-margin-block-start", "-30%"); +test_invalid_value("scroll-margin-block-start", "1px 2px"); + +test_invalid_value("scroll-margin-block-end", "auto"); +test_invalid_value("scroll-margin-block-end", "20%"); +test_invalid_value("scroll-margin-block-end", "-30%"); +test_invalid_value("scroll-margin-block-end", "1px 2px"); + +test_invalid_value("scroll-margin-inline-start", "auto"); +test_invalid_value("scroll-margin-inline-start", "20%"); +test_invalid_value("scroll-margin-inline-start", "-30%"); +test_invalid_value("scroll-margin-inline-start", "1px 2px"); + +test_invalid_value("scroll-margin-inline-end", "auto"); +test_invalid_value("scroll-margin-inline-end", "20%"); +test_invalid_value("scroll-margin-inline-end", "-30%"); +test_invalid_value("scroll-margin-inline-end", "1px 2px"); + + +test_invalid_value("scroll-margin-block", "auto"); +test_invalid_value("scroll-margin-block", "20%"); +test_invalid_value("scroll-margin-block", "-30%"); +test_invalid_value("scroll-margin-block", "1px 2px 3px"); + +test_invalid_value("scroll-margin-inline", "auto"); +test_invalid_value("scroll-margin-inline", "20%"); +test_invalid_value("scroll-margin-inline", "-30%"); +test_invalid_value("scroll-margin-inline", "1px 2px 3px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-shorthand.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-shorthand.html new file mode 100644 index 0000000000..04e1d42864 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin-block, scroll-margin-inline set longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical"> +<meta name="assert" content="scroll-margin-block, scroll-margin-inline support the full grammar '<length>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('scroll-margin-block', '10px 20px', { + 'scroll-margin-block-start': '10px', + 'scroll-margin-block-end': '20px' +}); + +test_shorthand_value('scroll-margin-block', '30px', { + 'scroll-margin-block-start': '30px', + 'scroll-margin-block-end': '30px' +}); + +test_shorthand_value('scroll-margin-inline', '50px 60px', { + 'scroll-margin-inline-start': '50px', + 'scroll-margin-inline-end': '60px' +}); + +test_shorthand_value('scroll-margin-inline', '-40px', { + 'scroll-margin-inline-start': '-40px', + 'scroll-margin-inline-end': '-40px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-valid.html new file mode 100644 index 0000000000..e675eeb427 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-block-inline-valid.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin-block, scroll-margin-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#margin-longhands-logical"> +<meta name="assert" content="scroll-margin-block, scroll-margin-inline support the full grammar '<length>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("scroll-margin-block-start", "-10px"); +test_valid_value("scroll-margin-block-start", "calc(2em + 3ex)"); + +test_valid_value("scroll-margin-block-end", "-10px"); +test_valid_value("scroll-margin-block-end", "calc(2em + 3ex)"); + +test_valid_value("scroll-margin-inline-start", "-10px"); +test_valid_value("scroll-margin-inline-start", "calc(2em + 3ex)"); + +test_valid_value("scroll-margin-inline-end", "-10px"); +test_valid_value("scroll-margin-inline-end", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin-block", "-10px"); +test_valid_value("scroll-margin-block", "calc(2em + 3ex)"); +test_valid_value("scroll-margin-block", "1px 2px"); + +test_valid_value("scroll-margin-inline", "-10px"); +test_valid_value("scroll-margin-inline", "calc(2em + 3ex)"); +test_valid_value("scroll-margin-inline", "1px 2px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-computed.html new file mode 100644 index 0000000000..ae7b6de5dd --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-computed.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollMargin</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"> +<meta name="assert" content="scroll-margin computed value is absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("scroll-margin-top", "10px"); +test_computed_value("scroll-margin-top", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin-right", "10px"); +test_computed_value("scroll-margin-right", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin-bottom", "10px"); +test_computed_value("scroll-margin-bottom", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin-left", "10px"); +test_computed_value("scroll-margin-left", "calc(10px - 0.5em)", "-10px"); + + +test_computed_value("scroll-margin", "10px"); +test_computed_value("scroll-margin", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("scroll-margin", "1px 2px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-invalid.html new file mode 100644 index 0000000000..97beb0d295 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-invalid.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"> +<meta name="assert" content="scroll-margin supports only the grammar '<length>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("scroll-margin-top", "auto"); +test_invalid_value("scroll-margin-top", "20%"); +test_invalid_value("scroll-margin-top", "-30%"); +test_invalid_value("scroll-margin-top", "1px 2px"); + + +test_invalid_value("scroll-margin-right", "auto"); +test_invalid_value("scroll-margin-right", "20%"); +test_invalid_value("scroll-margin-right", "-30%"); +test_invalid_value("scroll-margin-right", "1px 2px"); + + +test_invalid_value("scroll-margin-bottom", "auto"); +test_invalid_value("scroll-margin-bottom", "20%"); +test_invalid_value("scroll-margin-bottom", "-30%"); +test_invalid_value("scroll-margin-bottom", "1px 2px"); + + +test_invalid_value("scroll-margin-left", "auto"); +test_invalid_value("scroll-margin-left", "20%"); +test_invalid_value("scroll-margin-left", "-30%"); +test_invalid_value("scroll-margin-left", "1px 2px"); + + +test_invalid_value("scroll-margin", "auto"); +test_invalid_value("scroll-margin", "20%"); +test_invalid_value("scroll-margin", "-30%"); +test_invalid_value("scroll-margin", "1px 2px 3px 4px 5px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-shorthand.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-shorthand.html new file mode 100644 index 0000000000..96a4595226 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"> +<meta name="assert" content="scroll-margin supports the full grammar '<length>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('scroll-margin', '10px', { + 'scroll-margin-top': '10px', + 'scroll-margin-right': '10px', + 'scroll-margin-bottom': '10px', + 'scroll-margin-left': '10px' +}); + +test_shorthand_value('scroll-margin', '30px 20px', { + 'scroll-margin-top': '30px', + 'scroll-margin-right': '20px', + 'scroll-margin-bottom': '30px', + 'scroll-margin-left': '20px' +}); + +test_shorthand_value('scroll-margin', '1px 2px 3px', { + 'scroll-margin-top': '1px', + 'scroll-margin-right': '2px', + 'scroll-margin-bottom': '3px', + 'scroll-margin-left': '2px' +}); + +test_shorthand_value('scroll-margin', '-1px 2px 3px 0', { + 'scroll-margin-top': '-1px', + 'scroll-margin-right': '2px', + 'scroll-margin-bottom': '3px', + 'scroll-margin-left': '0px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-valid.html new file mode 100644 index 0000000000..be34998691 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-margin-valid.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-margin with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin"> +<meta name="assert" content="scroll-margin supports the full grammar '<length>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("scroll-margin-top", "0", "0px"); +test_valid_value("scroll-margin-top", "-10px"); +test_valid_value("scroll-margin-top", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin-right", "0", "0px"); +test_valid_value("scroll-margin-right", "-10px"); +test_valid_value("scroll-margin-right", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin-bottom", "0", "0px"); +test_valid_value("scroll-margin-bottom", "-10px"); +test_valid_value("scroll-margin-bottom", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin-left", "0", "0px"); +test_valid_value("scroll-margin-left", "-10px"); +test_valid_value("scroll-margin-left", "calc(2em + 3ex)"); + + +test_valid_value("scroll-margin", "0", "0px"); +test_valid_value("scroll-margin", "-10px"); +test_valid_value("scroll-margin", "calc(2em + 3ex)"); + +test_valid_value("scroll-margin", "1px 2px"); +test_valid_value("scroll-margin", "1px 2px 3px"); +test_valid_value("scroll-margin", "1px 2px 3px 4px"); +test_valid_value("scroll-margin", "0 0 0 0", "0px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-computed.html new file mode 100644 index 0000000000..6a66110cda --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-computed.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollPaddingBlock / scrollPaddingInline</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical"> +<meta name="assert" content="scroll-padding-block, scroll-padding-inline computed value is per side, either the keyword auto or a computed <length-percentage> value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("scroll-padding-block-start", "auto"); +test_computed_value("scroll-padding-block-start", "10px"); +test_computed_value("scroll-padding-block-start", "20%"); +test_computed_value("scroll-padding-block-start", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-block-start", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-block-start", "calc(50% + 60px)"); + +test_computed_value("scroll-padding-block-end", "auto"); +test_computed_value("scroll-padding-block-end", "10px"); +test_computed_value("scroll-padding-block-end", "20%"); +test_computed_value("scroll-padding-block-end", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-block-end", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-block-end", "calc(50% + 60px)"); + +test_computed_value("scroll-padding-inline-start", "auto"); +test_computed_value("scroll-padding-inline-start", "10px"); +test_computed_value("scroll-padding-inline-start", "20%"); +test_computed_value("scroll-padding-inline-start", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-inline-start", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-inline-start", "calc(50% + 60px)"); + +test_computed_value("scroll-padding-inline-end", "auto"); +test_computed_value("scroll-padding-inline-end", "10px"); +test_computed_value("scroll-padding-inline-end", "20%"); +test_computed_value("scroll-padding-inline-end", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-inline-end", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-inline-end", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding-block", "auto"); +test_computed_value("scroll-padding-block", "10px"); +test_computed_value("scroll-padding-block", "20%"); +test_computed_value("scroll-padding-block", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-block", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-block", "calc(50% + 60px)"); +test_computed_value("scroll-padding-block", "1px 2px"); +test_computed_value("scroll-padding-block", "1px auto"); +test_computed_value("scroll-padding-block", "auto auto", "auto"); + +test_computed_value("scroll-padding-inline", "auto"); +test_computed_value("scroll-padding-inline", "10px"); +test_computed_value("scroll-padding-inline", "20%"); +test_computed_value("scroll-padding-inline", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-inline", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-inline", "calc(50% + 60px)"); +test_computed_value("scroll-padding-inline", "1px 2px"); +test_computed_value("scroll-padding-inline", "1px auto"); +test_computed_value("scroll-padding-inline", "auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-invalid.html new file mode 100644 index 0000000000..da995cfcc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-invalid.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding-block, scroll-padding-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical"> +<meta name="assert" content="scroll-padding-block, scroll-padding-inline supports only the grammar '[ auto | <length-percentage> ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("scroll-padding-block-start", "none"); +test_invalid_value("scroll-padding-block-start", "-10px"); +test_invalid_value("scroll-padding-block-start", "10px 20%"); +test_invalid_value("scroll-padding-block-start", "fit-content"); + +test_invalid_value("scroll-padding-block-end", "none"); +test_invalid_value("scroll-padding-block-end", "-10px"); +test_invalid_value("scroll-padding-block-end", "10px 20%"); +test_invalid_value("scroll-padding-block-end", "max-content"); + +test_invalid_value("scroll-padding-inline-start", "none"); +test_invalid_value("scroll-padding-inline-start", "-10px"); +test_invalid_value("scroll-padding-inline-start", "10px 20%"); +test_invalid_value("scroll-padding-inline-start", "min-content"); + +test_invalid_value("scroll-padding-inline-end", "none"); +test_invalid_value("scroll-padding-inline-end", "-10px"); +test_invalid_value("scroll-padding-inline-end", "10px 20%"); +test_invalid_value("scroll-padding-inline-end", "max-content"); + + +test_invalid_value("scroll-padding-block", "none"); +test_invalid_value("scroll-padding-block", "-10px"); +test_invalid_value("scroll-padding-block", "-20%"); +test_invalid_value("scroll-padding-block", "calc(auto)"); +test_invalid_value("scroll-padding-block", "10px 20px 30px 40px 50px"); +test_invalid_value("scroll-padding-block", "fit-content"); +test_invalid_value("scroll-padding-block", "max-content"); +test_invalid_value("scroll-padding-block", "min-content"); + +test_invalid_value("scroll-padding-inline", "none"); +test_invalid_value("scroll-padding-inline", "-10px"); +test_invalid_value("scroll-padding-inline", "-20%"); +test_invalid_value("scroll-padding-inline", "calc(auto)"); +test_invalid_value("scroll-padding-inline", "10px 20px 30px 40px 50px"); +test_invalid_value("scroll-padding-inline", "fit-content"); +test_invalid_value("scroll-padding-inline", "max-content"); +test_invalid_value("scroll-padding-inline", "min-content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-shorthand.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-shorthand.html new file mode 100644 index 0000000000..491cfa9e96 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding-block, scroll-padding-inline set longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical"> +<meta name="assert" content="scroll-padding-block, scroll-padding-inline support the full grammar '[ auto | <length-percentage> ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('scroll-padding-block', 'auto 10px', { + 'scroll-padding-block-start': 'auto', + 'scroll-padding-block-end': '10px' +}); + +test_shorthand_value('scroll-padding-block', '20%', { + 'scroll-padding-block-start': '20%', + 'scroll-padding-block-end': '20%' +}); + +test_shorthand_value('scroll-padding-inline', '10px auto', { + 'scroll-padding-inline-start': '10px', + 'scroll-padding-inline-end': 'auto' +}); + +test_shorthand_value('scroll-padding-inline', '0%', { + 'scroll-padding-inline-start': '0%', + 'scroll-padding-inline-end': '0%' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-valid.html new file mode 100644 index 0000000000..a932bb6393 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-block-inline-valid.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding-block, scroll-padding-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#padding-longhands-logical"> +<meta name="assert" content="scroll-padding-block, scroll-padding-inline supports the full grammar '[ auto | <length-percentage> ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("scroll-padding-block-start", "auto"); +test_valid_value("scroll-padding-block-start", "10px"); +test_valid_value("scroll-padding-block-start", "20%"); +test_valid_value("scroll-padding-block-start", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-block-start", "calc(50% + 60px)"); + +test_valid_value("scroll-padding-block-end", "auto"); +test_valid_value("scroll-padding-block-end", "10px"); +test_valid_value("scroll-padding-block-end", "20%"); +test_valid_value("scroll-padding-block-end", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-block-end", "calc(50% + 60px)"); + +test_valid_value("scroll-padding-inline-start", "auto"); +test_valid_value("scroll-padding-inline-start", "10px"); +test_valid_value("scroll-padding-inline-start", "20%"); +test_valid_value("scroll-padding-inline-start", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-inline-start", "calc(50% + 60px)"); + +test_valid_value("scroll-padding-inline-end", "auto"); +test_valid_value("scroll-padding-inline-end", "10px"); +test_valid_value("scroll-padding-inline-end", "20%"); +test_valid_value("scroll-padding-inline-end", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-inline-end", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding-block", "auto"); +test_valid_value("scroll-padding-block", "10px"); +test_valid_value("scroll-padding-block", "20%"); +test_valid_value("scroll-padding-block", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-block", "calc(50% + 60px)"); +test_valid_value("scroll-padding-block", "1px 2px"); +test_valid_value("scroll-padding-block", "1px auto"); +test_valid_value("scroll-padding-block", "auto auto", "auto"); + +test_valid_value("scroll-padding-inline", "auto"); +test_valid_value("scroll-padding-inline", "10px"); +test_valid_value("scroll-padding-inline", "20%"); +test_valid_value("scroll-padding-inline", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-inline", "calc(50% + 60px)"); +test_valid_value("scroll-padding-inline", "1px 2px"); +test_valid_value("scroll-padding-inline", "1px auto"); +test_valid_value("scroll-padding-inline", "auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-computed.html new file mode 100644 index 0000000000..f638138a7f --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-computed.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollPadding</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"> +<meta name="assert" content="scroll-padding computed value is per side, either the keyword auto or a computed <length-percentage> value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<style> + #target { + font-size: 40px; + } +</style> +<script> +test_computed_value("scroll-padding-top", "auto"); +test_computed_value("scroll-padding-top", "0", "0px"); +test_computed_value("scroll-padding-top", "10px"); +test_computed_value("scroll-padding-top", "20%"); +test_computed_value("scroll-padding-top", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-top", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-top", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding-right", "auto"); +test_computed_value("scroll-padding-right", "0", "0px"); +test_computed_value("scroll-padding-right", "10px"); +test_computed_value("scroll-padding-right", "20%"); +test_computed_value("scroll-padding-right", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-right", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-right", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding-bottom", "auto"); +test_computed_value("scroll-padding-bottom", "0", "0px"); +test_computed_value("scroll-padding-bottom", "10px"); +test_computed_value("scroll-padding-bottom", "20%"); +test_computed_value("scroll-padding-bottom", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-bottom", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-bottom", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding-left", "auto"); +test_computed_value("scroll-padding-left", "0", "0px"); +test_computed_value("scroll-padding-left", "10px"); +test_computed_value("scroll-padding-left", "20%"); +test_computed_value("scroll-padding-left", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding-left", "calc(10px - 0.5em)", "0px"); +test_computed_value("scroll-padding-left", "calc(50% + 60px)"); + + +test_computed_value("scroll-padding", "auto"); +test_computed_value("scroll-padding", "10px"); +test_computed_value("scroll-padding", "0", "0px"); +test_computed_value("scroll-padding", "20%"); +test_computed_value("scroll-padding", "calc(10px + 0.5em)", "30px"); +test_computed_value("scroll-padding", "calc(10px - 0.5em)", "0px"); + +test_computed_value("scroll-padding", "1px 2px"); +test_computed_value("scroll-padding", "1px 2px 3%"); +test_computed_value("scroll-padding", "1px 2px 3% 4px"); +test_computed_value("scroll-padding", "1px auto"); +test_computed_value("scroll-padding", "0 0 0 0", "0px"); +test_computed_value("scroll-padding", "auto auto auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-invalid.html new file mode 100644 index 0000000000..c805ee2e55 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-invalid.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"> +<meta name="assert" content="scroll-padding supports only the grammar '[ <length-percentage> | auto ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("scroll-padding-top", "20"); +test_invalid_value("scroll-padding-top", "-20px"); +test_invalid_value("scroll-padding-top", "none"); +test_invalid_value("scroll-padding-top", "10px 20%"); +test_invalid_value("scroll-padding-top", "fit-content"); + + +test_invalid_value("scroll-padding-right", "20"); +test_invalid_value("scroll-padding-right", "-20px"); +test_invalid_value("scroll-padding-right", "none"); +test_invalid_value("scroll-padding-right", "10px 20%"); +test_invalid_value("scroll-padding-right", "max-content"); + + +test_invalid_value("scroll-padding-bottom", "20"); +test_invalid_value("scroll-padding-bottom", "-20px"); +test_invalid_value("scroll-padding-bottom", "none"); +test_invalid_value("scroll-padding-bottom", "10px 20%"); +test_invalid_value("scroll-padding-bottom", "min-content"); + + +test_invalid_value("scroll-padding-left", "20"); +test_invalid_value("scroll-padding-left", "-20px"); +test_invalid_value("scroll-padding-left", "none"); +test_invalid_value("scroll-padding-left", "10px 20%"); +test_invalid_value("scroll-padding-left", "fit-content"); + + +test_invalid_value("scroll-padding", "20"); +test_invalid_value("scroll-padding", "-20px"); +test_invalid_value("scroll-padding", "none"); +test_invalid_value("scroll-padding", "calc(auto)"); +test_invalid_value("scroll-padding", "10px 20px 30px 40px 50px"); +test_invalid_value("scroll-padding", "fit-content"); +test_invalid_value("scroll-padding", "max-content"); +test_invalid_value("scroll-padding", "min-content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-shorthand.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-shorthand.html new file mode 100644 index 0000000000..2162c7f10d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"> +<meta name="assert" content="scroll-padding supports the full grammar '[ <length-percentage> | auto ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('scroll-padding', '10px', { + 'scroll-padding-top': '10px', + 'scroll-padding-right': '10px', + 'scroll-padding-bottom': '10px', + 'scroll-padding-left': '10px' +}); + +test_shorthand_value('scroll-padding', 'auto 20px', { + 'scroll-padding-top': 'auto', + 'scroll-padding-right': '20px', + 'scroll-padding-bottom': 'auto', + 'scroll-padding-left': '20px' +}); + +test_shorthand_value('scroll-padding', '1px 2px 3px', { + 'scroll-padding-top': '1px', + 'scroll-padding-right': '2px', + 'scroll-padding-bottom': '3px', + 'scroll-padding-left': '2px' +}); + +test_shorthand_value('scroll-padding', '1% 2px 3px 0', { + 'scroll-padding-top': '1%', + 'scroll-padding-right': '2px', + 'scroll-padding-bottom': '3px', + 'scroll-padding-left': '0px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-valid.html new file mode 100644 index 0000000000..0e7c86b12b --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-padding-valid.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-padding with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"> +<meta name="assert" content="scroll-padding supports the full grammar '[ <length-percentage> | auto ]{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("scroll-padding-top", "auto"); +test_valid_value("scroll-padding-top", "0", "0px"); +test_valid_value("scroll-padding-top", "10px"); +test_valid_value("scroll-padding-top", "20%"); +test_valid_value("scroll-padding-top", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-top", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding-right", "auto"); +test_valid_value("scroll-padding-right", "0", "0px"); +test_valid_value("scroll-padding-right", "10px"); +test_valid_value("scroll-padding-right", "20%"); +test_valid_value("scroll-padding-right", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-right", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding-bottom", "auto"); +test_valid_value("scroll-padding-bottom", "0", "0px"); +test_valid_value("scroll-padding-bottom", "10px"); +test_valid_value("scroll-padding-bottom", "20%"); +test_valid_value("scroll-padding-bottom", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-bottom", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding-left", "auto"); +test_valid_value("scroll-padding-left", "0", "0px"); +test_valid_value("scroll-padding-left", "10px"); +test_valid_value("scroll-padding-left", "20%"); +test_valid_value("scroll-padding-left", "calc(2em + 3ex)"); +test_valid_value("scroll-padding-left", "calc(50% + 60px)"); + + +test_valid_value("scroll-padding", "auto"); +test_valid_value("scroll-padding", "10px"); +test_valid_value("scroll-padding", "0", "0px"); +test_valid_value("scroll-padding", "20%"); +test_valid_value("scroll-padding", "calc(2em + 3ex)"); + +test_valid_value("scroll-padding", "1px 2px"); +test_valid_value("scroll-padding", "1px 2px 3%"); +test_valid_value("scroll-padding", "1px 2px 3% 4px"); +test_valid_value("scroll-padding", "1px auto"); +test_valid_value("scroll-padding", "0 0 0 0", "0px"); +test_valid_value("scroll-padding", "auto auto auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-computed.html new file mode 100644 index 0000000000..daed998ef2 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollSnapAlign</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-align"> +<meta name="assert" content="scroll-snap-align computed value is as specified."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("scroll-snap-align", "none"); +test_computed_value("scroll-snap-align", "start"); +test_computed_value("scroll-snap-align", "end"); +test_computed_value("scroll-snap-align", "center"); + +test_computed_value("scroll-snap-align", "start none"); +test_computed_value("scroll-snap-align", "center end"); +test_computed_value("scroll-snap-align", "start start", "start"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-invalid.html new file mode 100644 index 0000000000..9a1eeb77bb --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-align with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-align"> +<meta name="assert" content="scroll-snap-align supports only the grammar '[ none | start | end | center ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("scroll-snap-align", "auto"); + +test_invalid_value("scroll-snap-align", "start invalid"); + +test_invalid_value("scroll-snap-align", "start end center"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-valid.html new file mode 100644 index 0000000000..0201448825 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-align-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-align with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-align"> +<meta name="assert" content="scroll-snap-align supports the full grammar '[ none | start | end | center ]{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("scroll-snap-align", "none"); +test_valid_value("scroll-snap-align", "start"); +test_valid_value("scroll-snap-align", "end"); +test_valid_value("scroll-snap-align", "center"); + +test_valid_value("scroll-snap-align", "start none"); +test_valid_value("scroll-snap-align", "center end"); +test_valid_value("scroll-snap-align", "start start", "start"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-computed.html new file mode 100644 index 0000000000..49b369a0fe --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-computed.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollSnapStop</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-stop"> +<meta name="assert" content="scroll-snap-stop computed value is as specified."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("scroll-snap-stop", "normal"); +test_computed_value("scroll-snap-stop", "always"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-invalid.html new file mode 100644 index 0000000000..67feda0ca7 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-stop with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-stop"> +<meta name="assert" content="scroll-snap-stop supports only the grammar 'normal | always'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("scroll-snap-stop", "auto"); + +test_invalid_value("scroll-snap-stop", "normal always"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-valid.html new file mode 100644 index 0000000000..a59caff396 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-stop-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-stop with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-stop"> +<meta name="assert" content="scroll-snap-stop supports the full grammar 'normal | always'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("scroll-snap-stop", "normal"); +test_valid_value("scroll-snap-stop", "always"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-computed.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-computed.html new file mode 100644 index 0000000000..660a1fee06 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-computed.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap: getComputedStyle().scrollSnapType</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type"> +<meta name="assert" content="scroll-snap-type computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("scroll-snap-type", "none"); + +test_computed_value("scroll-snap-type", "x"); +test_computed_value("scroll-snap-type", "y"); +test_computed_value("scroll-snap-type", "block"); +test_computed_value("scroll-snap-type", "inline"); +test_computed_value("scroll-snap-type", "both"); + +test_computed_value("scroll-snap-type", "y mandatory"); +test_computed_value("scroll-snap-type", "inline proximity", "inline"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-invalid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-invalid.html new file mode 100644 index 0000000000..6177ff3baf --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-type with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type"> +<meta name="assert" content="scroll-snap-type supports only the grammar 'none | [ x | y | block | inline | both ] [ mandatory | proximity ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("scroll-snap-type", "auto"); + +test_invalid_value("scroll-snap-type", "x y"); +test_invalid_value("scroll-snap-type", "block mandatory inline"); + +test_invalid_value("scroll-snap-type", "both none"); +test_invalid_value("scroll-snap-type", "mandatory"); +test_invalid_value("scroll-snap-type", "proximity"); +test_invalid_value("scroll-snap-type", "mandatory inline"); +test_invalid_value("scroll-snap-type", "proximity both"); +test_invalid_value("scroll-snap-type", "mandatory x"); +test_invalid_value("scroll-snap-type", "proximity y"); +test_invalid_value("scroll-snap-type", "mandatory block"); +test_invalid_value("scroll-snap-type", "proximity mandatory"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-valid.html b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-valid.html new file mode 100644 index 0000000000..ca995770f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/parsing/scroll-snap-type-valid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Scroll Snap Test: scroll-snap-type with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type"> +<meta name="assert" content="scroll-snap-type supports the full grammar 'none | [ x | y | block | inline | both ] [ mandatory | proximity ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("scroll-snap-type", "none"); + +test_valid_value("scroll-snap-type", "x"); +test_valid_value("scroll-snap-type", "y"); +test_valid_value("scroll-snap-type", "block"); +test_valid_value("scroll-snap-type", "inline"); +test_valid_value("scroll-snap-type", "both"); + +test_valid_value("scroll-snap-type", "y mandatory"); +test_valid_value("scroll-snap-type", "block mandatory"); +test_valid_value("scroll-snap-type", "both mandatory"); +test_valid_value("scroll-snap-type", "inline proximity", "inline"); // The shortest serialization is preferable +test_valid_value("scroll-snap-type", "x proximity", "x"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/resnap-on-snap-alignment-change.html b/testing/web-platform/tests/css/css-scroll-snap/resnap-on-snap-alignment-change.html new file mode 100644 index 0000000000..e4648b1d79 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/resnap-on-snap-alignment-change.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<title> + Resnap when the current snap position is no longer a valid snap target. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-scroll-snap/support/common.js"></script> +<style> + html { + scroll-snap-type: y mandatory; + } + body { + margin: 0; + } + .snap { + scroll-snap-align: center; + height: 100vh; + margin: 0; + } +</style> +<body onload = "runTest()"> +<div id = "card1" class="snap">ONE</div> +<div id = "card2" class="snap">TWO</div> +<div id = "card3" class="snap">THREE</div> +</body> +<script type="text/javascript"> + function runTest() { + promise_test(async t => { + const scroller = document.scrollingElement; + // scroll to card THREE + let expectedSnapPosition = card3.offsetTop; + scroller.scrollTo(0, expectedSnapPosition); + assert_equals(scroller.scrollTop, expectedSnapPosition, + 'Aligned with card THREE before style change'); + + // Snap to card TWO after invalidating card THREE as a snap target. + card3.style.scrollSnapAlign = 'none center'; + await waitForNextFrame(); + expectedSnapPosition = card2.offsetTop; + assert_equals(scroller.scrollTop, expectedSnapPosition, + 'Aligned with card TWO after style change'); + }, 'Resnap when the current snap position is no longer a valid snap target'); + } +</script> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-margin-visibility-check.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-margin-visibility-check.html new file mode 100644 index 0000000000..b41ccb36fd --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-margin-visibility-check.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin"> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708303"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { margin: 0 } +#scroller { + height: 500px; + width: 500px; + scrollbar-width: none; + overflow: scroll; +} +#target { + width: 100px; + height: 100px; + background-color: blue; + scroll-margin: 100px; + margin-left: 510px; +} +</style> + +<div id="scroller"> + <div style="width: 450px; height: 450px;"></div> + <div tabindex="0" id="target"></div> + <div style="width: 2000px; height: 2000px;"></div> +</div> + +<script> +let scroller = document.getElementById("scroller"); +let target = document.getElementById("target"); +promise_test(async function() { + scroller.scrollTo(0, 0); + await new Promise(resolve => { + scroller.addEventListener("scroll", resolve, { once: true }); + document.getElementById("target").focus(); + }); + assert_true(scroller.scrollTop > 0, "Visibility check should not account for margin"); + assert_true(scroller.scrollLeft > 0, "Visibility check should not account for margin"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-margin.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-margin.html new file mode 100644 index 0000000000..e6ce4ac49c --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-margin.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; +} +#target { + width: 300px; + height: 300px; + background-color: blue; +} +#another-target { + width: 300px; + height: 300px; + top: 400px; + left: 400px; + background-color: blue; + scroll-snap-align: start; +} +</style> + +<div id="scroller"> + <div style="width: 2000px; height: 2000px;"></div> + <div id="target"></div> + <div id="another-target"></div> +</div> + +<script> +test(() => { + target.style.scrollSnapAlign = "start"; + target.style.scrollMargin = "100px"; + target.style.left = "300px"; + target.style.top = "300px"; + + scroller.scrollTo(0, 0); + // `target position (300px, 300px)` - `margin (100px, 100px)`. + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 200); + + target.style.scrollSnapAlign = "end"; + + // `target position (300px, 300px)` + `target size (300px, 300px) + + // `margin (100px, 100px) - `scroller size (500px, 500px)`. + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 200); +}, "Snaps to the positions adjusted by scroll-margin"); + +test(() => { + target.style.left = "0px"; + target.style.top = "0px"; + target.style.scrollSnapAlign = "start"; + + // Since the target is at (0px, 0px) in the scroll port, the added margin + // should not be considered, and the snap points for this snap area should be + // the closest points in the scroll port (i.e x=0 or y=0). + target.style.scrollMargin = "200px"; + + // Distance from target without margin: + // `scroll position (150px, 150px)` - `target position (0px, 0px)` + // = (150px, 150px) + // + // Distance from target with margin: + // `scroll position (150px, 150px)` - [`target position (0px, 0px)` - + // `target margin (200px, 200px)`] + // = (350px, 350px) + // + // Distance from other target: + // `other target position (400px, 400px)` - `scroll position (150px, 150px)` + // = (250px, 250px) + // + // Therefore if the "out-of-scrollport" scroll-margin contributes to the + // calculation, then the other target would be snapped to. However if the + // scroll-margin is not considered, then the (0px, 0px) target should be + // snapped to. + scroller.scrollTo(150, 150); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); +}, "scroll-margin doesn't contribute to the snap position of the element " + + "if it's outside of the scroll port"); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-on-large-element-not-covering-snapport.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-on-large-element-not-covering-snapport.tentative.html new file mode 100644 index 0000000000..df4fc20ec8 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-on-large-element-not-covering-snapport.tentative.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<title> + A test case that scrolling to a point on large element where the snap area + doesn't cover over the snapport +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + width: 100%; +} +#scroller { + left: 10px; + height: 200px; + width: 100px; + overflow-y: scroll; + overflow-x: hidden; + scroll-snap-type: y mandatory; +} +.snap { + scroll-snap-align: start; + background-color: green; +} +.target { + background-color: red; + border-radius: 100%; + height: 88px; + top: 536px; +} +</style> +<div id="scroller"> + <div style="height: 2000px;"></div> + <div class="snap" style="top: 0px; height: 40px;">1</div> + <div class="snap" style="top: 40px; height: 40px;">2</div> + <div class="snap" style="top: 80px; height: 1000px;">3</div> + <div class="snap" style="top: 1080px; height: 40px;">4</div> + <div class="snap" style="top: 1120px; height: 40px;">5</div> + <div class="target"></div> +</div> +<script> +test(() => { + const scroller = document.getElementById("scroller"); + + scroller.scrollBy(0, 10); + // Snap to the first snap point. + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 40); + + scroller.scrollBy(0, 10); + // Snap to the second snap point. + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 80); + + scroller.scrollBy(0, 100); + // Snap to the given scrolling position since the third snap target element + // is larger than the snapport. + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 180); + + scroller.scrollBy(0, 100); + // Again, snap to the given scrolling position. + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 280); + + // Scroll to a point where the third target element is still covering over the + // snapport. + scroller.scrollBy(0, 600); + assert_equals(scroller.scrollLeft, 0); + // Again, snap to the given scrolling position. + assert_equals(scroller.scrollTop, 880); + + // Scroll to a point where the third target element is no longer convering + // over the snapport, rather the forth snap point is in the snapport. + scroller.scrollBy(0, 10); + // Now, snap to the forth snap point. + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 1080); + + // Scroll back a bit. + scroller.scrollBy(0, -10); + // This should snap to the bottom of the 3rd snap area and not all the way + // back up to its top. + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 880); +}, "snaps to bottom edge of large snap area that doesn't cover the snap port."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-padding-and-margin.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-padding-and-margin.html new file mode 100644 index 0000000000..97d30c702d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-padding-and-margin.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin"> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708303"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +body { margin: 0 } +#scroller { + height: 500px; + width: 500px; + scroll-padding: 10px; + scrollbar-width: none; + overflow: hidden; +} +#target { + width: 100px; + height: 100px; + background-color: blue; + scroll-margin: 10px; + margin-left: 1000px; +} +</style> + +<div id="scroller"> + <div style="width: 2000px; height: 2000px;"></div> + <div id="target"></div> + <div style="width: 2000px; height: 2000px;"></div> +</div> + +<script> +let scroller = document.getElementById("scroller"); +let target = document.getElementById("target"); +test(() => { + scroller.scrollTo(0, 0); + target.scrollIntoView({ block: "start", inline: "start" }); + + assert_equals(scroller.scrollTop, 2000 - 20, "Top should account for margin + padding"); + assert_equals(scroller.scrollLeft, 1000 - 20, "Left should account for margin + padding"); +}); + +test(() => { + scroller.scrollTo(0, 0); + target.scrollIntoView({ block: "end", inline: "end" }); + assert_equals(scroller.scrollTop, 2000 - 500 + 100 + 20, "Top should account for margin + padding"); + assert_equals(scroller.scrollLeft, 1000 - 500 + 100 + 20, "Left should account for margin + padding"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-padding.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-padding.html new file mode 100644 index 0000000000..0c637ed6db --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-padding.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; +} +#target { + width: 300px; + height: 300px; + background-color: blue; +} +</style> + +<div id="scroller"> + <div style="width: 2000px; height: 2000px;"></div> + <div id="target"></div> +</div> + +<script> +test(() => { + scroller.style.scrollPadding = "100px"; + + target.style.scrollSnapAlign = "start"; + target.style.left = "300px"; + target.style.top = "300px"; + + scroller.scrollTo(0, 0); + // `target position (300px, 300px)` - `padding (100px, 100px)`. + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 200); + + target.style.scrollSnapAlign = "end"; + + // `target position (300px, 300px)` + `target size (300px, 300px) + + // `padding (100px, 100px) - `scroller size (500px, 500px)`. + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 200); +}, "Snaps to the positions adjusted by scroll-padding"); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-nested-snap-area-layout-changed.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-nested-snap-area-layout-changed.tentative.html new file mode 100644 index 0000000000..be0bd5c4a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-nested-snap-area-layout-changed.tentative.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> + +<head> + <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/dom/events/scrolling/scroll_support.js"></script> +</head> +<body> + <style> + #scroller { + overflow: scroll; + scroll-snap-type: y mandatory; + height: 200px; + width: 200px; + border: solid 1px; + position:absolute; + } + .snap_area { + position: absolute; + width: 100px; + left: calc(50% - 50px); + } + #outer_snap_area { + scroll-snap-align: start; + height: 1000px; + background-color: blue; + } + #inner_snap_area { + scroll-snap-align: start; + height: 100px; + top: 100px; + background-color: yellow; + } + </style> + <div id="scroller"> + <div id="outer_snap_area" class="snap_area"></div> + <div id="inner_snap_area" class="snap_area"></div> + </div> + <script> + async function reset() { + inner_snap_area.style.height = "100px"; + await waitForCompositorCommit(); + } + + let scroller = document.getElementById("scroller"); + promise_test(async (t) => { + await reset(); + await resetTargetScrollState(t, scroller); + assert_equals(scroller.scrollTop, 0, "test precondition: scroller is " + + "not scrolled"); + let scrollend_promise = waitForScrollendEventNoTimeout(scroller); + let target_snap_position = inner_snap_area.offsetTop + + inner_snap_area.offsetHeight; + // Scroll to an offset close to the bottom of the inner snap area and + // expect to snap to an offset just below this snap area. + scroller.scrollTo(0, target_snap_position - 10); + await scrollend_promise; + assert_equals(scroller.scrollTop, target_snap_position, + "scroller snaps to just below the inner snap area."); + // We are just below the inner snap area. Increase its height so that it + // is larger than the snapport and straddled by the snapport. Verify + // that we snap to its bottom. + inner_snap_area.style.height = + `${scroller.clientHeight + inner_snap_area.clientHeight - 10}px`; + await waitForCompositorCommit(); + target_snap_position = inner_snap_area.offsetTop + + inner_snap_area.offsetHeight - scroller.clientHeight; + assert_equals(scroller.scrollTop, target_snap_position, + "scroller snaps to the bottom of the smaller snap area (which is now " + + "covering)."); + }, "newly larger-than-snapport area is snapped to when straddled close " + + "to bottom."); + + promise_test(async (t) => { + await reset(); + await resetTargetScrollState(t, scroller); + assert_equals(scroller.scrollTop, 0, "test precondition: scroller is " + + "not scrolled"); + let scrollend_promise = waitForScrollendEventNoTimeout(scroller); + let target_snap_position = inner_snap_area.offsetTop + + inner_snap_area.offsetHeight; + // Scroll to an offset close to the bottom of the inner snap area and + // expect to snap to an offset just below this snap area. + scroller.scrollTo(0, target_snap_position - 10); + await scrollend_promise; + assert_equals(scroller.scrollTop, target_snap_position, + "scroller snaps to just below the inner snap area."); + // We are just below the inner snap area. Increase its height so that it + // is larger than the snapport and covers the snapport. Verify that we + // remain in the covering position. + inner_snap_area.style.height = + `${scroller.clientHeight + inner_snap_area.clientHeight + 10}px`; + await waitForCompositorCommit(); + assert_equals(scroller.scrollTop, target_snap_position, + "scroller snaps to the bottom of the smaller snap area (which is now " + + "covering)."); + }, "snapport remains within newly covering snap area when already in " + + "covering position."); + </script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-001-ref.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-001-ref.html new file mode 100644 index 0000000000..88f028fb39 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<title>CSS Scroll Snap Reference</title> +<style> +html, body { margin: 0; padding: 0; } + +:root { + overflow: hidden; /* hide scrollbars for reftest analysis */ +} + +#target { + position: absolute; + top: 25%; + width: 100%; + margin: 25vh 0; + border-top: solid blue; +} +</style> + +<div id="target"> + <div>Test passes if the blue line above is centered in the viewport.</div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-001.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-001.html new file mode 100644 index 0000000000..43028cb874 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<title>scroll-snap-type + scroll-padding propagates root to viewport</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type'> +<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding'> +<link rel='match' href='scroll-snap-root-001-ref.html'> +<meta name='assert' + content="Test passes if scroll snap properties on root are applied to viewport."> + +<style type='text/css'> +html, body { margin: 0; padding: 0; } + +:root { + scroll-snap-type: block mandatory; + scroll-padding: 25%; + overflow: hidden; /* hide scrollbars for reftest analysis */ +} + +#fail { + font: bold 2em; + background: red; + height: 120vh; + margin-bottom: 60vh; +} + +#target { + margin-bottom: 120vh; + scroll-margin: 25vh; + scroll-snap-align: start; + border-top: solid blue; +} +</style> + +<div id="fail">FAIL</div> + +<div id="target"> + <div>Test passes if the blue line above is centered in the viewport.</div> +</div> + +<script> + document.getElementById('target').scrollIntoView(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-002-ref.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-002-ref.html new file mode 100644 index 0000000000..663b02b8c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-002-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<title>CSS Scroll Snap Reference</title> + +<style type='text/css'> +html, body { margin: 0; padding: 0; } + +#target { + border-bottom: solid orange thick; + position: absolute; + bottom: 0; + width: 100%; +} +</style> + +<div id="target"> + <div>Test passes if the orange stripe below is exactly at the bottom of the viewport.</div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-002.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-002.html new file mode 100644 index 0000000000..302c756341 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<title>scroll-padding does not propagate body to viewport</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type'> +<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding'> +<link rel='match' href='scroll-snap-root-002-ref.html'> +<meta name='assert' + content="Test passes if scroll-snap-padding on body is not applied to viewport."> + +<style type='text/css'> +html, body { margin: 0; padding: 0; } + +:root { + scroll-snap-type: block mandatory; + overflow: hidden; /* hide scrollbars for reftest analysis */ +} + +body { + scroll-padding: 25%; +} + +#fail { + height: 120vh; + font: bold 2em; + background: red; +} + +#target { + margin: 120vh 0; + scroll-snap-align: end; + border-bottom: solid orange thick; +} +</style> + +<div id="fail">FAIL</div> + +<div id="target"> + <div>Test passes if the orange stripe below is exactly at the bottom of the viewport.</div> +</div> + +<script> + document.getElementById('target').scrollIntoView(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-003.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-003.html new file mode 100644 index 0000000000..fc7b28fdf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-root-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<title>scroll-snap-type does not propagate body to viewport</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type'> +<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding'> +<link rel='match' href='no-red-ref.html'> +<meta name='assert' + content="Test passes if scroll-snap-type on body is not applied to viewport."> + +<style type='text/css'> +:root { + overflow: hidden; /* hide scrollbars for reftest analysis */ +} + +body { + scroll-snap-type: block mandatory; +} + +#pass { + height: 120vh; +} + +#target { + scroll-snap-align: start; + height: 100vh; + background: red; +} +</style> + +<p id="pass">Test passes if there is no red. + +<div id="target"> + <div>FAIL</div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-001.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-001.html new file mode 100644 index 0000000000..7d2a228688 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-001.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; +} +#scroller { + width: 400px; + height: 400px; + overflow: scroll; + scroll-snap-type: both mandatory; +} +#space { + left: 0px; + top: 0px; + width: 2100px; + height: 2100px; +} +.target { + width: 50px; + height: 50px; + scroll-snap-align: start; +} +.origin { + left: 0px; + top: 0px; +} +.always-stop { + left: 100px; + top: 0px; + scroll-snap-stop: always; +} +.closer { + left: 200px; + top: 0px; +} +</style> + +<div id="scroller"> + <div id="space"></div> + <div class="target origin"></div> + <div class="target always-stop"></div> + <div class="target closer"></div> +</div> + +<script> +var scroller = document.getElementById("scroller"); +test(() => { + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + + scroller.scrollBy(300, 0); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 0); +}, "A scroll with intended direction and end position should not pass a snap " + + "area with scroll-snap-stop: always.") + +test(() => { + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + + scroller.scrollTo(300, 0); + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 0); +}, "A scroll with intended end position should always choose the closest snap " + + "position regardless of the scroll-snap-stop value.") + +// Tests for programmatic scrolls beyond the scroller bounds. + +test(() => { + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + + scroller.scrollBy(100000, 0); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 0); +}, "A scroll outside bounds in the snapping axis with intended direction and " + + "end position should not pass a snap area with scroll-snap-stop: always.") + +test(() => { + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + + scroller.scrollBy(300, -10); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 0); +}, "A scroll outside bounds in the non-snapping axis with intended direction " + + "and end position should not pass a snap area with scroll-snap-stop: always.") + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002-nested.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002-nested.tentative.html new file mode 100644 index 0000000000..34b6dc97e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002-nested.tentative.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" /> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; +} +.scroller { + width: 400px; + height: 100px; + overflow: scroll; + scroll-snap-type: x mandatory; +} +#space { + left: 0px; + top: 0px; + width: 2100px; + height: 50px; +} +.target { + width: 50px; + height: 50px; + scroll-snap-align: start; + top: 0px; +} +</style> + +<div class="scroller" id="scroller7"> + <div id="space"></div> + <div class="target" style="left: 0px;"></div> + <div class="target" style="left: 400px; width: 900px;"></div> + <div class="target" style="left: 900px; scroll-snap-stop: always;"></div +</div> + +<script> + +test(() => { + assert_equals(scroller7.scrollLeft, 0); + assert_equals(scroller7.scrollTop, 0); + + // start dest always + // |-------------------------|================|=====|===== + // 0 400 700 900 + + // Scoll on the element whose snap area is larger than the snapport. + scroller7.scrollBy(600, 0); + // Stops before the smaller snap area @ 900px enters the snapport. + assert_equals(scroller7.scrollLeft + scroller7.clientWidth, 900); + assert_equals(scroller7.scrollTop, 0); + + scroller7.scrollTo(0, 0); + scroller7.scrollBy(800, 0); + // Now the smaller snap area is closer, so we snap to it. + assert_equals(scroller7.scrollLeft, 900); + assert_equals(scroller7.scrollTop, 0); +}, "`scroll-snap-stop: always` snap point is further than the scroll " + + "destination and a snap area covers the snapport"); + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html new file mode 100644 index 0000000000..1aae7aea60 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-002.html @@ -0,0 +1,213 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" /> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; +} +.scroller { + width: 400px; + height: 100px; + overflow: scroll; + scroll-snap-type: x mandatory; +} +#space { + left: 0px; + top: 0px; + width: 2100px; + height: 50px; +} +.target { + width: 50px; + height: 50px; + scroll-snap-align: start; + top: 0px; +} +</style> + +<!-- + start dest closest always + |------------------------------|--------|--------| + --> +<div class="scroller" id="scroller1"> + <div id="space"></div> + <div class="target" style="left: 0px;"></div> + <!-- Add `scroll-snap-stop: always` element into the DOM tree prior to the + closest snap point --> + <div class="target" style="left: 120px; scroll-snap-stop: always;"></div> + <!-- Add a snap point closest-to-destination but further than the destination + from the start position --> + <div class="target" style="left: 110px;"></div> +</div> + +<!-- + start closest dest always + |------------------------------|------|--------| + --> +<div class="scroller" id="scroller2"> + <div id="space"></div> + <div class="target" style="left: 0px;"></div> + <div class="target" style="left: 120px; scroll-snap-stop: always;"></div> + <!-- Add a snap point closest-to-destination and closer than the destination + from the start position --> + <div class="target" style="left: 95px;"></div> +</div> +</div> + +<!-- + A test case where there's a snap point whose snap area covers the snapport and + there's a `scroll-snap-stop: always` snap point on the opposite side. + --> +<div class="scroller" id="scroller3"> + <div id="space"></div> + <div class="target" style="left: 0px;"></div> + <div class="target" style="left: 700px; scroll-snap-stop: always;"></div> + <!-- Add a snap point where the snap area covers the snapport entirely --> + <div class="target" style="left: 100px; width: 500px;"></div> + <!-- Add a snap point where the distance between this and the 100px point is + larger than the snapport size (400px) --> + <div class="target" style="left: 600px;"></div> +</div> + +<!-- + A similar case above, but two `scroll-snap-stop: always` snap points. + --> +<div class="scroller" id="scroller4"> + <div id="space"></div> + <div class="target" style="left: 0px;"></div> + <div class="target" style="left: 700px; scroll-snap-stop: always;"></div> + <!-- Add a snap point where the snap area covers the snapport entirely --> + <div class="target" style="left: 100px; width: 500px;"></div> + <!-- Add a snap point where the distance between this and the 100px point is + larger than the snapport size (400px) --> + <div class="target" style="left: 600px; scroll-snap-stop: always;"></div> +</div> + +<!-- + Another similar case, but the nearest snap point to the start point is + `scroll-snap-stop: always`. + --> +<div class="scroller" id="scroller5"> + <div id="space"></div> + <div class="target" style="left: 0px;"></div> + <div class="target" style="left: 700px; scroll-snap-stop: always;"></div> + <!-- Add a snap point where the snap area covers the snapport entirely --> + <div class="target" style="left: 100px; width: 500px; scroll-snap-stop: always;"></div> + <!-- Add a snap point where the distance between this and the 100px point is + larger than the snapport size (400px) --> + <div class="target" style="left: 600px;"></div> +</div> + +<!-- + A test case that a `scroll-snap-stop: always` snap point is further than the + scroll destination. + --> +<div class="scroller" id="scroller6"> + <div id="space"></div> + <div class="target" style="left: 0px;"></div> + <div class="target" style="left: 400px;"></div> + <div class="target" style="left: 700px; scroll-snap-stop: always;"></div +</div> + +<script> + +test(() => { + assert_equals(scroller1.scrollLeft, 0); + assert_equals(scroller1.scrollTop, 0); + + // start dest closest always + // |------------------------------|--------|--------| + // 0 100 110 120 + scroller1.scrollBy(100, 0); + assert_equals(scroller1.scrollLeft, 110); + assert_equals(scroller1.scrollTop, 0); +}, "The closest snap point is preferred than scroll-snap-stop: always where " + + "it's further than the destination (the closest one is closer to the " + + "scroll start position than the destination)"); + +test(() => { + assert_equals(scroller2.scrollLeft, 0); + assert_equals(scroller2.scrollTop, 0); + + // start closest dest always + // |------------------------------|------|--------| + // 0 95 100 120 + scroller2.scrollBy(100, 0); + assert_equals(scroller2.scrollLeft, 95); + assert_equals(scroller2.scrollTop, 0); +}, "The closest snap point is preferred than scroll-snap-stop: always where " + + "it's further than the destination (the closest one is futrher than the " + + "destination from the start position)"); + +test(() => { + assert_equals(scroller3.scrollLeft, 0); + assert_equals(scroller3.scrollTop, 0); + + // start dest always + // |-----|===|============================|------| + // 0 100 150 600 700 + + // Scoll on the element whose snap area is larger than the snapport. + scroller3.scrollBy(150, 0); + assert_equals(scroller3.scrollLeft, 150); + assert_equals(scroller3.scrollTop, 0); +}, "The scroll destination on a large element whose snap area covers " + + "the snapport entirely is a valid snap position"); + +test(() => { + assert_equals(scroller4.scrollLeft, 0); + assert_equals(scroller4.scrollTop, 0); + + // start dest always always + // |-----|====|============================|------| + // 0 100 150 600 700 + + // Scoll on the element whose snap area is larger than the snapport. + scroller4.scrollBy(150, 0); + assert_equals(scroller4.scrollLeft, 150); + assert_equals(scroller4.scrollTop, 0); +}, "The scroll destination on a large element whose snap area covers " + + "the snapport entirely is a valid snap position (with two " + + "`scroll-snap-stop: always` snap points"); + +test(() => { + assert_equals(scroller5.scrollLeft, 0); + assert_equals(scroller5.scrollTop, 0); + + // start always dest always + // |-----|=====|============================|------| + // 0 100 150 600 700 + + // Scoll on the element whose snap area is larger than the snapport, but + // the scroll-snap-stop property is `always`. + scroller5.scrollBy(150, 0); + assert_equals(scroller5.scrollLeft, 100); + assert_equals(scroller5.scrollTop, 0); + + // Scroll the direction further, it should NOT be trapped by the + // `scroll-snap-stop: always` snap point. + scroller5.scrollBy(50, 0); + assert_equals(scroller5.scrollLeft, 150); + assert_equals(scroller5.scrollTop, 0); +}, "`scroll-snap-stop: always` snap point is preferred even if the snap area " + + "entire snapport"); + +test(() => { + assert_equals(scroller6.scrollLeft, 0); + assert_equals(scroller6.scrollTop, 0); + + // start dest always + // |-------------------------|-----------------|------| + // 0 400 600 700 + + // Scroll to a point where it's closer to a `scroll-snap-stop: always` snap + // position. + scroller6.scrollBy(600, 0); + assert_equals(scroller6.scrollLeft, 700); + assert_equals(scroller6.scrollTop, 0); +}, "`scroll-snap-stop: always` snap point is further than the scroll " + + "destination"); + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-change.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-change.html new file mode 100644 index 0000000000..4615487f56 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-change.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" /> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div, html, body { + margin: 0; + padding: 0; +} + +html { + scroll-snap-type: x mandatory; + overflow: scroll; +} + +#scroller { + scroll-snap-type: x mandatory; + overflow: scroll; + height: 400px; + width: 400px; +} + +.large_space { + width: 2000px; + height: 2000px; +} + +.snap_area { + scroll-snap-align: none start; + width: 100px; + height: 100px; + + background-color: blue; +} + +.snap_area:nth-child(1) { + margin-left: 0; +} + +.snap_area:nth-child(2) { + margin-left: 100px; +} + +.snap_area:nth-child(3) { + margin-left: 300px; +} + +.snap_area:nth-child(4) { + margin-left: 500px; +} +</style> + +<!-- Add snap area to the root scroller --> +<div class="snap_area"></div> +<div class="snap_area"></div> +<div class="snap_area"></div> +<div class="snap_area"></div> + +<div id="scroller"> + <div class="snap_area"></div> + <div class="snap_area"></div> + <div class="snap_area"></div> + <div class="snap_area"></div> + <div class="large_space"></div> +</div> + +<div class="large_space"></div> + +<script> +const scrollers = [document.scrollingElement, document.getElementById("scroller")]; +for (const scroller of scrollers) { + test(_ => { + assert_equals(scroller.scrollLeft, 0); // sanity check + + scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'always'); + scroller.scrollBy(500, 0); + assert_equals(scroller.scrollLeft, 100, "scrollBy should not skip area with stop always"); + + scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'normal'); + scroller.scrollBy(500, 0); + assert_equals(scroller.scrollLeft, 500, "scrollBy should skip secon area with stop normal"); + + // When snap type is changed back to mandatory, scrolling should snap. + scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'always'); + scroller.scrollBy(-500, 0); + assert_equals(scroller.scrollLeft, 300, "scrollBy should not skip area with stop always"); + }, `scroll-snap-stop for areas on ${scroller.nodeName} should control snapping behavior and changing it takes effect`); +} +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-dynamic-crash.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-dynamic-crash.html new file mode 100644 index 0000000000..0039a0168e --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-dynamic-crash.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1472537"> +<style> +div { overflow-y: scroll; } +::-webkit-scrollbar { width: 10px; } +::-webkit-scrollbar-corner { } +.crash::-webkit-scrollbar-corner { + scroll-snap-stop: always; +} +</style> +<div id="target"></div> +<script> +document.body.offsetTop; +document.getElementById('target').className = 'crash'; +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type-change.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type-change.html new file mode 100644 index 0000000000..ed86bace44 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type-change.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-type" /> +<meta name="viewport" content="user-scalable=no"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div, html, body { + margin: 0; + padding: 0; +} +html { + margin: 0px; + overflow: scroll; +} +#scroller { + margin-left: 200px; + + height: 300px; + width: 300px; + overflow: scroll; +} +.space { + width: 2000px; + height: 2000px; +} +.snap_area { + margin-left: 200px; + top: 0; + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: none start; +} +</style> + +<!-- Add snap area to the root scroller --> +<div class="snap_area" id="viewport"></div> + +<div id="scroller"> + <div class="snap_area" id="inner"></div> + <div class="space"></div> +</div> + +<div class="space"></div> + +<script> + +const scrollers = [document.scrollingElement, document.getElementById("scroller")]; +for (const scroller of scrollers) { + test(_ => { + scroller.style.scrollSnapType = 'x mandatory'; + scroller.scrollTo(100, 0); + assert_equals(scroller.scrollLeft, 200, "scrolling should snap"); + + // When snap type is 'none' the scroller, scrolling should not snap. + scroller.style.scrollSnapType = 'none'; + scroller.scrollTo(100, 0); + assert_equals(scroller.scrollLeft, 100, "scrolling should not snap"); + + // When snap type is changed back to mandatory, scrolling should snap. + scroller.style.scrollSnapType = 'x mandatory'; + scroller.scrollTo(110, 0); + assert_equals(scroller.scrollLeft, 200, "scrolling should snap after change"); + }, `scroll-snap-type on ${scroller.nodeName} should control snapping behavior and changing it takes effect`); +} +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type-on-root-element.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type-on-root-element.html new file mode 100644 index 0000000000..a45ac92e5a --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type-on-root-element.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#principal-flow" /> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<style> +body { + height: 8000px; + width: 3000px; + margin: 0px; +} +#target { + position: absolute; + background-color: blue; + top: 2000px; + left: 100px; + + width: 100vw; + height: 100px; +} +</style> +<div id="target"></div> +<script> +const documentHeight = document.documentElement.clientHeight; + +function cleanup() { + document.documentElement.style.scrollSnapType = "none"; + target.style.scrollSnapAlign = ""; + document.body.style.writingMode = ""; + window.scrollTo(0, 0); +} + +test(t => { + t.add_cleanup(cleanup); + document.documentElement.style.scrollSnapType = "y mandatory"; + target.style.scrollSnapAlign = "end none"; + + window.scrollTo(0, 1800); + + // `target y (2000px)` + `target height (100px)` - document height. + assert_equals(document.scrollingElement.scrollTop, 2100 - documentHeight); + assert_equals(document.scrollingElement.scrollLeft, 0, "x should not snap"); +}, "The scroll-snap-type on the root element is applied"); + +test(t => { + t.add_cleanup(cleanup); + + document.documentElement.style.scrollSnapType = "inline mandatory"; + document.body.style.writingMode = "vertical-lr"; + target.style.scrollSnapAlign = "none end"; + + window.scrollTo(200, 1800); + + // Since inline axis is vertical, scrolling viewport vertically on block + // axis should snap. + assert_equals(document.scrollingElement.scrollTop, 2100 - documentHeight, "inline should snap"); + // `target x (100px)`. + assert_equals(document.scrollingElement.scrollLeft, 200, "block should not snap"); +}, "The writing-mode (vertical-lr) on the body is used"); + +test(t => { + t.add_cleanup(cleanup); + + document.documentElement.style.scrollSnapType = "inline mandatory"; + document.body.style.writingMode = "horizontal-tb"; // inline is horizontal + target.style.scrollSnapAlign = "none start"; + + window.scrollTo(200, 1800); + + // Though the target's width is 100vw, there may be room to scroll the window + // within the target because of the scrollbar width and the browser may snap + // to the right edge (instead of the left edge of the target, since it is + // closer to the offset of 200 and still a valid snap point) within this room. + const scrollbar_width = window.innerWidth - document.documentElement.clientWidth; + assert_approx_equals(document.scrollingElement.scrollLeft, 100, scrollbar_width, "inline should snap"); + assert_equals(document.scrollingElement.scrollTop, 1800, "block should not snap"); +}, "The writing-mode (horizontal-tb) on the body is used "); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type.html new file mode 100644 index 0000000000..1577aa7afc --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-snap-type.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-type" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +div { + position: absolute; + margin: 0px; +} +#scroller { + height: 400px; + width: 400px; + overflow: scroll; +} +#space { + width: 2000px; + height: 2000px; +} + +.snap { + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} +#left-top { + left: 0px; + top: 0px; +} +#right-bottom { + left: 1000px; + top: 1000px; +} +</style> + +<div id="scroller"> + <div id="space"></div> + <div class="snap" id="left-top"></div> + <div class="snap" id="right-bottom"></div> +</div> + +<script> +var scroller = document.getElementById("scroller"); +var visible_x = 1000 - scroller.clientWidth; +var visible_y = 1000 - scroller.clientHeight; + +test(() => { + scroller.style.scrollSnapType = "both mandatory"; + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + + scroller.scrollTo(visible_x + 10, visible_y + 10); + assert_equals(scroller.scrollLeft, 1000); + assert_equals(scroller.scrollTop, 1000); +}, "mandatory scroll-snap-type should snap as long as the element is visible."); + +test(() => { + scroller.style.scrollSnapType = "both proximity"; + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + + scroller.scrollTo(visible_x + 10, visible_y + 10); + assert_equals(scroller.scrollLeft, visible_x + 10); + assert_equals(scroller.scrollTop, visible_y + 10); +}, "proximity scroll-snap-type shouldn't snap if the snap position is too far away."); + +test(() => { + scroller.style.scrollSnapType = "both proximity"; + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + + scroller.scrollTo(995, 995); + assert_equals(scroller.scrollLeft, 1000); + assert_equals(scroller.scrollTop, 1000); +}, "proximity scroll-snap-type should snap if the snap position is close."); + +test(_ => { + scroller.style.scrollSnapType = "none"; + scroller.scrollTo(100, 100); + assert_equals(scroller.scrollLeft, 100, "scrolling should not snap"); + assert_equals(scroller.scrollTop, 100, "scrolling should not snap"); +}, "none scroll-snap-type shouldn't snap."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-001-ref.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-001-ref.html new file mode 100644 index 0000000000..28b00184c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<title>Reference</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + font: 20px/1 sans-serif; + } + .container > div { + height: 1em; + margin: 1em 0; + background: green; + } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-001.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-001.html new file mode 100644 index 0000000000..eeda674e07 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<title>#target and snap position with snapping off (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name="flags" content="may"> +<meta name='assert' + content="Test passes if scroll snapping is honored + on a scroll container with 'scroll-snap-type: none' + when navigating to an element with the target fragment ID."> + +<style type='text/css'> + iframe { + border: solid blue 4px; + height: 80px; + width: calc(100% - 8px); + } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<iframe class="container" src="support/scroll-target-align-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-002.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-002.html new file mode 100644 index 0000000000..01db026dff --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-002.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<title>scrollIntoView() and snap position with snapping off (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name="flags" content="may"> +<meta name='assert' + content="Test passes if scroll snapping is honored + on a scroll container with 'scroll-snap-type: none' + when scrolling an element into view + explicitly by script."> + +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + .container > div { + height: 1em; + } + .container { scroll-padding: .5em 0 0; } /* set up a snap position */ + #target { scroll-margin: .5em 0 0; + scroll-snap-align: center; } + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div id="stripe"></div> + <div id="target"></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<script> + document.getElementById('target').scrollIntoView(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-003.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-003.html new file mode 100644 index 0000000000..d13efa0abb --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-003.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<title>focus() and snap position with snapping off (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name="flags" content="may"> +<meta name='assert' + content="Test passes if scroll snapping is honored + on a scroll container with 'scroll-snap-type: none' + when scrolling an element into view + even if that operation is implied (in this case, by .focus())."> +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + .container > div, a { + height: 1em; + display: block; + outline: none; + } + .container { scroll-padding: .5em 0 0; } /* set up a snap position */ + #target { scroll-margin: .5em 0 0; + scroll-snap-align: center; } + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div id="stripe"></div> + <a href="" id="target"></a> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<script> + document.getElementById('target').focus(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-001.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-001.html new file mode 100644 index 0000000000..8ddbbcec5f --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<title>#target and scroll-margin with snapping off (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name="flags" content="should"> +<meta name='assert' + content="Test passes if scroll-margin is honored + on a scroll container with 'scroll-snap-type: none' + when navigating to an element with the target fragment ID."> + +<style type='text/css'> + iframe { + border: solid blue 4px; + height: 80px; + width: calc(100% - 8px); + } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<iframe class="container" src="support/scroll-target-margin-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-002.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-002.html new file mode 100644 index 0000000000..51cf553b36 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<title>scrollIntoView() and scroll-margin with snapping off (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name="flags" content="should"> +<meta name='assert' + content="Test passes if scroll-margin is honored + on a scroll container with 'scroll-snap-type: none' + when scrolling an element into view + explicitly by script."> +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + .container > div { + height: 1em; + } + #target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div id="stripe"></div> + <div id="target"></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<script> + document.getElementById('target').scrollIntoView(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-003.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-003.html new file mode 100644 index 0000000000..2ea8eff67c --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-003.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<title>focus() and scroll-margin with snapping off (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name="flags" content="should"> +<meta name='assert' + content="Test passes if scroll-margin is honored + on a scroll container with 'scroll-snap-type: none' + when scrolling an element into view + even if that operation is implied (in this case, by .focus())."> +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + .container > div, a { + height: 1em; + display: block; + outline: none; + } + #target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div id="stripe"></div> + <a href="" id="target"></a> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<script> + document.getElementById('target').focus(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-004.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-004.html new file mode 100644 index 0000000000..ac87c8684d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-004.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<title>scroll-margin on elements with 'display: table;'</title> +<link rel='author' title='Jan Grosser' href='mailto:jan_firefoxdev@t-online.de'> +<link rel='help' href='https://bugzilla.mozilla.org/show_bug.cgi?id=1633192'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name="flags" content="should"> +<meta name='assert' content="Test passes if scroll-margin is honored on elements with 'display: table'."> +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + .container > div { + height: 1em; + } + #target { scroll-margin: 2em 0 1em; display: table; } /* snap area is exact fit for snapport */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div id="stripe"></div> + <div id="target"></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<script> + document.getElementById('target').scrollIntoView(); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-005.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-005.html new file mode 100644 index 0000000000..9296202354 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-005.html @@ -0,0 +1,36 @@ +<!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> +promise_test(async function() { + document.scrollingElement.scrollTo(0, 20000); + await new Promise(resolve => { + document.addEventListener("scroll", resolve, { once: true }); + document.getElementById("target").focus(); + }); + // Should be around 5000 - 200px of margin - (window.innerHeight / 2) + const targetPos = 4900 - (window.innerHeight / 2); + assert_between_exclusive(document.scrollingElement.scrollTop, targetPos - 300, + targetPos + 300, "Should honor date input scroll-margin"); +}); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-006.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-006.html new file mode 100644 index 0000000000..48e246249f --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-006.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<title>scrollIntoView() and scroll-margin applied to an inline element</title> +<link rel='author' title='Martin Robinson' href='http://igalia.com'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style type='text/css'> + .container { + border: solid black 1px; + height: 40px; + width: 40px; + overflow: auto; + } +</style> + +<div class="container"> + <div style="height: 1000px; width: 2000px;"></div> + <div style="width: 2000px;"> + <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span> + <span id="target">TARGETTARGETTARGETTARGET</span> + <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span> + </div> + <div style="height: 1000px; width: 2000px;"></div> +</div> + +<script> + +test(() => { + target.scrollIntoView(); + const scroller = target.parentElement.parentElement; + let expectedScrollPosition = [scroller.scrollLeft - 20, scroller.scrollTop - 20]; + scroller.scrollTo(0, 0); + + target.style.scrollMarginTop = "20px"; + target.style.scrollMarginLeft = "20px"; + target.scrollIntoView(); + assert_equals(scroller.scrollLeft, expectedScrollPosition[0]); + assert_equals(scroller.scrollTop, expectedScrollPosition[1]); + + target.style.scrollMarginTop = "0px"; + target.style.scrollMarginLeft = "0px"; + + scroller.scrollTo(2000, 2000); + target.scrollIntoView({"block": "end", "inline": "end"}); + expectedScrollPosition = [scroller.scrollLeft + 20, scroller.scrollTop + 20]; + scroller.scrollTo(2000, 2000); + + target.style.scrollMarginBottom = "20px"; + target.style.scrollMarginRight = "20px"; + target.scrollIntoView({"block": "end", "inline": "end"}); + assert_equals(scroller.scrollLeft, expectedScrollPosition[0]); + assert_equals(scroller.scrollTop, expectedScrollPosition[1]); + +}, "scroll-margin is taken into account when scrolling an inline element into view"); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-001.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-001.html new file mode 100644 index 0000000000..5cd4fddcc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>#target and scroll-padding with snapping off (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-padding'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name='assert' + content="Test passes if scroll-padding is honored + on a scroll container with 'scroll-snap-type: none' + when navigating to an element with the target fragment ID."> +<style type='text/css'> + iframe { + border: solid blue 4px; + height: 80px; + width: calc(100% - 8px); + } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<iframe class="container" src="support/scroll-target-padding-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-002.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-002.html new file mode 100644 index 0000000000..fbed1e132e --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<title>scrollIntoView() and scroll-padding with snapping off (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-padding'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name='assert' + content="Test passes if scroll-padding is honored + on a scroll container with 'scroll-snap-type: none' + when scrolling an element into view + explicitly by script."> +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + .container > div { + height: 1em; + } + .container { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div id="stripe"></div> + <div id="target"></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<script> + document.getElementById('target').scrollIntoView(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-003.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-003.html new file mode 100644 index 0000000000..ccbe7b0ec9 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-003.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<title>focus() and scroll-padding with snapping off (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name='assert' + content="Test passes if scroll-padding is honored + on a scroll container with 'scroll-snap-type: none' + when scrolling an element into view + even if that operation is implied (in this case, by .focus())."> +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + .container > div, a { + height: 1em; + display: block; + outline: none; + } + .container { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div id="stripe"></div> + <a href="" id="target"></a> + <div></div> + <div class="fail">FAIL</div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> + +<script> + document.getElementById('target').focus(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-001.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-001.html new file mode 100644 index 0000000000..76d3222a0b --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>#target and snap position with snapping on (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name='assert' + content="Test passes if scroll snapping is honored + when navigating to an element with the target fragment ID."> + +<style type='text/css'> + iframe { + border: solid blue 4px; + height: 80px; + width: calc(100% - 8px); + } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<iframe class="container" src="support/scroll-target-snap-001-iframe.html#target">This UA doesn't support iframes; please request a custom version of this test!</iframe> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-002.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-002.html new file mode 100644 index 0000000000..6e928a435e --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-002.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> +<title>scrollIntoView() and snap position with snapping on (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name='assert' + content="Test passes if scroll snapping is honored + when scrolling an element into view + explicitly by script."> + +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + scroll-snap-type: block; + + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + .container > div { + height: 1em; + } + /* Note: we use "start" for #target to avoid spec ambiguity where + * scroll-snap-align conflicts with default ScrollIntoViewOptions. + * See https://github.com/w3c/csswg-drafts/issues/9576. + */ + #target { scroll-margin: 2em 0 0; + scroll-snap-align: start; } /* set up a snap position */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* Try to foil the UA */ + .foilup { margin-bottom: -1em; scroll-snap-align: start; } + .foildn { margin-top: -1em; scroll-snap-align: end; } + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="foilup"></div> + <div class="fail">FAIL</div> + <div></div> + <div id="stripe"></div> + <div class="foilup"></div> + <div id="target"></div> + <div class="foildn"></div> + <div></div> + <div class="fail">FAIL</div> + <div class="foildn"></div> + <div></div> + <div class="foildn"></div> + <div></div> + <div></div> + <div></div> +</div> + +<script> + document.getElementById('target').scrollIntoView(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-003.html b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-003.html new file mode 100644 index 0000000000..6fe3901e51 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-003.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> +<title>focus() and snap position with snapping on (y-axis)</title> +<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'> +<link rel='help' href='https://www.w3.org/TR/css-scroll-snap-1/#choosing'> +<link rel='match' href='scroll-target-001-ref.html'> +<meta name='assert' + content="Test passes if scroll snapping is honored + when scrolling an element into view + even if that operation is implied (in this case, by .focus())."> + +<style type='text/css'> + .container { + border: solid blue 4px; + height: 4em; + overflow: auto; + scroll-snap-type: block; + + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + .container > div, a { + height: 1em; + display: block; + outline: none; + } + #target { scroll-margin: 1em 0 0; + scroll-snap-align: center; } /* set up a snap position */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* Try to foil the UA */ + .foilup { margin-bottom: -1em; scroll-snap-align: start; } + .foildn { margin-top: -1em; scroll-snap-align: end; } + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div> + +<div class="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div class="foilup"></div> + <div class="fail">FAIL</div> + <div></div> + <div id="stripe"></div> + <div class="foilup"></div> + <a href="" id="target"></a> + <div class="foildn"></div> + <div></div> + <div class="fail">FAIL</div> + <div class="foildn"></div> + <div></div> + <div class="foildn"></div> + <div></div> + <div></div> + <div></div> +</div> + +<script> + document.getElementById('target').focus(); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/scrollTo-scrollBy-snaps.html b/testing/web-platform/tests/css/css-scroll-snap/scrollTo-scrollBy-snaps.html new file mode 100644 index 0000000000..6013de5044 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/scrollTo-scrollBy-snaps.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<meta name="viewport" content="user-scalable=no"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +html { + margin: 0px; + overflow: scroll; + scroll-snap-type: both mandatory; +} +div { + position: absolute; +} +.scroller { + overflow: scroll; + scroll-snap-type: both mandatory; +} +#inner-scroller { + top: 3000px; + width: 800px; + height: 800px; +} +.space { + left: 0px; + top: 0px; + width: 4000px; + height: 4000px; +} +.target { + width: 600px; + height: 600px; + scroll-snap-align: start; +} + +.left { + left: 0px; +} +.right { + left: 1000px; +} +.top { + top: 0px; +} +.bottom { + top: 1000px; +} +</style> +<body class="scroller"> + <div class="space"></div> + <div class="target left top"></div> + <div class="target right top"></div> + <div class="target left bottom"></div> + <div class="target right bottom"></div> + <div class="scroller" id="inner-scroller"> + <div class="space"></div> + <div class="target left top"></div> + <div class="target right top"></div> + <div class="target left bottom"></div> + <div class="target right bottom"></div> + </div> +</body> + +<script> +function format_dict(dict) { + const props = []; + for (let prop in dict) { + props.push(`${prop}: ${format_value(dict[prop])}`); + } + return `{${props.join(', ')}}`; +} + +var divScroller = document.getElementById("inner-scroller"); +var viewport = document.scrollingElement; +[ + [{left: 800}, 1000, 0], + [{top: 900}, 0, 1000], + [{left: 900, top: 800}, 1000, 1000], + [{left: 800, top: -100}, 1000, 0], /* outside bounds on y axis */ + [{left: 10000, top: -100}, 1000, 0] /* outside bounds on both axes */ +].forEach(([input, expectedX, expectedY]) => { + test(() => { + divScroller.scrollTo(0, 0); + assert_equals(divScroller.scrollLeft, 0); + assert_equals(divScroller.scrollTop, 0); + if (input.left) + divScroller.scrollLeft = input.left; + if (input.top) + divScroller.scrollTop = input.top; + assert_equals(divScroller.scrollLeft, expectedX); + assert_equals(divScroller.scrollTop, expectedY); + }, `assign scrollLeft and scrollTop for ${format_dict(input)} on div lands on (${expectedX}, ${expectedY})`); + + test(() => { + viewport.scrollTo(0, 0); + assert_equals(viewport.scrollLeft, 0); + assert_equals(viewport.scrollTop, 0); + if (input.left) + viewport.scrollLeft = input.left; + if (input.top) + viewport.scrollTop = input.top; + assert_equals(viewport.scrollLeft, expectedX); + assert_equals(viewport.scrollTop, expectedY); + }, `assign scrollLeft and scrollTop for ${format_dict(input)} on viewport-defining element lands on (${expectedX}, ${expectedY})`); + + test(() => { + divScroller.scrollTo(0, 0); + assert_equals(divScroller.scrollLeft, 0); + assert_equals(divScroller.scrollTop, 0); + divScroller.scrollTo(input); + assert_equals(divScroller.scrollLeft, expectedX); + assert_equals(divScroller.scrollTop, expectedY); + }, `scrollTo(${format_dict(input)}) on div lands on (${expectedX}, ${expectedY})`); + + test(() => { + divScroller.scrollTo(0, 0); + assert_equals(divScroller.scrollLeft, 0); + assert_equals(divScroller.scrollTop, 0); + divScroller.scrollBy(input); + assert_equals(divScroller.scrollLeft, expectedX); + assert_equals(divScroller.scrollTop, expectedY); + }, `scrollBy(${format_dict(input)}) on div lands on (${expectedX}, ${expectedY})`); + + test(() => { + viewport.scrollTo(0, 0); + assert_equals(viewport.scrollLeft, 0); + assert_equals(viewport.scrollTop, 0); + viewport.scrollTo(input); + assert_equals(viewport.scrollLeft, expectedX); + assert_equals(viewport.scrollTop, expectedY); + }, `scrollTo(${format_dict(input)}) on viewport-defining element lands on (${expectedX}, ${expectedY})`); + + test(() => { + viewport.scrollTo(0, 0); + assert_equals(viewport.scrollLeft, 0); + assert_equals(viewport.scrollTop, 0); + viewport.scrollBy(input); + assert_equals(viewport.scrollLeft, expectedX); + assert_equals(viewport.scrollTop, expectedY); + }, `scrollBy(${format_dict(input)}) on viewport-defining element lands on (${expectedX}, ${expectedY})`); + + test(() => { + window.scrollTo(0, 0); + assert_equals(window.scrollX, 0); + assert_equals(window.scrollY, 0); + window.scrollTo(input); + assert_equals(window.scrollX, expectedX); + assert_equals(window.scrollY, expectedY); + }, `scrollTo(${format_dict(input)}) on window lands on (${expectedX}, ${expectedY})`); + + test(() => { + window.scrollTo(0, 0); + assert_equals(window.scrollX, 0); + assert_equals(window.scrollY, 0); + window.scrollBy(input); + assert_equals(window.scrollX, expectedX); + assert_equals(window.scrollY, expectedY); + }, `scrollBy(${format_dict(input)}) on window lands on (${expectedX}, ${expectedY})`); +}); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/selection-target.html b/testing/web-platform/tests/css/css-scroll-snap/selection-target.html new file mode 100644 index 0000000000..1c8435ea6e --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/selection-target.html @@ -0,0 +1,49 @@ +<!doctype html> +<meta charset=utf-8> +<title>scroll-padding is respected when typing into an out-of-view textfield</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1701928"> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-padding"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<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> +<style> + body { + margin: 0; + } + :root { + scroll-padding-top: 100px; + } +</style> +<div style="height: 300vh;"></div> +<input type="text"> +<div style="height: 300vh;"></div> +<script> +function tick() { + return new Promise(resolve => { + requestAnimationFrame(() => requestAnimationFrame(resolve)); + }); +} + +promise_test(async function() { + let input = document.querySelector("input"); + input.focus(); + await tick(); + // Scroll out of view. + scrollTo(0, document.scrollingElement.scrollHeight); + await tick(); + assert_not_equals(window.scrollY, 0); + assert_true(input.getBoundingClientRect().bottom < 0, "Should be offscreen"); + // NOTE(emilio): Using test_driver.Actions() instead of test_driver.send_keys + // because the later scrolls the target into view which would defeat the + // point of the test... + await new test_driver.Actions().keyDown('a').send(); + await tick(); + // We assert the bottom rather than the top because Gecko scrolls the + // selection bounds into view, not the whole input. + assert_true(input.getBoundingClientRect().bottom > 100, "Scroll-padding should be respected"); +}, "Test scrolling into view when typing"); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/direction-rtl.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/direction-rtl.html new file mode 100644 index 0000000000..85724c31fe --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/direction-rtl.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title> + Scrollers should snap to the closest snap point on initial layout (using 'direction: rtl') +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<link rel="match" href="snap-after-initial-layout-ref.html" /> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; + direction: rtl; +} + +#close-target { + width: 200px; + height: 200px; + border: solid green 50px; + top: 50px; + right: 150px; + margin: 50px; + background-color: green; + scroll-snap-align: start; +} + +#far-target { + width: 300px; + height: 300px; + top: 100px; + right: 700px; + background-color: red; + scroll-snap-align: start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="close-target"></div> + <div id="far-target"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-initial-layout-000-ref.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-initial-layout-000-ref.html new file mode 100644 index 0000000000..f3eaa06ac9 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-initial-layout-000-ref.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<title> + CSS Scroll Snap Reference +</title> +<style> + +.scroller { + width: 100px; + height: 100px; + border: solid blue; + margin: 10px; + display: inline-block; +} + +.scroller > div { + width: 30px; + height: 30px; + background: orange; +} + +.proxfar { + border-color: orange; +} + +</style> + +<p>Test passes if there is an orange square precisely at the top left corner of each blue box (no gap), +and each orange box is empty. + + +<div class="mandatory"> + <div class="scroller"> + <div></div> + </div> + + <div class="scroller"> + <div></div> + </div> + + <div class="scroller"> + <div></div> + </div> + + <!-- on-screen --> + <div class="scroller"> + <div></div> + </div> + + <div class="scroller"> + <div></div> + </div> + + <div class="scroller"> + <div></div> + </div> +</div> + +<div class="proximity"> + <!-- off-screen --> + <div class="scroller proxfar"> + </div> + + <div class="scroller proxfar"> + </div> + + <div class="scroller proxfar"> + </div> + + <!-- on-screen --> + <div class="scroller"> + <div></div> + </div> + + <div class="scroller"> + <div></div> + </div> + + <div class="scroller"> + <div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-initial-layout-000.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-initial-layout-000.html new file mode 100644 index 0000000000..ea47c9f36c --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-initial-layout-000.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<title> + On-screen vs. Off-screen Snapped Initial Scroll Position (Mandatory and Proximity) +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align"> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<!-- Test assumes 2px proximity is enough to snap. + If your implementation has a cogent argument as to why this is too much, + please request a change to this test. ~fantasai --> +<link rel="match" href="scroll-snap-initial-layout-000-ref.html"> + +<style> + +.scroller { + scroll-snap-type: both mandatory; + overflow: hidden; + scroll-padding: 0; + width: 100px; + height: 100px; + border: solid blue; + margin: 10px; + display: inline-block; +} + +.mandatory > .scroller { + scroll-snap-type: both mandatory; +} + +.proximity > .scroller { + scroll-snap-type: both proximity; +} + +.scroller > div { + /* padding wrapper */ + width: 30px; +} + +.scroller > div > div { + /* target box */ + height: 30px; + background: orange; + scroll-snap-align: start; +} + +.proxfar { + border-color: orange; +} +.proxfar > div > div { + background: red; +} + +</style> + +<p>Test passes if there is an orange square precisely at the top left corner of each blue box (no gap), +and each orange box is empty. + + +<div class="mandatory"> + <!-- off-screen --> + <div class="scroller"> + <div style="padding: 110px;"><div class="small-target"></div></div> + </div> + + <div class="scroller"> + <div style="padding-block: 110px;"><div class="small-target"></div></div> + </div> + + <div class="scroller"> + <div style="padding-inline: 110px;"><div class="small-target"></div></div> + </div> + + <!-- on-screen --> + <div class="scroller"> + <div style="padding: 90px;"><div class="small-target"></div></div> + </div> + + <div class="scroller"> + <div style="padding-block: 90px;"><div class="small-target"></div></div> + </div> + + <div class="scroller"> + <div style="padding-inline: 90px;"><div class="small-target"></div></div> + </div> +</div> + +<div class="proximity"> + <!-- off-screen --> + <div class="scroller proxfar"> + <div style="padding: 110px;"><div class="small-target"></div></div> + </div> + + <div class="scroller proxfar"> + <div style="padding-block: 110px;"><div class="small-target"></div></div> + </div> + + <div class="scroller proxfar"> + <div style="padding-inline: 110px;"><div class="small-target"></div></div> + </div> + + <!-- on-screen --> + <div class="scroller"> + <div style="padding: 2px 110px 110px 2px;"><div class="small-target"></div></div> + </div> + + <div class="scroller"> + <div style="padding: 2px 110px 110px 2px;"><div class="small-target"></div></div> + </div> + + <div class="scroller"> + <div style="padding: 2px 110px 110px 2px;"><div class="small-target"></div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000-ref.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000-ref.html new file mode 100644 index 0000000000..428eb3facb --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000-ref.html @@ -0,0 +1,188 @@ +<!DOCTYPE html> +<title> + CSS Scroll Snap Reference +</title> + +<style> + +.wrapper { + /* lay out in a nice grid */ + display: grid; + gap: 0.25em; + grid-template-columns: repeat(6, max-content); +} + +.scroller { + width: 50px; + height: 50px; + border: solid silver; + border-block-start-color: blue; + border-inline-start-color: blue; + position: relative; +} + +.target { + width: 30px; + height: 30px; + background: orange; + top: 0; left: 0; right: 0; bottom: 0; + position: absolute; +} + +.TB { writing-mode: horizontal-tb; } +.LR { writing-mode: vertical-lr; } +.RL { writing-mode: vertical-rl; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } + +/* not absolutizing the border colors, so that the test passes even if css-logical is not supported; */ +.large.invert { + border: solid silver; + border-block-end-color: blue; + border-inline-end-color: blue; +} + +.TB.large.invert .target::before { top: auto; } +.LR.large.invert .target::before { left: auto; } +.RL.large.invert .target::before { right: auto; } + +.TB.ltr.large.invert .target::before { left: auto; } +.TB.rtl.large.invert .target::before { right: auto; } +.LR.ltr.large.invert .target::before { top: auto; } +.LR.rtl.large.invert .target::before { bottom: auto; } +.RL.ltr.large.invert .target::before { top: auto; } +.RL.rtl.large.invert .target::before { bottom: auto; } + +.large.invert .target::before { + width: 9px; + height: 9px; + background: orange; + top: 0; left: 0; right: 0; bottom: 0; + position: absolute; + content: ''; +} + +.large.invert .target { + display: block; + background: none; + width: 30px; + height: 30px; + border-block-start: 20px solid red; + border-inline-start: 20px solid red; +} + +</style> + +<p>Test passes if there is an orange square tucked into each blue corner without gaps, +and there is no red, except for the large inverted cases which should have red +in the silver corner and smaller orange boxes in the blue corner. + +<div class="wrapper"> +<!-- Simple Small Cases --> + +<div class="scroller TB ltr small"> + <div class="target"></div> +</div> + +<div class="scroller LR ltr small"> + <div class="target"></div> +</div> + +<div class="scroller RL ltr small"> + <div class="target"></div> +</div> + +<div class="scroller TB rtl small"> + <div class="target"></div> +</div> + +<div class="scroller LR rtl small"> + <div class="target"></div> +</div> + +<div class="scroller RL rtl small"> + <div class="target"></div> +</div> + +<!-- Target-inverted Small Cases + This row should be identical to the previous. --> + +<div class="scroller TB ltr small invert"> + <div class="target"></div> +</div> + +<div class="scroller LR ltr small invert"> + <div class="target"></div> +</div> + +<div class="scroller RL ltr small invert"> + <div class="target"></div> +</div> + +<div class="scroller TB rtl small invert"> + <div class="target"></div> +</div> + +<div class="scroller LR rtl small invert"> + <div class="target"></div> +</div> + +<div class="scroller RL rtl small invert"> + <div class="target"></div> +</div> + +<!-- Simple Large Cases --> + +<div class="scroller TB ltr large"> + <div class="target"></div> +</div> + +<div class="scroller LR ltr large"> + <div class="target"></div> +</div> + +<div class="scroller RL ltr large"> + <div class="target"></div> +</div> + +<div class="scroller TB rtl large"> + <div class="target"></div> +</div> + +<div class="scroller LR rtl large"> + <div class="target"></div> +</div> + +<div class="scroller RL rtl large"> + <div class="target"></div> +</div> + +<!-- Target-inverted Large Cases + This is the fun one. --> + +<div class="scroller TB ltr large invert"> + <div class="target"></div> +</div> + +<div class="scroller LR ltr large invert"> + <div class="target"></div> +</div> + +<div class="scroller RL ltr large invert"> + <div class="target"></div> +</div> + +<div class="scroller TB rtl large invert"> + <div class="target"></div> +</div> + +<div class="scroller LR rtl large invert"> + <div class="target"></div> +</div> + +<div class="scroller RL rtl large invert"> + <div class="target"></div> +</div> + +</div> <!-- wrapper --> + diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000.html new file mode 100644 index 0000000000..f44317c858 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000.html @@ -0,0 +1,238 @@ +<!DOCTYPE html> +<title> + scroll-snap-align vs writing-mode +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align"> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> +<link rel="match" href="scroll-snap-writing-mode-000-ref.html"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<style> + +.wrapper { + /* lay out in a nice grid */ + display: grid; + gap: 0.25em; + grid-template-columns: repeat(6, max-content); +} + +.scroller { + scroll-snap-type: both mandatory; + overflow: hidden; + scroll-padding: 0; + width: 50px; + height: 50px; + border: solid silver; + border-block-start-color: blue; + border-inline-start-color: blue; +} +.area { + width: 200px; + height: 200px; +} + +.target { + margin: 5px; + scroll-snap-align: start; +} + +.small .target { + width: 30px; + height: 30px; + background: orange; +} + +.large .target { + width: 51px; + height: 51px; + border-block-end: 20px solid red; + border-inline-end: 20px solid red; +} + +.large .target::before { + content: ''; + display: block; + width: 30px; + height: 30px; + background: orange; +} + +.TB { writing-mode: horizontal-tb; } +.LR { writing-mode: vertical-lr; } +.RL { writing-mode: vertical-rl; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } + +.TB.ltr.invert .target { writing-mode: vertical-rl; direction: rtl; } +.TB.rtl.invert .target { writing-mode: vertical-lr; direction: rtl; } +.LR.ltr.invert .target { writing-mode: vertical-rl; direction: rtl; } +.LR.rtl.invert .target { writing-mode: vertical-rl; direction: ltr; } +.RL.ltr.invert .target { writing-mode: vertical-lr; direction: rtl; } +.RL.rtl.invert .target { writing-mode: horizontal-tb; direction: ltr; } + +.large.invert { + /* key off target‘s writing mode, which we just inverted */ + border: solid silver; + border-block-end-color: blue; + border-inline-end-color: blue; +} +</style> + +<p>Test passes if there is an orange square tucked into each blue corner without gaps, + and there is no red, except for the large inverted cases which should have red + in the silver corner and smaller orange boxes in the blue corner. + +<div class="wrapper"> +<!-- Simple Small Cases --> + +<div class="scroller TB ltr small"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller LR ltr small"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller RL ltr small"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller TB rtl small"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller LR rtl small"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller RL rtl small"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<!-- Target-inverted Small Cases + This row should be identical to the previous. --> +<div class="scroller TB ltr small invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller LR ltr small invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller RL ltr small invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller TB rtl small invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller LR rtl small invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller RL rtl small invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<!-- Simple Large Cases --> + +<div class="scroller TB ltr large"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller LR ltr large"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller RL ltr large"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller TB rtl large"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller LR rtl large"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller RL rtl large"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<!-- Target-inverted Large Cases + This is the fun one. --> + +<div class="scroller TB ltr large invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller LR ltr large invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller RL ltr large invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller TB rtl large invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller LR rtl large invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +<div class="scroller RL rtl large invert"> + <div class="area"> + <div class="target"></div> + </div> +</div> + +</div> <!-- wrapper --> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/snap-after-initial-layout-ref.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/snap-after-initial-layout-ref.html new file mode 100644 index 0000000000..c8009b626c --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/snap-after-initial-layout-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Reference</title> +<style> +div { + margin: 0; + position: absolute; +} + +#target { + width: 300px; + height: 300px; + top: 0; + left: 200px; + background-color: green; +} +</style> + +<div> + <div id="target"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-horizontal-tb.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-horizontal-tb.html new file mode 100644 index 0000000000..9a680d10d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-horizontal-tb.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title> + Scrollers should snap to the closest snap point on initial layout + (using 'writing-mode: horizontal-tb') +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<link rel="match" href="snap-after-initial-layout-ref.html" /> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; + writing-mode: horizontal-tb; +} + +#close-target { + width: 200px; + height: 200px; + border: solid green 50px; + top: 50px; + left: 150px; + margin: 50px; + background-color: green; + scroll-snap-align: start end; +} + +#far-target { + width: 300px; + height: 300px; + top: 100px; + left: 500px; + background-color: red; + scroll-snap-align: start end; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="close-target"></div> + <div id="far-target"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-vertical-lr.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-vertical-lr.html new file mode 100644 index 0000000000..f4de0411e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-vertical-lr.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title> + Scrollers should snap to the closest snap point on initial layout + (using 'writing-mode: vertical-lr') +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<link rel="match" href="snap-after-initial-layout-ref.html" /> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; + writing-mode: vertical-lr; +} + +#close-target { + width: 200px; + height: 200px; + border: solid green 50px; + top: 50px; + left: 150px; + margin: 50px; + background-color: green; + scroll-snap-align: end start; +} + +#far-target { + width: 300px; + height: 300px; + top: 100px; + left: 500px; + background-color: red; + scroll-snap-align: end start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="close-target"></div> + <div id="far-target"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-vertical-rl.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-vertical-rl.html new file mode 100644 index 0000000000..1710bc16dd --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-vertical-rl.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title> + Scrollers should snap to the closest snap point on initial layout + (using 'writing-mode: vertical-rl') +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<link rel="match" href="snap-after-initial-layout-ref.html" /> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + /* Chrome bug using 'position:absolute' with LayoutNG disabled */ + position: relative; + + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; + writing-mode: vertical-rl; +} + +#close-target { + width: 200px; + height: 200px; + border: solid green 50px; + top: 50px; + left: 150px; + margin: 50px; + background-color: green; + scroll-snap-align: start; +} + +#far-target { + width: 300px; + height: 300px; + top: 100px; + left: 500px; + background-color: red; + scroll-snap-align: start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="close-target"></div> + <div id="far-target"></div> +</div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/adding-only-snap-area.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/adding-only-snap-area.html new file mode 100644 index 0000000000..53141707bb --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/adding-only-snap-area.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title> + Adding a new snap area when there are none should make the scroller snap to it. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; +} + +#target { + width: 300px; + height: 300px; + top: 100px; + left: 100px; + background-color: green; + scroll-snap-align: start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="target"></div> +</div> + +<script> +const target = document.getElementById("target"); +const scroller = document.getElementById("scroller"); + +test(() => { + scroller.removeChild(target); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + scroller.appendChild(target); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); +}, "Adding a new snap area when there are none should make the scroller snap to it."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/adding-snap-area-while-snapped.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/adding-snap-area-while-snapped.html new file mode 100644 index 0000000000..d26359658f --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/adding-snap-area-while-snapped.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title> + Adding a new snap area while already snapped should not make the scroller snap to it. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; +} + +#initial-target { + width: 300px; + height: 300px; + top: 100px; + left: 100px; + background-color: green; + scroll-snap-align: start; +} + +#other-target { + width: 300px; + height: 300px; + top: 300px; + left: 300px; + background-color: red; + scroll-snap-align: start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="initial-target"></div> + <div id="other-target"></div> +</div> + +<script> +const initial_target = document.getElementById("initial-target"); +const other_target = document.getElementById("other-target"); +const scroller = document.getElementById("scroller"); + +test(() => { + scroller.removeChild(other_target); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); + + scroller.appendChild(other_target); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); +}, "Adding a new snap area while already snapped should not make the scroller snap to it."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-align-nested.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-align-nested.tentative.html new file mode 100644 index 0000000000..ddea570551 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-align-nested.tentative.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<title> + Updating the snap alignment of a snap container's content should make the snap + container resnap accordingly. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 200px; + width: 200px; + overflow: hidden; + scroll-snap-type: both mandatory; +} + +#initial-target { + width: 300px; + height: 300px; + top: 100px; + left: 100px; + background-color: green; + scroll-snap-align: start; +} + +#other-target { + width: 300px; + height: 300px; + top: 300px; + left: 300px; + background-color: red; + scroll-snap-align: start; +} + +.area { + width: 2000px; + height: 2000px; +} + +.snap-area { + scroll-snap-align: start !important; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="initial-target"></div> + <div id="other-target"></div> +</div> + +<script> +const initial_target = document.getElementById("initial-target"); +const other_target = document.getElementById("other-target"); +const scroller = document.getElementById("scroller"); + +function cleanup() { + initial_target.style.setProperty("scroll-snap-align", "start"); + other_target.style.setProperty("scroll-snap-align", "start"); + initial_target.removeAttribute("class"); +} + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); + + initial_target.style.setProperty("scroll-snap-align", "end"); + // scroller maintains scroll position which is still valid as the target's + // snap area covers the snap port. + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); +}, "Changing a large target's snap alignment shouldn't make the scroller" + + " resnap if the scroller is already in a valid snap position."); + +// Similar to above test case except targets are too small to cover snap port, +// so scroller must snap in response to change in scroll-snap-align. +test(t => { + t.add_cleanup(cleanup); + const initial_target_height = initial_target.offsetHeight; + const initial_target_width = initial_target.offsetWidth; + const other_target_height = initial_target.offsetHeight; + const other_target_width = initial_target.offsetWidth; + t.add_cleanup(() => { + initial_target.style.setProperty("height", `${initial_target_height}px`); + initial_target.style.setProperty("width", `${initial_target_width}px`); + other_target.style.setProperty("height", `${other_target_height}px`); + other_target.style.setProperty("width", `${other_target_width}px`); + }) + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); + + initial_target.style.setProperty("height", `${scroller.clientHeight * 2/3 }px`); + initial_target.style.setProperty("width", `${scroller.clientWidth * 2/3 }px`); + other_target.style.setProperty("height", `${scroller.clientHeight * 2/3 }px`); + other_target.style.setProperty("width", `${scroller.clientWidth * 2/3 }px`); + + // scroll (and snap) to top left of other target. + scroller.scrollTo(other_target.offsetTop, + other_target.offsetLeft); + assert_equals(scroller.scrollTop, other_target.offsetTop,); + assert_equals(scroller.scrollLeft, other_target.offsetLeft); + + other_target.style.setProperty("scroll-snap-align", "end"); + // should be scrolled so as to align scroller's bottom-right with + // other_target's bottom-right. + assert_equals(scroller.scrollTop, + other_target.offsetTop + other_target.offsetHeight - scroller.clientHeight); + assert_equals(scroller.scrollLeft, + other_target.offsetLeft + other_target.offsetWidth - scroller.clientWidth); +}, "Changing the current (non-covering) target's snap alignment should make " + + "the scroller snap according to the new alignment."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-align.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-align.html new file mode 100644 index 0000000000..a625621c27 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-align.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<title> + Updating the snap alignment of a snap container's content should make the snap + container resnap accordingly. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 200px; + width: 200px; + overflow: hidden; + scroll-snap-type: both mandatory; +} + +#initial-target { + width: 300px; + height: 300px; + top: 100px; + left: 100px; + background-color: green; + scroll-snap-align: start; +} + +#other-target { + width: 300px; + height: 300px; + top: 300px; + left: 300px; + background-color: red; + scroll-snap-align: start; +} + +.area { + width: 2000px; + height: 2000px; +} + +.snap-area { + scroll-snap-align: start !important; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="initial-target"></div> + <div id="other-target"></div> +</div> + +<script> +const initial_target = document.getElementById("initial-target"); +const other_target = document.getElementById("other-target"); +const scroller = document.getElementById("scroller"); + +function cleanup() { + initial_target.style.setProperty("scroll-snap-align", "start"); + other_target.style.setProperty("scroll-snap-align", "start"); + initial_target.removeAttribute("class"); +} + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); + + initial_target.style.setProperty("scroll-snap-align", "none"); + assert_equals(scroller.scrollTop, 300); + assert_equals(scroller.scrollLeft, 300); +}, "Removing the current target's snap alignment should make the scroller" ++ " resnap to a new snap area."); + +test(t => { + t.add_cleanup(cleanup); + initial_target.style.setProperty("scroll-snap-align", "none"); + other_target.style.setProperty("scroll-snap-align", "none"); + + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + initial_target.style.setProperty("scroll-snap-align", "start"); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); +}, "Changing an element snap alignment from none to start should make the" ++ "scroller resnap."); + +test(t => { + t.add_cleanup(cleanup); + initial_target.style.setProperty("scroll-snap-align", "none"); + other_target.style.setProperty("scroll-snap-align", "none"); + + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + initial_target.classList.add("snap-area"); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); +}, "Changing an element snap alignment from none to start by adding a class" ++ " should make the scroller resnap."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-type-on-root-element.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-type-on-root-element.html new file mode 100644 index 0000000000..c86f39b9d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-type-on-root-element.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html> +<title> + Updating the scroll-snap-type of the root element should make it resnap accordingly. + This is another vairant of changing-scroll-snap-type.html for the root element. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +html { + overflow: hidden; + scroll-snap-type: none; +} + +#y-target { + width: 300px; + height: 300px; + top: 100px; + left: 0; + background-color: green; + scroll-snap-align: start none; +} + +#x-target { + width: 300px; + height: 300px; + top: 0; + left: 100px; + background-color: red; + scroll-snap-align: none start; +} + +.area { + width: 1000vw; + height: 1000vh; +} +</style> + +<div class="area"></div> +<div id="x-target"></div> +<div id="y-target"></div> + +<script> +const x_target = document.getElementById("x_target"); +const y_target = document.getElementById("y_target"); +const scroller = document.documentElement; + +function cleanup() { + scroller.style.setProperty("scroll-snap-type", "none"); +} + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + scroller.style.setProperty("scroll-snap-type", "y mandatory"); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 0); +}, "Changing the scroller's snap type to y should make it resnap on the y-axis."); + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + scroller.style.setProperty("scroll-snap-type", "x mandatory"); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 0); +}, "Changing the scroller's snap type to x should make it resnap on the x-axis."); + + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + scroller.style.setProperty("scroll-snap-type", "x mandatory"); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 0); + + scroller.style.setProperty("scroll-snap-type", "y mandatory"); + assert_equals(scroller.scrollTop, 100); +}, "Changing the scroller's snap type axis should make it resnap."); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-type.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-type.html new file mode 100644 index 0000000000..70774b3d40 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-type.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<title> + Updating the scroll-snap-type of a snap container should make it resnap accordingly. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: none; +} + +#y-target { + width: 300px; + height: 300px; + top: 100px; + left: 0; + background-color: green; + scroll-snap-align: start none; +} + +#x-target { + width: 300px; + height: 300px; + top: 0; + left: 100px; + background-color: red; + scroll-snap-align: none start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="x-target"></div> + <div id="y-target"></div> +</div> + +<script> +const x_target = document.getElementById("x_target"); +const y_target = document.getElementById("y_target"); +const scroller = document.getElementById("scroller"); + +function cleanup() { + scroller.style.setProperty("scroll-snap-type", "none"); +} + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + scroller.style.setProperty("scroll-snap-type", "y mandatory"); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 0); +}, "Changing the scroller's snap type to y should make it resnap on the y-axis."); + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + scroller.style.setProperty("scroll-snap-type", "x mandatory"); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 0); +}, "Changing the scroller's snap type to x should make it resnap on the x-axis."); + + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + scroller.style.setProperty("scroll-snap-type", "x mandatory"); + assert_equals(scroller.scrollLeft, 100); + assert_equals(scroller.scrollTop, 0); + + scroller.style.setProperty("scroll-snap-type", "y mandatory"); + assert_equals(scroller.scrollTop, 100); +}, "Changing the scroller's snap type axis should make it resnap."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/focus-element-no-snap.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/focus-element-no-snap.html new file mode 100644 index 0000000000..9ec004c628 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/focus-element-no-snap.html @@ -0,0 +1,51 @@ +<!doctype html> +<title>Resnap to focused element after relayout</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + +#snapper { + width: 100px; + height: 200px; + overflow-x: scroll; + scroll-snap-type: x mandatory; + color: white; + background-color: oldlace; + display: flex; + align-items: center; +} +.child { + margin-right: 0.5rem; + height: 90%; + scroll-snap-align: start; + padding: 1rem; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + width: 100px; + height: 100px; + background-color: indigo; +} +</style> + +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> + +<div id=snapper> + <div class="child no-snap" tabindex=-1></div> + <div class=child></div> + <div class="child" id ="focus" tabindex=-1></div> + <div class="child" tabindex=-1></div> + <div class=child></div> + <div class=child></div> +</div> + +<script> + +test(t => { + document.getElementById("focus").focus(); + const element = document.getElementById("snapper"); + element.style.width = "101px"; + assert_equals(element.scrollLeft, 0); +}); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/move-current-target.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/move-current-target.html new file mode 100644 index 0000000000..ccadc884c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/move-current-target.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<title> + Moving the current snap target should make the scroller resnap to it. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: relative; + margin: 0; +} + +#block { + height: 100px; + width: 100px; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; +} + +#initial-target { + width: 300px; + height: 300px; + left: 100px; + top: 0; + transform: none; + background-color: green; + scroll-snap-align: start; +} + +#other-target { + width: 300px; + height: 300px; + left: 300px; + background-color: red; + scroll-snap-align: start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div id="block"></div> + <div id="initial-target"></div> + <div id="other-target"></div> + <div class="area"></div> +</div> + +<script> +const initial_target = document.getElementById("initial-target"); +const other_target = document.getElementById("other-target"); +const block = document.getElementById("block"); +const scroller = document.getElementById("scroller"); + +function cleanup() { + initial_target.style.setProperty("transform", "none"); + initial_target.style.setProperty("top", "0"); + block.style.setProperty("height", "100px"); +} + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); + + initial_target.style.setProperty("top", "300px"); + assert_equals(scroller.scrollTop, 400); + assert_equals(scroller.scrollLeft, 100); +}, "Moving the current snap target should make the scroller resnap to it."); + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); + + block.style.setProperty("height", "200px"); + assert_equals(scroller.scrollTop, 200); + assert_equals(scroller.scrollLeft, 100); +}, "Changing the layout of other elements should be able to cause resnapping to \ +the target."); + +test(t => { + t.add_cleanup(cleanup); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); + + initial_target.style.setProperty("transform", "translate(0,100px)"); + assert_equals(scroller.scrollTop, 200); + assert_equals(scroller.scrollLeft, 100); +}, "Transforming the current snap target should make the scroller resnap to it."); + +test(t => { + t.add_cleanup(cleanup); + initial_target.style.setProperty("top", "100px"); + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 200); + assert_equals(scroller.scrollLeft, 100); + + initial_target.style.setProperty("transform", "translate(0,100px)"); + initial_target.style.setProperty("top", "0"); + assert_equals(scroller.scrollTop, 200); + assert_equals(scroller.scrollLeft, 100); +}, "Applying two property changes that do not change the visual offset of the \ +target should not change the scroll offset."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html new file mode 100644 index 0000000000..f15a291f08 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-element.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-scroll-snap" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/dom/events/scrolling/scroll_support.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="resources/common.js" ></script> + </head> + <body> + <style> + .scroller { + overflow: scroll; + position: relative; + height: 400px; + width: 400px; + border:solid 1px black; + scroll-snap-type: y mandatory; + } + .no-snap { scroll-snap-align: none } + .scroller div:focus { + border: solid 1px red; + } + .large-space { + height: 300vh; + width: 300vw; + } + .target { + scroll-snap-align: start; + position: absolute; + width: 100px; + height: 100px; + border: solid 1px black; + } + .top { + top: 0px; + } + .left { + left: 0px; + } + .right { + left: 200px; + } + .bottom { + top: 200px; + } + </style> + <div id="scroller" class="scroller"> + <div class="large-space no-snap" tabindex="1" id="space"></div> + <div id="topleft" tabindex="1" class="top left target">top left</div> + <div id="topright" tabindex="1" class="top right target">top right</div> + <div id="bottomleft" tabindex="1" class="bottom left target">bottom left</div> + <div id="bottomright" tabindex="1" class="bottom right target">bottom right</div> + </div> + <script> + window.onload = () => { + const bottomright = document.getElementById("bottomright"); + const bottomleft = document.getElementById("bottomleft"); + const scroller = document.getElementById("scroller"); + + async function commonInitialization() { + await waitForCompositorCommit(); + assert_equals(scroller.scrollTop, 0, "snapped to top row"); + } + + promise_test(async (t) => { + await commonInitialization(); + + focusAndAssert(bottomright); + await runScrollSnapSelectionVerificationTest(t, scroller, + [bottomright, + bottomleft], + /*expected_target=*/bottomright, "y"); + + focusAndAssert(bottomleft); + await runScrollSnapSelectionVerificationTest(t, scroller, + [bottomright, + bottomleft], + /*expected_target=*/bottomleft, "y"); + }, "scroller selects focused target from aligned choices on snap"); + + promise_test(async (t) => { + t.add_cleanup(() => { + bottomright.style.left = "200px"; + }) + await commonInitialization(); + + // Move bottomright out of the snapport. + bottomright.style.left = "500px"; + + // Set focus on bottomright without scrolling to it. + focusAndAssert(bottomright, true); + await runScrollSnapSelectionVerificationTest(t, scroller, + [bottomright, + bottomleft], + /*expected_target=*/bottomleft, "y"); + }, "out-of-viewport focused element is not the selected snap target."); + + promise_test(async(t) => { + t.add_cleanup(() => { + bottomleft.style.top = "200px"; + }); + await commonInitialization(); + + // Set focus on bottomright without scrolling to it. + focusAndAssert(bottomright, true); + + // Move bottomleft below bottomright. + bottomleft.style.top = "400px"; + + // Snap to bottomleft. + scroller.scrollTop = bottomleft.offsetTop; + + // Test that if bottomright is also shifted so that it is aligned with + // bottomleft, bottomleft remains the selected snap target, despite + // bottomright's having focus. + await runLayoutSnapSeletionVerificationTest(t, scroller, [bottomright], + bottomleft, "y"); + }, "scroller follows selected snap target through layout shift," + + "regardless of focus"); + + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html new file mode 100644 index 0000000000..a6a087316f --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-focused-nested-containers.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="help" href="https://drafts.csswg.org/css-scroll-snap" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/dom/events/scrolling/scroll_support.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="resources/common.js" ></script> + </head> + <body> + <style> + .snap { + scroll-snap-align: start; + } + .placeholder { + height: 40%; + width: 40%; + position: absolute; + top: 0px; + border: solid 1px black; + } + .right { + left: 50%; + } + .container { + position: relative; + border: solid 1px blue; + overflow: scroll; + scroll-snap-type: y mandatory; + } + .bigcontainer { + height: 1000px; + width: 1000px; + } + .smallcontainer { + height: 400px; + width: 400px; + position: absolute; + border: solid 1px blue; + top: 500px; + overflow: scroll; + scroll-snap-type: y mandatory; + } + .large-space { + height: 300vh; + width: 300vw; + position: absolute; + } + .target { + top: 50%; + width: 40%; + height: 40%; + position: absolute; + border: solid 1px red; + } + .target:focus { + border:solid 2px green; + } + </style> + <div class="bigcontainer container" id="outercontainer"> + <div class="large-space"></div> + <div id="leftplaceholder" class="snap placeholder">LPH (outer)</div> + <div id="rightplaceholder" class="snap placeholder right">RPH (outer)</div> + <div id="leftcontainer" class="snap smallcontainer"> + <div class="large-space"></div> + <div class="snap placeholder"></div> + <div class="snap placeholder right"></div> + <div id="lefttarget1" tabindex="1" class="snap target"></div> + <div id="lefttarget2" tabindex="1" class="snap target right"></div> + </div> + <div id="rightcontainer" class="snap smallcontainer right"> + <div class="large-space"></div> + <div class="snap placeholder"></div> + <div class="snap placeholder right"></div> + <div id="righttarget1" tabindex="1" class="snap target"></div> + <div id="righttarget2" tabindex="1" class="snap target right"></div> + </div> + </div> + <script> + // This test verifies that a snap container (outer) which contains another + // snap container (inner) snaps with awareness of focus on children of the + // inner container, i.e. outer should prefer to select the snap area whose + // child has focus even if there is an intermediate snap container between + // the child and outer. + window.onload = () => { + const lefttarget1 = document.getElementById("lefttarget1"); + const righttarget1 = document.getElementById("righttarget1"); + const leftcontainer = document.getElementById("leftcontainer"); + const rightcontainer = document.getElementById("rightcontainer"); + const outercontainer = document.getElementById("outercontainer"); + + promise_test(async (t) => { + await waitForCompositorCommit(); + + focusAndAssert(lefttarget1, /*preventScroll=*/true); + await runScrollSnapSelectionVerificationTest(t, outercontainer, + [leftcontainer, rightcontainer], leftcontainer, "y"); + + focusAndAssert(righttarget1, /*preventScroll=*/true); + await runScrollSnapSelectionVerificationTest(t, outercontainer, + [leftcontainer, rightcontainer], rightcontainer, "y"); + }, "Snap container prefers focused nested snap target."); + } + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js new file mode 100644 index 0000000000..6ceec9118c --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/resources/common.js @@ -0,0 +1,148 @@ +// Utility functions for scroll snap tests which verify User-Agents' snap point +// selection logic when multiple snap targets are aligned. +// It depends on methods in /resources/testdriver-actions.js and +// /dom/event/scrolling/scroll_support.js so html files using these functions +// should include those files as <script>s. + +// This function should be used by scroll snap WPTs wanting to test snap target +// selection when scrolling to multiple aligned targets. +// It assumes scroll-snap-align: start alignment and tries to align to the list +// of snap targets provided, |elements|, which are all expected to be at the +// same offset. +async function scrollToAlignedElementsInAxis(scroller, elements, axis) { + let target_offset_y = null; + let target_offset_x = null; + if (axis == "y") { + for (const e of elements) { + if (target_offset_y) { + assert_equals(e.offsetTop, target_offset_y, + `${e.id} is at y offset ${target_offset_y}`); + } else { + target_offset_y = e.offsetTop; + } + } + assert_equals(); + } else { + for (const e of elements) { + if (target_offset_x) { + assert_equals(e.offsetLeft, target_offset_x, + `${e.id} is at x offset ${target_offset_x}`); + } else { + target_offset_x = e.offsetLeft; + } + } + } + assert_not_equals(target_offset_x || target_offset_y, null); + + const scrollend_promise = waitForScrollendEventNoTimeout(scroller); + await new test_driver.Actions().scroll(0, 0, + (target_offset_x || 0) - scroller.scrollLeft, + (target_offset_y || 0) - scroller.scrollTop, + { origin: scroller }) + .send(); + await scrollend_promise; + if (axis == "y") { + assert_equals(scroller.scrollTop, target_offset_y, "vertical scroll done"); + } else { + assert_equals(scroller.scrollLeft,target_offset_x, "horizontal scroll done"); + } +} + +// This function verifies the snap target that a scroller picked by triggerring +// a layout change and observing which target is followed. Tests using this +// method should ensure that there is at least 100px of room to scroll in the +// desired axis. +// It assumes scroll-snap-align: start alignment. +function verifySelectedSnapTarget(scroller, expected_snap_target, axis) { + // Save initial style. + const initial_left = getComputedStyle(expected_snap_target).left; + const initial_top = getComputedStyle(expected_snap_target).top; + if (axis == "y") { + // Move the expected snap target along the y axis. + const initial_scroll_top = scroller.scrollTop; + const target_top = expected_snap_target.offsetTop + 100; + expected_snap_target.style.top = `${target_top}px`; + assert_equals(scroller.scrollTop, expected_snap_target.offsetTop, + `scroller followed ${expected_snap_target.id} after layout change`); + assert_not_equals(scroller.scrollTop, initial_scroll_top, + "scroller actually scrolled in y axis"); + } else { + // Move the expected snap target along the y axis. + const initial_scroll_left = scroller.scrollLeft; + const target_left = expected_snap_target.offsetLeft + 100; + expected_snap_target.style.left = `${target_left}px`; + assert_equals(scroller.scrollLeft, expected_snap_target.offsetLeft, + `scroller followed ${expected_snap_target.id} after layout change`); + assert_not_equals(scroller.scrollLeft, initial_scroll_left, + "scroller actually scrolled in x axis"); + } + // Undo style changes. + expected_snap_target.style.top = initial_top; + expected_snap_target.style.left = initial_left; +} + +// This is a utility function for tests which verify that the correct element +// is snapped to when snapping at the end of a scroll. +async function runScrollSnapSelectionVerificationTest(t, scroller, aligned_elements, + expected_target, axis) { + // Save initial scroll offset. + const initial_scroll_left = scroller.scrollLeft; + const initial_scroll_top = scroller.scrollTop; + await scrollToAlignedElementsInAxis(scroller, aligned_elements, axis); + verifySelectedSnapTarget(scroller, expected_target, axis); + // Restore initial scroll offsets. + const scrollend_promise = new Promise((resolve) => { + scroller.addEventListener("scrollend", resolve); + }); + scroller.scrollTo(initial_scroll_left, initial_scroll_top); + await scrollend_promise; +} + +// This is a utility function for tests verifying that a layout shift does not +// cause a scroller to change its selected snap target. +// It assumes the element to be aligned have scroll-snap-align: start. +// It tries to align the list of snap targets provided, |elements| with the +// current snap target. +function shiftLayoutToAlignElements(elements, target, axis) { + for (let element of elements) { + if (axis == "y") { + element.style.top = `${target.offsetTop}px`; + } else { + element.style.left = `${target.offsetLeft}px`; + } + } +} + +// This is a utility function for tests verifying that a layout shift does not +// cause a scroller to change its selected snap target. +// It assumes scroll-snap-align: start alignment. +async function runLayoutSnapSeletionVerificationTest(t, scroller, elements_to_align, + expected_target, axis) { + // Save initial scroll offsets and position. + const initial_scroll_left = scroller.scrollLeft; + const initial_scroll_top = scroller.scrollTop; + let initial_tops = []; + for (const element of elements_to_align) { + initial_tops.push(getComputedStyle(element).top); + } + + shiftLayoutToAlignElements(elements_to_align, expected_target, axis); + verifySelectedSnapTarget(scroller, expected_target, axis); + + // Restore initial scroll offset and position states. + let num_elements = initial_tops.length; + for (let i = 0; i < num_elements; i++) { + elements_to_align[i].style.top = initial_tops[i]; + } + // Restore initial scroll offsets. + const scrollend_promise = new Promise((resolve) => { + scroller.addEventListener("scrollend", resolve); + }); + scroller.scrollTo(initial_scroll_left, initial_scroll_top); + await scrollend_promise; +} + +function focusAndAssert(element, preventScroll=false) { + element.focus({preventScroll: preventScroll}); + assert_equals(document.activeElement, element); +} diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/not-resnap-outside-proximity-threshold.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/not-resnap-outside-proximity-threshold.html new file mode 100644 index 0000000000..b2c5720efb --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/not-resnap-outside-proximity-threshold.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title> + Not re-snap once after a scroll operation has finished without snapping + because the scroll destination was outside of the snap proximity threshold. +</title> +<!-- This test assumes that all major browsers' default scroll-snap proximity + thresholds are greater than 200px. --> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1780154"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 600px; + width: 600px; + overflow: hidden; + scroll-snap-type: y proximity; +} + +.snap { + width: 300px; + height: 300px; + background-color: green; + scroll-snap-align: start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div class="snap" style="top: 0px;"></div> + <div class="snap" style="top: 500px;"></div> +</div> + +<script> +test(() => { + // The initial snap position is at (0, 0). + assert_equals(scroller.scrollTop, 0); + assert_equals(scroller.scrollLeft, 0); + + // Scroll to a position where it's outside of the scroll-snap proximity + // threshold, so that it won't trigger snapping. + scroller.scrollTo(0, 250); + + assert_equals(scroller.scrollTop, 250); + assert_equals(scroller.scrollLeft, 0); + + // Changing the initial snap target position, but still it's outside of the + // threshold. + document.querySelectorAll(".snap")[0].style.top = "10px"; + + // Not re-snap to the last snap point. + assert_equals(scroller.scrollTop, 250); + assert_equals(scroller.scrollLeft, 0); +}, "Not re-snap once after a scroll operation has finished without snapping " + + "because the scroll destination was outside of the snap proximity threshold."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/remove-current-target.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/remove-current-target.html new file mode 100644 index 0000000000..82bddf8074 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/remove-current-target.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<title> + Removing the current snap target should make the scroller snap to a new target. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; +} + +#initial-target { + width: 300px; + height: 300px; + top: 100px; + left: 100px; + background-color: red; + scroll-snap-align: start; +} + +#other-target { + width: 300px; + height: 300px; + top: 300px; + left: 300px; + background-color: green; + scroll-snap-align: start; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="initial-target"></div> + <div id="other-target"></div> +</div> + +<script> +const initial_target = document.getElementById("initial-target"); +const other_target = document.getElementById("other-target"); +const scroller = document.getElementById("scroller"); + +test(() => { + scroller.scrollTo(0,0); + assert_equals(scroller.scrollTop, 100); + assert_equals(scroller.scrollLeft, 100); + + scroller.removeChild(initial_target); + assert_equals(scroller.scrollTop, 300); + assert_equals(scroller.scrollLeft, 300); +}, "Removing the current snap target should make the scroller snap to a new target."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/resnap-to-focused.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/resnap-to-focused.html new file mode 100644 index 0000000000..637c578a85 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/resnap-to-focused.html @@ -0,0 +1,82 @@ +<!doctype html> +<title>Resnap to focused element after relayout</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + +#snapper { + counter-reset: child 0; + width: 200px; + scroll-snap-type: block mandatory; + overflow:hidden; + height: 100px; +} +.child { + width: 100px; + height: 100px; + background:red; + text-align: center; + box-sizing: border-box; + counter-increment: child; + float: left; +} +.child.f { + background: green; + scroll-snap-align: center; +} +.child::before { + content: counter(child); +} + +</style> + +<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> +<!-- +When re-snapping after a layout change, +if multiple elements were capable of being the snap target previously, +and one of them is focused, +you must resnap to the focused one. +--> +<div id=snapper> + <div class="child no-snap" tabindex=-1></div> + <div class=child></div> + <div class="child f" tabindex=-1></div> + <div class="child f" tabindex=-1></div> + <div class=child></div> + <div class=child></div> +</div> + +<script> + +var container = document.querySelector("#snapper"); +var [one,two] = document.querySelectorAll(".child.f"); +var unsnappable = document.querySelector(".child.no-snap"); + +async_test(t=>{ + requestAnimationFrame(()=>{ + testSnap(t, one, 3); + requestAnimationFrame(()=>{ + testSnap(t, two, 4); + requestAnimationFrame(()=>{ + testSnap(t, one, 3); + t.done(); + }); + }); + }); +}); + +function testSnap(t, child, expectedRow) { + t.step(()=>{ + unsnappable.focus(); + container.style.width = "200px"; + var startingRow = container.scrollTop/100 + 1; + assert_equals(startingRow, 2, "Initially snapped to row 2"); + child.focus(); + container.style.width = "100px"; + var endingRow = container.scrollTop/100 + 1; + assert_equals(endingRow, expectedRow, `After resize, should snap to row ${expectedRow}.`); + }); +} + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/snap-to-different-targets.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/snap-to-different-targets.html new file mode 100644 index 0000000000..fb9469ba73 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/snap-to-different-targets.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<title> + The scroller should try to resnap to targets for both axes if possible. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; +} + +#x-axis-target { + scroll-snap-align: none start; + background-color: blue; + width: 100px; + height: 100px; + top: 400px; + left: 200px; +} + +#y-axis-target { + scroll-snap-align: start none; + background-color: green; + width: 100px; + height: 100px; + top: 200px; + left: 400px; +} + +#far-x-axis-target { + scroll-snap-align: none start; + background-color: blue; + width: 100px; + height: 100px; + top: 1200px; + left: 300px; +} + +#far-y-axis-target { + scroll-snap-align: start none; + background-color: green; + width: 100px; + height: 100px; + top: 300px; + left: 1200px; +} + +.area { + width: 2000px; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div id="x-axis-target"></div> + <div id="y-axis-target"></div> + <div id="far-x-axis-target"></div> + <div id="far-y-axis-target"></div> +</div> + +<script> + +const x_target = document.getElementById("x-axis-target"); +const y_target = document.getElementById("y-axis-target"); +const scroller = document.getElementById("scroller"); + +test(t => { + // The scroller should be snapped to the two closest points on first layout. + assert_equals(scroller.scrollTop, 200); + assert_equals(scroller.scrollLeft, 200); + x_target.style.setProperty("left", "1000px"); + y_target.style.setProperty("top", "1000px"); + + // The style change makes it impossible for the scroller to snap to both + // targets, but at least one of the targets should be preserved. The scroller + // should then re-evaluate the snap point for the other axis. + const snapped_to_x = scroller.scrollLeft == 1000 && scroller.scrollTop == 300; + const snapped_to_y = scroller.scrollTop == 1000 && scroller.scrollLeft == 300; + assert_true(snapped_to_x || snapped_to_y); +}, "Scroller should snap to at least one of the targets if unable to snap to both after a layout change."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-add-scroll-container.html b/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-add-scroll-container.html new file mode 100644 index 0000000000..66fa96b745 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-add-scroll-container.html @@ -0,0 +1,154 @@ +<!DOCTYPE html> +<title> + Adding a scrollable element should make it start capturing snap points. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions"/> +<meta name="viewport" content="user-scalable=no"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +html { + scroll-snap-type: y mandatory; +} + +body { + margin: 0px; +} + +#middle-scroller { + top: 100px; + height: 500px; + width: 500px; + overflow: visible; + background-color: rgb(12, 61, 2); + scroll-snap-type: none; +} + +#inner-scroller { + top: 200px; + height: 400px; + width: 400px; + overflow: visible; + background-color: rgb(65, 139, 50); + scroll-snap-type: y mandatory; +} + +.space { + width: 2000px; + height: 2000px; +} + +#inner-snap-area { + top: 300px; + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} + +#document-snap-area { + top: 500px; + width: 200px; + height: 200px; + background-color: lightblue; + scroll-snap-align: start; +} + +#inserted-snap-container { + top: 400px; + height: 600px; + width: 400px; + overflow: scroll; + scroll-snap-type: y mandatory; +} +</style> + +<div class="space"></div> + <div id="middle-scroller"> + <div class="space"></div> + <div id="inner-scroller"> + <div class="space"></div> + <div id="inner-snap-area"></div> + </div> + </div> +</div> +<div id="document-snap-area"></div> +<script> + +const inner_scroller = document.getElementById("inner-scroller"); +const middle_scroller = document.getElementById("middle-scroller"); +const document_scroller = document.scrollingElement; + +// This tests that making an element scrollable will reassign the correct snap +// areas to itself, per spec [1]. +// [1] https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions +test(() => { + // Confirm that the document-level scroller is the snap container for all of + // the snap areas. + document_scroller.scrollTo(0, 10); + assert_equals(document_scroller.scrollTop, 500); + // Snaps to the inner snap area. + document_scroller.scrollBy(0, 75); + assert_equals(document_scroller.scrollTop, 600); + + // The middle scroller should now have the inner snap area assigned to it. + // Per spec, even if the snap-type is 'none', it should still capture snap + // points. + middle_scroller.style.setProperty("overflow", "scroll"); + + // The middle scroller has snap-type 'none' so it should not snap. + middle_scroller.scrollBy(0, 10); + assert_equals(middle_scroller.scrollTop, 10); + + // The document scroller should only snap to the document-level snap area. + document_scroller.scrollTo(0, 600); + assert_equals(document_scroller.scrollTop, 500); + + // The inner scroller should now have the innermost snap area assigned to it. + inner_scroller.style.setProperty("overflow", "scroll"); + inner_scroller.scrollBy(0, 10); + assert_equals(inner_scroller.scrollTop, 300); + + document_scroller.scrollTo(0, 600); + assert_equals(document_scroller.scrollTop, 500); + +}, "Making an element scrollable should make it capture the correct descendant\ + snap areas' snap points."); + + // Test that attaching a new snap container also properly assigns snap areas. + test(() => { + // All containers should capture snap areas. + middle_scroller.style.setProperty("overflow", "scroll"); + inner_scroller.style.setProperty("overflow", "scroll"); + + // Sanity check that the scrollers still snap to the snap areas. + document_scroller.scrollTo(0, 10); + inner_scroller.scrollTo(0,10); + assert_equals(inner_scroller.scrollTop, 300); + assert_equals(document_scroller.scrollTop, 500); + + // Create new snap container and append thedocument-level snap area as its + // child. + const inserted_scroller = document.createElement("div"); + inserted_scroller.id = "inserted-snap-container"; + const space = document.createElement("div"); + space.classList.add("space"); + inserted_scroller.appendChild(space); + inserted_scroller.appendChild(document.getElementById("document-snap-area")); + document_scroller.appendChild(inserted_scroller); + + // Document scroller no longer snaps. + document_scroller.scrollTo(0, 400); + assert_equals(document_scroller.scrollTop, 400); + + // Inserted scroller snaps. + inserted_scroller.scrollTo(0, 10); + assert_equals(inserted_scroller.scrollTop, 500); + }, "Attaching a new element that is scrollable should assign the correct snap\ + areas to it."); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html b/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html new file mode 100644 index 0000000000..e3798cc73f --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<title> + When an element no longer captures snap positions (e.g., no longer + scrollable), then its currently captured snap areas must be reassigned. +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions"/> +<meta name="viewport" content="user-scalable=no"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +html { + scroll-snap-type: y mandatory; +} + +body { + margin: 0px; +} + +#middle-scroller { + top: 100px; + height: 500px; + width: 500px; + overflow: scroll; + background-color: rgb(12, 61, 2); + scroll-snap-type: none; +} + +#inner-scroller { + top: 200px; + height: 400px; + width: 400px; + overflow: scroll; + background-color: rgb(65, 139, 50); + scroll-snap-type: y mandatory; +} + +.space { + width: 2000px; + height: 2000px; +} + +#inner-snap-area { + top: 300px; + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} + +#document-snap-area { + top: 500px; + width: 200px; + height: 200px; + background-color: lightblue; + scroll-snap-align: start; +} + +</style> +<div class="space"></div> + <div id="middle-scroller"> + <div class="space"></div> + <div id="inner-scroller"> + <div class="space"></div> + <div id="inner-snap-area"></div> + </div> + </div> +</div> +<div id="document-snap-area"></div> +<script> + +// This tests that making a snap container no longer scrollable will reassign +// its snap areas to the next scrollable ancestor, per spec [1]. +// [1] https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions +test(() => { + const inner_scroller = document.getElementById("inner-scroller"); + const middle_scroller = document.getElementById("middle-scroller"); + const document_scroller = document.scrollingElement; + + // Inner scroller should snap to its captured area. + // Middle scroller doesn't snap. + // Document scroller should snap to its only captured area. + inner_scroller.scrollBy(0,10); + middle_scroller.scrollBy(0, 10); + // Scroll to (0,600), where we would expect the inner snap area to be relative + // to the document scroller. + document_scroller.scrollTo(0, 600); + assert_equals(inner_scroller.scrollTop, 300); + assert_equals(middle_scroller.scrollTop, 10); + assert_equals(document_scroller.scrollTop, 500); + + // Inner scroller is no longer a scroll container. + inner_scroller.style.setProperty("overflow", "visible"); + assert_equals(inner_scroller.scrollTop, 0); + assert_equals(middle_scroller.scrollTop, 10); + assert_equals(document_scroller.scrollTop, 500); + + // The new snap container is the middle scroller, which has snap-type 'none'. + // Per spec, the scroll container should capture snap positions even if it has + // snap-type 'none'. + // The middle scroller should not snap. + // The document scroller should still only snap to its captured snap area. + document_scroller.scrollBy(0, 100); + middle_scroller.scrollBy(0, 10); + assert_equals(inner_scroller.scrollTop, 0); + assert_equals(middle_scroller.scrollTop, 20); + assert_equals(document_scroller.scrollTop, 500); + + // The scroll container should now be at the document level. + middle_scroller.style.setProperty("overflow", "visible"); + document_scroller.scrollBy(0, -10); + assert_equals(inner_scroller.scrollTop, 0); + assert_equals(middle_scroller.scrollTop, 0); + + // Check that the existing snap area did not get removed when reassigning + // the inner snap area. + assert_equals(document_scroller.scrollTop, 500); + + // Check that the inner snap area got reassigned to the document. + document_scroller.scrollBy(0, 150); + assert_equals(document_scroller.scrollTop, 600); +}, 'Making a snap container not scrollable should promote the next scrollable\ + ancestor to become a snap container.'); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-at-user-scroll-end.html b/testing/web-platform/tests/css/css-scroll-snap/snap-at-user-scroll-end.html new file mode 100644 index 0000000000..8643b3c148 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-at-user-scroll-end.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<title>Tests that window should snap at user scroll end.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="support/common.js"></script> +<style> +html { + margin: 0px; + scroll-snap-type: both mandatory; +} +#content { + width: 2000px; + height: 2000px; + padding: 0px; + margin: 0px; +} +#target { + position: relative; + left: 400px; + top: 400px; + width: 400px; + height: 400px; + background-color: lightblue; + overflow: hidden; + scroll-snap-align: start; +} +#i1 { + color: red; + font-weight: bold; +} +</style> + +<div id="content"> + <div id="target"> + <h1>CSSScrollSnap</h1> + <h4>Tests that the window can snap at user scroll end.</h4> + <ol> + <li id="i1" style="color: red"> + Scroll the page vertically and horizontally. + Keep scrolling until background has turned yellow.</li> + <li id="i2"> Press the button "Done"</li> + </ol> + <input type="button" id="btn" value="DONE" style="width: 100px; height: 50px;"/> + </div> +</div> + +<script> +var snap_test = async_test('Tests that window should snap at user scroll end.'); +var body = document.body; +var button = document.getElementById("btn"); +var target = document.getElementById("target"); +var instruction1 = document.getElementById("i1"); +var instruction2 = document.getElementById("i2"); +var scrolled_x = false; +var scrolled_y = false; +var start_x = window.scrollX; +var start_y = window.scrollY; +var actions_promise; + +scrollTop = () => window.scrollY; + +window.onscroll = function() { + if (scrolled_x && scrolled_y) { + body.style.backgroundColor = "yellow"; + instruction1.style.color = "black"; + instruction1.style.fontWeight = "normal"; + instruction2.style.color = "red"; + instruction2.style.fontWeight = "bold"; + return; + } + + scrolled_x |= window.scrollX != start_x; + scrolled_y |= window.scrollY != start_y; +} + +button.onclick = function() { + if (!scrolled_x || !scrolled_y) + return; + + snap_test.step(() => { + assert_equals(window.scrollX, target.offsetLeft, + "window.scrollX should be at snapped position."); + assert_equals(window.scrollY, target.offsetTop, + "window.scrollY should be at snapped position."); + }); + + // To make the test result visible. + var content = document.getElementById("content"); + body.removeChild(content); + actions_promise.then( () => { + snap_test.done(); + }); +} + +// Inject scroll actions. +const pos_x = 20; +const pos_y = 20; +const scroll_delta_x = 100; +const scroll_delta_y = 100; +actions_promise = new test_driver.Actions() + .scroll(pos_x, pos_y, scroll_delta_x, scroll_delta_y) + .send().then(() => { + return waitForAnimationEnd(scrollTop); +}).then(() => { + return test_driver.click(button); +}); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-inline-block.html b/testing/web-platform/tests/css/css-scroll-snap/snap-inline-block.html new file mode 100644 index 0000000000..9606023e16 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-inline-block.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} +#scroller { + width: 400px; + height: 350px; + overflow: scroll; + scroll-snap-type: both mandatory; +} +#space { + width: 1000px; + height: 1000px; +} +#target { + width: 200px; + height: 200px; + left: 300px; + top: 300px; +} +</style> + +<div id="scroller"> + <div id="space"></div> + <div id="target"></div> +</div> + +<script> +const scroller_width = scroller.clientWidth; +const scroller_height = scroller.clientHeight; +[ + ["horizontal-tb", 300, 500 - scroller_height], + ["vertical-lr", 500 - scroller_width, 300], + ["vertical-rl", scroller_width - 700, 300] +].forEach(([writing_mode, left, top]) => { + test(() => { + const target_left = getComputedStyle(target).left; + scroller.style.writingMode = writing_mode; + target.style.scrollSnapAlign = "end start"; + if (writing_mode == "vertical-rl") { + target.style.left = (scroller_width - 700) + "px"; + scroller.scrollTo(-500, 0); + } else { + scroller.scrollTo(0, 0); + } + assert_equals(scroller.scrollLeft, left, "aligns correctly on x"); + assert_equals(scroller.scrollTop, top, "aligns correctly on y"); + target.style.left = target_left; + scroller.style.writingMode = ""; + }, "Snaps correctly for " + writing_mode + + " writing mode with 'scroll-snap-align: end start' alignment"); +}); + +[ + ["horizontal-tb", 500 - scroller_width, 300], + ["vertical-lr", 300, 500 - scroller_height], + ["vertical-rl", target.clientWidth - 700, 500 - scroller_height] +].forEach(([writing_mode, left, top]) => { + test(() => { + const target_left = getComputedStyle(target).left; + scroller.style.writingMode = writing_mode; + target.style.scrollSnapAlign = "start end"; + if (writing_mode == "vertical-rl") { + target.style.left = (scroller_width - 700) + "px"; + scroller.scrollTo(-500, 0); + } else { + scroller.scrollTo(0, 0); + } + assert_equals(scroller.scrollLeft, left, "aligns correctly on x"); + assert_equals(scroller.scrollTop, top, "aligns correctly on y"); + target.style.left = target_left; + scroller.style.writingMode = ""; + }, "Snaps correctly for " + writing_mode + + " writing mode with 'scroll-snap-align: start end' alignment"); +}); + +test(() => { + const target_left = getComputedStyle(target).left; + scroller.style.direction = "rtl"; + target.style.scrollSnapAlign = "end start"; + target.style.left = (scroller_width - 700) + "px"; + + scroller.scrollTo(-500, 0); + assert_equals(scroller.scrollLeft, target.clientWidth - 700, + "aligns correctly on x"); + assert_equals(scroller.scrollTop, 500 - scroller_height, + "aligns correctly on y"); + + target.style.left = target_left; + scroller.style.direction = ""; +}, "Snaps correctly for 'direction: rtl' with 'scroll-snap-align: end start' " + + "alignment"); + +test(() => { + const target_left = getComputedStyle(target).left; + scroller.style.direction = "rtl"; + target.style.scrollSnapAlign = "start end"; + target.style.left = (scroller_width - 700) + "px"; + + scroller.scrollTo(-500, 0); + assert_equals(scroller.scrollLeft, scroller_width - 700, + "aligns correctly on x"); + assert_equals(scroller.scrollTop, 300, "aligns correctly on y"); + + target.style.left = target_left; + scroller.style.direction = ""; +}, "Snaps correctly for 'direction: rtl' with 'scroll-snap-align: start end' " + + "alignment"); + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-intended-direction.html b/testing/web-platform/tests/css/css-scroll-snap/snap-intended-direction.html new file mode 100644 index 0000000000..4a1b56d251 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-intended-direction.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title>`intended direction` scroll snaps only at points ahead of the scroll direction</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1766805"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} +#scroller { + width: 200px; + height: 100px; + overflow: scroll; + scroll-snap-type: x mandatory; +} +.snap { + scroll-snap-align: start; + background: green; +} +</style> + +<div id="scroller"> + <div style="width: 2000px; height: 100px;"></div> + <div class="snap" style="left: 0px; width: 20px; height: 100px;">1</div> + <div class="snap" style="left: 100px; width: 20px; height: 100px;">2</div> + <div class="snap" style="left: 120px; width: 20px; height: 100px;">3</div> + <div class="snap" style="left: 300px; width: 20px; height: 100px;">4</div> + <div class="snap" style="left: 400px; width: 20px; height: 100px;">5</div> +</div> + +<script> +test(() => { + scroller.scrollBy(10, 0); + assert_equals(scroller.scrollLeft, 100); + + scroller.scrollBy(10, 0); + assert_equals(scroller.scrollLeft, 120); + + scroller.scrollBy(10, 0); + // Snaps to the next snap point even if the previous snap point is closer to + // the current position. + assert_equals(scroller.scrollLeft, 300); +}, "`intended direction` scroll snaps only at points ahead of the scroll " + + "direction"); + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-into-covering-area.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/snap-into-covering-area.tentative.html new file mode 100644 index 0000000000..2cc8741f5e --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-into-covering-area.tentative.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> + +<head> + <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script src="/dom/events/scrolling/scroll_support.js"></script> +</head> + +<body> + <style> + #scroller { + overflow: scroll; + height: 500px; + width: 500px; + background-color: blue; + scroll-snap-type: y mandatory; + position: absolute; + } + + .snap_point { + scroll-snap-align: start; + width: 40%; + position: relative; + left: 30%; + } + + .big { + height: 1000%; + background-color: pink; + border: solid 1px red; + } + + .small { + height: 50%; + background-color: purple; + border: solid 1px black; + } + </style> + <div id="scroller"> + <div class="big snap_point" id="big_snap_point"></div> + <div class="small snap_point"> + <button id="scrollerButton">scrollerButton</button> + </div> + </div> + <script> + promise_test(async(t) => { + const x = scroller.clientWidth / 2; + const y = scroller.clientHeight / 2; + + // Scroll all the way down to the smaller snap area which doesn't cover + // the snapport. + let scrollend_promise = new Promise((resolve) => { + scroller.addEventListener("scrollend", resolve); + }); + scroller.scrollTop = scroller.scrollHeight; + await scrollend_promise; + + // Scroll up with one press of the arrow-up button. + scrollend_promise = new Promise((resolve) => { + scroller.addEventListener("scrollend", resolve); + }); + const arrowUp = '\uE013'; + await test_driver.send_keys(scrollerButton, arrowUp); + + await scrollend_promise; + assert_equals(scroller.scrollTop, big_snap_point.offsetHeight - scroller.clientHeight, + "scroller is snapped to the bottom of the larger snap area, not the top"); + }); + </script> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-on-focus.html b/testing/web-platform/tests/css/css-scroll-snap/snap-on-focus.html new file mode 100644 index 0000000000..13709d2747 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-on-focus.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<title>Scroll snap on Element.focus()</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0; +} + +#scroller { + height: 500px; + width: 500px; + overflow-y: scroll; + scroll-snap-type: y mandatory; +} + +.snap { + width: 100%; + height: 300px; + top: 100px; + left: 0; + background-color: green; + scroll-snap-align: start none; +} + +.no-snap { + width: 100%; + height: 300px; + top: 100px; + left: 0; + background-color: red; +} + +.area { + width: 100%; + height: 2000px; +} +</style> + +<div id="scroller"> + <div class="area"></div> + <div class="snap" style="top: 0px;"></div> + <div class="no-snap" style="top: 1000px;" tabindex=-1></div> + <div class="snap" style="top: 1200px;"></div> +</div> + +<script> +promise_test(async () => { + document.querySelector(".no-snap").focus(); + await new Promise(resolve => step_timeout(resolve, 0)); + assert_equals(scroller.scrollTop, 1200); +}, "scroll snap should happens on Element.focus()"); + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-to-combination-of-two-elements-1.html b/testing/web-platform/tests/css/css-scroll-snap/snap-to-combination-of-two-elements-1.html new file mode 100644 index 0000000000..985227bb53 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-combination-of-two-elements-1.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<title> + Snap to points of combinations of two different elements +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +#scroller { + height: 600px; + width: 600px; + overflow: hidden; + scroll-snap-type: both mandatory; +} + +#space { + width: 2000px; + height: 2000px; +} + +#left-top { + /* + * the scroll position of this `scroll-snap-align: start start` is (200, 200) + */ + left: 200px; + top: 200px; + height: 450px; + width: 450px; + background-color: rgb(255, 0, 0); + opacity: 0.5; + scroll-snap-align: start start; +} + +#right-bottom { + /* + * the scroll position of this `scroll-snap-align: end end` is (50, 50), + * i.e, (`left` - scroll container's `width` + this element's `width, + `top` - scroll container's `height` + this element's `height) + */ + left: 600px; + top: 600px; + width: 50px; + height: 50px; + background-color: rgb(0, 255, 0); + opacity: 0.5; + scroll-snap-align: end end; +} + +</style> +<div id="scroller"> + <div id="space"></div> + <div id="left-top"></div> + <div id="right-bottom"></div> +</div> +<script> +test(t => { + const scroller = document.getElementById("scroller"); + assert_equals(scroller.scrollLeft, 50); + assert_equals(scroller.scrollTop, 50); + + scroller.scrollTo(100, 150); + assert_equals(scroller.scrollLeft, 50); + assert_equals(scroller.scrollTop, 200); + + scroller.scrollTo(300, 300); + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 200); + + scroller.scrollTo(150, 100); + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 50); +}, 'Snap to points of combinations of two different elements'); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-to-combination-of-two-elements-2.tentative.html b/testing/web-platform/tests/css/css-scroll-snap/snap-to-combination-of-two-elements-2.tentative.html new file mode 100644 index 0000000000..8d06eb91d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-combination-of-two-elements-2.tentative.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width"> +<title> + Snap to points of combinations of two different elements +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +#scroller { + height: 600px; + width: 600px; + overflow: hidden; + scroll-snap-type: both mandatory; +} + +#space { + width: 2000px; + height: 2000px; +} + +#left-top { + /* + * the scroll position of this `scroll-snap-align: start start` is (200, 200) + */ + left: 200px; + top: 200px; + height: 450px; + width: 450px; + background-color: rgb(255, 0, 0); + opacity: 0.5; + scroll-snap-align: start start; +} + +#right-bottom { + /* + * the scroll position of this `scroll-snap-align: end end` is (50, 250), + * i.e, (`left` - scroll container's `width` + this element's `width, + `top` - scroll container's `height` + this element's `height) + */ + left: 600px; + top: 800px; + width: 50px; + height: 50px; + background-color: rgb(0, 255, 0); + opacity: 0.5; + scroll-snap-align: end end; +} + +</style> +<div id="scroller"> + <div id="space"></div> + <div id="left-top"></div> + <div id="right-bottom"></div> +</div> +<script> +test(t => { + // There are four combinations of snap positions defined by #top-left and + // #right-bottom elements. + // (200, 200), (50, 250), (200, 250) and (50, 200). + // But snapping to (50, 200) leaves the snap area of #right-bottom element + // outside of the snapport, thus it won't be a valid snap position. + const scroller = document.getElementById("scroller"); + + // The nearest valid snap position from (0, 0) is (50, 250). + assert_equals(scroller.scrollLeft, 50); + assert_equals(scroller.scrollTop, 250); + + // (50, 200) is not valid, thus the nearest one from (100, 150) is (200, 200). + scroller.scrollTo(100, 150); + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 200); + + scroller.scrollTo(300, 300); + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 250); + + scroller.scrollTo(200, 100); + assert_equals(scroller.scrollLeft, 200); + assert_equals(scroller.scrollTop, 200); +}, 'Snap to points of combinations of two different elements'); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-to-transformed-target.html b/testing/web-platform/tests/css/css-scroll-snap/snap-to-transformed-target.html new file mode 100644 index 0000000000..b8604269b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-transformed-target.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; +} +#scroller { + overflow: hidden; /* TODO: Use scrollbar-width: none */ + scroll-snap-type: x mandatory; + width: 500px; + height: 500px; +} +.space { + width: 2000px; + height: 2000px; +} +#target { + height: 200px; + width: 200px; + left: 50px; + background-color: blue; +} +</style> +<div id="scroller"> + <div class="space"></div> + <div id="target"></div> +</div> +<script> +test(() => { + target.style.scrollSnapAlign = "start"; + target.style.transform = "translateX(300px)"; + scroller.scrollTo(10, 0); + assert_equals(scroller.scrollLeft, 350 /* left + translateX(300px) */); + assert_equals(scroller.scrollTop, 0); +}, "Snaps to the transformed snap start position"); + +test(() => { + target.style.scrollSnapAlign = "end"; + target.style.transform = "translateX(300px)"; + scroller.scrollTo(10, 0); + assert_equals(scroller.scrollLeft, + 50 /* left + width + translateX(300px) - scroller.width */); + assert_equals(scroller.scrollTop, 0); +}, "Snaps to the transformed snap end position"); + +test(() => { + target.style.scrollSnapAlign = "start"; + target.style.transform = "translateX(-100px)"; + scroller.scrollTo(10, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); +}, "Snaps to visible top left position of the transformed box"); + +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-both.html b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-both.html new file mode 100644 index 0000000000..cde329bcc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-both.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<title> + Snap to a visible area only even when there is a closer snap point for an area + that is closer but not visible (using both axes snap type) +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +#scroller { + height: 600px; + width: 600px; + overflow: scroll; + scroll-snap-type: both mandatory; +} + +#space { + width: 2000px; + height: 2000px; +} + +.snap { + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} + +#left-top { + left: 0px; + top: 0px; +} + +#left-bottom { + left: 0px; + top: 800px; +} + +#right-top { + left: 800px; + top: 0px; +} + +</style> +<div id="scroller"> + <div id="space"></div> + <div id="left-top" class="snap"></div> + <div id="left-bottom" class="snap"></div> + <div id="right-top" class="snap"></div> +</div> +<script> +test(t => { + const scroller = document.getElementById("scroller"); + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + scroller.scrollTo(500, 600); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 800); + scroller.scrollTo(600, 500); + assert_equals(scroller.scrollLeft, 800); + assert_equals(scroller.scrollTop, 0); +}, 'Only snap to visible areas in the case where taking the closest snap point of \ + each axis does not snap to a visible area'); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-margin-both.html b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-margin-both.html new file mode 100644 index 0000000000..4c3c3c11a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-margin-both.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<title> + Snap to an area where the element's scroll-margin is visible but not the + element itself (using both axes snap type) +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +#scroller { + height: 600px; + width: 600px; + overflow: scroll; + scroll-snap-type: both mandatory; +} + +#space { + width: 2000px; + height: 2000px; +} + +.snap { + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} + +#left-top { + left: 0px; + top: 0px; +} + +#left-bottom { + left: 0px; + top: 800px; + /* 800px scroll-margin makes the snap area span to the right end of the + right-top area */ + scroll-margin-right: 800px; +} + +#right-top { + left: 800px; + top: 0px; + /* 800px scroll-margin makes the snap area span to the bottom end of the + left-bottom area */ + scroll-margin-bottom: 800px; +} + +</style> +<div id="scroller"> + <div id="space"></div> + <div id="left-top" class="snap"></div> + <div id="left-bottom" class="snap"></div> + <div id="right-top" class="snap"></div> +</div> +<script> +test(() => { + const scroller = document.getElementById("scroller"); + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + // 750 and 650 are picked as those are closer to top left of the intersection + // (800, 800) of the snap areas where the browser should snap. This makes the + // intersection a closer snap option than a covering option that the browser + // might choose where the snapport is aligned on the bottom and right. + scroller.scrollTo(650, 750); + assert_equals(scroller.scrollLeft, 800); + assert_equals(scroller.scrollTop, 800); + scroller.scrollTo(750, 650); + assert_equals(scroller.scrollLeft, 800); + assert_equals(scroller.scrollTop, 800); +}, 'Snap to area such that only the scroll margin from both axes\' areas are \ +visible'); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-margin-x-axis.html b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-margin-x-axis.html new file mode 100644 index 0000000000..dea9225a47 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-margin-x-axis.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title> + Snap to an area where the element's scroll-margin is visible but not the + element itself (using x-axis snap type) +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +#scroller { + height: 600px; + width: 600px; + overflow: scroll; + scroll-snap-type: x mandatory; +} + +#space { + width: 2000px; + height: 2000px; +} + +.snap { + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} + +#left-visible { + left: 0px; + top: 0px; +} + +#right-visible { + left: 800px; + top: 0px; +} + +#middle-margin-visible { + left: 700px; + top: 800px; + /* 300px makes snap area visible with margin but non-visible without it */ + scroll-margin-top: 300px; +} + +</style> +<div id="scroller"> + <div id="space"></div> + <div id="left-visible" class="snap"></div> + <div id="middle-margin-visible" class="snap"></div> + <div id="right-visible" class="snap"></div> +</div> +<script> +test(() => { + const scroller = document.getElementById("scroller"); + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + scroller.scrollTo(500, 0); + assert_equals(scroller.scrollLeft, 700); + assert_equals(scroller.scrollTop, 0); +}, 'Scroll margin should be considered when calculating snap area visibilty \ +while snapping on the x-axis'); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-margin-y-axis.html b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-margin-y-axis.html new file mode 100644 index 0000000000..60c5488445 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-margin-y-axis.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<title> + Snap to an area where the element's scroll-margin is visible but not the + element itself (using y-axis snap type) +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +#scroller { + height: 600px; + width: 600px; + overflow: scroll; + scroll-snap-type: y mandatory; +} + +#space { + width: 2000px; + height: 2000px; +} + +.snap { + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} + +#top-visible { + left: 0px; + top: 0px; +} + +#bottom-visible { + left: 0px; + top: 800px; +} + +#middle-margin-visible { + left: 800px; + top: 700px; + /* 300px makes snap area visible with margin but non-visible without it */ + scroll-margin-left: 300px; +} + +</style> +<div id="scroller"> + <div id="space"></div> + <div id="top-visible" class="snap"></div> + <div id="middle-margin-visible" class="snap"></div> + <div id="bottom-visible" class="snap"></div> +</div> +<script> +test(() => { + const scroller = document.getElementById("scroller"); + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + scroller.scrollTo(0, 500); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 700); +}, 'Scroll margin should be considered when calculating snap area visibilty \ +while snapping on the y-axis'); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-x-axis.html b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-x-axis.html new file mode 100644 index 0000000000..b8b226f1af --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-x-axis.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title> + Snap to a visible area only even when there is a closer snap point for an area + that is closer but not visible (using x-axis snap type) +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +#scroller { + height: 600px; + width: 600px; + overflow: scroll; + scroll-snap-type: x mandatory; +} + +#space { + width: 2000px; + height: 2000px; +} + +.snap { + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} + +#left-visible { + left: 0px; + top: 0px; +} + +#right-visible { + left: 800px; + top: 0px; +} + +#middle-not-visible { + left: 700px; + top: 800px; +} + +</style> +<div id="scroller"> + <div id="space"></div> + <div id="left-visible" class="snap"></div> + <div id="middle-not-visible" class="snap"></div> + <div id="right-visible" class="snap"></div> +</div> +<script> +test(() => { + const scroller = document.getElementById("scroller"); + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + scroller.scrollTo(500, 0); + assert_equals(scroller.scrollLeft, 800); + assert_equals(scroller.scrollTop, 0); +}, 'Only snap to visible area on X axis, even when the non-visible ones are closer'); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-y-axis.html b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-y-axis.html new file mode 100644 index 0000000000..80d2e9946d --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas-y-axis.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<title> + Snap to a visible area only even when there is a closer snap point for an area + that is closer but not visible (using y-axis snap type) +</title> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#snap-scope"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} + +#scroller { + height: 600px; + width: 600px; + overflow: scroll; + scroll-snap-type: y mandatory; +} + +#space { + width: 2000px; + height: 2000px; +} + +.snap { + width: 200px; + height: 200px; + background-color: blue; + scroll-snap-align: start; +} + +#top-visible { + left: 0px; + top: 0px; +} + +#bottom-visible { + left: 0px; + top: 800px; +} + +#middle-not-visible { + left: 800px; + top: 700px; +} + +</style> +<div id="scroller"> + <div id="space"></div> + <div id="top-visible" class="snap"></div> + <div id="middle-not-visible" class="snap"></div> + <div id="bottom-visible" class="snap"></div> +</div> +<script> +test(() => { + const scroller = document.getElementById("scroller"); + scroller.scrollTo(0, 0); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); + scroller.scrollTo(0, 500); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 800); +}, 'Only snap to visible area on Y axis, even when the non-visible ones are closer'); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/common.css b/testing/web-platform/tests/css/css-scroll-snap/support/common.css new file mode 100644 index 0000000000..f49c7cbacd --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/common.css @@ -0,0 +1,44 @@ +body { + margin: 0; +} + +#scroller { + position: absolute; + width: 400px; + height: 400px; + overflow: scroll; + padding: 0; + + scroll-snap-type: both mandatory; +} + +.snap { + position: absolute; + width: 200px; + height: 200px; + background-color: blue; + + scroll-snap-align: start; +} + +#space { + position: absolute; + width: 1000px; + height: 1000px; +} + +.left { + left: 0; +} + +.top { + top: 0; +} + +.right { + left: 400px; +} + +.bottom { + top: 400px; +}
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/common.js b/testing/web-platform/tests/css/css-scroll-snap/support/common.js new file mode 100644 index 0000000000..c7800b95f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/common.js @@ -0,0 +1,131 @@ +const KEY_CODE_MAP = { + 'ArrowLeft': '\uE012', + 'ArrowUp': '\uE013', + 'ArrowRight': '\uE014', + 'ArrowDown': '\uE015', + 'PageUp': '\uE00E', + 'PageDown': '\uE00F', + 'End': '\uE010', + 'Home': '\uE011', + 'Space': ' ', +}; + +// Send key event to the target element using test driver. Supports human +// friendly key names for common keyboard scroll operations e.g., arrow keys, +// page keys, etc. +async function keyPress(target, key) { + let code = key; + if (KEY_CODE_MAP.hasOwnProperty(key)) + code = KEY_CODE_MAP[key]; + + // First move pointer on target and click to ensure it receives the key. + return test_driver.send_keys(target, code); +} + +// Use rAF to wait for the value of the getter function passed to not change for +// at least 15 frames or timeout after 1 second. +// +// Example usage: +// await waitForAnimationEnd(() => scroller.scrollTop); +function waitForAnimationEnd(getValue) { + const TIMEOUT = 1000; // milliseconds + const MAX_UNCHANGED_FRAMES = 15; + + const start_time = performance.now(); + let last_changed_frame = 0; + let last_value = getValue(); + + return new Promise((resolve, reject) => { + function tick(frames, time) { + // We requestAnimationFrame either for TIMEOUT milliseconds or until + // MAX_UNCHANGED_FRAMES with no change have been observed. + if (time - start_time > TIMEOUT || + frames - last_changed_frame >= MAX_UNCHANGED_FRAMES) { + resolve(time); + } else { + current_value = getValue(); + if (last_value != current_value) { + last_changed_frame = frames; + last_value = current_value; + } + requestAnimationFrame(tick.bind(this, frames + 1)); + } + } + tick(0, start_time); + }); +} + + +function waitForEvent(eventTarget, type) { + return new Promise(resolve => { + eventTarget.addEventListener(type, resolve, { once: true }); + }); +} + +function waitForScrollEvent(eventTarget) { + return waitForEvent(eventTarget, 'scroll'); +} + +function waitForWheelEvent(eventTarget) { + return waitForEvent(eventTarget, 'wheel'); +} + +function waitForScrollStop(eventTarget) { + const TIMEOUT_IN_MS = 200; + + return new Promise(resolve => { + let lastScrollEventTime = performance.now(); + + const scrollListener = () => { + lastScrollEventTime = performance.now(); + }; + eventTarget.addEventListener('scroll', scrollListener); + + const tick = () => { + if (performance.now() - lastScrollEventTime > TIMEOUT_IN_MS) { + eventTarget.removeEventListener('scroll', scrollListener); + resolve(); + return; + } + requestAnimationFrame(tick); // wait another frame + } + requestAnimationFrame(tick); + }); +} + +function waitForScrollEnd(eventTarget) { + if (window.onscrollend !== undefined) { + return waitForScrollendEventNoTimeout(eventTarget); + } + return waitForScrollEvent(eventTarget).then(() => { + return waitForScrollStop(eventTarget); + }); +} + +function waitForScrollTo(eventTarget, getValue, targetValue) { + return new Promise((resolve, reject) => { + const scrollListener = (evt) => { + if (getValue() == targetValue) { + eventTarget.removeEventListener('scroll', scrollListener); + resolve(evt); + } + }; + if (getValue() == targetValue) + resolve(); + else + eventTarget.addEventListener('scroll', scrollListener); + }); +} + +function waitForNextFrame() { + return new Promise(resolve => { + const start = performance.now(); + requestAnimationFrame(frameTime => { + if (frameTime < start) { + requestAnimationFrame(resolve); + } else { + resolve(); + } + }); + }); +} diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-align-001-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-align-001-iframe.html new file mode 100644 index 0000000000..d86a5e86d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-align-001-iframe.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>iframe for #target and snap position with snapping off</title> +<style type='text/css'> + html, body { + margin: 0; padding: 0; + } + html { + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + div { + height: 1em; + } + html { scroll-padding: .5em 0 0; } /* set up a snap position */ + #target { scroll-margin: .5em 0 0; + scroll-snap-align: center; } + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div></div> +<div></div> +<div></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div id="stripe"></div> +<div id="target"></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div></div> +<div></div> +<div></div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html new file mode 100644 index 0000000000..2b2c1d2d8c --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>iframe for #target and scroll-margin with snapping off (y</title> +<style type='text/css'> + html, body { + margin: 0; padding: 0; + } + html { + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + div { + height: 1em; + } + #target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div></div> +<div></div> +<div></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div id="stripe"></div> +<div id="target"></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div></div> +<div></div> +<div></div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html new file mode 100644 index 0000000000..9260c81b1c --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>iframe for #target and scroll-snap-padding with snapping off (y</title> +<style type='text/css'> + html, body { + margin: 0; padding: 0; + } + html { + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + } + div { + height: 1em; + } + html { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div></div> +<div></div> +<div></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div id="stripe"></div> +<div id="target"></div> +<div></div> +<div class="fail">FAIL</div> +<div></div> +<div></div> +<div></div> +<div></div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html new file mode 100644 index 0000000000..b67c3f8d3e --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>iframe for #target and snap position with snapping on</title> +<style type='text/css'> + html, body { + margin: 0; padding: 0; + } + html { + /* to make failing more obvious */ + background: 0 1em / 100% 1em linear-gradient(red, red) repeat-x fixed; + /* avoid anti-aliasing issues */ + font: 20px/1 sans-serif; + scrollbar-width: none; + + /* turn on snapping */ + scroll-snap-type: block; + } + div { + height: 1em; + } + /* Note: we use "start" for #target to avoid spec ambiguity where + * scroll-snap-align conflicts with default ScrollIntoViewOptions. + * See https://github.com/w3c/csswg-drafts/issues/9576. + */ + #target { scroll-margin: 2em 0 0; + scroll-snap-align: start; } /* set up a snap position */ + #stripe { background: green; } /* color part of the snap area */ + .fail { color: red; } /* make failing more obvious */ + + /* Try to foil the UA */ + .foilup { margin-bottom: -1em; scroll-snap-align: start; } + .foildn { margin-top: -1em; scroll-snap-align: end; } + + /* emulate `scrollbar-width: none` for browsers that don't support it yet */ + ::-webkit-scrollbar { display: none; } +</style> + +<div></div> +<div></div> +<div></div> +<div></div> +<div class="foilup"></div> +<div class="fail">FAIL</div> +<div></div> +<div id="stripe"></div> +<div class="foilup"></div> +<div id="target"></div> +<div class="foildn"></div> +<div></div> +<div class="fail">FAIL</div> +<div class="foildn"></div> +<div></div> +<div class="foildn"></div> +<div></div> +<div></div> +<div></div> diff --git a/testing/web-platform/tests/css/css-scroll-snap/unreachable-snap-positions-001.html b/testing/web-platform/tests/css/css-scroll-snap/unreachable-snap-positions-001.html new file mode 100644 index 0000000000..ca4f6033ce --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/unreachable-snap-positions-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#unreachable" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + position: absolute; + margin: 0px; +} +#scroller { + height: 500px; + width: 500px; + overflow: hidden; + scroll-snap-type: both mandatory; +} +#unreachable { + width: 300px; + height: 300px; + top: -100px; + left: -100px; + background-color: blue; + scroll-snap-align: start; +} +#reachable { + width: 300px; + height: 300px; + top: 400px; + left: 400px; + background-color: blue; + scroll-snap-align: start; +} +</style> + +<div id="scroller"> + <div style="width: 2000px; height: 2000px;"></div> + <div id="unreachable"></div> + <div id="reachable"></div> +</div> + +<script> +test(() => { + // Firstly move to the reachable snap position. + scroller.scrollTo(400, 400); + assert_equals(scroller.scrollLeft, 400); + assert_equals(scroller.scrollTop, 400); + + // Then move to a position between the unreachable snap position and the + // reachable position but closer to the unreachable one. + scroller.scrollTo(100, 100); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); +}, "Snaps to the positions defined by the element as much as possible"); +</script> diff --git a/testing/web-platform/tests/css/css-scroll-snap/unreachable-snap-positions-002.html b/testing/web-platform/tests/css/css-scroll-snap/unreachable-snap-positions-002.html new file mode 100644 index 0000000000..a3726d71b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-scroll-snap/unreachable-snap-positions-002.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#unreachable" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.scroller { + width: 100vw; + height: 100px; + display: flex; + scroll-snap-type: x mandatory; + overflow-x: auto; +} +.scroller.rtl { + direction: rtl; +} +.scroller.end > span { + scroll-snap-align: end; +} +.scroller.center > span { + scroll-snap-align: end; +} +</style> +<div class="scroller end"> + <span style="min-width: 25px;"></span> + <span style="min-width: 100vw;"></span> +</div> +<div class="scroller center"> + <span style="min-width: 25px;"></span> + <span style="min-width: 100vw;"></span> +</div> +<div class="scroller end rtl"> + <span style="min-width: 25px;"></span> + <span style="min-width: 100vw;"></span> +</div> +<div class="scroller center rtl"> + <span style="min-width: 25px;"></span> + <span style="min-width: 100vw;"></span> +</div> +<script> + +test(() => { + const scroller = document.querySelector(".scroller.end"); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); +}, "Unreachable snap point with `scroll-snap-align: end`"); + +test(() => { + const scroller = document.querySelector(".scroller.center"); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); +}, "Unreachable snap point with `scroll-snap-align: center`"); + +test(() => { + const scroller = document.querySelector(".scroller.end.rtl"); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); +}, "Unreachable snap point with `scroll-snap-align: end` in RTL"); + +test(() => { + const scroller = document.querySelector(".scroller.center.rtl"); + assert_equals(scroller.scrollLeft, 0); + assert_equals(scroller.scrollTop, 0); +}, "Unreachable snap point with `scroll-snap-align: center` in RTL"); + +</script> +</html> |