Blitz - WPT: column-fill-reverse-stacking-alignment-indefinite-size-001.html

wpt / css / css-grid / grid-lanes / alignment / column-fill-reverse-stacking-alignment-indefinite-size-001.html

/css/css-grid/grid-lanes/alignment/column-fill-reverse-stacking-alignment-indefinite-size-001.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Grid Lanes Test: column fill-reverse aligns the entire block of items along the stacking axis with indefinite size</title>
  <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
  <link rel="match" href="column-fill-reverse-stacking-alignment-indefinite-size-001-ref.html">
  <style>
    html, body {
      font: 16px/1 monospace;
      background: white;
    }

    .grid-lanes {
      display: grid-lanes;
      grid-lanes-direction: column fill-reverse;
      grid-template-columns: repeat(2, 80px);
      gap: 4px;
      width: 200px;
      border: 1px solid;
    }

    item {
      display: block;
      width: 40px;
      height: 26px;
      color: white;
      background: #2ca02c;
    }
  </style>
</head>
<!-- Align-content moves all tracks along the block axis.
 When the height of a Grid-Lanes container is undefined, we default to use the stacking axis size (which, in this case, is the block axis).
 When we try to align, the content will look like it's not moving at all, since the content fills the entire block size of the container.
 -->
<body>
  <div class="grid-lanes" style="align-content: start;">
    <item>1</item>
    <item>2</item>
    <item>3</item>
    <item>4</item>
  </div>

  <div class="grid-lanes" style="align-content: center;">
    <item>1</item>
    <item>2</item>
    <item>3</item>
    <item>4</item>
  </div>

  <div class="grid-lanes" style="align-content: end;">
    <item>1</item>
    <item>2</item>
    <item>3</item>
    <item>4</item>
  </div>
</body>
</html>

/css/css-grid/grid-lanes/alignment/column-fill-reverse-stacking-alignment-indefinite-size-001-ref.html

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body {
      font: 16px/1 monospace;
      background: white;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(2, 80px);
      gap: 4px;
      width: 200px;
      border: 1px solid;
    }

    .col {
      display: flex;
      flex-direction: column-reverse;
      gap: 4px;
    }

    item {
      display: block;
      width: 40px;
      height: 26px;
      color: white;
      background: #2ca02c;
    }
  </style>
</head>
<body>
  <div class="container" style="align-content: start;">
    <div class="col">
      <item>1</item>
      <item>3</item>
    </div>
    <div class="col">
      <item>2</item>
      <item>4</item>
    </div>
  </div>

  <div class="container" style="align-content: center;">
    <div class="col">
      <item>1</item>
      <item>3</item>
    </div>
    <div class="col">
      <item>2</item>
      <item>4</item>
    </div>
  </div>

  <div class="container" style="align-content: end;">
    <div class="col">
      <item>1</item>
      <item>3</item>
    </div>
    <div class="col">
      <item>2</item>
      <item>4</item>
    </div>
  </div>
</body>
</html>