Missing cursor/caret showing in search field on google.com
[WebKit-https.git] / LayoutTests / editing / selection / mixed-editability-10.html
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>
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:&nbsp;<span id="edit6" contenteditable="true"> </span>
26   </div>
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();
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);
60     if (anchorCorrect)
61         log(anchorString + " is correct.");
62     else
63         log(anchorString + " is incorrect.");
64 }
65
66 function automaticTest() {
67     if (window.testRunner) {   
68         window.testRunner.dumpAsText();
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);
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);
111     }
112 }
113
114 automaticTest();
115 </script>
116 </html>