LayoutTests/transitions/transform-op-list-no-match.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Transition Between Transform Operation Lists Which Don't Match</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       height: 100px;
  11       width: 100px;
  12       background-color: blue;
  13       -webkit-transform: translateX(0px) rotate(0deg);
  14       -webkit-transition-duration: 2s;
  15       -webkit-transition-timing-function: linear;
  16       -webkit-transition-property: -webkit-transform;
  17     }
  18   </style>
  19   <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  20   <script type="text/javascript" charset="utf-8">
  21
  22     function DegreesToRotation(angle)
  23     {
  24       return roundNumber(Math.cos(angle * Math.PI / 180), 5);
  25     }
  26
  27     const expectedValues = [
  28       // [time, element-id, property, expected-value, tolerance]
  29       [0.5, "box", "-webkit-transform.0", DegreesToRotation(45), DegreesToRotation(10)],
  30       [1.0, "box", "-webkit-transform.0", DegreesToRotation(90), DegreesToRotation(10)],
  31     ];
  32
  33     function setupTest()
  34     {
  35       var box = document.getElementById('box');
  36       box.style.webkitTransform = 'rotate(540deg)';
  37     }
  38
  39     runTransitionTest(expectedValues, setupTest, true);
  40
  41   </script>
  42 </head>
  43 <body>
  44
  45 <p>
  46 Box should spin only 180 degrees even though the operation specifies a 0 to 540 degree animation.
  47 This is because the operation lists don't match, so it falls back to matrix animation, which
  48 normalizes the angle to between 0 and 360 degrees.
  49 </p>
  50 <div id="box">
  51 </div>
  52 <div id="result">
  53 </div>
  54 </body>
  55 </html>