row-auto-repeat-013.html (1342B)
1 <!DOCTYPE html> 2 <title>Auto repeat tracks with multiple tracks.</title> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 5 <link rel="match" href="row-auto-repeat-013-ref.html"> 6 <style> 7 .grid-lanes { 8 display: grid-lanes; 9 border: solid thick; 10 grid-lanes-direction: row; 11 grid-template-rows: 10px 20px repeat(auto-fill, 30px 40px) 50px 60px; 12 height: 300px; 13 background: pink; 14 } 15 .grid-lanes > :nth-child(2n) { 16 background: sienna; 17 } 18 .grid-lanes > :nth-child(2n+1) { 19 background: orange; 20 } 21 .grid-lanes > div { 22 width: 25px; 23 height: 100%; 24 } 25 .holder { 26 height: 300px; 27 width: 50px; 28 border-bottom: 2px solid #cfbfcf; 29 } 30 </style> 31 <p>The test passes if it has the same visual effect as reference.</p> 32 <div class="holder"> 33 <div class="grid-lanes"> 34 <div></div> 35 <div></div> 36 <div></div> 37 <div></div> 38 <div></div> 39 <div></div> 40 </div> 41 </div> 42 43 <div class="holder"> 44 <div class="grid-lanes"> 45 <div></div> 46 <div></div> 47 <div></div> 48 <div></div> 49 <div></div> 50 <div style="grid-row: 7;"></div> 51 </div> 52 </div> 53 54 <div class="holder"> 55 <div class="grid-lanes"> 56 <div style="grid-row: 2;"></div> 57 <div></div> 58 <div style="grid-row: 5;"></div> 59 <div></div> 60 <div></div> 61 <div></div> 62 </div> 63 </div>