blob: 1767b2599d9876a5e294ae67124a53a2cfea2df9 [file] [log] [blame]
<!DOCTYPE html>
<style>
#container {
position: absolute;
top: 0;
font-size: 10px;
}
.target {
width: 40px;
height: 40px;
border-top: solid;
border-left: solid;
margin-bottom: 20px;
}
</style>
<div id="container"></div>
<script>
[
'perspective(200px) translate3D(10px, 10px, 10px)',
'matrix(0, 1, 1, 0, 10, 10)',
'matrix3d(' +
'0, 1, 0, 0, ' +
'1, 0, 0, 0, ' +
'0, 0, 1, 0, ' +
'10, 10, 10, 1)',
'matrix3d(' +
'0.707106781186548, 0.000000000000000, -0.707106781186547, 0.003535533905933,' +
'0.000000000000000, 1.000000000000000, 0.000000000000000, 0.000000000000000,' +
'0.707106781186547, 0.000000000000000, 0.707106781186548, -0.003535533905933,' +
'0.000000000000000, 0.000000000000000, 0.000000000000000, 1.000000000000000)',
'perspective(200px) rotateY(45deg)',
'none',
].forEach(transform => {
var text = document.createElement('div');
text.textContent = transform;
container.appendChild(text);
var target = document.createElement('div');
target.classList.add('target');
container.appendChild(target);
target.animate([
{transform: transform},
{transform: transform},
], 1e8);
});
if (window.testRunner)
testRunner.waitUntilDone();
requestAnimationFrame(() => {
requestAnimationFrame(() => {
internals.setZoomFactor(2);
requestAnimationFrame(() => {
if (window.testRunner)
testRunner.notifyDone();
});
});
});
</script>