mirror of
https://github.com/servo/servo.git
synced 2025-08-12 00:45:33 +01:00
Update web-platform-tests to revision 10adbd6b133f1ccf77a27ed51ffd3e7a00a499ee
This commit is contained in:
WPT Sync Bot
parent
ecef8994e0
commit
1d6ba62c8f
119 changed files with 4676 additions and 523 deletions
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list" "title"="2.3. Resolved Value of a Track Listing">
|
||||
<meta name="assert" content="Checks the resolved value of grid-template-columns or grid-template-columns on an element which is not a grid container.">
|
||||
<style>
|
||||
#target {
|
||||
display: block;
|
||||
height: 1px;
|
||||
font-size: 1px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("grid-template-columns", "subgrid [a]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b] [b] [c]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b c d] [e f] [e f] [g]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a b c] [d] [e f]");
|
||||
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c])");
|
||||
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c]) [g] [h i]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c]) [g] [h i]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c]) [g]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c]) [g h]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c])");
|
||||
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c d])");
|
||||
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c d]) [g] [h i]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c d]) [g] [h i]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c d]) [g]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c d]) [g h]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c d])");
|
||||
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d])");
|
||||
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d]) [g] [h i]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c] [d]) [g] [h i]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c] [d]) [g]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d]) [g h]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d])");
|
||||
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d e])");
|
||||
test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d e]) [g] [h i]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c] [d e]) [g] [h i]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c] [d e]) [g]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d e]) [g h]");
|
||||
test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d e])");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
grid-auto-columns: 15px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid-column: 3 / span 4;
|
||||
grid-auto-rows: 8px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.fill-0a { grid-template-columns: subgrid [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */
|
||||
.fill-0b { grid-template-columns: subgrid [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */
|
||||
.fill-0c { grid-template-columns: subgrid [x] [y] [y] [y] [z] } /* [x] [y] [y] [y] [z] */
|
||||
.fill-0d { grid-template-columns: subgrid [x] [z] [z] [z] [z] } /* [x] [z] [z] [z] [z] */
|
||||
.fill-0e { grid-template-columns: subgrid [x] [x] [x] [x] [z] } /* [x] [x] [x] [x] [z] */
|
||||
.fill-0f { grid-template-columns: subgrid [x] [x] [z] [z] [z] } /* [x] [x] [z] [z] [z] */
|
||||
.fill-0g { grid-template-columns: subgrid [x] [y] [z] [z] } /* [x] [y] [z] [z] [] */
|
||||
.fill-0h { grid-template-columns: subgrid [x] [y] [x] [y] [z] } /* [x] [y] [x] [y] [z] */
|
||||
.fill-0i { grid-template-columns: subgrid [x] [y] [x] [y] } /* [x] [y] [x] [y] [] */
|
||||
.fill-0j { grid-template-columns: subgrid [y] [y] [y] [z] [z] } /* [y] [y] [y] [z] [z] */
|
||||
.fill-0k { grid-template-columns: subgrid [x] [y] [z] [z] } /* [x] [y] [z] [z] [] */
|
||||
.fill-0l { grid-template-columns: subgrid [z] [x] [y] [z] } /* [z] [x] [y] [z] [] */
|
||||
.fill-0m { grid-template-columns: subgrid [z] [x] [y] [x] [y] } /* [z] [x] [y] [x] [y] */
|
||||
.fill-0n { grid-template-columns: subgrid [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */
|
||||
.fill-0o { grid-template-columns: subgrid [z] [x] [y] [z] } /* [z] [x] [y] [z] [] */
|
||||
.fill-0p { grid-template-columns: subgrid [z] [x] [y] [z] [x] } /* [z] [x] [y] [z] [x] */
|
||||
.fill-0q { grid-template-columns: subgrid [x] [y] [z] [x] } /* [x] [y] [z] [x] [] */
|
||||
.fill-0r { grid-template-columns: subgrid [x] [y] [z] [y] [z] } /* [x] [y] [z] [y] [z] */
|
||||
|
||||
.fill-0s {
|
||||
grid-column: 2 / span 5;
|
||||
grid-template-columns: subgrid [w] [y] [z] [y] [z] [x]; /* [w] [y] [z] [y] [z] [x] */
|
||||
}
|
||||
|
||||
.fill-0t {
|
||||
grid-column: 1 / span 6;
|
||||
grid-template-columns: subgrid [w] [y] [z] [y] [z] [x]; /* [w] [y] [z] [y] [z] [x] [] */
|
||||
}
|
||||
|
||||
.subgrid > :nth-child(2n) { background: black; }
|
||||
.subgrid > :nth-child(2n+1) { background: pink; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid"><div class="subgrid fill-0a">
|
||||
<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"><div class="subgrid fill-0b">
|
||||
<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"><div class="subgrid fill-0c">
|
||||
<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"><div class="subgrid fill-0d">
|
||||
<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"><div class="subgrid fill-0e">
|
||||
<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"><div class="subgrid fill-0f">
|
||||
<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"><div class="subgrid fill-0g">
|
||||
<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"><div class="subgrid fill-0h">
|
||||
<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"><div class="subgrid fill-0i">
|
||||
<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"><div class="subgrid fill-0j">
|
||||
<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"><div class="subgrid fill-0k">
|
||||
<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"><div class="subgrid fill-0l">
|
||||
<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"><div class="subgrid fill-0m">
|
||||
<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"><div class="subgrid fill-0n">
|
||||
<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"><div class="subgrid fill-0o">
|
||||
<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"><div class="subgrid fill-0p">
|
||||
<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"><div class="subgrid fill-0q">
|
||||
<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"><div class="subgrid fill-0r">
|
||||
<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"><div class="subgrid fill-0s">
|
||||
<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"><div class="subgrid fill-0t">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,358 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="match" href="repeat-auto-fill-008-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list">
|
||||
<head>
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
grid-auto-columns: 15px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.subgrid {
|
||||
display: grid;
|
||||
grid-column: 3 / span 4;
|
||||
grid-auto-rows: 8px;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y] [y]) [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */
|
||||
.fill-0b { grid-template-columns: subgrid [z] repeat(auto-fill, [z] [z] [z]) [z] } /* [z] [z] [z] [z] [z] */
|
||||
.fill-0c { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [y] [y]) [z] } /* [x] [y] [y] [y] [z] */
|
||||
.fill-0d { grid-template-columns: subgrid [x] repeat(auto-fill, [z] [z]) } /* [x] [z] [z] [z] [z] */
|
||||
.fill-0e { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] } /* [x] [x] [x] [x] [z] */
|
||||
.fill-0f { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] [z] [z] } /* [x] [x] [z] [z] [z] */
|
||||
.fill-0g { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */
|
||||
.fill-0h { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] } /* [x] [y] [x] [y] [z] */
|
||||
.fill-0i { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) } /* [x] [y] [x] [y] [] */
|
||||
.fill-0j { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] } /* [y] [y] [y] [z] [z] */
|
||||
.fill-0k { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */
|
||||
.fill-0l { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) [z] } /* [z] [x] [y] [z] [] */
|
||||
.fill-0m { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) } /* [z] [x] [y] [x] [y] */
|
||||
.fill-0n { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) repeat(100, [z])} /* [z] [z] [z] [z] [z] */
|
||||
.fill-0o { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) } /* [z] [x] [y] [z] [] */
|
||||
.fill-0p { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) [x] } /* [z] [x] [y] [z] [x] */
|
||||
.fill-0q { grid-template-columns: subgrid repeat(auto-fill, [x] [y] [z]) [x] } /* [x] [y] [z] [x] [] */
|
||||
.fill-0r { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [z]) } /* [x] [y] [z] [y] [z] */
|
||||
|
||||
/* With span of 5... */
|
||||
.fill-0s {
|
||||
grid-column: 2 / span 5;
|
||||
grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] */
|
||||
}
|
||||
|
||||
/* With span of 6, same as fill-0s but with room for a partial additional repetition */
|
||||
.fill-0t {
|
||||
grid-column: 1 / span 6;
|
||||
grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] [] */
|
||||
}
|
||||
|
||||
.subgrid > :nth-child(2n) { background: black; }
|
||||
.subgrid > :nth-child(2n+1) { background: pink; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid"><div class="subgrid fill-0a">
|
||||
<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"><div class="subgrid fill-0b">
|
||||
<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"><div class="subgrid fill-0c">
|
||||
<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"><div class="subgrid fill-0d">
|
||||
<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"><div class="subgrid fill-0e">
|
||||
<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"><div class="subgrid fill-0f">
|
||||
<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"><div class="subgrid fill-0g">
|
||||
<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"><div class="subgrid fill-0h">
|
||||
<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"><div class="subgrid fill-0i">
|
||||
<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"><div class="subgrid fill-0j">
|
||||
<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"><div class="subgrid fill-0k">
|
||||
<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"><div class="subgrid fill-0l">
|
||||
<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"><div class="subgrid fill-0m">
|
||||
<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"><div class="subgrid fill-0n">
|
||||
<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"><div class="subgrid fill-0o">
|
||||
<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"><div class="subgrid fill-0p">
|
||||
<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"><div class="subgrid fill-0q">
|
||||
<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"><div class="subgrid fill-0r">
|
||||
<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"><div class="subgrid fill-0s">
|
||||
<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"><div class="subgrid fill-0t">
|
||||
<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 = [
|
||||
"subgrid [z] [z] [z] [z] [z]",
|
||||
"subgrid [z] [z] [z] [z] [z]",
|
||||
"subgrid [x] [y] [y] [y] [z]",
|
||||
"subgrid [x] [z] [z] [z] [z]",
|
||||
"subgrid [x] [x] [x] [x] [z]",
|
||||
"subgrid [x] [x] [z] [z] [z]",
|
||||
"subgrid [x] [y] [z] [z] []",
|
||||
"subgrid [x] [y] [x] [y] [z]",
|
||||
"subgrid [x] [y] [x] [y] []",
|
||||
"subgrid [y] [y] [y] [z] [z]",
|
||||
"subgrid [x] [y] [z] [z] []",
|
||||
"subgrid [z] [x] [y] [z] []",
|
||||
"subgrid [z] [x] [y] [x] [y]",
|
||||
"subgrid [z] [z] [z] [z] [z]",
|
||||
"subgrid [z] [x] [y] [z] []",
|
||||
"subgrid [z] [x] [y] [z] [x]",
|
||||
"subgrid [x] [y] [z] [x] []",
|
||||
"subgrid [x] [y] [z] [y] [z]",
|
||||
"subgrid [w] [y] [z] [y] [z] [x]",
|
||||
"subgrid [w] [y] [z] [y] [z] [x] []",
|
||||
];
|
||||
[...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
|
||||
let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
|
||||
let expected = expectedResults[i];
|
||||
if (actual != expected) {
|
||||
let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
|
||||
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
|
||||
document.body.appendChild(document.createTextNode(err));
|
||||
document.body.appendChild(document.createElement("br"));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue