drag_in_unselectable.html | Explore in Territory

<!doctype html>
<head>
<style>
* { font-family: monospace; }
div {
  border: solid 2px green;
  margin: 2px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</style>
</head>
<body>
<input id="sample1" value="0123456789">
<div id="sample2" contenteditable>0123456789</div>
<div id="unselectable" style="user-select: none">0123456789</div>
<span id="metricSample">0123456789</span>
</body>
<script>
const sample1 = document.getElementById('sample1');
const sample2 = document.getElementById('sample2');
const unselectable = document.getElementById('unselectable');
const metricSample = document.getElementById('metricSample');
const selection = window.getSelection();

const borderWidth = 2;
const charWidth = metricSample.offsetWidth / metricSample.firstChild.length;
const leftButton = 0;

// To verify test script regression, we verify this test script moves mouse on
// |unselectable| element.
let didMoveMouseOnUnselectable = false;
unselectable.addEventListener('mousemove',
                              () => didMoveMouseOnUnselectable = true);

function doAction() {
  return new Promise((resolve, reject) => {
    if (window.chrome === undefined)
      return reject('required chrome.gpuBenchmarking');
    if (window.chrome.gpuBenchmarking === undefined)
      return reject('required chrome.gpuBenchmarking');

    didMoveMouseOnUnselectable = false;

    // Drag from "3" after "5" in "unselectable".
    const startX = unselectable.offsetLeft + borderWidth;
    const dragY = unselectable.offsetTop + unselectable.offsetHeight / 2;
    chrome.gpuBenchmarking.pointerActionSequence(
      [{
          source: 'mouse',
          actions: [
            {
              name: 'pointerDown',
              button: leftButton,
               x: startX + charWidth * 3,
               y: dragY,
            },
            {
              name: 'pointerMove',
               x: startX + charWidth * 6,
               y: dragY,
            },
            {name: 'pointerUp'},
          ],
      }], resolve);
  });
}

promise_test(() => {
  // Set caret before "7" in "sample1".
  sample1.focus();
  sample1.setSelectionRange(7, 7);
  return doAction().then(() => {
    assert_true(didMoveMouseOnUnselectable, 'mouse moved on unselectable');
    assert_equals(document.activeElement, document.body, 'activeElement');
    assert_equals(sample1.selectionStart, 7, 'selectionStart');
    assert_equals(sample1.selectionEnd, 7, 'selectionEnd');
  });
}, 'A drag at unselectable should not modify selection in INPUT.');

promise_test(() => {
  // Set caret before "7" in "sample2".
  sample2.focus();
  selection.collapse(sample2.firstChild, 7);
  return doAction().then(() => {
    assert_true(didMoveMouseOnUnselectable, 'mouse moved on unselectable');
    assert_equals(document.activeElement, document.body, 'activeElement');
    assert_equals(selection.anchorNode, sample2.firstChild, 'anchorNode');
    assert_equals(selection.anchorOffset, 7, 'anchorOffset');
    assert_equals(selection.focusNode, sample2.firstChild, 'focusNode');
    assert_equals(selection.focusOffset, 7, 'focusOffset');
  });
}, 'A drag at unselectable should not modify selection in contenteditable.');
</script>
</body>
chromium/third_party/blink/web_tests/editing/input/drag_in_unselectable.html
