blob: d60113f5ce22ef8f2fd20f31a2f32c4217dd3eac [file] [log] [blame]
enrica@apple.com429c6e22009-12-01 00:44:30 +00001<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.com25b91e32010-01-11 18:04:58 +000023 <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:&nbsp;<span id="edit6" contenteditable="true"> </span>
26 </div>
enrica@apple.com429c6e22009-12-01 00:44:30 +000027 <ul id="console"></ul>
28</body>
29<script>
30function 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
37function 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
45function 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.com2cc2c042014-05-14 23:13:52 +000058 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.com429c6e22009-12-01 00:44:30 +000060 if (anchorCorrect)
61 log(anchorString + " is correct.");
62 else
63 log(anchorString + " is incorrect.");
64}
65
66function automaticTest() {
rniwa@webkit.org14f6b5b2012-06-13 08:51:53 +000067 if (window.testRunner) {
68 window.testRunner.dumpAsText();
enrica@apple.com429c6e22009-12-01 00:44:30 +000069
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.com25b91e32010-01-11 18:04:58 +0000105
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.com429c6e22009-12-01 00:44:30 +0000111 }
112}
113
114automaticTest();
115</script>
116</html>