LayoutTests/css3/flexbox/flex-align-max.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <link href="resources/flexbox.css" rel="stylesheet">
 <style>
 body {
     margin: 0;
 }
 .flexbox {
     background-color: #aaa;
     position: relative;
 }
 .flexbox div {
     border: 0;
 }
 .vertical-rl {
     writing-mode: vertical-rl;
 }
 .flexbox :nth-child(1) {
     background-color: blue;
 }
 .flexbox :nth-child(2) {
     background-color: green;
 }
 .flexbox :nth-child(3) {
     background-color: red;
 }
 </style>
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <script src="../../resources/check-layout-th.js"></script>
 <body onload="checkLayout('.flexbox')">
 <div id=log></div>

 <div class="flexbox">
   <div data-expected-height="50" style="flex: 1 0 0; max-height: 100px"></div>
   <div data-expected-height="50" style="flex: 1 0 0; height: 50px"></div>
   <div data-expected-height="25" style="flex: 1 0 0; max-height: 25px"></div>
 </div>

 <div class="flexbox column" style="width: 200px">
   <div data-expected-width="150" style="flex: 1 0 20px; max-width: 150px"></div>
   <div data-expected-width="100" style="flex: 1 0 20px; width: 100px"></div>
   <div data-expected-width="200" style="flex: 1 0 20px;"></div>
 </div>

 <div class="flexbox vertical-rl" style="height: 60px">
   <div data-expected-width="100" style="flex: 1 0 20px; max-width: 110px"></div>
   <div data-expected-width="100" style="flex: 1 0 20px; width: 100px"></div>
   <div data-expected-width="50" style="flex: 1 0 20px; max-width: 50px"></div>
 </div>

 <div class="flexbox column vertical-rl" style="height: 50px">
   <div data-expected-height="50" style="flex: 1 0 100px; max-height: 100px"></div>
   <div data-expected-height="50" style="flex: 1 0 100px; height: 50px"></div>
   <div data-expected-height="25" style="flex: 1 0 100px; max-height: 25px"></div>
 </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<link href="resources/flexbox.css" rel="stylesheet">
	<style>
	body {
	margin: 0;
	}
	.flexbox {
	background-color: #aaa;
	position: relative;
	}
	.flexbox div {
	border: 0;
	}
	.vertical-rl {
	writing-mode: vertical-rl;
	}
	.flexbox :nth-child(1) {
	background-color: blue;
	}
	.flexbox :nth-child(2) {
	background-color: green;
	}
	.flexbox :nth-child(3) {
	background-color: red;
	}
	</style>
	<script src="../../resources/testharness.js"></script>
	<script src="../../resources/testharnessreport.js"></script>
	<script src="../../resources/check-layout-th.js"></script>
	<body onload="checkLayout('.flexbox')">
	<div id=log></div>

	<div class="flexbox">
	<div data-expected-height="50" style="flex: 1 0 0; max-height: 100px"></div>
	<div data-expected-height="50" style="flex: 1 0 0; height: 50px"></div>
	<div data-expected-height="25" style="flex: 1 0 0; max-height: 25px"></div>
	</div>

	<div class="flexbox column" style="width: 200px">
	<div data-expected-width="150" style="flex: 1 0 20px; max-width: 150px"></div>
	<div data-expected-width="100" style="flex: 1 0 20px; width: 100px"></div>
	<div data-expected-width="200" style="flex: 1 0 20px;"></div>
	</div>

	<div class="flexbox vertical-rl" style="height: 60px">
	<div data-expected-width="100" style="flex: 1 0 20px; max-width: 110px"></div>
	<div data-expected-width="100" style="flex: 1 0 20px; width: 100px"></div>
	<div data-expected-width="50" style="flex: 1 0 20px; max-width: 50px"></div>
	</div>

	<div class="flexbox column vertical-rl" style="height: 50px">
	<div data-expected-height="50" style="flex: 1 0 100px; max-height: 100px"></div>
	<div data-expected-height="50" style="flex: 1 0 100px; height: 50px"></div>
	<div data-expected-height="25" style="flex: 1 0 100px; max-height: 25px"></div>
	</div>

	</body>
	</html>