blob: d0e80435b663697a69fcaf7693600864631326c8 [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: 40% 60%;
grid-rows: 30% 70%;
width: 400px;
height: 300px;
}
#bigGrid {
grid-columns: 25% 25% 25% 25%;
grid-rows: 25% 25% 25% 25%;
height: 100px;
width: 200px;
}
.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;
}
</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="90"></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="300"></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="160" 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="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 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="160" 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="100" data-expected-height="75"></div>
</div>
</body>
</html>