LayoutTests/css3/calc/simple-minmax.html - WebKit - Git at Google

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

 Bare min()
 <div class="width-test" style="width: min(100px);">min(100px)</div>
 <div class="width-test" style="width: min( 100px );">min( 100px )</div>
 <div class="width-test" style="width: min((((100px))));">min((((100px))))</div>
 <div class="width-test" style="width: min(150px,100px);">min(150px,100px)</div>
 <div class="width-test" style="width: min(150px,100px,200px);">min(150px,100px,200px)</div>
 <div class="width-test" style="width: min(  150px ,  100px  ,200px);">min(  150px  ,  100px  ,200px)</div>
 <div class="width-test" style="width: min(90px + 50px ,100px);">min(90px + 50px ,100px)</div>
 <div style="width: 200px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: 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: min(50%,150px);">min(50%,150px) - where 50% is 100px</div>
 </div>
 <div style="width: 200px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: min(100% - 50px,100px);">min(100% - 50px,100px) - where 100% is 200px</div>
 </div>
 <div style="width: 200px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: min(25% + 50px,150px);">min(25% + 50px,150px) - where 25% is 50px</div>
 </div>
 <div style="width: 200px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: min(100px,100%);">min(100px,100%) - where 100% is 200px</div>
 </div>
 <div class="height-test" style="height: min(200px, 100px);">min(200px,100px)</div>

 <br/><br/>min() inside calc()
 <div class="width-test" style="width: calc(min(100px));">calc(min(100px))</div>
 <div class="width-test" style="width: calc(min(150px, 200px) - 50px);">calc(min(150px, 200px) - 50px)</div>
 <div class="width-test" style="width: calc(50px + min(150px, 50px));">calc(50 + min(150px, 50px))</div>
 <div class="width-test" style="width: calc(min(250px, 200px) / 2);">calc(min(250px, 200px) / 2)</div>
 <div class="width-test" style="width: calc(min( 100px ));">calc(min( 100px ))</div>
 <div class="width-test" style="width: calc(min((((100px)))));">calc(min((((100px)))))</div>
 <div class="width-test" style="width: calc(min(150px,100px));">calc(min(150px,100px))</div>
 <div class="width-test" style="width: calc(min(150px,100px,200px));">calc(min(150px,100px,200px))</div>
 <div class="width-test" style="width: calc(min(  150px ,  100px  ,200px));">calc(min(  150px  ,  100px  ,200px))</div>
 <div class="width-test" style="width: calc(min(90px + 50px ,100px));">calc(min(90px + 50px ,100px))</div>
 <div style="width: 200px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: calc(min(100%,100px));">calc(min(100%,100px)) - where 100% is 200px</div>
 </div>
 <div style="width: 200px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: calc(min(50%,150px));">calc(min(50%,150px)) - where 50% is 100px</div>
 </div>
 <div style="width: 200px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: calc(min(100% - 50px,100px));">calc(min(100% - 50px,100px)) - where 100% is 200px</div>
 </div>
 <div style="width: 200px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: calc(min(25% + 50px,150px));">calc(min(25% + 50px,150px)) - where 25% is 50px</div>
 </div>
 <div style="width: 200px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: calc(min(100px,100%));">calc(min(100px,100%)) - where 100% is 200px</div>
 </div>
 <div class="height-test" style="height: calc(min(200px, 100px));">calc(min(200px,100px))</div>

 <br/><br/>Bare max()
 <div class="width-test" style="width: max(100px);">max(100px)</div>
 <div class="width-test" style="width: calc(max(150px, 100px) - 50px);">calc(max(150px, 100px) - 50px)</div>
 <div class="width-test" style="width: max(50px,100px);">max(50px,100px)</div>
 <div class="width-test" style="width: max(50px,100px,20px);">max(50px,100px,20px)</div>
 <div class="width-test" style="width: max(120px - 50px,100px);">max(120px - 50px,100px)</div>
 <div style="width: 50px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: 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: max(100px,100%);">max(100px,100%) - where 100% is 50px</div>
 </div>

 <br/><br/>max() inside calc()
 <div class="width-test" style="width: calc(max(100px));">calc(max(100px))</div>
 <div class="width-test" style="width: calc(max(50px,100px));">calc(max(50px,100px))</div>
 <div class="width-test" style="width: calc(max(50px,100px,20px));">calc(max(50px,100px,20px))</div>
 <div class="width-test" style="width: calc(max(120px - 50px,100px));">calc(max(120px - 50px,100px))</div>
 <div style="width: 50px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: calc(max(100%,100px));">calc(max(100%,100px)) - where 100% is 50px</div>
 </div>
 <div style="width: 50px; background-color: white;" class="wrapper">
   <div class="width-test" style="width: calc(max(100px,100%));">calc(max(100px,100%)) - where 100% is 50px</div>
 </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>
	<!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">

	Bare min()
	<div class="width-test" style="width: min(100px);">min(100px)</div>
	<div class="width-test" style="width: min( 100px );">min( 100px )</div>
	<div class="width-test" style="width: min((((100px))));">min((((100px))))</div>
	<div class="width-test" style="width: min(150px,100px);">min(150px,100px)</div>
	<div class="width-test" style="width: min(150px,100px,200px);">min(150px,100px,200px)</div>
	<div class="width-test" style="width: min( 150px , 100px ,200px);">min( 150px , 100px ,200px)</div>
	<div class="width-test" style="width: min(90px + 50px ,100px);">min(90px + 50px ,100px)</div>
	<div style="width: 200px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: 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: min(50%,150px);">min(50%,150px) - where 50% is 100px</div>
	</div>
	<div style="width: 200px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: min(100% - 50px,100px);">min(100% - 50px,100px) - where 100% is 200px</div>
	</div>
	<div style="width: 200px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: min(25% + 50px,150px);">min(25% + 50px,150px) - where 25% is 50px</div>
	</div>
	<div style="width: 200px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: min(100px,100%);">min(100px,100%) - where 100% is 200px</div>
	</div>
	<div class="height-test" style="height: min(200px, 100px);">min(200px,100px)</div>

	<br/><br/>min() inside calc()
	<div class="width-test" style="width: calc(min(100px));">calc(min(100px))</div>
	<div class="width-test" style="width: calc(min(150px, 200px) - 50px);">calc(min(150px, 200px) - 50px)</div>
	<div class="width-test" style="width: calc(50px + min(150px, 50px));">calc(50 + min(150px, 50px))</div>
	<div class="width-test" style="width: calc(min(250px, 200px) / 2);">calc(min(250px, 200px) / 2)</div>
	<div class="width-test" style="width: calc(min( 100px ));">calc(min( 100px ))</div>
	<div class="width-test" style="width: calc(min((((100px)))));">calc(min((((100px)))))</div>
	<div class="width-test" style="width: calc(min(150px,100px));">calc(min(150px,100px))</div>
	<div class="width-test" style="width: calc(min(150px,100px,200px));">calc(min(150px,100px,200px))</div>
	<div class="width-test" style="width: calc(min( 150px , 100px ,200px));">calc(min( 150px , 100px ,200px))</div>
	<div class="width-test" style="width: calc(min(90px + 50px ,100px));">calc(min(90px + 50px ,100px))</div>
	<div style="width: 200px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: calc(min(100%,100px));">calc(min(100%,100px)) - where 100% is 200px</div>
	</div>
	<div style="width: 200px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: calc(min(50%,150px));">calc(min(50%,150px)) - where 50% is 100px</div>
	</div>
	<div style="width: 200px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: calc(min(100% - 50px,100px));">calc(min(100% - 50px,100px)) - where 100% is 200px</div>
	</div>
	<div style="width: 200px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: calc(min(25% + 50px,150px));">calc(min(25% + 50px,150px)) - where 25% is 50px</div>
	</div>
	<div style="width: 200px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: calc(min(100px,100%));">calc(min(100px,100%)) - where 100% is 200px</div>
	</div>
	<div class="height-test" style="height: calc(min(200px, 100px));">calc(min(200px,100px))</div>

	<br/><br/>Bare max()
	<div class="width-test" style="width: max(100px);">max(100px)</div>
	<div class="width-test" style="width: calc(max(150px, 100px) - 50px);">calc(max(150px, 100px) - 50px)</div>
	<div class="width-test" style="width: max(50px,100px);">max(50px,100px)</div>
	<div class="width-test" style="width: max(50px,100px,20px);">max(50px,100px,20px)</div>
	<div class="width-test" style="width: max(120px - 50px,100px);">max(120px - 50px,100px)</div>
	<div style="width: 50px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: 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: max(100px,100%);">max(100px,100%) - where 100% is 50px</div>
	</div>

	<br/><br/>max() inside calc()
	<div class="width-test" style="width: calc(max(100px));">calc(max(100px))</div>
	<div class="width-test" style="width: calc(max(50px,100px));">calc(max(50px,100px))</div>
	<div class="width-test" style="width: calc(max(50px,100px,20px));">calc(max(50px,100px,20px))</div>
	<div class="width-test" style="width: calc(max(120px - 50px,100px));">calc(max(120px - 50px,100px))</div>
	<div style="width: 50px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: calc(max(100%,100px));">calc(max(100%,100px)) - where 100% is 50px</div>
	</div>
	<div style="width: 50px; background-color: white;" class="wrapper">
	<div class="width-test" style="width: calc(max(100px,100%));">calc(max(100px,100%)) - where 100% is 50px</div>
	</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>