mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision ae1e2d51f38e208f3d07a97b5d82f9ca0dda2c94
This commit is contained in:
WPT Sync Bot
parent
6c506ba260
commit
96553cb7e2
109 changed files with 3903 additions and 298 deletions
|
|
@ -56,6 +56,7 @@ a {
|
|||
<div class="grid"><div class="subgrid t1"></div></div>
|
||||
<div class="grid"><div class="subgrid t1"><x></x></div></div>
|
||||
<div class="grid"><div class="subgrid t1"><x></x><x></x></div></div>
|
||||
<div class="grid"><div class="subgrid t1"></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"><x></x></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"><x></x></div></div>
|
||||
|
|
@ -68,6 +69,7 @@ a {
|
|||
|
||||
<div class="grid"><div class="subgrid t2"></div></div>
|
||||
<div class="grid"><div class="subgrid t2"><x></x></div></div>
|
||||
<div class="grid"><div class="subgrid t2"></div></div>
|
||||
<div class="grid"><div class="subgrid t2"><x></x><x></x></div></div>
|
||||
<div class="grid a"><div class="subgrid t2"></div></div>
|
||||
<div class="grid a"><div class="subgrid t2"><x></x></div></div>
|
||||
|
|
@ -81,6 +83,7 @@ a {
|
|||
|
||||
<div class="grid"><div class="subgrid t3"></div></div>
|
||||
<div class="grid"><div class="subgrid t3"><x></x></div></div>
|
||||
<div class="grid"><div class="subgrid t3"></div></div>
|
||||
<div class="grid"><div class="subgrid t3"><x></x><x></x></div></div>
|
||||
<div class="grid a"><div class="subgrid t3"></div></div>
|
||||
<div class="grid a"><div class="subgrid t3"><x></x></div></div>
|
||||
|
|
@ -96,6 +99,7 @@ a {
|
|||
|
||||
<div class="grid"><div class="subgrid t1"><a></a></div></div>
|
||||
<div class="grid"><div class="subgrid t1"><a></a><a></a></div></div>
|
||||
<div class="grid"><div class="subgrid t1"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"><a></a><a></a></div></div>
|
||||
<div class="grid c"><div class="subgrid t1"><a></a></div></div>
|
||||
|
|
@ -105,6 +109,7 @@ a {
|
|||
|
||||
<div class="grid"><div class="subgrid t2"><a></a></div></div>
|
||||
<div class="grid"><div class="subgrid t2"><a></a><a></a></div></div>
|
||||
<div class="grid"><div class="subgrid t2"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t2"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t2"><a></a><a></a></div></div>
|
||||
<div class="grid c"><div class="subgrid t2"><a></a></div></div>
|
||||
|
|
@ -112,6 +117,7 @@ a {
|
|||
<div class="grid r"><div class="subgrid t2"><a></a></div></div>
|
||||
<div class="grid r"><div class="subgrid t2"><a></a><a></a></div></div>
|
||||
|
||||
<div class="grid"><div class="subgrid t3"><a></a></div></div>
|
||||
<div class="grid"><div class="subgrid t3"><a></a></div></div>
|
||||
<div class="grid"><div class="subgrid t3"><a></a><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t3"><a></a></div></div>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,12 @@ a {
|
|||
background: purple;
|
||||
}
|
||||
|
||||
.o { overflow: hidden; }
|
||||
.abs {
|
||||
grid-auto-rows: 3em;
|
||||
grid-auto-columns: 3em;
|
||||
}
|
||||
.abs x { width:auto; height:auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -52,6 +58,7 @@ a {
|
|||
<div class="grid"><div class="subgrid t1"></div></div>
|
||||
<div class="grid"><div class="subgrid t1"><x></x></div></div>
|
||||
<div class="grid"><div class="subgrid t1"><x></x><x></x></div></div>
|
||||
<div class="grid abs"><div class="subgrid t1 o"><x></x></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"><x></x></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"><x></x><x></x></div></div>
|
||||
|
|
@ -64,6 +71,7 @@ a {
|
|||
|
||||
<div class="grid"><div class="subgrid t2"></div></div>
|
||||
<div class="grid"><div class="subgrid t2"><x></x></div></div>
|
||||
<div class="grid abs"><div class="subgrid t2 o"><x></x></div></div>
|
||||
<div class="grid"><div class="subgrid t2"><x></x><x></x></div></div>
|
||||
<div class="grid a"><div class="subgrid t2"></div></div>
|
||||
<div class="grid a"><div class="subgrid t2"><x></x></div></div>
|
||||
|
|
@ -77,6 +85,7 @@ a {
|
|||
|
||||
<div class="grid"><div class="subgrid t3"></div></div>
|
||||
<div class="grid"><div class="subgrid t3"><x></x></div></div>
|
||||
<div class="grid abs"><div class="subgrid t3 o"><x></x></div></div>
|
||||
<div class="grid"><div class="subgrid t3"><x></x><x></x></div></div>
|
||||
<div class="grid a"><div class="subgrid t3"></div></div>
|
||||
<div class="grid a"><div class="subgrid t3"><x></x></div></div>
|
||||
|
|
@ -92,6 +101,7 @@ a {
|
|||
|
||||
<div class="grid"><div class="subgrid t1"><a></a></div></div>
|
||||
<div class="grid"><div class="subgrid t1"><a></a><a></a></div></div>
|
||||
<div class="grid abs"><div class="subgrid t1 o"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t1"><a></a><a></a></div></div>
|
||||
<div class="grid c"><div class="subgrid t1"><a></a></div></div>
|
||||
|
|
@ -101,6 +111,7 @@ a {
|
|||
|
||||
<div class="grid"><div class="subgrid t2"><a></a></div></div>
|
||||
<div class="grid"><div class="subgrid t2"><a></a><a></a></div></div>
|
||||
<div class="grid abs"><div class="subgrid t2 o"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t2"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t2"><a></a><a></a></div></div>
|
||||
<div class="grid c"><div class="subgrid t2"><a></a></div></div>
|
||||
|
|
@ -110,6 +121,7 @@ a {
|
|||
|
||||
<div class="grid"><div class="subgrid t3"><a></a></div></div>
|
||||
<div class="grid"><div class="subgrid t3"><a></a><a></a></div></div>
|
||||
<div class="grid abs"><div class="subgrid t3 o"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t3"><a></a></div></div>
|
||||
<div class="grid a"><div class="subgrid t3"><a></a><a></a></div></div>
|
||||
<div class="grid c"><div class="subgrid t3"><a></a></div></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,436 @@
|
|||
<!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 inside a parent with repeat(auto-fit) columns</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
width: 50px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: 3 / span 4;
|
||||
grid-auto-rows: 8px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.fit-0a { grid-template-columns: [y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]; }
|
||||
.fit-0b { grid-template-columns: [x y] 0px [z] 1px [z] 1px [z] 1px [z]; }
|
||||
.fit-0c { grid-template-columns: [x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
|
||||
.fit-0d { grid-template-columns: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
|
||||
.fit-0e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]; }
|
||||
.fit-0f { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px; }
|
||||
.fit-0g { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]; }
|
||||
.fit-0h { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]; }
|
||||
.fit-0i { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]; }
|
||||
.fit-0j { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px; }
|
||||
.fit-0k { grid-template-columns: [y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
|
||||
.fit-0l { grid-template-columns: [x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
|
||||
.fit-0m { grid-template-columns: [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px; }
|
||||
|
||||
.fit-1a { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]; }
|
||||
.fit-1b { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
|
||||
.fit-1c { grid-template-columns: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
|
||||
.fit-1d { grid-template-columns: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]; }
|
||||
.fit-1e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px; }
|
||||
|
||||
.fit-2a { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
|
||||
.fit-2b { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
|
||||
.fit-2c { grid-template-columns: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]; }
|
||||
.fit-2d { grid-template-columns: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px; }
|
||||
|
||||
.fit-3a { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
|
||||
.fit-3b { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
|
||||
.fit-3c { grid-template-columns: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px; }
|
||||
|
||||
.fit-4a { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
|
||||
.fit-4b { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
|
||||
|
||||
.fit-5 { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
|
||||
|
||||
.subgrid > :nth-child(2n) { background: black; }
|
||||
.subgrid > :nth-child(2n+1) { background: pink; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid fit-0a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0c"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0d"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0e"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0f"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0g"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0h"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0i"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0j"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0k"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0l"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0m"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1c"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1d"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1e"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2c"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2d"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3c"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-4a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-4b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-5"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,479 @@
|
|||
<!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 inside a parent with repeat(auto-fit) columns</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="parent-repeat-auto-fit-001-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
width: 50px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
grid-column: 3 / span 4;
|
||||
grid-auto-rows: 8px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.fit-0a { grid-template-columns: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] }
|
||||
.fit-0b { grid-template-columns: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] }
|
||||
.fit-0c { grid-template-columns: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
|
||||
.fit-0d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-0e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-0f { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
.fit-0g { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-0h { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-0i { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-0j { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
.fit-0k { grid-template-columns: repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) }
|
||||
.fit-0l { grid-template-columns: [x] repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) }
|
||||
.fit-0m { grid-template-columns: repeat(100, [x] 10px) repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-1a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] 1px [z] }
|
||||
.fit-1b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
|
||||
.fit-1c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-1d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-1e { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-2a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
|
||||
.fit-2b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-2c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-2d { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-3a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-3b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-3c { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-4a { grid-template-columns: repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-4b { grid-template-columns: [x] repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-5 { grid-template-columns: repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.subgrid > :nth-child(2n) { background: black; }
|
||||
.subgrid > :nth-child(2n+1) { background: pink; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid fit-0a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0c"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0d"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0e"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0f"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0g"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0h"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0i"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0j"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0k"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0l"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0m"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1c"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1d"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1e"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2c"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2d"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3c"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-4a"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-4b"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-5"><div class="subgrid">
|
||||
<div style="grid-column:y 5"></div>
|
||||
<div style="grid-column:y 4"></div>
|
||||
<div style="grid-column:y 3"></div>
|
||||
<div style="grid-column:y 2"></div>
|
||||
<div style="grid-column:y 1"></div>
|
||||
<div style="grid-column:y -1"></div>
|
||||
<div style="grid-column:y -2"></div>
|
||||
<div style="grid-column:y -3"></div>
|
||||
<div style="grid-column:y -4"></div>
|
||||
<div style="grid-column:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<script>
|
||||
const expectedResults = [
|
||||
"[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]",
|
||||
"[x y] 0px [z] 1px [z] 1px [z] 1px [z]",
|
||||
"[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px",
|
||||
"[y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px",
|
||||
"[x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px",
|
||||
"[x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]",
|
||||
"[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
|
||||
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
|
||||
"[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]",
|
||||
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]",
|
||||
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]",
|
||||
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]",
|
||||
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]",
|
||||
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px",
|
||||
];
|
||||
[...document.querySelectorAll('.grid')].forEach(function(grid, i) {
|
||||
let actual = window.getComputedStyle(grid)['grid-template-columns'];
|
||||
let expected = expectedResults[i];
|
||||
if (actual != expected) {
|
||||
let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
|
||||
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
|
||||
document.body.appendChild(document.createTextNode(err));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,440 @@
|
|||
<!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 inside a parent with repeat(auto-fit) rows</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
grid-template-columns: repeat(auto-fit, 10px);
|
||||
border: 1px solid;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / subgrid;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3 / span 4;
|
||||
grid-auto-columns: 8px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.fit-0a { grid-template-rows: [y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]; }
|
||||
.fit-0b { grid-template-rows: [x y] 0px [z] 1px [z] 1px [z] 1px [z]; }
|
||||
.fit-0c { grid-template-rows: [x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
|
||||
.fit-0d { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
|
||||
.fit-0e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]; }
|
||||
.fit-0f { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px; }
|
||||
.fit-0g { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]; }
|
||||
.fit-0h { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]; }
|
||||
.fit-0i { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]; }
|
||||
.fit-0j { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px; }
|
||||
.fit-0k { grid-template-rows: [y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
|
||||
.fit-0l { grid-template-rows: [x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
|
||||
.fit-0m { grid-template-rows: [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px; }
|
||||
|
||||
.fit-1a { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]; }
|
||||
.fit-1b { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
|
||||
.fit-1c { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
|
||||
.fit-1d { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]; }
|
||||
.fit-1e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px; }
|
||||
|
||||
.fit-2a { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
|
||||
.fit-2b { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
|
||||
.fit-2c { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]; }
|
||||
.fit-2d { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px; }
|
||||
|
||||
.fit-3a { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
|
||||
.fit-3b { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
|
||||
.fit-3c { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px; }
|
||||
|
||||
.fit-4a { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
|
||||
.fit-4b { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
|
||||
|
||||
.fit-5 { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
|
||||
|
||||
.subgrid > :nth-child(2n) { background: black; }
|
||||
.subgrid > :nth-child(2n+1) { background: pink; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid fit-0a"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0b"><div class="subgrid" style="grid-column-start:2">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0c"><div class="subgrid" style="grid-column-start:3">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0d"><div class="subgrid" style="grid-column-start:4">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0e"><div class="subgrid" style="grid-column-start:5">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0f"><div class="subgrid" style="grid-column-start:6">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0g"><div class="subgrid" style="grid-column-end:-2">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0h"><div class="subgrid" style="grid-column-end:-3">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0i"><div class="subgrid" style="grid-column-end:-4">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0j"><div class="subgrid" style="grid-column-end:-5">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0k"><div class="subgrid" style="grid-column-end:-6">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0l"><div class="subgrid" style="grid-column:2/-2">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0m"><div class="subgrid" style="grid-column:3/-3">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1a"><div class="subgrid" style="grid-column:2/-3">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1b"><div class="subgrid" style="grid-column:3/-2">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1c"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1d"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1e"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2a"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2b"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2c"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2d"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3a"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3b"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3c"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-4a"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-4b"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-5"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,483 @@
|
|||
<!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 inside a parent with repeat(auto-fit) rows</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="parent-repeat-auto-fit-002-ref.html">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
grid-template-columns: repeat(auto-fit, 10px);
|
||||
border: 1px solid;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid: subgrid / subgrid;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3 / span 4;
|
||||
grid-auto-columns: 8px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.fit-0a { grid-template-rows: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] }
|
||||
.fit-0b { grid-template-rows: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] }
|
||||
.fit-0c { grid-template-rows: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
|
||||
.fit-0d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-0e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-0f { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
.fit-0g { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-0h { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-0i { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-0j { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
.fit-0k { grid-template-rows: repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) }
|
||||
.fit-0l { grid-template-rows: [x] repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) }
|
||||
.fit-0m { grid-template-rows: repeat(100, [x] 10px) repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-1a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] 1px [z] }
|
||||
.fit-1b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
|
||||
.fit-1c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-1d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-1e { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-2a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
|
||||
.fit-2b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-2c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-2d { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-3a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] }
|
||||
.fit-3b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-3c { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-4a { grid-template-rows: repeat(auto-fit, [y] 10px) [z] }
|
||||
.fit-4b { grid-template-rows: [x] repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.fit-5 { grid-template-rows: repeat(auto-fit, [y] 10px) }
|
||||
|
||||
.subgrid > :nth-child(2n) { background: black; }
|
||||
.subgrid > :nth-child(2n+1) { background: pink; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid fit-0a"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0b"><div class="subgrid" style="grid-column-start:2">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0c"><div class="subgrid" style="grid-column-start:3">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0d"><div class="subgrid" style="grid-column-start:4">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0e"><div class="subgrid" style="grid-column-start:5">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0f"><div class="subgrid" style="grid-column-start:6">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0g"><div class="subgrid" style="grid-column-end:-2">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0h"><div class="subgrid" style="grid-column-end:-3">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0i"><div class="subgrid" style="grid-column-end:-4">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0j"><div class="subgrid" style="grid-column-end:-5">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0k"><div class="subgrid" style="grid-column-end:-6">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0l"><div class="subgrid" style="grid-column:2/-2">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-0m"><div class="subgrid" style="grid-column:3/-3">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1a"><div class="subgrid" style="grid-column:2/-3">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1b"><div class="subgrid" style="grid-column:3/-2">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1c"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1d"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-1e"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2a"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2b"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2c"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-2d"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3a"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3b"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-3c"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-4a"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-4b"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="grid fit-5"><div class="subgrid">
|
||||
<div style="grid-row:y 5"></div>
|
||||
<div style="grid-row:y 4"></div>
|
||||
<div style="grid-row:y 3"></div>
|
||||
<div style="grid-row:y 2"></div>
|
||||
<div style="grid-row:y 1"></div>
|
||||
<div style="grid-row:y -1"></div>
|
||||
<div style="grid-row:y -2"></div>
|
||||
<div style="grid-row:y -3"></div>
|
||||
<div style="grid-row:y -4"></div>
|
||||
<div style="grid-row:y -5"></div>
|
||||
</div></div>
|
||||
|
||||
<script>
|
||||
const expectedResults = [
|
||||
"[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]",
|
||||
"[x y] 0px [z] 1px [z] 1px [z] 1px [z]",
|
||||
"[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px",
|
||||
"[y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px",
|
||||
"[x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px",
|
||||
"[x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]",
|
||||
"[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
|
||||
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
|
||||
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]",
|
||||
"[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
|
||||
"[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]",
|
||||
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]",
|
||||
"[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]",
|
||||
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]",
|
||||
"[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]",
|
||||
"[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px",
|
||||
"[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px",
|
||||
];
|
||||
[...document.querySelectorAll('.grid')].forEach(function(grid, i) {
|
||||
let actual = window.getComputedStyle(grid)['grid-template-rows'];
|
||||
let expected = expectedResults[i];
|
||||
if (actual != expected) {
|
||||
let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
|
||||
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
|
||||
document.body.appendChild(document.createTextNode(err));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue