third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-functions.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2   "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4   <head>
   5     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   6     <title>-webkit-transform-origin vs. Transform Functions</title>
   7     <style type="text/css" media="screen">
   8     #a {
   9       top: 0px;
  10       left: 0px;
  11       position: absolute;
  12       -webkit-perspective: 800;
  13       width: 800px;
  14       height: 600px;
  15     }
  16     #b1 {
  17       top: 80px;
  18       left: 300px;
  19       width: 200px;
  20       height: 200px;
  21       position: absolute;
  22       background-color: #282;
  23       -webkit-animation-duration: 2s;
  24       -webkit-animation-iteration-count: infinite;
  25       -webkit-animation-timing-function: linear;
  26       -webkit-transform-origin: center center 200px;
  27     }
  28     @-webkit-keyframes b1 {
  29         from { transform: rotateY(0deg); }
  30         5%  { transform: rotateY(90deg); }
  31         20%  { transform: rotateY(90deg); }
  32         50%  { transform: rotateY(180deg); }
  33         75%  { transform: rotateY(270deg); }
  34         to   { transform: rotateY(360deg); }
  35     }
  36     #b2 {
  37       top: 320px;
  38       left: 300px;
  39       width: 200px;
  40       height: 200px;
  41       position: absolute;
  42       background-color: #282;
  43       -webkit-animation-duration: 2s;
  44       -webkit-animation-iteration-count: infinite;
  45       -webkit-animation-timing-function: linear;
  46     }
  47     @-webkit-keyframes b2 {
  48         from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
  49         5%  { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
  50         20%  { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
  51         50%  { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
  52         75%  { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
  53         to   { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
  54     }
  55     </style>
  56
  57     <script type="text/javascript" charset="utf-8">
  58       if (window.testRunner) {
  59         testRunner.dumpAsText();
  60         testRunner.waitUntilDone();
  61       }
  62
  63       resultEntries = [];
  64
  65       const expected = {
  66           "b1" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, 0,0,0,1 ],
  67           "b2" : [ 0,0,-1,0, 0,1,0,0, 1,0,0,0, -200,0,200,1 ]
  68       };
  69
  70       const tolerance = 0.2;
  71       function isEqual(actual, desired)
  72       {
  73           var diff = Math.abs(actual - desired);
  74           return diff <= tolerance;
  75       }
  76
  77       var numSnapshots = 0;
  78
  79       function snapshot(id)
  80       {
  81           var e = document.getElementById(id);
  82           var t = window.getComputedStyle(e).webkitTransform;
  83           var a = t.split("(");
  84           var array = a[1].split(",");
  85           var pass = true;
  86           for (i = 0; i < 16; ++i) {
  87               var actual = parseFloat(array[i]);
  88               var expect = expected[id][i];
  89               if (!isEqual(actual, expect)) {
  90                   resultEntries.push("FAIL(element '"+id+"' matrix["+i+"]' was:"+actual+", expected:"+expect+")<br>");
  91                   pass = false;
  92               }
  93           }
  94
  95           if (pass)
  96             resultEntries.push("PASS(element '"+id+"' matches expected value)<br>");
  97
  98           numSnapshots++;
  99           if (numSnapshots == 2) {
 100               resultEntries.sort();
 101               document.getElementById('result').innerHTML = resultEntries.join("");
 102               if (window.testRunner)
 103                   testRunner.notifyDone();
 104           }
 105       }
 106
 107       function snapshotOnTimeout(id) {
 108           setTimeout("snapshot('" + id + "')", 250);
 109       }
 110
 111       function startAnimation(id)
 112       {
 113           var element = document.getElementById(id);
 114           element.addEventListener('webkitAnimationStart', function() {
 115               // delay to give hardware animations a chance to start
 116               window.setTimeout("snapshotOnTimeout('" + id + "')", 0);
 117           }, false);
 118           element.style.webkitAnimationName = id;
 119       }
 120
 121       function start()
 122       {
 123           startAnimation('b1');
 124           startAnimation('b2');
 125       }
 126
 127     </script>
 128   </head>
 129   <body onload="start()">
 130     <div id="a">
 131         <div id="b1"> </div>
 132         <div style="transform:translateZ(-200px); transform-style:preserve-3d;">
 133             <div id="b2"> </div>
 134         </div>
 135     </div>
 136   </body>
 137   <div id="result"> </div>
 138 </html>