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.

  Shared baseline (first-baseline, three items):

    plum(span-2, pad-top:40): item_baseline = 40+16 = 56  ← max

    lightblue(span-1):        item_baseline = 16

    lightgreen(span-1):       item_baseline = 16

    shared_baseline = 56

  Contribution size (contribution = shim + block_size):

    shim = (shared_baseline - item_baseline)

    plum:       0  + 60 = 60   (block_size = 40+20)

    lightblue:  40 + 20 = 60

    lightgreen: 40 + 20 = 60

    lightyellow: 100% of indefinite → 0

  Track sizing: row1 = max(60, 60/2) = 60, row2 = 60

  Container height = 60 + 60 = 120

  lightyellow height = 100% of row2 = 60

-->

<div class="grid-lanes" style="grid-template-rows: minmax(0px, auto) minmax(0px, auto);" data-expected-height="120">

  <!-- plum: span-2, padding-top: 40px raises its baseline, setting the shared baseline. -->

  <div style="font-size: 20px; padding-top: 40px; width: 60px; background: plum; grid-row: 1/3;">É</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, also gets a 40px shim. -->

  <div style="font-size: 20px; width: 60px; background: lightgreen; grid-row: 2;">É</div>

  <!-- lightyellow: span-1 in row 2, height: 100% resolves against the track size (60px). -->

  <div style="font-size: 20px; width: 60px; height: 100%; background: lightyellow; grid-row: 2; align-self: normal" data-expected-height="60"></div>

</div>

</body>

</html>