Google Git
Sign in
webkit / WebKit / 6b7c45f751131450b1675ef5b4b89fb3a0e35aba / . / LayoutTests / fast / css-grid-layout / maximize-tracks-definite-indefinite-width.html
blob: 14a705c85eb73b0ad68da2ff2a910c2b655796cf [file] [log] [blame]
<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<style>
div.grid > div { font: 10px/1 Ahem; }
.max-width-35 { max-width: 35px; }
.min-width-35 { min-width: 35px; }
.min-width-50 { min-width: 50px; }
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid')">
<h2>Check the behavior of grids under max-content constraints.</h2>
<div class="max-content max-width-35">
<div class="grid" data-expected-width="35" data-expected-height="20">
<div data-expected-width="35" data-expected-height="20">XX X</div>
</div>
</div>
<div class="max-content max-width-min-content">
<div class="grid" data-expected-width="20" data-expected-height="20">
<div data-expected-width="20" data-expected-height="20">XX X</div>
</div>
</div>
<div class="max-content">
<div class="grid max-width-35" data-expected-width="35" data-expected-height="20">
<div data-expected-width="35" data-expected-height="20">XX X</div>
</div>
</div>
<div class="max-content">
<div class="grid max-width-min-content" data-expected-width="20" data-expected-height="20">
<div data-expected-width="20" data-expected-height="20">XX X</div>
</div>
</div>
<div class="max-content">
<div class="grid" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
</div>
<div class="max-content">
<div class="grid max-width-fill-available" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
</div>
<div class="max-content max-width-fill-available">
<div class="grid" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
</div>
<div class="grid max-content max-width-35" data-expected-width="35" data-expected-height="20">
<div data-expected-width="35" data-expected-height="20">XX X</div>
</div>
<div class="grid max-content max-width-min-content" data-expected-width="20" data-expected-height="20">
<div data-expected-width="20" data-expected-height="20">XX X</div>
</div>
<div class="grid max-content" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<br>
<h2>Check the behavior of grids under min-content contstraints.</h2>
<div class="min-content min-width-50">
<div class="grid justifyContentStart" data-expected-width="50" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid min-content" data-expected-width="20" data-expected-height="20">
<div data-expected-width="20" data-expected-height="20">XX X</div>
</div>
<div class="grid min-content min-width-35" data-expected-width="35" data-expected-height="20">
<div data-expected-width="35" data-expected-height="20">XX X</div>
</div>
<div class="grid min-content min-width-fit-content" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
</div>
<div style="width: 200px;">
<div class="grid justifyContentStart min-content min-width-fill-available" data-expected-width="200" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
</div>
<div class="grid min-content" data-expected-width="20" data-expected-height="20">
<div data-expected-width="20" data-expected-height="20">XX X</div>
</div>
<div class="grid min-content min-width-min-content" data-expected-width="20" data-expected-height="20">
<div data-expected-width="20" data-expected-height="20">XX X</div>
</div>
<div class="grid min-content min-width-35" data-expected-width="35" data-expected-height="20">
<div data-expected-width="35" data-expected-height="20">XX X</div>
</div>
<div class="grid min-content min-width-max-content" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid justifyContentStart min-content min-width-50" data-expected-width="50" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<br>
<h2>Check the behavior of grids with definite available space.</h2>
<div style="width: 100px;">
<div class="grid justifyContentStart" data-expected-width="100" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
</div>
<div class="max-width-35" style="width: 100px;">
<div class="grid" data-expected-width="35" data-expected-height="20">
<div data-expected-width="35" data-expected-height="20">XX X</div>
</div>
</div>
<div style="width: 100px;">
<div class="grid max-width-35" data-expected-width="35" data-expected-height="20">
<div data-expected-width="35" data-expected-height="20">XX X</div>
</div>
</div>
<div class="grid justifyContentStart" style="width: 90px;" data-expected-width="90" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid justifyContentStart min-width-50" style="width: 10px;" data-expected-width="50" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="min-width-50" style="width: 20px;">
<div class="grid justifyContentStart" data-expected-width="50" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
</div>
<div style="width: 100px;">
<div class="grid" style="width: 37%;" data-expected-width="37" data-expected-height="20">
<div data-expected-width="37" data-expected-height="20">XX X</div>
</div>
<div class="grid justifyContentStart min-width-50" style="width: 37%;" data-expected-width="50" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid min-width-35" style="width: 37%;" data-expected-width="37" data-expected-height="20">
<div data-expected-width="37" data-expected-height="20">XX X</div>
</div>
</div>
<br>
<h2>Check the behavior of grids with indefinite available space.</h2>
<div class="fit-content">
<div class="grid" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid min-width-35" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid max-width-min-content" data-expected-width="20" data-expected-height="20">
<div data-expected-width="20" data-expected-height="20">XX X</div>
</div>
<div class="grid fit-content" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid fill-available" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
</div>
<div class="fit-content min-width-50">
<div class="grid justifyContentStart" data-expected-width="50" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid justifyContentStart min-width-35" data-expected-width="50" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid max-width-min-content" data-expected-width="20" data-expected-height="20">
<div data-expected-width="20" data-expected-height="20">XX X</div>
</div>
<div class="grid fit-content" data-expected-width="40" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
<div class="grid justifyContentStart fill-available" data-expected-width="50" data-expected-height="10">
<div data-expected-width="40" data-expected-height="10">XX X</div>
</div>
</div>
<div style="width: 25px;">
<div class="grid fit-content" data-expected-width="25" data-expected-height="20">
<div data-expected-width="25" data-expected-height="20">XX X</div>
</div>
<div class="grid fill-available" data-expected-width="25" data-expected-height="20">
<div data-expected-width="25" data-expected-height="20">XX X</div>
</div>
<div class="grid fit-content min-width-35" data-expected-width="35" data-expected-height="20">
<div data-expected-width="35" data-expected-height="20">XX X</div>
</div>
<div class="grid fit-content max-width-min-content" data-expected-width="20" data-expected-height="20">
<div data-expected-width="20" data-expected-height="20">XX X</div>
</div>
</div>