| <!doctype html> |
| <html> |
| <head> |
| <!-- |
| This test performs an animation of the matrix operator. The matrix is defined so that the |
| decomposition (unmatrix) algorithm is tested on the path where the matrix is negated and the |
| the scaling factors are also negated. |
| The animation is started and a snapshot is taken after start. The "d" component of matrix |
| should be negative. |
| --> |
| <style type="text/css" media="screen"> |
| #box { |
| width: 100px; |
| height: 100px; |
| background-color: blue; |
| animation-duration: 10s; |
| } |
| |
| @keyframes anim { |
| from { transform: matrix(1, 0, 0, -1, 0, 0); } |
| to { transform: matrix(1, 0, 0, 1, 0, 0); } |
| } |
| </style> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script type="text/javascript" charset="utf-8"> |
| var test = async_test("This test performs an animation of the matrix operator"); |
| |
| function snapshot() |
| { |
| var boxComputedStyle = window.getComputedStyle(document.getElementById('box')); |
| var matrix = new WebKitCSSMatrix(boxComputedStyle.transform); |
| |
| // "d" component (scaleY) should be negative. |
| assert_less_than_equal(matrix["d"] , 0, "'d' component(scaleY) should be negative"); |
| |
| document.getElementById('result').innerHTML = result; |
| } |
| |
| function startAnimation() |
| { |
| document.getElementById("box").style.animationName = "anim"; |
| } |
| |
| document.addEventListener('webkitAnimationStart', test.step_func_done(snapshot), false); |
| </script> |
| </head> |
| <body> |
| <div id="box"></div> |
| <div id="result"></div> |
| <script> |
| startAnimation(); |
| </script> |
| </body> |
| </html> |