Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html 

<!DOCTYPE html>
<html>
<head>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.grid {
    grid-template-columns: 20% 50% 30%;
    grid-template-rows: 40%;
}

.fixedSize {
    width: 400px;
    height: 400px;
}

.calculatedSize {
    width: calc(200px + 20%);
    height: calc(300px + 10%);
}

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

.indefiniteHeight {
    height: auto;
}

.firstRowFirstColumn {
    color: blue;
    background-color: cyan;
}

.firstRowSecondColumn {
    color: green;
    background-color: lime;
}

.firstRowThirdColumn {
    color: brown;
    background-color: yellow;
    grid-column: 3;
    grid-row: 1;
}
</style>
<script src="../../resources/check-layout.js"></script>
</head>
<body onload="checkLayout('.grid');">
    <p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
    <div class="unconstrainedContainer">
        <div class="grid">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="4">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="4">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="4">XXX</div>
        </div>
    </div>

    <div class="fit-content indefiniteHeight">
        <div class="grid">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
        </div>
    </div>

    <div class="unconstrainedContainer">
        <div class="grid fixedSize">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
        </div>
    </div>

    <div class="indefiniteHeight">
        <div class="grid fixedSize">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
        </div>
    </div>

    <div class="fit-content indefiniteHeight">
        <div class="grid calculatedSize">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="44" data-expected-height="4">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="110" data-expected-height="4">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="66" data-expected-height="4">XXX</div>
        </div>
    </div>

    <div class="unconstrainedContainer">
        <div class="grid calculatedSize">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
        </div>
    </div>

    <div class="fit-content indefiniteHeight">
        <div class="grid percentageSize">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="10" data-expected-height="4">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="25" data-expected-height="4">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="15" data-expected-height="4">XXX</div>
        </div>
    </div>

    <div class="unconstrainedContainer">
        <div class="grid percentageSize">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="100" data-expected-height="200">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="250" data-expected-height="200">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="150" data-expected-height="200">XXX</div>
        </div>
    </div>

    <div class="fit-content indefiniteHeight">
        <div class="grid fit-content indefiniteHeight">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
        </div>
    </div>

    <div class="unconstrainedContainer">
        <div class="grid fit-content indefiniteHeight">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
        </div>
    </div>

    <div class="indefiniteHeight fit-content">
        <div class="grid fit-content">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
        </div>
    </div>

    <div class="unconstrainedContainer">
        <div class="grid fit-content">
            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="4">XX</div>
            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="4">XXXXX</div>
            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="4">XXX</div>
        </div>
    </div>

</body>
</html>