blob: 4859c3abe7a6e272063ca897415e1c37bfe3bf6d [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>-webkit-transform-origin vs. Transform Functions</title>
<style type="text/css" media="screen">
#a {
top: 0px;
left: 0px;
position: absolute;
-webkit-perspective: 800;
width: 800px;
height: 600px;
}
#b1 {
top: 80px;
left: 300px;
width: 200px;
height: 200px;
position: absolute;
background-color: #282;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-transform-origin: center center 200px;
}
@-webkit-keyframes b1 {
from { -webkit-transform: rotateY(0deg); }
5% { -webkit-transform: rotateY(90deg); }
20% { -webkit-transform: rotateY(90deg); }
50% { -webkit-transform: rotateY(180deg); }
75% { -webkit-transform: rotateY(270deg); }
to { -webkit-transform: rotateY(360deg); }
}
#b2 {
top: 320px;
left: 300px;
width: 200px;
height: 200px;
position: absolute;
background-color: #282;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes b2 {
from { -webkit-transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
5% { -webkit-transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
20% { -webkit-transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
50% { -webkit-transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
75% { -webkit-transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
to { -webkit-transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
resultEntries = [];
const expected = {
"b1" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, 0,0,0,1 ],
"b2" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, -200,0,200,1 ]
};
const tolerance = 0.2;
function isEqual(actual, desired)
{
var diff = Math.abs(actual - desired);
return diff <= tolerance;
}
var numSnapshots = 0;
function snapshot(id)
{
var e = document.getElementById(id);
var t = window.getComputedStyle(e).webkitTransform;
var a = t.split("(");
var array = a[1].split(",");
var pass = true;
for (i = 0; i < 16; ++i) {
var actual = parseFloat(array[i]);
var expect = expected[id][i];
if (!isEqual(actual, expect)) {
resultEntries.push("FAIL(element '"+id+"' matrix["+i+"]' was:"+actual+", expected:"+expect+")<br>");
pass = false;
}
}
if (pass)
resultEntries.push("PASS(element '"+id+"' matches expected value)<br>");
numSnapshots++;
if (numSnapshots == 2) {
resultEntries.sort();
document.getElementById('result').innerHTML = resultEntries.join("");
if (window.testRunner)
testRunner.notifyDone();
}
}
function snapshotOnTimeout(id) {
setTimeout("snapshot('" + id + "')", 250);
}
function startAnimation(id)
{
var element = document.getElementById(id);
element.addEventListener('webkitAnimationStart', function() {
// delay to give hardware animations a chance to start
window.setTimeout("snapshotOnTimeout('" + id + "')", 0);
}, false);
element.style.webkitAnimationName = id;
}
function start()
{
startAnimation('b1');
startAnimation('b2');
}
</script>
</head>
<body onload="start()">
<div id="a">
<div id="b1"> </div>
<div style="-webkit-transform:translateZ(-200px); -webkit-transform-style:preserve-3d;">
<div id="b2"> </div>
</div>
</div>
</body>
<div id="result"> </div>
</html>