mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision 08fb3cceabe444c32264fdb44db50672ebea8610
This commit is contained in:
WPT Sync Bot
parent
ce9f22a5e4
commit
b74bf3ef9a
152 changed files with 4135 additions and 695 deletions
|
|
@ -0,0 +1,176 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: grid size with explicit grid-template-areas.</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition"/>
|
||||
<link rel="issue" href="https://crrev.com/603160"/>
|
||||
<meta name="assert" content="Test ensures that the explicit grid size is set by the maximum of the grid-template-columns|rows properties and grid-template-areas."/>
|
||||
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
grid-auto-columns: 10px;
|
||||
grid-auto-rows: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.oneColumnOneRow {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
|
||||
.twoColumnsOneRow {
|
||||
grid-template-columns: 50px 50px;
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
|
||||
.oneColumnTwoRows {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: 50px 50px;
|
||||
}
|
||||
|
||||
.twoColumnsTwoRows {
|
||||
grid-template-columns: 50px 50px;
|
||||
grid-template-rows: 50px 50px;
|
||||
}
|
||||
|
||||
.oneColumnOneRowAreas {
|
||||
grid-template-areas: "a";
|
||||
}
|
||||
|
||||
.twoColumnsOneRowAreas {
|
||||
grid-template-areas: "a b";
|
||||
}
|
||||
|
||||
.oneColumnTwoRowsAreas {
|
||||
grid-template-areas: "a"
|
||||
"b";
|
||||
}
|
||||
|
||||
.twoColumnsTwoRowsAreas {
|
||||
grid-template-areas: "a b"
|
||||
"c d";
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
<div class="grid">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid oneColumnOneRow">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid oneColumnOneRowAreas">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid oneColumnTwoRows">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid oneColumnTwoRowsAreas">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid twoColumnsOneRow">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid twoColumnsOneRowAreas">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid twoColumnsTwoRows">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid twoColumnsTwoRowsAreas">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="10" data-offset-y="10" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid oneColumnOneRow twoColumnsTwoRowsAreas">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="50" data-offset-y="0" data-expected-width="10" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="10">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid twoColumnsTwoRows oneColumnOneRowAreas">
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
<div class="autoRowAutoColumn"
|
||||
data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-columns and minmax sizes.</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that resolving auto tracks on grid items inside containers using minmax() with grid-template-columns works properly." />
|
||||
|
||||
<style>
|
||||
.gridMaxMaxContent {
|
||||
grid-template-columns: minmax(10px, max-content) minmax(10px, 1fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
|
||||
.gridMinMinContent {
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(min-content, 50px);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
|
||||
.gridWithIntrinsicSizeBiggerThanFlex {
|
||||
grid-template-columns: minmax(min-content, 0.5fr) minmax(18px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
|
||||
.gridShrinkBelowItemsIntrinsicSize {
|
||||
grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
|
||||
.gridWithNonFlexingItems {
|
||||
grid-template-columns: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
|
||||
.firstRowThirdColumn {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
.firstRowFourthColumn {
|
||||
grid-column: 4;
|
||||
grid-row: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMaxMaxContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XXXXX</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 40px; height: 10px">
|
||||
<div class="grid gridMaxMaxContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXXXX</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 110px; height: 10px;">
|
||||
<div class="grid gridMaxMaxContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="60" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMinMinContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50">XX XX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 40px; height: 10px">
|
||||
<div class="grid gridMinMinContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="30" data-expected-height="50">XX XX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 110px; height: 10px;">
|
||||
<div class="grid gridMinMinContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50">XX XX</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50">XX XX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="width: 220px; height: 10px;">
|
||||
<div class="grid gridWithIntrinsicSizeBiggerThanFlex">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="200" data-expected-height="50">
|
||||
<div style="display: inline-block; width: 200px;"></div>
|
||||
</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="width: 120px; height: 10px;">
|
||||
<div class="grid gridShrinkBelowItemsIntrinsicSize">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50">
|
||||
<div style="display: inline-block; width: 200px;"></div>
|
||||
</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50">XXXXXXXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- No space available for the <flex> -->
|
||||
<div style="width: 220px; height: 10px;">
|
||||
<div class="grid gridWithNonFlexingItems">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
|
||||
<div style="display: inline-block; width: 100px;"></div>
|
||||
</div>
|
||||
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="100" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
|
||||
<div class="sizedToGridArea firstRowFourthColumn" data-expected-width="20" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
|
||||
<div style="width: 380px; height: 10px;">
|
||||
<div class="grid gridWithNonFlexingItems">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
|
||||
<div style="display: inline-block; width: 100px;"></div>
|
||||
</div>
|
||||
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
|
||||
<div class="sizedToGridArea firstRowFourthColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 400px; height: 10px;">
|
||||
<div class="grid gridWithNonFlexingItems">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
|
||||
<div style="display: inline-block; width: 100px;"></div>
|
||||
</div>
|
||||
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
|
||||
<div class="sizedToGridArea firstRowFourthColumn" data-expected-width="60" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and minmax sizes.</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that resolving auto tracks on grid items inside containers using minmax() with grid-template-rows works properly." />
|
||||
|
||||
<style>
|
||||
.gridMaxMaxContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(10px, max-content) minmax(10px, 1fr);
|
||||
}
|
||||
|
||||
.gridMinMinContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(10px, 1fr) minmax(min-content, 50px);
|
||||
}
|
||||
|
||||
.gridWithIntrinsicSizeBiggerThanFlex {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(min-content, 0.5fr) minmax(18px, 2fr);
|
||||
}
|
||||
|
||||
.gridShrinkBelowItemsIntrinsicSize {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr);
|
||||
}
|
||||
|
||||
.gridWithNonFlexingItems {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr);
|
||||
}
|
||||
|
||||
.thirdRowFirstColumn {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
.fourthRowFirstColumn {
|
||||
grid-column: 1;
|
||||
grid-row: 4;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script type="text/javascript">
|
||||
setup({ explicit_done: true });
|
||||
</script>
|
||||
|
||||
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
||||
|
||||
<p>Test that resolving auto tracks on grid items works properly.</p>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMaxMaxContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 10px; height: 40px">
|
||||
<div class="grid gridMaxMaxContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 40px">
|
||||
<div class="grid gridMaxMaxContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 110px;">
|
||||
<div class="grid gridMaxMaxContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 110px;">
|
||||
<div class="grid gridMaxMaxContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMinMinContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMinMinContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 10px; height: 40px">
|
||||
<div class="grid gridMinMinContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMinMinContent" style="height: 40px">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 110px;">
|
||||
<div class="grid gridMinMinContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 110px;">
|
||||
<div class="grid gridMinMinContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 60px;">
|
||||
<div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
|
||||
<div style="width: 10px; height: 60px;">
|
||||
<div class="grid gridWithIntrinsicSizeBiggerThanFlex">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 60px;">
|
||||
<div class="grid gridShrinkBelowItemsIntrinsicSize" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 60px;">
|
||||
<div class="grid gridShrinkBelowItemsIntrinsicSize">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No space available for the <flex> -->
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridWithNonFlexingItems" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridWithNonFlexingItems">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
|
||||
<div style="width: 10px; height: 180px;">
|
||||
<div class="grid gridWithNonFlexingItems" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 180px;">
|
||||
<div class="grid gridWithNonFlexingItems">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 400px;">
|
||||
<div class="grid gridWithNonFlexingItems" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 400px;">
|
||||
<div class="grid gridWithNonFlexingItems">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
|
||||
<div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue