test_selection_cross_shadow_boundary_multi_ranges_forward_click.html

Enable keyboard shortcuts

<!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>