chromium/src/third_party/blink/web_tests/external/wpt/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-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 Test: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
   <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-001-ref.html">
   <style>
     .container {
       display: grid;
       writing-mode: vertical-rl;
       padding: 1px 2px;
       border: 1px solid black;
       background: yellow;
       margin-bottom: 5px;
       margin-right: 5px;
       float: left; /* For testing in "rows" of containers */
       position: relative;
     }
     br { clear: both }

     .big > .container {
       height: 30px;
       width: 22px;
       grid: 3px 14px 3px / 2px 20px 2px;
     }
     .small > .container {
       grid: 3px 2px 3px / 0px 2px 0px;
       height: 2px;
       width: 4px;
     }

     .container > * {
       position: absolute;
       grid-area: 2 / 2 / 3 / 3;
       background: teal;
       height: 6px;
       width: 8px;
     }
   </style>
 </head>
 <body>
   <div class="big">
     <!-- The various justify-self values, from
          https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
     <!-- auto | normal | stretch -->
     <div class="container"><div style="justify-self: auto"></div></div>
     <div class="container"><div style="justify-self: normal"></div></div>
     <div class="container"><div style="justify-self: stretch"></div></div>
     <br>
     <!-- <baseline-position> -->
     <div class="container"><div style="justify-self: baseline"></div></div>
     <div class="container"><div style="justify-self: last baseline"></div></div>
     <br>
     <!-- <self-position>, part 1 -->
     <div class="container"><div style="justify-self: center"></div></div>
     <div class="container"><div style="justify-self: start"></div></div>
     <div class="container"><div style="justify-self: end"></div></div>
     <div class="container"><div style="justify-self: self-start"></div></div>
     <div class="container"><div style="justify-self: self-end"></div></div>
     <br>
     <!-- <self-position>, part 2 -->
     <div class="container"><div style="justify-self: flex-start"></div></div>
     <div class="container"><div style="justify-self: flex-end"></div></div>
     <div class="container"><div style="justify-self: left"></div></div>
     <div class="container"><div style="justify-self: right"></div></div>
     <br>
   </div>
   <div class="small">
     <!-- The various justify-self values, from
          https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
     <!-- auto | normal | stretch -->
     <div class="container"><div style="justify-self: auto"></div></div>
     <div class="container"><div style="justify-self: normal"></div></div>
     <div class="container"><div style="justify-self: stretch"></div></div>
     <br>
     <!-- <baseline-position> -->
     <div class="container"><div style="justify-self: baseline"></div></div>
     <div class="container"><div style="justify-self: last baseline"></div></div>
     <br>
     <!-- <self-position>, part 1 -->
     <div class="container"><div style="justify-self: center"></div></div>
     <div class="container"><div style="justify-self: start"></div></div>
     <div class="container"><div style="justify-self: end"></div></div>
     <div class="container"><div style="justify-self: self-start"></div></div>
     <div class="container"><div style="justify-self: self-end"></div></div>
     <br>
     <!-- <self-position>, part 2 -->
     <div class="container"><div style="justify-self: flex-start"></div></div>
     <div class="container"><div style="justify-self: flex-end"></div></div>
     <div class="container"><div style="justify-self: left"></div></div>
     <div class="container"><div style="justify-self: right"></div></div>
     <br>
   </div>
 </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 Test: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title>
	<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
	<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
	<link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-001-ref.html">
	<style>
	.container {
	display: grid;
	writing-mode: vertical-rl;
	padding: 1px 2px;
	border: 1px solid black;
	background: yellow;
	margin-bottom: 5px;
	margin-right: 5px;
	float: left; /* For testing in "rows" of containers */
	position: relative;
	}
	br { clear: both }

	.big > .container {
	height: 30px;
	width: 22px;
	grid: 3px 14px 3px / 2px 20px 2px;
	}
	.small > .container {
	grid: 3px 2px 3px / 0px 2px 0px;
	height: 2px;
	width: 4px;
	}

	.container > * {
	position: absolute;
	grid-area: 2 / 2 / 3 / 3;
	background: teal;
	height: 6px;
	width: 8px;
	}
	</style>
	</head>
	<body>
	<div class="big">
	<!-- The various justify-self values, from
	https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
	<!-- auto \| normal \| stretch -->
	<div class="container"><div style="justify-self: auto"></div></div>
	<div class="container"><div style="justify-self: normal"></div></div>
	<div class="container"><div style="justify-self: stretch"></div></div>
	<br>
	<!-- <baseline-position> -->
	<div class="container"><div style="justify-self: baseline"></div></div>
	<div class="container"><div style="justify-self: last baseline"></div></div>
	<br>
	<!-- <self-position>, part 1 -->
	<div class="container"><div style="justify-self: center"></div></div>
	<div class="container"><div style="justify-self: start"></div></div>
	<div class="container"><div style="justify-self: end"></div></div>
	<div class="container"><div style="justify-self: self-start"></div></div>
	<div class="container"><div style="justify-self: self-end"></div></div>
	<br>
	<!-- <self-position>, part 2 -->
	<div class="container"><div style="justify-self: flex-start"></div></div>
	<div class="container"><div style="justify-self: flex-end"></div></div>
	<div class="container"><div style="justify-self: left"></div></div>
	<div class="container"><div style="justify-self: right"></div></div>
	<br>
	</div>
	<div class="small">
	<!-- The various justify-self values, from
	https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
	<!-- auto \| normal \| stretch -->
	<div class="container"><div style="justify-self: auto"></div></div>
	<div class="container"><div style="justify-self: normal"></div></div>
	<div class="container"><div style="justify-self: stretch"></div></div>
	<br>
	<!-- <baseline-position> -->
	<div class="container"><div style="justify-self: baseline"></div></div>
	<div class="container"><div style="justify-self: last baseline"></div></div>
	<br>
	<!-- <self-position>, part 1 -->
	<div class="container"><div style="justify-self: center"></div></div>
	<div class="container"><div style="justify-self: start"></div></div>
	<div class="container"><div style="justify-self: end"></div></div>
	<div class="container"><div style="justify-self: self-start"></div></div>
	<div class="container"><div style="justify-self: self-end"></div></div>
	<br>
	<!-- <self-position>, part 2 -->
	<div class="container"><div style="justify-self: flex-start"></div></div>
	<div class="container"><div style="justify-self: flex-end"></div></div>
	<div class="container"><div style="justify-self: left"></div></div>
	<div class="container"><div style="justify-self: right"></div></div>
	<br>
	</div>
	</body>
	</html>