LayoutTests/imported/w3c/web-platform-tests/css/css-grid/masonry.tentative/masonry-intrinsic-sizing-003.html - WebKit - 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 Grid Test: Masonry layout min-content sizing</title>
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
   <link rel="help" href="https://drafts.csswg.org/css-grid-2">
   <link rel="match" href="masonry-intrinsic-sizing-003-ref.html">
   <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
   <style>
 html,body {
   color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
 }

 grid {
   display: inline-grid;
   gap: 1px 2px;
   grid-template-columns: repeat(4,auto);
   grid-template-rows: masonry;
   border: 1px solid;
   padding: 0 1px 0 2px;
   vertical-align: top;
   width: min-content;
 }
 .fr {
   grid-template-columns: 1fr 2fr 1fr 1fr;
 }
 .mixed {
   grid-template-columns: 1fr 2fr min-content max-content;
 }

 item {
   background-color: #444;
   color: blue;
 }
 </style>
 </head>
 <body>

 <grid>
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item>5 5</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:2ch">5 5</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:2ch; grid-column:2">5 5</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="grid-column:2/span 2">5 5</item>
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:3ch; grid-column:2/span 2">5 5</item>
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="grid-column:span 4">5 5</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 4">5 5</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 3">5 5</item>
 </grid>

 <!-- ditto with 'fr' sizing -->

 <grid class="fr">
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item>5 5</item>
 </grid>

 <grid class="fr">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:2ch">5 5</item>
 </grid>

 <grid class="fr">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:2ch; grid-column:2">5 5</item>
 </grid>

 <grid class="fr">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>

 <grid class="fr">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="grid-column:2/span 2">5 5</item>
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>

 <grid class="fr">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:3ch; grid-column:2/span 2">5 5</item>
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>

 <grid class="fr">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="grid-column:span 4">5 5</item>
 </grid>

 <grid class="fr">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 4">5 5</item>
 </grid>

 <grid class="fr">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 3">5 5</item>
 </grid>

 <!-- ditto with mixed sizing -->

 <grid class="mixed">
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item>5 5</item>
 </grid>

 <grid class="mixed">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:2ch">5 5</item>
 </grid>

 <grid class="mixed">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:2ch; grid-column:2">5 5</item>
 </grid>

 <grid class="mixed">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>

 <grid class="mixed">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="grid-column:2/span 2">5 5</item>
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>

 <grid class="mixed">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:3ch; grid-column:2/span 2">5 5</item>
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>

 <grid class="mixed">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="grid-column:span 4">5 5</item>
 </grid>

 <grid class="mixed">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 4">5 5</item>
 </grid>

 <grid class="mixed">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 3">5 5</item>
 </grid>

 </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 Grid Test: Masonry layout min-content sizing</title>
	<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
	<link rel="help" href="https://drafts.csswg.org/css-grid-2">
	<link rel="match" href="masonry-intrinsic-sizing-003-ref.html">
	<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
	<style>
	html,body {
	color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
	}

	grid {
	display: inline-grid;
	gap: 1px 2px;
	grid-template-columns: repeat(4,auto);
	grid-template-rows: masonry;
	border: 1px solid;
	padding: 0 1px 0 2px;
	vertical-align: top;
	width: min-content;
	}
	.fr {
	grid-template-columns: 1fr 2fr 1fr 1fr;
	}
	.mixed {
	grid-template-columns: 1fr 2fr min-content max-content;
	}

	item {
	background-color: #444;
	color: blue;
	}
	</style>
	</head>
	<body>

	<grid>
	<item style="width:2ch">1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item>5 5</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:2ch">5 5</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:2ch; grid-column:2">5 5</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:4ch; grid-column:2/span 2">5 5</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="grid-column:2/span 2">5 5</item>
	<item style="width:5ch; grid-column:1/span 3">6</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:3ch; grid-column:2/span 2">5 5</item>
	<item style="width:5ch; grid-column:1/span 3">6</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="grid-column:span 4">5 5</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:6ch; grid-column:span 4">5 5</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:6ch; grid-column:span 3">5 5</item>
	</grid>

	<!-- ditto with 'fr' sizing -->

	<grid class="fr">
	<item style="width:2ch">1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item>5 5</item>
	</grid>

	<grid class="fr">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:2ch">5 5</item>
	</grid>

	<grid class="fr">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:2ch; grid-column:2">5 5</item>
	</grid>

	<grid class="fr">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:4ch; grid-column:2/span 2">5 5</item>
	</grid>

	<grid class="fr">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="grid-column:2/span 2">5 5</item>
	<item style="width:5ch; grid-column:1/span 3">6</item>
	</grid>

	<grid class="fr">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:3ch; grid-column:2/span 2">5 5</item>
	<item style="width:5ch; grid-column:1/span 3">6</item>
	</grid>

	<grid class="fr">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="grid-column:span 4">5 5</item>
	</grid>

	<grid class="fr">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:6ch; grid-column:span 4">5 5</item>
	</grid>

	<grid class="fr">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:6ch; grid-column:span 3">5 5</item>
	</grid>

	<!-- ditto with mixed sizing -->

	<grid class="mixed">
	<item style="width:2ch">1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item>5 5</item>
	</grid>

	<grid class="mixed">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:2ch">5 5</item>
	</grid>

	<grid class="mixed">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:2ch; grid-column:2">5 5</item>
	</grid>

	<grid class="mixed">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:4ch; grid-column:2/span 2">5 5</item>
	</grid>

	<grid class="mixed">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="grid-column:2/span 2">5 5</item>
	<item style="width:5ch; grid-column:1/span 3">6</item>
	</grid>

	<grid class="mixed">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:3ch; grid-column:2/span 2">5 5</item>
	<item style="width:5ch; grid-column:1/span 3">6</item>
	</grid>

	<grid class="mixed">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="grid-column:span 4">5 5</item>
	</grid>

	<grid class="mixed">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:6ch; grid-column:span 4">5 5</item>
	</grid>

	<grid class="mixed">
	<item>1</item>
	<item>2 2</item>
	<item>3 3</item>
	<item>4</item>
	<item style="width:6ch; grid-column:span 3">5 5</item>
	</grid>

	</body>
	</html>