mirror of
https://github.com/servo/servo.git
synced 2025-08-11 00:15:32 +01:00
Update web-platform-tests to revision a63c453b145fbf1ad72dd42c8cbf298fccd39825
This commit is contained in:
WPT Sync Bot
parent
a4fbad2533
commit
b34fc52dc2
169 changed files with 3407 additions and 3041 deletions
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid Layout Test: free space computation with flex lengths.</title>
|
||||
<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-flex-tracks">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=150359">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/css/support/alignment.css">
|
||||
<meta name="assert" content="Test that free space is properly computed after computing fr tracks so that we could use it for content distribution." />
|
||||
|
||||
<style>
|
||||
.freeSpaceForColumnsGrid {
|
||||
grid-template: 100% / minmax(20px, 0.7fr);
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.freeSpaceForRowsGrid {
|
||||
grid-template: minmax(20px, 0.7fr) / 100%;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container { position: relative; }
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
</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');">
|
||||
|
||||
<p>Grid with justify-content: start.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForColumnsGrid justifyContentStart">
|
||||
<div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with justify-content: center.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForColumnsGrid justifyContentCenter">
|
||||
<div class="item" data-offset-x="8" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with justify-content: end.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForColumnsGrid justifyContentEnd">
|
||||
<div class="item" data-offset-x="15" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with align-content: start.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForRowsGrid alignContentStart">
|
||||
<div class="item2" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="70"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with align-content: center.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForRowsGrid alignContentCenter">
|
||||
<div class="item2" data-offset-x="0" data-offset-y="15" data-expected-width="50" data-expected-height="70"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Grid with align-content: end.</p>
|
||||
<div class="container">
|
||||
<div class="grid freeSpaceForRowsGrid alignContentEnd">
|
||||
<div class="item2" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="70"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-columns and flexible lengths.</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 using <flex> values with grid-template-columns works properly." />
|
||||
|
||||
<style>
|
||||
.gridFlexContent {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridMaxFlexContent {
|
||||
grid-template-columns: minmax(30px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridTwoMaxFlexContent {
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(10px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridTwoDoubleMaxFlexContent {
|
||||
grid-template-columns: minmax(10px, 0.5fr) minmax(10px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridIgnoreSecondGridItem {
|
||||
grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridRespectBaseSize {
|
||||
grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridRespectProportions {
|
||||
grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridRespectBaseSizeProportions {
|
||||
grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.gridRespectBaseSizeBeforeProportions {
|
||||
grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
|
||||
grid-template-rows: 50px;
|
||||
}
|
||||
.firstRowThirdColumn {
|
||||
background-color: yellow;
|
||||
grid-column: 3;
|
||||
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" style="position: relative">
|
||||
<div class="grid gridFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XXX</div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-offset-x="30" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 40px; height: 10px">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 100px; height: 10px;">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="100" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></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: 60px; height: 10px">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 120px; height: 10px;">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></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: 60px; height: 10px">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="12" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="48" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 120px; height: 10px;">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="24" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="96" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Custom test for a corner case. -->
|
||||
<div style="width: 570px; height: 10px;">
|
||||
<div class="grid gridIgnoreSecondGridItem">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="420" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track length must be at least its baseSize. -->
|
||||
<div style="width: 100px; height: 10px;">
|
||||
<div class="grid gridRespectBaseSize">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="75" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="25" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track lengths must be proportional to their flex factors.. -->
|
||||
<div style="width: 275px; height: 10px;">
|
||||
<div class="grid gridRespectProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
|
||||
<div style="width: 350px; height: 10px;">
|
||||
<div class="grid gridRespectBaseSizeProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement -->
|
||||
<div style="width: 275px; height: 10px;">
|
||||
<div class="grid gridRespectBaseSizeBeforeProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="150" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and flexible lengths.</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 using <flex> values with grid-template-rows works properly." />
|
||||
|
||||
<style>
|
||||
.gridFlexContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.gridMaxFlexContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(30px, 2fr);
|
||||
}
|
||||
.gridTwoMaxFlexContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
|
||||
}
|
||||
.gridTwoDoubleMaxFlexContent {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
|
||||
}
|
||||
.gridRespectBaseSize {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
|
||||
}
|
||||
.gridRespectProportions {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
|
||||
}
|
||||
.gridRespectBaseSizeProportions {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
|
||||
}
|
||||
.gridRespectBaseSizeBeforeProportions {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
|
||||
}
|
||||
.thirdRowFirstColumn {
|
||||
background-color: yellow;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
</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="grid gridFlexContent constrainedContainer" style="position: relative;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="50">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 10px; height: 40px">
|
||||
<div class="grid gridMaxFlexContent" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 40px">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridMaxFlexContent" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 10px; height: 60px">
|
||||
<div class="grid gridTwoMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 60px">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 120px;">
|
||||
<div class="grid gridTwoMaxFlexContent" 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="80"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 120px;">
|
||||
<div class="grid gridTwoMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
|
||||
<div class="constrainedContainer">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Allow the extra logical space distribution to occur. -->
|
||||
<div style="width: 10px; height: 60px">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></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 gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 120px;">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></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: 120px;">
|
||||
<div class="grid gridTwoDoubleMaxFlexContent">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track length must be at least its baseSize. -->
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridRespectBaseSize" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 100px;">
|
||||
<div class="grid gridRespectBaseSize">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track lengths must be proportional to their flex factors.. -->
|
||||
<div style="width: 10px; height: 275px;">
|
||||
<div class="grid gridRespectProportions" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 275px;">
|
||||
<div class="grid gridRespectProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
|
||||
<div style="width: 10px; height: 350px;">
|
||||
<div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 350px;">
|
||||
<div class="grid gridRespectBaseSizeProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement -->
|
||||
<div style="width: 10px; height: 275px;">
|
||||
<div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 10px; height: 275px;">
|
||||
<div class="grid gridRespectBaseSizeBeforeProportions">
|
||||
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
|
||||
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -54,8 +54,6 @@
|
|||
|
||||
<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>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid Layout Test: flex factor sum smaller than 1.</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size">
|
||||
<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=520477">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that resolving auto tracks on grid items works properly even when the flex factor sum is less than 1." />
|
||||
|
||||
<style>
|
||||
.onlyColumnFractionFlexFactors {
|
||||
grid-template-columns: minmax(0, 0.1fr) minmax(0, 0.2fr) minmax(0, 0.3fr);
|
||||
grid-template-rows: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
.onlyRowFractionFlexFactors {
|
||||
grid-template-columns: 50px;
|
||||
grid-template-rows: minmax(0, 0.1fr) minmax(0, 0.2fr) minmax(0, 0.3fr);
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
.fixedAndfractionFlexFactors {
|
||||
grid-template-columns: 50px minmax(0, 0.2fr) 30px;
|
||||
grid-template-rows: minmax(0, 0.1fr) 50px minmax(0, 0.3fr);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.zeroValueFlexFactor {
|
||||
grid-template-columns: .0fr .2fr .3fr;
|
||||
grid-template-rows: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
.firstRowThirdColumn {
|
||||
background-color: yellow;
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
.secondRowThirdColumn {
|
||||
background-color: yellow;
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
.thirdRowFirstColumn {
|
||||
background-color: brown;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
.thirdRowThirdColumn {
|
||||
background-color: magenta;
|
||||
grid-column: 3;
|
||||
grid-row: 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 style="position: relative;">
|
||||
<div class="grid onlyColumnFractionFlexFactors">
|
||||
<div class="firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
|
||||
<div class="firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
|
||||
<div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="grid onlyRowFractionFlexFactors">
|
||||
<div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
|
||||
<div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
|
||||
<div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="grid zeroValueFlexFactor">
|
||||
<div class="firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
|
||||
<div class="firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
|
||||
<div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div class="grid fixedAndfractionFlexFactors">
|
||||
<div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="5"></div>
|
||||
<div class="firstRowSecondColumn" data-expected-width="4" data-expected-height="5"></div>
|
||||
<div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="5"></div>
|
||||
<div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="secondRowSecondColumn" data-expected-width="4" data-expected-height="50"></div>
|
||||
<div class="secondRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
|
||||
<div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
|
||||
<div class="thirdRowSecondColumn" data-expected-width="4" data-expected-height="15"></div>
|
||||
<div class="thirdRowThirdColumn" data-expected-width="30" data-expected-height="15"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: no crash with adding positioned grid items</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="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=273898">
|
||||
<meta name="assert" content="Test that adding grid items when some of them are positioned does not crash." />
|
||||
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div class="absolute"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var grid = document.getElementById("grid");
|
||||
grid.offsetTop;
|
||||
var newItem1 = document.createElement("div");
|
||||
grid.appendChild(newItem1);
|
||||
var newItem2 = document.createElement("div");
|
||||
newItem2.className = "absolute";
|
||||
grid.appendChild(newItem2);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: no crash with positioned block grid items</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="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=273898">
|
||||
<meta name="assert" content="Test that adding a positioned block grid item after an inline grid item does not crash." />
|
||||
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
|
||||
embed {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="grid">
|
||||
test
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var grid = document.getElementById("grid");
|
||||
grid.offsetTop;
|
||||
var embed = document.createElement("embed");
|
||||
embed.setAttribute("type", "image/png");
|
||||
grid.appendChild(embed);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-fill columns</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-column-gap">
|
||||
<link rel="help" href="https://crbug.com/619930">
|
||||
<link rel="help" href="https://crbug.com/589460">
|
||||
<meta name="assert" content="Check that auto-fill columns are properly computed in a grid container"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
border: 2px solid magenta;
|
||||
width: 200px;
|
||||
position: relative;
|
||||
justify-content: start;
|
||||
grid-auto-columns: 157px;
|
||||
grid-auto-rows: 25px;
|
||||
}
|
||||
|
||||
.gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fill, 30px [autobar]); }
|
||||
.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); }
|
||||
.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
|
||||
.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
|
||||
.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; }
|
||||
.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
|
||||
|
||||
.item { background-color: cyan; }
|
||||
|
||||
.gap { grid-column-gap: 20px; }
|
||||
|
||||
</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 repeat(auto-fill, ) syntax works as expected.</p>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat">
|
||||
<div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat">
|
||||
<div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap">
|
||||
<div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-offset-y="0" data-expected-width="357" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridOnlyAutoRepeat gap">
|
||||
<div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="100" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore">
|
||||
<div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" data-offset-y="0" data-expected-width="297" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedBefore gap">
|
||||
<div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x="377" data-offset-y="0" data-expected-width="157" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="185" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-column: first / last 2" data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter">
|
||||
<div class="item" style="grid-column: last 2 / foo" data-offset-x="60" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="130" data-offset-y="0" data-expected-width="222" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixedAfter gap">
|
||||
<div class="item" style="grid-column: first / foo" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed">
|
||||
<div class="item" style="grid-column: autofoo / end" data-offset-x="100" data-offset-y="0" data-expected-width="95" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed gap">
|
||||
<div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoRepeatAndFixed gap">
|
||||
<div class="item" style="grid-column: autobar / -1" data-offset-x="175" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-column: foo 3 / 4 bar" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames">
|
||||
<div class="item" style="grid-column: -6 / span 2 start" data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-column: -4 / -2" data-offset-x="40" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-column: bar / foo 2" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleNames gap">
|
||||
<div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleTracks">
|
||||
<div class="item" style="grid-column: a / 2 c" data-offset-x="20" data-offset-y="0" data-expected-width="84" data-expected-height="25"></div>
|
||||
<div class="item" style="grid-column: 3 / e; grid-row: 2;" data-offset-x="52" data-offset-y="25" data-expected-width="72" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridMultipleTracks gap">
|
||||
<div class="item" style="grid-column: a / c" data-offset-x="40" data-offset-y="0" data-expected-width="32" data-expected-height="25"></div>
|
||||
<div class="item" style="grid-column: 3 / last; grid-row: 2;" data-offset-x="92" data-offset-y="25" data-expected-width="115" data-expected-height="25"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<style>
|
||||
|
||||
.grid {
|
||||
width: 100px;
|
||||
grid: repeat(5, 20px) / repeat(4, 25px);
|
||||
justify-content: start;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p>
|
||||
|
||||
<pre id="log">grid: 20px 20px 20px 20px 20px / 25px 25px 25px 25px;</pre>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="grid" class="grid">
|
||||
<div class="item" style="grid-area: 1 / 1;"></div>
|
||||
<div class="item" style="grid-area: 2 / 2;"></div>
|
||||
<div class="item" style="grid-area: 3 / 3;"></div>
|
||||
<div class="item" style="grid-area: 4 / 4;"></div>
|
||||
<div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: auto-repeat tracks on a positioned grid container.</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
|
||||
<link rel="issue" href="https://crbug.com/624301"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/>
|
||||
<link rel="match" href="grid-auto-repeat-positioned-container-001-ref.html"/>
|
||||
<meta name="assert" content="Checks that auto repeat tracks are properly computed for a positioned grid container with a definite width and height."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
grid: repeat(auto-fill, 20px) / repeat(auto-fill, 25px);
|
||||
justify-content: start;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p>
|
||||
|
||||
<pre id="log"></pre>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="grid" class="grid">
|
||||
<div class="item" style="grid-area: 1 / 1;"></div>
|
||||
<div class="item" style="grid-area: 2 / 2;"></div>
|
||||
<div class="item" style="grid-area: 3 / 3;"></div>
|
||||
<div class="item" style="grid-area: 4 / 4;"></div>
|
||||
<div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var log = document.getElementById("log");
|
||||
|
||||
var grid = document.getElementById("grid");
|
||||
var computedStyle = getComputedStyle(grid);
|
||||
|
||||
log.innerHTML = "grid: " + computedStyle.getPropertyValue("grid-template-rows") + " / " + computedStyle.getPropertyValue("grid-template-columns") + ";";
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue