| <!DOCTYPE html> |
| <html> |
| <body> |
| <p> |
| This tests that clicking in a contenteditable div will set the caret in the right position for LTR/RTL text in a RTL/LTR block. |
| </p> |
| <dl> |
| <dt>Clicking the first letter of RTL text in a LTR block</dt> |
| <dd><div id="rtl-in-ltr-first" style="font-size: 70px; width: 20ex; border: solid thin black; padding: 10px;" contenteditable>שדה בור</div></dd> |
| <dt>Clicking the last letter of RTL text in a LTR block</dt> |
| <dd><div id="rtl-in-ltr-last" style="font-size: 70px; width: 20ex; border: solid thin black; padding: 10px;" contenteditable>שדה בור</div></dd> |
| <dt>Clicking the first letter of LTR text in a RTL block</dt> |
| <dd><div id="ltr-in-rtl-first" style="direction: rtl; font-size: 70px; width: 20ex; border: solid thin black; padding: 10px;" contenteditable>WebKitW</div></dd> |
| <dt>Clicking the last letter of LTR text in a RTL block</dt> |
| <dd><div id="ltr-in-rtl-last" style="direction: rtl; font-size: 70px; width: 20ex; border: solid thin black; padding: 10px;" contenteditable>WebKitW</div></dd> |
| </dl> |
| <script src="resources/caret-edge-shared.js"></script> |
| <script> |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function runTest(div, clickOn, expectedOffset) { |
| var elementToCalulateTextWidth = document.createElement('span'); |
| elementToCalulateTextWidth.appendChild(div.firstChild.cloneNode()); |
| document.body.appendChild(elementToCalulateTextWidth); |
| elementToCalulateTextWidth.style.fontSize = '70px'; |
| |
| var inRTLBlock = div.style.direction == 'rtl'; |
| var x = 20; |
| if ((!inRTLBlock && clickOn == 'last') || (inRTLBlock && clickOn == 'first')) |
| x = elementToCalulateTextWidth.offsetWidth; |
| if (inRTLBlock) |
| x = div.offsetWidth - x; |
| |
| document.body.removeChild(elementToCalulateTextWidth); |
| |
| var verify = function() { |
| if (!window.getSelection().isCollapsed) |
| return log(div, 'FAIL: selection not collapsed'); |
| |
| var range = window.getSelection().getRangeAt(0); |
| if (range.startContainer != div.firstChild) |
| return log(div, 'FAIL: wrong container'); |
| if (range.startOffset != expectedOffset) |
| return log(div, 'FAIL: wrong offset ' + range.startOffset + ', expected ' + expectedOffset); |
| |
| return log(div, 'PASS'); |
| } |
| |
| if (!window.testRunner) { |
| div.addEventListener('mouseup', verify); |
| return; |
| } |
| |
| eventSender.mouseMoveTo(div.offsetLeft + x, div.offsetTop + div.offsetHeight / 2); |
| eventSender.leapForward(200); |
| eventSender.mouseDown(); |
| eventSender.leapForward(200); |
| eventSender.mouseUp(); |
| verify({target: div}); |
| } |
| |
| function log(div, message) { |
| div.innerHTML = message; |
| } |
| |
| runTest(document.getElementById('rtl-in-ltr-first'), 'first', 0); |
| runTest(document.getElementById('rtl-in-ltr-last'), 'last', 7); |
| runTest(document.getElementById('ltr-in-rtl-first'), 'first', 7); |
| runTest(document.getElementById('ltr-in-rtl-last'), 'last', 0); |
| |
| </script> |
| </body> |
| </html> |
