Blitz - WPT: grid-lanes-subgrid-flex.html

wpt / css / css-grid / grid-lanes / subgrid / grid-lanes-subgridded-to-grid-lanes / track-sizing / grid-lanes-subgrid-flex.html

/css/css-grid/grid-lanes/subgrid/grid-lanes-subgridded-to-grid-lanes/track-sizing/grid-lanes-subgrid-flex.html

<!DOCTYPE HTML>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
  <meta charset="utf-8">
  <title>Verify correct sizing of flex tracks when using subgrid in CSS Grid Lanes</title>
  <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
  <link rel="match" href="grid-lanes-subgrid-flex-ref.html">
  <style>
    grid-lanes {
      display: inline grid-lanes;
      grid-template-columns: 1fr 2fr 3fr;
      border: 1px solid;
      background: lightgrey;
    }

    subgrid {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 2 / span 2;
      background: lightblue;
    }
  </style>
</head>

<body>

<!-- Verify behavior when subgrid is set to grid-lanes too -->
<grid-lanes>
  <item>1</item>
  <subgrid style="display: grid-lanes;">
    <item>2</item>
    <item style="width: 3ch">3</item>
    <item>4</item>
  </subgrid>
  <item>5</item>
</grid-lanes>
</body>
</html>

/css/css-grid/grid-lanes/subgrid/grid-lanes-subgridded-to-grid-lanes/track-sizing/grid-lanes-subgrid-flex-ref.html

<!DOCTYPE HTML>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
  <meta charset="utf-8">
  <title>Verify correct sizing of flex tracks when using subgrid in CSS Grid Lanes</title>
  <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
  <style>
    grid {
      display: inline-grid;
      grid-template-columns: 1fr 2fr 3fr;
      border: 1px solid;
      background: lightgrey;
    }

    subgrid {
      display: grid;
      grid: subgrid / subgrid;
      grid-column: 2 / span 2;
      grid-row: 1 / span 2;
      background: lightblue;
    }
  </style>
</head>

<body>
<grid>
  <item style="width: 3ch">1</item>
  <subgrid>
    <item>2</item>
    <item>3</item>
    <item>4</item>
  </subgrid>
  <item>5</item>
</grid>
</body>
</html>