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

Status: FAIL | Duration: 23ms | 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/row-fill-reverse-dense-packing-indefinite-size-001.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Grid Lanes: Fill-reverse with dense-packing and indefinite size</title>
  <link rel="help" href="https://drafts.csswg.org/css-grid-3/">
  <link rel="match" href="row-fill-reverse-dense-packing-indefinite-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-rows: repeat(4, 100px);
      grid-lanes-direction: row fill-reverse;
      grid-auto-flow: dense;
      grid-lanes-pack: dense;
      gap: 10px;
      margin-left: 100px;
      border: solid 2px blue;
      font-family: Ahem;
      font-size: 10px;
    }
  </style>
</head>
<body>
  <div class="grid-lanes">
    <div style="background-color: lightcoral; width: 100px;">block</div>
    <div style="grid-row: span 4; background-color: lightcoral; width: 10px;"></div>
    <div style="background-color: lightgreen; width: 30px;">Item 1</div>
    <div style="background-color: lightblue; width: 100px;">Item 2</div>
    <div style="background-color: lightgreen; width: 30px;">Item 3</div>
    <div style="background-color: lightblue; width: 90px; grid-row: 3;">Item 4</div>
    <div style="background-color: lightgreen; width: 30px;">Item 5</div>
    <div style="background-color: lightblue; width: 100px;">Item 6</div>
    <div style="background-color: lightcoral; width: 100px;">block</div>
    <div style="grid-row: span 4; background-color: lightcoral; width: 10px;"></div>
    <div style="background-color: lightgreen; width: 30px;">Item 7</div>
    <div style="background-color: lightblue; width: 15px;">Item 8</div>
    <div style="background-color: lightblue; grid-row: 2; width: 40px;">Item 9</div>
    <div style="background-color: steelblue; grid-row: 2; width: 45px;">Item 10</div>
  </div>
</body>
</html>

/css/css-grid/grid-lanes/item-placement/dense-packing/row-fill-reverse-dense-packing-indefinite-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-rows: repeat(4, 100px);
        grid-template-columns: 1fr;
        row-gap: 10px;
        margin-left: 100px;
        border: solid 2px blue;
        height: min-content;
        font-family: Ahem;
        font-size: 10px;
    }
    .row {
        display: flex;
        flex-direction: row-reverse;
        column-gap: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Row 1: block, spanner, (120px gap for items in other rows), spanner -->
    <div class="row">
      <div style="background-color: lightcoral; width: 100px;">block</div>
      <div style="background-color: lightcoral; width: 10px; height: 430px;"></div>
      <div style="width: 100px;"></div>
      <div style="background-color: lightcoral; width: 10px; height: 430px;"></div>
    </div>
    <!-- Row 2: Item 1, Item 5, Item 8, [spanner gap], Item 6, [spanner gap], Item 9, Item 10 -->
    <div class="row">
      <div style="background-color: lightgreen; width: 30px;">Item 1</div>
      <div style="background-color: lightgreen; width: 30px;">Item 5</div>
      <div style="background-color: lightblue; width: 15px;">Item 8</div>
      <div style="width: 10px;"></div><!-- spanner space -->
      <div style="background-color: lightblue; width: 100px; margin-right: 5px;">Item 6</div>
      <div style="width: 10px;"></div><!-- spanner space -->
      <div style="background-color: lightblue; width: 40px;">Item 9</div>
      <div style="background-color: steelblue; width: 45px;">Item 10</div>
    </div>
    <!-- Row 3: Item 2, [spanner gap], Item 4 -->
    <div class="row">
      <div style="background-color: lightblue; width: 100px;">Item 2</div>
      <div style="width: 10px;"></div><!-- spanner space -->
      <div style="background-color: lightblue; width: 90px;">Item 4</div>
    </div>
    <!-- Row 4: Item 3, [spanner gap], Item 7, block2, [spanner gap] -->
    <div class="row">
      <div style="background-color: lightgreen; width: 30px;">Item 3</div>
      <div style="background-color: lightgreen; width: 30px;">Item 7</div>
      <div style="background-color: lightcoral; width: 100px; margin-right: 50px;">block</div>
      <div style="width: 20px;"></div><!-- spanner space -->
    </div>
  </div>
</body>
</html>