| <!DOCTYPE HTML> |
| <html> |
| <link rel="author" title="Mozilla" href="https://mozilla.org"> |
| <link rel="match" href="repeat-auto-fill-008-ref.html"> |
| <link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list"> |
| <head> |
| <style> |
| html,body { |
| color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; |
| } |
| |
| .grid { |
| display: inline-grid; |
| grid-auto-columns: 15px; |
| border: 1px solid; |
| } |
| |
| .subgrid { |
| display: grid; |
| grid-column: 3 / span 4; |
| grid-auto-rows: 8px; |
| background: grey; |
| } |
| |
| .fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y] [y]) [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ |
| .fill-0b { grid-template-columns: subgrid [z] repeat(auto-fill, [z] [z] [z]) [z] } /* [z] [z] [z] [z] [z] */ |
| .fill-0c { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [y] [y]) [z] } /* [x] [y] [y] [y] [z] */ |
| .fill-0d { grid-template-columns: subgrid [x] repeat(auto-fill, [z] [z]) } /* [x] [z] [z] [z] [z] */ |
| .fill-0e { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] } /* [x] [x] [x] [x] [z] */ |
| .fill-0f { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] [z] [z] } /* [x] [x] [z] [z] [z] */ |
| .fill-0g { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */ |
| .fill-0h { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] } /* [x] [y] [x] [y] [z] */ |
| .fill-0i { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) } /* [x] [y] [x] [y] [] */ |
| .fill-0j { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] } /* [y] [y] [y] [z] [z] */ |
| .fill-0k { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */ |
| .fill-0l { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) [z] } /* [z] [x] [y] [z] [] */ |
| .fill-0m { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) } /* [z] [x] [y] [x] [y] */ |
| .fill-0n { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) repeat(100, [z])} /* [z] [z] [z] [z] [z] */ |
| .fill-0o { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) } /* [z] [x] [y] [z] [] */ |
| .fill-0p { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) [x] } /* [z] [x] [y] [z] [x] */ |
| .fill-0q { grid-template-columns: subgrid repeat(auto-fill, [x] [y] [z]) [x] } /* [x] [y] [z] [x] [] */ |
| .fill-0r { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [z]) } /* [x] [y] [z] [y] [z] */ |
| |
| /* With span of 5... */ |
| .fill-0s { |
| grid-column: 2 / span 5; |
| grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] */ |
| } |
| |
| /* With span of 6, same as fill-0s but with room for a partial additional repetition */ |
| .fill-0t { |
| grid-column: 1 / span 6; |
| grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] [] */ |
| } |
| |
| .subgrid > :nth-child(2n) { background: black; } |
| .subgrid > :nth-child(2n+1) { background: pink; } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div class="grid"><div class="subgrid fill-0a"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0b"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0c"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0d"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0e"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0f"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0g"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0h"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0i"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0j"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0k"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0l"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0m"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0n"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0o"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0p"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0q"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0r"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0s"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <div class="grid"><div class="subgrid fill-0t"> |
| <div style="grid-column:y 5"></div> |
| <div style="grid-column:y 4"></div> |
| <div style="grid-column:y 3"></div> |
| <div style="grid-column:y 2"></div> |
| <div style="grid-column:y 1"></div> |
| <div style="grid-column:y -1"></div> |
| <div style="grid-column:y -2"></div> |
| <div style="grid-column:y -3"></div> |
| <div style="grid-column:y -4"></div> |
| <div style="grid-column:y -5"></div> |
| </div></div> |
| |
| <script> |
| const expectedResults = [ |
| "subgrid [z] [z] [z] [z] [z]", |
| "subgrid [z] [z] [z] [z] [z]", |
| "subgrid [x] [y] [y] [y] [z]", |
| "subgrid [x] [z] [z] [z] [z]", |
| "subgrid [x] [x] [x] [x] [z]", |
| "subgrid [x] [x] [z] [z] [z]", |
| "subgrid [x] [y] [z] [z] []", |
| "subgrid [x] [y] [x] [y] [z]", |
| "subgrid [x] [y] [x] [y] []", |
| "subgrid [y] [y] [y] [z] [z]", |
| "subgrid [x] [y] [z] [z] []", |
| "subgrid [z] [x] [y] [z] []", |
| "subgrid [z] [x] [y] [x] [y]", |
| "subgrid [z] [z] [z] [z] [z]", |
| "subgrid [z] [x] [y] [z] []", |
| "subgrid [z] [x] [y] [z] [x]", |
| "subgrid [x] [y] [z] [x] []", |
| "subgrid [x] [y] [z] [y] [z]", |
| "subgrid [w] [y] [z] [y] [z] [x]", |
| "subgrid [w] [y] [z] [y] [z] [x] []", |
| ]; |
| [...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)); |
| document.body.appendChild(document.createElement("br")); |
| } |
| }); |
| </script> |
| |
| </body> |