Blitz - WPT: row-subgrid-extra-margin-006.html

wpt / css / css-grid / grid-lanes / subgrid / grid-subgridded-to-grid-lanes / track-sizing / row-subgrid-extra-margin-006.html

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/track-sizing/row-subgrid-extra-margin-006.html

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>CSS Grid Lanes Test: Subgrid with no grid items accommodates gutter size and padding</title>
<link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
<link rel="match" href="row-subgrid-extra-margin-006-ref.html">
<style>
.wrapper {
  width: 110px;
  height: 104px;
  background: red;
}
.grid-lanes {
  display: inline-grid-lanes;
  grid-template-rows: repeat(2, auto);
  background: red;
}
.subgrid {
  display: grid;
  grid-template: subgrid / auto;
  grid-template-columns: auto auto auto;
  background: green;
  padding: 11px 3px 9px 7px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
<div class="wrapper">
<!--
  Grid lanes container height = 104px (2 rows of 52px each).

  Each leaf is a span-1 subgrid nested two levels deep (leaf inside
  inner1 or inner2 inside outer). The padding from every level of the
  chain contributes to the leaf's margin. The leaf with the largest
  total margin contribution ends up at:
    leaf's pad-T (11) + inner's pad-T (11) + outer's pad-T (11) on
    the start side, plus leaf's pad-B (9) and half of outer's
    row-gap (20/2 = 10) on the end side, for a total of 52.

  Per the WG resolution at
  https://github.com/w3c/csswg-drafts/issues/10926, every subgrid in
  an auto-placed grid-lanes chain must accommodate its margin
  contribution at every row it could land in. Every row ends up
  sized to the dominant leaf's 52px:
    2 rows * 52px = 104px.
-->
  <div class="grid-lanes">
    <div class="subgrid" style="grid-row: span 2; gap: 20px 10px">
      <div class="subgrid" style="grid-row: span 2;">
        <div class="subgrid"></div>
        <div class="subgrid"></div>
        <div class="subgrid"></div>
        <div class="subgrid"></div>
      </div>
      <div class="subgrid" style="grid-row: span 2;">
        <div class="subgrid"></div>
        <div class="subgrid"></div>
        <div class="subgrid"></div>
        <div class="subgrid"></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/track-sizing/row-subgrid-extra-margin-006-ref.html

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
<div style="width: 110px; height: 104px; background: green;"></div>
</html>