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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/calc/calc-errors.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, 4 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
« no previous file with comments | « no previous file | LayoutTests/css3/calc/calc-errors-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <script src="../../resources/testharness.js"></script>
3 <script src="../../resources/testharnessreport.js"></script>
2 <style> 4 <style>
3 #test div { 5 div {
4 height: 100px; 6 height: 100px;
5 background-color: red; 7 width: 100px;
8 transform: matrix(1, 0, 0, 1, 0, 0);
9 animation-delay: 100s;
6 } 10 }
7 </style> 11 </style>
8 12
9 <p>
10 All boxes below should be 100px * 100px and green.
11 </p>
12
13 <div id="test">
14
15 <!-- just plain bad --> 13 <!-- just plain bad -->
16 <div style="width: 100px; width: calc(;">unclosed calc</div> 14 <div style="width: calc(;">unclosed calc</div>
17 <div style="width: 100px; width: calc( flim;">unclosed calc with garbage</div> 15 <div style="width: calc( flim;">unclosed calc with garbage</div>
18 <div style="width: 100px; width: calc( flim );">garbage</div> 16 <div style="width: calc( flim );">garbage</div>
17 <div style="width: calc( auto );">garbage</div>
19 18
20 <!-- unsupported units --> 19 <!-- unsupported units -->
21 <div style="width: 100px; width: calc(10dpi);">dpi</div> 20 <div style="width: calc(10dpi);">dpi</div>
22 <div style="width: 100px; width: calc(10dpi / 4);">dpi / number</div> 21 <div style="width: calc(10dpi / 4);">dpi / number</div>
23 <div style="width: 100px; width: calc(5dpi + 5dpi);">dpi + dpi</div> 22 <div style="width: calc(5dpi + 5dpi);">dpi + dpi</div>
23 <div style="width: calc(42fr);">fr</div>
24 24
25 <!-- zero division --> 25 <!-- zero division -->
26 <div style="width: 100px; width: calc(1ex / 0);">zero division</div> 26 <div style="width: calc(1ex / 0);">zero division</div>
27
28 <!-- wrong combination -->
29 <div style="width: 100px; width: calc(200);">non length</div>
30 <div style="width: 100px; width: calc(10 + 10px);">number + length</div>
31 <div style="width: 100px; width: calc(10px + 10);">length + number</div>
32 <div style="width: 100px; width: calc(10% + 100);">percent + number</div>
33 <div style="width: 100px; width: calc(100 + 10%);">number + percent</div>
34
35 <div style="width: 100px; width: calc(300px - 100);">length - number</div>
36 <div style="width: 100px; width: calc(300 - 100px);">number - length</div>
37 <div style="width: 100px; width: calc(100% - 10);">percent - number</div>
38 <div style="width: 100px; width: calc(100 - 10%);">number - percent</div>
39
40 <div style="width: 100px; width: calc(10px*100px);">length * length</div>
41 <div style="width: 100px; width: calc(10px*100%);">length * percent</div>
42 <div style="width: 100px; width: calc(10%*100px);">percent * length</div>
43 <div style="width: 100px; width: calc(10%*100%);">percent * percent</div>
44
45 <div style="width: 100px; width: calc(100/10px);">number / length</div>
46 <div style="width: 100px; width: calc(100/10%);">number / percent</div>
47 <div style="width: 100px; width: calc(100px/10px);">length / length</div>
48 <div style="width: 100px; width: calc(100px/10%);">length / percent</div>
49 <div style="width: 100px; width: calc(100%/10px);">percent / length</div>
50 <div style="width: 100px; width: calc(100%/10%);">percent / percent</div>
51
52 <div style="width: 100px; width: calc(100 mod 10px);">number mod length</div>
53 <div style="width: 100px; width: calc(100 mod 10%);">number mod percent</div>
54 <div style="width: 100px; width: calc(100px mod 10px);">length mod length</div>
55 <div style="width: 100px; width: calc(100px mod 10%);">length mod percent</div>
56 <div style="width: 100px; width: calc(100% mod 10px);">percent mod length</div>
57 <div style="width: 100px; width: calc(100% mod 10%);">percent mod percent</div>
58 27
59 <!-- mod, +, - require whitespaces around the operator --> 28 <!-- mod, +, - require whitespaces around the operator -->
60 <div style="width: 100px; width: calc(1 mod10 * 200px);">mod10 </div> 29 <div style="width: calc(1 mod10 * 200px);">mod10 </div>
61 <div style="width: 100px; width: calc(1mod 10 * 200px);">1mod</div> 30 <div style="width: calc(1mod 10 * 200px);">1mod</div>
62 <div style="width: 100px; width: calc(70px+40px);">70px+40px no whitespace aroun d + </div> 31 <div style="width: calc(70px+40px);">70px+40px no whitespace around + </div>
63 <div style="width: 100px; width: calc(70px +40px);">70px +40px no whitespace on right of +</div> 32 <div style="width: calc(70px +40px);">70px +40px no whitespace on right of +</di v>
64 <div style="width: 100px; width: calc(70px+ 40px);">70px+ 40px no whitespace on left of +</div> 33 <div style="width: calc(70px+ 40px);">70px+ 40px no whitespace on left of +</div >
65 <div style="width: 100px; width: calc(70px+-40px);">70px+-40px no whitespace aro und + </div> 34 <div style="width: calc(70px+-40px);">70px+-40px no whitespace around + </div>
66 <div style="width: 100px; width: calc(70px-40px);">70px-40px no whitespace aroun d - </div> 35 <div style="width: calc(70px-40px);">70px-40px no whitespace around - </div>
67 <div style="width: 100px; width: calc(70px -40px);">70px -40px no whitespace on right of -</div> 36 <div style="width: calc(70px -40px);">70px -40px no whitespace on right of -</di v>
68 <div style="width: 100px; width: calc(70px- 40px);">70px- 40px no whitespace on left of -</div> 37 <div style="width: calc(70px- 40px);">70px- 40px no whitespace on left of -</div >
69 <div style="width: 100px; width: calc(70px-+40px);">70px-+40px no whitespace aro und - </div> 38 <div style="width: calc(70px-+40px);">70px-+40px no whitespace around - </div>
70 39
71 <!-- too many nests should be rejected to avoid stack overflow --> 40 <!-- too many nests should be rejected to avoid stack overflow -->
72 <div style="width: 100px; width: calc((((((((((((((((((((((((((((((((((((((((((( (((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( ((((((200px))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) ))))))))))))))))))))))))))))))))))))))))))))))))))))))))))));">too many nests</d iv> 41 <div style="width: calc((((((((((((((((((((((((((((((((((((((((((((((((((((((((( ((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((200px))) )))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) ))))))))))))))))))))))))))))))))))))))))))))));">too many nests</div>
73 42
74 <!-- invalid formulas --> 43 <!-- invalid formulas -->
75 <div style="width: 100px; width: calc(200px*);">end with operator</div> 44 <div style="width: calc(200px*);">end with operator</div>
76 <div style="width: 100px; width: calc(+ +200px);">start with operator</div> 45 <div style="width: calc(+ +200px);">start with operator</div>
77 <div style="width: 100px; width: calc();">no expressions</div> 46 <div style="width: calc();">no expressions</div>
78 <div style="width: 100px; width: calc(100px + + +100px);">too many pluses</div> 47 <div style="width: calc(100px + + +100px);">too many pluses</div>
79 <div style="width: 100px; width: calc(200px 200px);">no binary operator</div> 48 <div style="width: calc(200px 200px);">no binary operator</div>
80 <div style="width: 100px; width: calc(100px * * 2);">two binary operators</div> 49 <div style="width: calc(100px * * 2);">two binary operators</div>
81 <div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div> 50 <div style="width: calc(100px @ 2);">invalid operator '@'</div>
82 <div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div> 51 <div style="width: calc(1 flim 2);">invalid operator 'flim'</div>
83 <div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div> 52 <div style="width: calc(100px @ 2);">invalid operator '@'</div>
84 <div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div> 53 <div style="width: calc(1 flim 2);">invalid operator 'flim'</div>
85 <div style="width: 100px; width: calc(1 flim (2));">invalid operator 'flim' with parens</div> 54 <div style="width: calc(1 flim (2));">invalid operator 'flim' with parens</div>
86 55
87 56 <!-- Single unitless non length value -->
88 </div> 57 <div style="width: 100px; width: calc(200);">non length</div>
58
59 <!-- Wrong combinations -->
60 <div style="width: calc(10 + 10px);">number + length</div>
61 <div style="width: calc(10px + 10);">length + number</div>
62 <div style="width: calc(10% + 100);">percent + number</div>
63 <div style="width: calc(100 + 10%);">number + percent</div>
64
65 <div style="transform: rotate(calc(42deg + 10))">angle + number</div>
66 <div style="transform: rotate(calc(10 + 42rad))">number + angle</div>
67 <div style="transform: rotate(calc(42deg + 10px))">angle + length</div>
68 <div style="transform: rotate(calc(10px + 42rad))">length + angle</div>
69 <div style="transform: rotate(calc(42rad + 10%))">angle + percent</div>
70 <div style="transform: rotate(calc(10% + 42rad))">percent + angle</div>
71 <div style="transform: rotate(calc(42grad + 10ms))">angle + time</div>
72 <div style="transform: rotate(calc(10s + 42grad))">time + angle</div>
73 <div style="transform: rotate(calc(42turn + 10Hz))">angle + frequency</div>
74 <div style="transform: rotate(calc(10kHz + 42turn))">frequency + angle</div>
75
76 <div style="animation-delay: rotate(calc(10ms + 10)">time + number</div>
77 <div style="animation-delay: rotate(calc(10 + 10s))">number + time</div>
78 <div style="animation-delay: rotate(calc(10ms + 10px)">time + length</div>
79 <div style="animation-delay: rotate(calc(10px + 10s))">length + time</div>
80 <div style="animation-delay: rotate(calc(10ms + 10%))">time + percent</div>
81 <div style="animation-delay: rotate(calc(10% + 10s))">percent + time</div>
82 <div style="animation-delay: rotate(calc(10ms + 10rad))">time + angle</div>
83 <div style="animation-delay: rotate(calc(10deg + 10s))">angle + time</div>
84 <div style="animation-delay: rotate(calc(10ms + 10Hz))">time + frequency</div>
85 <div style="animation-delay: rotate(calc(10kHz + 10s))">frequency + time</div>
86
87
88 <div style="width: calc(300px - 100);">length - number</div>
89 <div style="width: calc(300 - 100px);">number - length</div>
90 <div style="width: calc(100% - 10);">percent - number</div>
91 <div style="width: calc(100 - 10%);">number - percent</div>
92 <div style="transform: rotate(calc(42deg - 10))">angle - number</div>
93 <div style="transform: rotate(calc(10 - 42rad))">number - angle</div>
94 <div style="transform: rotate(calc(42deg - 10px))">angle - length</div>
95 <div style="transform: rotate(calc(10px - 42rad))">length - angle</div>
96 <div style="transform: rotate(calc(42rad - 10%))">angle - percent</div>
97 <div style="transform: rotate(calc(10% - 42rad))">percent - angle</div>
98 <div style="transform: rotate(calc(42grad - 10ms))">angle - time</div>
99 <div style="transform: rotate(calc(10s - 42grad))">time - angle</div>
100 <div style="transform: rotate(calc(42turn - 10Hz))">angle - frequency</div>
101 <div style="transform: rotate(calc(10kHz - 42turn))">frequency - angle</div>
102
103 <div style="animation-delay: rotate(calc(10ms - 10)">time - number</div>
104 <div style="animation-delay: rotate(calc(10 - 10s))">number - time</div>
105 <div style="animation-delay: rotate(calc(10ms - 10px))">time - length</div>
106 <div style="animation-delay: rotate(calc(10px - 10s))">length - time</div>
107 <div style="animation-delay: rotate(calc(10ms - 10%))">time - percent</div>
108 <div style="animation-delay: rotate(calc(10% - 10s))">percent - time</div>
109 <div style="animation-delay: rotate(calc(10ms - 10turn))">time - angle</div>
110 <div style="animation-delay: rotate(calc(10rad - 10s))">angle - time</div>
111 <div style="animation-delay: rotate(calc(10ms - 10Hz))">time - frequency</div>
112 <div style="animation-delay: rotate(calc(10kHz - 10s))">frequency - time</div>
113
114
115 <div style="width: calc(10px * 100px);">length * length</div>
116 <div style="width: calc(10px * 100%);">length * percent</div>
117 <div style="width: calc(10% * 100px);">percent * length</div>
118 <div style="width: calc(10% * 100%);">percent * percent</div>
119
120 <div style="transform: rotate(calc(42deg * 10px))">angle * length</div>
121 <div style="transform: rotate(calc(10px * 42rad))">length * angle</div>
122 <div style="transform: rotate(calc(42rad * 10%))">angle * percent</div>
123 <div style="transform: rotate(calc(10% * 42rad))">percent * angle</div>
124 <div style="transform: rotate(calc(42grad * 10ms))">angle * time</div>
125 <div style="transform: rotate(calc(10s * 42grad))">time * angle</div>
126 <div style="transform: rotate(calc(42turn * 10Hz))">angle * frequency</div>
127 <div style="transform: rotate(calc(10kHz * 42turn))">frequency * angle</div>
128
129 <div style="animation-delay: rotate(calc(10ms * 10px))">time * length</div>
130 <div style="animation-delay: rotate(calc(10px * 10s))">length * time</div>
131 <div style="animation-delay: rotate(calc(10ms * 10%))">time * percent</div>
132 <div style="animation-delay: rotate(calc(10% * 10s))">percent * time</div>
133 <div style="animation-delay: rotate(calc(10ms * 10deg))">time * angle</div>
134 <div style="animation-delay: rotate(calc(10turn * 10s))">angle * time</div>
135 <div style="animation-delay: rotate(calc(10ms * 10Hz))">time * frequency</div>
136 <div style="animation-delay: rotate(calc(10kHz * 10s))">frequency * time</div>
137
138
139 <div style="width: calc(100 / 10px);">number / length</div>
140 <div style="width: calc(100 / 10%);">number / percent</div>
141 <div style="width: calc(100px / 10px);">length / length</div>
142 <div style="width: calc(100px / 10%);">length / percent</div>
143 <div style="width: calc(100% / 10px);">percent / length</div>
144 <div style="width: calc(100% / 10%);">percent / percent</div>
145
146 <div style="transform: rotate(calc(10 / 42rad))">number / angle</div>
147 <div style="transform: rotate(calc(42deg / 10px))">angle / length</div>
148 <div style="transform: rotate(calc(10px / 42rad))">length / angle</div>
149 <div style="transform: rotate(calc(42rad / 10%))">angle / percent</div>
150 <div style="transform: rotate(calc(10% / 42rad))">percent / angle</div>
151 <div style="transform: rotate(calc(42grad / 10ms))">angle / time</div>
152 <div style="transform: rotate(calc(10s / 42grad))">time / angle</div>
153 <div style="transform: rotate(calc(42turn / 10Hz))">angle / frequency</div>
154 <div style="transform: rotate(calc(10kHz / 42turn))">frequency / angle</div>
155
156 <div style="animation-delay: rotate(calc(10 / 10s))">number / time</div>
157 <div style="animation-delay: rotate(calc(10ms / 10px))">time / length</div>
158 <div style="animation-delay: rotate(calc(10px / 10s))">length / time</div>
159 <div style="animation-delay: rotate(calc(10ms / 10%))">time / percent</div>
160 <div style="animation-delay: rotate(calc(10% / 10s))">percent / time</div>
161 <div style="animation-delay: rotate(calc(10ms / 10grad))">time / angle</div>
162 <div style="animation-delay: rotate(calc(10rad / 10s))">angle / time</div>
163 <div style="animation-delay: rotate(calc(10ms / 10Hz))">time / frequency</div>
164 <div style="animation-delay: rotate(calc(10kHz / 10s))">frequency / time</div>
89 165
90 <script> 166 <script>
91 if (window.testRunner)
92 testRunner.dumpAsText();
93 167
94 var test = document.getElementById("test"); 168 test(function() {
95 for (var element = test.firstChild; element; element = element.nextSibling) { 169 var divs = document.getElementsByTagName("div");
96 var width = element.offsetWidth; 170 for (var i = 0, element = divs[i]; i < divs.length; ++i) {
97 var error = []; 171 assert_equals(getComputedStyle(element).getPropertyValue("width"), "100p x");
98 if (width != 100) 172 assert_equals(getComputedStyle(element).getPropertyValue("transform"), " matrix(1, 0, 0, 1, 0, 0)");
99 error.push("expected width of 100, but was " + width); 173 assert_equals(getComputedStyle(element).getPropertyValue("animation-dela y"), "100s");
100 var height = element.offsetHeight; 174 }
101 if (height != 100) 175 }, "Tests invalid calc() expression handling.");
102 error.push("expected height of 100, but was " + width);
103 176
104 if (error == "") {
105 element.style.backgroundColor = "green";
106 element.innerHTML += " => PASS";
107 } else {
108 element.innerHTML += " => FAIL: " + error.join(", ");
109 }
110 }
111 </script> 177 </script>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/css3/calc/calc-errors-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698