grid-lanes-baseline-alignment-affects-intrinsic-size-003.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-003.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Grid Lanes Test: evaluate how the baseline affects the grid-lanes intrinsic size</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-003-ref.html">

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

  <style>

    .grid-lanes {

      display: grid-lanes;

      grid-template-rows: min-content;

      width: 200px;

      margin-bottom: 20px;

      align-items: baseline;

      background: lightgray;

      font-family: Ahem;

      line-height: 1;

      text-orientation: sideways;

    .item-htb {

      writing-mode: horizontal-tb;

      font-size: 20px;

      padding-top: 15px;

      width: 50px;

      background: lightsalmon;

    .item-vrl {

      writing-mode: vertical-rl;

      font-size: 20px;

      padding-right: 15px;

      height: 50px;

      background: palegreen;

    .item-vlr {

      writing-mode: vertical-lr;

      font-size: 20px;

      padding-left: 15px;

      height: 50px;

      background: powderblue;

  </style>

</head>

<body>

<!-- First container: all three \'É\' glyphs should share the same baseline.

  In vertical writing terms, their underlines would line up on one line. -->

<div class="grid-lanes" style="width: auto; writing-mode: sideways-lr;">

  <div class="item-htb" style="height: 35px; writing-mode: sideways-rl;">É</div>

  <div class="item-vrl">É</div>

  <div class="item-vlr">É</div>

</div>

<!-- Second container: the first item is horizontal while the last two are

  vertical. The left side of the first glyph aligns with the bottom side of

  the last two glyphs along the shared baseline. -->

<div class="grid-lanes" style="writing-mode: vertical-rl; height: 200px; width: auto;">

  <div class="item-htb" style="height: 35px;">É</div>

  <div class="item-vrl">É</div>

  <div class="item-vlr" style="align-self: last baseline;">É</div>

</div>

</body>

</html>