mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision e9f2d000237d43f74136cfd40e5a3454f5b54b70
This commit is contained in:
WPT Sync Bot
parent
8bc8981ae5
commit
57465056e7
127 changed files with 18346 additions and 155 deletions
|
|
@ -0,0 +1,68 @@
|
|||
<!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: baseline align a display:block item with a display:grid item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x, z {
|
||||
display: block;
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
z {
|
||||
width: 40px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x> A</x><z></z>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<z></z><x> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!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: baseline align a display:block item with a display:grid item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x> A</x><x style="grid-row:2"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x></x><x style="grid-row:2"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!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: baseline align a display:block item with a display:grid item with spanned item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x style="grid-row:1/span 3"> A</x><x style="grid-column:1"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x></x><x style="grid-row:2/span 3"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!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: baseline align a display:block item with a display:grid spanned item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 2 / span 2;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:2/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x> A</x><x style="grid-row:2"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x></x><x style="grid-row:2"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!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: baseline align a display:block item with a display:grid spanned item with spanned item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-self-alignment-baseline-with-grid-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.inner-grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2;
|
||||
grid-row: 2 / span 2;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
border: 0 solid lightblue;
|
||||
border-top-width: 10px;
|
||||
border-bottom-width: 40px;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 40px;
|
||||
min-height: 10px;
|
||||
font-size: 10em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:2/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x style="grid-row:1/span 3"> A</x><x style="grid-row:4"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items:last baseline">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="inner-grid">
|
||||
<x></x><x style="grid-row:2/span 3"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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: grid-aligned abs.pos. inside subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / repeat(10, 30px) 100px;
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
position: relative;
|
||||
padding: 4px 3px 1px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 0 / repeat(10, 30px) 100px;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 8;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
background: pink;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
top:0; bottom:0; left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:auto/1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!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: grid-aligned abs.pos. inside subgrid</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="abs-pos-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(10, 30px);
|
||||
grid-template-areas: ". . . . . . . . . . .";
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
grid-auto-columns: 100px;
|
||||
grid-auto-rows: 100px;
|
||||
position: relative;
|
||||
padding: 4px 3px 1px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
background: pink;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
top:0; bottom:0; left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:auto/1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!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: grid-aligned abs.pos. inside rel.pos. subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(10, 30px) 100px;
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: auto / 27px repeat(7, 30px);
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
padding: 4px 0 1px 0;
|
||||
border: 3px solid black;
|
||||
min-height: 1em;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
background: pink;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
top:0; bottom:0; left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:auto/1; right:-10px">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3/-1; left:13px">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<!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: grid-aligned abs.pos. inside rel.pos. subgrid</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="abs-pos-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(10, 30px);
|
||||
grid-template-areas: ". . . . . . . . . . .";
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
grid-auto-columns: 100px;
|
||||
grid-auto-rows: 100px;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: auto / subgrid;
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
padding: 4px 33px 1px 10px;
|
||||
border: 3px solid black;
|
||||
min-width: 0;
|
||||
min-height: 1em;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
background: pink;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
top:0; bottom:0; left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:auto/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:auto/1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3/5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3/-1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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:3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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/3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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: baseline-aligned subgrid item</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 4;
|
||||
grid-row: 3 / span 2;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
x, z {
|
||||
display: block;
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
font-size: 8em;
|
||||
background: silver;
|
||||
}
|
||||
z {
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:3/1">A </y>
|
||||
<div class="subgrid">
|
||||
<z></z><x> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items: last baseline">
|
||||
<y style="grid-area:4/1">A </y>
|
||||
<div class="subgrid">
|
||||
<z></z><x> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!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: baseline-aligned subgrid item</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="baseline-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
|
||||
place-content: start;
|
||||
place-items: baseline start;
|
||||
border: 1px solid;
|
||||
text-decoration: underline blue;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 4;
|
||||
grid-row: 3 / span 2;
|
||||
min-width: 10px;
|
||||
min-height: 0;
|
||||
background: yellow;
|
||||
place-content: inherit;
|
||||
place-items: inherit;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width: 20px;
|
||||
min-height: 10px;
|
||||
font-size: 8em;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<y style="grid-area:4/1">A </y>
|
||||
<div class="subgrid">
|
||||
<x style="grid-row:2"> A</x><x></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="align-items: last baseline">
|
||||
<y style="grid-area:4/1">A </y>
|
||||
<div class="subgrid">
|
||||
<x></x><x style="grid-row:2"> A</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!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 with definite grid-gap in both axes</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: inline-grid;
|
||||
gap: 20px 10px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-area: 1 / 1 / 2 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-area: 1/4;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
row-gap: 100px;
|
||||
column-gap: 10px;
|
||||
grid: repeat(2,auto) / repeat(3,auto);
|
||||
}
|
||||
|
||||
.e {
|
||||
grid-area: 1/2; visibility:hidden; margin-left:15px;
|
||||
}
|
||||
.f {
|
||||
grid-area: 1/3; visibility:hidden; margin-left:10px;
|
||||
}
|
||||
.g {
|
||||
grid-area: 1/4; visibility:hidden; margin-left:15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div><div class="box e">E</div><div class="box f">F</div><div class="box g">G</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box">E</div>
|
||||
<div class="box">F</div>
|
||||
<div class="box">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!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 with definite grid-gap in both axes</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="grid-gap-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: inline-grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(4,auto);
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
row-gap: 100px;
|
||||
column-gap: 10px;
|
||||
grid: subgrid / subgrid;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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 with border-bottom</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
gap: 10px 20px;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.subgrid > * { background: lightgrey; }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: magenta; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: grey; }
|
||||
|
||||
e {
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
margin: -5px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid">
|
||||
<c>c</c>
|
||||
<d>d</d>
|
||||
<e></e>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!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 with border-bottom</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
gap: 10px 20px;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.subgrid > * { background: lightgrey; }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: magenta; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid">
|
||||
<c>c</c>
|
||||
<d>d</d>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!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 with border-bottom and percentage gap</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 0 15px 15px 0 0 40px / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / auto auto;
|
||||
gap: 3px 8px;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
background: grey;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.subgrid > * { background: lightgrey; }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: magenta; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: grey; }
|
||||
|
||||
e { display:block; width: 20px; height:15px; background:black; }
|
||||
|
||||
f {
|
||||
grid-area: 4/2/span 1/span 5;
|
||||
background: lightblue!important;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1; height:0"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<f></f>
|
||||
<div class="subgrid">
|
||||
<c><e></e></c>
|
||||
<d><e></e></d>
|
||||
<c><e></e></c>
|
||||
<d><e></e></d>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!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 with border-bottom and percentage gap</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="grid-gap-003-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto auto;
|
||||
gap: 20% 20%;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.subgrid > * { background: lightgrey; }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: magenta; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: grey; }
|
||||
|
||||
e { display:block; width: 20px; height:15px; background:black; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid">
|
||||
<c><e></e></c>
|
||||
<d><e></e></d>
|
||||
<c><e></e></c>
|
||||
<d><e></e></d>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: nested subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px auto;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; grid: 100px 1em / 100px 1em; gap:60px; grid-area:span 2/span 2">
|
||||
<div style="display:grid; grid: 60px 1em / 100px; gap:100px; grid-row:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
<span style="grid-area:2/2">c</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested subgrid</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px auto;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2">
|
||||
<div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
<span style="grid-area:2/2">c</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: nested subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;">
|
||||
<div style="display:grid; grid:100px/140px calc(40px); gap:20px; grid-column:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested subgrid</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-005-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;">
|
||||
<div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: nested subgrid, justify-content:space-around, overflowing</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
body { margin:200px; }
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:center; width:50px">
|
||||
<div style="display:grid; grid:100px/140px 50px; gap:20px; grid-column:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Test: nested subgrid, justify-content:space-around, overflowing</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-006-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
body { margin:200px; }
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:space-around; width:50px">
|
||||
<div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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: nested ortogonal writing-mode subgrids</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:60px auto/100px auto;
|
||||
gap:100px 60px;
|
||||
border:3px solid;
|
||||
background:pink;
|
||||
}
|
||||
span { background:grey; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<span style="grid-area:1/1; background:lightgrey; width:60px; height:160px"></span>
|
||||
<span style="grid-area:1/1">a</span>
|
||||
<span style="grid-row:2; background:cyan">b</span>
|
||||
<span style="grid-area:2/2" class="vrl">ccc</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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: nested ortogonal writing-mode subgrids</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-007-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px auto;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:cyan; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="vrl" style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2; background:pink">
|
||||
<div class="hl" style="display:grid; grid:subgrid/100px; gap:100px; grid-column:span 2; background:lightgrey">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
<span style="grid-area:1/2">ccc</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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: nested orthogonal writing-mode subgrids with percentage column-gap</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px 375px/300px;
|
||||
border:3px solid;
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
background:lightgrey;
|
||||
row-gap: 25px;
|
||||
}
|
||||
span {
|
||||
grid-row:2;
|
||||
background:cyan;
|
||||
width:50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<span>ccc</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!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: nested orthogonal writing-mode subgrids with percentage column-gap</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-008-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/200px auto;
|
||||
border:3px solid;
|
||||
background:grey;
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
}
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
column-gap: 10%;
|
||||
grid-area: span 2/span 2;
|
||||
justify-content:end;
|
||||
background:lightgrey;
|
||||
}
|
||||
span { background:cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid vlr">
|
||||
<span class="hl">ccc</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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: nested orthogonal writing-mode subgrids with percentage row-gap</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:400px/300px;
|
||||
border:3px solid;
|
||||
background:lightgrey;
|
||||
width:300px;
|
||||
height:400px;
|
||||
}
|
||||
span {
|
||||
margin-top:350px;
|
||||
margin-right:115px;
|
||||
background:cyan;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<span>cc</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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: nested orthogonal writing-mode subgrids with percentage row-gap</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="grid-gap-009-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/200px auto;
|
||||
border:3px solid;
|
||||
background:grey;
|
||||
width:300px;
|
||||
height:400px;
|
||||
}
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / 50px;
|
||||
row-gap: 10%;
|
||||
grid-area: span 2/span 2;
|
||||
background:lightgrey;
|
||||
}
|
||||
span { background:cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid vlr">
|
||||
<span class="hl">cc</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!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 grid-gap:20px</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.box .f { background-color: purple; }
|
||||
.box .i { background-color: blue; }
|
||||
.box .e { background-color: yellow; }
|
||||
.a { background-color: grey; }
|
||||
.c { background-color: black; }
|
||||
.b { background-color: black; }
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid: auto / 70px 130px 70px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!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 grid-gap:20px</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="grid-gap-larger-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.box .f { background-color: purple; }
|
||||
.box .i { background-color: blue; }
|
||||
.box .e { background-color: yellow; }
|
||||
.a { background-color: grey; }
|
||||
.c { background-color: black; }
|
||||
.b { background-color: black; }
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid: subgrid / subgrid;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!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 with larger gap than parent grid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:lightgrey; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<span style="height:60px">a</span><span style="margin-top:40px">b</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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 with larger gap than parent grid</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="grid-gap-larger-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:inline-grid;
|
||||
grid:100px auto/100px;
|
||||
gap:20px;
|
||||
border:3px solid;
|
||||
background:yellow;
|
||||
}
|
||||
span { background:lightgrey; }
|
||||
span:nth-child(2n+1) { background:grey; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2">
|
||||
<span>a</span><span>b</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!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 grid-gap:normal</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,minmax(100px,auto));
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 80px 150px 80px;
|
||||
grid-template-rows: 80px 80px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!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 grid-gap:normal</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="grid-gap-normal-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,minmax(100px,auto));
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-template-rows: subgrid;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!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 grid-gap:0px</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: 170px 100px 190px 100px;
|
||||
grid-template-rows: repeat(3,auto);
|
||||
gap: 0;
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.box .f { background-color: purple; }
|
||||
.box .i { background-color: blue; }
|
||||
.box .e { background-color: yellow; }
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid-template-columns: 90px 170px 90px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!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 grid-gap:0px</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="grid-gap-smaller-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: 150px 100px 150px 100px;
|
||||
grid-template-rows: repeat(3,auto);
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box .box {
|
||||
background-color: #ccc;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-column: 4 ;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-column: 1;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.box .f { background-color: purple; }
|
||||
.box .i { background-color: blue; }
|
||||
.box .e { background-color: yellow; }
|
||||
|
||||
.d {
|
||||
grid-column: 2 / 5;
|
||||
grid-row: 2 / 4;
|
||||
display: grid;
|
||||
gap: 0;
|
||||
grid: subgrid / subgrid;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="box a">A</div>
|
||||
<div class="box b">B</div>
|
||||
<div class="box c">C</div>
|
||||
<div class="box d">
|
||||
<div class="box e">E</div>
|
||||
<div class="box f">F</div>
|
||||
<div class="box g">G</div>
|
||||
<div class="box h">H</div>
|
||||
<div class="box i">I</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!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 item percentage height</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style type="text/css">
|
||||
|
||||
.wrapper {
|
||||
padding: 2px;
|
||||
padding-top: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
grid-row-gap: 60px;
|
||||
height: 300px;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
grid-row: span 2;
|
||||
grid-row-gap: 40px;
|
||||
padding: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.item {
|
||||
align-self: start;
|
||||
width: 100px;
|
||||
background: grey;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.hidden { visibility: hidden; }
|
||||
.a1 { grid-area: 1/1; }
|
||||
.a2 { grid-area: 2/1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="grid">
|
||||
<div class="item hidden a1" style="height:25px"></div><div class="item a1" style="margin-top:5px; margin-bottom:-10px; align-self:stretch"></div>
|
||||
<div class="item hidden a2" style="height:120px"></div><div class="item a2" style="margin-top:-10px; height:100px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!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 item percentage height</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="item-percentage-height-001-ref.html">
|
||||
<style type="text/css">
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto auto / auto;
|
||||
grid-row-gap: 60px;
|
||||
border: 1px solid;
|
||||
padding: 2px;
|
||||
padding-top: 5px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
grid-row: span 2;
|
||||
grid-row-gap: 40px;
|
||||
background: lightgrey;
|
||||
padding: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.item {
|
||||
align-self: start;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<div class="item"></div>
|
||||
<div class="item" style="height:100px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!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 item using line names from outer grid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px [a] 50px 50px [a];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-column: 1 / 3"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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 item using line names from outer grid</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="line-names-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px [a] 50px 50px [a];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-column: span a / a -1"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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 item using line names from outer grid</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="line-names-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / repeat(10, 10px) repeat(10, [a] 10px) [a];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-column: span a / a 8"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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: nested subgrid item using line names from outer grid</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="line-names-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px [a] 50px 50px [a];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: 50px / subgrid;
|
||||
grid-column: span 4;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<div class="subgrid" style="grid-column: span 3">
|
||||
<x style="grid-column: span a / a -1"></x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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 item using mix of outer/inner line names</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid [x] [b] [] [] [b];
|
||||
grid-auto-rows: 10px;
|
||||
grid-column: 2 / span 4;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-row:1; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:2; grid-column: 2 / 5"></x>
|
||||
<x style="grid-row:3; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:4; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:5; grid-column: 2 / 5"></x>
|
||||
<x style="grid-row:6; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:7; grid-column: 1 / 4"></x>
|
||||
<x style="grid-row:8; grid-column: 2 / 4"></x>
|
||||
<x style="grid-row:9; grid-column: 2 / 3"></x>
|
||||
<x style="grid-row:10; grid-column: 2 / 3"></x>
|
||||
<x style="grid-row:11; grid-column: 2 / 5"></x>
|
||||
<x style="grid-row:12; grid-column: 2 / 4"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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 item using mix of outer/inner line names</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="line-names-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b];
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid [x] [b] [] [] [b];
|
||||
grid-auto-rows: 10px;
|
||||
grid-column: 2 / span 4;
|
||||
}
|
||||
|
||||
x { background: grey; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<div class="subgrid">
|
||||
<x style="grid-row:1; grid-column: b / b 2"></x>
|
||||
<x style="grid-row:2; grid-column: b / b -1"></x>
|
||||
<x style="grid-row:3; grid-column: b / b -2"></x>
|
||||
<x style="grid-row:4; grid-column: b / span b"></x>
|
||||
<x style="grid-row:5; grid-column: b / span b 2"></x>
|
||||
<x style="grid-row:6; grid-column: span b / b 2"></x>
|
||||
<x style="grid-row:7; grid-column: span b 2 / b 2"></x>
|
||||
<x style="grid-row:8; grid-column: b -2 / b"></x>
|
||||
<x style="grid-row:9; grid-column: b -3 / b"></x>
|
||||
<x style="grid-row:10; grid-column: b / b"></x>
|
||||
<x style="grid-row:11; grid-column: b / b 10"></x>
|
||||
<x style="grid-row:12; grid-column: span b / b -2"></x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<!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 line name resolution</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] /
|
||||
[a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k];
|
||||
grid-template-areas: ". . . e . . . . . . .";
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
grid-auto-columns: 100px;
|
||||
grid-auto-rows: 100px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
}
|
||||
|
||||
.subgrid2 {
|
||||
display: grid;
|
||||
grid: auto / subgrid [] [] [] [b];
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
.subgrid#s1 {
|
||||
grid-template-areas: ". e e . . . .";
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:20px;
|
||||
background:silver;
|
||||
}
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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" id="s1">
|
||||
<x style="grid-column:10 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid hr">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hl" id="s2">
|
||||
<x style="grid-column: 10 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" id="s2">
|
||||
<x style="grid-column: 10 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:1 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:10 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column: 1 / -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-row:2; grid-column: 1 / -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column: span 4 / 11">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] ">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2" style="grid-row:2">
|
||||
<x style="grid-column: 10 / 11">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2">
|
||||
<x style="grid-column: 1 / 11">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
|
||||
<x style="grid-column: 1 / 6">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
|
||||
<div style='display:grid; grid-template-areas: ". . . . . . . a a a"; grid-template-columns:subgrid; grid-column:span 10;'>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
|
||||
<x style="grid-column: 2 / 6">x</x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<!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 line name resolution</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="line-names-005-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] /
|
||||
[a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k];
|
||||
grid-template-areas: ". . . e . . . . . . .";
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
width: 500px;
|
||||
grid-auto-columns: 100px;
|
||||
grid-auto-rows: 100px;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 8;
|
||||
grid-row: 2 / span 2;
|
||||
min-width:0;
|
||||
min-height:0;
|
||||
}
|
||||
|
||||
.subgrid2 {
|
||||
display: grid;
|
||||
grid: auto / subgrid [] [] [] [b];
|
||||
grid-column: span 10;
|
||||
}
|
||||
|
||||
.subgrid#s1 {
|
||||
grid-template-areas: ". e e . . . .";
|
||||
}
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:20px;
|
||||
background:silver;
|
||||
}
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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" id="s1">
|
||||
<x style="grid-column:foo / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid hr">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid hl" id="s2">
|
||||
<x style="grid-column: x 6 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" id="s2">
|
||||
<x style="grid-column: x 6 / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:1 / b">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:foo / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column: span bar / foo 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-row:2; grid-column: span bar / foo 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px;">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2">
|
||||
<x style="grid-column:span 4 / foo">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] ">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="subgrid2" style="grid-row:2">
|
||||
<x style="grid-column:foo / span 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2">
|
||||
<x style="grid-column: span a / a 8">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
|
||||
<div style='display:grid; grid-template-areas: ". . . . . . . a a a"; grid-template-columns:subgrid; grid-column:span 10;'>
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!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 line name resolution</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
div > div { background: grey; grid-column: 2 / span 2; }
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x { background: silver; }
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a];">
|
||||
<x style="grid-column: 1 / 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: 1 / 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: 3 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a];">
|
||||
<x style="grid-column: 1 / 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: 1 / 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: 3 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: 2 / 3">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!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 line name resolution</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="line-names-006-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
div > div { background: grey; grid-column: 2 / span 2; }
|
||||
|
||||
i {
|
||||
grid-row: 1;
|
||||
counter-increment: i;
|
||||
}
|
||||
i::before { content: counter(i, decimal); }
|
||||
|
||||
x { background: silver; }
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid">
|
||||
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
|
||||
<div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<!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: line name resolution for grid-aligned abs.pos. inside subgrid</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 0.2em / repeat(10,30px);
|
||||
grid-auto-rows: 2em;
|
||||
border: 1px solid;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
div > div {
|
||||
padding: 4px 0 1px 0;
|
||||
border: 3px solid black;
|
||||
background: grey;
|
||||
margin-left: 30px;
|
||||
width: 54px;
|
||||
}
|
||||
|
||||
n {
|
||||
grid-row: 1;
|
||||
counter-increment: n;
|
||||
}
|
||||
n::before { content: counter(n, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div>
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div>
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="margin-left:0">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="width:84px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="width:84px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="width:174px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="margin-left:0">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="width:84px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="width:84px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="width:174px">
|
||||
<x>x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<!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: line name resolution for grid-aligned abs.pos. inside subgrid</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="line-names-007-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid: 0.2em / repeat(10,30px);
|
||||
grid-auto-rows: 2em;
|
||||
border: 1px solid;
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
div > div {
|
||||
display: grid;
|
||||
grid-column: 2 / span 2;
|
||||
grid: auto / subgrid;
|
||||
padding: 4px 33px 1px 10px;
|
||||
border: 3px solid black;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
n {
|
||||
grid-row: 1;
|
||||
counter-increment: n;
|
||||
}
|
||||
n::before { content: counter(n, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a]; grid-column:1/span 2">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<!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: line name resolution for grid-aligned abs.pos. inside subgrid CB</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 0.2em 1.4em / repeat(10,30px);
|
||||
border: 1px solid;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
div > div {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-column: 2 / span 2;
|
||||
grid: auto / subgrid;
|
||||
padding: 4px 0 1px 10px;
|
||||
border: 1px solid black;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
n {
|
||||
grid-row: 1;
|
||||
counter-increment: n;
|
||||
}
|
||||
n::before { content: counter(n, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div>
|
||||
<x style="grid-column: -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div>
|
||||
<x style="grid-column: 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column-end:span 5">
|
||||
<x style="grid-column: 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column:2/span 5">
|
||||
<x style="grid-column: 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column-end:span 6">
|
||||
<x style="grid-column: 2 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column-end:span 3">
|
||||
<x style="grid-column: -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column:2/span 6">
|
||||
<x style="grid-column: 3 / 5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-column:2/span 6">
|
||||
<x style="grid-column: 3 / 5">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr">
|
||||
<x style="grid-column: 3 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr">
|
||||
<x style="grid-column: 2 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column-end:span 5">
|
||||
<x style="grid-column: 2 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column:2/span 5">
|
||||
<x style="grid-column: 6 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column-end:span 6">
|
||||
<x style="grid-column: 2 / 4">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column-end:span 3">
|
||||
<x style="grid-column: 4 / auto">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column:2/span 6">
|
||||
<x style="grid-column: 5 / 7">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-column:2/span 6">
|
||||
<x style="grid-column: 5 / 7">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!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: line name resolution for grid-aligned abs.pos. inside subgrid CB</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="line-names-008-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 0.2em 1.4em / repeat(10,30px);
|
||||
border: 1px solid;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
div > div {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-column: 2 / span 2;
|
||||
grid: auto / subgrid;
|
||||
padding: 4px 0 1px 10px;
|
||||
border: 1px solid black;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
n {
|
||||
grid-row: 1;
|
||||
counter-increment: n;
|
||||
}
|
||||
n::before { content: counter(n, decimal); }
|
||||
|
||||
x {
|
||||
position: absolute;
|
||||
left:0; right:0;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [][a][];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a]; grid-column:2/span 5">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a 2 / a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
|
||||
<x style="grid-column: a/span a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
|
||||
<x style="grid-column: a/a 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-areas: '. a a a a';">
|
||||
<x style="grid-column: a-end -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [][a][];">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a]; grid-column:2/span 5">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6">
|
||||
<x style="grid-column: a 2 / a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3">
|
||||
<x style="grid-column: a -1">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
|
||||
<x style="grid-column: a/span a">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
|
||||
<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
|
||||
<div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
|
||||
<x style="grid-column: a/a 2">x</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!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: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
}
|
||||
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
grid: auto / auto;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="text-indent:10px">
|
||||
A B
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vr">
|
||||
<div class="subgrid hr">A B</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:3; height:50px; background:black"></x>
|
||||
<x style="grid-row:4; height:50px; background:pink"></x>
|
||||
<x style="grid-row:5; height:40px; background:black"></x>
|
||||
<div class="subgrid vlr">
|
||||
<div class="subgrid hl">
|
||||
<x style="grid-row:2 / span 2; height: 100px">A B C D E F</x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!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: subgrids with different writing-mode than parent</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="orthogonal-writing-mode-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
}
|
||||
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
grid: auto / subgrid;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="text-indent:10px">
|
||||
A B
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vr">
|
||||
<div class="subgrid hr">A B</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr">
|
||||
<div class="subgrid hl">
|
||||
<x style="grid-row:2 / span 2; height: 100px">A B C D E F</x>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!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: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 Ahem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: auto / auto;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
background: yellow;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 11px 7px 5px;
|
||||
}
|
||||
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
grid: auto / auto;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid vrl">
|
||||
<x style="grid-column:1; height:0px"></x><x style="grid-column:2; height:16px"></x><x style="grid-column:3; height:30px"></x><x style="grid-column:4; height:52px"></x>
|
||||
<div class="subgrid hl">
|
||||
<x style="grid-column:span 12">A _B</x>
|
||||
<x style="width:100px; height:30px"></x>
|
||||
<x style="background:yellow">C D_</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:52px"></x><x style="grid-row:4; height:30px"></x>
|
||||
<div class="subgrid vlr" style="grid: auto / repeat(5, auto);">
|
||||
<x>A _B</x>
|
||||
<x style="width:100px; height:30px"></x>
|
||||
<x>C D_</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:4px"></x>
|
||||
<div class="subgrid vlr"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!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: subgrids with different writing-mode than parent</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="orthogonal-writing-mode-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 Ahem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(5, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / auto;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 2 / span 5;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: 0 solid lightblue;
|
||||
border-bottom-width: 40px;
|
||||
background: yellow;
|
||||
padding: 1px 3px 5px 7px;
|
||||
margin: 3px 11px 7px 5px;
|
||||
}
|
||||
|
||||
.vlr {
|
||||
writing-mode: vertical-lr;
|
||||
grid: auto / subgrid;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
x {
|
||||
min-width:10px;
|
||||
min-height:0px;
|
||||
}
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid vrl">
|
||||
<x style="grid-column:1"></x><x style="grid-column:2"></x><x style="grid-column:3"></x><x style="grid-column:4"></x><x style="grid-column:5"></x><x style="grid-column:6"></x>
|
||||
<div class="subgrid hl">
|
||||
<x style="grid-column:span 12">A _B</x>
|
||||
<x style="width:100px; height:30px"></x>
|
||||
<x style="background:yellow">C D_</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr">
|
||||
<x>A _B</x>
|
||||
<x style="width:100px; height:30px"></x>
|
||||
<x>C D_</x>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!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: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 Ahem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 2px repeat(4, auto) / 10px repeat(50, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: repeat(50, auto) / repeat(4, auto);
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 3;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: solid lightblue;
|
||||
border-width: 1px 5px 3px 7px;
|
||||
padding: 5px 7px 3px 1px;
|
||||
margin: 7px 3px 5px 1px;
|
||||
}
|
||||
|
||||
item { text-indent:10px; background: magenta; }
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
x:nth-child(2n+5) { background: blue; }
|
||||
x:nth-child(2n+6) { background: cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:23px"></x>
|
||||
<div class="subgrid vlr">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:3/5/4/6">AB</item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:40px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl" style="height:27px">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:40px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl" style="height:12px">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:40px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl" style="height:12px">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!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: subgrids with different writing-mode than parent</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="orthogonal-writing-mode-003-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:12px/1 Ahem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 2px repeat(4, auto) / 10px repeat(50, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 3;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: solid lightblue;
|
||||
border-width: 1px 5px 3px 7px;
|
||||
padding: 5px 7px 3px 1px;
|
||||
margin: 7px 3px 5px 1px;
|
||||
}
|
||||
|
||||
item { text-indent:10px; background: magenta; }
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
x:nth-child(2n+5) { background: blue; }
|
||||
x:nth-child(2n+6) { background: cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:3/5/4/6">AB</item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item class="hl">AB</item>
|
||||
</div>
|
||||
<item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<!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: subgrids with different writing-mode than parent</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 2px repeat(4, auto) / 10px repeat(50, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: repeat(4, auto) / repeat(50, auto);;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 3;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: solid lightblue;
|
||||
border-width: 1px 5px 3px 7px;
|
||||
padding: 5px 7px 3px 1px;
|
||||
margin: 7px 3px 5px 1px;
|
||||
}
|
||||
|
||||
item { background: magenta; }
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
x:nth-child(2n+5) { background: blue; }
|
||||
x:nth-child(2n+6) { background: cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x> <div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item><item>C</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item><item>C</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vlr" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:10px 20px">
|
||||
<item>X</item><item>ÉÉ</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:43px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px">
|
||||
<item>X</item><item class="">É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:30px 20px">
|
||||
<item>X</item><item>ÉÉ</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:8/11; grid-template-columns:30px 20px">
|
||||
<item>XXX</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<!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: subgrids with different writing-mode than parent</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="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="match" href="orthogonal-writing-mode-004-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid: 2px repeat(4, auto) / 10px repeat(50, auto);
|
||||
place-content: start;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / subgrid;
|
||||
background: lightgrey;
|
||||
grid-column: 2 / span 5;
|
||||
grid-row: 3 / span 3;
|
||||
min-width:10px;
|
||||
min-height:0;
|
||||
border: solid lightblue;
|
||||
border-width: 1px 5px 3px 7px;
|
||||
padding: 5px 7px 3px 1px;
|
||||
margin: 7px 3px 5px 1px;
|
||||
}
|
||||
|
||||
item { background: magenta; }
|
||||
|
||||
x:nth-child(2n+1) { background: silver; }
|
||||
x:nth-child(2n+2) { background: grey; }
|
||||
x:nth-child(2n+3) { background: pink; }
|
||||
x:nth-child(2n+4) { background: black; }
|
||||
x:nth-child(2n+5) { background: blue; }
|
||||
x:nth-child(2n+6) { background: cyan; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vl { writing-mode: vertical-lr; }
|
||||
.vr { writing-mode: vertical-rl; }
|
||||
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
||||
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item><item>C</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item><item>C</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vlr" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vrl" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>ÉÉ</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
|
||||
<div class="subgrid vlr" style="grid-column:2/5">
|
||||
<item>X</item><item>É</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:5/8">
|
||||
<item>X</item><item>ÉÉ</item>
|
||||
</div>
|
||||
<div class="subgrid vrl" style="grid-column:8/11">
|
||||
<item>XXX</item><item>É</item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!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 item auto block-size</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
|
||||
body { width:600px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-flow:dense;
|
||||
column-gap: 40px;
|
||||
row-gap: 0px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
grid-row: auto / span 3;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-template-columns: auto;
|
||||
display: grid;
|
||||
row-gap: 40px;
|
||||
}
|
||||
|
||||
|
||||
.card .inner, .card footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card .inner { background: grey; }
|
||||
|
||||
.card h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
background-color: rgb(3,99,143);
|
||||
border-bottom: 4px solid rgb(24,154,153);
|
||||
}
|
||||
|
||||
.card footer {
|
||||
background-color: rgb(182,222,211);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
item {
|
||||
border: 1px solid;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.hidden { visibility: hidden; }
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="card">
|
||||
<h2><span class="hidden">My title</span></h2>
|
||||
<div class="inner">
|
||||
<p>The contents.<span class="hidden"> I have a lot of content, more content than the other ones.</span></p>
|
||||
</div>
|
||||
<footer>Footer contents</footer>
|
||||
</div>
|
||||
|
||||
<div class="card hidden">
|
||||
<h2 style="grid-area:1/1"><span>My title</span></h2>
|
||||
<div class="inner" style="grid-area:2/1">
|
||||
<p>The contents. I have a lot of content, more content than the other ones.</p>
|
||||
</div>
|
||||
<footer style="grid-area:3/1">Footer contents</footer>
|
||||
|
||||
<item style="grid-area:1/1">1</item>
|
||||
<item style="grid-area:2/1">2</item>
|
||||
<item style="grid-area:3/1">3</item>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>My title</h2>
|
||||
<div class="inner">
|
||||
<p>The contents. I have a lot of content, more content than the other ones.</p>
|
||||
</div>
|
||||
<footer><span class="hidden">Footer contents</span></footer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!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 item auto block-size</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-item-block-size-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
|
||||
body { width:600px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-flow:dense;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
grid-row: auto / span 3;
|
||||
grid-template-rows: subgrid;
|
||||
grid-template-columns: auto;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
|
||||
.card .inner, .card footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card .inner { background: grey; }
|
||||
|
||||
.card h2 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
background-color: rgb(3,99,143);
|
||||
border-bottom: 4px solid rgb(24,154,153);
|
||||
}
|
||||
|
||||
.card footer {
|
||||
background-color: rgb(182,222,211);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
item {
|
||||
border: 1px solid;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="card">
|
||||
<h2></h2>
|
||||
<div class="inner">
|
||||
<p>The contents.</p>
|
||||
</div>
|
||||
<footer>Footer contents</footer>
|
||||
</div>
|
||||
|
||||
<item>1</item>
|
||||
<item>2</item>
|
||||
<item>3</item>
|
||||
|
||||
<div class="card">
|
||||
<h2>My title</h2>
|
||||
<div class="inner">
|
||||
<p>The contents. I have a lot of content, more content than the other ones.</p>
|
||||
</div>
|
||||
<footer></footer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue