| <!DOCTYPE HTML> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet> |
| <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel=stylesheet> |
| <style> |
| .autoFill { grid: repeat(auto-fill, 100px) / repeat(auto-fill, 100px); } |
| .autoFit { grid: repeat(auto-fit, 100px) / repeat(auto-fit, 100px); } |
| </style> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| </script> |
| |
| <div class="grid autoFill"></div> |
| <div class="grid autoFit"></div> |
| |
| <div class="grid autoFill min-content"></div> |
| <div class="grid autoFit min-content"></div> |
| |
| <div class="grid autoFill max-content"></div> |
| <div class="grid autoFit max-content"></div> |
| |
| <div class="grid autoFill min-width-min-content min-height-min-content"></div> |
| <div class="grid autoFit min-width-min-content min-height-min-content"></div> |
| |
| <div class="grid autoFill min-width-max-content min-height-max-content"></div> |
| <div class="grid autoFit min-width-max-content min-height-max-content"></div> |
| |
| <div class="grid autoFill">item</div> |
| <div class="grid autoFit">item</div> |
| |
| <div class="grid autoFill min-content">item</div> |
| <div class="grid autoFit min-content">item</div> |
| |
| <div class="grid autoFill max-content">item</div> |
| <div class="grid autoFit max-content">item</div> |
| |
| <div class="grid autoFill min-width-min-content min-height-min-content">item</div> |
| <div class="grid autoFit min-width-min-content min-height-min-content">item</div> |
| |
| <div class="grid autoFill min-width-max-content min-height-max-content">item</div> |
| <div class="grid autoFit min-width-max-content min-height-max-content">item</div> |
| |
| <div class="min-height-max-content min-width-min-content"> |
| <div class="grid autoFill"></div> |
| </div> |
| |
| <div class="max-content"> |
| <div class="grid autoFit"></div> |
| </div> |
| |
| <div class="min-content min-width-min-content"> |
| <div class="grid autoFill"></div> |
| </div> |
| |
| <div class="max-content max-width-min-content"> |
| <div class="grid autoFit"></div> |
| </div> |
| |
| <div class="min-height-max-content min-content"> |
| <div class="grid autoFill"></div> |
| </div> |
| |
| <div class="min-height-min-content max-content"> |
| <div class="grid autoFit"></div> |
| </div> |
| |
| <div class="min-height-max-content min-width-min-content"> |
| <div class="grid autoFill min-width-min-content"></div> |
| </div> |
| |
| <div class="min-height-max-content min-width-min-content"> |
| <div class="grid autoFit min-height-min-content"></div> |
| </div> |
| |
| <div class="max-content min-width-min-content"> |
| <div class="grid autoFill"></div> |
| </div> |
| |
| <div class="max-height-min-content min-content"> |
| <div class="grid autoFit max-height-max-content"></div> |
| </div> |
| |
| <div class="min-height-max-content min-content"> |
| <div class="grid autoFill">item</div> |
| </div> |
| |
| <div class="min-height-min-content max-width-min-content"> |
| <div class="grid autoFit">item</div> |
| </div> |
| |
| <div class="max-height-max-content max-width-max-content"> |
| <div class="grid autoFill max-width-min-content">item</div> |
| </div> |
| |
| <div class="max-height-min-content min-content"> |
| <div class="grid autoFit min-height-max-content max-height-min-content">item</div> |
| </div> |
| |
| <div class="min-height-max-content max-content"> |
| <div class="grid autoFill max-height-max-content">item</div> |
| </div> |
| |
| <div class="min-content min-width-max-content"> |
| <div class="grid autoFit max-width-max-content">item</div> |
| </div> |
| |
| <div class="min-content max-width-max-content"> |
| <div class="grid autoFill min-height-min-content">item</div> |
| </div> |
| |
| <div class="min-height-min-content min-content"> |
| <div class="grid autoFit max-height-min-content">item</div> |
| </div> |
| |
| <div class="max-height-max-content max-content"> |
| <div class="grid autoFill max-height-min-content">item</div> |
| </div> |
| |
| <div class="min-content min-width-min-content"> |
| <div class="grid autoFit min-content min-height-min-content max-height-max-content">item</div> |
| </div> |
| |
| <p>This test checks that the computation of auto repeat tracks works when the grid container width is indefinite.</p> |
| <p>This test has PASSED if it didn't CRASH.</p> |
