LayoutTests/fast/css-intrinsic-dimensions/width-avoid-floats.html - WebKit - Git at Google

 <!doctype html>
 <!--
     Tests intrinsic width keywords for float avoiding behavior. The way the
     spec is written only width: auto elements will allow a float to flow
     through them with overflow: auto, so all elements below should avoid the
     float by shifting to the right except fill-available which should be forced
     below the float since it can't become smaller than the available width.

     Note: This is weird behavior, not sure it was intended by the spec.
 -->
 <style>
     @import "resources/width-keyword-classes.css";

     body * {
         border: 5px solid red;
         padding: 5px;
     }

     span {
         display: inline-block;
         width: 200px;
         border-color: green;
     }

     .float {
         float: left;
         height: 300px;
     }

     .auto,
     .max-content,
     .min-content,
     .fill-available,
     .fit-content {
         overflow: auto;
     }
 </style>

 <body>

     <div class="float">Float</div>

     <div class="min-content">
         <span>Min Content</span> on this box.
     </div>

     <div class="max-content">
         <span>Max Content</span> on this box.
     </div>

     <div class="fit-content">
         <span>Fit Content</span> on this box.
     </div>

     <div>
         <span>Auto</span> on this box.
     </div>

     <div class="fill-available">
         <span>Fill Available</span> on this box.
     </div>

 </body>
	<!doctype html>
	<!--
	Tests intrinsic width keywords for float avoiding behavior. The way the
	spec is written only width: auto elements will allow a float to flow
	through them with overflow: auto, so all elements below should avoid the
	float by shifting to the right except fill-available which should be forced
	below the float since it can't become smaller than the available width.

	Note: This is weird behavior, not sure it was intended by the spec.
	-->
	<style>
	@import "resources/width-keyword-classes.css";

	body * {
	border: 5px solid red;
	padding: 5px;
	}

	span {
	display: inline-block;
	width: 200px;
	border-color: green;
	}

	.float {
	float: left;
	height: 300px;
	}

	.auto,
	.max-content,
	.min-content,
	.fill-available,
	.fit-content {
	overflow: auto;
	}
	</style>

	<body>

	<div class="float">Float</div>

	<div class="min-content">
	<span>Min Content</span> on this box.
	</div>

	<div class="max-content">
	<span>Max Content</span> on this box.
	</div>

	<div class="fit-content">
	<span>Fit Content</span> on this box.
	</div>

	<div>
	<span>Auto</span> on this box.
	</div>

	<div class="fill-available">
	<span>Fill Available</span> on this box.
	</div>

	</body>