src/cobalt/layout_tests/testdata/css3-flexbox/combined-with-baselines-percentages.html - cobalt - Git at Google

 <!DOCTYPE html>
 <!--
  | Combined tests for basic functionality of CSS Flexible Box Layout Module.
  |   https://www.w3.org/TR/css-flexbox-1
  | This test also shows some differences with Chrome due to missing
  | implementation of content-based minimum size.
  -->
 <html>
 <head>
 <style>
   body {
     margin: 0px;
     font-family: Roboto;
     background-color: #808080;
     font-size: 12px;
   }
   .sized {
     width: 250px;
     height: 250px;
   }
   .vsized {
     height: 40px;
   }
   .small {
     width: 30px;
     min-height: 40px;
   }
   .flex {
     display:flex;
     color: #99b9f3;
     background-color: #ffee00;
     opacity: 0.75;
   }
   .inlineflex {
     display:inline-flex;
     color: #99b9f3;
     background-color: #ffee08;
     opacity: 0.75;
   }
   .container {
     overflow: hidden;
     flex-flow: row wrap;
     justify-content: space-around;
     align-items: center;
     align-content: flex-end;
     min-width: 2px;
     padding: 2px;
     border: 2px solid #000060;
     outline: 2px solid #00f000;
     margin: 6px;
   }
   .item {
     flex: 1 1 100px;
     background-color: #0047ab; /* blue */
     margin: 2px;
     order: 0;
   }
   .blue {
     background-color: #0047ab;
   }
   .green {
     background-color: #007700;
   }

 </style>
 </head>
 <body>

 <span>
   <div style="display: inline-block; width: 200px">
     <div class="flex container" style="width: 600px;">
       <span class="blue" style="flex-basis: 1%;">SSS3bwa</span>
     </div>
     <div class="flex container" style="width: 600px;">
       <span class="blue" style="width: 1%;">SSS3bwb</span>
     </div>

   </div>
 </span>

 Overlapped
 <div class="vsized flex container" style="">
   <span class="blue" style="flex-basis: 20%; margin: 0px; border: 0px; padding: 0px; align-self:center;">WWWW</span>
   <span class="blue" style="flex-basis: 95%; margin: 0px; border: 0px; padding: 0px; align-self:center;">XXXX</span>
 </div>
 gbHO-
 <div class="small inlineflex container">
   <span class="blue" style="flex-basis: 20%;">a</span>
 </div>
 <div class="inlineflex container">
   <span class="blue">AAa</span>
 </div>
 <div class="inlineflex container">
   <span class="blue" style="overflow:hidden; flex-basis: 20px;">AAb</span>
 </div>
 <div class="inlineflex container">
   <span class="blue" style="overflow:hidden; flex-basis: 20px; max-width:21px;">AAc</span>
 </div>
 <div class="inlineflex container green">
 <div class="inlineflex container">
   <span class="blue" style="overflow:hidden; flex-basis: 50%;">DDh</span>
 </div>
 </div>
 <div class="inlineflex container green">
 <div class="inlineflex container">
   <span class="blue" style="flex-basis: 50%;">DDv</span>
 </div>
 </div>
 <div class="vsized inlineflex container">
   <span class="blue" style="flex-basis: 5%;">V1V</span>
 </div>
 <div class="vsized inlineflex container">
   <span class="blue" style="flex-basis: 12%; max-width:15px;">V2V</span>
 </div>
 <div class="vsized inlineflex container">
   <span class="blue" style="flex-basis: 12%; max-width:70%;">V3V</span>
 </div>
 <div class="vsized inlineflex container" style="min-width: 5%">
   <span class="blue" style="flex-basis: 12%; max-width:15px;">V4V</span>
 </div>
 <div class="vsized inlineflex container" style="width: 40px;">
   <span class="blue" style="flex-basis: 12%; max-width:15px;">V5V</span>
 </div>
 <div class="vsized inlineflex container" style="width: 40px;">
   <span class="blue" style="flex-basis: 12%; max-width:30%;">V6V</span>
 </div>
 <div class="vsized inlineflex container" style="min-width: 5%">
   <span class="blue" style="flex-basis: 12%; max-width:15px;">V7V</span>
 </div>
 <div class="vsized inlineflex container" style="min-width: 5%">
   <span class="blue" style="flex-basis: 12%; max-width:50%;">V8V</span>
 </div>


 <div class="vsized inlineflex container" style="max-width: 1%;">
   <span class="blue">VVVV</span>
 </div>
 <div class="vsized inlineflex container" style="max-width: 1%; overflow: visible;">
   <span class="blue">VVVV</span>
 </div>
 <div class="vsized inlineflex container" style="max-width: 1%;">
   <span class="blue">VVVV</span>
 </div>
 <div class="vsized inlineflex container" style="max-width: 1%; overflow: visible;">
   <span class="blue">VVVV</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px;">
   <span class="blue">HHHH</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px; overflow: visible;">
   <span class="blue">VVVV</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px;">
   <span class="blue" style="overflow: hidden;">HHHH</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px;">
   <span class="blue" style="overflow: visible;">HHHH</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px;">
   <span class="blue" style="min-width: 1px;">MHHM</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px; overflow: visible;">
   <span class="blue" style="min-width: 1px;">MVVM</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px;">
   <span class="blue" style="max-width: 4px; overflow: visible;">MHHM</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px; overflow: visible;">
   <span class="blue" style="max-width: 4px; overflow: visible;">MVVM</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px;">
   <span class="blue" style="max-width: 4px; overflow: hidden;">MHHM</span>
 </div>

 <div class="vsized inlineflex container" style="max-width: 10px; overflow: visible;">
   <span class="blue" style="max-width: 4px; overflow: hidden;">MVVM</span>
 </div>
 -OHgb

 <div class="flex" style="flex-flow: row wrap; height:75px; ">

 <div>block first item</div>
 <div id="item2" style="position: absolute; background-color:#FF8C00;">block abs</div>
 anonymous item 3

 <div style="margin-left:auto; margin-right:auto">block middle</div>
 <span style="display:inline; margin-left:auto;">
     span item 4a
     <span style="display: block">"span 4b"</span>
     span item 4c
 </span>
 </div>


 </body>
 </html>
	<!DOCTYPE html>
	<!--
	\| Combined tests for basic functionality of CSS Flexible Box Layout Module.
	\| https://www.w3.org/TR/css-flexbox-1
	\| This test also shows some differences with Chrome due to missing
	\| implementation of content-based minimum size.
	-->
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	font-family: Roboto;
	background-color: #808080;
	font-size: 12px;
	}
	.sized {
	width: 250px;
	height: 250px;
	}
	.vsized {
	height: 40px;
	}
	.small {
	width: 30px;
	min-height: 40px;
	}
	.flex {
	display:flex;
	color: #99b9f3;
	background-color: #ffee00;
	opacity: 0.75;
	}
	.inlineflex {
	display:inline-flex;
	color: #99b9f3;
	background-color: #ffee08;
	opacity: 0.75;
	}
	.container {
	overflow: hidden;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	align-content: flex-end;
	min-width: 2px;
	padding: 2px;
	border: 2px solid #000060;
	outline: 2px solid #00f000;
	margin: 6px;
	}
	.item {
	flex: 1 1 100px;
	background-color: #0047ab; /* blue */
	margin: 2px;
	order: 0;
	}
	.blue {
	background-color: #0047ab;
	}
	.green {
	background-color: #007700;
	}

	</style>
	</head>
	<body>

	<span>
	<div style="display: inline-block; width: 200px">
	<div class="flex container" style="width: 600px;">
	<span class="blue" style="flex-basis: 1%;">SSS3bwa</span>
	</div>
	<div class="flex container" style="width: 600px;">
	<span class="blue" style="width: 1%;">SSS3bwb</span>
	</div>

	</div>
	</span>

	Overlapped
	<div class="vsized flex container" style="">
	<span class="blue" style="flex-basis: 20%; margin: 0px; border: 0px; padding: 0px; align-self:center;">WWWW</span>
	<span class="blue" style="flex-basis: 95%; margin: 0px; border: 0px; padding: 0px; align-self:center;">XXXX</span>
	</div>
	gbHO-
	<div class="small inlineflex container">
	<span class="blue" style="flex-basis: 20%;">a</span>
	</div>
	<div class="inlineflex container">
	<span class="blue">AAa</span>
	</div>
	<div class="inlineflex container">
	<span class="blue" style="overflow:hidden; flex-basis: 20px;">AAb</span>
	</div>
	<div class="inlineflex container">
	<span class="blue" style="overflow:hidden; flex-basis: 20px; max-width:21px;">AAc</span>
	</div>
	<div class="inlineflex container green">
	<div class="inlineflex container">
	<span class="blue" style="overflow:hidden; flex-basis: 50%;">DDh</span>
	</div>
	</div>
	<div class="inlineflex container green">
	<div class="inlineflex container">
	<span class="blue" style="flex-basis: 50%;">DDv</span>
	</div>
	</div>
	<div class="vsized inlineflex container">
	<span class="blue" style="flex-basis: 5%;">V1V</span>
	</div>
	<div class="vsized inlineflex container">
	<span class="blue" style="flex-basis: 12%; max-width:15px;">V2V</span>
	</div>
	<div class="vsized inlineflex container">
	<span class="blue" style="flex-basis: 12%; max-width:70%;">V3V</span>
	</div>
	<div class="vsized inlineflex container" style="min-width: 5%">
	<span class="blue" style="flex-basis: 12%; max-width:15px;">V4V</span>
	</div>
	<div class="vsized inlineflex container" style="width: 40px;">
	<span class="blue" style="flex-basis: 12%; max-width:15px;">V5V</span>
	</div>
	<div class="vsized inlineflex container" style="width: 40px;">
	<span class="blue" style="flex-basis: 12%; max-width:30%;">V6V</span>
	</div>
	<div class="vsized inlineflex container" style="min-width: 5%">
	<span class="blue" style="flex-basis: 12%; max-width:15px;">V7V</span>
	</div>
	<div class="vsized inlineflex container" style="min-width: 5%">
	<span class="blue" style="flex-basis: 12%; max-width:50%;">V8V</span>
	</div>


	<div class="vsized inlineflex container" style="max-width: 1%;">
	<span class="blue">VVVV</span>
	</div>
	<div class="vsized inlineflex container" style="max-width: 1%; overflow: visible;">
	<span class="blue">VVVV</span>
	</div>
	<div class="vsized inlineflex container" style="max-width: 1%;">
	<span class="blue">VVVV</span>
	</div>
	<div class="vsized inlineflex container" style="max-width: 1%; overflow: visible;">
	<span class="blue">VVVV</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px;">
	<span class="blue">HHHH</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px; overflow: visible;">
	<span class="blue">VVVV</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px;">
	<span class="blue" style="overflow: hidden;">HHHH</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px;">
	<span class="blue" style="overflow: visible;">HHHH</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px;">
	<span class="blue" style="min-width: 1px;">MHHM</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px; overflow: visible;">
	<span class="blue" style="min-width: 1px;">MVVM</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px;">
	<span class="blue" style="max-width: 4px; overflow: visible;">MHHM</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px; overflow: visible;">
	<span class="blue" style="max-width: 4px; overflow: visible;">MVVM</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px;">
	<span class="blue" style="max-width: 4px; overflow: hidden;">MHHM</span>
	</div>

	<div class="vsized inlineflex container" style="max-width: 10px; overflow: visible;">
	<span class="blue" style="max-width: 4px; overflow: hidden;">MVVM</span>
	</div>
	-OHgb

	<div class="flex" style="flex-flow: row wrap; height:75px; ">

	<div>block first item</div>
	<div id="item2" style="position: absolute; background-color:#FF8C00;">block abs</div>
	anonymous item 3

	<div style="margin-left:auto; margin-right:auto">block middle</div>
	<span style="display:inline; margin-left:auto;">
	span item 4a
	<span style="display: block">"span 4b"</span>
	span item 4c
	</span>
	</div>


	</body>
	</html>