| <!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> |
| // This test ensures Blink can place caret after the line even when the line- |
| // height is smaller than a line. |
| // |
| // To manually test, click inside the editable outside the red box. |
| // The caret should be placed at the end of "sample". |
| // |
| // Also test that when you click in the red box above or below the editable, |
| // caret is placed at where you clicked. |
| const kSample = 'abcd'; |
| const kFontSize = 30; |
| const kLineHeight = 10; |
| const kPadding = 5; |
| const kSampleWidth = kFontSize * kSample.length; |
| const kWidth = 200; |
| const kStyle = [ |
| 'border: solid 1px black;', |
| `font: ${kFontSize}px/${kLineHeight}px Ahem;`, |
| 'padding: 5px;', |
| `width: ${kWidth}px;`, |
| ].join(''); |
| const kStyle2 = [ |
| 'border: solid 1px red;', |
| ].join(''); |
| |
| function testIt(platform, title, id, x, y, expected) { |
| selection_test( |
| [ |
| `<div contenteditable id="editable" style="${kStyle}">`, |
| `<b id="sample" style="${kStyle2}">${kSample}</b>`, |
| '</div>', |
| ], |
| selection => { |
| const sample = selection.document.getElementById('sample'); |
| const target = selection.document.getElementById(id); |
| if (!window.eventSender) |
| throw 'This test requires eventSender.'; |
| const offsetX = x === 'after' |
| ? sample.offsetWidth |
| : Math.min(x, sample.offsetWidth); |
| const offsetY = { |
| 'above': 15, |
| 'below': sample.offsetHeight - 15, |
| 'top': 10, |
| 'middle': target.offsetHeight / 2, |
| 'bottom': target.offsetHeight - 5, |
| }[y]; |
| eventSender.leapForward(9999); // reset mouse click state |
| eventSender.mouseMoveTo(selection.computeLeft(target) + offsetX, |
| selection.computeTop(target) + offsetY); |
| eventSender.mouseDown(); |
| eventSender.leapForward(500); |
| eventSender.mouseUp(); |
| }, |
| [ |
| `<div contenteditable id="editable" style="${kStyle}">`, |
| `<b id="sample" style="${kStyle2}">${expected}</b>`, |
| '</div>', |
| ], |
| `${platform}: ${title}`); |
| } |
| |
| for (const platform of ['android', 'mac', 'unix', 'win']) { |
| if (window.internals) |
| internals.settings.setEditingBehavior(platform); |
| testIt(platform, 'Click after sample (top)', 'editable', |
| 'after', 'top', 'abcd|'); |
| testIt(platform, 'Click after sample (middle)', 'editable', |
| 'after', 'middle', 'abcd|'); |
| testIt(platform, 'Click after sample (bottom)', 'editable', |
| 'after', 'bottom', 'abcd|'); |
| |
| for (let i = 0; i <= kSample.length; ++i) { |
| const x = i * kFontSize; |
| const expected = `${kSample.substr(0, i)}|${kSample.substr(i)}`; |
| testIt(platform, `Click above editable at ${expected}`, 'sample', |
| x + 1, 'above', expected); |
| testIt(platform, `Click below editable at ${expected}`, 'sample', |
| x + 1, 'below', expected); |
| } |
| } |
| </script> |
