wpt / css / css-grid / grid-lanes / item-placement / column-negative-margin-004.html

Status: FAIL | Duration: 43ms | 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/column-negative-margin-004.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Grid Lanes: Dense Packing with Negative Margins</title>
  <link rel="help" href="https://drafts.csswg.org/css-grid-3/">
  <link rel="match" href="column-negative-margin-004-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;
      gap: 10px;
      margin-top: 100px;
      border: solid 2px blue;
      width: min-content;
      font-family: Ahem;
      font-size: 10px;
    }
  </style>
</head>
<body>
  <p>Test that negative margins affect the item's size and contribution to dense-packing.</p>
  <div class="grid-lanes">
    <div style="background-color: lightcoral; height: 100px;">block</div>
    <div style="grid-column: span 4; background-color: lightcoral;">spanner</div>

    <!-- Item 1 should not contribute any size at all to the track opening in Track 2. -->
    <div style="background-color: lightgreen; height: 30px; margin-top: -45px;">Item 1</div>
    <div style="background-color: lightblue; height: 100px;">Item 2</div>
    <!-- Item 3 should add a stacking axis gap contribution to the top of Track 3.
         An item must be < 90px to fit into the track opening now. -->
    <div style="background-color: lightgreen; height: 30px; margin-top: -30px;">Item 3</div>
    <div style="background-color: lightblue; height: 90px; grid-column: 3;">Item 4</div>
    <!-- Item 5 should not contribute any size at all to the track opening in Track 2. -->
    <div style="background-color: lightgreen; height: 30px; margin-top: -40px;">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;">spanner</div>

    <!-- Item 7 should not affect the size of the track opening in Track 2 -- Item 8 & 9 will cover Item 7. -->
    <div style="background-color: lightgreen; height: 30px; margin-bottom: -45px;">Item 7</div>
    <div style="background-color: lightblue; height: 15px;">Item 8</div>
    <!-- Item 9's margin-bottom should still have an effect on the placement of the item below it. -->
    <div style="background-color: lightblue; grid-column: 2; height: 40px; margin-bottom: -20px;">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/column-negative-margin-004-ref.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Grid Lanes: Dense Packing with Negative Margins</title>
  <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 100px);
      gap: 10px;
      margin-top: 100px;
      border: solid 2px blue;
      width: min-content;
      font-family: Ahem;
      font-size: 10px;
    }
  </style>
</head>
<body>
  <p>Test that negative margins affect the item's size and contribution to dense-packing.</p>
  <div class="grid">
    <!-- Section 1: Items dense-packed into openings created by "block" + spanner -->
    <div style="grid-column: 1;">
      <div style="background-color: lightcoral; height: 100px;">block</div>
    </div>
    <div style="grid-column: 2;">
      <!-- Item 1 at position 0 (contribution 0, overlaps Item 2) -->
      <div style="background-color: lightgreen; height: 30px; margin-top: -45px;">Item 1</div>
      <!-- Item 2 at position 0 (fills opening) -->
      <div style="background-color: lightblue; height: 100px; margin-top: 15px;">Item 2</div>
    </div>
    <div style="grid-column: 3;">
      <!-- Item 3 at position 0 (contribution 10, just the gap) -->
      <div style="background-color: lightgreen; height: 30px; margin-top: -30px;">Item 3</div>
      <!-- Item 4 at position 10 (fills remaining opening) -->
      <div style="background-color: lightblue; height: 90px; margin-top: 10px;">Item 4</div>
    </div>
    <div style="grid-column: 4;">
      <!-- Item 5 at position 0 (contribution 0, overlaps Item 6) -->
      <div style="background-color: lightgreen; height: 30px; margin-top: -40px;">Item 5</div>
      <!-- Item 6 at position 0 (fills opening) -->
      <div style="background-color: lightblue; height: 100px; margin-top: 10px;">Item 6</div>
    </div>

    <!-- Spanner 1 -->
    <div style="grid-column: span 4; background-color: lightcoral;">spanner</div>

    <!-- Section 2: Items dense-packed into openings created by "block 2" + spanner 2 -->
    <div style="grid-column: 1;">
      <div style="background-color: lightcoral; height: 100px;">block</div>
    </div>
    <div style="grid-column: 2;">
      <!-- Item 7 at position 0 (contribution 0, covered by Item 8) -->
      <div style="background-color: lightgreen; height: 30px; margin-bottom: -45px;">Item 7</div>
      <!-- Item 8 at position 0 (same as Item 7, contribution 25) -->
      <div style="background-color: lightblue; height: 15px; margin-top: 15px; position: relative;">Item 8</div>
      <!-- Item 9 at position 25 (contribution 30) -->
      <div style="background-color: lightblue; height: 40px; margin-top: 10px; margin-bottom: -20px; position: relative;">Item 9</div>
      <!-- Item 10 at position 55 (fills remaining opening) -->
      <div style="background-color: steelblue; height: 45px; margin-top: 10px; position: relative;">Item 10</div>
    </div>

    <!-- Spanner 2 -->
    <div style="grid-column: span 4; background-color: lightcoral;">spanner</div>
  </div>
</body>
</html>