shift-click.html | Explore in Territory

<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
// TODO(editing-dev): Once http://crbug.com/736253 fixed, we should use
// |chrome.pointerActionSequence()| instead of |eventSender|.
const kSample = [
  '<div id="first">one <span id="start">two three</span></div>',
  '<div id="second">four <span id="end">five six</span></div>',
].join('');

function doTest(behavior) {
  assert_own_property(window, 'eventSender', 'This test requires eventSender.');
  assert_own_property(window, 'internals', 'This test requires internals.');

  function doDrag(selection) {
    const document = selection.document;
    const start = document.getElementById('start');
    const end = document.getElementById('end');

    // Reset selection granularity
    eventSender.leapForward(1000);
    eventSender.mouseMoveTo(0, 0);
    eventSender.mouseDown();
    eventSender.leapForward(1000);

    // Double-click select to get around eventSender bug where it won't select
    // text just using single-click.
    eventSender.mouseMoveTo(selection.computeLeft(start),
                            selection.computeTop(start));
    eventSender.mouseDown();
    eventSender.mouseUp();
    eventSender.mouseDown();
    eventSender.mouseMoveTo(selection.computeLeft(end),
                            selection.computeTop(end));
    eventSender.mouseUp();
  }

  function doShiftClick(selection, target, offsetX) {
    const document = selection.document;
    const parent = target.parentNode;
    eventSender.mouseMoveTo(selection.computeLeft(target) + offsetX,
                            selection.computeTop(target));
    eventSender.mouseDown(0, ['shiftKey']);
    eventSender.mouseUp(0, ['shiftKey']);
  }

  internals.settings.setEditingBehavior(behavior);

  assert_selection(
    kSample,
    selection => doDrag(selection),
    [
      '<div id="first">one <span id="start">^two three</span></div>',
      '<div id="second">four <span id="end">five| six</span></div>',
    ].join(''),
    `${behavior}-1: Drag start to end`);

  assert_selection(
    kSample,
    selection => {
      const second = selection.document.getElementById('second');
      doDrag(selection);
      doShiftClick(selection, second, second.offsetWidth);
    },
    [
      '<div id="first">one <span id="start">^two three</span></div>',
      '<div id="second">four <span id="end">five six|</span></div>',
    ].join(''),
    `${behavior}-2: Shift click second`);

  assert_selection(
    kSample,
    selection => {
      const end = selection.document.getElementById('end');
      const second = selection.document.getElementById('second');
      doDrag(selection);
      doShiftClick(selection, second, second.offsetWidth);
      doShiftClick(selection, end, 0);
    },
    [
      '<div id="first">one <span id="start">^two three</span></div>',
      '<div id="second">four <span id="end">five| six</span></div>',
    ].join(''),
    `${behavior}-3: Shift click end`);

  assert_selection(
    kSample,
    selection => {
      const end = selection.document.getElementById('end');
      const first = selection.document.getElementById('first');
      const second = selection.document.getElementById('second');
      doDrag(selection);
      doShiftClick(selection, second, second.offsetWidth);
      doShiftClick(selection, end, 0);
      doShiftClick(selection, first, 0);
    },
    behavior === 'mac'
      ? [
          '<div id="first">|one <span id="start">two three</span></div>',
          '<div id="second">four <span id="end">five^ six</span></div>',
        ].join('')
      : [
          '<div id="first">|one <span id="start">two^ three</span></div>',
          '<div id="second">four <span id="end">five six</span></div>',
        ].join(''),
    `${behavior}-4: Shift click first`);

  assert_selection(
    kSample,
    selection => {
      const end = selection.document.getElementById('end');
      const first = selection.document.getElementById('first');
      const second = selection.document.getElementById('second');
      const start = selection.document.getElementById('start');
      doDrag(selection);
      doShiftClick(selection, second, second.offsetWidth);
      doShiftClick(selection, end, 0);
      doShiftClick(selection, first, 0);
      doShiftClick(selection, start, 0);
    },
    behavior === 'mac'
      ? [
          '<div id="first">one <span id="start">|two three</span></div>',
          '<div id="second">four <span id="end">five^ six</span></div>',
        ].join('')
      : [
          '<div id="first">one <span id="start">|two^ three</span></div>',
          '<div id="second">four <span id="end">five six</span></div>',
        ].join(''),
    `${behavior}-5: Shift click start`);
}

for (const behavior of ['mac', 'win']) {
  test(() => doTest(behavior),
       `${behavior}: Expand selection with Shift+Click`);
}
</script>
chromium/third_party/blink/web_tests/editing/selection/shift-click.html
