third_party/WebKit/LayoutTests/transitions/transform-op-list-no-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(45), 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 = 'rotate(540deg)';
  34     }
  35
  36     runTransitionTest(expectedValues, setupTest);
  37   </script>
  38 </head>
  39 <body>
  40
  41 <p>
  42 Box should spin only 180 degrees even though the operation specifies a 0 to 540 degree animation.
  43 This is because the operation lists don't match, so it falls back to matrix animation, which
  44 normalizes the angle to between 0 and 360 degrees.
  45 </p>
  46 <div id="box">
  47 </div>
  48 <div id="result">
  49 </div>
  50 </body>
  51 </html>