92 lines
3.8 KiB
HTML
92 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<script src="../../resources/check-layout.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
.grid {
|
|
position: relative;
|
|
width: 400px;
|
|
height: 300px;
|
|
justify-content: stretch;
|
|
align-content: stretch;
|
|
}
|
|
.fixedAndAutoTracks {
|
|
grid-template-columns: 80px auto 100px;
|
|
grid-template-rows: auto 100px auto;
|
|
}
|
|
.flexibleAndAutoTracks {
|
|
grid-template-columns: .5fr auto .5fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onload="checkLayout('.grid')">
|
|
|
|
<p>This test checks that Content Distribution alignment applies 'stretch' correctly when using different sized tracks.</p>
|
|
|
|
<div style="position: relative">
|
|
<p>Mixing fixed sized and auto-sized tracks.</p>
|
|
<div class="grid fixedAndAutoTracks" data-expected-width="400" data-expected-height="300">
|
|
<div class="firstRowFirstColumn" data-expected-width="80" data-expected-height="115">
|
|
<div style="width: 20px; height: 40px;"></div>
|
|
</div>
|
|
<div class="firstRowSecondColumn" data-expected-width="220" data-expected-height="115">
|
|
<div style="width: 40px; height: 10px;"></div>
|
|
</div>
|
|
<div class="firstRowThirdColumn" data-expected-width="100" data-expected-height="115">
|
|
<div style="width: 10px; height: 5px;"></div>
|
|
</div>
|
|
<div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="100"></div>
|
|
<div class="secondRowSecondColumn" data-expected-width="220" data-expected-height="100">
|
|
<div style="width: 20px; height: 5px;"></div>
|
|
</div>
|
|
<div class="secondRowThirdColumn" data-expected-width="100" data-expected-height="100"></div>
|
|
<div class="thirdRowFirstColumn" data-expected-width="80" data-expected-height="85">
|
|
<div style="width: 30px; height: 5px;"></div>
|
|
</div>
|
|
<div class="thirdRowSecondColumn" data-expected-width="220" data-expected-height="85">
|
|
<div style="width: 20px; height: 10px;"></div>
|
|
</div>
|
|
<div class="thirdRowThirdColumn" data-expected-width="100" data-expected-height="85">
|
|
<div style="width: 50px; height: 5px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: relative">
|
|
<p>Mixing flexible and auto-sized tracks.</p>
|
|
<div class="grid flexibleAndAutoTracks" data-expected-width="400" data-expected-height="300">
|
|
<div class="firstRowFirstColumn" data-expected-width="180" data-expected-height="40">
|
|
<div style="width: 20px; height: 40px;"></div>
|
|
</div>
|
|
<div class="firstRowSecondColumn" data-expected-width="40" data-expected-height="40">
|
|
<div style="width: 40px; height: 10px;"></div>
|
|
</div>
|
|
<div class="firstRowThirdColumn" data-expected-width="180" data-expected-height="40">
|
|
<div style="width: 10px; height: 5px;"></div>
|
|
</div>
|
|
<div class="secondRowFirstColumn" data-expected-width="180" data-expected-height="250"></div>
|
|
<div class="secondRowSecondColumn" data-expected-width="40" data-expected-height="250">
|
|
<div style="width: 20px; height: 5px;"></div>
|
|
</div>
|
|
<div class="secondRowThirdColumn" data-expected-width="180" data-expected-height="250"></div>
|
|
<div class="thirdRowFirstColumn" data-expected-width="180" data-expected-height="10">
|
|
<div style="width: 30px; height: 5px;"></div>
|
|
</div>
|
|
<div class="thirdRowSecondColumn" data-expected-width="40" data-expected-height="10">
|
|
<div style="width: 20px; height: 10px;"></div>
|
|
</div>
|
|
<div class="thirdRowThirdColumn" data-expected-width="180" data-expected-height="10">
|
|
<div style="width: 50px; height: 5px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|