mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/fonts/ahem.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.block {
|
||||
background-color: grey;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.item {
|
||||
font: 15px/1 Ahem;
|
||||
background-color: green;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
margin: 4px 8px 12px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="block">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block verticalRL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block verticalLR">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block directionRTL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block directionRTL verticalRL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="block directionRTL verticalLR">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: Grid items and logical margins</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<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-grid-1/#propdef-grid-row">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
|
||||
<link rel="match" href="grid-item-margins-and-writing-modes-001-ref.html">
|
||||
<meta name="assert" content="This test ensures that the border, margin, and padding
|
||||
combining with RTL direction and different writing-modes generate the proper layout."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/fonts/ahem.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-columns: 80px;
|
||||
}
|
||||
|
||||
.block {
|
||||
background-color: grey;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.item {
|
||||
font: 15px/1 Ahem;
|
||||
background-color: green;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
margin: 4px 8px 12px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="grid block">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block verticalRL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block verticalLR">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block directionRTL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block directionRTL verticalRL">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
<div class="grid block directionRTL verticalLR">
|
||||
<div class="item">X</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid Layout Test: Remove a first child in grid items</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item">
|
||||
<link rel="stylesheet" href="/css/support/grid.css"/>
|
||||
<link rel="match" href="../reference/grid-item-script-001-ref.html">
|
||||
<meta name="assert" content="This test ensures that removing a first child element in grid items doesn't crash.">
|
||||
<link rel="stylesheet" href="/css/support/grid.css"/>
|
||||
<div class="grid">
|
||||
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='190'>
|
||||
<polygon points='100,10 40,180 190,60 10,60 160,180' style='fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;'>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var grid = document.getElementsByClassName("grid")[0];
|
||||
grid.offsetTop;
|
||||
while (grid.firstChild)
|
||||
grid.removeChild(grid.firstChild);
|
||||
grid.offsetTop;
|
||||
grid.innerHTML = "Test passes if it doesn't crash.";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.item {
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
background: salmon;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>This test passes if it has the same output than the reference. As spec states that child text runs containing only white space should not rendered (just as if its text nodes were display:none).</p>
|
||||
<div class="grid">
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid : Whitespace in grid item</title>
|
||||
<link rel="author" title="Christian Biesinger" href="mailto:cbiesinger@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
|
||||
<link rel="match" href="whitespace-in-grid-item-001-ref.html">
|
||||
<link rel="help" href="https://codereview.chromium.org/16888008">
|
||||
<meta name="assert" content="Grid items shouldn't be created for white spaces."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<style>
|
||||
.grid {
|
||||
white-space: pre;
|
||||
}
|
||||
.item {
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
background: salmon;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>This test passes if it has the same output than the reference. As spec states that child text runs containing only white space should not rendered (just as if its text nodes were display:none).</p>
|
||||
<div class="grid">
|
||||
|
||||
<div class="item"></div> 	
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Grid: intrinsic width of fixed-width grid items.</title>
|
||||
<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/>
|
||||
<meta name="assert" content="This test ensures that scrollbar width is not accounted for fixed-width grid items' intrinsic width."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-columns: 400px 500px;
|
||||
grid-template-rows: 200px 300px;
|
||||
}
|
||||
|
||||
.gridItemScrollOverflow {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
</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 class="grid">
|
||||
<div class="firstRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="firstRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
|
||||
<div class="secondRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
|
||||
<!-- Grid item itself being a grid container-->
|
||||
<div class="grid secondRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<style>
|
||||
.cell {
|
||||
width: 50px;
|
||||
height: auto;
|
||||
min-height: 50px
|
||||
}
|
||||
|
||||
.invisibleFont {
|
||||
color: lime;
|
||||
}
|
||||
|
||||
.floatLeft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.clearLeft {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div>
|
||||
|
||||
<div>
|
||||
<div class="cell relative floatLeft firstRowFirstColumn">
|
||||
<div>Float</div>
|
||||
<div>Float</div>
|
||||
<div>Float</div>
|
||||
<div>Float</div>
|
||||
</div>
|
||||
<div class="cell floatLeft firstRowSecondColumn">
|
||||
<div class="invisibleFont">Float</div>
|
||||
<div class="invisibleFont">Float</div>
|
||||
<div class="invisibleFont">Float</div>
|
||||
<div class="invisibleFont">Float</div>
|
||||
</div>
|
||||
<div class="cell floatLeft clearLeft secondRowFirstColumn"></div>
|
||||
<div class="cell floatLeft secondRowSecondColumn"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Grid Layout Test: floats do not protrude content onto grid items</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100">
|
||||
<link rel="match" href="grid-floats-no-intrude-002-ref.html">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
|
||||
<meta name="assert" content="Test that a grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item." />
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
grid-auto-columns: minmax(50px, max-content);
|
||||
grid-auto-rows: minmax(50px, max-content);
|
||||
}
|
||||
|
||||
.floatChild {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div>
|
||||
|
||||
<div class="grid fit-content">
|
||||
<div class="firstRowFirstColumn">
|
||||
<div class="floatChild">Float</div>
|
||||
<div class="floatChild">Float</div>
|
||||
<div class="floatChild">Float</div>
|
||||
<div class="floatChild">Float</div>
|
||||
</div>
|
||||
<div class="firstRowSecondColumn"></div>
|
||||
<div class="secondRowFirstColumn"></div>
|
||||
<div class="secondRowSecondColumn"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
|
||||
<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div>
|
||||
|
||||
<div style="float: left">
|
||||
<div><p>XXXXX</p></div>
|
||||
<div style="float:left; margin:20px 0px;">XXXXX</div>
|
||||
<div><p style="float:left; clear:both;">XXXXX</p></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid Layout Test: grid items not collapsing</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100">
|
||||
<link rel="match" href="grid-margins-no-collapse-002-ref.html">
|
||||
<link rel="stylesheet" href="/css/support/grid.css">
|
||||
<meta name="assert" content="Test that grid item's margins do not collapse with its content's margins." />
|
||||
|
||||
<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div>
|
||||
|
||||
<div style="display: grid;">
|
||||
<div><p>XXXXX</p></div>
|
||||
<div style="margin:20px 0px;">XXXXX</div>
|
||||
<div><p>XXXXX</p></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: track sizing algo with size restrictions and intrinsic sizes.</title>
|
||||
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#layout-algorithm"/>
|
||||
<meta name="assert" content="This test ensures that fr tracks are properly sized whenever grid has intrinsic sizes."/>
|
||||
<link rel="issue" href="https://crbug.com/423743"/>
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
|
||||
<link href="/css/support/height-keyword-classes.css" rel="stylesheet"/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
div { font: 10px/1 Ahem; }
|
||||
</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="container">
|
||||
<div class="grid" data-expected-width="100" data-expected-height="10">
|
||||
<div>XXX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid min-content" data-expected-width="30" data-expected-height="20">
|
||||
<div>XXX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid max-content" data-expected-width="70" data-expected-height="10">
|
||||
<div>XXX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid fit-content" data-expected-width="70" data-expected-height="10">
|
||||
<div>XXX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-content">
|
||||
<div class="grid" data-expected-width="40" data-expected-height="50">
|
||||
<div>XXX XXXX XX X XX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid container" data-expected-width="100" data-expected-height="100">
|
||||
<div style="display: grid; grid-template-columns: 3fr; grid-template-rows: 2fr;" data-expected-width="100" data-expected-height="100">
|
||||
<div>XXX XXXX XX X XX XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid; grid: 1fr 2fr / 2fr 1fr; width: 300px; height: 300px;" data-expected-width="300" data-expected-height="300">
|
||||
<div class="firstRowFirstColumn" style="display: grid; grid: 1fr 3fr / 3fr 1fr;" data-expected-width="200" data-expected-height="100">
|
||||
<div style="border: 2px solid magenta;" data-expected-width="150" data-expected-height="25">XXXX</div>
|
||||
<div class="secondRowSecondColumn" style="border: 2px solid cyan;" data-expected-width="50" data-expected-height="75">XXXX XX XX</div>
|
||||
</div>
|
||||
<div class="secondRowSecondColumn" style="display: grid; grid: 3fr 4fr / 4fr 3fr;" data-expected-width="100" data-expected-height="200">
|
||||
<div style="border: 2px solid lime;" data-expected-width="56" data-expected-height="86">XXX XX X</div>
|
||||
<div class="secondRowSecondColumn" style="border: 2px solid navy;" data-expected-width="44" data-expected-height="114">XXXX XXX XXXX XXX XXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Grid: 'auto' sizes with item's margins</title>
|
||||
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419">
|
||||
<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins."/>
|
||||
<link href="/css/support/grid.css" rel="stylesheet">
|
||||
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.grid {
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.gridItem {
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.marginTop {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.marginBottom {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.borderTop {
|
||||
border-top: 5px solid;
|
||||
}
|
||||
|
||||
.borderBottom {
|
||||
border-bottom: 5px solid;
|
||||
}
|
||||
|
||||
.paddingTop {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.paddingBottom {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</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>
|
||||
<div class="grid fit-content" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem firstRowSecondColumn"></div>
|
||||
<div class="gridItem marginBottom secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid fit-content" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem firstRowSecondColumn"></div>
|
||||
<div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid fit-content" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem firstRowSecondColumn"></div>
|
||||
<div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="grid fit-content" data-expected-width="40" data-expected-height="120">
|
||||
<div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
|
||||
<div class="gridItem firstRowSecondColumn"></div>
|
||||
<div class="gridItem paddingBottom secondRowFirstColumn"></div>
|
||||
<div class="gridItem secondRowSecondColumn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue