<!DOCTYPE HTML> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html><head> <meta charset="utf-8"> <title>CSS Grid Test: subgrid item using line names from outer grid</title> <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> <link rel="help" href="https://drafts.csswg.org/css-grid-2"> <link rel="match" href="line-names-001-ref.html"> <style> html,body { color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; } .grid { display: grid; grid: auto / [a] 50px 50px [a] 50px 50px [a]; padding: 20px 10px; } .subgrid { display: grid; grid: 50px / subgrid; grid-column: span 3; } x { background: grey; } </style> </head> <body> <div class="grid"> <div class="subgrid"> <x style="grid-column: span a / a -1"></x> </div> </div> <script> 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)); } }); </script> </body> </html>