blob: 148c23e7a7bbede67f415885f5d6d4e8dc1a9d4c [file] [log] [blame]
<!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: blue;
margin: 80px 40px;
position: relative;
box-shadow: 0 0 10px black;
-webkit-transform-origin: bottom left;
transition: -webkit-transform 10s;
}
.dot {
position: absolute;
top: 0;
left: 0;
height: 4px;
width: 4px;
background-color: silver;
}
body.changed .box {
animation: move 10s linear;
}
@keyframes move {
from {
-webkit-transform: translatex(10px);
}
30% {
-webkit-transform: translateX(150px) scale(1.3);
}
60% {
-webkit-transform: translateX(-20px) scale(0.5);
}
to {
-webkit-transform: translateX(100px) scale(1.3);
}
}
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function dumpLayers()
{
if (window.testRunner) {
document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
testRunner.notifyDone();
}
}
function makeDots()
{
const width = 50;
const height = 23;
const spacing = 10;
for (var row = 0; row < height; ++row) {
for (var col = 0; col < width; ++col) {
var dot = document.createElement('div');
dot.className = 'dot';
dot.style.left = spacing * col + 'px';
dot.style.top = spacing * row + 'px';
document.body.appendChild(dot);
}
}
window.setTimeout(function() {
document.getElementById('target').addEventListener('animationstart', dumpLayers, false);
document.body.classList.add('changed');
}, 0);
}
window.addEventListener('load', makeDots, false);
</script>
</head>
<body>
<div id="target" class="box">
</div>
<pre id="layers"></pre>
</body>
</html>