LayoutTests/transitions/transform-op-list-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 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(135), 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 = 'translateX(0px) rotate(540deg)';
  37     }
  38
  39     runTransitionTest(expectedValues, setupTest, true);
  40
  41   </script>
  42 </head>
  43 <body>
  44
  45 <p>
  46 Box should spin 540 degrees because that is the specified rotation and the transform operation lists match,
  47 so we should animate each operation separately.
  48 </p>
  49 <div id="box">
  50 </div>
  51 <div id="result">
  52 </div>
  53 </body>
  54 </html>