grid-item-negative-position-resolution.html

<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
    grid-template-columns: [first] 50px [middle] 100px [last];
    grid-template-rows: [first] 50px [middle] 100px [last];
    /* To detect how much we extend the grid. */
    grid-auto-columns: 200px;
    grid-auto-rows: 200px;

    /* Make the grid shrink-to-fit. */
    position: absolute;
}

.negativeStartPositionGrowGridInColumnDirection {
    grid-column: -1 / auto;
    grid-row: 1;
}

.negativeStartPositionGrowGridInRowDirection {
    grid-column: 1;
    grid-row: -1 / auto;
}

.lastNamedGridLineStartPositionGrowGridInRowDirection {
    grid-column: 1;
    grid-row: -1 / auto;
}

.lastNamedGridLineStartPositionGrowGridInColumnDirection {
    grid-column: last / auto;
    grid-row: 1;
}

.negativeStartPositionGrowGridInRowDirection {
    grid-column: 1;
    grid-row: last / auto;
}

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

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

.namedEndSpanGrowGridInColumnDirection {
    grid-column: -1 middle / span 3;
    grid-row: 1;
}

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

.negativeEndPositionStartSpanInColumnDirection {
    grid-column: span 1 / -1;
    grid-row: 1;
}

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

.negativeNamedGridLineEndPositionStartSpanInColumnDirection {
    grid-column: span 1 / last;
    grid-row: 1;
}

.negativeNamedGridLineEndPositionStartSpanInRowDirection {
    grid-column: 1;
    grid-row: span 5 / last;
}

.negativeEndPositionStartNegativeInColumnDirection {
    grid-column: -3 / -1;
    grid-row: 1;
}

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

.namedGridLineEndPositionStartNegativeInColumnDirection {
    grid-column: -3 / 10 last;
    grid-row: 1;
}

.namedGridLineEndPositionStartNegativeInRowDirection {
    grid-column: -5 / -2 middle;
    grid-row: 1;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid');">

<p>Test that negative grid positions are correctly resolved.</p>

<div style="position: relative">
<div class="grid" data-expected-width="350" data-expected-height="150">
    <div class="sizedToGridArea negativeStartPositionGrowGridInColumnDirection" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="350">
    <div class="sizedToGridArea lastNamedGridLineStartPositionGrowGridInRowDirection" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="350" data-expected-height="150">
    <div class="sizedToGridArea lastNamedGridLineStartPositionGrowGridInColumnDirection" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="350">
    <div class="sizedToGridArea negativeStartPositionGrowGridInRowDirection" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150">
    <div class="sizedToGridArea endSpanGrowGridInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="500" data-expected-height="50"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="550">
    <div class="sizedToGridArea endSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="500"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150">
    <div class="sizedToGridArea namedEndSpanGrowGridInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="500" data-expected-height="50"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="950">
    <div class="sizedToGridArea namedEndSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="600"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="150">
    <div class="sizedToGridArea negativeEndPositionStartSpanInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="750">
    <div class="sizedToGridArea negativeEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="750"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="150">
    <div class="sizedToGridArea negativeNamedGridLineEndPositionStartSpanInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="750">
    <div class="sizedToGridArea negativeNamedGridLineEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="750"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="150">
    <div class="sizedToGridArea negativeEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150">
    <div class="sizedToGridArea negativeEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="450" data-expected-height="50"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="1950" data-expected-height="150">
    <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="1950" data-expected-height="50"></div>
</div>
</div>

<div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150">
    <div class="sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
</div>
</div>

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