Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(103)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html

Issue 345903005: calc expressions should support time, angle and frequency values. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Updated patch Created 6 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« LayoutTests/css3/calc/calc-errors.html ('K') | « LayoutTests/css3/calc/calc-errors-expected.txt ('k') | LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values-expected.txt » ('j') | Source/core/css/CSSCalculationValue.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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>
OLDNEW
« LayoutTests/css3/calc/calc-errors.html ('K') | « LayoutTests/css3/calc/calc-errors-expected.txt ('k') | LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values-expected.txt » ('j') | Source/core/css/CSSCalculationValue.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698