blob: 5a24f041b641a92be20a2fdeec0a84c87d94ce88 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE html>
<head>
<style>
.composited {
transform: translatez(0);
}
.box {
width: 100px;
height: 100px;
}
.behind {
position: absolute;
z-index: 1;
top: 100px;
left: 100px;
background-color: blue;
}
.middle {
position: absolute;
z-index: 1;
top: 180px;
left: 180px;
background-color: lime;
}
.middle2 {
position: absolute;
z-index: 1;
top: 260px;
left: 260px;
background-color: magenta;
}
.top {
position: absolute;
z-index: 1;
top: 340px;
left: 340px;
background-color: cyan;
}
div:hover {
background-color: green;
transform:translatez(0);
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsText();
function runTest()
{
if (!window.internals)
return;
document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document);
hoverOverMiddleDiv();
document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document);
hoverOverMiddle2Div();
document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document);
hoverOverTopDiv();
document.getElementById('Case4').textContent = window.internals.layerTreeAsText(document);
hoverAtZero();
document.getElementById('Case5').textContent = window.internals.layerTreeAsText(document);
document.getElementById('testTitle').style.display = '';
document.getElementById('testResults').style.display = '';
}
function hoverAtZero()
{
internals.setIsCursorVisible(document, true);
eventSender.mouseMoveTo(0, 0);
}
function hoverOverMiddleDiv()
{
internals.setIsCursorVisible(document, true);
eventSender.mouseMoveTo(190, 190);
}
function hoverOverMiddle2Div()
{
internals.setIsCursorVisible(document, true);
eventSender.mouseMoveTo(270, 270);
}
function hoverOverTopDiv()
{
internals.setIsCursorVisible(document, true);
eventSender.mouseMoveTo(350, 350);
}
</script>
</head>
<body onload="runTest()">
<div class="composited box behind"></div>
<div class="box middle"></div>
<div class="box middle2"></div>
<div class="box top"></div>
<p id="testTitle" style="display:none">Test overlap is rendered correctly when hovering over elements</p>
<div class="composited"></div>
<div id="A" class="overlap1"></div>
<div id="B" class="overlap2"></div>
<div id="C" class="overlap3"></div>
<div id="testResults" style="display:none">
Case 1, original layer tree:
<pre id="Case1"></pre>
Case 2: hovering over the "middle" element (causes that div to become its own composited layer)
<pre id="Case2"></pre>
Case 3: hovering over the "middle2" element (causes that div to become its own composited layer)
<pre id="Case3"></pre>
Case 4: hovering over the "top" element (causes that div to become its own composited layer)
<pre id="Case4"></pre>
Case 5: back to situation in case 1
<pre id="Case5"></pre>
</div>
</body>
</body>
|
