Blitz - WPT: column-subgrid-stretch-001.html

wpt / css / css-grid / grid-lanes / subgrid / grid-subgridded-to-grid-lanes / alignment / column-subgrid-stretch-001.html

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/alignment/column-subgrid-stretch-001.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Lanes Test: column-direction subgrid is always stretched in its subgridded (column) axis</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="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
<link rel="match" href="column-subgrid-stretch-001-ref.html">
<style>
  body {
    margin: 0;
  }
  .grid-lanes {
    display: inline-grid-lanes;
    grid-template-columns: 100px;
  }
  .subgrid {
    display: grid;
    background-color: blue;
    grid-template-columns: subgrid;
    justify-self: baseline;
    height: 100px;
  }
  .vrl {
    writing-mode: vertical-rl;
    grid-template-rows: subgrid;
    grid-template-columns: 100px;
  }
  </style>
</head>
<body>
  <div class="grid-lanes">
    <div class="subgrid" style="width: 50px;"></div>
  </div>
  <div class="grid-lanes">
    <div class="subgrid" style="width: 150px;"></div>
  </div>
  <div class="grid-lanes">
    <div class="subgrid" style="max-width: 50px;"></div>
  </div>
  <div class="grid-lanes">
    <div class="subgrid" style="min-width: 150px;"></div>
  </div>

  <br>

  <div class="grid-lanes">
    <div class="subgrid vrl" style="width: 50px;"></div>
  </div>
  <div class="grid-lanes">
    <div class="subgrid vrl" style="width: 150px;"></div>
  </div>
  <div class="grid-lanes">
    <div class="subgrid vrl" style="max-width: 50px;"></div>
  </div>
  <div class="grid-lanes">
    <div class="subgrid vrl" style="min-width: 150px;"></div>
  </div>

</body>
</html>

/css/css-grid/grid-lanes/subgrid/grid-subgridded-to-grid-lanes/alignment/column-subgrid-stretch-001-ref.html

<!DOCTYPE HTML>
<html><head>
  <meta charset="utf-8">
  <style>
   body {
     margin: 0;
   }
  .grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  </style>
</head>
<body>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>

  <br>

  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>
  <div class="grid"></div>

</body>
</html>