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

Enable keyboard shortcuts

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-008.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="match" href="grid-lanes-baseline-alignment-affects-intrinsic-size-008-ref.html">

  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">

  <style>

    .grid-lanes {

      display: grid-lanes;

      width: 200px;

      margin-bottom: 20px;

      align-items: baseline;

      background: lightgray;

      font-family: Ahem;

      line-height: 1;

      flow-tolerance: 0;

  </style>

</head>

<body>

<!-- Two 1-span items in rows 1 and 3, and a singular 3-span item across all

     rows. Row 2 is fixed at 30px. The 3-span item participates in its start-most

     row (row 1) for first-baseline alignment.

     Ahem 10px: baseline=8. Ahem 20px: baseline=16.

     Row 1 shared baseline = max(16, 50+16) = 66.

       lightblue: shim = 66-16 = 50, contribution = 40+50 = 90

       lightgreen (spans rows 1-3): shim = 0, contribution = 70

     Row 3: only lightyellow, no shim, contribution = 10.

     Row 1 = 90, Row 2 = 30 (fixed), Row 3 = 10 -->

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

  <div style="font-size: 20px; padding-bottom: 20px; width: 50px; background: lightblue; grid-row: 1;">É</div>

  <div style="font-size: 10px; width: 50px; background: lightyellow; grid-row: 3;">É</div>

  <div style="font-size: 20px; padding-top: 50px; width: 50px; background: lightgreen; grid-row: 1 / span 3;">É</div>

</div>

<!-- Three 1-span items in rows 1-3, and two 2-span items overlapping rows

     1-2 and 2-3. Row 2 is fixed at 20px. The 2-span items have larger

     baselines (padding-top:30px and 25px) than the 1-span items, and they

     participate in their start-most row for first-baseline alignment.

     Ahem 10px: baseline=8. Ahem 20px: baseline=16.

     Row 1 shared baseline = max(8, 30+16) = 46.

       coral: shim = 46-8 = 38, contribution = 10+38 = 48

       gold (spans rows 1-2): shim = 0, contribution = 50

     Row 3 shared baseline = max(8, 25+16) = 41.

       lightsalmon: shim = 41-8 = 33, contribution = 10+33 = 43

       palegreen (spans rows 2-3): shim = 0, contribution = 45

     Row 1 = 48, Row 2 = 20 (fixed), Row 3 = 25 -->

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

  <div style="font-size: 10px; width: 50px; background: coral; grid-row: 1;">É</div>

  <div style="font-size: 10px; width: 50px; background: plum; grid-row: 2;">É</div>

  <div style="font-size: 10px; width: 50px; background: lightsalmon; grid-row: 3;">É</div>

  <div style="font-size: 20px; padding-top: 30px; width: 50px; background: gold; grid-row: 1 / span 2;">É</div>

  <div style="font-size: 20px; padding-top: 25px; width: 50px; background: palegreen; grid-row: 2 / span 2;">É</div>

</div>

</body>

</html>