blob: 4a241970905d4cae78e41b47c5b15469d87beaca (
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
|
<html>
<head>
<script>
if (window.testRunner) {
window.testRunner.dumpAsText();
window.testRunner.waitUntilDone();
}
function done() {
if (window.testRunner)
window.testRunner.notifyDone();
}
function dumpTreeAsText() {
if (!window.internals)
return;
document.getElementById('layers').textContent =
window.internals.layerTreeAsText(document);
document.getElementById('test').style.display = 'none';
done();
}
function removeStackingContext() {
var intermediary = document.getElementById("intermediary");
intermediary.setAttribute("class", "accelerated-no-stacking-context");
if (window.testRunner)
window.setTimeout(dumpTreeAsText, 0);
}
window.addEventListener('load', function () {
window.setTimeout(removeStackingContext, 100);
}, false);
</script>
<style>
.accelerated,
.accelerated-stacking-context {
-webkit-transform: rotateX(0deg);
}
.accelerated-no-stacking-context {
-webkit-backface-visibility: hidden;
}
.blended {
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<div id="test">
<!--This test checks that isolation property is removed when the element
no longer requires stacking context and it remains accelerated. -->
<div class="accelerated-stacking-context" style="background-color: blue;">
<div id="intermediary" class="accelerated-stacking-context"
style="background-color: green; height: 90px;">
<img class="accelerated blended" src="resources/reference.png">
</div>
</div>
</div>
<pre id="layers">Layer tree goes here when testing.</pre>
</body>
</html>
|
