Google Git
Sign in
chromium / external / github.com / WebKit / webkit / refs/heads/main / . / LayoutTests / css3 / calc / calc-errors.html
blob: e9add5f5189c00f4697b107005e3e71cae4d772b [file] [log] [blame] [edit]
<!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>
<!-- Test cases for operator precedence -->
<div style="width: 100px; width: calc((500px - 2 * 40px - 2 * 30px - 60px) / 3);">Operator Precedence Case 1</div>
<div style="width: 100px; width: calc((500px - 40px - 60px - 40px - 60px) / 3);">Operator Precedence Case 2</div>
<div style="width: 100px; width: calc((250px + 40px + 30px + 40px - 60px) / 3);">Operator Precedence Case 3</div>
<div style="width: 100px; width: calc((500px - 2 / 2 * 40px - 2 * 30px) / 4);">Operator Precedence Case 4</div>
<div style="width: 100px; width: calc((500px - 2 * 2 / 2 * 40px - 2 * 30px - 60px) / 3);">Operator Precedence Case 5</div>
<div style="width: 100px; width: calc((500px - 2 * 2 * 20px - 2 * 30px - 60px) / 3);">Operator Precedence Case 6</div>
<div style="width: 100px; width: calc((500px - 320px / 2 / 2 - 2 * 30px - 60px) / 3);">Operator Precedence Case 7</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>