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 { | |
17 width: 100px; | |
18 height: 100px; | |
19 border: 5px solid blue; | |
20 background-color: lightblue; | |
21 } | |
22 | |
23 #parent { | |
24 width: 100px; | |
25 height: 100px; | |
26 border: 5px solid red; | |
27 background-color: darkred; | |
28 -webkit-flow-into: flow1; | |
29 } | |
30 | |
31 #child { | |
32 width: 100px; | |
33 height: 100px; | |
34 -webkit-flow-into: flow2; | |
35 border: 5px solid green; | |
36 background-color: orange; | |
37 } | |
38 | |
39 #region1 { | |
40 width: 150px; | |
41 height: 150px; | |
42 -webkit-flow-from: flow1; | |
43 border: 1px solid lime; | |
44 margin-top: 10px; | |
45 margin-bottom: 10px; | |
46 } | |
47 | |
48 #region2 { | |
49 width: 150px; | |
50 height: 150px; | |
51 -webkit-flow-from: flow2; | |
52 border: 1px solid lime; | |
53 } | |
54 | |
55 #child:hover { | |
56 background-color: green; | |
57 } | |
58 | |
59 #parent:hover { | |
60 background-color: green; | |
61 } | |
62 | |
63 #grandparent:hover { | |
64 background-color: green; | |
65 } | |
66 </style> | |
67 | |
68 <script src="../../resources/js-test.js"></script> | |
69 </head> | |
70 <body> | |
71 <ol> | |
72 <li>Move the mouse over the orange square | |
73 <ul> | |
74 <li>All three squares should turn green</li> | |
75 </ul> | |
76 </li> | |
77 <li>Move the mouse over the red square | |
78 <ul> | |
79 <li>The first two squares should turn green</li> | |
80 </ul> | |
81 </li> | |
82 </ol> | |
83 | |
84 <div class="box" id="grandparent"> | |
85 <div class="box" id="parent"> | |
86 <div class="box" id="child"></div> | |
87 </div> | |
88 </div> | |
89 <div class="box" id="region1"></div> | |
90 <div class="box" id="region2"></div> | |
91 | |
92 <script type="text/javascript"> | |
93 description("Test hover on children when flowed into region.") | |
94 | |
95 if (window.eventSender) { | |
96 var child = document.querySelector("#child"); | |
97 var parent = document.querySelector("#parent"); | |
98 var grandparent = document.querySelector("#grandparent"); | |
99 | |
100 // move mouse on the child object | |
101 { | |
102 eventSender.mouseMoveTo(child.offsetLeft + 10, child.offsetT
op + 50); | |
103 eventSender.mouseDown(0); | |
104 eventSender.leapForward(500); | |
105 eventSender.mouseUp(0); | |
106 | |
107 var childColor = window.getComputedStyle(child).getPropertyV
alue("background-color"); | |
108 var parentColor = window.getComputedStyle(parent).getPropert
yValue("background-color"); | |
109 var grandparentColor = window.getComputedStyle(grandparent).
getPropertyValue("background-color"); | |
110 | |
111 if (childColor == "rgb(0, 128, 0)") | |
112 testPassed("Child hover event processed OK."); | |
113 else | |
114 testFailed("Child hover event FAILED to process."); | |
115 | |
116 if (parentColor == "rgb(0, 128, 0)") | |
117 testPassed("Parent hover event processed OK."); | |
118 else | |
119 testFailed("Parent hover event FAILED to process."); | |
120 | |
121 if (grandparentColor == "rgb(0, 128, 0)") | |
122 testPassed("Grandparent hover event processed OK."); | |
123 else | |
124 testFailed("Grandparent hover event FAILED to process.")
; | |
125 } | |
126 | |
127 // move mouse on the parent object | |
128 { | |
129 eventSender.mouseMoveTo(parent.offsetLeft + 10, parent.offse
tTop + 50); | |
130 eventSender.mouseDown(0); | |
131 eventSender.leapForward(500); | |
132 eventSender.mouseUp(0); | |
133 | |
134 var childColor = window.getComputedStyle(child).getPropertyV
alue("background-color"); | |
135 var parentColor = window.getComputedStyle(parent).getPropert
yValue("background-color"); | |
136 var grandparentColor = window.getComputedStyle(grandparent).
getPropertyValue("background-color"); | |
137 | |
138 if (childColor != "rgb(0, 128, 0)") | |
139 testPassed("Child hover event processed OK."); | |
140 else | |
141 testFailed("Child hover event FAILED to process."); | |
142 | |
143 if (parentColor == "rgb(0, 128, 0)") | |
144 testPassed("Parent hover event processed OK."); | |
145 else | |
146 testFailed("Parent hover event FAILED to process."); | |
147 | |
148 if (grandparentColor == "rgb(0, 128, 0)") | |
149 testPassed("Grandparent hover event processed OK."); | |
150 else | |
151 testFailed("Grandparent hover event FAILED to process.")
; | |
152 } | |
153 } | |
154 | |
155 if (window.testRunner) { | |
156 var elementsToHide = document.querySelectorAll("ol, .box"); | |
157 for (var i=0; i<elementsToHide.length; i++) | |
158 elementsToHide[i].style.visibility = "hidden"; | |
159 } | |
160 | |
161 else { | |
162 var elementsToHide = document.querySelectorAll("#console, #descr
iption"); | |
163 for (var i=0; i<elementsToHide.length; i++) | |
164 elementsToHide[i].style.visibility = "hidden"; | |
165 } | |
166 </script> | |
167 | |
168 </body> | |
169 </html> | |
OLD | NEW |