Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html 

<!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>