Google Git
Sign in
nest-open-source / manifest_repos / chromium_src / 1389d67935ffbffe8a70c1fa06867f6cf7ecf464 / . / chromium / src / third_party / blink / web_tests / fast / css-grid-layout / grid-track-sizing-with-orthogonal-flows.html
blob: 3426cf505e6486c7fba47f309e46d20c7c9af847 [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">
<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.container {
position: relative;
}
.grid {
position: relative;
font: 10px/1 Ahem;
}
.width300 { width: 300px; }
.height200 { height: 200px; }
.minWidthZero { min-width: 0; }
.minWidthFixed { min-width: 50px;}
.minHeightZero { min-height: 0; }
.minHeightFixed { min-height: 50px;}
.firstAndSecondRowSecondColumn {
background-color: lime;
grid-column: 2;
grid-row: 1 / 3;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<p>This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.</p>
<div class="container">
<p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart width300 height200" data-expected-width="300" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart min-content height200" data-expected-width="40" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart max-content height200" data-expected-width="160" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="20">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid width under <b>fit-content</b> constrain and <b>fixed</b> height.<br >All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart fit-content height200" data-expected-width="160" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="20">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br >All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="490">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart max-content width300" data-expected-width="300" data-expected-height="490">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart fit-content width300" data-expected-width="300" data-expected-height="490">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
<!-- Playing with min-{width,height} constrains. -->
<div class="container">
<p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.</p>
<div class="grid itemsStart contentStart width300 height200" data-expected-width="300" data-expected-height="200">
<div class="minWidthZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="minWidthZero verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minWidthZero verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.</p>
<div class="grid itemsStart contentStart min-content height200" data-expected-width="0" data-expected-height="200">
<div class="minWidthZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XX XXX X XXX XX</div>
<div class="minWidthZero verticalLR firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minWidthZero verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.</p>
<div class="grid itemsStart contentStart max-content height200" data-expected-width="160" data-expected-height="200">
<div class="minWidthZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="120" data-expected-height="20">XX XXX X XXX XX</div>
<div class="minWidthZero verticalLR firstRowSecondColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minWidthZero verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.</p>
<div class="grid itemsStart contentStart min-content width300 " data-expected-width="300" data-expected-height="490">
<div class="minHeightZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="minHeightZero verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minHeightZero verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.</p>
<div class="grid itemsStart contentStart max-content width300" data-expected-width="300" data-expected-height="490">
<div class="minHeightZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="minHeightZero verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minHeightZero verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.</p>
<div class="grid itemsStart contentStart width300 height200" data-expected-width="300" data-expected-height="200">
<div class="minWidthFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.</p>
<div class="grid itemsStart contentStart min-content height200" data-expected-width="100" data-expected-height="200">
<div class="minWidthFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">XX XXX X XXX XX</div>
<div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid width under <b>max-content</b> constrain and fixed height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.<br> .</p>
<div class="grid itemsStart contentStart max-content height200" data-expected-width="200" data-expected-height="200">
<div class="minWidthFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.</p>
<div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="490">
<div class="minHeightFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50">XX XXX X XXX XX</div>
<div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
<p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.</p>
<div class="grid itemsStart contentStart max-content width300" data-expected-width="300" data-expected-height="490">
<div class="minHeightFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50">XX XXX X XXX XX</div>
<div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX XXX</div>
</div>
</div>
</body>