From d8bbc7858622b6d9c278469aab701ca0b609cddf Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Wed, 15 May 2024 05:35:49 +0200
Subject: Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/generic/test/mochitest.toml                 | 37 ++++++++++++
 .../test/selection_cross_shadow_boundary_helper.js | 28 ++++++++++
 ...ion_cross_shadow_boundary_1_backward_click.html | 36 ++++++++++++
 ...tion_cross_shadow_boundary_1_backward_drag.html | 40 +++++++++++++
 ...tion_cross_shadow_boundary_1_forward_click.html | 35 ++++++++++++
 ...ction_cross_shadow_boundary_1_forward_drag.html | 39 +++++++++++++
 ...ion_cross_shadow_boundary_2_backward_click.html | 47 ++++++++++++++++
 ...tion_cross_shadow_boundary_2_backward_drag.html | 48 ++++++++++++++++
 ...tion_cross_shadow_boundary_2_forward_click.html | 46 +++++++++++++++
 ...ction_cross_shadow_boundary_2_forward_drag.html | 48 ++++++++++++++++
 ...hadow_boundary_multi_ranges_backward_click.html | 61 ++++++++++++++++++++
 ...shadow_boundary_multi_ranges_backward_drag.html | 65 ++++++++++++++++++++++
 ...shadow_boundary_multi_ranges_forward_click.html | 59 ++++++++++++++++++++
 ..._shadow_boundary_multi_ranges_forward_drag.html | 65 ++++++++++++++++++++++
 14 files changed, 654 insertions(+)
 create mode 100644 layout/generic/test/selection_cross_shadow_boundary_helper.js
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_1_backward_click.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_1_backward_drag.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_1_forward_click.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_1_forward_drag.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_2_backward_click.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_2_backward_drag.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_2_forward_click.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_2_forward_drag.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_backward_click.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_backward_drag.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_forward_click.html
 create mode 100644 layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_forward_drag.html

(limited to 'layout/generic/test')

diff --git a/layout/generic/test/mochitest.toml b/layout/generic/test/mochitest.toml
index 5c06c90eb7..dcaac3de7a 100644
--- a/layout/generic/test/mochitest.toml
+++ b/layout/generic/test/mochitest.toml
@@ -12,6 +12,7 @@ support-files = [
   "file_SlowTallImage.sjs",
   "bug1174521.html",
   "!/gfx/layers/apz/test/mochitest/apz_test_utils.js",
+  "selection_cross_shadow_boundary_helper.js",
 ]
 
 ["test_bug240933.html"]
