mixed-editability-10.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>
function clickAt(x, y) {
  if (!window.eventSender)
    assert_not_reached('This test requires eventSender.');
  eventSender.mouseMoveTo(x, y);
  eventSender.mouseDown();
  eventSender.mouseUp();
}

function clickLeft(selection, elmID) {
  const elm = selection.document.getElementById(elmID);
  const x = selection.computeLeft(elm);
  const y = selection.computeTop(elm) + elm.offsetHeight / 2;
  clickAt(x, y);
}

function clickRight(selection, elmID) {
  const elm = selection.document.getElementById(elmID);
  const x = selection.computeLeft(elm) + elm.offsetWidth - 1;
  const y = selection.computeTop(elm) + elm.offsetHeight / 2;
  clickAt(x, y);
}

function clickCenter(selection, elmID) {
  const elm = selection.document.getElementById(elmID);
  const x = selection.computeLeft(elm) + elm.offsetWidth / 2;
  const y = selection.computeTop(elm) + elm.offsetHeight / 2;
  clickAt(x, y);
}

selection_test(
  [ '<div contenteditable id="test" style="width:100px;text-align: center;">',
      '<span contenteditable="false">Hello</span>',
    '</div>'],
  selection => clickLeft(selection, 'test'),
  [ '<div contenteditable id="test" style="width:100px;text-align: center;">',
      '|<span contenteditable="false">Hello</span>',
    '</div>'],
  'Click left of contenteditable align center'
);

selection_test(
  [ '<div contenteditable id="test" style="width:100px;text-align: center;">',
      '<span contenteditable="false">Hello</span>',
    '</div>'],
  selection => clickCenter(selection, 'test'),
  [ '<div contenteditable id="test" style="width:100px;text-align: center;">',
      '<span contenteditable="false">He|llo</span>',
    '</div>'],
  'Click inside of contenteditable=false'
);

selection_test(
  [ '<div contenteditable id="test" style="width:100px;text-align: center;">',
      '<span contenteditable="false">Hello</span>',
    '</div>'],
  selection => clickRight(selection, 'test'),
  [ '<div contenteditable id="test" style="width:100px;text-align: center;">',
      '<span contenteditable="false">Hello</span>|',
    '</div>'],
  'Click right of contenteditable'
);

selection_test(
  [ '<div contenteditable id="test" style="width:100px;text-align: left;">',
      '<span contenteditable="false">Hello</span>',
    '</div>'],
  selection => clickLeft(selection, 'test'),
  [ '<div contenteditable id="test" style="width:100px;text-align: left;">',
      '|<span contenteditable="false">Hello</span>',
    '</div>'],
  'Click left of contenteditable align left'
);

selection_test(
  [ '<div contenteditable id="test" style="width:100px;text-align: left;">',
      '<span contenteditable="false">Hello</span>',
    '</div>'],
  selection => clickRight(selection, 'test'),
  [ '<div contenteditable id="test" style="width:100px;text-align: left;">',
      '<span contenteditable="false">Hello</span>|',
    '</div>'],
  'Click right of contenteditable align left'
);

selection_test(
  [ '<div contenteditable id="test" style="width:100px;text-align: right;">',
      '<span contenteditable="false">Hello</span>',
    '</div>'],
  selection => clickLeft(selection, 'test'),
  [ '<div contenteditable id="test" style="width:100px;text-align: right;">',
      '|<span contenteditable="false">Hello</span>',
    '</div>'],
  'Click left of contenteditable align right'
);

selection_test(
  [ '<div contenteditable id="test" style="width:100px;text-align: right;">',
      '<span contenteditable="false">Hello</span>',
    '</div>'],
  selection => clickRight(selection, 'test'),
  [ '<div contenteditable id="test" style="width:100px;text-align: right;">',
      '<span contenteditable="false">Hello</span>|',
    '</div>'],
  'Click right of contenteditable align right'
);

selection_test(
  [ '<div contenteditable style="width:100px;">',
       '<span contenteditable="false">Hello </span>',
       '<span contenteditable="false" id="test">World</span>',
    '</div>'],
  selection => clickLeft(selection, 'test'),
  [ '<div contenteditable style="width:100px;">',
       '<span contenteditable="false">Hello </span>',
       '|<span contenteditable="false" id="test">World</span>',
    '</div>'],
  'Click left of contenteditable=false following contenteditable=false'
);

selection_test(
  [ '<div contenteditable id="test" style="width:100px;text-align: center;">',
    '</div>'],
  selection => clickCenter(selection, 'test'),
  [ '<div contenteditable id="test" style="width:100px;text-align: center;">',
      '|',
    '</div>'],
  'Click inside of empty contenteditable'
);

selection_test(
  [ '<div style="width:100px;">',
      'Hello<span contenteditable id="test"> </span>',
    '</div>'],
  selection => clickCenter(selection, 'test'),
  [ '<div style="width:100px;">',
      'Hello<span contenteditable id="test">| </span>',
    '</div>'],
  'Click inside of inner empty contenteditable'
);
</script>
chromium/third_party/blink/web_tests/editing/selection/mixed-editability-10.html
