css/css-align/abspos/align-self-static-position-008-ref.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!DOCTYPE html>
 <style>
 .block {
   display: block;
   width: 75%;
   height: 75%;
   border: 5px dotted blue;
 }

 .container {
   border: 1px solid;
   position: relative;
   display: inline-block;
   width: 100px;
   height: 100px;
   margin-left: 50px;
   margin-bottom: 50px;
 }

 .abs {
   width: 50px;
   height: 50px;
   position: absolute;
   background: purple;
 }
 </style>
 <!-- justify-self -->
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: end;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: end;"></div>
 </div></div>
 <br>
 <div class="container"><div class="block">
   <div class="abs" style="left: 25px;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: end;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="justify-self: start;"></div>
 </div></div>
 <br>
 <!-- align-self -->
 <div class="container"><div class="block">
   <div class="abs" style="align-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: end;"></div>
 </div></div>
 <br>
 <div class="container"><div class="block">
   <div class="abs" style="top: 25px;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: end;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: start;"></div>
 </div></div>
 <div class="container"><div class="block">
   <div class="abs" style="align-self: start;"></div>
 </div></div>
	<!DOCTYPE html>
	<style>
	.block {
	display: block;
	width: 75%;
	height: 75%;
	border: 5px dotted blue;
	}

	.container {
	border: 1px solid;
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	margin-left: 50px;
	margin-bottom: 50px;
	}

	.abs {
	width: 50px;
	height: 50px;
	position: absolute;
	background: purple;
	}
	</style>
	<!-- justify-self -->
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: end;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: end;"></div>
	</div></div>
	<br>
	<div class="container"><div class="block">
	<div class="abs" style="left: 25px;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: end;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="justify-self: start;"></div>
	</div></div>
	<br>
	<!-- align-self -->
	<div class="container"><div class="block">
	<div class="abs" style="align-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: end;"></div>
	</div></div>
	<br>
	<div class="container"><div class="block">
	<div class="abs" style="top: 25px;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: end;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: start;"></div>
	</div></div>
	<div class="container"><div class="block">
	<div class="abs" style="align-self: start;"></div>
	</div></div>