Implemented 2D WebKitCSSMatrix
[WebKit-https.git] / LayoutTests / animations / combo-transform-translate+scale.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>Combined transform translate() scale()</title>
8   <style type="text/css" media="screen">
9     #box {
10       height: 100px;
11       width: 100px;
12       background-color: blue;
13       -webkit-animation-duration: 2s;
14       -webkit-animation-timing-function: linear;
15       -webkit-animation-name: "anim";
16     }
17     @-webkit-keyframes "anim" {
18         from { -webkit-transform: translate(0,0) scale(1,1); }
19         to   { -webkit-transform: translate(100px, 200px) scale(2,4); }
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.2;
30     
31     const expected =  [ [ 1.25,0,0,1.75,25,50 ],
32                         [ 1.5,0,0,2.5,50,100 ] ];
33     const tolerance = [ 0.2,0.2,0.2,0.2,5,5 ];
34     const prop = [ "a", "b", "c", "d", "e", "f" ];
35     
36     function isEqual(actual, desired, tolerance)
37     {
38         if (tolerance == undefined || tolerance == 0)
39             tolerance = defaultTolerance;
40         var diff = Math.abs(actual - desired);
41         return diff <= tolerance;
42     }
43     
44     function snapshot(which)
45     {
46         if (result != "PASS")
47             return;
48         
49         var t = new WebKitCSSMatrix(window.getComputedStyle(document.getElementById('box')).webkitTransform);
50         for (i = 0; i < 6; ++i)
51             if (!isEqual(t[prop[i]], expected[which][i], tolerance[i])) {
52                 result = "FAIL('"+prop[i]+"' was:"+t[prop[i]]+", expected:"+expected[which][i]+")";
53                 return;
54             }
55     }
56
57     function start()
58     {
59         setTimeout("snapshot(0)", 500);
60         setTimeout("snapshot(1)", 1000);
61         
62         window.setTimeout(function() {
63             document.getElementById('result').innerHTML = result;
64             if (window.layoutTestController)
65                 layoutTestController.notifyDone();
66         }, 1100);
67     }
68     
69     document.addEventListener('webkitAnimationStart', start, false);
70     
71   </script>
72 </head>
73 <body>
74 This test performs an animation of the translate() and scale() operators. It animates over 2 seconds. 
75 At 0.5 and 1 second it takes a snapshot and expects the result to be within range.
76 <div id="box">
77 </div>
78 <div id="result">
79 </div>
80 </body>
81 </html>