<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">

<style>
.outerGrid {
    width: 200px;
    border: 5px solid;
    background: magenta;
    margin-bottom: 10px;
}

.innerGrid {
    display: grid;
}

.gridItem {
    background: cyan;
    font: 10px/1 Ahem;
}

.floatLeft {
    float: left;
    width: 250px;
}
</style>

<p>This test checks that percentage rows are properly resolved for a grid container that is a grid item.</p>

<div class="floatLeft">

<div class="grid outerGrid" style="grid: 50px / 1fr;">
    <div class="grid" style="grid: 50% / 1fr;">
        <div class="gridItem"></div>
    </div>
</div>

<div class="grid outerGrid alignItemsStart" style="grid: 50px / 1fr;">
    <div class="grid alignItemsStart" style="grid: 50% / 1fr;">
        <div class="gridItem">X X<br>XX</div>
    </div>
</div>

<div class="grid outerGrid" style="height: 50px; grid: 2fr 1fr / 1fr;">
    <div class="grid" style="grid: 50% / 1fr;">
        <div class="gridItem"></div>
    </div>
</div>

<div class="grid outerGrid alignItemsStart" style="height: 50px; grid: 2fr 1fr / 1fr;">
    <div class="grid alignItemsStart" style="grid: 50% / 1fr;">
        <div class="gridItem">X X<br>XX</div>
    </div>
</div>

</div>

<div class="floatLeft">

<div class="grid outerGrid" style="height: 50px; grid: 3fr 1fr / 1fr;">
    <div class="grid" style="grid: 3fr 1fr / 1fr;">
        <div class="gridItem"></div>
    </div>
</div>

<div class="grid outerGrid alignItemsStart" style="height: 50px; grid: 3fr 1fr / 1fr;">
    <div class="grid alignItemsStart" style="grid: 3fr 1fr / 1fr;">
        <div class="gridItem">X X<br>XX</div>
    </div>
</div>

<div class="grid outerGrid" style="height: 50px; grid: 100% / 1fr;">
    <div class="grid" style="grid: 50% / 1fr;">
        <div class="gridItem" style="height: 50%"></div>
    </div>
</div>

<div class="grid outerGrid alignItemsStart" style="height: 50px; grid: 100% / 1fr;">
    <div class="grid alignItemsStart" style="grid: 50% / 1fr;">
        <div class="gridItem" style="height: 75%">X X<br>XX</div>
    </div>
</div>

</div>
