|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <!-- |
|
4 https://bugzilla.mozilla.org/show_bug.cgi?id=199692 |
|
5 --> |
|
6 <head> |
|
7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
8 <title>Popup in test for Bug 199692</title> |
|
9 <style type="text/css"> |
|
10 #content * { |
|
11 border: 2px solid black; |
|
12 margin: 2px; |
|
13 clear: both; |
|
14 height: 20px; |
|
15 overflow: hidden; |
|
16 } |
|
17 |
|
18 #txt, #static, #fixed, #absolute, #relative, #hidden, #float, #empty, #static, #relative { |
|
19 width: 200px !important; |
|
20 } |
|
21 </style> |
|
22 |
|
23 </head> |
|
24 <!-- |
|
25 Elements are styled in such a way that they don't overlap visually |
|
26 unless they also overlap structurally. |
|
27 |
|
28 This file is designed to be opened from test_bug199692.html in a popup |
|
29 window, to guarantee that the window in which document.elementFromPoint runs |
|
30 is large enough to display all the elements being tested. |
|
31 --> |
|
32 <body> |
|
33 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=199692">Mozilla Bug 199692</a> |
|
34 |
|
35 <div id="content" style="width: 500px; background-color: #ccc;"> |
|
36 |
|
37 <!-- element containing text --> |
|
38 <div id="txt" style="height: 30px;">txt</div> |
|
39 |
|
40 <!-- element not containing text --> |
|
41 <div id="empty" style="border: 2px solid blue;"></div> |
|
42 |
|
43 <!-- element with only whitespace --> |
|
44 <p id="whitespace" style="border: 2px solid magenta;"> </p> |
|
45 |
|
46 <!-- position: static --> |
|
47 <span id="static" style="position: static; border-color: green;">static</span> |
|
48 |
|
49 <!-- floated element --> |
|
50 <div id="float" style="border-color: red; float: right;">float</div> |
|
51 |
|
52 <!-- position: fixed --> |
|
53 <span id="fixed" style="position: fixed; top: 500px; left: 100px; border: 3px solid yellow;">fixed</span> |
|
54 |
|
55 <!-- position: absolute --> |
|
56 <span id="absolute" style="position: absolute; top: 550px; left: 150px; border-color: orange;">abs</span> |
|
57 |
|
58 <!-- position: relative --> |
|
59 <div id="relative" style="position: relative; top: 200px; border-color: teal;">rel</div> |
|
60 |
|
61 <!-- visibility: hidden --> |
|
62 <div id="hidden-wrapper" style="border: 1px dashed teal;"> |
|
63 <div id="hidden" style="opacity: 0.5; background-color: blue; visibility:hidden;">hidden</div> |
|
64 </div> |
|
65 |
|
66 <!-- iframe (within iframe) --> |
|
67 <iframe id="our-iframe" src="bug199692-nested.html" style="height: 100px; overflow: scroll;"></iframe> |
|
68 |
|
69 <input type="textbox" id="textbox" value="textbox"></input> |
|
70 </div> |
|
71 |
|
72 <!-- interaction with scrolling --> |
|
73 <iframe id="scrolled-iframe" |
|
74 src="bug199692-scrolled.html#down" |
|
75 style="position: absolute; top: 345px; left: 325px; height: 200px; width: 200px"></iframe> |
|
76 |
|
77 <script type="application/javascript"> |
|
78 |
|
79 var SimpleTest = window.opener.SimpleTest; |
|
80 function ok() { window.opener.ok.apply(window.opener, arguments); } |
|
81 function is() { window.opener.is.apply(window.opener, arguments); } |
|
82 function todo() { window.opener.todo.apply(window.opener, arguments); } |
|
83 function todo_is() { window.opener.todo_is.apply(window.opener, arguments); } |
|
84 function $(id) { return document.getElementById(id); } |
|
85 |
|
86 /** |
|
87 * Like is, but for tests which don't always succeed or always fail on all |
|
88 * platforms. |
|
89 */ |
|
90 function random_fail(a, b, m) |
|
91 { |
|
92 if (a != b) |
|
93 todo_is(a, b, m); |
|
94 else |
|
95 is(a, b, m); |
|
96 } |
|
97 |
|
98 /* Test for Bug 199692 */ |
|
99 |
|
100 function getCoords(elt) |
|
101 { |
|
102 var x = 0, y = 0; |
|
103 |
|
104 do |
|
105 { |
|
106 x += elt.offsetLeft; |
|
107 y += elt.offsetTop; |
|
108 } while ((elt = elt.offsetParent)); |
|
109 |
|
110 return { x: x, y: y }; |
|
111 } |
|
112 |
|
113 var elts = ["txt", "empty", "whitespace", "static", "fixed", "absolute", |
|
114 "relative", "float", "textbox"]; |
|
115 |
|
116 function testPoints() |
|
117 { |
|
118 ok('elementFromPoint' in document, "document.elementFromPoint must exist"); |
|
119 ok(typeof document.elementFromPoint === "function", "must be a function"); |
|
120 |
|
121 var doc = document; |
|
122 doc.pt = doc.elementFromPoint; // for shorter lines |
|
123 is(doc.pt(-1, 0), null, "Negative coordinates (-1, 0) should return null"); |
|
124 is(doc.pt(0, -1), null, "Negative coordinates (0, -1) should return null"); |
|
125 is(doc.pt(-1, -1), null, "Negative coordinates (-1, -1) should return null"); |
|
126 |
|
127 var pos; |
|
128 for (var i = 0; i < elts.length; i++) |
|
129 { |
|
130 var id = elts[i]; |
|
131 var elt = $(id); |
|
132 |
|
133 // The upper left corner of an element (with a moderate offset) will |
|
134 // usually contain text, and the lower right corner usually won't. |
|
135 var pos = getCoords(elt); |
|
136 var x = pos.x, y = pos.y; |
|
137 var w = elt.offsetWidth, h = elt.offsetHeight; |
|
138 |
|
139 var d = 5; |
|
140 is(doc.pt(x + d, y + d), elt, |
|
141 "(" + (x + d) + "," + (y + d) + ") IDs should match (upper left " + |
|
142 "corner of " + id + ")"); |
|
143 is(doc.pt(x + w - d, y + h - d), elt, |
|
144 "(" + (x + w - d) + "," + (y + h - d) + ") IDs should match (lower " + |
|
145 "right corner of " + id + ")"); |
|
146 } |
|
147 |
|
148 // content |
|
149 var c = $("content"); |
|
150 pos = getCoords(c); |
|
151 x = pos.x + c.offsetWidth / 2; |
|
152 y = pos.y; |
|
153 |
|
154 // This fails on some platforms but not others for unknown reasons |
|
155 random_fail(doc.pt(x, y), c, "Point to right of #txt should be #content"); |
|
156 is(doc.pt(x, y + 1), c, "Point to right of #txt should be #content"); |
|
157 random_fail(doc.pt(x + 1, y), c, "Point to right of #txt should be #content"); |
|
158 is(doc.pt(x + 1, y + 1), c, "Point to right of #txt should be #content"); |
|
159 |
|
160 // hidden |
|
161 c = $("hidden"); |
|
162 pos = getCoords(c); |
|
163 x = pos.x, y = pos.y; |
|
164 is(doc.pt(x, y), $("hidden-wrapper"), |
|
165 "Hit testing should bypass hidden elements."); |
|
166 |
|
167 // iframe nested |
|
168 var iframe = $("our-iframe"); |
|
169 pos = getCoords(iframe); |
|
170 x = pos.x, y = pos.y; |
|
171 is(doc.pt(x + 20, y + 20), $("our-iframe"), |
|
172 "Element from nested iframe returned is from calling document"); |
|
173 // iframe, doubly nested |
|
174 is(doc.pt(x + 60, y + 60), $("our-iframe"), |
|
175 "Element from doubly nested iframe returned is from calling document"); |
|
176 |
|
177 // scrolled iframe tests |
|
178 $("scrolled-iframe").contentWindow.runTests(); |
|
179 |
|
180 SimpleTest.finish(); |
|
181 window.close(); |
|
182 } |
|
183 |
|
184 window.onload = testPoints; |
|
185 </script> |
|
186 </body> |
|
187 </html> |
|
188 |