select_across_readonly_input.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 src="../../../resources/ahem.js"></script>
<script>
// This test verifies mouse drag should not cross editing boundary.

function drag(selection) {
  if (!window.eventSender)
    throw 'This test requires eventSender.';

  // Reset mouse state
  eventSender.mouseMoveTo(0, 0);
  eventSender.leapForward(9999);

  const from = selection.document.getElementById('from');
  eventSender.mouseMoveTo(
    selection.computeLeft(from) + from.offsetWidth / 2,
    selection.computeTop(from) + from.offsetHeight / 2);
  eventSender.mouseDown();
  eventSender.leapForward(200);

  const to = selection.document.getElementById('to');
  eventSender.mouseMoveTo(
    selection.computeLeft(to) + to.offsetWidth / 2,
    selection.computeTop(to) + to.offsetHeight / 2);
  eventSender.mouseUp();
}

const kStyle = [
  '<style>',
  '* { font: 10px Ahem; }',
  'input { width: 64px; }',
  '</style>',
].join('');

selection_test(
  [
    kStyle,
    '<span id="from">ABCDEF</span>',
    '<span id="to">012345</span>',
  ],
  selection => drag(selection),
  [
    kStyle,
    '<span id="from">ABC^DEF</span>',
    '<span id="to">012|345</span>',
  ],
  {dumpAs: 'flattree'},
  '1 Drag left to right from SPAN to SPAN');

selection_test(
  [
    kStyle,
    '<input id="from" readonly type="text" value="ABCDEF">',
    '<span id="to">012345</span>',
  ],
  selection => drag(selection),
  [
    kStyle,
    '<input id="from" readonly type="text" value="ABCDEF">',
      '<div>ABC^DEF|</div>',
    '</input>',
    '<span id="to">012345</span>',
  ],
  {dumpAs: 'flattree'},
  '2 Drag left to right from INPUT to SPAN');

selection_test(
  [
    kStyle,
    '<input id="to" readonly type="text" value="ABCDEF">',
    '<span id="from">012345</span>',
  ],
  selection => drag(selection),
  [
    kStyle,
    '<input id="to" readonly type="text" value="ABCDEF">',
      '<div>ABCDEF</div>',
    '</input>',
    '<span id="from">|012^345</span>',
  ],
  {dumpAs: 'flattree'},
  '3 Drag right to left from SPAN to INPUT');

selection_test(
  [
    kStyle,
    '<span id="from">012345</span>',
    '<input id="to" readonly type="text" value="ABCDEF">',
  ],
  selection => drag(selection),
  [
    kStyle,
    '<span id="from">012^345|</span>',
    '<input id="to" readonly type="text" value="ABCDEF">',
      '<div>ABCDEF</div>',
    '</input>',
  ],
  {dumpAs: 'flattree'},
  '4 Drag left to right from SPAN to INPUT');

selection_test(
  [
    kStyle,
    '<input id="from" readonly type="text" value="ABCDEF">',
    '<span>xyz</span>',
    '<input id="to" readonly type="text" value="012345">',
  ],
  selection => drag(selection),
  [
    kStyle,
    '<input id="from" readonly type="text" value="ABCDEF">',
      '<div>ABC^DEF|</div>',
    '</input>',
    '<span>xyz</span>',
    '<input id="to" readonly type="text" value="012345">',
      '<div>012345</div>',
    '</input>',
  ],
  {dumpAs: 'flattree'},
  '5 Drag left to right from INPUT to INPUT');

selection_test(
  [
    kStyle,
    '<input id="to" readonly type="text" value="ABCDEF">',
    '<span>xyz</span>',
    '<input id="from" readonly type="text" value="012345">',
  ],
  selection => drag(selection),
  [
    kStyle,
    '<input id="to" readonly type="text" value="ABCDEF">',
      '<div>ABCDEF</div>',
    '</input>',
    '<span>xyz</span>',
    '<input id="from" readonly type="text" value="012345">',
      '<div>|012^345</div>',
    '</input>',
  ],
  {dumpAs: 'flattree'},
  '6 Drag right to left from INPUT to INPUT');
</script>
chromium/third_party/blink/web_tests/editing/selection/mouse/select_across_readonly_input.html
