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

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

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/track-sizing/column-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="column-subgrid-extra-margin-006-ref.html">
<style>
.wrapper {
  width: 116px;
  height: 100px;
  background: red;
}
.grid-lanes {
  display: inline-grid-lanes;
  grid-template-columns: repeat(4, auto);
  background: red;
}
.subgrid {
  display: grid;
  grid-template: auto / subgrid;
  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 width = 116px (4 columns of 29px 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-L (7) + inner's pad-L (7) + outer's pad-L (7) on the
    start side, plus the leaf's pad-R (3) and half of outer's
    column-gap (10/2 = 5) on the end side, for a total of 29.

  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 column it could land in. Every column ends
  up sized to the dominant leaf's 29px:
    4 columns * 29px = 116px.
-->
  <div class="grid-lanes">
    <div class="subgrid" style="grid-column: span 4; gap: 20px 10px">
      <div class="subgrid" style="grid-column: span 2;">
        <div class="subgrid"></div>
        <div class="subgrid"></div>
        <div class="subgrid"></div>
        <div class="subgrid"></div>
        <div class="subgrid"></div>
      </div>
      <div class="subgrid" style="grid-column: span 2;">
        <div class="subgrid"></div>
        <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/column-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: 116px; height: 100px; background: green;"></div>
</html>