<meta charset="utf-8">

<title>CSS Grid Test: subgrid item using line names from outer grid</title>

<link rel="author" title="Mats Palmgren" href="mailto:[email protected]">

<link rel="help" href="https://drafts.csswg.org/css-grid-2">

<link rel="match" href="line-names-001-ref.html">

<style>

html,body {

color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;

}

.grid {

display: grid;

grid: auto / [a] 50px 50px [a] 50px 50px [a];

padding: 20px 10px;

}

.subgrid {

display: grid;

grid: 50px / subgrid;

grid-column: span 3;

}

x { background: grey; }

</style>

<div class="grid">

<div class="subgrid">

<x style="grid-column: span a / a -1"></x>

</div>

const expectedResults = [

"subgrid [] [] [] []",

];

[...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));

}

});