chromium/src/third_party/blink/web_tests/external/wpt/css/css-flexbox/flexbox-min-width-auto-001.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <html>
   <head>
     <meta charset="utf-8">
     <title>CSS Test: Testing min-width:auto</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
     <link rel="match" href="flexbox-min-width-auto-001-ref.html">
 <!--
      This testcase tests the used value of "min-width:auto" (the property's
      initial value) on flex items in a horizontal flex container.

      It's supposed to resolve to the smallest of:
       a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
          initial value.
       b) The computed 'max-width' property
       c) If there's no intrinsic aspect ratio: the item's min-content width.
       d) If there is an intrinsic aspect ratio: the item's width derived from
          the ratio & constraints in the other dimension.

     We measure what the used value is by putting flex items in a small flex
     container, which will shrink its items down to their min-width.

     This test checks for situations where we should resolve the min-width as
     (a), (b), or (c) above. Another test will check (d).
 -->
     <style>
       .flexbox {
         display: flex;
         width: 1px;  /* No available space; shrink flex items to min-width */
         margin-bottom: 2px; /* (Just for spacing things out, visually) */
       }

       .flexbox > * {
         /* Flex items have purple border: */
         border: 2px dotted purple;
       }

       .flexbox > * > * {
         /* Flex items' contents are gray & fixed-size: */
         background: gray;
         height: 10px;
         width: 80px;
       }
     </style>
   </head>
   <body>
     <!-- Check for min-width:auto resolving correctly when the smallest
          candidate value is: -->
     <!-- *** (a) Used 'flex-basis' (from 'width') *** -->
     <!-- First, without definite max-width: -->
     <div class="flexbox">
       <div style="width: 50px"><div></div></div>
     </div>
     <!-- ...and now with definite (& large) 'max-width': -->
     <div class="flexbox">
       <div style="width: 50px; max-width: 120px;"><div></div></div>
     </div>
     <!-- ...and now with used 'flex-basis' being a calc expression:-->
     <div class="flexbox">
       <div style="width: calc(10% + 50px)"><div></div></div>
     </div>

     <!-- *** (b) The computed 'max-width' *** -->
     <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
     <div class="flexbox">
       <div style="width: 100px; max-width:50px"><div></div></div>
     </div>
     <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
          be considered for 'min-width:auto' anyway) -->
     <div class="flexbox">
       <div style="flex-basis: 100px; max-width:50px"><div></div></div>
     </div>
     <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
          be considered for 'min-width:auto' anyway) -->
     <div class="flexbox">
       <div style="flex-basis: 10px; max-width:50px"><div></div></div>
     </div>

     <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** -->
     <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
     <div class="flexbox">
       <div style="width: 100px"><div></div></div>
     </div>
     <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
          be considered for 'min-width:auto' anyway) -->
     <div class="flexbox">
       <div style="flex-basis: 100px"><div></div></div>
     </div>
     <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
          be considered for 'min-width:auto' anyway) -->
     <div class="flexbox">
       <div style="flex-basis: 10px"><div></div></div>
     </div>
   </body>
 </html>
	<!DOCTYPE html>
	<!--
	Any copyright is dedicated to the Public Domain.
	http://creativecommons.org/publicdomain/zero/1.0/
	-->
	<html>
	<head>
	<meta charset="utf-8">
	<title>CSS Test: Testing min-width:auto</title>
	<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
	<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
	<link rel="match" href="flexbox-min-width-auto-001-ref.html">
	<!--
	This testcase tests the used value of "min-width:auto" (the property's
	initial value) on flex items in a horizontal flex container.

	It's supposed to resolve to the smallest of:
	a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
	initial value.
	b) The computed 'max-width' property
	c) If there's no intrinsic aspect ratio: the item's min-content width.
	d) If there is an intrinsic aspect ratio: the item's width derived from
	the ratio & constraints in the other dimension.

	We measure what the used value is by putting flex items in a small flex
	container, which will shrink its items down to their min-width.

	This test checks for situations where we should resolve the min-width as
	(a), (b), or (c) above. Another test will check (d).
	-->
	<style>
	.flexbox {
	display: flex;
	width: 1px; /* No available space; shrink flex items to min-width */
	margin-bottom: 2px; /* (Just for spacing things out, visually) */
	}

	.flexbox > * {
	/* Flex items have purple border: */
	border: 2px dotted purple;
	}

	.flexbox > * > * {
	/* Flex items' contents are gray & fixed-size: */
	background: gray;
	height: 10px;
	width: 80px;
	}
	</style>
	</head>
	<body>
	<!-- Check for min-width:auto resolving correctly when the smallest
	candidate value is: -->
	<!-- * (a) Used 'flex-basis' (from 'width') * -->
	<!-- First, without definite max-width: -->
	<div class="flexbox">
	<div style="width: 50px"><div></div></div>
	</div>
	<!-- ...and now with definite (& large) 'max-width': -->
	<div class="flexbox">
	<div style="width: 50px; max-width: 120px;"><div></div></div>
	</div>
	<!-- ...and now with used 'flex-basis' being a calc expression:-->
	<div class="flexbox">
	<div style="width: calc(10% + 50px)"><div></div></div>
	</div>

	<!-- * (b) The computed 'max-width' * -->
	<!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
	<div class="flexbox">
	<div style="width: 100px; max-width:50px"><div></div></div>
	</div>
	<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
	be considered for 'min-width:auto' anyway) -->
	<div class="flexbox">
	<div style="flex-basis: 100px; max-width:50px"><div></div></div>
	</div>
	<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
	be considered for 'min-width:auto' anyway) -->
	<div class="flexbox">
	<div style="flex-basis: 10px; max-width:50px"><div></div></div>
	</div>

	<!-- * (c) (no intrinsic aspect ratio) The min-content size * -->
	<!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
	<div class="flexbox">
	<div style="width: 100px"><div></div></div>
	</div>
	<!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
	be considered for 'min-width:auto' anyway) -->
	<div class="flexbox">
	<div style="flex-basis: 100px"><div></div></div>
	</div>
	<!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
	be considered for 'min-width:auto' anyway) -->
	<div class="flexbox">
	<div style="flex-basis: 10px"><div></div></div>
	</div>
	</body>
	</html>