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