chromium/src/third_party/blink/web_tests/external/wpt/css/css-grid/masonry/tentative/masonry-subgrid-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 Grid Test: Masonry layout with a subgrid</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-subgrid-001-ref.html">
 <style>
 html,body {
   color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
 }

 grid {
   display: inline-grid;
   grid-template-rows: 50px 80px 40px;
   grid-template-columns: masonry;
   gap: 4px 2px;
   padding: 1px 3px 5px 7px;
   border: solid;
   border-width: 3px 5px 1px 1px;
   background: lightgrey content-box;
 }
 .rows {
   grid-template-columns: 50px 80px 40px;
   grid-template-rows: masonry;
 }
 item {
   background: grey;
   width: 3ch;
   position: relative;
 }
 item:nth-child(2n) { background:purple; width:auto; }
 item:nth-child(1) {
   border: solid;
   border-width: 3px 13px 1px 1px;
   margin: 7px 1px 5px 3px;
 }
 subgrid {
   display: grid;
   grid: subgrid / subgrid;
   grid-row: 2 / span 2;
   grid-gap: 8px 20px;
   background: yellow;
 }
 .rows > subgrid {
   grid-row: initial;
   grid-column: 2 / span 2;
 }
 </style>
 </head>
 <body>

 <!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
 <grid style="grid:masonry/masonry">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <subgrid>
     <item>4a</item>
     <item style="margin-right:15px">4b</item>
   </subgrid>
 </grid>

 <grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <subgrid>
     <item>4a</item>
     <item>4b</item>
     <item>4c</item>
   </subgrid>
   <item>5</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <subgrid style="grid:subgrid/auto">
     <item>4a</item>
     <item>4b</item>
     <item>4c</item>
   </subgrid>
   <item>5</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <subgrid style="grid:subgrid/auto; grid-auto-flow:column">
     <item>4a</item>
     <item>4b</item>
     <item>4c</item>
   </subgrid>
   <item>5</item>
 </grid>

 <grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <subgrid style="grid:auto auto/subgrid">
     <item>4a</item>
     <item>4b</item>
     <item>4c</item>
   </subgrid>
   <item>5</item>
 </grid>

 <grid class="rows">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <subgrid>
     <item>4a</item>
     <item>4b</item>
     <item>4c</item>
   </subgrid>
   <item>5</item>
 </grid>

 <grid class="rows">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <subgrid style="grid:auto/subgrid">
     <item>4a</item>
     <item>4b</item>
     <item>4c</item>
   </subgrid>
   <item>5</item>
 </grid>

 <grid class="rows">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <subgrid style="grid:auto/subgrid; grid-auto-flow:column">
     <item>4a</item>
     <item>4b</item>
     <item>4c</item>
   </subgrid>
   <item>5</item>
 </grid>

 <grid class="rows">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <subgrid style="grid:auto auto/subgrid">
     <item>4a</item>
     <item>4b</item>
     <item>4c</item>
   </subgrid>
   <item>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 with a subgrid</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-subgrid-001-ref.html">
	<style>
	html,body {
	color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
	}

	grid {
	display: inline-grid;
	grid-template-rows: 50px 80px 40px;
	grid-template-columns: masonry;
	gap: 4px 2px;
	padding: 1px 3px 5px 7px;
	border: solid;
	border-width: 3px 5px 1px 1px;
	background: lightgrey content-box;
	}
	.rows {
	grid-template-columns: 50px 80px 40px;
	grid-template-rows: masonry;
	}
	item {
	background: grey;
	width: 3ch;
	position: relative;
	}
	item:nth-child(2n) { background:purple; width:auto; }
	item:nth-child(1) {
	border: solid;
	border-width: 3px 13px 1px 1px;
	margin: 7px 1px 5px 3px;
	}
	subgrid {
	display: grid;
	grid: subgrid / subgrid;
	grid-row: 2 / span 2;
	grid-gap: 8px 20px;
	background: yellow;
	}
	.rows > subgrid {
	grid-row: initial;
	grid-column: 2 / span 2;
	}
	</style>
	</head>
	<body>

	<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
	<grid style="grid:masonry/masonry">
	<item>1</item>
	<item>2</item>
	<item>3</item>
	<subgrid>
	<item>4a</item>
	<item style="margin-right:15px">4b</item>
	</subgrid>
	</grid>

	<grid>
	<item>1</item>
	<item>2</item>
	<item>3</item>
	<subgrid>
	<item>4a</item>
	<item>4b</item>
	<item>4c</item>
	</subgrid>
	<item>5</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2</item>
	<item>3</item>
	<subgrid style="grid:subgrid/auto">
	<item>4a</item>
	<item>4b</item>
	<item>4c</item>
	</subgrid>
	<item>5</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2</item>
	<item>3</item>
	<subgrid style="grid:subgrid/auto; grid-auto-flow:column">
	<item>4a</item>
	<item>4b</item>
	<item>4c</item>
	</subgrid>
	<item>5</item>
	</grid>

	<grid>
	<item>1</item>
	<item>2</item>
	<item>3</item>
	<subgrid style="grid:auto auto/subgrid">
	<item>4a</item>
	<item>4b</item>
	<item>4c</item>
	</subgrid>
	<item>5</item>
	</grid>

	<grid class="rows">
	<item>1</item>
	<item>2</item>
	<item>3</item>
	<subgrid>
	<item>4a</item>
	<item>4b</item>
	<item>4c</item>
	</subgrid>
	<item>5</item>
	</grid>

	<grid class="rows">
	<item>1</item>
	<item>2</item>
	<item>3</item>
	<subgrid style="grid:auto/subgrid">
	<item>4a</item>
	<item>4b</item>
	<item>4c</item>
	</subgrid>
	<item>5</item>
	</grid>

	<grid class="rows">
	<item>1</item>
	<item>2</item>
	<item>3</item>
	<subgrid style="grid:auto/subgrid; grid-auto-flow:column">
	<item>4a</item>
	<item>4b</item>
	<item>4c</item>
	</subgrid>
	<item>5</item>
	</grid>

	<grid class="rows">
	<item>1</item>
	<item>2</item>
	<item>3</item>
	<subgrid style="grid:auto auto/subgrid">
	<item>4a</item>
	<item>4b</item>
	<item>4c</item>
	</subgrid>
	<item>5</item>
	</grid>

	</body></html>