enrica@apple.com | 429c6e2 | 2009-12-01 00:44:30 +0000 | [diff] [blame] | 1 | <html> |
| 2 | <head> |
| 3 | <title>This tests the ability to place the caret in an editable div that contains only non editable content</title> |
| 4 | </head> |
| 5 | <body> |
| 6 | <p>#1 DIV element with a non-editable element only <span style="color:red">align center</span>:</p> |
| 7 | <div style="width:100px;background-color:#cee;text-align: center;" contenteditable="true" id="edit1"> |
| 8 | <span contenteditable="false" id="nonedit1">Hello</span> |
| 9 | </div> |
| 10 | <p>#2 DIV element with a non-editable element only <span style="color:red">align left</span>:</p> |
| 11 | <div style="width:100px;background-color:#cee;" contenteditable="true" id="edit2"><span contenteditable="false" id="nonedit2">Hello</span></div> |
| 12 | <p>#3 DIV element with a non-editable element only <span style="color:red">align right</span>:</p> |
| 13 | <div style="width:100px;background-color:#cee;text-align: right;" contenteditable="true" id="edit3"> |
| 14 | <span contenteditable="false" id="nonedit3">Hello</span></div> |
| 15 | <p>#4 DIV element with two non-editable element<span style="color:red">with padding</span>:</p> |
| 16 | <div style="width:200px;background-color:#cee;" contenteditable="true" id="edit4"> |
| 17 | <span contenteditable="false">Hello </span> |
| 18 | <span contenteditable="false" id="nonedit4">World</span> |
| 19 | </div> |
| 20 | <p>#5 DIV element empty</p> |
| 21 | <div style="width:100px;background-color:#cee;text-align: center;" contenteditable="true" id="edit5"> |
| 22 | </div> |
enrica@apple.com | 25b91e3 | 2010-01-11 18:04:58 +0000 | [diff] [blame] | 23 | <p>#6 non editable DIV element with an editable empty span element</p> |
| 24 | <div id="nonedit6" style="width:100px;background-color:#cee;"> |
| 25 | Hello: <span id="edit6" contenteditable="true"> </span> |
| 26 | </div> |
enrica@apple.com | 429c6e2 | 2009-12-01 00:44:30 +0000 | [diff] [blame] | 27 | <ul id="console"></ul> |
| 28 | </body> |
| 29 | <script> |
| 30 | function log(str) { |
| 31 | var li = document.createElement("li"); |
| 32 | li.appendChild(document.createTextNode(str)); |
| 33 | var console = document.getElementById("console"); |
| 34 | console.appendChild(li); |
| 35 | } |
| 36 | |
| 37 | function caretCoordinates() |
| 38 | { |
| 39 | if (!window.textInputController) |
| 40 | return { x: 0, y :0 }; |
| 41 | var caretRect = textInputController.firstRectForCharacterRange(textInputController.selectedRange()[0], 0); |
| 42 | return { x: caretRect[0], y: caretRect[1] }; |
| 43 | } |
| 44 | |
| 45 | function runTest(x, y, elem, offset, refpos) { |
| 46 | eventSender.mouseMoveTo(x, y); |
| 47 | eventSender.mouseDown(); |
| 48 | eventSender.mouseUp(); |
| 49 | eventSender.mouseDown(); |
| 50 | eventSender.mouseUp(); |
| 51 | |
| 52 | var selection = window.getSelection(); |
| 53 | |
| 54 | var anchorNode = selection.anchorNode; |
| 55 | var anchorOffset = selection.anchorOffset; |
| 56 | |
| 57 | var coord = caretCoordinates(); |
zalan@apple.com | 2cc2c04 | 2014-05-14 23:13:52 +0000 | [diff] [blame] | 58 | var anchorString = "Anchor (" + anchorNode + ", " + anchorOffset + " caret[" + coord.x + "," + coord.y + "] refpos=" + Math.round(refpos) + ")"; |
| 59 | var anchorCorrect = anchorNode == elem && anchorOffset == offset && coord.x == Math.round(refpos); |
enrica@apple.com | 429c6e2 | 2009-12-01 00:44:30 +0000 | [diff] [blame] | 60 | if (anchorCorrect) |
| 61 | log(anchorString + " is correct."); |
| 62 | else |
| 63 | log(anchorString + " is incorrect."); |
| 64 | } |
| 65 | |
| 66 | function automaticTest() { |
rniwa@webkit.org | 14f6b5b | 2012-06-13 08:51:53 +0000 | [diff] [blame] | 67 | if (window.testRunner) { |
| 68 | window.testRunner.dumpAsText(); |
enrica@apple.com | 429c6e2 | 2009-12-01 00:44:30 +0000 | [diff] [blame] | 69 | |
| 70 | var elem; |
| 71 | |
| 72 | // the div has text-alignment center |
| 73 | elem = document.getElementById("edit1"); |
| 74 | x = elem.offsetLeft + 10; |
| 75 | y = elem.offsetTop + elem.offsetHeight / 2; |
| 76 | runTest(x, y, elem, 0, document.getElementById("nonedit1").offsetLeft); |
| 77 | x = elem.offsetLeft + elem.offsetWidth - 10; |
| 78 | runTest(x, y, elem, 3, document.getElementById("nonedit1").offsetLeft + document.getElementById("nonedit1").offsetWidth); |
| 79 | |
| 80 | // the div has text-alignment left |
| 81 | elem = document.getElementById("edit2"); |
| 82 | x = elem.offsetLeft + elem.offsetWidth - 10; |
| 83 | y = elem.offsetTop + elem.offsetHeight / 2; |
| 84 | runTest(x, y, elem, 1, document.getElementById("nonedit2").offsetLeft + document.getElementById("nonedit2").offsetWidth); |
| 85 | x = elem.offsetLeft; |
| 86 | runTest(x, y, elem, 0, document.getElementById("nonedit2").offsetLeft); |
| 87 | |
| 88 | // the div has text-alignment right |
| 89 | elem = document.getElementById("edit3"); |
| 90 | x = elem.offsetLeft + 10; |
| 91 | y = elem.offsetTop + elem.offsetHeight / 2; |
| 92 | runTest(x, y, elem, 0, document.getElementById("nonedit3").offsetLeft); |
| 93 | |
| 94 | // the div contains 2 non editable span |
| 95 | elem = document.getElementById("edit4"); |
| 96 | x = document.getElementById("nonedit4").offsetLeft; |
| 97 | y = elem.offsetTop + elem.offsetHeight / 2; |
| 98 | runTest(x, y, elem, 3, document.getElementById("nonedit4").offsetLeft); |
| 99 | |
| 100 | // the div is empty |
| 101 | elem = document.getElementById("edit5"); |
| 102 | x = elem.offsetLeft; |
| 103 | y = elem.offsetTop + elem.offsetHeight / 2; |
| 104 | runTest(x, y, elem, 0, (elem.offsetLeft + elem.offsetWidth)/2 + 4); |
enrica@apple.com | 25b91e3 | 2010-01-11 18:04:58 +0000 | [diff] [blame] | 105 | |
| 106 | // the div is non editable and contains an empty editable span |
| 107 | elem = document.getElementById("edit6"); |
| 108 | x = document.getElementById("nonedit6").offsetLeft + document.getElementById("nonedit6").offsetWidth / 2; |
| 109 | y = document.getElementById("nonedit6").offsetTop + document.getElementById("nonedit6").offsetHeight / 2; |
| 110 | runTest(x, y, elem, 0, 0); |
enrica@apple.com | 429c6e2 | 2009-12-01 00:44:30 +0000 | [diff] [blame] | 111 | } |
| 112 | } |
| 113 | |
| 114 | automaticTest(); |
| 115 | </script> |
| 116 | </html> |