mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
151 lines
2.9 KiB
HTML
151 lines
2.9 KiB
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: 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-003-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; }
|
|
.ltr { direction: ltr; }
|
|
|
|
.subgrid {
|
|
display: grid;
|
|
grid: auto / subgrid;
|
|
justify-self: self-start;
|
|
min-width: 0;
|
|
min-height: 30px;
|
|
background: pink;
|
|
border:1px solid;
|
|
margin: 0 4px 0 3px;
|
|
position: relative;
|
|
}
|
|
.c1 { grid-column: 4 / span 1; }
|
|
.c3 { grid-column: 2 / span 3; }
|
|
.pr { padding-right: 30px; }
|
|
.pl { padding-left: 30px; }
|
|
|
|
y {
|
|
background: blue;
|
|
height: 10px;
|
|
}
|
|
y:nth-of-type(1) { grid-column: 2; }
|
|
y:nth-of-type(2) { grid-column: 4; }
|
|
|
|
x { background: silver; border-inline-start: 2px solid lime; }
|
|
x:nth-of-type(2) { background: purple; }
|
|
x:nth-of-type(3) { background: magenta; }
|
|
|
|
a {
|
|
position: absolute;
|
|
grid-column-start: 1;
|
|
inset: 0;
|
|
top: 3px;
|
|
border-top: 2px solid grey;
|
|
}
|
|
a:nth-of-type(2) {
|
|
grid-column-start: 2;
|
|
top: 6px;
|
|
}
|
|
a:nth-of-type(3) {
|
|
grid-column-start: 3;
|
|
top: 9px;
|
|
}
|
|
|
|
b {
|
|
position: absolute;
|
|
grid-column-end: 1;
|
|
inset: 0;
|
|
top: 12px;
|
|
border-top: 2px solid grey;
|
|
}
|
|
b:nth-of-type(2) {
|
|
grid-column-end: 2;
|
|
top: 15px;
|
|
}
|
|
b:nth-of-type(3) {
|
|
grid-column-end: 3;
|
|
top: 18px;
|
|
}
|
|
|
|
.f { float:left; margin-left:10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class=f>
|
|
<div class="grid ltr">
|
|
<y></y><y></y>
|
|
<div class="subgrid rtl 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 ltr">
|
|
<y></y><y></y>
|
|
<div class="subgrid rtl 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 ltr 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 ltr c3 pl"><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 ltr">
|
|
<y></y><y></y>
|
|
<div class="subgrid rtl c1 pr"><x></x><a></a><b></b></div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="grid ltr">
|
|
<y></y><y></y>
|
|
<div class="subgrid rtl c1 pl"><x></x><a></a><b></b></div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="grid rtl">
|
|
<y></y><y></y>
|
|
<div class="subgrid ltr c1 pr"><x></x><a></a><b></b></div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="grid rtl">
|
|
<y></y><y></y>
|
|
<div class="subgrid ltr c1 pl"><x></x><a></a><b></b></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|