mirror of
https://github.com/servo/servo.git
synced 2025-08-14 01:45:33 +01:00
Update web-platform-tests to revision 55351d32dd26ea3ad42a8f5973e943ba0342c812
This commit is contained in:
WPT Sync Bot
parent
1b7223a284
commit
81d0cdbb2c
159 changed files with 2809 additions and 967 deletions
|
|
@ -61,7 +61,7 @@ x {
|
|||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid">
|
||||
<x style="grid-column:3; right:33px">x</x>
|
||||
<x style="grid-column:3; right:27px">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ x {
|
|||
<div class="grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hr">
|
||||
<x style="grid-column:auto/1; left:-33px">x</x>
|
||||
<x style="grid-column:auto/1; left:-27px">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,233 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid margin/border/padding that overflow the edge track</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<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;
|
||||
min-width: 0;
|
||||
min-height: 30px;
|
||||
background: pink;
|
||||
border:1px solid;
|
||||
margin: 0 4px 0 3px;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.c1 { width: 30px; grid-column: 2 / span 1; grid: auto / 26px; }
|
||||
.rtl > .c1 { grid: auto / 25px; }
|
||||
.c1.plr { padding-right: 100px; }
|
||||
.rtl > .c1.plr { padding: 0 0 0 100px; }
|
||||
|
||||
.c2 { width: 33px; grid-column: 2 / span 2; grid: auto / 26px 5px; }
|
||||
.rtl > .c2 { grid: auto / 25px 6px; }
|
||||
.c2.plr { padding-right: 97px; }
|
||||
.rtl > .c2.plr { padding: 0 0 0 97px; }
|
||||
|
||||
.c3 { width: 55px; grid-column: 2 / span 3; grid: auto / 26px 10px 15px; }
|
||||
.rtl > .c3 { grid: auto / 25px 10px 16px; }
|
||||
.c3.plr { padding-right: 75px; }
|
||||
.rtl > .c3.plr { padding: 0 0 0 75px; }
|
||||
|
||||
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-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:80px; }
|
||||
.z { height:0; }
|
||||
.s2 { grid-column:2; }
|
||||
.gl { left: -2px; }
|
||||
.e2 { grid-column-end:2; }
|
||||
.gr { right: -2px; }
|
||||
</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><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c3 pl"><x class="z"></x><a class="s2 gl"></a><b class="e2"></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 class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b><x class="z"></x><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid rtl">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c3 pr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></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 class="z"></x><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid rtl">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c3 plr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></b><x></x><a></a><b></b><x class="z"></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 class="z"></x><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c2 pl"><x class="z"></x><a class="s2 gl"></a><b class="e2"></b><x></x><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c2 plr"><a class="s2 gl"></a><b class="e2"></b><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid rtl">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c2 pr"><x class="z"></x><a class="s2 gr"></a><b class="e2"></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 class="z"></x><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid rtl">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c2 plr"><a class="s2 gr"></a><b class="e2"></b><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class=f>
|
||||
<div class="grid">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c1 pr"><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c1 pl"><a class="s2"></a><b class="e2"></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c1 plr"><a class="s2"></a><b class="e2"></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid rtl">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c1 pr"><a class="s2"></a><b class="e2"></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid rtl">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c1 pl"><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid rtl">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid c1 plr"><a class="s2"></a><b class="e2"></b></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<!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-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: auto / subgrid;
|
||||
min-width: 0;
|
||||
min-height: 30px;
|
||||
background: pink;
|
||||
border:1px solid;
|
||||
margin: 0 4px 0 3px;
|
||||
position: relative;
|
||||
}
|
||||
.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-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: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>
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: subgrid margin/border/padding that overflow the edge track</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<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;
|
||||
justify-content: space-between;
|
||||
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; }
|
||||
|
||||
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; }
|
||||
|
||||
.c1 { width: 30px; }
|
||||
.ltr.c1.pl > x, .rtl.c1.pr > x {
|
||||
padding-inline-start: 15px;
|
||||
border-inline: none;
|
||||
border-inline-end: 2px solid lime;
|
||||
background: pink;
|
||||
}
|
||||
.ltr.c1.pl > x { padding-inline-start: 16px; }
|
||||
.rtl.c1.pr > a { width: 15px; margin-inline-start: 15px; }
|
||||
.ltr.c1.pl > a { width: 14px; margin-inline-start: 16px;}
|
||||
.rtl.c1.pr > b { width: 15px; }
|
||||
.ltr.c1.pl > b { width: 16px; }
|
||||
|
||||
.c3 { width: 55px; grid: auto / 15px 10px 26px; }
|
||||
.rtl.c3.pl { padding-inline-end: 4px; }
|
||||
.ltr.c3.pr { padding-inline-end: 5px; }
|
||||
.ltr.c3 { grid: auto / 16px 10px 25px; }
|
||||
.rtl.c3.pr > a:nth-of-type(1) { width: 40px; right: 15px; }
|
||||
.ltr.c3.pl > a:nth-of-type(1) { width: 39px; left: 16px; }
|
||||
.rtl.c3.pr > b:nth-of-type(1),
|
||||
.rtl.c3.pr > b:nth-of-type(2){ width: 15px; }
|
||||
.ltr.c3.pl > b:nth-of-type(1),
|
||||
.ltr.c3.pl > b:nth-of-type(2){ width: 16px; }
|
||||
|
||||
x.zero { background: pink; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class=f>
|
||||
<div class="grid ltr">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid rtl c3 pr"><x class="zero" style="margin-right:15px"></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 class="zero"></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 class="zero"></x><a></a><b></b></div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="grid rtl">
|
||||
<y></y><y></y>
|
||||
<div class="subgrid ltr c3 pl"><x class="zero" style="margin-left:16px"></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>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue