Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

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>