Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-003.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Support for 'grid-auto-columns' and
'grid-auto-rows' properties with implicit tracks after and before the
explicit grid</title>
<link rel="match" href="../reference/grid-support-grid-auto-columns-rows-003-ref.html">
<style>
#wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
/* Implicit and explicit grid track sizes */
.grid {
display: grid;
grid-auto-rows: 2px 3px;
grid-auto-columns: 2px 3px;
}
#one .grid { grid-template: 5px / 5px; }
#two .grid { grid-template: 5px 5px / 5px 5px; }
#three .grid { grid-template: 5px 5px 5px / 5px 5px 5px; }
/* Grid item positions. */
.item-left1 { grid-area: auto / auto / 1 / 1; }
.item-explicit { grid-area: 1 / 1 / -1 / -1; }
.item-right1 { grid-area: -1 / -1; }
#zero .item-left3 { grid-area: auto / auto / -3 / -3; }
#zero .item-left2 { grid-area: auto / auto / -2 / -2; }
#zero .item-right2 { grid-area: 2 / 2; }
#zero .item-right3 { grid-area: 3 / 3; }
#one .item-left3 { grid-area: auto / auto / -4 / -4; }
#one .item-left2 { grid-area: auto / auto / -3 / -3; }
#one .item-right2 { grid-area: 3 / 3; }
#one .item-right3 { grid-area: 4 / 4; }
#two .item-left3 { grid-area: auto / auto / -5 / -5; }
#two .item-left2 { grid-area: auto / auto / -4 / -4; }
#two .item-right2 { grid-area: 4 / 4; }
#two .item-right3 { grid-area: 5 / 5; }
#three .item-left3 { grid-area: auto / auto / -6 / -6; }
#three .item-left2 { grid-area: auto / auto / -5 / -5; }
#three .item-right2 { grid-area: 5 / 5; }
#three .item-right3 { grid-area: 6 / 6; }
/* Colors */
.item-left3 { background: #ff0; }
.item-left2 { background: #ff0; }
.item-left1 { background: #ff0; }
.item-explicit { background: #f0f; }
.item-right1 { background: #0ff; }
.item-right2 { background: #0ff; }
.item-right3 { background: #0ff; }
</style>
<script>
function createDivWithClass(className, parent) {
let element = document.createElement('div');
element.className = className || '';
if (!parent) {
parent = document.body;
}
parent.appendChild(element);
return element;
}
function generate(parentId) {
let parent = document.getElementById(parentId);
for (let leftNum = 0; leftNum <= 3; ++leftNum) {
for (let rightNum = 0; rightNum <= 3; ++rightNum) {
let grid = leftNum + rightNum > 0
? createDivWithClass("grid", parent)
: null;
for (let i = 1; i <= leftNum; ++i) {
createDivWithClass("item-left" + i, grid);
}
if (leftNum + rightNum > 0) {
createDivWithClass("item-explicit", grid);
}
for (let i = 1; i <= rightNum; ++i) {
createDivWithClass("item-right" + i, grid);
}
}
}
}
function run() {
// This is equal to something like this:
// <div class="grid">
// <div class="item-left3"></div>
// <div class="item-left2"></div>
// <div class="item-left1"></div>
// <div class="item-explicit"></div>
// <div class="item-right1"></div>
// <div class="item-right2"></div>
// <div class="item-right3"></div>
// </div>
// Generate the grid examples with 0~3 left items and 0~3 right items.
// The item-explicit is placed inside the 0x0 ~ 3x3 explicit tracks.
generate("zero");
generate("one");
generate("two");
generate("three");
document.documentElement.offsetHeight;
document.documentElement.classList.remove('reftest-wait');
}
</script>
</head>
<body onload="run()">
<div id="wrapper">
<!-- Zero explicit track -->
<div id="zero"></div>
<!-- One explicit track -->
<div id="one"></div>
<!-- Two explicit tracks -->
<div id="two"></div>
<!-- Three explicit tracks -->
<div id="three"></div>
</div>
</body>
</html>