Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Grid Track Sizing Algorithm Flexible Tracks and Gutters</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<meta name="assert" content="This test checks that the size of flexible tracks is properly computed when the grid container is content based and you have items spanning flexbile tracks that are smaller than the gutter sizes.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.grid {
position: relative;
display: inline-grid;
grid-gap: 50px 100px;
font: 10px/1 Ahem;
margin: 50px;
}
.grid div:nth-child(1) { background: magenta; }
</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 id="log"></div>
<div class="grid" style="grid: 50px 1fr / 100px 1fr;">
<div style="grid-column: span 2;"
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">X</div>
</div>
<div class="grid" style="grid: 50px 1fr / 100px 1fr;">
<div style="grid-row: span 2;"
data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">X</div>
</div>
<div class="grid" style="grid: 50px 1fr / 100px 1fr;">
<div style="grid-column: span 2; grid-row: span 2;"
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">X</div>
</div>
<div class="grid" style="grid: 0px 1fr / 0px 1fr;">
<div style="grid-column: span 2;"
data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0">X</div>
</div>
<div class="grid" style="grid: 0px 1fr / 0px 1fr;">
<div style="grid-row: span 2;"
data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="50">X</div>
</div>
<div class="grid" style="grid: 0px 1fr / 0px 1fr;">
<div style="grid-column: span 2; grid-row: span 2;"
data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">X</div>
</div>