repeat-auto-fill-006.html (5265B)
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: repeat(auto-fill / INTEGER, 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/#subgrid-listing"> 11 <link rel="match" href="repeat-auto-fill-005-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 15 } 16 17 .grid { 18 display: inline-grid; 19 grid-auto-columns: 20px; 20 background: lightgrey; 21 } 22 23 .subgrid { 24 display: grid; 25 grid-column: 2 / span 4; 26 background: black; 27 writing-mode: vertical-lr; 28 } 29 30 item { 31 min-width: 0; 32 min-height: 10px; 33 grid-row:x -2 / x -1; 34 background: grey; 35 writing-mode: horizontal-tb; 36 } 37 38 </style> 39 </head> 40 <body> 41 42 <div class="grid"> 43 <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[]) [] [x]"> 44 <item></item> 45 </div> 46 </div> 47 48 <div class="grid"> 49 <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]"> 50 <item></item> 51 </div> 52 </div> 53 54 <div class="grid"> 55 <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]"> 56 <item></item> 57 </div> 58 </div> 59 60 <div class="grid"> 61 <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]"> 62 <item></item> 63 </div> 64 </div> 65 66 <div class="grid"> 67 <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []"> 68 <item></item> 69 </div> 70 </div> 71 72 <div class="grid"> 73 <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []"> 74 <item></item> 75 </div> 76 </div> 77 78 <div class="grid"> 79 <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]"> 80 <item></item> 81 </div> 82 </div> 83 84 <div class="grid"> 85 <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [x]"> 86 <item></item> 87 </div> 88 </div> 89 90 <div class="grid"> 91 <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [x]"> 92 <item></item> 93 </div> 94 </div> 95 96 <div class="grid"> 97 <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [x]"> 98 <item></item> 99 </div> 100 </div> 101 102 <div class="grid"> 103 <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [] [x]"> 104 <item></item> 105 </div> 106 </div> 107 108 <div class="grid"> 109 <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]"> 110 <item></item> 111 </div> 112 </div> 113 114 <div class="grid"> 115 <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]"> 116 <item></item> 117 </div> 118 </div> 119 120 <div class="grid"> 121 <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []"> 122 <item></item> 123 </div> 124 </div> 125 126 <div class="grid"> 127 <div class="subgrid" style="grid-template-rows:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]"> 128 <item></item> 129 </div> 130 </div> 131 132 <div class="grid"> 133 <div class="subgrid" style="grid-template-rows:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]"> 134 <item></item> 135 </div> 136 </div> 137 138 <div class="grid"> 139 <div class="subgrid" style="grid-template-rows:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]"> 140 <item></item> 141 </div> 142 </div> 143 144 <div class="grid"> 145 <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[]) [] [] [] [x]"> 146 <item></item> 147 </div> 148 </div> 149 150 <div class="grid"> 151 <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]"> 152 <item></item> 153 </div> 154 </div> 155 156 <div class="grid"> 157 <div class="subgrid" style="grid-template-rows:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]"> 158 <item></item> 159 </div> 160 </div> 161 162 <div class="grid"> 163 <div class="subgrid" style="grid-template-rows:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]"> 164 <item></item> 165 </div> 166 </div> 167 168 <script> 169 const expectedResults = [ 170 "subgrid [] [] [] [] [x]", 171 "subgrid [] [] [] [] [x]", 172 "subgrid [] [] [] [] []", 173 "subgrid [x] [x] [] [] [x]", 174 "subgrid [x] [x] [] [x] []", 175 "subgrid [x] [x] [x] [x] []", 176 "subgrid [] [] [] [] []", 177 "subgrid [] [] [] [x] []", 178 "subgrid [] [] [] [] [x]", 179 "subgrid [] [] [] [] []", 180 "subgrid [] [] [] [] []", 181 "subgrid [] [] [] [] [x]", 182 "subgrid [x] [x] [] [] [x]", 183 "subgrid [x] [x] [x] [] []", 184 "subgrid [] [] [] [] [x]", 185 "subgrid [] [] [] [] [x]", 186 "subgrid [] [] [] [] [x]", 187 "subgrid [] [] [] [] [x]", 188 "subgrid [] [] [] [] [x]", 189 "subgrid [] [] [] [] [x]", 190 "subgrid [] [] [] [] []", 191 ]; 192 [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) { 193 let actual = window.getComputedStyle(subgrid)['grid-template-rows']; 194 let expected = expectedResults[i]; 195 if (actual != expected) { 196 let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + 197 " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; 198 document.body.appendChild(document.createTextNode(err)); 199 } 200 }); 201 </script> 202 203 </body> 204 </html>