chromium/src/third_party/blink/web_tests/external/wpt/css/css-flexbox/flex-aspect-ratio-img-column-011.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <title>CSS Flexbox: images' aspect ratio in flex box with flex-direction: column for min-size: auto</title>
 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-intrinsic">
 <link rel="help" href="https://crbug.com/581535">
 <link rel="help" href="https://crbug.com/581361">
 <link href="support/flexbox.css" rel="stylesheet">
 <meta name="assert" content="Images maintain aspect ratio in flex box with column direction with min-size: auto.">

 <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" style="width: 10px;" data-expected-width="10">
     <!-- should use content width, clamped by converted max-height, as minimum width. -->
     <img src="support/100x100-green.png" style="max-height: 5px;"
          data-expected-width="5" data-expected-height="5">
 </div>

 <div class="flexbox" style="width: 10px;" data-expected-width="10">
     <!-- should use min(specified, content width) = 10px as minimum width,
          which the image will shrink to due to default flex-shrink. -->
     <img src="support/10x10-green.png" style="width: 100px;" data-expected-width="10">
 </div>

 <div class="flexbox" style="width: 10px;" data-expected-width="10">
     <!-- should use content width, clamped by converted min-height, as minimum width. -->
     <img src="support/100x100-green.png" style="max-height: 5px;"
          data-expected-width="5" data-expected-height="5">
 </div>

 <div class="flexbox" style="width: 10px;" data-expected-width="10">
     <!-- should use content width, clamped by converted min-height, as minimum width. -->
     <img src="support/100x100-green.png" style="max-height: 5px; min-height: 10px;"
          data-expected-width="10" data-expected-height="10">
 </div>

 <div class="flexbox" style="width: 10px;" data-expected-width="10">
     <!-- transferred and content suggestions are both 100px here, so minimum
       width is min(transferred, content width) = 100px. -->
     <img src="support/10x10-green.png" style="height: 100px;" data-expected-width="100">
 </div>

 <div class="flexbox column" style="height: 10px;" data-expected-height="10">
     <!-- should use content height, clamped by converted max-width, as minimum height. -->
     <img src="support/100x100-green.png" style="max-width: 5px;"
          data-expected-width="5" data-expected-height="5">
 </div>

 <div class="flexbox column" style="height: 10px;" data-expected-height="10">
     <!-- should use min(specified, content height) = 10px as minimum height,
          which the image will shrink to due to default flex-shrink. -->
     <img src="support/10x10-green.png" style="height: 100px;" data-expected-height="10">
 </div>

 <div class="flexbox" style="height: 10px;" data-expected-height="10">
     <!-- should use content height, clamped by converted min-height, as minimum height. -->
     <img src="support/100x100-green.png" style="max-height: 5px;"
          data-expected-height="5" data-expected-height="5">
 </div>

 <div class="flexbox" style="height: 10px;" data-expected-height="10">
     <!-- should use content height, clamped by converted min-width, as minimum height. -->
     <img src="support/100x100-green.png" style="max-width: 5px; min-width: 10px;"
          data-expected-height="10" data-expected-width="10">
 </div>

 <div class="flexbox column" style="height: 10px;" data-expected-height="10">
     <!-- should use min(transferred (100), content height (100)) = 100px as
          minimum height, which will be final height of the image -->
     <img src="support/10x10-green.png" style="width: 100px;" data-expected-height="100">
 </div>
	<!DOCTYPE html>
	<title>CSS Flexbox: images' aspect ratio in flex box with flex-direction: column for min-size: auto</title>
	<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
	<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
	<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
	<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-intrinsic">
	<link rel="help" href="https://crbug.com/581535">
	<link rel="help" href="https://crbug.com/581361">
	<link href="support/flexbox.css" rel="stylesheet">
	<meta name="assert" content="Images maintain aspect ratio in flex box with column direction with min-size: auto.">

	<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" style="width: 10px;" data-expected-width="10">
	<!-- should use content width, clamped by converted max-height, as minimum width. -->
	<img src="support/100x100-green.png" style="max-height: 5px;"
	data-expected-width="5" data-expected-height="5">
	</div>

	<div class="flexbox" style="width: 10px;" data-expected-width="10">
	<!-- should use min(specified, content width) = 10px as minimum width,
	which the image will shrink to due to default flex-shrink. -->
	<img src="support/10x10-green.png" style="width: 100px;" data-expected-width="10">
	</div>

	<div class="flexbox" style="width: 10px;" data-expected-width="10">
	<!-- should use content width, clamped by converted min-height, as minimum width. -->
	<img src="support/100x100-green.png" style="max-height: 5px;"
	data-expected-width="5" data-expected-height="5">
	</div>

	<div class="flexbox" style="width: 10px;" data-expected-width="10">
	<!-- should use content width, clamped by converted min-height, as minimum width. -->
	<img src="support/100x100-green.png" style="max-height: 5px; min-height: 10px;"
	data-expected-width="10" data-expected-height="10">
	</div>

	<div class="flexbox" style="width: 10px;" data-expected-width="10">
	<!-- transferred and content suggestions are both 100px here, so minimum
	width is min(transferred, content width) = 100px. -->
	<img src="support/10x10-green.png" style="height: 100px;" data-expected-width="100">
	</div>

	<div class="flexbox column" style="height: 10px;" data-expected-height="10">
	<!-- should use content height, clamped by converted max-width, as minimum height. -->
	<img src="support/100x100-green.png" style="max-width: 5px;"
	data-expected-width="5" data-expected-height="5">
	</div>

	<div class="flexbox column" style="height: 10px;" data-expected-height="10">
	<!-- should use min(specified, content height) = 10px as minimum height,
	which the image will shrink to due to default flex-shrink. -->
	<img src="support/10x10-green.png" style="height: 100px;" data-expected-height="10">
	</div>

	<div class="flexbox" style="height: 10px;" data-expected-height="10">
	<!-- should use content height, clamped by converted min-height, as minimum height. -->
	<img src="support/100x100-green.png" style="max-height: 5px;"
	data-expected-height="5" data-expected-height="5">
	</div>

	<div class="flexbox" style="height: 10px;" data-expected-height="10">
	<!-- should use content height, clamped by converted min-width, as minimum height. -->
	<img src="support/100x100-green.png" style="max-width: 5px; min-width: 10px;"
	data-expected-height="10" data-expected-width="10">
	</div>

	<div class="flexbox column" style="height: 10px;" data-expected-height="10">
	<!-- should use min(transferred (100), content height (100)) = 100px as
	minimum height, which will be final height of the image -->
	<img src="support/10x10-green.png" style="width: 100px;" data-expected-height="100">
	</div>