LayoutTests/animations/animation-matrix-negative-scale-unmatrix.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <!--
   5         This test performs an animation of the matrix operator. The matrix is defined so that the
   6         decomposition (unmatrix) algorithm is tested on the path where the matrix is negated and the
   7         the scaling factors are also negated.
   8         The animation is started and a snapshot is taken after start. The "d" component of matrix
   9         should be negative.
  10         -->
  11         <style type="text/css" media="screen">
  12             #box {
  13                 width: 100px;
  14                 height: 100px;
  15                 background-color: blue;
  16                 -webkit-animation-duration: 1s;
  17             }
  18
  19             @-webkit-keyframes anim {
  20                 from { -webkit-transform: matrix(1, 0, 0, -1, 0, 0); }
  21                 to { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
  22             }
  23         </style>
  24         <script type="text/javascript" charset="utf-8">
  25             if (window.layoutTestController) {
  26                 layoutTestController.dumpAsText();
  27                 layoutTestController.waitUntilDone();
  28             }
  29
  30             result = "PASS";
  31
  32             function snapshot()
  33             {
  34                 var boxComputedStyle = window.getComputedStyle(document.getElementById('box'));
  35                 var matrix = new WebKitCSSMatrix(boxComputedStyle.webkitTransform);
  36
  37                 // "d" component (scaleY) should be negative.
  38                 if (matrix["d"] > 0)
  39                     result = "FAIL(scaleY was positive, expected to be negative)";
  40
  41                 document.getElementById('result').innerHTML = result;
  42                 if (window.layoutTestController)
  43                     layoutTestController.notifyDone();
  44             }
  45
  46             function startAnimation()
  47             {
  48                 document.getElementById("box").style.webkitAnimationName = "anim";
  49             }
  50
  51             document.addEventListener('webkitAnimationStart', snapshot, false);
  52         </script>
  53     </head>
  54     <body>
  55         <div id="box"></div>
  56         <div id="result"></div>
  57         <script>
  58             startAnimation();
  59         </script>
  60     </body>
  61 </html>