OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <script src="../../resources/testharness.js"></script> | |
5 <script src="../../resources/testharnessreport.js"></script> | |
6 </head> | |
7 <body> | |
8 <!-- Time units --> | |
9 <div id="div1" style="-webkit-transition-delay:calc(4s + 1s);"></div> | |
Mike Lawther (Google)
2014/07/04 04:36:40
transition-delay is unprefixed now in Blink. Pleas
| |
10 <div id="div2" style="-webkit-transition-delay:calc(4s + 1ms);"></div> | |
11 <div id="div3" style="-webkit-transition-delay:calc(4ms + 1ms);"></div> | |
12 | |
13 <div id="div4" style="-webkit-transition-delay:calc(4s - 1s);"></div> | |
14 <div id="div5" style="-webkit-transition-delay:calc(4s - 1ms);"></div> | |
15 | |
16 <div id="div6" style="-webkit-transition-delay:calc(4 * 1s);"></div> | |
17 <div id="div7" style="-webkit-transition-delay:calc(4 * 1ms);"></div> | |
18 | |
19 <div id="div8" style="-webkit-transition-delay:calc(4s / 2);"></div> | |
20 <div id="div9" style="-webkit-transition-delay:calc(4ms / 2);"></div> | |
21 | |
22 <!-- Angle units --> | |
23 <div id="div10" style="transform:rotate(calc(45deg + 45deg));"></div> | |
24 <div id="div11" style="transform:rotate(90deg);"></div> | |
25 <div id="div12" style="transform:rotate(calc(45deg + 1rad));"></div> | |
26 <div id="div13" style="transform:rotate(102.3deg);"></div> | |
27 <div id="div14" style="transform:rotate(calc(20deg + 200grad));"></div> | |
28 <div id="div15" style="transform:rotate(200deg);"></div> | |
29 <div id="div16" style="transform:rotate(calc(20deg + 0.5turn));"></div> | |
30 <div id="div17" style="transform:rotate(200deg);"></div> | |
31 | |
32 <div id="div18" style="transform:rotate(calc(45deg - 15deg));"></div> | |
33 <div id="div19" style="transform:rotate(30deg);"></div> | |
34 <div id="div20" style="transform:rotate(calc(90deg - 1rad));"></div> | |
35 <div id="div22" style="transform:rotate(calc(38deg - 20grad));"></div> | |
36 <div id="div23" style="transform:rotate(20deg);"></div> | |
37 <div id="div24" style="transform:rotate(calc(360deg - 0.5turn));"></div> | |
38 <div id="div25" style="transform:rotate(180deg);"></div> | |
39 | |
40 <div id="div26" style="transform:rotate(calc(45rad + 45rad));"></div> | |
41 <div id="div27" style="transform:rotate(90rad);"></div> | |
42 <div id="div28" style="transform:rotate(calc(1rad + 40grad));"></div> | |
43 <div id="div30" style="transform:rotate(calc(1rad + 0.5turn));"></div> | |
44 | |
45 <div id="div32" style="transform:rotate(calc(45rad - 15rad));"></div> | |
46 <div id="div33" style="transform:rotate(30rad);"></div> | |
47 <div id="div34" style="transform:rotate(calc(3rad - 10grad));"></div> | |
48 <div id="div36" style="transform:rotate(calc(4rad - 0.1turn));"></div> | |
49 | |
50 <div id="div38" style="transform:rotate(calc(45grad + 45grad));"></div> | |
51 <div id="div39" style="transform:rotate(90grad);"></div> | |
52 <div id="div40" style="transform:rotate(calc(10grad + 0.5turn));"></div> | |
53 <div id="div41" style="transform:rotate(189deg);"></div> | |
54 | |
55 <div id="div42" style="transform:rotate(calc(45grad - 15grad));"></div> | |
56 <div id="div43" style="transform:rotate(30grad);"></div> | |
57 <div id="div44" style="transform:rotate(calc(100grad - 0.25turn));"></div> | |
58 <div id="div45" style="transform:rotate(0deg);"></div> | |
59 | |
60 <div id="div46" style="transform:rotate(calc(45turn - 15turn));"></div> | |
61 <div id="div47" style="transform:rotate(30turn);"></div> | |
62 | |
63 <div id="div48" style="transform:rotate(calc(45deg * 2));"></div> | |
64 <div id="div49" style="transform:rotate(90deg);"></div> | |
65 <div id="div50" style="transform:rotate(calc(45rad * 2));"></div> | |
66 <div id="div51" style="transform:rotate(90rad);"></div> | |
67 <div id="div52" style="transform:rotate(calc(45grad * 2));"></div> | |
68 <div id="div53" style="transform:rotate(90grad);"></div> | |
69 <div id="div54" style="transform:rotate(calc(45turn * 2));"></div> | |
70 <div id="div55" style="transform:rotate(90turn);"></div> | |
71 | |
72 <div id="div56" style="transform:rotate(calc(90deg / 2));"></div> | |
73 <div id="div57" style="transform:rotate(45deg);"></div> | |
74 <div id="div58" style="transform:rotate(calc(90rad / 2));"></div> | |
75 <div id="div59" style="transform:rotate(45rad);"></div> | |
76 <div id="div60" style="transform:rotate(calc(90grad / 2));"></div> | |
77 <div id="div61" style="transform:rotate(45grad);"></div> | |
78 <div id="div62" style="transform:rotate(calc(90turn / 2));"></div> | |
79 <div id="div63" style="transform:rotate(45turn);"></div> | |
80 | |
81 <!-- Frequency units --> | |
82 <div id="div64" style="pitch:calc(10Hz + 20Hz);"></div> | |
83 <div id="div65" style="pitch:calc(10kHz + 20kHz);"></div> | |
84 <div id="div66" style="pitch:calc(10kHz + 20Hz);"></div> | |
85 | |
86 <div id="div67" style="pitch:calc(20Hz - 10Hz);"></div> | |
87 <div id="div68" style="pitch:calc(20kHz - 10kHz);"></div> | |
88 <div id="div69" style="pitch:calc(20kHz - 10Hz);"></div> | |
89 | |
90 <div id="div70" style="pitch:calc(10Hz * 2);"></div> | |
91 <div id="div71" style="pitch:calc(10kHz * 2);"></div> | |
92 | |
93 <div id="div72" style="pitch:calc(10Hz / 2);"></div> | |
94 <div id="div73" style="pitch:calc(10kHz / 2);"></div> | |
95 | |
96 <!-- Unit conversion for calcs with single values --> | |
97 <div id="div74" style="-webkit-transition-delay:calc(4000ms);"></div> | |
98 | |
99 <div id="div75" style="transform:rotate(calc(45deg));"></div> | |
100 <div id="div76" style="transform:rotate(calc(50grad));"></div> | |
101 | |
102 <script> | |
103 function getCSSProperty(elementId, styleAttribute) { | |
104 var div = document.getElementById(elementId); | |
105 return getComputedStyle(div).getPropertyValue(styleAttribute); | |
106 } | |
107 | |
108 test(function() { | |
109 assert_equals(getCSSProperty('div1', '-webkit-transition-delay'), "5 s"); | |
110 assert_equals(getCSSProperty('div2', '-webkit-transition-delay'), "4 .001s"); | |
111 assert_equals(getCSSProperty('div3', '-webkit-transition-delay'), "0 .005s"); | |
112 assert_equals(getCSSProperty('div4', '-webkit-transition-delay'), "3 s"); | |
113 assert_equals(getCSSProperty('div5', '-webkit-transition-delay'), "3 .999s"); | |
114 assert_equals(getCSSProperty('div6', '-webkit-transition-delay'), "4 s"); | |
115 assert_equals(getCSSProperty('div7', '-webkit-transition-delay'), "0 .004s"); | |
116 assert_equals(getCSSProperty('div8', '-webkit-transition-delay'), "2 s"); | |
117 assert_equals(getCSSProperty('div9', '-webkit-transition-delay'), "0 .002s"); | |
118 | |
119 assert_equals(getCSSProperty('div10', 'transform'), getCSSProperty(' div11', 'transform')); | |
120 assert_equals(getCSSProperty('div12', 'transform'), "matrix(-0.21295 8415159296, 0.977061263899476, -0.977061263899476, -0.212958415159296, 0, 0)"); | |
121 assert_equals(getCSSProperty('div14', 'transform'), getCSSProperty(' div15', 'transform')); | |
122 assert_equals(getCSSProperty('div16', 'transform'), getCSSProperty(' div17', 'transform')); | |
123 assert_equals(getCSSProperty('div18', 'transform'), getCSSProperty(' div19', 'transform')); | |
124 assert_equals(getCSSProperty('div20', 'transform'), "matrix(0.841470 984807897, 0.54030230586814, -0.54030230586814, 0.841470984807897, 0, 0)"); | |
125 assert_equals(getCSSProperty('div22', 'transform'), getCSSProperty(' div23', 'transform')); | |
126 assert_equals(getCSSProperty('div24', 'transform'), getCSSProperty(' div25', 'transform')); | |
127 assert_equals(getCSSProperty('div26', 'transform'), getCSSProperty(' div27', 'transform')); | |
128 assert_equals(getCSSProperty('div28', 'transform'), "matrix(-0.05749 04875548093, 0.998346054151921, -0.998346054151921, -0.0574904875548093, 0, 0)") ; | |
129 assert_equals(getCSSProperty('div30', 'transform'), "matrix(-0.54030 230586814, -0.841470984807896, 0.841470984807896, -0.54030230586814, 0, 0)"); | |
130 assert_equals(getCSSProperty('div32', 'transform'), getCSSProperty(' div33', 'transform')); | |
131 assert_equals(getCSSProperty('div34', 'transform'), "matrix(-0.95572 8013201613, 0.294251533184956, -0.294251533184956, -0.955728013201613, 0, 0)"); | |
132 assert_equals(getCSSProperty('div36', 'transform'), "matrix(-0.97364 6143183581, -0.228063999490797, 0.228063999490797, -0.973646143183581, 0, 0)"); | |
133 assert_equals(getCSSProperty('div38', 'transform'), getCSSProperty(' div39', 'transform')); | |
134 assert_equals(getCSSProperty('div40', 'transform'), getCSSProperty(' div41', 'transform')); | |
135 assert_equals(getCSSProperty('div42', 'transform'), getCSSProperty(' div43', 'transform')); | |
136 assert_equals(getCSSProperty('div44', 'transform'), getCSSProperty(' div45', 'transform')); | |
137 assert_equals(getCSSProperty('div46', 'transform'), getCSSProperty(' div47', 'transform')); | |
138 assert_equals(getCSSProperty('div48', 'transform'), getCSSProperty(' div49', 'transform')); | |
139 assert_equals(getCSSProperty('div50', 'transform'), getCSSProperty(' div51', 'transform')); | |
140 assert_equals(getCSSProperty('div52', 'transform'), getCSSProperty(' div53', 'transform')); | |
141 assert_equals(getCSSProperty('div54', 'transform'), getCSSProperty(' div55', 'transform')); | |
142 assert_equals(getCSSProperty('div56', 'transform'), getCSSProperty(' div57', 'transform')); | |
143 assert_equals(getCSSProperty('div58', 'transform'), getCSSProperty(' div59', 'transform')); | |
144 assert_equals(getCSSProperty('div60', 'transform'), getCSSProperty(' div61', 'transform')); | |
145 assert_equals(getCSSProperty('div62', 'transform'), getCSSProperty(' div63', 'transform')); | |
146 assert_equals(getCSSProperty('div64', 'transform'), getCSSProperty(' div65', 'transform')); | |
147 | |
148 // NOTE: Since there is no CSS property that uses frequency at the m oment we only test the parsing. | |
149 assert_equals(getCSSProperty('div65', 'pitch'), null); | |
150 assert_equals(getCSSProperty('div66', 'pitch'), null); | |
151 assert_equals(getCSSProperty('div67', 'pitch'), null); | |
152 assert_equals(getCSSProperty('div68', 'pitch'), null); | |
153 assert_equals(getCSSProperty('div69', 'pitch'), null); | |
154 assert_equals(getCSSProperty('div70', 'pitch'), null); | |
155 assert_equals(getCSSProperty('div71', 'pitch'), null); | |
156 assert_equals(getCSSProperty('div72', 'pitch'), null); | |
157 assert_equals(getCSSProperty('div73', 'pitch'), null); | |
158 | |
159 assert_equals(getCSSProperty('div74', '-webkit-transition-delay'), " 4s"); | |
160 assert_equals(getCSSProperty('div75', 'transform'), getCSSProperty(' div76', 'transform')); | |
161 }, "Tests that calc() can contain angle, time and frequency values."); | |
162 </script> | |
163 </body> | |
164 </html> | |
OLD | NEW |