repeat-auto-fill-009.html (4067B)
1 <!DOCTYPE HTML> 2 <html> 3 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list"> 5 <head> 6 <style> 7 html,body { 8 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 9 } 10 11 .wrapper { 12 display: inline-block; 13 width: 110px; 14 border: 1px solid; 15 } 16 17 .grid { 18 display: grid; 19 grid-auto-rows: 8px; 20 background: grey; 21 } 22 23 .fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] } 24 .fill-0b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] } 25 .fill-0c { grid-template-columns: subgrid [x] [y] repeat(auto-fill, [z]) } 26 .fill-0d { grid-template-columns: subgrid repeat(auto-fill, [x]) } 27 .fill-0e { grid-template-columns: subgrid [x] } 28 29 .grid > :nth-child(2n) { background: black; } 30 .grid > :nth-child(2n+1) { background: pink; } 31 32 </style> 33 </head> 34 <body> 35 36 <div class="wrapper"><div class="grid fill-0a"> 37 <div style="grid-column:y 5"></div> 38 <div style="grid-column:y 4"></div> 39 <div style="grid-column:y 3"></div> 40 <div style="grid-column:y 2"></div> 41 <div style="grid-column:y 1"></div> 42 <div style="grid-column:y -1"></div> 43 <div style="grid-column:y -2"></div> 44 <div style="grid-column:y -3"></div> 45 <div style="grid-column:y -4"></div> 46 <div style="grid-column:y -5"></div> 47 </div></div> 48 49 <div class="wrapper"><div class="grid fill-0b"> 50 <div style="grid-column:y 5"></div> 51 <div style="grid-column:y 4"></div> 52 <div style="grid-column:y 3"></div> 53 <div style="grid-column:y 2"></div> 54 <div style="grid-column:y 1"></div> 55 <div style="grid-column:y -1"></div> 56 <div style="grid-column:y -2"></div> 57 <div style="grid-column:y -3"></div> 58 <div style="grid-column:y -4"></div> 59 <div style="grid-column:y -5"></div> 60 </div></div> 61 62 <div class="wrapper"><div class="grid fill-0c"> 63 <div style="grid-column:y 5"></div> 64 <div style="grid-column:y 4"></div> 65 <div style="grid-column:y 3"></div> 66 <div style="grid-column:y 2"></div> 67 <div style="grid-column:y 1"></div> 68 <div style="grid-column:y -1"></div> 69 <div style="grid-column:y -2"></div> 70 <div style="grid-column:y -3"></div> 71 <div style="grid-column:y -4"></div> 72 <div style="grid-column:y -5"></div> 73 </div></div> 74 75 <div class="wrapper"><div class="grid fill-0d"> 76 <div style="grid-column:y 5"></div> 77 <div style="grid-column:y 4"></div> 78 <div style="grid-column:y 3"></div> 79 <div style="grid-column:y 2"></div> 80 <div style="grid-column:y 1"></div> 81 <div style="grid-column:y -1"></div> 82 <div style="grid-column:y -2"></div> 83 <div style="grid-column:y -3"></div> 84 <div style="grid-column:y -4"></div> 85 <div style="grid-column:y -5"></div> 86 </div></div> 87 88 <div class="wrapper"><div class="grid fill-0e"> 89 <div style="grid-column:y 5"></div> 90 <div style="grid-column:y 4"></div> 91 <div style="grid-column:y 3"></div> 92 <div style="grid-column:y 2"></div> 93 <div style="grid-column:y 1"></div> 94 <div style="grid-column:y -1"></div> 95 <div style="grid-column:y -2"></div> 96 <div style="grid-column:y -3"></div> 97 <div style="grid-column:y -4"></div> 98 <div style="grid-column:y -5"></div> 99 </div></div> 100 101 <script> 102 const expectedResults = [ 103 "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", 104 "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", 105 "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", 106 "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", 107 "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px", 108 ]; 109 [...document.querySelectorAll('.grid')].forEach(function(grid, i) { 110 let actual = window.getComputedStyle(grid)['grid-template-columns']; 111 let expected = expectedResults[i]; 112 if (actual != expected) { 113 let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" + 114 " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; 115 document.body.appendChild(document.createTextNode(err)); 116 document.body.appendChild(document.createElement("br")); 117 } 118 }); 119 </script> 120 121 </body>