OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html lang="en"> | |
3 <head> | |
4 <style> | |
5 /* Make sure the console and the description don't interfere wit
h the 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 .hugeBox { | |
17 width: 300px; | |
18 height: 300px; | |
19 } | |
20 .bigBox { | |
21 width: 200px; | |
22 height: 200px; | |
23 } | |
24 .smallBox { | |
25 width: 100px; | |
26 height: 100px; | |
27 } | |
28 .tinyBox { | |
29 width: 50px; | |
30 height: 50px; | |
31 } | |
32 #flowedIntoChild { | |
33 border: 1px solid blue; | |
34 color: blue; | |
35 font-size: 12px; | |
36 margin: 5px; | |
37 -webkit-flow-into: flowIntoChild; | |
38 } | |
39 #parent { | |
40 border: 2px solid red; | |
41 margin: 20px; | |
42 padding: 10px; | |
43 background-color: darkred; | |
44 -webkit-flow-into: flowParent; | |
45 } | |
46 | |
47 #parent:hover { | |
48 background-color: green; | |
49 } | |
50 | |
51 #child { | |
52 border: 5px solid orange; | |
53 background-color: orange; | |
54 -webkit-flow-from: flowIntoChild; | |
55 } | |
56 | |
57 #child:hover { | |
58 background-color: yellow; | |
59 } | |
60 | |
61 #region { | |
62 border: 5px solid green; | |
63 margin: 50px; | |
64 -webkit-flow-from: flowParent; | |
65 } | |
66 </style> | |
67 | |
68 <script src="../../resources/js-test.js"></script> | |
69 </head> | |
70 <body> | |
71 <p class="visibleElement">This test covers the case when the <span style
="color: orange;"><b>child</b></span> is itself a region and the <span style="co
lor: darkred;"><b>parent</b></span> is flowed into another <span style="color: g
reen;"><b>region</b></span>.</p> | |
72 <ol class="visibleElement"> | |
73 <li>Move the mouse inside the orange square</li> | |
74 <li>The orange square should turn yellow and the big darkred squ
are should turn green</li> | |
75 </ol> | |
76 <div class="bigBox" id="parent"> | |
77 <div class="smallBox" id="child"></div> | |
78 </div> | |
79 <div class="tinyBox" id="flowedIntoChild">flowed into child</div> | |
80 <div class="hugeBox" id="region"></div> | |
81 | |
82 <script type="text/javascript"> | |
83 description("This test covers the case when the child is itself
a region and the parent is flowed into another region.") | |
84 | |
85 if (window.eventSender) { | |
86 var child = document.querySelector("#child"); | |
87 var parent = document.querySelector("#parent"); | |
88 | |
89 // move mouse on the child object | |
90 eventSender.mouseMoveTo(child.offsetLeft + 90, child.off
setTop + 50); | |
91 eventSender.mouseDown(0); | |
92 eventSender.leapForward(500); | |
93 eventSender.mouseUp(0); | |
94 | |
95 var childColor = window.getComputedStyle(child).getPrope
rtyValue("background-color"); | |
96 var parentColor = window.getComputedStyle(parent).getPropertyValue("
background-color"); | |
97 | |
98 if (childColor == "rgb(255, 255, 0)") | |
99 testPassed("Child hover event processed OK."); | |
100 else | |
101 testFailed("Child hover event FAILED to process.
"); | |
102 | |
103 if (parentColor == "rgb(0, 128, 0)") | |
104 testPassed("Parent hover event processed OK."); | |
105 else | |
106 testFailed("Parent hover event FAILED to process
."); | |
107 } | |
108 | |
109 if (window.testRunner) { | |
110 var elementsToHide = document.querySelectorAll(".visible
Element, .tinyBox, .smallBox, .bigBox, .hugeBox"); | |
111 for (var i=0; i<elementsToHide.length; i++) | |
112 elementsToHide[i].style.visibility = "hidden"; | |
113 } | |
114 | |
115 else { | |
116 var elementsToHide = document.querySelectorAll("#console
, #description"); | |
117 for (var i=0; i<elementsToHide.length; i++) | |
118 elementsToHide[i].style.visibility = "hidden"; | |
119 } | |
120 </script> | |
121 | |
122 </body> | |
123 </html> | |
OLD | NEW |