114 lines
3.2 KiB
HTML
114 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.container {
|
|
height: 460px;
|
|
width: 120px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
left: 50px;
|
|
z-index: 0; /* create stacking context */
|
|
border: 1px solid black;
|
|
background-color: white;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 10px;
|
|
background-color: blue;
|
|
}
|
|
|
|
.force-layer {
|
|
-webkit-transform: translateZ(1px);
|
|
}
|
|
|
|
.yellow {
|
|
background-color: yellow;
|
|
}
|
|
|
|
.gray {
|
|
background-color: gray;
|
|
}
|
|
|
|
.animating1 {
|
|
-webkit-animation: translate1 2s linear infinite alternate;
|
|
}
|
|
|
|
.animating2 {
|
|
-webkit-animation: translate2 2s linear infinite alternate;
|
|
}
|
|
|
|
@-webkit-keyframes translate1 {
|
|
from { -webkit-transform: translate(0px, -110px); }
|
|
to { -webkit-transform: translate(0px, 590px); }
|
|
}
|
|
|
|
@-webkit-keyframes translate2 {
|
|
from { -webkit-transform: translate(0px, -220px); }
|
|
to { -webkit-transform: translate(0px, 110px); }
|
|
}
|
|
</style>
|
|
<script>
|
|
if (window.testRunner) {
|
|
testRunner.dumpAsText();
|
|
testRunner.waitUntilDone();
|
|
}
|
|
|
|
function queueBoxForAnimation(elementId, animationClass, callback) {
|
|
var box = document.getElementById(elementId);
|
|
if (callback)
|
|
box.addEventListener('webkitAnimationStart', callback, false);
|
|
box.classList.add(animationClass);
|
|
}
|
|
|
|
function runTest()
|
|
{
|
|
queueBoxForAnimation("to-animate1", "animating1");
|
|
queueBoxForAnimation("to-animate2", "animating2", animationStarted);
|
|
}
|
|
|
|
function animationStarted()
|
|
{
|
|
if (window.testRunner) {
|
|
var layersElement = document.getElementById('layers');
|
|
// Make sure we don't include the #layers element in the tree. The text size
|
|
// might differ between platforms.
|
|
layersElement.style.display = "none";
|
|
layersElement.innerText = window.internals.layerTreeAsText(document);
|
|
layersElement.style.display = "block";
|
|
testRunner.notifyDone();
|
|
}
|
|
}
|
|
window.addEventListener('load', runTest, false);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- The test checks that composited layers are created when needed to display elements in front of animated layers.
|
|
There are two animations going at the same time. The second animation is inside a clipping
|
|
container (white background with black border). The first animation should display behind the clipping container.
|
|
For both animations, the following should be true:
|
|
1. Yellow box should display in front of the blue box.
|
|
2. Gray boxes should display behind the blue box.
|
|
-->
|
|
<!-- This div will not get a layer -->
|
|
<div class="box gray"></div>
|
|
<div id="to-animate1" class="box"></div>
|
|
<div class="container">
|
|
<!-- This div will be forced to get a layer -->
|
|
<div class="box gray force-layer"></div>
|
|
<!-- This div will not get a layer -->
|
|
<div class="box gray"></div>
|
|
<div id="to-animate2" class="box"></div>
|
|
<!-- This div will get a layer -->
|
|
<div class="box yellow"></div>
|
|
</div>
|
|
<!-- This div will also get a layer -->
|
|
<div class="box yellow"></div>
|
|
<pre id="layers">Layer tree goes here in DRT</pre>
|
|
</body>
|
|
</html>
|