grid-lanes-baseline-alignment-affects-intrinsic-size-006.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-grid/grid-lanes/tentative/intrinsic-sizing/grid-lanes-baseline-alignment-affects-intrinsic-size-006.html - WPT Dashboard Interop Dashboard

<!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>