LayoutTests/imported/w3c/web-platform-tests/css/css-grid/subgrid/subgrid-mbp-overflow-002.html - WebKit - 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: orthogonal writing-mode subgrid margin/border/padding that overflow the edge track</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="subgrid-mbp-overflow-001-ref.html">
 <style>
 html,body {
   color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0;
 }

 .grid {
   display: inline-grid;
   grid: auto / 7px 30px 10px 20px 5px;
   justify-content: space-around;
   align-content: start;
   border: 3px solid;
   width: 80px;
 }
 .rtl { direction: rtl; }

 .subgrid {
   display: grid;
   grid: subgrid / auto;
   min-width: 0;
   min-height: 30px;
   background: pink;
   border:1px solid;
   margin: 0 4px 0 3px;
   position: relative;
   writing-mode: vertical-lr;
 }
 .rtl > .subgrid { writing-mode: vertical-rl; }
 .c1 { grid-column: 2 / span 1; }
 .c2 { grid-column: 2 / span 2; }
 .c3 { grid-column: 2 / span 3; }
 .pr { padding-right: 30px; }
 .pl { padding-left: 30px; }
 .plr { padding: 0 50px 0 80px; }

 y {
   background: blue;
   height: 10px;
 }
 y:nth-of-type(1) { grid-column: 2; }
 y:nth-of-type(2) { grid-column: 4; }

 x { background: silver; }
 x:nth-of-type(2) { background: purple; }
 x:nth-of-type(3) { background: magenta; }

 a {
   position: absolute;
   grid-row-start: 1;
   inset: 0;
   top: 3px;
   border-top: 2px solid grey;
 }
 a:nth-of-type(2) {
   grid-row-start: 2;
   top: 6px;
 }
 a:nth-of-type(3) {
   grid-row-start: 3;
   top: 9px;
 }

 b {
   position: absolute;
   grid-row-end: 1;
   inset: 0;
   top: 12px;
   border-top: 2px solid grey;
 }
 b:nth-of-type(2) {
   grid-row-end: 2;
   top: 15px;
 }
 b:nth-of-type(3) {
   grid-row-end: 3;
   top: 18px;
 }

 .f { float:left; margin-left:80px; }
 </style>
 </head>
 <body>

 <div class=f>
 <div class="grid">
   <y></y><y></y>
   <div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid">
   <y></y><y></y>
   <div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid">
   <y></y><y></y>
   <div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid rtl">
   <y></y><y></y>
   <div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid rtl">
   <y></y><y></y>
   <div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid rtl">
   <y></y><y></y>
   <div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 </div>

 <div class=f>
 <div class="grid">
   <y></y><y></y>
   <div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid">
   <y></y><y></y>
   <div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid">
   <y></y><y></y>
   <div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid rtl">
   <y></y><y></y>
   <div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid rtl">
   <y></y><y></y>
   <div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid rtl">
   <y></y><y></y>
   <div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
 </div>

 </div>

 <div class=f>
 <div class="grid">
   <y></y><y></y>
   <div class="subgrid c1 pr"><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid">
   <y></y><y></y>
   <div class="subgrid c1 pl"><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid">
   <y></y><y></y>
   <div class="subgrid c1 plr"><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid rtl">
   <y></y><y></y>
   <div class="subgrid c1 pr"><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid rtl">
   <y></y><y></y>
   <div class="subgrid c1 pl"><x></x><a></a><b></b></div>
 </div>

 <br>

 <div class="grid rtl">
   <y></y><y></y>
   <div class="subgrid c1 plr"><x></x><a></a><b></b></div>
 </div>

 </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 Grid Test: orthogonal writing-mode subgrid margin/border/padding that overflow the edge track</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="subgrid-mbp-overflow-001-ref.html">
	<style>
	html,body {
	color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0;
	}

	.grid {
	display: inline-grid;
	grid: auto / 7px 30px 10px 20px 5px;
	justify-content: space-around;
	align-content: start;
	border: 3px solid;
	width: 80px;
	}
	.rtl { direction: rtl; }

	.subgrid {
	display: grid;
	grid: subgrid / auto;
	min-width: 0;
	min-height: 30px;
	background: pink;
	border:1px solid;
	margin: 0 4px 0 3px;
	position: relative;
	writing-mode: vertical-lr;
	}
	.rtl > .subgrid { writing-mode: vertical-rl; }
	.c1 { grid-column: 2 / span 1; }
	.c2 { grid-column: 2 / span 2; }
	.c3 { grid-column: 2 / span 3; }
	.pr { padding-right: 30px; }
	.pl { padding-left: 30px; }
	.plr { padding: 0 50px 0 80px; }

	y {
	background: blue;
	height: 10px;
	}
	y:nth-of-type(1) { grid-column: 2; }
	y:nth-of-type(2) { grid-column: 4; }

	x { background: silver; }
	x:nth-of-type(2) { background: purple; }
	x:nth-of-type(3) { background: magenta; }

	a {
	position: absolute;
	grid-row-start: 1;
	inset: 0;
	top: 3px;
	border-top: 2px solid grey;
	}
	a:nth-of-type(2) {
	grid-row-start: 2;
	top: 6px;
	}
	a:nth-of-type(3) {
	grid-row-start: 3;
	top: 9px;
	}

	b {
	position: absolute;
	grid-row-end: 1;
	inset: 0;
	top: 12px;
	border-top: 2px solid grey;
	}
	b:nth-of-type(2) {
	grid-row-end: 2;
	top: 15px;
	}
	b:nth-of-type(3) {
	grid-row-end: 3;
	top: 18px;
	}

	.f { float:left; margin-left:80px; }
	</style>
	</head>
	<body>

	<div class=f>
	<div class="grid">
	<y></y><y></y>
	<div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid">
	<y></y><y></y>
	<div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid">
	<y></y><y></y>
	<div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid rtl">
	<y></y><y></y>
	<div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid rtl">
	<y></y><y></y>
	<div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid rtl">
	<y></y><y></y>
	<div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	</div>

	<div class=f>
	<div class="grid">
	<y></y><y></y>
	<div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid">
	<y></y><y></y>
	<div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid">
	<y></y><y></y>
	<div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid rtl">
	<y></y><y></y>
	<div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid rtl">
	<y></y><y></y>
	<div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid rtl">
	<y></y><y></y>
	<div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
	</div>

	</div>

	<div class=f>
	<div class="grid">
	<y></y><y></y>
	<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid">
	<y></y><y></y>
	<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid">
	<y></y><y></y>
	<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid rtl">
	<y></y><y></y>
	<div class="subgrid c1 pr"><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid rtl">
	<y></y><y></y>
	<div class="subgrid c1 pl"><x></x><a></a><b></b></div>
	</div>

	<br>

	<div class="grid rtl">
	<y></y><y></y>
	<div class="subgrid c1 plr"><x></x><a></a><b></b></div>
	</div>

	</div>

	</body>
	</html>