Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/alignment/grid-content-distribution-stretch-different-sized-tracks-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="assert" content="justify-content and align-content 'stretch' grow only the auto-sized tracks, sharing the free space equally; fixed tracks keep their size, and flexible tracks leave no free space to distribute.">
<link rel="stylesheet" href="/css/support/grid.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.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>
<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>