blob: 1bd1fa67bfc53c3b7637fd3bc4bf98b8aa2403c5 [file] [log] [blame]
<!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>