[Qt][WK1][CSS Regions] New test fast/regions/hover-on-child-parent-different-regions...
[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                         setTimeout(release, 0);                 
93                 }
94         }
95
96         function release() {
97                 var child  = document.querySelector("#child");
98                 var parent = document.querySelector("#parent");
99
100                 var childColor = window.getComputedStyle(child).getPropertyValue("background-color");
101         var parentColor = window.getComputedStyle(parent).getPropertyValue("background-color");
102
103                 if (childColor == "rgb(255, 255, 0)")
104                         testPassed("Child hover event processed OK.");
105                 else
106                         testFailed("Child hover event FAILED to process.");
107
108                 if (parentColor == "rgb(0, 128, 0)")
109                         testPassed("Parent hover event processed OK.");
110                 else
111                         testFailed("Parent hover event FAILED to process.");
112
113                 var elementsToHide = document.querySelectorAll(".visibleElement, .tinyBox, .smallBox, .bigBox, .hugeBox");
114                 for (var i=0; i<elementsToHide.length; i++)
115                         elementsToHide[i].style.visibility = "hidden";
116
117                 if (window.eventSender)
118                 eventSender.mouseUp(0);
119         if (window.testRunner)
120                         setTimeout("testRunner.notifyDone()", 0);
121         }
122
123 </script>
124
125 <body onload="beginTest()">
126         <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>
127         <ol class="visibleElement">
128                 <li>Move the mouse inside the orange square</li>
129                 <li>The orange square should turn yellow and the big darkred square should turn green</li>
130         </ol>
131         <div class="bigBox" id="parent">
132                 <div class="smallBox" id="child"></div>
133         </div>
134         
135         <div class="hugeBox" id="regionParent"></div>
136         <div class="bigBox" id="regionChild"></div>
137
138         <div 
139 </body>
140 </html>