blob: 0095a9026909ae3533ba396edda841ff03645168 (
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
|
<!DOCTYPE html>
<html>
<head>
<style>
.set {
position: absolute;
top: 8px;
}
.box {
height: 100px;
width: 100px;
}
.hidden {
visibility: hidden;
}
.container {
margin: 10px;
padding: 20px;
}
.container.hidden {
outline: 4px solid red;
}
.visible {
visibility: visible;
}
.should-be-hidden {
background-color: red !important;
}
.should-be-visible {
background-color: green !important;
}
.composited {
transform: translateZ(0);
}
.visible-indicator {
background-color: green;
}
.hidden-indicator {
background-color: red;
}
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function doTest()
{
if (window.testRunner)
document.getElementById('layers1').innerText = window.internals.layerTreeAsText(document);
window.setTimeout(function() {
var firstImage = document.querySelectorAll('img')[0];
firstImage.style.visibility = 'visible';
if (window.testRunner)
document.getElementById('layers2').innerText = window.internals.layerTreeAsText(document);
window.setTimeout(function() {
var secondContainer = document.querySelectorAll('.container')[1];
secondContainer.style.visibility = 'visible';
if (window.testRunner) {
document.getElementById('layers3').innerText = window.internals.layerTreeAsText(document);
testRunner.notifyDone();
}
}, 0);
}, 0);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<!-- Tests dynamic changes of visibility, using directly composited images. -->
<div class="composited container"><img src="../resources/thiswayup.png" class="hidden composited box"></div>
<div class="composited hidden container"><img src="../resources/thiswayup.png" class="composited box"></div>
<div class="composited hidden container"><img src="../resources/thiswayup.png" class="visible composited box"></div>
<h2>Initial</h2>
<pre id="layers1"></pre>
<h2>After step 1</h2>
<pre id="layers2"></pre>
<h2>After step 2</h2>
<pre id="layers3"></pre>
</body>
</html>
|
