src/third_party/WebKit/LayoutTests/transitions/transform-op-list-match.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     #box {
   7       height: 100px;
   8       width: 100px;
   9       background-color: blue;
  10       transform: translateX(0px) rotate(0deg);
  11       -webkit-transition-duration: 2s;
  12       -webkit-transition-timing-function: linear;
  13       -webkit-transition-property: transform;
  14     }
  15   </style>
  16   <script src="../animations/resources/animation-test-helpers.js"></script>
  17   <script type="text/javascript">
  18
  19     function DegreesToRotation(angle)
  20     {
  21       return roundNumber(Math.cos(angle * Math.PI / 180), 5);
  22     }
  23
  24     const expectedValues = [
  25       // [time, element-id, property, expected-value, tolerance]
  26       [0.5, "box", "-webkit-transform.0", DegreesToRotation(135), DegreesToRotation(10)],
  27       [1.0, "box", "-webkit-transform.0", DegreesToRotation(90), DegreesToRotation(10)],
  28     ];
  29
  30     function setupTest()
  31     {
  32       var box = document.getElementById('box');
  33       box.style.webkitTransform = 'translateX(0px) rotate(540deg)';
  34     }
  35
  36     runTransitionTest(expectedValues, setupTest);
  37   </script>
  38 </head>
  39 <body>
  40
  41 <p>
  42 Box should spin 540 degrees because that is the specified rotation and the transform operation lists match,
  43 so we should animate each operation separately.
  44 </p>
  45 <div id="box">
  46 </div>
  47 <div id="result">
  48 </div>
  49 </body>
  50 </html>