[scroll-snap] Improve/fix root propagation test
Note that the tests still fails in Chrome but that is going to be addressed
with a follow up CL that fixes propagation logic [1].
## General
- Move clean up logic to its own functional and declare it using "add_cleanup".
This way there is no need to assume ordering of test also clean up always run
even if test fails.
- Tests were using "start end" when only end is used. This is not needed and
confusing so changed to "none end" to make this clear.
- Use 800 as destination for scroll to not confuse it with 1000 which is the
target position.
## Test 1
At this point body's writing-mode is still the default value i.e.
`horizontal-tb`. So inline axis is still "horizontal". This means that
`scroll-snap-type: inline mandatory` snaps horizontally. But the test
expected it to snap vertically which is not correct!
Fix: We should actually avoid depending on writing-mode in this test as it
keeps the test more focused on the actual thing that is being tests and also
avoids the problem. So use "y mandatory" instead.
## Test 2
Added a check to this test to verify behavior on the non-snapping axis.
Also added a new test to check horizontal-tb which was present in some
from in the original test.
[1] https://chromium-review.googlesource.com/c/chromium/src/+/1704859
Change-Id: I330fb02ef4d81c82c5371bf608c1930568fb1dc8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1696190
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: Majid Valipour <majidvp@chromium.org>
Cr-Commit-Position: refs/heads/master@{#679086}
diff --git a/css/css-scroll-snap/scroll-snap-type-on-root-element.html b/css/css-scroll-snap/scroll-snap-type-on-root-element.html
index c2c413d..eaa9417 100644
--- a/css/css-scroll-snap/scroll-snap-type-on-root-element.html
+++ b/css/css-scroll-snap/scroll-snap-type-on-root-element.html
@@ -1,42 +1,73 @@
<!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"/>
+<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" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
html {
height: 3000px;
- scroll-snap-type: inline mandatory;
+ width: 3000px;
}
+
#target {
position: absolute;
background-color: blue;
top: 1000px;
- width: 100%;
+ left: 100px;
+
+ width: 100vw;
height: 100px;
}
</style>
<div id="target"></div>
<script>
const documentHeight = document.documentElement.clientHeight;
-test(() => {
- target.style.scrollSnapAlign = "end start";
- window.scrollTo(0, 1000);
+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, 800);
// `target y (1000px)` + `target height (100px)` - document height.
assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight);
-
- target.style.scrollSnapAlign = "";
- window.scrollTo(0, 0);
+ assert_equals(document.scrollingElement.scrollLeft, 0, "x should not snap");
}, "The scroll-snap-type on the root element is applied");
-test(() => {
- document.body.style.writingMode = "vertical-rl";
- target.style.scrollSnapAlign = "start end";
+test(t => {
+ t.add_cleanup(cleanup);
- window.scrollTo(0, 1000);
- // `target y (1000px)` + `target height (100px)` - document height.
- assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight);
-}, "The writing-mode on the body is used");
-</script>
+ document.documentElement.style.scrollSnapType = "inline mandatory";
+ document.body.style.writingMode = "vertical-lr";
+ target.style.scrollSnapAlign = "none end";
+
+ window.scrollTo(200, 800);
+
+ // Since inline axis is vertical, scrolling viewport vertically on block
+ // axis should snap.
+ assert_equals(document.scrollingElement.scrollTop, 1100 - 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, 800);
+
+ assert_equals(document.scrollingElement.scrollLeft, 100, "inline should snap");
+ assert_equals(document.scrollingElement.scrollTop, 800, "block should not snap");
+}, "The writing-mode (horizontal-tb) on the body is used ");
+</script>
\ No newline at end of file
