| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link rel="author" title="Mozilla" href="https://mozilla.org"> |
| <link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> |
| <link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions"> |
| <style> |
| |
| .holder { |
| width: 300px; |
| height: 20px; |
| border-bottom: 2px solid #cfbfcf; |
| } |
| |
| .holder > :nth-child(2) { |
| clear: left; /* Forces the div to a new line to simulate a new grid row. */ |
| padding-top: 2px; /* Simulates the grid row gap. */ |
| } |
| |
| .grid-container > * { float: left; height: 8px; } |
| |
| .grid-container > :nth-child(3n) { background: sienna; } |
| .grid-container > :nth-child(3n+1) { background: gold; } |
| .grid-container > :nth-child(3n+2) { background: orange; } |
| |
| .alt-color > :nth-child(2n) { background: sienna; } |
| .alt-color > :nth-child(2n+1) { background: orange; } |
| |
| .invis { width: 0px; visibility: none; } |
| |
| </style> |
| |
| <p>The test passes if it has the same visual effect as reference.</p> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:30px; margin-left:30px"></div> |
| <div style="width:30px;"></div> |
| <div style="width:40px;"></div> |
| <div style="width:50px;"></div> |
| <div style="width:60px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:10px;"></div> |
| <div style="width:30px; margin-left:20px"></div> |
| <div style="width:30px;"></div> |
| <div style="width:40px;"></div> |
| <div style="width:50px;"></div> |
| <div style="width:60px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:30px; margin-left:30px"></div> |
| <div style="width:50px;"></div> |
| <div style="width:60px;"></div> |
| </div> |
| <div class="grid-container"> |
| <div style="width:10px"></div> |
| <div style="width:20px"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:10px;"></div> |
| <div style="width:30px; margin-left:20px;"></div> |
| <div style="width:50px;"></div> |
| <div style="width:60px;"></div> |
| </div> |
| <div class="grid-container"> |
| <div class="invis"></div> |
| <div style="width:10px"></div> |
| <div style="width:20px"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:50px; margin-left:10px;"></div> |
| <div style="width:40px;"></div> |
| <div style="width:30px;"></div> |
| <div style="width:40px;"></div> |
| <div style="width:50px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:90px; margin-left:10px;"></div> |
| <div style="width:30px;"></div> |
| <div style="width:40px;"></div> |
| <div style="width:50px;"></div> |
| <div style="width:60px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div class="invis"></div> |
| <div style="width:10px;"></div> |
| <div class="invis"></div> |
| <div style="width:90px;"></div> |
| <div class="invis"></div> |
| <div style="width:30px;"></div> |
| <div style="width:40px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container alt-color"> |
| <div class="invis"></div> |
| <div style="width:10px;"></div> |
| <div style="width:120px;"></div> |
| <div style="width:40px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:10px;"></div> |
| <div style="width:90px;"></div> |
| <div style="width:30px;"></div> |
| <div style="width:40px;"></div> |
| <div style="width:50px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div class="invis"></div> |
| <div style="width:10px;"></div> |
| <div class="invis"></div> |
| <div style="width:50px;"></div> |
| <div class="invis"></div> |
| <div style="width:40px;"></div> |
| <div style="width:30px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container alt-color"> |
| <div class="invis"></div> |
| <div style="width:10px;"></div> |
| <div style="width:90px;"></div> |
| <div style="width:30px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:10px;"></div> |
| <div style="width:50px;"></div> |
| <div style="width:40px;"></div> |
| <div style="width:30px;"></div> |
| <div style="width:40px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:10px;"></div> |
| <div style="width:20px;"></div> |
| <div style="width:140px;"></div> |
| <div style="width:50px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:10px;"></div> |
| <div class="invis"></div> |
| <div style="width:20px;"></div> |
| <div class="invis"></div> |
| <div style="width:140px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container alt-color"> |
| <div style="width:30px;"></div> |
| <div style="width:140px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div class="invis"></div> |
| <div style="width:10px;"></div> |
| <div class="invis"></div> |
| <div style="width:140px; margin-left:20px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div style="width:10px;"></div> |
| <div style="width:210px;"></div> |
| <div style="width:60px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container alt-color"> |
| <div style="width:10px;"></div> |
| <div style="width:210px;"></div> |
| <div style="width:60px;"></div> |
| </div> |
| </div> |
| |
| <div class="holder"> |
| <div class="grid-container"> |
| <div class="invis"></div> |
| <div style="width:10px;"></div> |
| <div class="invis"></div> |
| <div style="width:210px;"></div> |
| </div> |
| </div> |
| |