| <!DOCTYPE HTML> |
| <style> |
| #test div { |
| height: 100px; |
| background-color: red; |
| } |
| </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> |
| |
| <!-- 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> |
| |
| <!-- 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> |
| |
| <!-- too many nests should be rejected to avoid stack overflow --> |
| <div style="width: 100px; 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> |
| |
| <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(", "); |
| } |
| } |
| </script> |
