line-names-004.html (2163B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: subgrid item using mix of outer/inner line names</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-2"> 11 <link rel="match" href="line-names-004-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; 15 } 16 17 .grid { 18 display: grid; 19 grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b]; 20 padding: 20px 10px; 21 } 22 23 .subgrid { 24 display: grid; 25 grid-template-columns: subgrid [x] [b] [] [] [b]; 26 grid-auto-rows: 10px; 27 grid-column: 2 / span 4; 28 } 29 30 x { background: grey; } 31 32 </style> 33 </head> 34 <body> 35 36 <div class="grid"> 37 <div class="subgrid"> 38 <x style="grid-row:1; grid-column: b / b 2"></x> 39 <x style="grid-row:2; grid-column: b / b -1"></x> 40 <x style="grid-row:3; grid-column: b / b -2"></x> 41 <x style="grid-row:4; grid-column: b / span b"></x> 42 <x style="grid-row:5; grid-column: b / span b 2"></x> 43 <x style="grid-row:6; grid-column: span b / b 2"></x> 44 <x style="grid-row:7; grid-column: span b 2 / b 2"></x> 45 <x style="grid-row:8; grid-column: b -2 / b"></x> 46 <x style="grid-row:9; grid-column: b -3 / b"></x> 47 <x style="grid-row:10; grid-column: b / b"></x> 48 <x style="grid-row:11; grid-column: b / b 10"></x> 49 <x style="grid-row:12; grid-column: span b / b -2"></x> 50 </div> 51 </div> 52 53 <script> 54 const expectedResults = [ 55 "subgrid [x] [b] [] [] [b]", 56 ]; 57 [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) { 58 let actual = window.getComputedStyle(subgrid)['grid-template-columns']; 59 let expected = expectedResults[i]; 60 if (actual != expected) { 61 let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + 62 " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; 63 document.body.appendChild(document.createTextNode(err)); 64 } 65 }); 66 </script> 67 68 </body> 69 </html>