<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
<script src="../../resources/check-layout.js"></script>
<style>
body {
    margin: 0px;
}

.grid {
    position: relative;
    width: 400px;
    height: 300px;
    justify-content: stretch;
    align-content: stretch;
}
.fixedAndAutoTracks {
    grid-template-columns: 80px auto 100px;
    grid-template-rows: auto 100px auto;
}
.flexibleAndAutoTracks {
    grid-template-columns: .5fr auto .5fr;
    grid-template-rows: auto 1fr auto;
}
</style>
</head>
<body onload="checkLayout('.grid')">

<p>This test checks that Content Distribution alignment applies 'stretch' correctly when using different sized tracks.</p>

<div style="position: relative">
    <p>Mixing fixed sized and auto-sized tracks.</p>
    <div class="grid fixedAndAutoTracks" data-expected-width="400" data-expected-height="300">
        <div class="firstRowFirstColumn" data-expected-width="80" data-expected-height="115">
            <div style="width: 20px; height: 40px;"></div>
        </div>
        <div class="firstRowSecondColumn" data-expected-width="220" data-expected-height="115">
            <div style="width: 40px; height: 10px;"></div>
        </div>
        <div class="firstRowThirdColumn" data-expected-width="100" data-expected-height="115">
            <div style="width: 10px; height: 5px;"></div>
        </div>
        <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="100"></div>
        <div class="secondRowSecondColumn" data-expected-width="220" data-expected-height="100">
            <div style="width: 20px; height: 5px;"></div>
        </div>
        <div class="secondRowThirdColumn" data-expected-width="100" data-expected-height="100"></div>
        <div class="thirdRowFirstColumn" data-expected-width="80" data-expected-height="85">
            <div style="width: 30px; height: 5px;"></div>
        </div>
        <div class="thirdRowSecondColumn" data-expected-width="220" data-expected-height="85">
            <div style="width: 20px; height: 10px;"></div>
        </div>
        <div class="thirdRowThirdColumn" data-expected-width="100" data-expected-height="85">
            <div style="width: 50px; height: 5px;"></div>
        </div>
    </div>
</div>

<div style="position: relative">
    <p>Mixing flexible and auto-sized tracks.</p>
    <div class="grid flexibleAndAutoTracks" data-expected-width="400" data-expected-height="300">
        <div class="firstRowFirstColumn" data-expected-width="180" data-expected-height="40">
            <div style="width: 20px; height: 40px;"></div>
        </div>
        <div class="firstRowSecondColumn" data-expected-width="40" data-expected-height="40">
            <div style="width: 40px; height: 10px;"></div>
        </div>
        <div class="firstRowThirdColumn" data-expected-width="180" data-expected-height="40">
            <div style="width: 10px; height: 5px;"></div>
        </div>
        <div class="secondRowFirstColumn" data-expected-width="180" data-expected-height="250"></div>
        <div class="secondRowSecondColumn" data-expected-width="40" data-expected-height="250">
            <div style="width: 20px; height: 5px;"></div>
        </div>
        <div class="secondRowThirdColumn" data-expected-width="180" data-expected-height="250"></div>
        <div class="thirdRowFirstColumn" data-expected-width="180" data-expected-height="10">
            <div style="width: 30px; height: 5px;"></div>
        </div>
        <div class="thirdRowSecondColumn" data-expected-width="40" data-expected-height="10">
            <div style="width: 20px; height: 10px;"></div>
        </div>
        <div class="thirdRowThirdColumn" data-expected-width="180" data-expected-height="10">
            <div style="width: 50px; height: 5px;"></div>
        </div>
    </div>
</div>

</body>
</html>
