58c13662673c00bfe2a0d7fd0353170b79d570a0
[WebKit-https.git] / LayoutTests / fast / regions / hover-on-child-parent-different-regions.html
1 <!doctype html>
2 <html lang="en">
3 <head>
4         <style>
5                 /* Make sure the console and the description don't interfere with 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                 
29                 #parent {
30                         border: 2px solid red;
31                         margin: 20px;
32                         padding: 10px;
33                         background-color: darkred;
34                         -webkit-flow-into: flowParent;
35                 }
36
37                 #parent:hover {
38                         background-color: green;
39                 }
40         
41                 #child {
42                         border: 5px solid orange;
43                         background-color: orange;
44                         -webkit-flow-into: flowChild;
45                 }
46
47                 #child:hover {
48                         background-color: yellow;
49                 }
50
51                 #regionParent {
52                         border: 5px solid green;
53                         margin: 50px;
54                         -webkit-flow-from: flowParent;
55                 }
56
57                 #regionChild {
58                         border: 5px solid blue;
59                         margin: 50px;
60                         position: relative;
61                         left: 400px;
62                         top: -300px;
63                         padding: 20px;
64                         -webkit-flow-from: flowChild;
65                 }
66         </style>
67
68         <script src="../js/resources/js-test-pre.js"></script>
69 </head>
70
71 <script type="text/javascript">
72         if (!window.testRunner) {
73                 description("This test covers the case when the child is flowed into a region and the parent is flowed into a different region.")
74
75                 var elementsToHide = document.querySelectorAll("#console, #description");
76                 for (var i=0; i<elementsToHide.length; i++)
77                         elementsToHide[i].style.visibility = "hidden";
78         }
79
80         if (window.testRunner)
81                 testRunner.waitUntilDone();
82
83         function beginTest() {
84                 if (window.eventSender) {
85                         var child  = document.querySelector("#child");
86                         var parent = document.querySelector("#parent");
87
88                         // move mouse on the child object
89                         eventSender.mouseMoveTo(child.offsetLeft + 50, child.offsetTop + 50);
90                         eventSender.mouseDown(0);
91
92                         // force a re-layout to ensure the hover events gets propagated before we check the results
93                         var top = document.body.offsetTop;
94
95                         setTimeout(release, 0);
96                 }
97         }
98
99         function release() {
100                 var child  = document.querySelector("#child");
101                 var parent = document.querySelector("#parent");
102
103                 var childColor = window.getComputedStyle(child).getPropertyValue("background-color");
104         var parentColor = window.getComputedStyle(parent).getPropertyValue("background-color");
105
106                 if (childColor == "rgb(255, 255, 0)")
107                         testPassed("Child hover event processed OK.");
108                 else
109                         testFailed("Child hover event FAILED to process.");
110
111                 if (parentColor == "rgb(0, 128, 0)")
112                         testPassed("Parent hover event processed OK.");
113                 else
114                         testFailed("Parent hover event FAILED to process.");
115
116                 var elementsToHide = document.querySelectorAll(".visibleElement, .tinyBox, .smallBox, .bigBox, .hugeBox");
117                 for (var i=0; i<elementsToHide.length; i++)
118                         elementsToHide[i].style.visibility = "hidden";
119
120                 if (window.eventSender)
121                 eventSender.mouseUp(0);
122         if (window.testRunner)
123                         setTimeout("testRunner.notifyDone()", 0);
124         }
125
126 </script>
127
128 <body onload="beginTest()">
129         <p class="visibleElement">This test covers the case when the <span style="color: orange;"><b>child</b></span> is flowed into a <span style="color: blue;"><b>region</b></span> and the <span style="color: darkred;"><b>parent</b></span> is flowed into a different <span style="color: green;"><b>region</b></span>.</p>
130         <ol class="visibleElement">
131                 <li>Move the mouse inside the orange square</li>
132                 <li>The orange square should turn yellow and the big darkred square should turn green</li>
133         </ol>
134         <div class="bigBox" id="parent">
135                 <div class="smallBox" id="child"></div>
136         </div>
137         
138         <div class="hugeBox" id="regionParent"></div>
139         <div class="bigBox" id="regionChild"></div>
140
141         <div 
142 </body>
143 </html>