| <!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> |
