chromium/src/third_party/blink/web_tests/external/wpt/css/css-grid/masonry/tentative/masonry-align-content-003.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 `align-content` in grid axis</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-align-content-003-ref.html">
   <style>
 html,body {
   color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
 }

 grid {
   display: inline-grid;
   gap: 1px 2px;
   grid-template-columns: masonry;
   grid-template-rows: repeat(4,auto);
   background: content-box silver;
   border: 1px solid;
   padding: 0 3px 2px 0;
   width: 100px;
   height: 120px;
   align-content: center;
   justify-items: start;
 }

 item {
   background-color: #444;
   color: #fff;
 }

 .tall { padding: 3px 11px 1px 13px; }
 </style>
 </head>
 <body>

 <grid style="align-content:start">
   <item class="tall">1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>

 <grid style="align-content:start">
   <item>1</item>
   <item class="tall">2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>

 <grid style="align-content:end">
   <item class="tall">1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>

 <grid style="align-content:end">
   <item>1</item>
   <item class="tall">2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>

 <grid style="align-content:center">
   <item class="tall">1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>

 <grid style="align-content:center">
   <item>1</item>
   <item class="tall">2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>

 <grid style="align-content:stretch">
   <item class="tall">1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>

 <grid style="align-content:space-between">
   <item class="tall">1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>

 <grid style="align-content:space-around">
   <item class="tall">1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>

 <grid style="align-content:space-evenly">
   <item class="tall">1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item>5</item>
   <item>6</item>
 </grid>
	<!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 `align-content` in grid axis</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-align-content-003-ref.html">
	<style>
	html,body {
	color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
	}

	grid {
	display: inline-grid;
	gap: 1px 2px;
	grid-template-columns: masonry;
	grid-template-rows: repeat(4,auto);
	background: content-box silver;
	border: 1px solid;
	padding: 0 3px 2px 0;
	width: 100px;
	height: 120px;
	align-content: center;
	justify-items: start;
	}

	item {
	background-color: #444;
	color: #fff;
	}

	.tall { padding: 3px 11px 1px 13px; }
	</style>
	</head>
	<body>

	<grid style="align-content:start">
	<item class="tall">1</item>
	<item>2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>

	<grid style="align-content:start">
	<item>1</item>
	<item class="tall">2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>

	<grid style="align-content:end">
	<item class="tall">1</item>
	<item>2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>

	<grid style="align-content:end">
	<item>1</item>
	<item class="tall">2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>

	<grid style="align-content:center">
	<item class="tall">1</item>
	<item>2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>

	<grid style="align-content:center">
	<item>1</item>
	<item class="tall">2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>

	<grid style="align-content:stretch">
	<item class="tall">1</item>
	<item>2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>

	<grid style="align-content:space-between">
	<item class="tall">1</item>
	<item>2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>

	<grid style="align-content:space-around">
	<item class="tall">1</item>
	<item>2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>

	<grid style="align-content:space-evenly">
	<item class="tall">1</item>
	<item>2</item>
	<item>3</item>
	<item>4</item>
	<item>5</item>
	<item>6</item>
	</grid>