| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| #test { width: 300px; font-size: 50px; line-height: 10px; border: solid 1px black; padding: 5px; } |
| #test span { border: solid 1px red; } |
| </style> |
| </head> |
| <body> |
| <p>This test ensures WebKit can place caret after the line even when the line-height is smaller than a line. |
| To manually test, click inside the black box outside the red box. |
| The caret should be placed at the end of "hello".</p> |
| <p>Also test that when you click in the red box above or below the black box, caret is placed at where you clicked.</p> |
| <div style="padding: 50px;"> |
| <div id="test" contenteditable><span>hello</span></div> |
| </div> |
| <div id="console"></div> |
| <script> |
| |
| var test = document.getElementById('test'); |
| var span = test.firstChild; |
| var textNode = span.firstChild; |
| |
| function clickAndVerify(title, x, y, expectedOffset) { |
| eventSender.mouseMoveTo(x, y); |
| eventSender.mouseDown(); |
| eventSender.leapForward(500); |
| eventSender.mouseUp(); |
| |
| var selection = window.getSelection(); |
| if (!selection.isCollapsed) |
| testFailed(title + ' - selection was not collapsed'); |
| else if (selection.baseNode != textNode) |
| testFailed(title + ' - baseNode was not "' + textNode.textContent + '"'); |
| else if (selection.baseOffset != expectedOffset) |
| testFailed(title + ' - caret was at ' + selection.baseOffset + ' but expected to be at ' + expectedOffset); |
| else |
| testPassed(title); |
| } |
| |
| function clickBetweenEachLetterAndVerify(y) { |
| for (var i = 0; i <= textNode.textContent.length; i++) { |
| x = span.offsetLeft + span.offsetWidth * i / 5; |
| x = Math.max(span.offsetLeft + 1, Math.min(span.offsetLeft + span.offsetWidth - 1, x)); |
| if (i == textNode.textContent.length) |
| title = 'after "' + textNode.textContent + '"'; |
| else |
| title = 'before ' + textNode.textContent.charAt(i); |
| clickAndVerify(title, x, y, i); |
| } |
| } |
| |
| if (window.testRunner && !window.eventSender) |
| testFailed('This test requires eventSender'); |
| else if (window.testRunner) { |
| testRunner.dumpAsText(); |
| clickAndVerify('Click after hello', test.offsetLeft + test.offsetWidth - 5, test.offsetTop + test.offsetHeight / 2, 5); |
| clickAndVerify('Click after hello (top)', test.offsetLeft + test.offsetWidth - 5, test.offsetTop + 1, 5); |
| clickAndVerify('Click after hello (bottom)', test.offsetLeft + test.offsetWidth - 5, test.offsetTop + test.offsetHeight - 1, 5); |
| |
| debug(''); |
| debug('Click above black box'); |
| clickBetweenEachLetterAndVerify(span.offsetTop + 1); |
| |
| debug(''); |
| debug('Click below black box'); |
| clickBetweenEachLetterAndVerify(span.offsetTop + span.offsetHeight - 5); |
| |
| test.style.display = 'none'; |
| } |
| |
| |
| </script> |
| </body> |
| </html> |
