third_party/WebKit/LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-blocks.html - chromium/src - Git at Google

 <!DOCTYPE html>
 <style>
 .container {
     border: 5px solid blue;
     width: 250px;
     height: 250px;
 }
 .child {
     border: 5px solid pink;
 }
 .content {
     display: inline-block;
     width: 100px;
     height: 100px;
     background-color: salmon;
 }
 </style>

 Tests that intrinsic width values on blocks work.

 <!-- width tests -->
 <div class="container">
     <div class="child" style="width: max-content;" data-expected-width="210">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container">
     <div class="child" style="width: min-content;" data-expected-width="110">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container">
     <div class="child" style="width: fit-content;" data-expected-width="210">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container" style="width: 50px">
     <div class="child" style="width: fit-content;" data-expected-width="110">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container">
     <div class="child" style="width: -webkit-fill-available;" data-expected-width="250">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <!-- min-width tests -->
 <div class="container">
     <div class="child" style="min-width: max-content; width: 10px;" data-expected-width="210">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container">
     <div class="child" style="min-width: min-content; width: 10px;" data-expected-width="110">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container">
     <div class="child" style="min-width: fit-content; width: 10px;" data-expected-width="210">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container" style="width: 50px">
     <div class="child" style="min-width: fit-content; width: 10px;" data-expected-width="110">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container">
     <div class="child" style="min-width: -webkit-fill-available; width: 10px;" data-expected-width="250">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <!-- max-width tests -->
 <div class="container">
     <div class="child" style="max-width: max-content; width: 1000px;" data-expected-width="210">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container">
     <div class="child" style="max-width: min-content; width: 1000px;" data-expected-width="110">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container">
     <div class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="210">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container" style="width: 50px">
     <div class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="110">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>

 <div class="container">
     <div class="child" style="max-width: -webkit-fill-available; width: 1000px;" data-expected-width="250">
         <div class="content"></div><div class="content"></div>
     </div>
 </div>


 <script src="../../resources/check-layout.js"></script>
 <script>
 checkLayout(".container");
 </script>
	<!DOCTYPE html>
	<style>
	.container {
	border: 5px solid blue;
	width: 250px;
	height: 250px;
	}
	.child {
	border: 5px solid pink;
	}
	.content {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: salmon;
	}
	</style>

	Tests that intrinsic width values on blocks work.

	<!-- width tests -->
	<div class="container">
	<div class="child" style="width: max-content;" data-expected-width="210">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container">
	<div class="child" style="width: min-content;" data-expected-width="110">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container">
	<div class="child" style="width: fit-content;" data-expected-width="210">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container" style="width: 50px">
	<div class="child" style="width: fit-content;" data-expected-width="110">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container">
	<div class="child" style="width: -webkit-fill-available;" data-expected-width="250">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<!-- min-width tests -->
	<div class="container">
	<div class="child" style="min-width: max-content; width: 10px;" data-expected-width="210">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container">
	<div class="child" style="min-width: min-content; width: 10px;" data-expected-width="110">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container">
	<div class="child" style="min-width: fit-content; width: 10px;" data-expected-width="210">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container" style="width: 50px">
	<div class="child" style="min-width: fit-content; width: 10px;" data-expected-width="110">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container">
	<div class="child" style="min-width: -webkit-fill-available; width: 10px;" data-expected-width="250">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<!-- max-width tests -->
	<div class="container">
	<div class="child" style="max-width: max-content; width: 1000px;" data-expected-width="210">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container">
	<div class="child" style="max-width: min-content; width: 1000px;" data-expected-width="110">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container">
	<div class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="210">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container" style="width: 50px">
	<div class="child" style="max-width: fit-content; width: 1000px;" data-expected-width="110">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>

	<div class="container">
	<div class="child" style="max-width: -webkit-fill-available; width: 1000px;" data-expected-width="250">
	<div class="content"></div><div class="content"></div>
	</div>
	</div>



	<script src="../../resources/check-layout.js"></script>
	<script>
	checkLayout(".container");
	</script>