chromium/src/third_party/blink/web_tests/external/wpt/css/css-sizing/contain-intrinsic-size/contain-intrinsic-size-025.html - manifest_repos/chromium_src - Git at Google

 <!doctype html>
 <meta charset="utf8">
 <title>CSS contain-intrinsic-size: grid indefinite size, auto-fit</title>
 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
 <link rel="match" href="contain-intrinsic-size-025-ref.html">
 <meta name="assert" content="definite size auto-fit uses intrinsic-size for the available space">

 <style>
 .grid {
   border: 3px solid black;
   display: grid;
   contain-intrinsic-size: 70px 80px;
   contain: size;
   width: max-content;
   background: lightblue;
   grid-gap: 5px;
 }
 .one {
   grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
 }
 .two {
   grid-template: 1fr 2fr / repeat(auto-fit, 15px);
 }
 .three {
   grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
 }

 .item {
   background: green;
   height: 100%;
 }
 </style>

 <div class="grid one">
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
 </div>
 <div class="grid two">
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
 </div>
 <div class="grid three">
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
   <div class=item></div>
 </div>
	<!doctype html>
	<meta charset="utf8">
	<title>CSS contain-intrinsic-size: grid indefinite size, auto-fit</title>
	<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
	<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
	<link rel="match" href="contain-intrinsic-size-025-ref.html">
	<meta name="assert" content="definite size auto-fit uses intrinsic-size for the available space">

	<style>
	.grid {
	border: 3px solid black;
	display: grid;
	contain-intrinsic-size: 70px 80px;
	contain: size;
	width: max-content;
	background: lightblue;
	grid-gap: 5px;
	}
	.one {
	grid-template: repeat(auto-fit, 10px) / 3fr 4fr;
	}
	.two {
	grid-template: 1fr 2fr / repeat(auto-fit, 15px);
	}
	.three {
	grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px);
	}

	.item {
	background: green;
	height: 100%;
	}
	</style>

	<div class="grid one">
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	</div>
	<div class="grid two">
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	</div>
	<div class="grid three">
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	<div class=item></div>
	</div>