grid-item-spanning-resolution.html | Explore in Territory

<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    grid-template-columns: 40% 60%;
    grid-template-rows: 30% 70%;
    width: 400px;
    height: 300px;
    grid-auto-columns: 200px;
    grid-auto-rows: 250px;
}

#bigGrid {
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 25% 25% 25% 25%;
    height: 100px;
    width: 200px;
}

#fixedGrid {
    grid-template-columns: 10px 20px 40px 80px;
    grid-template-rows: 15px 30px 60px 120px;
}

.negativeOverflowRowFirstColumn {
    grid-row: 1 / -5;
    grid-column: 1;
}

.overflowRowFirstColumn {
    grid-row: 1 / 5;
    grid-column: 1;
}

.firstRowNegativeOverflowColumn {
    grid-row: 1;
    grid-column: 1 / -5;
}

.firstRowOverflowColumn {
    grid-row: 1;
    grid-column: 1 / 5;
}

.secondRowSecondColumnNoSpan {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.thirdRowThirdColumnNoSpan {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

.firstRowSpanning3SecondColumn {
    grid-column: 2;
    grid-row: 1 / span 3;
}

.thirdRowSecondColumnSpanning2 {
    grid-column: 2 / span 2;
    grid-row: 3;
}

.spanning3Row5SecondColumn {
    grid-column: 2;
    grid-row: span 3 / 5;
}

.thirdRowSpanning2Column3 {
    grid-column: span 2 / 3;
    grid-row: 3;
}

.underflowSpanning {
    grid-column: span 3 / 3;
    grid-row: span 8 / 4;
}

.doubleSpan {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 1;
}

.spanAndAuto {
    grid-column: auto / span 2;
    grid-row: span 3 / auto;
}

</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid');">

<p>Test that spannig rows / columns inside percentage sized grid areas get properly sized.</p>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea firstRowBothColumn" data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="90"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea secondRowBothColumn" data-offset-x="0" data-offset-y="90" data-expected-width="400" data-expected-height="210"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea bothRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="300"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea bothRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="240" data-expected-height="300"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea bothRowBothColumn" data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="300"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea negativeOverflowRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="500"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea overflowRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="800"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea firstRowNegativeOverflowColumn" data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="90"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea firstRowOverflowColumn" data-offset-x="0" data-offset-y="0" data-expected-width="800" data-expected-height="90"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="160" data-offset-y="0" data-expected-width="240" data-expected-height="90"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="400" data-expected-height="300">
    <div class="sizedToGridArea autoSecondRowAutoFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="90"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
    <div class="sizedToGridArea secondRowSecondColumnNoSpan" data-offset-x="50" data-offset-y="25" data-expected-width="50" data-expected-height="25"></div>
    <div class="sizedToGridArea thirdRowThirdColumnNoSpan" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="25"></div>
</div>

<div style="position: relative">
<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
    <div class="sizedToGridArea firstRowSpanning3SecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="75"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
    <div class="sizedToGridArea thirdRowSecondColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="25"></div>
</div>

<div style="position: relative">
<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
    <div class="sizedToGridArea spanning3Row5SecondColumn" data-offset-x="50" data-offset-y="25" data-expected-width="50" data-expected-height="75"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
    <div class="sizedToGridArea thirdRowSpanning2Column3" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="25"></div>
</div>

<div style="position: relative">
<div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="100">
    <div class="sizedToGridArea underflowSpanning" data-offset-x="0" data-offset-y="0" data-expected-width="300" data-expected-height="1325"></div>
</div>

<!-- Check that the end span is ignored when two opposing spans are specified-->
<div style="position: relative">
<div class="grid" id="fixedGrid" style="grid-auto-flow: row;">
    <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
    <div class="sizedToGridArea doubleSpan" data-offset-x="10" data-offset-y="0" data-expected-width="60" data-expected-height="105"></div>
</div>

<div style="position: relative">
<div class="grid" id="fixedGrid" style="grid-auto-flow: column;">
    <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></div>
    <div class="sizedToGridArea doubleSpan" data-offset-x="0" data-offset-y="15" data-expected-width="30" data-expected-height="210"></div>
</div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css-grid-layout/grid-item-spanning-resolution.html
