| <!DOCTYPE HTML> |
| <html> |
| <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> |
| <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; |
| } |
| |
| .wrapper { |
| display: inline-block; |
| width: 110px; |
| border: 1px solid; |
| } |
| |
| .grid { |
| display: grid; |
| grid-auto-rows: 8px; |
| background: grey; |
| } |
| |
| .fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] } |
| .fill-0b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] } |
| .fill-0c { grid-template-columns: subgrid [x] [y] repeat(auto-fill, [z]) } |
| .fill-0d { grid-template-columns: subgrid repeat(auto-fill, [x]) } |
| .fill-0e { grid-template-columns: subgrid [x] } |
| |
| .grid > :nth-child(2n) { background: black; } |
| .grid > :nth-child(2n+1) { background: pink; } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div class="wrapper"><div class="grid 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="wrapper"><div class="grid 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="wrapper"><div class="grid 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="wrapper"><div class="grid 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="wrapper"><div class="grid 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> |
| |
| <script> |
| const expectedResults = [ |
| "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", |
| "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", |
| "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", |
| "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", |
| "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", |
| ]; |
| [...document.querySelectorAll('.grid')].forEach(function(grid, i) { |
| let actual = window.getComputedStyle(grid)['grid-template-columns']; |
| let expected = expectedResults[i]; |
| if (actual != expected) { |
| let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" + |
| " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; |
| document.body.appendChild(document.createTextNode(err)); |
| document.body.appendChild(document.createElement("br")); |
| } |
| }); |
| </script> |
| |
| </body> |
