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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified 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, 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/css3/calc/calc-errors-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/css3/calc/calc-errors.html
diff --git a/LayoutTests/css3/calc/calc-errors.html b/LayoutTests/css3/calc/calc-errors.html
index 310e495dd217c4f57cfbe141bfd41e924bd54270..e9a9a0ca2e7a092fea7ca8a14010b14108e050d4 100644
--- a/LayoutTests/css3/calc/calc-errors.html
+++ b/LayoutTests/css3/calc/calc-errors.html
@@ -1,111 +1,177 @@
<!DOCTYPE HTML>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
<style>
-#test div {
+div {
height: 100px;
- background-color: red;
+ width: 100px;
+ transform: matrix(1, 0, 0, 1, 0, 0);
+ animation-delay: 100s;
}
</style>
-<p>
- All boxes below should be 100px * 100px and green.
-</p>
-
-<div id="test">
-
<!-- just plain bad -->
-<div style="width: 100px; width: calc(;">unclosed calc</div>
-<div style="width: 100px; width: calc( flim;">unclosed calc with garbage</div>
-<div style="width: 100px; width: calc( flim );">garbage</div>
+<div style="width: calc(;">unclosed calc</div>
+<div style="width: calc( flim;">unclosed calc with garbage</div>
+<div style="width: calc( flim );">garbage</div>
+<div style="width: calc( auto );">garbage</div>
<!-- unsupported units -->
-<div style="width: 100px; width: calc(10dpi);">dpi</div>
-<div style="width: 100px; width: calc(10dpi / 4);">dpi / number</div>
-<div style="width: 100px; width: calc(5dpi + 5dpi);">dpi + dpi</div>
+<div style="width: calc(10dpi);">dpi</div>
+<div style="width: calc(10dpi / 4);">dpi / number</div>
+<div style="width: calc(5dpi + 5dpi);">dpi + dpi</div>
+<div style="width: calc(42fr);">fr</div>
<!-- zero division -->
-<div style="width: 100px; width: calc(1ex / 0);">zero division</div>
-
-<!-- wrong combination -->
-<div style="width: 100px; width: calc(200);">non length</div>
-<div style="width: 100px; width: calc(10 + 10px);">number + length</div>
-<div style="width: 100px; width: calc(10px + 10);">length + number</div>
-<div style="width: 100px; width: calc(10% + 100);">percent + number</div>
-<div style="width: 100px; width: calc(100 + 10%);">number + percent</div>
-
-<div style="width: 100px; width: calc(300px - 100);">length - number</div>
-<div style="width: 100px; width: calc(300 - 100px);">number - length</div>
-<div style="width: 100px; width: calc(100% - 10);">percent - number</div>
-<div style="width: 100px; width: calc(100 - 10%);">number - percent</div>
-
-<div style="width: 100px; width: calc(10px*100px);">length * length</div>
-<div style="width: 100px; width: calc(10px*100%);">length * percent</div>
-<div style="width: 100px; width: calc(10%*100px);">percent * length</div>
-<div style="width: 100px; width: calc(10%*100%);">percent * percent</div>
-
-<div style="width: 100px; width: calc(100/10px);">number / length</div>
-<div style="width: 100px; width: calc(100/10%);">number / percent</div>
-<div style="width: 100px; width: calc(100px/10px);">length / length</div>
-<div style="width: 100px; width: calc(100px/10%);">length / percent</div>
-<div style="width: 100px; width: calc(100%/10px);">percent / length</div>
-<div style="width: 100px; width: calc(100%/10%);">percent / percent</div>
-
-<div style="width: 100px; width: calc(100 mod 10px);">number mod length</div>
-<div style="width: 100px; width: calc(100 mod 10%);">number mod percent</div>
-<div style="width: 100px; width: calc(100px mod 10px);">length mod length</div>
-<div style="width: 100px; width: calc(100px mod 10%);">length mod percent</div>
-<div style="width: 100px; width: calc(100% mod 10px);">percent mod length</div>
-<div style="width: 100px; width: calc(100% mod 10%);">percent mod percent</div>
+<div style="width: calc(1ex / 0);">zero division</div>
<!-- mod, +, - require whitespaces around the operator -->
-<div style="width: 100px; width: calc(1 mod10 * 200px);">mod10 </div>
-<div style="width: 100px; width: calc(1mod 10 * 200px);">1mod</div>
-<div style="width: 100px; width: calc(70px+40px);">70px+40px no whitespace around + </div>
-<div style="width: 100px; width: calc(70px +40px);">70px +40px no whitespace on right of +</div>
-<div style="width: 100px; width: calc(70px+ 40px);">70px+ 40px no whitespace on left of +</div>
-<div style="width: 100px; width: calc(70px+-40px);">70px+-40px no whitespace around + </div>
-<div style="width: 100px; width: calc(70px-40px);">70px-40px no whitespace around - </div>
-<div style="width: 100px; width: calc(70px -40px);">70px -40px no whitespace on right of -</div>
-<div style="width: 100px; width: calc(70px- 40px);">70px- 40px no whitespace on left of -</div>
-<div style="width: 100px; width: calc(70px-+40px);">70px-+40px no whitespace around - </div>
+<div style="width: calc(1 mod10 * 200px);">mod10 </div>
+<div style="width: calc(1mod 10 * 200px);">1mod</div>
+<div style="width: calc(70px+40px);">70px+40px no whitespace around + </div>
+<div style="width: calc(70px +40px);">70px +40px no whitespace on right of +</div>
+<div style="width: calc(70px+ 40px);">70px+ 40px no whitespace on left of +</div>
+<div style="width: calc(70px+-40px);">70px+-40px no whitespace around + </div>
+<div style="width: calc(70px-40px);">70px-40px no whitespace around - </div>
+<div style="width: calc(70px -40px);">70px -40px no whitespace on right of -</div>
+<div style="width: calc(70px- 40px);">70px- 40px no whitespace on left of -</div>
+<div style="width: calc(70px-+40px);">70px-+40px no whitespace around - </div>
<!-- too many nests should be rejected to avoid stack overflow -->
-<div style="width: 100px; width: calc(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((200px)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))));">too many nests</div>
+<div style="width: calc(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((200px)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))));">too many nests</div>
<!-- invalid formulas -->
-<div style="width: 100px; width: calc(200px*);">end with operator</div>
-<div style="width: 100px; width: calc(+ +200px);">start with operator</div>
-<div style="width: 100px; width: calc();">no expressions</div>
-<div style="width: 100px; width: calc(100px + + +100px);">too many pluses</div>
-<div style="width: 100px; width: calc(200px 200px);">no binary operator</div>
-<div style="width: 100px; width: calc(100px * * 2);">two binary operators</div>
-<div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div>
-<div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div>
-<div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div>
-<div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div>
-<div style="width: 100px; width: calc(1 flim (2));">invalid operator 'flim' with parens</div>
-
-
-</div>
+<div style="width: calc(200px*);">end with operator</div>
+<div style="width: calc(+ +200px);">start with operator</div>
+<div style="width: calc();">no expressions</div>
+<div style="width: calc(100px + + +100px);">too many pluses</div>
+<div style="width: calc(200px 200px);">no binary operator</div>
+<div style="width: calc(100px * * 2);">two binary operators</div>
+<div style="width: calc(100px @ 2);">invalid operator '@'</div>
+<div style="width: calc(1 flim 2);">invalid operator 'flim'</div>
+<div style="width: calc(100px @ 2);">invalid operator '@'</div>
+<div style="width: calc(1 flim 2);">invalid operator 'flim'</div>
+<div style="width: calc(1 flim (2));">invalid operator 'flim' with parens</div>
+
+<!-- Single unitless non length value -->
+<div style="width: 100px; width: calc(200);">non length</div>
+
+<!-- Wrong combinations -->
+<div style="width: calc(10 + 10px);">number + length</div>
+<div style="width: calc(10px + 10);">length + number</div>
+<div style="width: calc(10% + 100);">percent + number</div>
+<div style="width: calc(100 + 10%);">number + percent</div>
+
+<div style="transform: rotate(calc(42deg + 10))">angle + number</div>
+<div style="transform: rotate(calc(10 + 42rad))">number + angle</div>
+<div style="transform: rotate(calc(42deg + 10px))">angle + length</div>
+<div style="transform: rotate(calc(10px + 42rad))">length + angle</div>
+<div style="transform: rotate(calc(42rad + 10%))">angle + percent</div>
+<div style="transform: rotate(calc(10% + 42rad))">percent + angle</div>
+<div style="transform: rotate(calc(42grad + 10ms))">angle + time</div>
+<div style="transform: rotate(calc(10s + 42grad))">time + angle</div>
+<div style="transform: rotate(calc(42turn + 10Hz))">angle + frequency</div>
+<div style="transform: rotate(calc(10kHz + 42turn))">frequency + angle</div>
+
+<div style="animation-delay: rotate(calc(10ms + 10)">time + number</div>
+<div style="animation-delay: rotate(calc(10 + 10s))">number + time</div>
+<div style="animation-delay: rotate(calc(10ms + 10px)">time + length</div>
+<div style="animation-delay: rotate(calc(10px + 10s))">length + time</div>
+<div style="animation-delay: rotate(calc(10ms + 10%))">time + percent</div>
+<div style="animation-delay: rotate(calc(10% + 10s))">percent + time</div>
+<div style="animation-delay: rotate(calc(10ms + 10rad))">time + angle</div>
+<div style="animation-delay: rotate(calc(10deg + 10s))">angle + time</div>
+<div style="animation-delay: rotate(calc(10ms + 10Hz))">time + frequency</div>
+<div style="animation-delay: rotate(calc(10kHz + 10s))">frequency + time</div>
+
+
+<div style="width: calc(300px - 100);">length - number</div>
+<div style="width: calc(300 - 100px);">number - length</div>
+<div style="width: calc(100% - 10);">percent - number</div>
+<div style="width: calc(100 - 10%);">number - percent</div>
+<div style="transform: rotate(calc(42deg - 10))">angle - number</div>
+<div style="transform: rotate(calc(10 - 42rad))">number - angle</div>
+<div style="transform: rotate(calc(42deg - 10px))">angle - length</div>
+<div style="transform: rotate(calc(10px - 42rad))">length - angle</div>
+<div style="transform: rotate(calc(42rad - 10%))">angle - percent</div>
+<div style="transform: rotate(calc(10% - 42rad))">percent - angle</div>
+<div style="transform: rotate(calc(42grad - 10ms))">angle - time</div>
+<div style="transform: rotate(calc(10s - 42grad))">time - angle</div>
+<div style="transform: rotate(calc(42turn - 10Hz))">angle - frequency</div>
+<div style="transform: rotate(calc(10kHz - 42turn))">frequency - angle</div>
+
+<div style="animation-delay: rotate(calc(10ms - 10)">time - number</div>
+<div style="animation-delay: rotate(calc(10 - 10s))">number - time</div>
+<div style="animation-delay: rotate(calc(10ms - 10px))">time - length</div>
+<div style="animation-delay: rotate(calc(10px - 10s))">length - time</div>
+<div style="animation-delay: rotate(calc(10ms - 10%))">time - percent</div>
+<div style="animation-delay: rotate(calc(10% - 10s))">percent - time</div>
+<div style="animation-delay: rotate(calc(10ms - 10turn))">time - angle</div>
+<div style="animation-delay: rotate(calc(10rad - 10s))">angle - time</div>
+<div style="animation-delay: rotate(calc(10ms - 10Hz))">time - frequency</div>
+<div style="animation-delay: rotate(calc(10kHz - 10s))">frequency - time</div>
+
+
+<div style="width: calc(10px * 100px);">length * length</div>
+<div style="width: calc(10px * 100%);">length * percent</div>
+<div style="width: calc(10% * 100px);">percent * length</div>
+<div style="width: calc(10% * 100%);">percent * percent</div>
+
+<div style="transform: rotate(calc(42deg * 10px))">angle * length</div>
+<div style="transform: rotate(calc(10px * 42rad))">length * angle</div>
+<div style="transform: rotate(calc(42rad * 10%))">angle * percent</div>
+<div style="transform: rotate(calc(10% * 42rad))">percent * angle</div>
+<div style="transform: rotate(calc(42grad * 10ms))">angle * time</div>
+<div style="transform: rotate(calc(10s * 42grad))">time * angle</div>
+<div style="transform: rotate(calc(42turn * 10Hz))">angle * frequency</div>
+<div style="transform: rotate(calc(10kHz * 42turn))">frequency * angle</div>
+
+<div style="animation-delay: rotate(calc(10ms * 10px))">time * length</div>
+<div style="animation-delay: rotate(calc(10px * 10s))">length * time</div>
+<div style="animation-delay: rotate(calc(10ms * 10%))">time * percent</div>
+<div style="animation-delay: rotate(calc(10% * 10s))">percent * time</div>
+<div style="animation-delay: rotate(calc(10ms * 10deg))">time * angle</div>
+<div style="animation-delay: rotate(calc(10turn * 10s))">angle * time</div>
+<div style="animation-delay: rotate(calc(10ms * 10Hz))">time * frequency</div>
+<div style="animation-delay: rotate(calc(10kHz * 10s))">frequency * time</div>
+
+
+<div style="width: calc(100 / 10px);">number / length</div>
+<div style="width: calc(100 / 10%);">number / percent</div>
+<div style="width: calc(100px / 10px);">length / length</div>
+<div style="width: calc(100px / 10%);">length / percent</div>
+<div style="width: calc(100% / 10px);">percent / length</div>
+<div style="width: calc(100% / 10%);">percent / percent</div>
+
+<div style="transform: rotate(calc(10 / 42rad))">number / angle</div>
+<div style="transform: rotate(calc(42deg / 10px))">angle / length</div>
+<div style="transform: rotate(calc(10px / 42rad))">length / angle</div>
+<div style="transform: rotate(calc(42rad / 10%))">angle / percent</div>
+<div style="transform: rotate(calc(10% / 42rad))">percent / angle</div>
+<div style="transform: rotate(calc(42grad / 10ms))">angle / time</div>
+<div style="transform: rotate(calc(10s / 42grad))">time / angle</div>
+<div style="transform: rotate(calc(42turn / 10Hz))">angle / frequency</div>
+<div style="transform: rotate(calc(10kHz / 42turn))">frequency / angle</div>
+
+<div style="animation-delay: rotate(calc(10 / 10s))">number / time</div>
+<div style="animation-delay: rotate(calc(10ms / 10px))">time / length</div>
+<div style="animation-delay: rotate(calc(10px / 10s))">length / time</div>
+<div style="animation-delay: rotate(calc(10ms / 10%))">time / percent</div>
+<div style="animation-delay: rotate(calc(10% / 10s))">percent / time</div>
+<div style="animation-delay: rotate(calc(10ms / 10grad))">time / angle</div>
+<div style="animation-delay: rotate(calc(10rad / 10s))">angle / time</div>
+<div style="animation-delay: rotate(calc(10ms / 10Hz))">time / frequency</div>
+<div style="animation-delay: rotate(calc(10kHz / 10s))">frequency / time</div>
<script>
-if (window.testRunner)
- testRunner.dumpAsText();
-
-var test = document.getElementById("test");
-for (var element = test.firstChild; element; element = element.nextSibling) {
- var width = element.offsetWidth;
- var error = [];
- if (width != 100)
- error.push("expected width of 100, but was " + width);
- var height = element.offsetHeight;
- if (height != 100)
- error.push("expected height of 100, but was " + width);
-
- if (error == "") {
- element.style.backgroundColor = "green";
- element.innerHTML += " => PASS";
- } else {
- element.innerHTML += " => FAIL: " + error.join(", ");
+
+test(function() {
+ var divs = document.getElementsByTagName("div");
+ for (var i = 0, element = divs[i]; i < divs.length; ++i) {
+ assert_equals(getComputedStyle(element).getPropertyValue("width"), "100px");
+ assert_equals(getComputedStyle(element).getPropertyValue("transform"), "matrix(1, 0, 0, 1, 0, 0)");
+ assert_equals(getComputedStyle(element).getPropertyValue("animation-delay"), "100s");
}
-}
+}, "Tests invalid calc() expression handling.");
+
</script>
« 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