column-grid-lanes-item-baseline-cyclic-dependency-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-grid/grid-lanes/tentative/baseline/column-grid-lanes-item-baseline-cyclic-dependency-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Grid Lanes Test: Self-Baseline alignment and sizing cyclic dependency</title>

  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">

  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment">

  <link rel="match" href="column-grid-lanes-item-baseline-cyclic-dependency-002-ref.html">

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

  <style>

    .grid-lanes {

      display: inline-grid-lanes;

      background-color: grey;

      position: relative;

      border: solid;

      text-orientation: sideways;

      font: 15px/1 Ahem;

      justify-items: baseline;

    .flex-columns     { grid-template-columns: 1fr; }

    .max-flex-columns { grid-template-columns: minmax(0px, 1fr); }

    .width25   { width: 25px; }

    .width50   { width: 50px; }

    .width200  { width: 200px; }

    .width200Percent  { width: 200%; }

    .height50 { height: 50px; }

    .height100 { height: 100px; }

    .height150 {height: 150px; }

    .height200 {height: 200px; }

    .firstRowFirstItem {

      background-color: blue;

      grid-column: 1;

    .secondRowFirstItem {

      background-color: purple;

      grid-column: 1;

    .spanning2 {

      background-color: maroon;

      grid-column: 2;

    .verticalLR {

      writing-mode: vertical-lr;

    .verticalRL {

      writing-mode: vertical-rl;

  </style>

</head>

<body>

<div style="height: 250px">

    <pre>flexible-sized columns - items with relative width</pre>

    <div class="grid-lanes flex-columns">

        <div class="firstRowFirstItem verticalLR height100 width50">ÉÉ</div>

        <div class="secondRowFirstItem verticalLR height100 width200Percent">ÉÉ</div>

        <div class="spanning2 verticalLR width25 height200"></div>

    </div>

</div>

<div style="height: 250px">

    <pre>flex max-function columns - items with relative width</pre>

    <div class="grid-lanes max-flex-columns">

        <div class="firstRowFirstItem verticalLR width50 height50"></div>

        <div class="secondRowFirstItem verticalLR width200Percent height50"></div>

        <div class="spanning2 verticalLR width25 height150"></div>

    </div>

</div>

</body>

</html>