-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 1868255 [wpt PR 43506] - Mark two test cases from changing-scroll…
…-snap-align.html as tentative., a=testonly Automatic update from web-platform-tests Mark two test cases from changing-scroll-snap-align.html as tentative. These were added for nested snap work on crbug.com/1467300, but the behavior is subject to an open spec issue as discussed at: web-platform-tests/interop#602 Bug: 1505893 Change-Id: Iaf9783f7220acc5eeb19387e57f6ec3f88bc19e2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5085089 Reviewed-by: David Awogbemila <[email protected]> Commit-Queue: Steve Kobes <[email protected]> Cr-Commit-Position: refs/heads/main@{#1233355} -- wpt-commits: 7db499bf01c922eacee27edeb21db75356ee8178 wpt-pr: 43506
- Loading branch information
1 parent
36466e4
commit f4ed2c1
Showing
2 changed files
with
119 additions
and
53 deletions.
There are no files selected for viewing
119 changes: 119 additions & 0 deletions
119
.../css/css-scroll-snap/snap-after-relayout/changing-scroll-snap-align-nested.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters