Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(301)

Side by Side Diff: LayoutTests/fast/regions/hover-in-region-parent-skip-inlines-anonymous.html

Issue 19660002: Revert "[CSS Regions] Mouse over an element does not trigger :hover state for parent when the eleme… (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(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="../js/resources/js-test-pre.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 <script src="../js/resources/js-test-post.js"></script>
238 </body>
239 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698