138 lines
4.3 KiB
HTML
138 lines
4.3 KiB
HTML
<!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>
|