blob: a06022a05f1c0cadc168bcff46476b7c140925e0 [file] [log] [blame]
<!DOCTYPE html>
<html>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.gridMinFlexContent {
grid-columns: minmax(1fr, 50px);
grid-rows: 50px;
}
.gridMaxFlexContent {
grid-columns: minmax(30px, 2fr);
grid-rows: 50px;
}
.gridTwoMaxFlexContent {
grid-columns: minmax(10px, 1fr) minmax(10px, 2fr);
grid-rows: 50px;
}
.gridTwoDoubleMaxFlexContent {
grid-columns: minmax(10px, 0.5fr) minmax(10px, 2fr);
grid-rows: 50px;
}
.gridIgnoreSecondGridItem {
grid-columns: minmax(300px, 3fr) minmax(150px, 1fr);
grid-rows: 50px;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid');">
<p>Test that resolving auto tracks on grid items works properly.</p>
<div style="width: 0px">
<div class="grid gridMinFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
</div>
</div>
<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 40px; height: 10px">
<div class="grid gridMinFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
</div>
</div>
<div style="width: 100px; height: 10px;">
<div class="grid gridMinFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50"></div>
</div>
</div>
<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 40px; height: 10px">
<div class="grid gridMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
</div>
</div>
<div style="width: 100px; height: 10px;">
<div class="grid gridMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridTwoMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
</div>
</div>
<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 60px; height: 10px">
<div class="grid gridTwoMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
</div>
</div>
<div style="width: 120px; height: 10px;">
<div class="grid gridTwoMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridTwoDoubleMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
</div>
</div>
<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 60px; height: 10px">
<div class="grid gridTwoDoubleMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="12" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="48" data-expected-height="50"></div>
</div>
</div>
<div style="width: 120px; height: 10px;">
<div class="grid gridTwoDoubleMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="24" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="96" data-expected-height="50"></div>
</div>
</div>
<!-- Custom test for a corner case. -->
<div style="width: 570px; height: 10px;">
<div class="grid gridIgnoreSecondGridItem">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="420" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div>
</div>
</div>
</body>
</html>