line-names-005.html (5596B)
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 line name resolution</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-005-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; 15 } 16 17 .grid { 18 display: grid; 19 grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] / 20 [a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k]; 21 grid-template-areas: ". . . e . . . . . . ."; 22 place-content: start; 23 border: 1px solid; 24 width: 500px; 25 grid-auto-columns: 100px; 26 grid-auto-rows: 100px; 27 } 28 29 .subgrid { 30 display: grid; 31 grid: auto / subgrid; 32 background: lightgrey; 33 grid-column: 2 / span 8; 34 grid-row: 2 / span 2; 35 min-width:0; 36 min-height:0; 37 } 38 39 .subgrid2 { 40 display: grid; 41 grid: auto / subgrid [] [] [] [b]; 42 grid-column: span 10; 43 } 44 45 .subgrid#s1 { 46 grid-template-areas: ". e e . . . ."; 47 } 48 49 i { 50 grid-row: 1; 51 counter-increment: i; 52 } 53 i::before { content: counter(i, decimal); } 54 55 x { 56 min-width:10px; 57 min-height:20px; 58 background:silver; 59 } 60 61 .hl { writing-mode: horizontal-tb; direction:ltr; } 62 .hr { writing-mode: horizontal-tb; direction:rtl; } 63 64 </style> 65 </head> 66 <body> 67 68 <div class="grid"> 69 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 70 <div class="subgrid" id="s1"> 71 <x style="grid-column:foo / span 4">x</x> 72 </div> 73 </div> 74 75 <div class="grid hr"> 76 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 77 <div class="subgrid hl" id="s2"> 78 <x style="grid-column: x 6 / span 4">x</x> 79 </div> 80 </div> 81 82 <div class="grid"> 83 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 84 <div class="subgrid hr" id="s2"> 85 <x style="grid-column: x 6 / span 4">x</x> 86 </div> 87 </div> 88 89 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 90 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 91 <div class="subgrid2"> 92 <x style="grid-column:1 / b">x</x> 93 </div> 94 </div> 95 96 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 97 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 98 <div class="subgrid2"> 99 <x style="grid-column:foo / span 4">x</x> 100 </div> 101 </div> 102 103 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 104 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 105 <div class="subgrid2"> 106 <x style="grid-column: span bar / foo 3">x</x> 107 </div> 108 </div> 109 110 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 111 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 112 <div class="subgrid2"> 113 <x style="grid-row:2; grid-column: span bar / foo 3">x</x> 114 </div> 115 </div> 116 117 <div style="display:grid; width:500px; grid-auto-columns: 50px;"> 118 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 119 <div class="subgrid2"> 120 <x style="grid-column:span 4 / foo">x</x> 121 </div> 122 </div> 123 124 <div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] "> 125 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 126 <div class="subgrid2" style="grid-row:2"> 127 <x style="grid-column:foo / span 4">x</x> 128 </div> 129 </div> 130 131 <div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]"> 132 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 133 <div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2"> 134 <x style="grid-column: span a / a 8">x</x> 135 </div> 136 </div> 137 138 <div style='display:grid; grid-template-areas: "a a a a a a a a a a"'> 139 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 140 <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2"> 141 <x style="grid-column: a">x</x> 142 </div> 143 </div> 144 145 <div style='display:grid; grid-template-areas: ". . . . . . a a a a"'> 146 <div style='display:grid; grid-template-areas: ". . . . . . . a a ."; grid-template-columns:subgrid; grid-column:span 10;'> 147 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 148 <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2"> 149 <x style="grid-column: a">x</x> 150 </div> 151 </div> 152 </div> 153 154 <script> 155 const expectedResults = [ 156 "subgrid [] [] [] [] [] [] [] [] []", 157 "subgrid [] [] [] [] [] [] [] [] []", 158 "subgrid [] [] [] [] [] [] [] [] []", 159 "subgrid [] [] [] [b] [] [] [] [] [] [] []", 160 "subgrid [] [] [] [b] [] [] [] [] [] [] []", 161 "subgrid [] [] [] [b] [] [] [] [] [] [] []", 162 "subgrid [] [] [] [b] [] [] [] [] [] [] []", 163 "subgrid [] [] [] [b] [] [] [] [] [] [] []", 164 "subgrid [] [] [] [b] [] [] [] [] [] [] []", 165 "subgrid [] [] [] [] [] [] [] [] [] [] []", 166 "subgrid [] [] [] [] [] []", 167 "subgrid [] [] [] [] [] [] [] [] [] [] []", 168 "subgrid [] [] [] [] [] []", 169 ]; 170 [...document.querySelectorAll('div > div')].forEach(function(subgrid, i) { 171 let actual = window.getComputedStyle(subgrid)['grid-template-columns']; 172 let expected = expectedResults[i]; 173 if (actual != expected) { 174 let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + 175 " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; 176 document.body.appendChild(document.createTextNode(err)); 177 } 178 }); 179 </script> 180 181 </body> 182 </html>