| <!DOCTYPE HTML> | |
| <style> | |
| .width-test { | |
| height: 100px; | |
| width: 256px; | |
| background-color: red; | |
| } | |
| .height-test { | |
| width: 100px; | |
| height: 50px; | |
| background-color: red; | |
| } | |
| </style> | |
| <p> | |
| All boxes below should be 100px * 100px and green. | |
| </p> | |
| <div id="test"> | |
| <div class="width-test" style="width: -webkit-min(100px);">min(100px)</div> | |
| <div class="width-test" style="width: -webkit-min( 100px );">min( 100px )</div> | |
| <div class="width-test" style="width: -webkit-min((((100px))));">min((((100px))))</div> | |
| <div class="width-test" style="width: -webkit-min(150px,100px);">min(150px,100px)</div> | |
| <div class="width-test" style="width: -webkit-min(150px,100px,200px);">min(150px,100px,200px)</div> | |
| <div class="width-test" style="width: -webkit-min( 150px , 100px ,200px);">min( 150px , 100px ,200px)</div> | |
| <div class="width-test" style="width: -webkit-min(90px + 50px ,100px);">min(90px + 50px ,100px)</div> | |
| <div style="width: 200px; background-color: white;" class="wrapper"> | |
| <div class="width-test" style="width: -webkit-min(100%,100px);">min(100%,100px) - where 100% is 200px</div> | |
| </div> | |
| <div style="width: 200px; background-color: white;" class="wrapper"> | |
| <div class="width-test" style="width: -webkit-min(100px,100%);">min(100px,100%) - where 100% is 200px</div> | |
| </div> | |
| <div class="width-test" style="width: -webkit-max(100px);">max(100px)</div> | |
| <div class="width-test" style="width: -webkit-max(50px,100px);">max(50px,100px)</div> | |
| <div class="width-test" style="width: -webkit-max(50px,100px,20px);">max(50px,100px,20px)</div> | |
| <div class="width-test" style="width: -webkit-max(120px - 50px,100px);">max(120px - 50px,100px)</div> | |
| <div style="width: 50px; background-color: white;" class="wrapper"> | |
| <div class="width-test" style="width: -webkit-max(100%,100px);">max(100%,100px) - where 100% is 50px</div> | |
| </div> | |
| <div style="width: 50px; background-color: white;" class="wrapper"> | |
| <div class="width-test" style="width: -webkit-max(100px,100%);">max(100px,100%) - where 100% is 50px</div> | |
| </div> | |
| <div class="height-test" style="height: -webkit-min(200px, 100px);">min(200px,100px)</div> | |
| </div> | |
| <script> | |
| if (window.testRunner) | |
| testRunner.dumpAsText(); | |
| var test = document.getElementById("test"); | |
| for (var child = test.firstChild; child; child = child.nextSibling) { | |
| var element = child; | |
| if (element.className == "wrapper") { | |
| element = element.firstChild; | |
| while (element.tagName != "DIV") 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 " + height); | |
| if (error == "") { | |
| element.style.backgroundColor = "green"; | |
| element.innerHTML += " => PASS"; | |
| } else | |
| element.innerHTML += " => FAIL: " + error.join(", "); | |
| } | |
| </script> |