<!DOCTYPE html>

<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">

<style>
    .grid {
        grid: 200px / 200px;
        width: 200px;
    }

    .red {
        background-color: red;
    }

    img {
        height: 100%;
        display: block;
    }

    .height100 {
        height: 100%;
    }
</style>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>

<body onload="checkLayout('.grid')">
<div id="log"></div>

<p>This test checks that percentage heights are properly resolved for grid items that are replaced elements.
You shouldn't see any red if the test is working as expected.</p>

<p>1) 100% height on the image (grid item) should be resolved against the height of the grid area (200px).
Actually we don't need the 100% height in this case as the grid items are stretched by default.</p>

<div class="grid red">
    <img src="../css/resources/greenbox-100px.png"
         data-expected-width="200" data-expected-height="200">
</div>

<p>2) 100% height on the image (grid item's child) should be resolved against the height of the grid item,
which is stretched by default to the height of the grid area (200px).</p>


<div class="grid red">
    <div data-expected-width="200" data-expected-height="200">
        <img src="../css/resources/greenbox-100px.png"
             data-expected-width="200" data-expected-height="200">
    </div>
</div>

<p>3) 100% height on the image (grid item) should be resolved against the height of the grid area (200px).
The grid item is not stretched in this case but the height percentage can be resolved anyway.</p>

<div class="grid red alignItemsStart">
    <img src="../css/resources/greenbox-100px.png"
         data-expected-width="200" data-expected-height="200">
</div>

<p>4) 100% height on the image (grid item's child) should be resolved against the height of the grid item,
as it's not stretched the grid item's height is indefinite, so the percentage cannot be resolved.</p>

<div class="grid alignItemsStart justifyItemsStart">
    <div class="firstRowFirstColumn red" style="width: 100px; height: 100px;"
        data-expected-width="100" data-expected-height="100">
    </div>
    <div class="firstRowFirstColumn">
        <img src="../css/resources/greenbox-100px.png"
            data-expected-width="100" data-expected-height="100">
    </div>
</div>

<p>5) 100% height on the image (grid item's child) should be resolved against the height of the grid item,
which also has a 100% height that is resolved against the height of the grid area (200px).</p>

<div class="grid red">
    <div class="height100" data-expected-width="200" data-expected-height="200">
        <img src="../css/resources/greenbox-100px.png"
             data-expected-width="200" data-expected-height="200">
    </div>
</div>

</body>
