blob: c66901370259e929c0eeea56974b53f701cc70fc [file] [log] [blame]
<!DOCTYPE html>
<html>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
grid-columns: 'first' 50px 'middle' 100px 'last';
grid-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;
grid-row: 1;
}
.negativeEndPositionStartSpanInRowDirection {
grid-column: 1;
grid-row: span 5 / -1;
}
.negativeNamedGridLineEndPositionStartSpanInColumnDirection {
grid-column: span / "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="550">
<div class="sizedToGridArea namedEndSpanGrowGridInRowDirection" 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="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="150">
<div class="sizedToGridArea negativeEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></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="150">
<div class="sizedToGridArea negativeNamedGridLineEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="150"></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="150" data-expected-height="150">
<div class="sizedToGridArea negativeEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="150">
<div class="sizedToGridArea namedGridLineEndPositionStartNegativeInColumnDirection" 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="150" data-expected-height="150">
<div class="sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>
</body>
</html>