81 lines
3.4 KiB
HTML
81 lines
3.4 KiB
HTML
<!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>
|