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…

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

« no previous file with comments | « LayoutTests/fast/regions/hover-in-region-grandparent-expected.txt ('k') | LayoutTests/fast/regions/hover-in-region-parent-skip-inlines-anonymous-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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="../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>

OLD	NEW