288 lines
17 KiB
HTML
288 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<style>
|
|
.gridAutoAutoContent {
|
|
grid-template-columns: 50px 100px;
|
|
grid-template-rows: auto auto;
|
|
}
|
|
|
|
.gridFixedAutoContent {
|
|
grid-template-columns: 50px 100px;
|
|
grid-template-rows: 10px auto;
|
|
}
|
|
|
|
.gridMinMaxMin {
|
|
grid-template-columns: 50px 100px;
|
|
grid-template-rows: minmax(min-content, 50px) minmax(max-content, 140px);
|
|
}
|
|
|
|
.gridMinMaxMax {
|
|
grid-template-columns: 50px 100px;
|
|
grid-template-rows: minmax(50px, min-content) minmax(40px, max-content);
|
|
}
|
|
</style>
|
|
<script src="../../resources/check-layout.js"></script>
|
|
<body onload="checkLayout('.grid');">
|
|
|
|
<p>Test that resolving tracks on spanning grid items works properly.</p>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridAutoAutoContent">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridAutoAutoContent">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Allow the extra logical space distribution to occur. -->
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridAutoAutoContent">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridAutoAutoContent">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid gridAutoAutoContent">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid gridAutoAutoContent">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridFixedAutoContent">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridFixedAutoContent">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="10"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Allow the extra logical space distribution to occur. -->
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridFixedAutoContent">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridFixedAutoContent">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="10"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid gridFixedAutoContent">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid gridFixedAutoContent">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="10"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="20"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridMinMaxMin" style="height: 100%">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridMinMaxMin">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridMinMaxMin" style="height: 100%">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="30">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="15"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridMinMaxMin">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Allow the extra logical space distribution to occur. -->
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridMinMaxMin" style="height: 100%">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridMinMaxMin">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridMinMaxMin" style="height: 100%">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="30"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="30"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridMinMaxMin">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid gridMinMaxMin">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="190">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid gridMinMaxMin">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="190">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="140"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="140"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridMinMaxMax">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="90">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridMinMaxMax">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="90">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Allow the extra logical space distribution to occur. -->
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridMinMaxMax">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="90">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: 50px; height: 60px">
|
|
<div class="grid gridMinMaxMax">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="90">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid gridMinMaxMax">
|
|
<div class="sizedToGridArea bothRowFirstColumn" data-expected-width="50" data-expected-height="90">XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="unconstrainedContainer">
|
|
<div class="grid gridMinMaxMax">
|
|
<div class="sizedToGridArea bothRowBothColumn" data-expected-width="150" data-expected-height="90">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
|
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
|
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
|
|
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|