positioned-grid-container-percentage-tracks.html

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

.wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
}

.grid {
    position: absolute;
    font: 10px/1 Ahem;
}

.grid > div {
    min-width: 0px;
}

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

.oneRowOneColumn {
    grid-template-rows: 100%;
    grid-template-columns: 100%;
}

.twoRowsTwoColumns {
    grid-template-rows: 25% 75%;
    grid-template-columns: 60% 40%;
}

</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 tracks are properly resolved for absolute positioned grid containers.</p>


<div class="wrapper">
    <div class="grid oneRowOneColumn">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10">
            XXX
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid oneRowOneColumn topBottomLeftRight">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">
            XXX
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid twoRowsTwoColumns">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="36" data-expected-height="5">
            XXX
        </div>
        <div class="firstRowSecondColumn"
            data-offset-x="36" data-offset-y="0" data-expected-width="24" data-expected-height="5">
            XXX
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="5" data-expected-width="36" data-expected-height="15">
            XXX
        </div>
        <div class="secondRowSecondColumn"
            data-offset-x="36" data-offset-y="5" data-expected-width="24" data-expected-height="15">
            XXX
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="grid twoRowsTwoColumns topBottomLeftRight">
        <div class="firstRowFirstColumn"
            data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25">
            XXX
        </div>
        <div class="firstRowSecondColumn"
            data-offset-x="60" data-offset-y="0" data-expected-width="40" data-expected-height="25">
            XXX
        </div>
        <div class="secondRowFirstColumn"
            data-offset-x="0" data-offset-y="25" data-expected-width="60" data-expected-height="75">
            XXX
        </div>
        <div class="secondRowSecondColumn"
            data-offset-x="60" data-offset-y="25" data-expected-width="40" data-expected-height="75">
            XXX
        </div>
    </div>
</div>

</body>
chromium/third_party/blink/web_tests/fast/css-grid-layout/positioned-grid-container-percentage-tracks.html
