wpt / css / css-grid / layout-algorithm / grid-find-fr-size-gutters-002.html

Status: PASS | Duration: 2ms | Subtests: 6/6 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (6/6)

Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)

SubtestStatusMessage
.grid 1PASS
.grid 2PASS
.grid 3PASS
.grid 4PASS
.grid 5PASS
.grid 6PASS

/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html

<!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">
<link rel="help" href="https://drafts.csswg.org/css-grid/#gutters">
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size">
<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>