<!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>
