Blitz - WPT: column-grid-lanes-container-baseline-007a.html

wpt / css / css-grid / grid-lanes / baseline / column-grid-lanes-container-baseline-007a.html

/css/css-grid/grid-lanes/baseline/column-grid-lanes-container-baseline-007a.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Grid Lanes Test: align-items: baseline/last baseline with explicit placement</title>
  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment">
  <link rel="match" href="column-grid-lanes-container-baseline-007a-ref.html">
  <style>
    .container {
      display: flex;
      gap: 20px;
      border: 2px solid blue;
      width: 400px;
      padding: 10px;
      font-size: 16px;
      text-decoration: underline;
    }

    .first-baseline {
      align-items: baseline;
    }

    .last-baseline {
      align-items: last baseline;
    }

    .grid-lanes-margin {
      display: grid-lanes;
      grid-template-columns: repeat(3, 100px);
      border: 1px solid blue;
      background: lightblue;
    }

    .grid-lanes-margin .grid-lanes-item {
      font-size: 14px;
      padding: 4px;
    }

    .grid-lanes-margin .item1 {
      grid-column: 1;
      height: 30px;
      margin-top: 5px;
      background: lightgreen;
    }

    .grid-lanes-margin .item2 {
      grid-column: 1 / 4;
      height: 40px;
      margin-top: 10px;
      background: lightcoral;
    }

    .grid-lanes-margin .item3 {
      grid-column: 1;
      height: 25px;
      margin-top: 8px;
      background: lightyellow;
    }

    .grid-lanes-margin .item4 {
      grid-column: 2;
      height: 35px;
      margin-top: 12px;
      background: lightpink;
    }

    .grid-lanes-margin .item5 {
      grid-column: 3;
      height: 20px;
      margin-top: 15px;
      background: lightcyan;
      display: flex;
      align-items: end;
    }

    .grid-lanes-simple {
      display: grid-lanes;
      grid-template-columns: repeat(3, 100px);
      border: 1px solid green;
    }

    .grid-lanes-simple .simple-item1 {
      grid-column: 1 / 4;
      height: 2px;
      font-size: 40px;
      background: yellow;
    }

    .grid-lanes-simple .simple-item2 {
      grid-column: 1;
      height: 2px;
      font-size: 12px;
      border: 2px solid red;
      color: red;
    }

    .grid-lanes-simple .simple-item3 {
      grid-column: 1;
      height: 80px;
      color: blue;
      display: flex;
      align-items: end;
    }
  </style>
</head>
<body>
<div class="container first-baseline">
  <div>Ref</div>
  <div class="grid-lanes-margin">
    <div class="grid-lanes-item item1">Item 1</div>
    <div class="grid-lanes-item item2">Item 2</div>
    <div class="grid-lanes-item item3">Item 3</div>
    <div class="grid-lanes-item item4">Item 4</div>
    <div class="grid-lanes-item item5">Item 5</div>
  </div>
</div>
<div class="container last-baseline">
  <div>Ref</div>
  <div class="grid-lanes-margin">
    <div class="grid-lanes-item item1">Item 1</div>
    <div class="grid-lanes-item item2">Item 2</div>
    <div class="grid-lanes-item item3">Item 3</div>
    <div class="grid-lanes-item item4">Item 4</div>
    <div class="grid-lanes-item item5">Item 5</div>
  </div>
</div>

<!-- Spanner with large font vs smaller item below -->
<div class="container first-baseline">
  <div>Ref</div>
  <div class="grid-lanes-simple">
    <div class="grid-lanes-item simple-item1">First</div>
    <div class="grid-lanes-item simple-item2">Second</div>
    <div class="grid-lanes-item simple-item3">Third</div>
  </div>
</div>
<div class="container last-baseline">
  <div>Ref</div>
  <div class="grid-lanes-simple">
    <div class="grid-lanes-item simple-item1">First</div>
    <div class="grid-lanes-item simple-item2">Second</div>
    <div class="grid-lanes-item simple-item3">Third</div>
  </div>
</div>
</body>
</html>

/css/css-grid/grid-lanes/baseline/column-grid-lanes-container-baseline-007a-ref.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .container {
      display: flex;
      gap: 20px;
      border: 2px solid blue;
      width: 400px;
      padding: 10px;
      font-size: 16px;
      text-decoration: underline;
    }

    .first-baseline {
      align-items: baseline;
    }

    .last-baseline {
      align-items: last baseline;
    }

    .grid-margin {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      border: 1px solid blue;
      background: lightblue;
      width: 300px;
    }

    .grid-margin .grid-margin-item {
      font-size: 14px;
      padding: 4px;
    }

    .grid-margin .item1 {
      grid-column: 1;
      height: 30px;
      margin-top: 5px;
      background: lightgreen;
    }

    .grid-margin .item2 {
      grid-column: 1 / 4;
      height: 40px;
      margin-top: 10px;
      background: lightcoral;
    }

    .grid-margin .item3 {
      grid-column: 1;
      height: 25px;
      margin-top: 8px;
      background: lightyellow;
    }

    .grid-margin .item4 {
      grid-column: 2;
      height: 35px;
      margin-top: 12px;
      background: lightpink;
    }

    .grid-margin .item5 {
      grid-column: 3;
      height: 20px;
      margin-top: 15px;
      background: lightcyan;
      display: flex;
      align-items: end;
    }

    .grid-simple {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      border: 1px solid green;
    }

    .grid-simple .simple-item1 {
      grid-column: 1 / 4;
      height: 2px;
      font-size: 40px;
      background: yellow;
    }

    .grid-simple .simple-item2 {
      grid-column: 1;
      height: 2px;
      font-size: 12px;
      border: 2px solid red;
      color: red;
    }

    .grid-simple .simple-item3 {
      grid-column: 1;
      height: 80px;
      color: blue;
      display: flex;
      align-items: end;
    }
  </style>
</head>
<body>
<div class="container first-baseline">
  <div>Ref</div>
  <div class="grid-margin">
    <div class="grid-margin-item item1">Item 1</div>
    <div class="grid-margin-item item2">Item 2</div>
    <div class="grid-margin-item item3">Item 3</div>
    <div class="grid-margin-item item4">Item 4</div>
    <div class="grid-margin-item item5">Item 5</div>
  </div>
</div>
<div class="container last-baseline">
  <div>Ref</div>
  <div class="grid-margin">
    <div class="grid-margin-item item1">Item 1</div>
    <div class="grid-margin-item item2">Item 2</div>
    <div class="grid-margin-item item3">Item 3</div>
    <div class="grid-margin-item item4">Item 4</div>
    <div class="grid-margin-item item5">Item 5</div>
  </div>
</div>
<div class="container first-baseline">
  <div>Ref</div>
  <div class="grid-simple">
    <div class="grid-simple-item simple-item1">First</div>
    <div class="grid-simple-item simple-item2">Second</div>
    <div class="grid-simple-item simple-item3">Third</div>
  </div>
</div>
<div class="container last-baseline">
  <div>Ref</div>
  <div class="grid-simple">
    <div class="grid-simple-item simple-item1">First</div>
    <div class="grid-simple-item simple-item2">Second</div>
    <div class="grid-simple-item simple-item3">Third</div>
  </div>
</div>
</body>
</html>