|
1 <!DOCTYPE HTML> |
|
2 <html> |
|
3 <head> |
|
4 <title>nsIDOMWindowUtils::sendQueryContentEvent w/QUERY_CARET_RECT test</title> |
|
5 <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> |
|
6 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> |
|
7 |
|
8 <!-- |
|
9 ######################################################### |
|
10 # WARNING: this file has Windows line endings. If you |
|
11 # update this file please maintain them. Line endings are |
|
12 # taken into account when calculating query caret rect |
|
13 # values. |
|
14 ######################################################### |
|
15 --> |
|
16 |
|
17 <style> |
|
18 #text { |
|
19 position: absolute; |
|
20 left: 0em; |
|
21 top: 0em; |
|
22 font-size: 10pt; |
|
23 font-family: monospace; |
|
24 line-height: 20px; |
|
25 letter-spacing: 0px; |
|
26 margin-top:-1px; /* nix the text area border */ |
|
27 overflow: hidden; |
|
28 width:800px; |
|
29 height:400px; |
|
30 } |
|
31 #div-hor { |
|
32 position: absolute; |
|
33 left: 0em; |
|
34 border-top:1px solid lightgray; |
|
35 width: 1000px; |
|
36 pointer-events:none; |
|
37 } |
|
38 #div-ver { |
|
39 position: absolute; |
|
40 top: 0em; |
|
41 border-left:1px solid lightgray; |
|
42 height: 500px; |
|
43 pointer-events:none; |
|
44 } |
|
45 </style> |
|
46 |
|
47 <script type="application/javascript;version=1.8"> |
|
48 let SimpleTest = window.opener.SimpleTest; |
|
49 let Ci = Components.interfaces; |
|
50 |
|
51 function ok() { window.opener.ok.apply(window.opener, arguments); } |
|
52 function done() { window.opener.done.apply(window.opener, arguments); } |
|
53 |
|
54 function dumpLn() { |
|
55 for (let idx = 0; idx < arguments.length; idx++) |
|
56 dump(arguments[idx] + " "); |
|
57 dump("\n"); |
|
58 } |
|
59 |
|
60 // drawn grid is 20x20 |
|
61 function drawGrid() { |
|
62 for (var idx = 0; idx < 20; idx++) { |
|
63 var e = document.createElement("div"); |
|
64 e.setAttribute("id", "div-hor"); |
|
65 e.style.top = (idx*20) + "px"; |
|
66 document.getElementById("container").appendChild(e); |
|
67 } |
|
68 for (var idx = 0; idx < 40; idx++) { |
|
69 var e = document.createElement("div"); |
|
70 e.setAttribute("id", "div-ver"); |
|
71 e.style.left = (idx*20) + "px"; |
|
72 document.getElementById("container").appendChild(e); |
|
73 } |
|
74 } |
|
75 |
|
76 function getSelection(aElement) { |
|
77 if (aElement instanceof Ci.nsIDOMNSEditableElement) { |
|
78 return aElement.QueryInterface(Ci.nsIDOMNSEditableElement) |
|
79 .editor.selection; |
|
80 } |
|
81 return null; |
|
82 } |
|
83 |
|
84 function testCaretPosition(aDomWinUtils, aOffset, aRectDims) { |
|
85 let rect = aDomWinUtils.sendQueryContentEvent( |
|
86 aDomWinUtils.QUERY_CARET_RECT, |
|
87 aOffset, 0, 0, 0, |
|
88 aDomWinUtils.QUERY_CONTENT_FLAG_USE_XP_LINE_BREAK); |
|
89 ok(rect, "rect returned"); |
|
90 ok(rect.succeeded, "call succeeded"); |
|
91 |
|
92 info("left:" + rect.left + " top:" + rect.top); |
|
93 |
|
94 ok(rect.left > aRectDims.min.left, "rect.left > " + aRectDims.min.left); |
|
95 ok(rect.left < aRectDims.max.left, "rect.left < " + aRectDims.max.left); |
|
96 ok(rect.top > aRectDims.min.top, "rect.top > " + aRectDims.min.top); |
|
97 ok(rect.top < aRectDims.max.top, "rect.top < " + aRectDims.max.top); |
|
98 } |
|
99 |
|
100 function doTest() { |
|
101 let domWinUtils = window.QueryInterface(Ci.nsIInterfaceRequestor) |
|
102 .getInterface(Ci.nsIDOMWindowUtils); |
|
103 |
|
104 let text = document.getElementById("text"); |
|
105 |
|
106 text.focus(); |
|
107 |
|
108 let textrect = text.getBoundingClientRect(); |
|
109 |
|
110 let cp = document.caretPositionFromPoint(10, 395); |
|
111 let input = cp.offsetNode; |
|
112 let offset = cp.offset; |
|
113 input.selectionStart = input.selectionEnd = offset; |
|
114 |
|
115 let selection = getSelection(text); |
|
116 |
|
117 testCaretPosition(domWinUtils, input.selectionStart, { |
|
118 min: { left: 10, top: 380 }, |
|
119 max: { left: 25, top: 390 }, |
|
120 }); |
|
121 |
|
122 testCaretPosition(domWinUtils, input.selectionEnd, { |
|
123 min: { left: 10, top: 380 }, |
|
124 max: { left: 25, top: 390 }, |
|
125 }); |
|
126 |
|
127 testCaretPosition(domWinUtils, text.selectionStart, { |
|
128 min: { left: 10, top: 380 }, |
|
129 max: { left: 25, top: 390 }, |
|
130 }); |
|
131 |
|
132 testCaretPosition(domWinUtils, text.selectionEnd, { |
|
133 min: { left: 10, top: 380 }, |
|
134 max: { left: 25, top: 390 }, |
|
135 }); |
|
136 |
|
137 testCaretPosition(domWinUtils, selection.anchorOffset, { |
|
138 min: { left: 10, top: 380 }, |
|
139 max: { left: 25, top: 390 }, |
|
140 }); |
|
141 |
|
142 testCaretPosition(domWinUtils, selection.focusOffset, { |
|
143 min: { left: 10, top: 380 }, |
|
144 max: { left: 25, top: 390 }, |
|
145 }); |
|
146 |
|
147 cp = document.caretPositionFromPoint(395, 395); |
|
148 input = cp.offsetNode; |
|
149 offset = cp.offset; |
|
150 input.selectionStart = input.selectionEnd = offset; |
|
151 |
|
152 let selection = getSelection(text); |
|
153 |
|
154 testCaretPosition(domWinUtils, input.selectionStart, { |
|
155 min: { left: 390, top: 380 }, |
|
156 max: { left: 400, top: 390 }, |
|
157 }); |
|
158 |
|
159 testCaretPosition(domWinUtils, input.selectionEnd, { |
|
160 min: { left: 390, top: 380 }, |
|
161 max: { left: 400, top: 390 }, |
|
162 }); |
|
163 |
|
164 testCaretPosition(domWinUtils, text.selectionStart, { |
|
165 min: { left: 390, top: 380 }, |
|
166 max: { left: 400, top: 390 }, |
|
167 }); |
|
168 |
|
169 testCaretPosition(domWinUtils, text.selectionEnd, { |
|
170 min: { left: 390, top: 380 }, |
|
171 max: { left: 400, top: 390 }, |
|
172 }); |
|
173 |
|
174 testCaretPosition(domWinUtils, selection.anchorOffset, { |
|
175 min: { left: 390, top: 380 }, |
|
176 max: { left: 400, top: 390 }, |
|
177 }); |
|
178 |
|
179 testCaretPosition(domWinUtils, selection.focusOffset, { |
|
180 min: { left: 390, top: 380 }, |
|
181 max: { left: 400, top: 390 }, |
|
182 }); |
|
183 |
|
184 done(); |
|
185 } |
|
186 |
|
187 </script> |
|
188 |
|
189 <body onload="doTest()"> |
|
190 <textarea id="text" wrap="on"> |
|
191 Alice was beginning to get very tired of sitting by her sister on the bank, |
|
192 and of having nothing to do: once or twice she had peeped into the book |
|
193 her sister was reading, but it had no pictures or conversations in it, |
|
194 `and what is the use of a book,' thought Alice `without pictures or |
|
195 conversation?' |
|
196 |
|
197 So she was considering in her own mind (as well as she could, for the |
|
198 hot day made her feel very sleepy and stupid), whether the pleasure of |
|
199 making a daisy-chain would be worth the trouble of getting up and |
|
200 picking the daisies, when suddenly a White Rabbit with pink In another |
|
201 moment down went Alice after it, never once considering how in the world |
|
202 she was to get out again. |
|
203 |
|
204 The rabbit-hole went straight on like a tunnel for some way, and then |
|
205 dipped suddenly down, so suddenly that Alice had not a moment to think |
|
206 about stopping herself before she found herself falling down a very deep |
|
207 well. |
|
208 |
|
209 Either the well was very deep, or she fell very slowly, for she had |
|
210 plenty of time as she went down to look about her and to wonder what was |
|
211 going to happen next. First, she tried to look down and make out what |
|
212 she was coming to, but it was too dark to see anything; then she looked |
|
213 at the sides of the well, and noticed that they were filled with |
|
214 cupboards and book-shelves; here and there she saw maps and pictures |
|
215 hung upon pegs. She took down a jar from one of the shelves as she |
|
216 passed; it was labelled `ORANGE MARMALADE', but to her great |
|
217 disappointment it was empty: she did not like to drop the jar for fear |
|
218 of killing somebody, so managed to put it into one of the cupboards as |
|
219 she fell past it. |
|
220 </textarea> |
|
221 <div id="container"></div> |
|
222 </body> |
|
223 </html> |