<!DOCTYPE HTML>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
div {
height: 100px;
width: 100px;
transform: matrix(1, 0, 0, 1, 0, 0);
animation-delay: 100s;
}
</style>
<!-- just plain bad -->
<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: 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: calc(1ex / 0);">zero division</div>
<!-- mod, +, - require whitespaces around the operator -->
<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>
<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 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 around + </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 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 around - </div>
<!-- too many nests should be rejected to avoid stack overflow -->
<div style="width: calc(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((200px)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))));">too many nests</div>
<!-- invalid formulas -->
<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>
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>
Codebase Browser
chromium