chromium/src/third_party/blink/web_tests/external/wpt/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <title>
   Reference for Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items
 </title>

 <style>
   @import "/fonts/ahem.css";
   .grid {
     border: solid silver;
     margin: 1em 2px;
     font: 20px/1 Ahem;

     display: inline-block;
     vertical-align: top;
   }
   .grid > div {
     border: black 10px;
     border-style: none solid;
     color: orange;
     writing-mode: vertical-rl;
   }
   div + div {
     font-size: 2em;
   }
   div + div + div {
     font-size: 50%;
   }

   .ref {
     position: relative;
     width: 96px;
     height: 80px;
   }
   .ref > div {
     position: absolute;
   }
   .ref1 { right:  16px; }
   .ref2 { top:    20px;
           right:   0px; }
   .ref3 { right:  24px;
           top:    60px; }
   .ref4 { bottom:  0px;
           right:   0px;
           left:    0px;
           height: 10px; }

   .ref.content > div:not(.stripe) {
     border-color: transparent;
   }
   .stripe {
     width: 76px;
     height: 80px;
   }
 </style>

 <p>Test passes if each pair of boxes is identical.</p>

 <div class="grid self ref">
   <div class="ref1">
     p<br>
     p<br>
     p
   </div>
   <div class="ref2">
     p
   </div>
   <div class="ref3">
     p
   </div>
   <div class="ref4">
     &nbsp;
   </div>
 </div>

 <div class="grid self ref">
   <div class="ref1">
     p<br>
     p<br>
     p
   </div>
   <div class="ref2">
     p
   </div>
   <div class="ref3">
     p
   </div>
   <div class="ref4">
     &nbsp;
   </div>
 </div>

 <br>

 <div class="grid content ref">
   <div class="ref1">
     p<br>
     p<br>
     p
   </div>
   <div class="ref2">
     p
   </div>
   <div class="ref3">
     p
   </div>
   <div class="ref4">
     &nbsp;
   </div>
   <div class="stripe">
   </div>
 </div>

 <div class="grid content ref">
   <div class="ref1">
     p<br>
     p<br>
     p
   </div>
   <div class="ref2">
     p
   </div>
   <div class="ref3">
     p
   </div>
   <div class="ref4">
     &nbsp;
   </div>
   <div class="stripe">
   </div>
 </div>
	<!DOCTYPE html>
	<title>
	Reference for Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items
	</title>

	<style>
	@import "/fonts/ahem.css";
	.grid {
	border: solid silver;
	margin: 1em 2px;
	font: 20px/1 Ahem;

	display: inline-block;
	vertical-align: top;
	}
	.grid > div {
	border: black 10px;
	border-style: none solid;
	color: orange;
	writing-mode: vertical-rl;
	}
	div + div {
	font-size: 2em;
	}
	div + div + div {
	font-size: 50%;
	}

	.ref {
	position: relative;
	width: 96px;
	height: 80px;
	}
	.ref > div {
	position: absolute;
	}
	.ref1 { right: 16px; }
	.ref2 { top: 20px;
	right: 0px; }
	.ref3 { right: 24px;
	top: 60px; }
	.ref4 { bottom: 0px;
	right: 0px;
	left: 0px;
	height: 10px; }

	.ref.content > div:not(.stripe) {
	border-color: transparent;
	}
	.stripe {
	width: 76px;
	height: 80px;
	}
	</style>

	<p>Test passes if each pair of boxes is identical.</p>

	<div class="grid self ref">
	<div class="ref1">
	p<br>
	p<br>
	p
	</div>
	<div class="ref2">
	p
	</div>
	<div class="ref3">
	p
	</div>
	<div class="ref4">

	</div>
	</div>

	<div class="grid self ref">
	<div class="ref1">
	p<br>
	p<br>
	p
	</div>
	<div class="ref2">
	p
	</div>
	<div class="ref3">
	p
	</div>
	<div class="ref4">

	</div>
	</div>

	<br>

	<div class="grid content ref">
	<div class="ref1">
	p<br>
	p<br>
	p
	</div>
	<div class="ref2">
	p
	</div>
	<div class="ref3">
	p
	</div>
	<div class="ref4">

	</div>
	<div class="stripe">
	</div>
	</div>

	<div class="grid content ref">
	<div class="ref1">
	p<br>
	p<br>
	p
	</div>
	<div class="ref2">
	p
	</div>
	<div class="ref3">
	p
	</div>
	<div class="ref4">

	</div>
	<div class="stripe">
	</div>
	</div>