2008-09-08 Chris Marrin <cmarrin@apple.com>
[WebKit-https.git] / LayoutTests / animations / matrix-anim.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>Animation using matrix()</title>
8   <style type="text/css" media="screen">
9     #box {
10       height: 100px;
11       width: 100px;
12       background-color: blue;
13       -webkit-animation-duration: 1s;
14       -webkit-animation-timing-function: linear;
15       -webkit-animation-name: "anim";
16     }
17     @-webkit-keyframes "anim" {
18         from { -webkit-transform: matrix(0.707, -0.707, 0.707, 0.707, 0, 0); }
19         to   { -webkit-transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0); }
20     }
21   </style>
22   <script type="text/javascript" charset="utf-8">
23     if (window.layoutTestController) {
24       layoutTestController.dumpAsText();
25       layoutTestController.waitUntilDone();
26     }
27     
28     result = "PASS";
29     const defaultTolerance = 0.1;
30     
31     const expected =  [ 1, 0, 0, 1, 0, 0 ];
32     
33     function isEqual(actual, desired, tolerance)
34     {
35         if (tolerance == undefined || tolerance == 0)
36             tolerance = defaultTolerance;
37         var diff = Math.abs(actual - desired);
38         return diff < tolerance;
39     }
40     
41     function snapshot(which)
42     {
43         if (result != "PASS")
44             return;
45             
46         var t = window.getComputedStyle(document.getElementById('box')).getPropertyCSSValue('-webkit-transform');
47
48         for (i = 0; i < 6; ++i) {
49             var val = t[0][i].getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
50             if (!isEqual(val, expected[i])) {
51                 result = "FAIL(matrix["+i+"] was:"+val+", expected:"+expected[i]+")";
52                 return;
53             }
54         }
55     }
56
57     function start()
58     {
59         setTimeout("snapshot(0)", 500);
60         
61         window.setTimeout(function() {
62             document.getElementById('result').innerHTML = result;
63             if (window.layoutTestController)
64                 layoutTestController.notifyDone();
65         }, 600);
66     }
67     
68     document.addEventListener('webkitAnimationStart', start, false);
69     
70   </script>
71 </head>
72 <body>
73 This test performs an animation of the matrix operator. It animates over 2 seconds.
74 At 1 second it takes a snapshot and expects the result to be within range.
75 <div id="box">
76 </div>
77 <div id="result">
78 </div>
79 </body>
80 </html>