@@ -265,6 +266,42 @@ support-files = [
 
 ["test_selection_changes_with_middle_mouse_button.html"]
 
+["test_selection_cross_shadow_boundary_1_backward_click.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_1_backward_drag.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_1_forward_click.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_1_forward_drag.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_2_backward_click.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_2_backward_drag.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_2_forward_click.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_2_forward_drag.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_multi_ranges_forward_drag.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_multi_ranges_forward_click.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_multi_ranges_backward_drag.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
+["test_selection_cross_shadow_boundary_multi_ranges_backward_click.html"]
+skip-if = ["release_or_beta"] # requires Selection.getComposedRanges to be enabled (Nightly only)
+
 ["test_selection_doubleclick.html"]
 
 ["test_selection_expanding.html"]
diff --git a/layout/generic/test/selection_cross_shadow_boundary_helper.js b/layout/generic/test/selection_cross_shadow_boundary_helper.js
new file mode 100644
index 0000000000..b2a596a27f
--- /dev/null
+++ b/layout/generic/test/selection_cross_shadow_boundary_helper.js
@@ -0,0 +1,28 @@
+// Helper file for test_selection_cross_shadow_boundary_* related tests
+
+function drag(
+  fromTarget,
+  fromX,
+  fromY,
+  toTarget,
+  toX,
+  toY,
+  withAccelKey = false
+) {
+  synthesizeMouse(fromTarget, fromX, fromY, {
+    type: "mousemove",
+    accelKey: withAccelKey,
+  });
+  synthesizeMouse(fromTarget, fromX, fromY, {
+    type: "mousedown",
+    accelKey: withAccelKey,
+  });
+  synthesizeMouse(toTarget, toX, toY, {
+    type: "mousemove",
+    accelKey: withAccelKey,
+  });
+  synthesizeMouse(toTarget, toX, toY, {
+    type: "mouseup",
+    accelKey: withAccelKey,
+  });
+}
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_1_backward_click.html b/layout/generic/test/test_selection_cross_shadow_boundary_1_backward_click.html
new file mode 100644
index 0000000000..ee724b344c
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_1_backward_click.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+function run() {
+  document.getElementById("host").attachShadow({ mode: "open" }).innerHTML = "<span>InnerText</span>";
+
+  const inner = host.shadowRoot.firstChild;
+  const rect = inner.getBoundingClientRect();
+
+  // Click the bottom right of "InnerText"
+  synthesizeMouse(inner, rect.width, rect.height, { type: "mousedown"});
+  synthesizeMouse(inner, rect.width, rect.height, { type: "mouseup" });
+
+  // Click the top left of "OuterText"
+  synthesizeMouse(document.getElementById("outer"), 0, 0, { type: "mousedown" , shiftKey: true});
+  synthesizeMouse(document.getElementById("outer"), 0, 0, { type: "mouseup" , shiftKey: true});
+
+  // Above two clicks should select both "OuterText" and "InnerText"
+  const sel = document.getSelection().getComposedRanges(host.shadowRoot)[0];
+
+  // backward selection
+  is(sel.endContainer, inner.firstChild, "endContainer is the InnerText");
+  is(sel.endOffset, 9, "endOffset ends at the last character");
+  is(sel.startContainer, outer.firstChild, "startContainer is the OuterText");
+  is(sel.startOffset, 0, "startOffset starts at the first character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer">OuterText</span>
+  <div id="host"></div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_1_backward_drag.html b/layout/generic/test/test_selection_cross_shadow_boundary_1_backward_drag.html
new file mode 100644
index 0000000000..f1737eaefa
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_1_backward_drag.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  document.getElementById("host").attachShadow({ mode: "open" }).innerHTML = "<span>InnerText</span>";
+
+  const inner = host.shadowRoot.firstChild;
+  const rect = inner.getBoundingClientRect();
+
+  // Drag from the bottom right of InnerText to the
+  // top left of OuterText.
+  drag(
+    inner,
+    rect.width,
+    rect.height,
+    document.getElementById("outer"),
+    0,
+    0);
+
+  // Above drag selects both "OuterText" and "InnerText"
+  const sel = document.getSelection().getComposedRanges(host.shadowRoot)[0];
+
+  // backward selection
+  is(sel.endContainer, inner.firstChild, "endContainer is the InnerText");
+  is(sel.endOffset, 9, "endOffset ends at the last character");
+  is(sel.startContainer, outer.firstChild, "startContainer is the OuterText");
+  is(sel.startOffset, 0, "startOffset starts at the first character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer">OuterText</span>
+  <div id="host"></div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_1_forward_click.html b/layout/generic/test/test_selection_cross_shadow_boundary_1_forward_click.html
new file mode 100644
index 0000000000..dcf4f9ad16
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_1_forward_click.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+function run() {
+  document.getElementById("host").attachShadow({ mode: "open" }).innerHTML = "<span>InnerText</span>";
+
+  // Click the top left of "OuterText"
+  synthesizeMouse(document.getElementById("outer"), 0, 0, { type: "mousedown" });
+  synthesizeMouse(document.getElementById("outer"), 0, 0, { type: "mouseup" });
+
+  // Click the bottom right of "InnerText"
+  const inner = host.shadowRoot.firstChild;
+  const rect = inner.getBoundingClientRect();
+  synthesizeMouse(inner, rect.width, rect.height, { type: "mousedown", shiftKey: true});
+  synthesizeMouse(inner, rect.width, rect.height, { type: "mouseup" , shiftKey: true});
+
+  // Above two clicks should select both "OuterText" and "InnerText"
+  const sel = document.getSelection().getComposedRanges(host.shadowRoot)[0];
+
+  // forward selection
+  is(sel.startContainer, outer.firstChild, "startContainer is the OuterText");
+  is(sel.startOffset, 0, "startOffset starts at the first character");
+  is(sel.endContainer, inner.firstChild, "endContainer is the InnerText");
+  is(sel.endOffset, 9, "endOffset ends at the last character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer">OuterText</span>
+  <div id="host"></div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_1_forward_drag.html b/layout/generic/test/test_selection_cross_shadow_boundary_1_forward_drag.html
new file mode 100644
index 0000000000..6a351ff16b
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_1_forward_drag.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+function run() {
+  document.getElementById("host").attachShadow({ mode: "open" }).innerHTML = "<span>InnerText</span>";
+
+  const inner = host.shadowRoot.firstChild;
+  const rect = inner.getBoundingClientRect();
+
+  // drag from the top left of OuterText
+  // to the bottom right of InnerText
+  drag(
+    document.getElementById("outer"),
+    0,
+    0,
+    inner,
+    rect.width,
+    rect.height);
+
+  // Above drag selects should select both "OuterText" and "InnerText"
+  const sel = document.getSelection().getComposedRanges(host.shadowRoot)[0];
+
+  // forward selection
+  is(sel.startContainer, outer.firstChild, "startContainer is the OuterText");
+  is(sel.startOffset, 0, "startOffset starts at the first character");
+  is(sel.endContainer, inner.firstChild, "endContainer is the InnerText");
+  is(sel.endOffset, 9, "endOffset ends at the last character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer">OuterText</span>
+  <div id="host"></div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_2_backward_click.html b/layout/generic/test/test_selection_cross_shadow_boundary_2_backward_click.html
new file mode 100644
index 0000000000..8df867a0a5
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_2_backward_click.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  const root1 = document.getElementById("host1").attachShadow({ mode: "open" });
+  root1.innerHTML = "InnerText1";
+
+  const root2 = document.getElementById("host2").attachShadow({ mode: "open" });
+  root2.innerHTML = "<span>InnerText2</span>";
+
+
+
+  const inner2 = root2.firstChild;
+  const rect = inner2.getBoundingClientRect();
+
+  // Click the bottom right of "InnerText2"
+  synthesizeMouse(inner2, rect.width, rect.height, { type: "mousedown" });
+  synthesizeMouse(inner2, rect.width, rect.height, { type: "mouseup" });
+
+  // Click the top left of "OuterText1"
+  synthesizeMouse(document.getElementById("outer1"), 0, 0, { type: "mousedown", shiftKey: true});
+  synthesizeMouse(document.getElementById("outer1"), 0, 0, { type: "mouseup" , shiftKey: true});
+
+  // Above clicks selects should select
+  // "OuterText1", "OuterText2", "InnerText1" and "InnerText2".
+  const sel = document.getSelection().getComposedRanges(root2)[0];
+
+  // backward selection
+  is(sel.endContainer, inner2.firstChild, "endContainer is the InnerText2");
+  is(sel.endOffset, 10, "endOffset ends at the last character");
+  is(sel.startContainer, outer1.firstChild, "startContainer is the OuterText1");
+  is(sel.startOffset, 0, "startOffset starts at the first character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer1">OuterText1</span>
+  <div id="host1"></div>
+  <span id="outer2">OuterText2</span>
+  <div id="host2"></div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_2_backward_drag.html b/layout/generic/test/test_selection_cross_shadow_boundary_2_backward_drag.html
new file mode 100644
index 0000000000..f79512d35e
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_2_backward_drag.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  const root1 = document.getElementById("host1").attachShadow({ mode: "open" });
+  root1.innerHTML = "InnerText1";
+
+  const root2 = document.getElementById("host2").attachShadow({ mode: "open" });
+  root2.innerHTML = "<span>InnerText2</span>";
+
+  const inner2 = root2.firstChild;
+  const rect = inner2.getBoundingClientRect();
+
+  const outer1 = document.getElementById("outer1");
+  // Drag from the bottom right of InnerText2 to
+  // the top left of OuterText1.
+  drag(
+    inner2,
+    rect.width,
+    rect.height,
+    outer1,
+    0,
+    0);
+
+  // Above drag should selects
+  // "OuterText1", "OuterText2", "InnerText1" and "InnerText2".
+  const sel = document.getSelection().getComposedRanges(root2)[0];
+
+  // backward selection
+  is(sel.endContainer, inner2.firstChild, "endContainer is the InnerText2");
+  is(sel.endOffset, 10, "endOffset ends at the last character");
+  is(sel.startContainer, outer1.firstChild, "startContainer is the OuterText1");
+  is(sel.startOffset, 0, "startOffset starts at the first character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer1">OuterText1</span>
+  <div id="host1"></div>
+  <span id="outer2">OuterText2</span>
+  <div id="host2"></div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_2_forward_click.html b/layout/generic/test/test_selection_cross_shadow_boundary_2_forward_click.html
new file mode 100644
index 0000000000..2ca2eaeda9
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_2_forward_click.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  const root1 = document.getElementById("host1").attachShadow({ mode: "open" });
+  root1.innerHTML = "InnerText1";
+
+  const root2 = document.getElementById("host2").attachShadow({ mode: "open" });
+  root2.innerHTML = "<span>InnerText2</span>";
+
+  const outer1 = document.getElementById("outer1");
+  // Click the top left of "OuterText1"
+  synthesizeMouse(outer1, 0, 0, { type: "mousedown" });
+  synthesizeMouse(outer1, 0, 0, { type: "mouseup" });
+
+  const inner2 = root2.firstChild;
+  const rect = inner2.getBoundingClientRect();
+
+  // Click the bottom right of "InnerText2"
+  synthesizeMouse(inner2, rect.width, rect.height, { type: "mousedown", shiftKey: true});
+  synthesizeMouse(inner2, rect.width, rect.height, { type: "mouseup" , shiftKey: true});
+
+  // Above clicks should select
+  // "OuterText1", "OuterText2", "InnerText1" and "InnerText2".
+  const sel = document.getSelection().getComposedRanges(root2)[0];
+
+  // forward selection
+  is(sel.startContainer, outer1.firstChild, "startContainer is the OuterText1");
+  is(sel.startOffset, 0, "startOffset starts at the first character");
+  is(sel.endContainer, inner2.firstChild, "endContainer is the InnerText2");
+  is(sel.endOffset, 10, "endOffset ends at the last character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer1">OuterText1</span>
+  <div id="host1"></div>
+  <span id="outer2">OuterText2</span>
+  <div id="host2"></div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_2_forward_drag.html b/layout/generic/test/test_selection_cross_shadow_boundary_2_forward_drag.html
new file mode 100644
index 0000000000..b92108de95
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_2_forward_drag.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+
+function run() {
+  const root1 = document.getElementById("host1").attachShadow({ mode: "open" });
+  root1.innerHTML = "InnerText1";
+
+  const root2 = document.getElementById("host2").attachShadow({ mode: "open" });
+  root2.innerHTML = "<span>InnerText2</span>";
+
+  const inner2 = root2.firstChild;
+  const rect = inner2.getBoundingClientRect();
+
+  const outer1 = document.getElementById("outer1");
+  // Drag from the top lef of OuterText1 to the
+  // bottom right of InnerText2.
+  drag(
+    outer1,
+    0,
+    0,
+    inner2,
+    rect.width,
+    rect.height);
+
+  // Above drag should select
+  // "OuterText1", "OuterText2", "InnerText1" and "InnerText2".
+  const sel = document.getSelection().getComposedRanges(root2)[0];
+
+  // forward selection
+  is(sel.startContainer, outer1.firstChild, "startContainer is the OuterText1");
+  is(sel.startOffset, 0, "startOffset starts at the first character");
+  is(sel.endContainer, inner2.firstChild, "endContainer is the InnerText2");
+  is(sel.endOffset, 10, "endOffset ends at the last character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer1">OuterText1</span>
+  <div id="host1"></div>
+  <span id="outer2">OuterText2</span>
+  <div id="host2"></div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_backward_click.html b/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_backward_click.html
new file mode 100644
index 0000000000..a2a0d0e2be
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_backward_click.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+function run() {
+  const inner1 = host1.shadowRoot.querySelector("span");
+  const rect1 = inner1.getBoundingClientRect();
+
+  // Click the bottom right of "InnerText1"
+  synthesizeMouse(inner1, rect1.width - 1, rect1.height - 1, { type: "mousedown" });
+  synthesizeMouse(inner1, rect1.width - 1, rect1.height - 1, { type: "mouseup" });
+
+  // Click the top left of "OuterText1"
+  synthesizeMouse(document.getElementById("outer1"), 0, 0, { type: "mousedown", shiftKey: true });
+  synthesizeMouse(document.getElementById("outer1"), 0, 0, { type: "mouseup", shiftKey: true });
+
+  const inner2 = host2.shadowRoot.querySelector("span");
+  const rect2 = inner2.getBoundingClientRect();
+
+  // Click the bottom right of "InnerText2" with accelKey
+  synthesizeMouse(inner2, rect2.width, rect2.height, { type: "mousedown", accelKey: true});
+  synthesizeMouse(inner2, rect2.width, rect2.height, { type: "mouseup" , accelKey: true});
+
+  // Click the top left of "OuterText2"
+  synthesizeMouse(document.getElementById("outer2"), 1, 1, { type: "mousedown", shiftKey: true});
+  synthesizeMouse(document.getElementById("outer2"), 1, 1, { type: "mouseup", shiftKey: true});
+
+  const ranges = document.getSelection().getComposedRanges(host1.shadowRoot, host2.shadowRoot);
+  is(ranges.length, 2, "Above two drag selection should produce two ranges");
+
+  is(ranges[0].startContainer, outer1.firstChild, "startContainer is the OuterText1");
+  is(ranges[0].startOffset, 0, "startOffset starts at the first character");
+  is(ranges[0].endContainer, inner1.firstChild, "endContainer is the InnerText1");
+  is(ranges[0].endOffset, 10, "endOffset ends at the last character");
+
+  is(ranges[1].startContainer, outer2.firstChild, "startContainer is the OuterText2");
+  is(ranges[1].startOffset, 0, "startOffset starts at the first character");
+  is(ranges[1].endContainer, inner2.firstChild, "endContainer is the InnerText2");
+  is(ranges[1].endOffset, 10, "endOffset ends at the last character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer1">OuterText1</span>
+  <div id="host1">
+    <template shadowrootmode="open">
+      <span>InnerText1</span>
+    </template>
+  </div>
+  <br>
+  <span id="outer2">OuterText2</span>
+  <div id="host2">
+    <template shadowrootmode="open">
+      <span>InnerText2</span>
+    </template>
+  </div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_backward_drag.html b/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_backward_drag.html
new file mode 100644
index 0000000000..317ee4f973
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_backward_drag.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+function run() {
+  const inner1 = host1.shadowRoot.querySelector("span");
+  const rect1 = inner1.getBoundingClientRect();
+
+  // drag from the bottom right of InnerText1
+  // to the top left of OuterText1
+  drag(
+    inner1,
+    rect1.width - 1,
+    rect1.height - 1,
+    document.getElementById("outer1"),
+    1,
+    1);
+
+  const inner2 = host2.shadowRoot.querySelector("span");
+  const rect2 = inner2.getBoundingClientRect();
+  // drag from the bottom right of InnerText2
+  // to the top left of OuterText2
+  drag(
+    inner2,
+    rect2.width,
+    rect2.height,
+    document.getElementById("outer2"),
+    1,
+    1,
+    true /* accelKey */);
+
+  const ranges = document.getSelection().getComposedRanges(host1.shadowRoot, host2.shadowRoot);
+  is(ranges.length, 2, "Above two drag selection should produce two ranges");
+
+  is(ranges[0].startContainer, outer1.firstChild, "startContainer is the OuterText1");
+  is(ranges[0].startOffset, 0, "startOffset starts at the first character");
+  is(ranges[0].endContainer, inner1.firstChild, "endContainer is the InnerText1");
+  is(ranges[0].endOffset, 10, "endOffset ends at the last character");
+
+  is(ranges[1].startContainer, outer2.firstChild, "startContainer is the OuterText2");
+  is(ranges[1].startOffset, 0, "startOffset starts at the first character");
+  is(ranges[1].endContainer, inner2.firstChild, "endContainer is the InnerText2");
+  is(ranges[1].endOffset, 10, "endOffset ends at the last character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer1">OuterText1</span>
+  <div id="host1">
+    <template shadowrootmode="open">
+      <span>InnerText1</span>
+    </template>
+  </div>
+  <br>
+  <span id="outer2">OuterText2</span>
+  <div id="host2">
+    <template shadowrootmode="open">
+      <span>InnerText2</span>
+    </template>
+  </div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_forward_click.html b/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_forward_click.html
new file mode 100644
index 0000000000..931c01fca0
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_forward_click.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+function run() {
+  // Click the top left of "OuterText1"
+  synthesizeMouse(document.getElementById("outer1"), 1, 1, { type: "mousedown" });
+  synthesizeMouse(document.getElementById("outer1"), 1, 1, { type: "mouseup" });
+
+  const inner1 = host1.shadowRoot.querySelector("span");
+  const rect1 = inner1.getBoundingClientRect();
+  // Click the bottom right of "InnerText1"
+  synthesizeMouse(inner1, rect1.width - 1, rect1.height - 1, { type: "mousedown", shiftKey: true});
+  synthesizeMouse(inner1, rect1.width - 1, rect1.height - 1, { type: "mouseup" , shiftKey: true});
+
+  // Click the top left of "OuterText2" with accelKey
+  synthesizeMouse(document.getElementById("outer2"), 1, 1, { type: "mousedown", accelKey: true});
+  synthesizeMouse(document.getElementById("outer2"), 1, 1, { type: "mouseup", accelKey: true});
+
+  const inner2 = host2.shadowRoot.querySelector("span");
+  const rect2 = inner2.getBoundingClientRect();
+  // Click the bottom right of "InnerText2"
+  synthesizeMouse(inner2, rect2.width, rect2.height, { type: "mousedown", shiftKey: true});
+  synthesizeMouse(inner2, rect2.width, rect2.height, { type: "mouseup" , shiftKey: true});
+
+  const ranges = document.getSelection().getComposedRanges(host1.shadowRoot, host2.shadowRoot);
+  is(ranges.length, 2, "Above two drag selection should produce two ranges");
+
+  is(ranges[0].startContainer, outer1.firstChild, "startContainer is the OuterText1");
+  is(ranges[0].startOffset, 0, "startOffset starts at the first character");
+  is(ranges[0].endContainer, inner1.firstChild, "endContainer is the InnerText1");
+  is(ranges[0].endOffset, 10, "endOffset ends at the last character");
+
+  is(ranges[1].startContainer, outer2.firstChild, "startContainer is the OuterText2");
+  is(ranges[1].startOffset, 0, "startOffset starts at the first character");
+  is(ranges[1].endContainer, inner2.firstChild, "endContainer is the InnerText2");
+  is(ranges[1].endOffset, 10, "endOffset ends at the last character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer1">OuterText1</span>
+  <div id="host1">
+    <template shadowrootmode="open">
+      <span>InnerText1</span>
+    </template>
+  </div>
+  <br>
+  <span id="outer2">OuterText2</span>
+  <div id="host2">
+    <template shadowrootmode="open">
+      <span>InnerText2</span>
+    </template>
+  </div>
+</body>
diff --git a/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_forward_drag.html b/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_forward_drag.html
new file mode 100644
index 0000000000..b45e588685
--- /dev/null
+++ b/layout/generic/test/test_selection_cross_shadow_boundary_multi_ranges_forward_drag.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script type="application/javascript" src="/tests/layout/generic/test/selection_cross_shadow_boundary_helper.js"></script>
+<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+<script>
+SimpleTest.waitForExplicitFinish();
+function run() {
+  const inner1 = host1.shadowRoot.querySelector("span");
+  const rect1 = inner1.getBoundingClientRect();
+
+  // drag from the top left of OuterText1
+  // to the bottom right of InnerText1
+  drag(
+    document.getElementById("outer1"),
+    1,
+    1,
+    inner1,
+    rect1.width - 1,
+    rect1.height - 1);
+
+  const inner2 = host2.shadowRoot.querySelector("span");
+  const rect2 = inner2.getBoundingClientRect();
+  // drag from the top left of OuterText2
+  // to the bottom right of InnerText2
+  drag(
+    document.getElementById("outer2"),
+    1,
+    1,
+    inner2,
+    rect2.width,
+    rect2.height,
+    true /* accelKey */);
+
+  const ranges = document.getSelection().getComposedRanges(host1.shadowRoot, host2.shadowRoot);
+  is(ranges.length, 2, "Above two drag selection should produce two ranges");
+
+  is(ranges[0].startContainer, outer1.firstChild, "startContainer is the OuterText1");
+  is(ranges[0].startOffset, 0, "startOffset starts at the first character");
+  is(ranges[0].endContainer, inner1.firstChild, "endContainer is the InnerText1");
+  is(ranges[0].endOffset, 10, "endOffset ends at the last character");
+
+  is(ranges[1].startContainer, outer2.firstChild, "startContainer is the OuterText2");
+  is(ranges[1].startOffset, 0, "startOffset starts at the first character");
+  is(ranges[1].endContainer, inner2.firstChild, "endContainer is the InnerText2");
+  is(ranges[1].endOffset, 10, "endOffset ends at the last character");
+
+  SimpleTest.finish();
+}
+</script>
+<body onload="SimpleTest.waitForFocus(run);">
+  <span id="outer1">OuterText1</span>
+  <div id="host1">
+    <template shadowrootmode="open">
+      <span>InnerText1</span>
+    </template>
+  </div>
+  <br>
+  <span id="outer2">OuterText2</span>
+  <div id="host2">
+    <template shadowrootmode="open">
+      <span>InnerText2</span>
+    </template>
+  </div>
+</body>
-- 
cgit v1.2.3