wpt / css / css-grid / grid-lanes / item-placement / dense-packing / column-fill-reverse-dense-packing-definite-size-001.html

Status: FAIL | Duration: 41ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-grid/grid-lanes/item-placement/dense-packing/column-fill-reverse-dense-packing-definite-size-001.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Grid Lanes: Fill-reverse with dense-packing</title>
  <link rel="help" href="https://drafts.csswg.org/css-grid-3/">
  <link rel="match" href="column-fill-reverse-dense-packing-definite-size-001-ref.html">
  <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
  <style>
    .grid-lanes {
      display: grid-lanes;
      grid-template-columns: repeat(4, 100px);
      grid-auto-flow: dense;
      grid-lanes-pack: dense;
      grid-lanes-direction: column fill-reverse;
      gap: 10px;
      margin-top: 100px;
      border: solid 2px blue;
      width: min-content;
      font-family: Ahem;
      font-size: 10px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div class="grid-lanes">
    <div style="background-color: lightcoral; height: 100px;">block</div>
    <div style="grid-column: span 4; background-color: lightcoral; height: 10px;">spanner</div>
    <div style="background-color: lightgreen; height: 30px;">Item 1</div>
    <div style="background-color: lightblue; height: 100px;">Item 2</div>
    <div style="background-color: lightgreen; height: 30px;">Item 3</div>
    <div style="background-color: lightblue; height: 90px; grid-column: 3;">Item 4</div>
    <div style="background-color: lightgreen; height: 30px;">Item 5</div>
    <div style="background-color: lightblue; height: 100px;">Item 6</div>
    <div style="background-color: lightcoral; height: 100px;">block</div>
    <div style="grid-column: span 4; background-color: lightcoral; height: 10px;">spanner</div>
    <div style="background-color: lightgreen; height: 30px;">Item 7</div>
    <div style="background-color: lightblue; height: 15px;">Item 8</div>
    <div style="background-color: lightblue; grid-column: 2; height: 40px;">Item 9</div>
    <div style="background-color: steelblue; grid-column: 2; height: 45px;">Item 10</div>
  </div>
</body>
</html>

/css/css-grid/grid-lanes/item-placement/dense-packing/column-fill-reverse-dense-packing-definite-size-001-ref.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
  <style>
    .container {
        display: grid;
        grid-template-columns: repeat(4, 100px);
        grid-template-rows: 1fr;
        column-gap: 10px;
        height: 500px;
        margin-top: 100px;
        border: solid 2px blue;
        width: min-content;
        font-family: Ahem;
        font-size: 10px;
    }
    .column {
        display: flex;
        flex-direction: column-reverse;
        row-gap: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Column 1: block, spanner, (120px gap for items in other columns), spanner -->
    <div class="column">
      <div style="background-color: lightcoral; height: 100px;">block</div>
      <div style="background-color: lightcoral; height: 10px; width: 430px;">spanner</div>
      <div style="height: 100px;"></div>
      <div style="background-color: lightcoral; height: 10px; width: 430px;">spanner</div>
    </div>
    <!-- Column 2: Item 1, Item 5, Item 8, [spanner gap], Item 6, [spanner gap], Item 9, Item 10 -->
    <div class="column">
      <div style="background-color: lightgreen; height: 30px;">Item 1</div>
      <div style="background-color: lightgreen; height: 30px;">Item 5</div>
      <div style="background-color: lightblue; height: 15px;">Item 8</div>
      <div style="height: 10px;"></div><!-- spanner space -->
      <div style="background-color: lightblue; height: 100px; margin-bottom: 5px;">Item 6</div>
      <div style="height: 10px;"></div><!-- spanner space -->
      <div style="background-color: lightblue; height: 40px;">Item 9</div>
      <div style="background-color: steelblue; height: 45px;">Item 10</div>
    </div>
    <!-- Column 3: Item 2, [spanner gap], Item 4 -->
    <div class="column">
      <div style="background-color: lightblue; height: 100px;">Item 2</div>
      <div style="height: 10px;"></div><!-- spanner space -->
      <div style="background-color: lightblue; height: 90px;">Item 4</div>
    </div>
    <!-- Column 4: Item 3, [spanner gap], Item 7, block2, [spanner gap] -->
    <div class="column">
      <div style="background-color: lightgreen; height: 30px;">Item 3</div>
      <div style="background-color: lightgreen; height: 30px;">Item 7</div>
      <div style="background-color: lightcoral; height: 100px; margin-bottom: 50px;">block</div>
      <div style="height: 20px;"></div><!-- spanner space -->
    </div>
  </div>
</body>
</html>