Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / animation-matrix-negative-scale-unmatrix.html
blob4075931809835716db87607f9b18c7b522c131cf
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: 10s;
19 @-webkit-keyframes anim {
20 from { transform: matrix(1, 0, 0, -1, 0, 0); }
21 to { transform: matrix(1, 0, 0, 1, 0, 0); }
23 </style>
24 <script type="text/javascript" charset="utf-8">
25 if (window.testRunner) {
26 testRunner.dumpAsText();
27 testRunner.waitUntilDone();
30 result = "PASS";
32 function snapshot()
34 var boxComputedStyle = window.getComputedStyle(document.getElementById('box'));
35 var matrix = new WebKitCSSMatrix(boxComputedStyle.webkitTransform);
37 // "d" component (scaleY) should be negative.
38 if (matrix["d"] > 0)
39 result = "FAIL(scaleY was positive, expected to be negative)";
41 document.getElementById('result').innerHTML = result;
42 if (window.testRunner)
43 testRunner.notifyDone();
46 function startAnimation()
48 document.getElementById("box").style.webkitAnimationName = "anim";
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>