c913185b7614899acd633a82c2ee3e27e1747755
[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 <body>
71         <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>
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 square should turn green</li>
75         </ol>
76         <div class="bigBox" id="parent">
77                 <div class="smallBox" id="child"></div>
78         </div>
79         
80         <div class="hugeBox" id="regionParent"></div>
81         <div class="bigBox" id="regionChild"></div>
82         
83         <script type="text/javascript">
84                 description("This test covers the case when the child is flowed into a region and the parent is flowed into a different region.")
85
86                 if (window.eventSender) {
87                         var child  = document.querySelector("#child");
88                         var parent = document.querySelector("#parent");
89
90                         // move mouse on the child object
91                         eventSender.mouseMoveTo(child.offsetLeft + 50, child.offsetTop + 50);
92                         eventSender.mouseDown(0);
93                         eventSender.leapForward(500);
94                         eventSender.mouseUp(0);
95
96                         var childColor = window.getComputedStyle(child).getPropertyValue("background-color");
97             var parentColor = window.getComputedStyle(parent).getPropertyValue("background-color");
98
99                         if (childColor == "rgb(255, 255, 0)")
100                                 testPassed("Child hover event processed OK.");
101                         else
102                                 testFailed("Child hover event FAILED to process.");
103
104                         if (parentColor == "rgb(0, 128, 0)")
105                                 testPassed("Parent hover event processed OK.");
106                         else
107                                 testFailed("Parent hover event FAILED to process.");
108                 }
109
110                 if (window.testRunner) {
111                         var elementsToHide = document.querySelectorAll(".visibleElement, .tinyBox, .smallBox, .bigBox, .hugeBox");
112                         for (var i=0; i<elementsToHide.length; i++)
113                                 elementsToHide[i].style.visibility = "hidden";
114                 }
115
116                 else {
117                         var elementsToHide = document.querySelectorAll("#console, #description");
118                         for (var i=0; i<elementsToHide.length; i++)
119                                 elementsToHide[i].style.visibility = "hidden";
120                 }
121         </script>
122
123         <script src="../js/resources/js-test-post.js"></script>
124 </body>
125 </html>