<!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">

Bare min()
<div style="width: 100px; width: min(">unclosed min</div>
<div style="width: 100px; width: min( bob">unclosed min with garbage</div>
<div style="width: 100px; width: min( bob );">garbage</div>
<div style="width: 100px; width: min(20px,);">extra trailing comma</div>
<div style="width: 100px; width: min(,20px);">leading comma</div>
<div style="width: 100px; width: min(20px, bob);">trailing garbage</div>
<div style="width: 100px; width: min(20px, 10px + flim);">bad expression</div>
<div style="width: 100px; width: min(256px, 120);">mix length and number</div>
<div style="width: 100px; width: min(256, 120px);">mix number and length</div>
<div style="width: 100px; width: min(50%, 150);">mix percent and number</div>
<div style="width: 100px; width: min(150, 50%);">mix number and percent</div>

<br/><br/>min() inside calc()
<div style="width: 100px; width: calc(min(">unclosed min</div>
<div style="width: 100px; width: calc(min( bob">unclosed min with garbage</div>
<div style="width: 100px; width: calc(min( bob ));">garbage</div>
<div style="width: 100px; width: calc(min(20px,));">extra trailing comma</div>
<div style="width: 100px; width: calc(min(,20px));">leading comma</div>
<div style="width: 100px; width: calc(min(20px, bob));">trailing garbage</div>
<div style="width: 100px; width: calc(min(20px, 10px + flim));">bad expression</div>
<div style="width: 100px; width: calc(min(256px, 120));">mix length and number</div>
<div style="width: 100px; width: calc(min(256, 120px));">mix number and length</div>
<div style="width: 100px; width: calc(min(50%, 150));">mix percent and number</div>
<div style="width: 100px; width: calc(min(150, 50%));">mix number and percent</div>

<br/><br/>Bare max()
<div style="width: 100px; width: max(">unclosed max</div>
<div style="width: 100px; width: max( bob">unclosed max with garbage</div>
<div style="width: 100px; width: max(256px, 120);">mix length and number</div>
<div style="width: 100px; width: max(256, 120px);">mix number and length</div>
<div style="width: 100px; width: max(50%, 150);">mix percent and number</div>
<div style="width: 100px; width: max(150, 50%);">mix number and percent</div>

<br/><br/>max() inside calc
<div style="width: 100px; width: calc(max(">unclosed max</div>
<div style="width: 100px; width: calc(max( bob">unclosed max with garbage</div>
<div style="width: 100px; width: calc(max(256px, 120));">mix length and number</div>
<div style="width: 100px; width: calc(max(256, 120px));">mix number and length</div>
<div style="width: 100px; width: calc(max(50%, 150));">mix percent and number</div>
<div style="width: 100px; width: calc(max(150, 50%));">mix number and percent</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>
