-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[css-scroll-snap-2] Prioritize targeted snap areas
Per step 4 of [1], chromium should give preference to targeted[2] elements when there are multiple aligned options. Some improvements are made to the test files such as: (in common.js) - scrollToAlignedElementsInAxis now detects already being at the scroll position aligned with the snap targets. - wrapping verifySelectedSnapTarget in a t.step so that a failure during the verification doesn't lead to timeouts. (in scroll_support.js) - waitForScrollReset now takes x and y params which default to 0,0, so - tests can now use the function to default to positions other than 0,0. Bug: 324916797 [1]w3c/csswg-drafts#9622 (comment) [2]https://drafts.csswg.org/selectors/#the-target-pseudo Change-Id: Ifbade7f2b2fd5e0b4579e8c5430b7ae8616be797 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5292274 Commit-Queue: David Awogbemila <[email protected]> Reviewed-by: Steve Kobes <[email protected]> Cr-Commit-Position: refs/heads/main@{#1264011}
- Loading branch information
1 parent
52e1352
commit dce6c69
Showing
6 changed files
with
315 additions
and
19 deletions.
There are no files selected for viewing
73 changes: 73 additions & 0 deletions
73
...ss-scroll-snap/snap-after-relayout/multiple-aligned-targets/positioned-target-iframe.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,73 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <body> | ||
| <style> | ||
| .target { | ||
| width: 100px; | ||
| height: 100px; | ||
| background-color: green; | ||
| scroll-snap-align: start; | ||
| } | ||
| .placeholder { | ||
| background-color: purple; | ||
| } | ||
| .snapcontainer { | ||
| border:solid 1px black; | ||
| overflow: scroll; | ||
| scroll-snap-type: y mandatory; | ||
| } | ||
| .big { | ||
| height: 315px; | ||
| width: 600px; | ||
| position: relative; | ||
| } | ||
| .small { | ||
| height: 115px; | ||
| width: 120px; | ||
| } | ||
| .positioned { | ||
| position: absolute; | ||
| } | ||
| #target1, #target2, #target3, #target4, #target5 { | ||
| top: 400px; | ||
| } | ||
| #target1 { | ||
| left: 0px; | ||
| } | ||
| #target2 { | ||
| left: 110px; | ||
| } | ||
| #target3 { | ||
| left: 220px; | ||
| } | ||
| #target4 { | ||
| left: 330px; | ||
| } | ||
| #target5 { | ||
| left: 440px; | ||
| } | ||
| :target { | ||
| background-color: yellow; | ||
| } | ||
| .large-space { | ||
| position: absolute; | ||
| height: 300vh; | ||
| width: 300vw; | ||
| } | ||
| </style> | ||
| <div id="outer" class="big snapcontainer"> | ||
| <div id="outerplaceholder1" class="placeholder target"></div> | ||
| <div id="outerplaceholder2" class="placeholder target"></div> | ||
| <div id="inner" class="small snapcontainer"> | ||
| <div id="innerplaceholder1" class="placeholder target"></div> | ||
| <div id="innerplaceholder2" class="placeholder target"></div> | ||
| <div id="target1" class="positioned target"><h1>Box 1</h1></div> | ||
| <div id="target2" class="positioned target"><h1>Box 2</h1></div> | ||
| <div id="target3" class="positioned target"><h1>Box 3</h1></div> | ||
| <div id="target4" class="positioned target"><h1>Box 4</h1></div> | ||
| <div id="target5" class="positioned target"><h1>Box 5</h1></div> | ||
| </div> | ||
| <div class="large-space"></div> | ||
| </div> | ||
| </body> | ||
| </html> |
53 changes: 53 additions & 0 deletions
53
...oll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-iframe.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,53 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <body> | ||
| <style> | ||
| .scroller { | ||
| overflow: scroll; | ||
| width: 350px; | ||
| height: 350px; | ||
| border: solid 1px black; | ||
| scroll-snap-type: y mandatory; | ||
| position: relative; | ||
| resize: both; | ||
| } | ||
| .large-space { | ||
| height: 300vh; | ||
| width: 300vw; | ||
| position: absolute; | ||
| } | ||
| .snap { | ||
| scroll-snap-align: start; | ||
| } | ||
| .box { | ||
| width: 100px; | ||
| height: 100px; | ||
| background-color: green; | ||
| display: inline-block; | ||
| position: relative; | ||
| } | ||
| .grid { | ||
| position: absolute; | ||
| width: 350px; | ||
| height: 350px; | ||
| } | ||
| .snap:target { | ||
| background-color: blue; | ||
| } | ||
| </style> | ||
| <div class="scroller" id="scroller"> | ||
| <div class="large-space"></div> | ||
| <div class="grid" id="grid"> | ||
| <div id="box1" class="snap box">Box 1</div> | ||
| <div id="box2" class="snap box">Box 2</div> | ||
| <div id="box3" class="snap box">Box 3</div> | ||
| <div id="box4" class="snap box">Box 4</div> | ||
| <div id="box5" class="snap box">Box 5</div> | ||
| <div id="box6" class="snap box">Box 6</div> | ||
| <div id="box7" class="snap box">Box 7</div> | ||
| <div id="box8" class="snap box">Box 8</div> | ||
| <div id="box9" class="snap box">Box 9</div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
70 changes: 70 additions & 0 deletions
70
...snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-positioned.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,70 @@ | ||
| <!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> | ||
| .iframe { | ||
| height: 1000px; | ||
| width: 1000px; | ||
| } | ||
| </style> | ||
| <script> | ||
| window.onload = async () => { | ||
| await waitForCompositorCommit(); | ||
| async function test(target_number) { | ||
| return promise_test(async (t) => { | ||
| let finish = null; | ||
| const finished = new Promise((res) => { finish = res; }); | ||
| var iframe = document.createElement("iframe"); | ||
| iframe.classList.add("iframe"); | ||
| iframe.onload = async () => { | ||
| let boxes = | ||
| iframe.contentDocument.getElementsByClassName("positioned"); | ||
| const box = (i) => { | ||
| return boxes[i - 1]; | ||
| } | ||
| let scroller = iframe.contentDocument.getElementById("outer"); | ||
| // There are 5 aligned boxes in positioned-target-iframe.html. | ||
| assert_equals(boxes.length, 5); | ||
| await runScrollSnapSelectionVerificationTest(t, scroller, | ||
| [box(1), box(2), box(3), box(4), box(5)], | ||
| box(target_number), "y"); | ||
|
|
||
| // Let scroller no longer be a scroll container. | ||
| scroller.style.overflow = "visible"; | ||
| assert_equals(scroller.scrollTop, 0); | ||
|
|
||
| // Let scroller be a scroll container once again. | ||
| scroller.style.overflow = "scroll"; | ||
|
|
||
| // Run the test again. | ||
| await runScrollSnapSelectionVerificationTest(t, scroller, | ||
| [box(1), box(2), box(3), box(4), box(5)], | ||
| box(target_number), "y"); | ||
| finish(); | ||
| }; | ||
| iframe.src = `positioned-target-iframe.html#target${target_number}`; | ||
| document.body.appendChild(iframe); | ||
| await finished; | ||
| document.body.removeChild(iframe); | ||
| }, ""); | ||
| } | ||
|
|
||
| await test(1); | ||
| await test(2); | ||
| await test(3); | ||
| await test(4); | ||
| await test(5); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
99 changes: 99 additions & 0 deletions
99
...css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element.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,99 @@ | ||
| <!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> | ||
| .iframe { | ||
| width: 1000px; | ||
| height: 1000px; | ||
| } | ||
| </style> | ||
| <script> | ||
| window.onload = async () => { | ||
| await waitForCompositorCommit(); | ||
| // This test sets up a 3x3 grid within scroller: | ||
| // ------------------------- | ||
| // | Box 1 | Box 2 | Box 3 | | ||
| // ------------------------ | ||
| // | Box 4 | Box 5 | Box 6 | | ||
| // ------------------------- | ||
| // | Box 7 | Box 8 | Box 9 | | ||
| // ------------------------- | ||
| // within an iframe. | ||
| // This function just gets the numbers beside |box_number| on each row. | ||
| // E.g. 4: 4%3 = 1; so the nmubers we want are 5 (4+1) and 6 (4+2). | ||
| function getAlignedNumbers(n) { | ||
| const mod_3 = n % 3; | ||
| if (mod_3 == 1) { | ||
| return [n + 1, n + 2]; | ||
| } else if (mod_3 == 2) { | ||
| return [n - 1, n + 1]; | ||
| } | ||
| return [n - 1, n - 2]; | ||
| } | ||
|
|
||
| async function test(box_number) { | ||
| return promise_test(async (t) => { | ||
| let [other_box_1, other_box_2] = getAlignedNumbers(box_number); | ||
| let finish = null; | ||
| const finished = new Promise((res) => { | ||
| finish = res; | ||
| }); | ||
| var iframe = document.createElement("iframe"); | ||
| iframe.classList.add("iframe"); | ||
| iframe.onload = async () => { | ||
| let boxes = iframe.contentDocument.getElementsByClassName("box"); | ||
| const box = (i) => { | ||
| return boxes[i - 1]; | ||
| } | ||
| let scroller = iframe.contentDocument.getElementById("scroller"); | ||
| assert_equals(boxes.length, 9); | ||
| await runScrollSnapSelectionVerificationTest(t, scroller, | ||
| [box(box_number), box(other_box_1), box(other_box_2)], | ||
| box(box_number), "y"); | ||
|
|
||
| // Let scroller no longer be a scroll container. | ||
| scroller.style.overflow = "visible"; | ||
| assert_equals(scroller.scrollTop, 0); | ||
|
|
||
| // Let scroller be a scroll container once again. | ||
| scroller.style.overflow = "scroll"; | ||
|
|
||
| // Run the test again. | ||
| await runScrollSnapSelectionVerificationTest(t, scroller, | ||
| [box(box_number), box(other_box_1), box(other_box_2)], | ||
| box(box_number), "y"); | ||
|
|
||
| finish(); | ||
| }; | ||
| iframe.src = `prefer-targeted-element-iframe.html#box${box_number}`; | ||
| document.body.appendChild(iframe); | ||
| await finished; | ||
| document.body.removeChild(iframe); | ||
| }, `scroller selects targeted area box${box_number} among multiple` + | ||
| ` aligned areas.`); | ||
| } | ||
|
|
||
| await test(1); | ||
| await test(2); | ||
| await test(3); | ||
| await test(4); | ||
| await test(5); | ||
| await test(6); | ||
| await test(7); | ||
| await test(8); | ||
| await test(9); | ||
| } | ||
| </script> | ||
| </body> | ||
| </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
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