diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout')
3 files changed, 166 insertions, 108 deletions
diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html index 09b81e7c0d..a44c8d7c48 100644 --- a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-common-to-both-axes.html @@ -33,31 +33,48 @@ width: 100px; height: 100px; background-color: green; - display: inline-block; - position: relative; - } - .grid { position: absolute; - width: 350px; - height: 350px; } - .snap:focus { - background-color: blue; + .leftcol { + left: 110px; + } + .midcol { + left: 220px; + } + .rightcol { + left: 330px; + } + .toprow { + top: 110px; + } + .midrow { + top: 220px; + } + .bottomrow { + top: 330px; + } + .placeholder { + position: absolute; + top: 0px; + left: 0px; + width: 10px; + height: 10px; + background-color: black; + scroll-snap-align: start; } </style> <div class="scroller" id="scroller"> <div class="large-space"><div> - <div class="grid" id="grid"> - <div id="box1" tabindex="1" class="snap box">Box 1</div> - <div id="box2" tabindex="1" class="snap box">Box 2</div> - <div id="box3" tabindex="1" class="snap box">Box 3</div> - <div id="box4" tabindex="1" class="snap box">Box 4</div> - <div id="box5" tabindex="1" class="snap box">Box 5</div> - <div id="box6" tabindex="1" class="snap box">Box 6</div> - <div id="box7" tabindex="1" class="snap box">Box 7</div> - <div id="box8" tabindex="1" class="snap box">Box 8</div> - <div id="box9" tabindex="1" class="snap box">Box 9</div> - </div> + <div class="placeholder"></div> + <div id="box1" class="leftcol toprow snap box">Box 1</div> + <div id="box2" class="midcol toprow snap box">Box 2</div> + <div id="box3" class="rightcol toprow snap box">Box 3</div> + <div id="box4" class="leftcol midrow snap box">Box 4</div> + <div id="box5" class="midcol midrow snap box">Box 5</div> + <div id="box6" class="rightcol midrow snap box">Box 6</div> + <div id="box7" class="leftcol bottomrow snap box">Box 7</div> + <div id="box8" class="midcol bottomrow snap box">Box 8</div> + <div id="box9" class="rightcol bottomrow snap box">Box 9</div> </div> <script> window.onload = () => { @@ -79,50 +96,60 @@ await waitForCompositorCommit(); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[], + /*aligned_elements_x=*/[box(1), box(4), box(7)], /*aligned_elements_y=*/[box(1), box(2), box(3)], - /*axis=*/ "y", - /*expected_target_x=*/null, + /*axis=*/ "both", + /*expected_target_x=*/box(1), /*expected_target_y=*/box(1)); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[], + /*aligned_elements_x=*/[box(1), box(4), box(7)], /*aligned_elements_y=*/[box(4), box(5), box(6)], - /*axis=*/ "y", - /*expected_target_x=*/null, + /*axis=*/"both", + /*expected_target_x=*/box(4), /*expected_target_y=*/box(4)); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[], + /*aligned_elements_x=*/[box(1), box(4), box(7)], /*aligned_elements_y=*/[box(7), box(8), box(9)], - /*axis=*/"y", - /*expected_target_x=*/null, + /*axis=*/"both", + /*expected_target_x=*/box(7), /*expected_target_y=*/box(7)); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[box(1), box(4), box(7)], - /*aligned_elements_y=*/[], - /*axis=*/"x", - /*expected_target_x=*/box(1)); + /*aligned_elements_x=*/[box(2), box(5), box(8)], + /*aligned_elements_y=*/[box(1), box(2), box(3)], + /*axis=*/ "both", + /*expected_target_x=*/box(2), + /*expected_target_y=*/box(2)); await runScrollSnapSelectionVerificationTest(t, scroller, /*aligned_elements_x=*/[box(2), box(5), box(8)], - /*aligned_elements_y=*/[], - /*axis=*/"x", - /*expected_target_x=*/box(2)); + /*aligned_elements_y=*/[box(4), box(5), box(6)], + /*axis=*/"both", + /*expected_target_x=*/box(5), + /*expected_target_y=*/box(5)); + + await runScrollSnapSelectionVerificationTest(t, scroller, + /*aligned_elements_x=*/[box(2), box(5), box(8)], + /*aligned_elements_y=*/[box(7), box(8), box(9)], + /*axis=*/"both", + /*expected_target_x=*/box(8), + /*expected_target_y=*/box(8)); await runScrollSnapSelectionVerificationTest(t, scroller, /*aligned_elements_x=*/[box(3), box(6), box(9)], - /*aligned_elements_y=*/[], - /*axis=*/"x", - /*expected_target_x=*/box(3)); + /*aligned_elements_y=*/[box(1), box(2), box(3)], + /*axis=*/ "both", + /*expected_target_x=*/box(3), + /*expected_target_y=*/box(3)); await runScrollSnapSelectionVerificationTest(t, scroller, - /*aligned_elements_x=*/[box(2), box(5), box(8)], + /*aligned_elements_x=*/[box(3), box(6), box(9)], /*aligned_elements_y=*/[box(4), box(5), box(6)], /*axis=*/"both", - /*expected_target_x=*/box(5), - /*expected_target_y=*/box(5)); + /*expected_target_x=*/box(6), + /*expected_target_y=*/box(6)); }, "scroller prefers target aligned in both axes."); promise_test(async (t) => { @@ -132,13 +159,16 @@ box8.style.top = `${initial_box8_top}px`; }); + // Snap to box7's row and column. + scroller.scrollTo(box7.offsetLeft, box7.offsetTop); + // Move box 8 below box7 and box9. - box8.style.top = `${2 * box8.offsetTop}px`; + box8.style.top = `${box8.offsetTop + 50}px`; // Snap to box8. scroller.scrollTop = box8.offsetTop; - // Test that if box7 and box9 are also shifted to align with box7, + // Test that if box7 and box9 are also shifted to align with box8, // box8 is still treated as the selected snap target despite box7 being // aligned on both axes. runLayoutSnapSeletionVerificationTest(t, scroller, [box7, box9], diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html index 6bc47d15ef..ae445d2861 100644 --- a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame-target.html @@ -53,83 +53,122 @@ // ------------------------- // | Box 7 | Box 8 | Box 9 | // ------------------------- - // This function just gets the numbers beside |box_number| on each row. - // E.g. 4: 4%3 = 1; so the numbers we want are 5 (4+1) and 6 (4+2). - function getAlignedNumbers(n) { + // This function just gets the boxes beside boxn on each row. + // E.g. box4: 4%3 = 1; so the boxes we want are box5 (4+1) and box6 (4+2). + function getAlignedBoxes(n) { n = parseInt(n); const mod_3 = n % 3; + let n1 = n - 1, n2 = n - 2; if (mod_3 == 1) { - return [n + 1, n + 2]; + n1 = n + 1; + n2 = n + 2; } else if (mod_3 == 2) { - return [n - 1, n + 1]; + n1 = n - 1; + n2 = n + 1; } - return [n - 1, n - 2]; + return [document.getElementById(`box${n1}`), + document.getElementById(`box${n2}`)]; } + function stashResult(key, result) { fetch(`/css/css-scroll-snap/snap-after-relayout` + `/multiple-aligned-targets/stash.py?key=${key}`, { method: "POST", - body: result + body: JSON.stringify(result) }).then(() => { window.close(); }); } - function assert_equals(v1, v2) { + + function assert_equals(test_number, v1, v2, description) { if (v1 != v2) { - throw new Error(`Expected equality of v1(${v1}) and v2(${v2}).`); + throw new Error( + `Test ${n} expected equality of ${v1} and ${v2}, ` + + `Description: ${description}`); } } - async function record() { - let key = (new URL(document.location)).searchParams.get("key"); - try { - // Get the id of that targeted element. - const target_id = location.hash.substring(1); - const box_number = target_id.substring(3); - // Get the elements aligned with the targeted element. - const target = document.getElementById(target_id); - if (target == null) { - throw new Error("Null hash fragment target."); + async function waitForScrollReset(scroller, x = 0, y = 0) { + return new Promise((resolve) => { + if (scroller.scrollLeft == x && scroller.scrollTop == y) { + resolve(); + } else { + scroller.addEventListener("scrollend", resolve); + scroller.scrollTo(x, y); } - let [aligned_number_1, aligned_number_2] = - getAlignedNumbers(box_number); - const aligned_box_1 = document.getElementById(`box${aligned_number_1}`); - const aligned_box_2 = document.getElementById(`box${aligned_number_2}`); + }); + } - // Make sure all the boxes are equally aligned. - assert_equals(aligned_box_1.offsetTop, target.offsetTop); - assert_equals(aligned_box_1.offsetTop, aligned_box_2.offsetTop); - - // Scroll to the aligned boxes if necessary. - if (scroller.scrollTop != target.offsetTop) { - const scrollend_promise = new Promise((res) => { - scroller.addEventListener(res); - }); - scroller.scrollTop = target.offsetTop; - await scrollend_promise; + async function setLocationHash(id) { + return new Promise((resolve) => { + if (location.hash === `#${id}`) { + resolve(); + } else { + window.addEventListener("hashchange", resolve); + location.hash = `#${id}`; } + }); + } + + let result = { + passed: 0, + errors: "", + }; + + async function test(n) { + try { + const target_id = `box${n}`; + const target = document.getElementById(target_id); + + // Make boxn the targeted element. + await setLocationHash(target_id); + + // Reset the scroll position. + await waitForScrollReset(scroller); + + const aligned_boxes = getAlignedBoxes(n); + // Make sure all the boxes are equally aligned. + assert_equals(n, aligned_boxes[0].offsetTop, target.offsetTop, + `${aligned_boxes[0].id} is at offset ${target.offsetTop}`); + assert_equals(n, aligned_boxes[1].offsetTop, target.offsetTop, + `${aligned_boxes[1].id} is at offset ${target.offsetTop}`); - // Save target's original top and move it down by 100px; + // Scroll to the aligned boxes. + await waitForScrollReset(scroller, 0, target.offsetTop); + assert_equals(n, scroller.scrollTop, target.offsetTop, + `scrolled to ${target.id} at offset ${target.offsetTop}`); + + // Save target's original top. const original_top = getComputedStyle(target).top; + const original_offset_top = target.offsetTop; + + // Move target along the y axis. target.style.top = `${target.offsetTop + 100}px`; // Assert that scroller followed target as it moved down. - assert_equals(scroller.scrollTop, target.offsetTop); + assert_equals(n, scroller.scrollTop, target.offsetTop, + `scrolled followed ${target.id} to offset ${target.offsetTop}`); // Cleanup: undo style change. - target.style.top = `${original_top}px`; + target.style.top = original_top; + assert_equals(n, target.offsetTop, original_offset_top, + `${target.id} is put back to offset ${original_offset_top}`); - // Stash result. - stashResult(key, "PASS"); + // Record the result. + result.passed += 1; } catch (error) { - stashResult(key, error.message); + result.errors = [result.errors, error.message].join(); } } - window.onload = () => { - window.requestAnimationFrame(function () { - window.requestAnimationFrame(record); - }) + window.onload = async () => { + let key = (new URL(document.location)).searchParams.get("key"); + + for (const n of [1, 2, 3, 4, 5, 6, 7, 8, 9]) { + await test(n); + } + + stashResult(key, result); } </script> </body> diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html index 6221b0e4b5..ff81dc78c5 100644 --- a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html +++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/multiple-aligned-targets/prefer-targeted-element-main-frame.html @@ -25,7 +25,7 @@ const response = await fetch(url); const text = await response.text(); if (text) { - resolve(text); + resolve(JSON.parse(text)); } else { requestAnimationFrame(fetchResultInternal.bind(this, url)); } @@ -35,28 +35,17 @@ } function runTest() { - function test(n) { - return promise_test(async (t) => { - let key = token(); + promise_test(async (t) => { + let key = token(); - test_driver.bless("Open a URL with a text fragment directive", () => { - window.open(`prefer-targeted-element-main-frame-target.html` + - `?key=${key}#box${n}`, "_blank", "noopener"); - }); + test_driver.bless("Open a URL", () => { + window.open(`prefer-targeted-element-main-frame-target.html` + + `?key=${key}`, "_blank", "noopener"); + }); - assert_equals(await fetchResult(key), "PASS"); - }, `targeted box${n} is selected snap target.`); - } - - test(1); - test(2); - test(3); - test(4); - test(5); - test(6); - test(7); - test(8); - test(9); + const result = await fetchResult(key); + assert_equals([result.passed, result.errors].join(), "9,"); + }, "targeted box is selected snap target."); } </script> </body> |