percent-resolution-grid-item-children.html

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

.grid {
    grid: 100px / 200px;
    position: relative;
}

.fixedSize350 {
    width: 350px;
    height: 350px;
}

.percentSize100 {
    width: 100%;
    height: 100%;
}

.percentSize50 {
    width: 50%;
    height: 50%;
}

.positioned {
    position: absolute;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.offsets {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

</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 percentages are properly resolved for grid items' children.</p>

<div class="grid">
    <div data-expected-width="200" data-expected-height="100">
        <div class="percentSize100" data-expected-width="200" data-expected-height="100">
        </div>
    </div>
</div>

<div class="grid">
    <div data-expected-width="200" data-expected-height="100">
        <div class="percentSize50" data-expected-width="100" data-expected-height="50">
        </div>
    </div>
</div>

<div class="grid itemsStart">
    <div data-expected-width="0" data-expected-height="0">
        <div class="percentSize100" data-expected-width="0" data-expected-height="0">
        </div>
    </div>
</div>

<div class="grid itemsStart">
    <div data-expected-width="0" data-expected-height="0">
        <div class="percentSize50" data-expected-width="0" data-expected-height="0">
        </div>
    </div>
</div>

<div class="grid">
    <div class="fixedSize350" data-expected-width="350" data-expected-height="350">
        <div class="percentSize100" data-expected-width="350" data-expected-height="350">
        </div>
    </div>
</div>

<div class="grid">
    <div class="fixedSize350" data-expected-width="350" data-expected-height="350">
        <div class="percentSize50" data-expected-width="175" data-expected-height="175">
        </div>
    </div>
</div>

<div class="grid">
    <div class="percentSize100" data-expected-width="200" data-expected-height="100">
        <div class="percentSize100" data-expected-width="200" data-expected-height="100">
        </div>
    </div>
</div>

<div class="grid">
    <div class="percentSize100" data-expected-width="200" data-expected-height="100">
        <div class="percentSize50" data-expected-width="100" data-expected-height="50">
        </div>
    </div>
</div>

<div class="grid">
    <div class="percentSize50" data-expected-width="100" data-expected-height="50">
        <div class="percentSize100" data-expected-width="100" data-expected-height="50">
        </div>
    </div>
</div>

<div class="grid">
    <div class="percentSize50" data-expected-width="100" data-expected-height="50">
        <div class="percentSize50" data-expected-width="50" data-expected-height="25">
        </div>
    </div>
</div>

<div class="grid">
    <div class="positioned" data-expected-width="0" data-expected-height="0">
        <div class="percentSize100" data-expected-width="0" data-expected-height="0">
        </div>
    </div>
</div>

<div class="grid">
    <div class="positioned" data-expected-width="0" data-expected-height="0">
        <div class="percentSize50" data-expected-width="0" data-expected-height="0">
        </div>
    </div>
</div>

<div class="grid">
    <div class="positioned offsets" data-expected-width="200" data-expected-height="100">
        <div class="percentSize100" data-expected-width="200" data-expected-height="100">
        </div>
    </div>
</div>

<div class="grid">
    <div class="positioned offsets" data-expected-width="200" data-expected-height="100">
        <div class="percentSize50" data-expected-width="100" data-expected-height="50">
        </div>
    </div>
</div>

</body>
chromium/third_party/blink/web_tests/fast/css-grid-layout/percent-resolution-grid-item-children.html
