LayoutTests/fast/css-intrinsic-dimensions/height-expected.html - WebKit - Git at Google

 <!DOCTYPE html>
 <style>
     body * {
         border: 2px solid red;
         padding: 5px;
         clear: both;
     }

     .container {
         height: 300px;
         border-color: blue;

         display: inline-block;
         width: 100px;
     }

     .fill-available {
       height: 100%;
       box-sizing: border-box;
     }
 </style>
 <div class="container">
   <div>
     height: min-content<br>on this box.
   </div>

   <div>
     height: max-content<br>on this box.
   </div>

   <div>
     height: fit-content<br>on this box.
   </div>
 </div>

 <div class="container">
   <div class="fill-available">
     height: fill-available<br> on this box.
   </div>
 </div>

 <div class="container">
   <div style="height: 1px">
     min-height: min-content<br>on this box.
   </div>

   <div style="height: 1px">
     min-height: max-content<br>on this box.
   </div>

   <div>
     min-height: fit-content<br>on this box.
   </div>
 </div>

 <div class="container">
   <div class="fill-available">
     min-height: fill-available<br> on this box.
   </div>
 </div>

 <div class="container">
   <div>
     max-height: min-content<br>on this box.
   </div>

   <div>
     max-height: max-content<br>on this box.
   </div>

   <div>
     max-height: fit-content<br>on this box.
   </div>
 </div>

 <div class="container">
   <div class="fill-available">
     max-height: fill-available<br> on this box.
   </div>
 </div>
	<!DOCTYPE html>
	<style>
	body * {
	border: 2px solid red;
	padding: 5px;
	clear: both;
	}

	.container {
	height: 300px;
	border-color: blue;

	display: inline-block;
	width: 100px;
	}

	.fill-available {
	height: 100%;
	box-sizing: border-box;
	}
	</style>
	<div class="container">
	<div>
	height: min-content<br>on this box.
	</div>

	<div>
	height: max-content<br>on this box.
	</div>

	<div>
	height: fit-content<br>on this box.
	</div>
	</div>

	<div class="container">
	<div class="fill-available">
	height: fill-available<br> on this box.
	</div>
	</div>

	<div class="container">
	<div style="height: 1px">
	min-height: min-content<br>on this box.
	</div>

	<div style="height: 1px">
	min-height: max-content<br>on this box.
	</div>

	<div>
	min-height: fit-content<br>on this box.
	</div>
	</div>

	<div class="container">
	<div class="fill-available">
	min-height: fill-available<br> on this box.
	</div>
	</div>

	<div class="container">
	<div>
	max-height: min-content<br>on this box.
	</div>

	<div>
	max-height: max-content<br>on this box.
	</div>

	<div>
	max-height: fit-content<br>on this box.
	</div>
	</div>

	<div class="container">
	<div class="fill-available">
	max-height: fill-available<br> on this box.
	</div>
	</div>