Blitz - WPT: grid-lanes-baseline-alignment-affects-intrinsic-size-006.html

wpt / css / css-grid / grid-lanes / tentative / intrinsic-sizing / grid-lanes-baseline-alignment-affects-intrinsic-size-006.html

Enable JavaScript in test iframe

/css/css-grid/grid-lanes/tentative/intrinsic-sizing/grid-lanes-baseline-alignment-affects-intrinsic-size-006.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Grid Lanes Test: evaluate how baseline alignment with multi-span items affects intrinsic track sizes</title>
  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing-performance">
  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/check-layout-th.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .grid-lanes {
      display: grid-lanes;
      width: 300px;
      align-items: baseline;
      background: lightgray;
      font-family: Ahem;
      line-height: 1;
    }
</style>
<body onload="checkLayout('.grid-lanes')">
<!--
  Test: multi-span baseline shim inflates track sizes.
  Container: grid-lanes-direction: row, width: 300px, 2 auto rows.
  Ahem 20px: ascent=16, descent=4, line-height:1 → block_size=20.

  Baseline groups (cross-group baseline alignment):
    Row 1: plum(span-2, pad-top:40) and lightblue(span-1)
      plum:      item_baseline = 40+16 = 56  ← max
      lightblue: item_baseline = 16
      shared_baseline = 56
    Row 2: lightgreen(span-1)
      lightgreen: item_baseline = 16
      shared_baseline = 16

  Contribution size:
    shim = shared_baseline - item_baseline
    contribution = shim + block_size
    plum:
      shim = 56 - 56 = 0
      block contribution = 0 + 60 = 60   (block_size = 40+20, spans rows 1-2)
    lightblue:
      shim = 56 - 16 = 40
      block contribution = 40 + 20 = 60   (row 1)
    lightgreen:
      shim = 16 - 16 = 0                  (row 2, no cross-group shim)
      block contribution = 0 + 20 = 20
    lightyellow: 100% of indefinite → 0

  Track sizing: row1 = max(60, 60/2) = 60, row2 = max(20, 0) = 20
  Container height = 60 + 20 = 80
  lightyellow height = 100% of row2 = 20
-->
<div class="grid-lanes" style="grid-template-rows: minmax(0px, auto) minmax(0px, auto);" data-expected-height="80">
  <!-- plum: span-2, padding-top: 40px raises its baseline, setting the shared baseline for row 1. -->
  <div style="font-size: 20px; padding-top: 40px; width: 60px; background: plum; grid-row: 1/3;" data-expected-height="60">É</div>
  <!-- lightblue: span-1 in row 1, gets a 40px shim to align with the shared baseline. -->
  <div style="font-size: 20px; width: 60px; background: lightblue; grid-row: 1;">É</div>
  <!-- lightgreen: span-1 in row 2, no cross-group shim (separate baseline group). -->
  <div style="font-size: 20px; width: 60px; background: lightgreen; grid-row: 2;" data-expected-height="20">É</div>
  <!-- lightyellow: span-1 in row 2, height: 100% resolves against the track size (20px). -->
  <div style="font-size: 20px; width: 60px; height: 100%; background: lightyellow; grid-row: 2; align-self: normal" data-expected-height="20"></div>
</div>
</body>
</html>