5 transform: translatez(
0);
18 background-color: blue;
26 background-color: lime;
34 background-color: magenta;
42 background-color: cyan;
46 background-color: green;
47 transform:translatez(
0);
52 if (window
.testRunner
)
53 testRunner
.dumpAsText();
57 if (!window
.internals
)
60 document
.getElementById('Case1').textContent
= window
.internals
.layerTreeAsText(document
);
63 document
.getElementById('Case2').textContent
= window
.internals
.layerTreeAsText(document
);
65 hoverOverMiddle2Div();
66 document
.getElementById('Case3').textContent
= window
.internals
.layerTreeAsText(document
);
69 document
.getElementById('Case4').textContent
= window
.internals
.layerTreeAsText(document
);
72 document
.getElementById('Case5').textContent
= window
.internals
.layerTreeAsText(document
);
74 document
.getElementById('testTitle').style
.display
= '';
75 document
.getElementById('testResults').style
.display
= '';
78 function hoverAtZero()
80 internals
.setIsCursorVisible(document
, true);
81 eventSender
.mouseMoveTo(0, 0);
84 function hoverOverMiddleDiv()
86 internals
.setIsCursorVisible(document
, true);
87 eventSender
.mouseMoveTo(190, 190);
90 function hoverOverMiddle2Div()
92 internals
.setIsCursorVisible(document
, true);
93 eventSender
.mouseMoveTo(270, 270);
96 function hoverOverTopDiv()
98 internals
.setIsCursorVisible(document
, true);
99 eventSender
.mouseMoveTo(350, 350);
103 <body onload=
"runTest()">
104 <div class=
"composited box behind"></div>
105 <div class=
"box middle"></div>
106 <div class=
"box middle2"></div>
107 <div class=
"box top"></div>
109 <p id=
"testTitle" style=
"display:none">Test overlap is rendered correctly when hovering over elements
</p>
111 <div class=
"composited"></div>
112 <div id=
"A" class=
"overlap1"></div>
113 <div id=
"B" class=
"overlap2"></div>
114 <div id=
"C" class=
"overlap3"></div>
116 <div id=
"testResults" style=
"display:none">
117 Case
1, original layer tree:
118 <pre id=
"Case1"></pre>
119 Case
2: hovering over the
"middle" element (causes that div to become its own composited layer)
120 <pre id=
"Case2"></pre>
121 Case
3: hovering over the
"middle2" element (causes that div to become its own composited layer)
122 <pre id=
"Case3"></pre>
123 Case
4: hovering over the
"top" element (causes that div to become its own composited layer)
124 <pre id=
"Case4"></pre>
125 Case
5: back to situation in case
1
126 <pre id=
"Case5"></pre>