grid-auto-repeat-multiple-values-003-ref.html (2800B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="author" title="Mozilla" href="https://mozilla.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat"> 5 <head> 6 <style> 7 8 .grid-container { 9 height: 30px; 10 width: 300px; 11 border-bottom: 2px solid #cfbfcf; 12 } 13 14 .grid-container > * { float: left; height: 30px; } 15 .grid-container > :nth-child(2n) { background: sienna; } 16 .grid-container > :nth-child(2n + 1) { background: orange; } 17 18 .auto-fit-long { 19 width: 650px; 20 } 21 22 .auto-fit-long > :nth-child(2n) { width: 30px; } 23 .auto-fit-long > :nth-child(2n+1) { width: 40px; } 24 25 .auto-medium-fit { 26 width: 510px; 27 } 28 29 </style> 30 </head> 31 32 <body> 33 <p>The test passes if it has the same visual effect as reference.</p> 34 <div class="grid-container"> 35 <div style="width: 10px;"></div> 36 <div style="width: 20px;"></div> 37 <div style="width: 30px;"></div> 38 <div style="width: 40px;"></div> 39 <div style="width: 30px;"></div> 40 <div style="width: 40px;"></div> 41 </div> 42 <div class="grid-container"> 43 <div style="width: 10px;"></div> 44 <div style="width: 20px;"></div> 45 <div style="width: 30px;"></div> 46 <div style="width: 40px;"></div> 47 <div style="width: 30px;"></div> 48 <div style="width: 50px;"></div> 49 </div> 50 <div class="grid-container auto-fit-long"> 51 <div style="width: 20px; margin-left: 10px"></div> 52 <div></div> 53 <div></div> 54 <div></div> 55 <div></div> 56 <div></div> 57 </div> 58 <div class="grid-container auto-fit-long"> 59 <div style="width: 20px; margin-left: 10px"></div> 60 <div></div> 61 <div></div> 62 <div></div> 63 <div></div> 64 <div></div> 65 </div> 66 <div class="grid-container auto-fit-long"> 67 <div style="width: 20px; margin-left: 10px"></div> 68 <div></div> 69 <div></div> 70 <div></div> 71 <div></div> 72 <div></div> 73 </div> 74 <div class="grid-container"> 75 <div style="width: 20px; margin-left: 10px"></div> 76 <div style="width: 30px;"></div> 77 <div style="width: 30px;"></div> 78 <div style="width: 40px;"></div> 79 <div style="width: 50px;"></div> 80 <div style="width: 60px;"></div> 81 </div> 82 <div class="grid-container"> 83 <div style="width: 10px;"></div> 84 <div style="width: 20px;"></div> 85 <div style="width: 30px;"></div> 86 <div style="width: 40px;"></div> 87 <div style="width: 50px;"></div> 88 <div style="width: 60px;"></div> 89 </div> 90 <div class="grid-container"> 91 <div style="width: 40px; margin-left: 30px"></div> 92 <div style="width: 30px;"></div> 93 <div style="width: 40px;"></div> 94 <div style="width: 50px;"></div> 95 <div style="width: 60px;"></div> 96 </div> 97 <div class="grid-container auto-medium-fit"> 98 <div style="width: 10px;"></div> 99 <div style="width: 110px; margin-left: 20px"></div> 100 <div style="width: 30px;"></div> 101 </div> 102 </body> 103 104 </html>