Oops. Forgot this file in previous commit.
[WebKit-https.git] / LayoutTests / transforms / 2d / transform-2d.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>2D Transform Tests</title>
8   <style type="text/css" media="screen">
9     .container {
10       height: 100px;
11       width: 200px;
12       margin: 30px;
13       outline: 1px solid black;
14     }
15     .box {
16       height: 100%;
17       width: 100%;
18       background-color: green;
19       -webkit-transform: rotate(90deg);
20     }
21     #results {
22       margin-top: 100px;
23     }
24   </style>
25   <script src="resources/transform-test-utils.js" type="text/javascript" charset="utf-8"></script>
26   <script type="text/javascript" charset="utf-8">
27     if (window.layoutTestController) {
28       layoutTestController.dumpAsText();
29       layoutTestController.waitUntilDone();
30     }
31
32     var gTests = [
33       // nothing
34       { 'transform' : 'none', 'result' : 'none' },
35       { 'transform' : '', 'result' : 'matrix(5.96046e-08, 1, -1, 5.96046e-08, 0, 0)' }, // this cancels the style - revert back to box
36       { 'transform' : 'inherit', 'result' : 'none' }, // parent element doesn't have transform
37
38       // translate
39       { 'transform' : 'translate(80px, 90px)',  'result' : 'matrix(1, 0, 0, 1, 80, 90)' },
40       { 'transform' : 'translate(100%, 3em)',   'result' : 'matrix(1, 0, 0, 1, 200, 48)' },  // depends on font size
41       { 'transform' : 'translate(50px)',        'result' : 'matrix(1, 0, 0, 1, 50, 0)' },
42       { 'transform' : 'translatex(-20px)',      'result' : 'matrix(1, 0, 0, 1, -20, 0)' },
43       { 'transform' : 'translateX(-20px)',      'result' : 'matrix(1, 0, 0, 1, -20, 0)' },
44       { 'transform' : 'translatey(23px)',       'result' : 'matrix(1, 0, 0, 1, 0, 23)' },
45       { 'transform' : 'translateY(-3em)',       'result' : 'matrix(1, 0, 0, 1, 0, -48)' },  // depends on font size
46
47       // scale
48       { 'transform' : 'scale(1.2)',             'result' : 'matrix(1.2, 0, 0, 1.2, 0, 0)' },
49       { 'transform' : 'scalex(1.5)',            'result' : 'matrix(1.5, 0, 0, 1, 0, 0)' },
50       { 'transform' : 'scaleX(1.5)',            'result' : 'matrix(1.5, 0, 0, 1, 0, 0)' },
51       { 'transform' : 'scaley(1.5)',            'result' : 'matrix(1, 0, 0, 1.5, 0, 0)' },
52       { 'transform' : 'scaleY(1.5)',            'result' : 'matrix(1, 0, 0, 1.5, 0, 0)' },
53       { 'transform' : 'scale(1.2, 0.8)',        'result' : 'matrix(1.2, 0, 0, 0.8, 0, 0)' },
54       { 'transform' : 'scale(-1.2, -0.8)',      'result' : 'matrix(-1.2, -0, -0, -0.8, 0, 0)' },
55
56       // skew
57       { 'transform' : 'skew(-0.7rad, 20deg)',   'result' : 'matrix(1, 0.36397, -0.842288, 1, 0, 0)' },
58       { 'transform' : 'skew(12grad)',           'result' : 'matrix(1, 0, 0.19076, 1, 0, 0)' },
59       { 'transform' : 'skewx(12grad)',          'result' : 'matrix(1, 0, 0.19076, 1, 0, 0)' },
60       { 'transform' : 'skewX(12grad)',          'result' : 'matrix(1, 0, 0.19076, 1, 0, 0)' },
61       { 'transform' : 'skewy(-12grad)',         'result' : 'matrix(1, -0.19076, 0, 1, 0, 0)' },
62       { 'transform' : 'skewY(-12grad)',         'result' : 'matrix(1, -0.19076, 0, 1, 0, 0)' },
63
64       // rotate
65       { 'transform' : 'rotate(45deg)',          'result' : 'matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)' },
66       { 'transform' : 'rotate(90deg)',          'result' : 'matrix(-4.37114e-08, 1, -1, -4.37114e-08, 0, 0)' },
67       { 'transform' : 'rotate(-90deg)',         'result' : 'matrix(-4.37114e-08, -1, 1, -4.37114e-08, 0, 0)' },
68       { 'transform' : 'rotate(180deg)',         'result' : 'matrix(-1, -8.74228e-08, 8.74228e-08, -1, 0, 0)' },
69       { 'transform' : 'rotate(1.2rad)',         'result' : 'matrix(0.362358, 0.932039, -0.932039, 0.362358, 0, 0)' },
70
71       // matrix
72       { 'transform' : 'matrix(1, 0, 0, 1, 0, 0)', 'result' : 'matrix(1, 0, 0, 1, 0, 0)' },
73       { 'transform' : 'matrix(1, -0.19076, 0, 1, 0, 0)', 'result' : 'matrix(1, -0.19076, 0, 1, 0, 0)' },
74       { 'transform' : 'matrix(0.2, 0.3, 0.4, 1.1, 1.2, 1.3)', 'result' : 'matrix(0.2, 0.3, 0.4, 1.1, 1.2, 1.3)' },
75
76       // invalid syntax
77       { 'transform' : ',rotate(12deg)', 'result' : 'none' }, // has comma
78       { 'transform' : 'rotate(12deg),', 'result' : 'none' }, // has comma
79       { 'transform' : 'rotate(12deg) +', 'result' : 'none' }, // has plus
80       { 'transform' : '(translate(50, 20))', 'result' : 'none' }, // bad syntax
81       { 'transform' : 'eggs(10)', 'result' : 'none' }, // invalid function
82
83       // invalid translate
84       { 'transform' : 'translate(50, 20)', 'result' : 'none' }, // missing units
85       { 'transform' : 'translate()', 'result' : 'none' }, // no arguments
86       { 'transform' : 'translate(10px, 20px, 30px)', 'result' : 'none' }, // too many arguments
87       { 'transform' : 'translate(10px, 20px, 30px, 40px)', 'result' : 'none' }, // too many arguments
88       { 'transform' : 'translate(10smidgens)', 'result' : 'none' }, // invalid units
89       { 'transform' : 'translate(10px, 10smidgens)', 'result' : 'none' }, // invalid units
90       { 'transform' : 'translateX(10px, 20px)', 'result' : 'none' }, // too many arguments
91       { 'transform' : 'translateX(10px, 20px, 30px)', 'result' : 'none' }, // too many arguments
92       { 'transform' : 'translateX(10smidgens)', 'result' : 'none' }, // invalid units
93       { 'transform' : 'translateX(10px, 10smidgens)', 'result' : 'none' }, // invalid units
94       { 'transform' : 'translateY(10px, 20px)', 'result' : 'none' }, // too many arguments
95       { 'transform' : 'translateY(10px, 20px, 30px)', 'result' : 'none' }, // too many arguments
96       { 'transform' : 'translateY(10smidgens)', 'result' : 'none' }, // invalid units
97       { 'transform' : 'translateY(10px, 10smidgens)', 'result' : 'none' }, // invalid units
98
99       // invalid scale
100       { 'transform' : 'scale(2px, 2px)', 'result' : 'none' }, // has units
101       { 'transform' : 'scale(2, 2px)', 'result' : 'none' }, // has units
102       { 'transform' : 'scale()', 'result' : 'none' }, // no arguments
103       { 'transform' : 'scale(1, 2, 3)', 'result' : 'none' }, // too many arguments
104       { 'transform' : 'scale(2smidgens)', 'result' : 'none' }, // invalid units
105       { 'transform' : 'scale(2, 2smidgens)', 'result' : 'none' }, // invalid units
106
107       // invalid rotate
108       { 'transform' : 'rotate(10)', 'result' : 'none' }, // no units
109       { 'transform' : 'rotate()', 'result' : 'none' }, // no arguments
110       { 'transform' : 'rotate(10deg, 20deg)', 'result' : 'none' }, // too many arguments
111       { 'transform' : 'rotate(2spins)', 'result' : 'none' }, // invalid units
112       { 'transform' : 'rotate(2, 2spins)', 'result' : 'none' }, // invalid units
113
114       // invalid skew
115       { 'transform' : 'skew(10)', 'result' : 'none' }, // no units
116       { 'transform' : 'skew()', 'result' : 'none' }, // no arguments
117       { 'transform' : 'skew(10deg, 20deg, 30deg)', 'result' : 'none' }, // too many arguments
118       { 'transform' : 'skew(2bits)', 'result' : 'none' }, // invalid units
119       { 'transform' : 'skew(2, 2bits)', 'result' : 'none' }, // invalid units
120       { 'transform' : 'skewX(10)', 'result' : 'none' }, // no units
121       { 'transform' : 'skewX()', 'result' : 'none' }, // no arguments
122       { 'transform' : 'skewX(10deg, 20deg)', 'result' : 'none' }, // too many arguments
123       { 'transform' : 'skewX(2bits)', 'result' : 'none' }, // invalid units
124       { 'transform' : 'skewY(10)', 'result' : 'none' }, // no units
125       { 'transform' : 'skewY()', 'result' : 'none' }, // no arguments
126       { 'transform' : 'skewY(10deg, 20deg)', 'result' : 'none' }, // too many arguments
127       { 'transform' : 'skewY(2bits)', 'result' : 'none' }, // invalid units
128
129       // invalid matrix
130       { 'transform' : 'matrix()', 'result' : 'none' }, // no arguments
131       { 'transform' : 'matrix(2, 0, 0, 2)', 'result' : 'none' }, // not enough arguments
132       { 'transform' : 'matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20, 666)', 'result' : 'none' }, // too many arguments
133       { 'transform' : 'matrix(1, 0, 0, 1, 20px, 50px)', 'result' : 'none' }, // has units
134       
135     ];
136     
137     function runTests()
138     {
139       testTransforms();
140
141       if (window.layoutTestController)
142         layoutTestController.notifyDone();
143     }
144   </script>
145 </head>
146 <body onload="runTests()">
147
148   <div class="container">
149     <div id="test-box" class="box"></div>
150   </div>
151
152   <div id="results">
153   </div>
154 </body>
155 </html>