OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 /* Make sure the console and the description don't interfere with th
e rest of the layout. */ | |
6 #description { | |
7 position: absolute; | |
8 top: 0px; | |
9 } | |
10 | |
11 #console { | |
12 position: absolute; | |
13 top: 100px; | |
14 } | |
15 | |
16 #grandparent, #parent2 { | |
17 width: 200px; | |
18 height: 200px; | |
19 background-color: lightblue; | |
20 border: 2px solid blue; | |
21 } | |
22 | |
23 #parent2 { | |
24 background-color: yellow; | |
25 } | |
26 | |
27 #parent { | |
28 width: 150px; height: 150px; | |
29 -webkit-flow-into: flow; | |
30 background-color: orange; | |
31 } | |
32 | |
33 #child { | |
34 width: 100px; | |
35 height: 100px; | |
36 background-color: red; | |
37 border: 2px solid blue; | |
38 } | |
39 | |
40 #region { | |
41 width: 200px; | |
42 height: 200px; | |
43 -webkit-flow-from: flow; | |
44 border: 2px solid lime; | |
45 position: relative; | |
46 left: 250px; | |
47 top: -300px; | |
48 } | |
49 | |
50 #spanBefore, #spanAfter, #spanAway { | |
51 -webkit-flow-into: flow; | |
52 background-color: salmon; | |
53 } | |
54 | |
55 #child:hover { | |
56 background-color: green; | |
57 } | |
58 | |
59 #grandparent:hover, #parent2:hover { | |
60 background-color: green; | |
61 } | |
62 | |
63 #spanBefore:hover, #spanAfter:hover, #spanAway:hover { | |
64 background-color: yellow; | |
65 } | |
66 </style> | |
67 | |
68 <script src="../../resources/js-test.js"></script> | |
69 </head> | |
70 <body> | |
71 <ol class="visualElement"> | |
72 <li>Move the mouse over the orange square | |
73 <ul> | |
74 <li>The lightblue square should turn green</li> | |
75 </ul> | |
76 </li> | |
77 <li>Move the mouse over the red square | |
78 <ul> | |
79 <li>The red and lightblue squares should turn green</li> | |
80 </ul> | |
81 </li> | |
82 <li>Move the mouse over the "Before" or "After" texts | |
83 <ul> | |
84 <li>The text's background should turn yellow and the lightbl
ue square should turn green</li> | |
85 </ul> | |
86 </li> | |
87 <li>Move the mouse over the "Away" text | |
88 <ul> | |
89 <li>The text's background should turn yellow and the yellow
square should turn green</li> | |
90 </ul> | |
91 </li> | |
92 </ol> | |
93 | |
94 <div class="visualElement" id="grandparent"> | |
95 <span id="spanBefore">Before</span> | |
96 <div class="visualElement" id="parent"> | |
97 <div class="visualElement" id="child"></div> | |
98 </div> | |
99 <span id="spanAfter">After</span> | |
100 </div> | |
101 <div class="visualElement" id="parent2"> | |
102 <span id="spanAway">Away</span> | |
103 </div> | |
104 <div class="visualElement" id="region"></div> | |
105 | |
106 <script type="text/javascript"> | |
107 description("Test hover on child when flowed into region.") | |
108 | |
109 if (window.eventSender) { | |
110 var child = document.querySelector("#child"); | |
111 var parent = document.querySelector("#parent"); | |
112 var parent2 = document.querySelector("#parent2"); | |
113 var grandparent = document.querySelector("#grandparent"); | |
114 var textBefore = document.querySelector("#spanBefore"); | |
115 var textAfter = document.querySelector("#spanAfter"); | |
116 var textAway = document.querySelector("#spanAway"); | |
117 | |
118 // move mouse on the parent object | |
119 { | |
120 eventSender.mouseMoveTo(parent.offsetLeft + 145, parent.offs
etTop + 50); | |
121 eventSender.mouseDown(0); | |
122 eventSender.leapForward(500); | |
123 eventSender.mouseUp(0); | |
124 | |
125 var childColor = window.getComputedStyle(child).getPropertyV
alue("background-color"); | |
126 var grandparentColor = window.getComputedStyle(grandparent).
getPropertyValue("background-color"); | |
127 | |
128 if (childColor == "rgb(255, 0, 0)") | |
129 testPassed("Child hover event processed OK."); | |
130 else | |
131 testFailed("Child hover event FAILED to process, " + chi
ldColor); | |
132 | |
133 if (grandparentColor == "rgb(0, 128, 0)") | |
134 testPassed("Grandparent hover event processed OK."); | |
135 else | |
136 testFailed("Grandparent hover event FAILED to process.")
; | |
137 } | |
138 | |
139 // move mouse on the child object | |
140 { | |
141 eventSender.mouseMoveTo(child.offsetLeft + 10, child.offsetT
op + 50); | |
142 eventSender.mouseDown(0); | |
143 eventSender.leapForward(500); | |
144 eventSender.mouseUp(0); | |
145 | |
146 var childColor = window.getComputedStyle(child).getPropertyV
alue("background-color"); | |
147 var grandparentColor = window.getComputedStyle(grandparent).
getPropertyValue("background-color"); | |
148 | |
149 if (childColor == "rgb(0, 128, 0)") | |
150 testPassed("Child hover event processed OK."); | |
151 else | |
152 testFailed("Child hover event FAILED to process."); | |
153 | |
154 if (grandparentColor == "rgb(0, 128, 0)") | |
155 testPassed("Grandparent hover event processed OK."); | |
156 else | |
157 testFailed("Grandparent hover event FAILED to process.")
; | |
158 } | |
159 | |
160 // move mouse on the "Before" text | |
161 { | |
162 eventSender.mouseMoveTo(spanBefore.offsetLeft + 5, spanBefor
e.offsetTop + 5); | |
163 eventSender.mouseDown(0); | |
164 eventSender.leapForward(500); | |
165 eventSender.mouseUp(0); | |
166 | |
167 var grandparentColor = window.getComputedStyle(grandparent).
getPropertyValue("background-color"); | |
168 var textColor = window.getComputedStyle(spanBefore).getPrope
rtyValue("background-color"); | |
169 | |
170 if (textColor == "rgb(255, 255, 0)") | |
171 testPassed("Span hover event processed OK."); | |
172 else | |
173 testFailed("Span hover event FAILED to process."); | |
174 | |
175 if (grandparentColor == "rgb(0, 128, 0)") | |
176 testPassed("Grandparent hover event processed OK."); | |
177 else | |
178 testFailed("Grandparent hover event FAILED to process.")
; | |
179 } | |
180 | |
181 // move mouse on the "After" text | |
182 { | |
183 eventSender.mouseMoveTo(spanAfter.offsetLeft + 5, spanAfter.
offsetTop + 5); | |
184 eventSender.mouseDown(0); | |
185 eventSender.leapForward(500); | |
186 eventSender.mouseUp(0); | |
187 | |
188 var grandparentColor = window.getComputedStyle(grandparent).
getPropertyValue("background-color"); | |
189 var textColor = window.getComputedStyle(spanAfter).getProper
tyValue("background-color"); | |
190 | |
191 if (textColor == "rgb(255, 255, 0)") | |
192 testPassed("Span hover event processed OK."); | |
193 else | |
194 testFailed("Span hover event FAILED to process."); | |
195 | |
196 if (grandparentColor == "rgb(0, 128, 0)") | |
197 testPassed("Grandparent hover event processed OK."); | |
198 else | |
199 testFailed("Grandparent hover event FAILED to process.")
; | |
200 } | |
201 | |
202 // move mouse on the "Away" text | |
203 { | |
204 eventSender.mouseMoveTo(spanAway.offsetLeft + 5, spanAway.of
fsetTop + 5); | |
205 eventSender.mouseDown(0); | |
206 eventSender.leapForward(500); | |
207 eventSender.mouseUp(0); | |
208 | |
209 var parent2Color = window.getComputedStyle(parent2).getPrope
rtyValue("background-color"); | |
210 var textColor = window.getComputedStyle(spanAway).getPropert
yValue("background-color"); | |
211 | |
212 if (textColor == "rgb(255, 255, 0)") | |
213 testPassed("Span hover event processed OK."); | |
214 else | |
215 testFailed("Span hover event FAILED to process."); | |
216 | |
217 if (parent2Color == "rgb(0, 128, 0)") | |
218 testPassed("Parent2 hover event processed OK."); | |
219 else | |
220 testFailed("Parent2 hover event FAILED to process."); | |
221 } | |
222 } | |
223 | |
224 if (window.testRunner) { | |
225 var elementsToHide = document.querySelectorAll(".visualElement")
; | |
226 for (var i=0; i<elementsToHide.length; i++) | |
227 elementsToHide[i].style.visibility = "hidden"; | |
228 } | |
229 | |
230 else { | |
231 var elementsToHide = document.querySelectorAll("#console, #descr
iption"); | |
232 for (var i=0; i<elementsToHide.length; i++) | |
233 elementsToHide[i].style.visibility = "hidden"; | |
234 } | |
235 </script> | |
236 | |
237 </body> | |
238 </html> | |
OLD | NEW |