click-before-and-after-table.html | Explore in Territory

<!doctype html>
<script src="../../resources/ahem.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
const kStyle = 'margin: 25px; border:20px solid #ccc; padding: 10px;';
const kSample = [
    '<div contenteditable>',
        `<table id="target" style="${kStyle}"><tbody><tr>`,
            '<td>ABC</td><td>XYZ</td>',
        '</tr></tbody></table>',
    '</div>',
].join('');

function click(x, y) {
    if (!window.eventSender)
        throw 'This test requires eventSender.';
    eventSender.leapForward(9999); // reset muose button state.
    eventSender.mouseMoveTo(x, y);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

function getPoints(selection) {
  const target = selection.document.getElementById('target');
  const left = selection.computeLeft(target);
  const top = selection.computeTop(target);

  return {
    top: top,
    left: left,
    bottom: top + target.offsetHeight,
    right: left + target.offsetWidth,
    middle: top + target.offsetHeight / 2,
  }
}

selection_test(
    kSample,
    selection => {
      const rect = getPoints(selection);
      click(rect.right + 5, rect.middle);
    },
    [
        '<div contenteditable>',
            `<table id="target" style="${kStyle}"><tbody><tr>`,
                '<td>ABC</td><td>XYZ</td>',
            '</tr></tbody></table>|',
        '</div>',
    ],
    'Click the after table');

selection_test(
    kSample,
    selection => {
      const rect = getPoints(selection);
      click(rect.right - 5, rect.middle);
    },
    [
        '<div contenteditable>',
            `<table id="target" style="${kStyle}"><tbody><tr>`,
                '<td>ABC</td><td>XYZ|</td>',
            '</tr></tbody></table>',
        '</div>',
    ],
    'Click inside of right side border of the table');

selection_test(
    kSample,
    selection => {
      const rect = getPoints(selection);
      click(rect.left - 5, rect.middle);
    },
    [
        '<div contenteditable>',
            `|<table id="target" style="${kStyle}"><tbody><tr>`,
                '<td>ABC</td><td>XYZ</td>',
            '</tr></tbody></table>',
        '</div>',
    ],
    'Click before the table');

selection_test(
    kSample,
    selection => {
      const rect = getPoints(selection);
      click(rect.left + 5, rect.middle);
    },
    [
        '<div contenteditable>',
            `<table id="target" style="${kStyle}"><tbody><tr>`,
                '<td>|ABC</td><td>XYZ</td>',
            '</tr></tbody></table>',
        '</div>',
    ],
    'Click inside of left side border of the table');
</script>
chromium/third_party/blink/web_tests/editing/selection/click-before-and-after-table.html
