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

 <!DOCTYPE html>
 <style>
     @import "resources/width-keyword-classes.css";

     .container {
         border: 5px solid grey;
         width: 300px;
         height: 120px;
         margin-bottom: 5px;
         position: relative;
     }

     .container > div:last-child {
         border: 5px solid salmon;
         padding: 5px;
         width: 0px;
         display: -webkit-flex;
         -webkit-flex-wrap: wrap;
         position: absolute;
     }

     .child {
         display: inline-block;
         width: 100px;
         height: 50px;
         background-color: pink;
     }

     .float {
         float: right;
         width: 100px;
         height: 50px;
         border: 5px solid orange;
     }
 </style>

 Tests that intrinsic width values on absolute positioned elements don't shrink to avoid floats.

 <div class="container">
     <div class="float">Float</div>
     <div class="min-width-min-content" data-expected-width=120>
         <div class="child">Child 1</div>
         <div class="child">Child 2</div>
     </div>
 </div>

 <div class="container">
     <div class="float">Float</div>
     <div class="min-width-max-content" data-expected-width=220>
         <div class="child">Child 1</div>
         <div class="child">Child 2</div>
     </div>
 </div>

 <div class="container">
     <div class="float">Float</div>
     <div class="min-width-fit-content" data-expected-width=220>
         <div class="child">Child 1</div>
         <div class="child">Child 2</div>
     </div>
 </div>

 <div class="container">
     <div class="float">Float</div>
     <div class="min-width-fill-available" data-expected-width=300>
         <div class="child">Child 1</div>
         <div class="child">Child 2</div>
     </div>
 </div>

 <script src="../../resources/check-layout.js"></script>
 <script>
 checkLayout(".container");
 </script>
	<!DOCTYPE html>
	<style>
	@import "resources/width-keyword-classes.css";

	.container {
	border: 5px solid grey;
	width: 300px;
	height: 120px;
	margin-bottom: 5px;
	position: relative;
	}

	.container > div:last-child {
	border: 5px solid salmon;
	padding: 5px;
	width: 0px;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	position: absolute;
	}

	.child {
	display: inline-block;
	width: 100px;
	height: 50px;
	background-color: pink;
	}

	.float {
	float: right;
	width: 100px;
	height: 50px;
	border: 5px solid orange;
	}
	</style>

	Tests that intrinsic width values on absolute positioned elements don't shrink to avoid floats.

	<div class="container">
	<div class="float">Float</div>
	<div class="min-width-min-content" data-expected-width=120>
	<div class="child">Child 1</div>
	<div class="child">Child 2</div>
	</div>
	</div>

	<div class="container">
	<div class="float">Float</div>
	<div class="min-width-max-content" data-expected-width=220>
	<div class="child">Child 1</div>
	<div class="child">Child 2</div>
	</div>
	</div>

	<div class="container">
	<div class="float">Float</div>
	<div class="min-width-fit-content" data-expected-width=220>
	<div class="child">Child 1</div>
	<div class="child">Child 2</div>
	</div>
	</div>

	<div class="container">
	<div class="float">Float</div>
	<div class="min-width-fill-available" data-expected-width=300>
	<div class="child">Child 1</div>
	<div class="child">Child 2</div>
	</div>
	</div>

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