| <!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> |
