Bug 1438730 [wpt PR 9553] - [css-grid] Baseline alignment inside the tracks sizing algorithm, a=testonly
authorJavier Fernandez <jfernandez@igalia.com>
Wed, 06 Jun 2018 17:34:18 +0000
changeset 422263 00d30e4a61583727bb9cde10fb27957b2e9731f9
parent 422262 78ad9cc5407e92eac0065891de428a379986b042
child 422264 fb519193b813bc8ebf9283d3ef1be821b0da74f5
push id34122
push userebalazs@mozilla.com
push dateMon, 11 Jun 2018 09:37:00 +0000
treeherdermozilla-central@9941eb8c3b29 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1438730, 704713, 923261, 562406
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1438730 [wpt PR 9553] - [css-grid] Baseline alignment inside the tracks sizing algorithm, a=testonly Automatic update from web-platform-tests[css-grid] Baseline alignment inside the tracks sizing algorithm We have identified several cases where the Baseline Alignment accounts for the grid's intrinsic size. Since we depend on the track sizing algorithm to compute the grid's intrinsic size, the only way to handle all these cases is to integrate the baseline alignment logic in the algorithm. Additionally, the CSSWG has identified several cases that can't be solved properly; such cases have in common that they imply cyclic dependencies between the item's and grid area's size. The CSSWG has resolved that these items don't participate in baseline alignment: https://github.com/w3c/csswg-drafts/issues/1365 There are also other related issues with some examples and relevant discussions about this topic: https://github.com/w3c/csswg-drafts/issues/1039 https://github.com/w3c/csswg-drafts/issues/1409 Bug: 704713 Change-Id: I817b16eb43aa76f4827deb8f1f20efb7fde3dc22 Reviewed-on: https://chromium-review.googlesource.com/923261 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Sergio Villar <svillar@igalia.com> Cr-Commit-Position: refs/heads/master@{#562406} -- wpt-commits: 82b278966038f26cb83ceeb67404b0ce7e13a74c wpt-pr: 9553
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
testing/web-platform/tests/css/support/grid.css
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -265995,16 +265995,21 @@
      {}
     ]
    ],
    "css/support/green.ico": [
     [
      {}
     ]
    ],
+   "css/support/grid.css": [
+    [
+     {}
+    ]
+   ],
    "css/support/import-green.css": [
     [
      {}
     ]
    ],
    "css/support/import-red.css": [
     [
      {}
@@ -316394,16 +316399,40 @@
     ]
    ],
    "css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html": [
     [
      "/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html",
      {}
     ]
    ],
+   "css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html": [
+    [
+     "/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html": [
+    [
+     "/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html": [
+    [
+     "/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html",
+     {}
+    ]
+   ],
+   "css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html": [
+    [
+     "/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html",
+     {}
+    ]
+   ],
    "css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html": [
     [
      "/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html",
      {}
     ]
    ],
    "css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html": [
     [
@@ -316514,16 +316543,40 @@
     ]
    ],
    "css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html": [
     [
      "/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html",
      {}
     ]
    ],
+   "css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html": [
+    [
+     "/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html": [
+    [
+     "/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html",
+     {}
+    ]
+   ],
+   "css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html": [
+    [
+     "/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html",
+     {}
+    ]
+   ],
+   "css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html": [
+    [
+     "/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html",
+     {}
+    ]
+   ],
    "css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html": [
     [
      "/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html",
      {}
     ]
    ],
    "css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html": [
     [
@@ -316970,16 +317023,28 @@
     ]
    ],
    "css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html": [
     [
      "/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html",
      {}
     ]
    ],
+   "css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html": [
+    [
+     "/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html": [
+    [
+     "/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html",
+     {}
+    ]
+   ],
    "css/css-grid/grid-definition/grid-change-fit-content-argument-001.html": [
     [
      "/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html",
      {}
     ]
    ],
    "css/css-grid/grid-definition/grid-inline-auto-repeat-001.html": [
     [
@@ -514885,16 +514950,32 @@
   "css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html": [
    "86c3702fc643b0a45a7f5e3588e51cdca3038fcc",
    "testharness"
   ],
   "css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html": [
    "7d1a1c21880b25fe0126affa850fb13bdf80470b",
    "testharness"
   ],
+  "css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html": [
+   "7387c69c5f442f72c4f253242823f97b7c26ed83",
+   "testharness"
+  ],
+  "css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html": [
+   "a95963f14832c60c44aa63915ea557fdabe3183f",
+   "testharness"
+  ],
+  "css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html": [
+   "e5c7e8adb9d33b307041429f708aae12b0203a58",
+   "testharness"
+  ],
+  "css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html": [
+   "d24ae3fb7aad80368ea4f22122e18157596bf45a",
+   "testharness"
+  ],
   "css/css-grid/alignment/grid-content-distribution-001.html": [
    "5622a264eb2dbd6cf621ac97aa4a8ae5db82c6b3",
    "reftest"
   ],
   "css/css-grid/alignment/grid-content-distribution-002.html": [
    "2c62d06a72062571ede87351e2538e386807e0b9",
    "reftest"
   ],
@@ -515209,16 +515290,32 @@
   "css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html": [
    "17b27d1784ada1d09a6e1ae42b6a9c8225699948",
    "testharness"
   ],
   "css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html": [
    "7f95db93458af40478ad2cd6b473e8f34f62f3e8",
    "testharness"
   ],
+  "css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html": [
+   "7f2b8621613e433c84b70310c64051b4b3893a67",
+   "testharness"
+  ],
+  "css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html": [
+   "c25d5c44d2a7d07b789a2cf669f50a21f6df4f8e",
+   "testharness"
+  ],
+  "css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html": [
+   "edf4aec4ce1ba1bbda1a5e6ade38a712522623c5",
+   "testharness"
+  ],
+  "css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html": [
+   "d83d361ef95e1a4c16b33a9057d7559aaa43a242",
+   "testharness"
+  ],
   "css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html": [
    "cafc54256ea9d0cbf8990a0e04904c7ada8c5894",
    "testharness"
   ],
   "css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html": [
    "7175f87e2e16e168fb1368287fb7b8297b094145",
    "testharness"
   ],
@@ -515513,16 +515610,24 @@
   "css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html": [
    "43c100f32612d13a2c5ec3df9b407556b15b4378",
    "testharness"
   ],
   "css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html": [
    "737ff1592425bb6e89a9edebdd072c94e926a1a9",
    "testharness"
   ],
+  "css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html": [
+   "8ff9af9ade9e12c95d7e70778635efdc2263e62b",
+   "testharness"
+  ],
+  "css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html": [
+   "28a7a3372ec47cb31afde392da0752032f416512",
+   "testharness"
+  ],
   "css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html": [
    "e7250b61f6dc882945f73412ec73c0de7f139aad",
    "reftest"
   ],
   "css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html": [
    "083e1bed1a996e0a333456163df2610d94acd682",
    "reftest"
   ],
@@ -550329,16 +550434,20 @@
   "css/support/cat.png": [
    "461fd17b274662b88500cdf42bab7f3b79e6019d",
    "support"
   ],
   "css/support/green.ico": [
    "0e795989a9acaa0d153c31a0a965f6aa7600e024",
    "support"
   ],
+  "css/support/grid.css": [
+   "6bb300b8baebf700481ea162fb7b41913fcca29c",
+   "support"
+  ],
   "css/support/import-green.css": [
    "db4f420efdb292d6520be1a3bf052ed3f6f9e7e3",
    "support"
   ],
   "css/support/import-red.css": [
    "0f2b9133fcfa22d5506a5cee307bd1a4d50e87e9",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and verticalRL item</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn verticalRL" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont"   data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>Horizontal grid and verticalLR item</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont"   data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn horizontalTB"         data-offset-x="35" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and Horizontal item</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn horizontalTB"          data-offset-x="100" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and item with fixed height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn fixedHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="firstRowSecondColumn bigFont"     data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="175" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="115" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.height75 { height: 75px; }
+.width25  { width: 25px; }
+.width75  { width: 75px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and item with relative height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn relativeHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont"        data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with relative width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn relativeWidth"         data-offset-x="30" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with rlative width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn relativeWidth"          data-offset-x="200" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight"  data-offset-x="140" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on content-sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: auto auto / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and item with fixed height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn fixedHeight" data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="firstRowSecondColumn bigFont"    data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedWidth"             data-offset-x="85" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight"  data-offset-x="25" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and verticalRL item</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn"                                   data-offset-x="60" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalLR item</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn"                                  data-offset-x="35" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn"                        data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn"                        data-offset-x="200" data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and verticalLR item with fixed width</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalRL item with fixed width</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn fixedWidth"                        data-offset-x="60" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed height</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="200" data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<pre>Horizontal grid and verticalLR item with relative width</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn relativeWidth"                    data-offset-x="30" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalRL item with relative width</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn relativeWidth"                    data-offset-x="60" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and item with relative height</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn relativeHeight"         data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and item with relative height</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn relativeHeight"         data-offset-x="200" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<style>
+.container { position: relative; }
+.inline-grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / auto auto;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.inline-grid')">
+
+<pre>Horizontal grid and verticalLR item with relative width</pre>
+
+<div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300">
+  <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalRL item with fixed width</pre>
+
+<div class="inline-grid justifyItemsBaseline" data-expected-width="210" data-expected-height="300">
+  <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="60" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed height</pre>
+
+<div class="inline-grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed height</pre>
+
+<div class="inline-grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="200" data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items with relative size in the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
+<style>
+.inline-grid {
+  position: relative;
+  border: solid;
+  text-orientation: sideways;
+  font-family: Ahem;
+}
+
+.columns { grid-template-columns: 100px 100px; }
+.rows { grid-template-rows: 100px 100px; }
+
+.min-content-columns { grid-auto-columns: min-content; }
+.max-content-columns { grid-auto-columns: max-content; }
+.fit-content-columns { grid-auto-columns: fit-content; }
+.flex-columns        { grid-auto-columns: 1fr; }
+.min-content-rows { grid-auto-rows: min-content; }
+.max-content-rows { grid-auto-rows: max-content; }
+.fit-content-rows { grid-auto-rows: fit-content; }
+.flex-rows        { grid-auto-rows: 1fr; }
+
+.height25  { height: 25px; }
+.height50  { height: 50px; }
+.height200 { height: 200px; }
+.width25   { width: 25px; }
+.width50   { width: 50px; }
+.width200  { width: 200px; }
+
+.height200Percent { height: 200%; }
+.width200Percent  { width: 200%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.inline-grid')">
+
+<pre>auto-sized rows - items with relative height</pre>
+
+<div class="inline-grid alignItemsBaseline columns">
+  <div class="firstRowFirstColumn height50"          data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50"></div>
+  <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>min-content-sized rows - items with relative height</pre>
+
+<div class="inline-grid alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn"                   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="160"></div>
+  <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>max-content-sized rows - items with relative height</pre>
+
+<div class="inline-grid alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn"                   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="160"></div>
+  <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>fit-content-sized rows - items with relative height</pre>
+
+<div class="inline-grid alignItemsBaseline columns fit-content-rows">
+  <div class="firstRowFirstColumn"                   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="160"></div>
+  <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>flexible-sized rows - items with relative height</pre>
+
+<div class="inline-grid alignItemsBaseline columns flex-rows">
+  <div class="firstRowFirstColumn height50"          data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50"></div>
+  <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>auto-sized columns - items with relative width</pre>
+
+<div class="inline-grid justifyItemsBaseline rows">
+  <div class="firstRowFirstColumn verticalRL width50"          data-offset-x="0"  data-offset-y="0"   data-expected-width="50"  data-expected-height="100"></div>
+  <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="50" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized columns - items with relative width</pre>
+
+<div class="inline-grid justifyItemsBaseline rows min-content-columns">
+  <div class="firstRowFirstColumn verticalRL"                  data-offset-x="0"  data-offset-y="0"   data-expected-width="80"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
+  <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="80" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized columns - items with relative width</pre>
+
+<div class="inline-grid justifyItemsBaseline rows max-content-columns">
+  <div class="firstRowFirstColumn verticalRL"                  data-offset-x="0"  data-offset-y="0"   data-expected-width="80"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
+  <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="80" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized columns - items with relative width</pre>
+
+<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
+  <div class="firstRowFirstColumn verticalRL"                  data-offset-x="0"  data-offset-y="0"   data-expected-width="80"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
+  <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="80" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>flexible-sized columns - items with relative width</pre>
+
+<div class="inline-grid justifyItemsBaseline rows flex-columns">
+  <div class="firstRowFirstColumn verticalRL width50"          data-offset-x="0"  data-offset-y="0"   data-expected-width="50"  data-expected-height="100"></div>
+  <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="50" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Context along the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
+<style>
+.inline-grid {
+  position: relative;
+  border: solid;
+  text-orientation: sideways;
+  font-family: Ahem;
+}
+
+.columns { grid-template-columns: 100px 100px; }
+.rows { grid-template-rows: 100px 100px; }
+
+.min-content-columns { grid-auto-columns: min-content; }
+.max-content-columns { grid-auto-columns: max-content; }
+.fit-content-columns { grid-auto-columns: fit-content; }
+.flex-columns        { grid-auto-columns: 1fr; }
+.min-content-rows { grid-auto-rows: min-content; }
+.max-content-rows { grid-auto-rows: max-content; }
+.fit-content-rows { grid-auto-rows: fit-content; }
+.flex-rows        { grid-auto-rows: 1fr; }
+
+.height25  { height: 25px; }
+.height50  { height: 50px; }
+.height200 { height: 200px; }
+.width25   { width: 25px; }
+.width50   { width: 50px; }
+.width200  { width: 200px; }
+
+.bigFont { font-size: 50px; }
+.paddingLeft { padding-left: 25px; }
+.paddingBottom { padding-bottom: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.inline-grid')">
+
+<pre>auto-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+
+<div class="inline-grid alignItemsBaseline columns height200">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="175">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="175" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>min-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+
+<div class="inline-grid alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>max-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+
+<div class="inline-grid alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>fit-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+
+<div class="inline-grid alignItemsBaseline columns fit-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>auto-sized columns - horizontal grid item - row-axis baseline</pre>
+
+<div class="inline-grid justifyItemsBaseline rows width200">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="0"   data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="175" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized columns - horizontal grid item - row-axis baseline</pre>
+
+<div class="inline-grid justifyItemsBaseline rows min-content-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"  data-offset-y="0"   data-expected-width="75" data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="0"  data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="75" data-offset-y="0"   data-expected-width="25" data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized columns - horizontal grid item - row-axis baseline</pre>
+
+<div class="inline-grid justifyItemsBaseline rows max-content-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="0"   data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="416" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized columns - horizontal grid item - row-axis baseline</pre>
+
+<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="0"   data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="416" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+
+<div class="inline-grid verticalLR alignItemsBaseline columns width200">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="0"   data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="175" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+
+<div class="inline-grid verticalLR alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"  data-offset-y="0"   data-expected-width="75" data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="0"  data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="75" data-offset-y="0"   data-expected-width="25" data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+
+<div class="inline-grid verticalLR alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="0"   data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="416" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+
+<div class="inline-grid verticalLR alignItemsBaseline columns fit-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="0"   data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="416" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+
+<div class="inline-grid verticalRL alignItemsBaseline columns width200">
+  <div class="firstRowFirstColumn bigFont paddingRight"  data-offset-x="125" data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"         data-offset-x="25"  data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"        data-offset-x="0"   data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+
+<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingRight"  data-offset-x="25" data-offset-y="0"   data-expected-width="75" data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"         data-offset-x="25" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"        data-offset-x="0"  data-offset-y="0"   data-expected-width="25" data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+
+<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingRight"  data-offset-x="366" data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"         data-offset-x="25"  data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"        data-offset-x="0"   data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+
+<div class="inline-grid verticalRL alignItemsBaseline columns fit-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingRight"  data-offset-x="366" data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"         data-offset-x="25"  data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"        data-offset-x="0"   data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/support/grid.css
@@ -0,0 +1,277 @@
+.grid {
+  display: grid;
+  background-color: grey;
+}
+
+.inline-grid {
+  display: inline-grid;
+  background-color: grey;
+}
+
+.firstRowFirstColumn {
+  background-color: blue;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.onlyFirstRowOnlyFirstColumn {
+  background-color: blue;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+.firstRowSecondColumn {
+  background-color: lime;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.onlyFirstRowOnlySecondColumn {
+  background-color: lime;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+.secondRowFirstColumn {
+  background-color: purple;
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.onlySecondRowOnlyFirstColumn {
+  background-color: purple;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+.secondRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.onlySecondRowOnlySecondColumn {
+  background-color: orange;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+
+.endSecondRowEndSecondColumn {
+  background-color: orange;
+  grid-column-end: 3;
+  grid-row-end: 3;
+}
+
+.thirdRowSecondColumn {
+  background-color: red;
+  grid-column: 2;
+  grid-row: 3;
+}
+
+.firstRowThirdColumn {
+  background-color: magenta;
+  grid-column: 3;
+  grid-row: 1;
+}
+
+.secondRowThirdColumn {
+  background-color: navy;
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.firstRowFourthColumn {
+  background-color: green;
+  grid-column: 4;
+  grid-row: 1;
+}
+
+.secondRowFourthColumn {
+  background-color: pink;
+  grid-column: 4;
+  grid-row: 2;
+}
+
+.firstAutoRowSecondAutoColumn {
+  grid-row: 1 / auto;
+  grid-column: 2 / auto;
+}
+
+.autoLastRowAutoLastColumn {
+  grid-row: auto / -1;
+  grid-column: auto / -1;
+}
+
+.autoSecondRowAutoFirstColumn {
+  grid-row: auto / 2;
+  grid-column: auto / 1;
+}
+
+.firstRowBothColumn {
+  grid-row: 1;
+  grid-column: 1 / -1;
+}
+
+.secondRowBothColumn {
+  grid-row: 2;
+  grid-column: 1 / -1;
+}
+
+.bothRowFirstColumn {
+  grid-row: 1 / -1;
+  grid-column: 1;
+}
+
+.bothRowSecondColumn {
+  grid-row: 1 / -1;
+  grid-column: 2;
+}
+
+.bothRowBothColumn {
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+}
+
+/* Auto column / row. */
+.autoRowAutoColumn {
+  background-color: pink;
+  grid-column: auto;
+  grid-row: auto;
+}
+
+.firstRowAutoColumn {
+  background-color: blue;
+  grid-column: auto;
+  grid-row: 1;
+}
+
+.secondRowAutoColumn {
+  background-color: purple;
+  grid-column: auto;
+  grid-row: 2;
+}
+
+.thirdRowAutoColumn {
+  background-color: navy;
+  grid-column: auto;
+  grid-row: 3;
+}
+
+.autoRowFirstColumn {
+  background-color: lime;
+  grid-column: 1;
+  grid-row: auto;
+}
+
+.autoRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: auto;
+}
+
+.autoRowThirdColumn {
+  background-color: magenta;
+  grid-column: 3;
+  grid-row: auto;
+}
+
+.autoRowAutoColumnSpanning2 {
+  background-color: maroon;
+  grid-column: span 2;
+  grid-row: auto;
+}
+
+.autoRowSpanning2AutoColumn {
+  background-color: aqua;
+  grid-column: auto;
+  grid-row: span 2;
+}
+
+.autoRowSpanning2AutoColumnSpanning3 {
+  background-color: olive;
+  grid-column: span 3;
+  grid-row: span 2;
+}
+
+.autoRowSpanning3AutoColumnSpanning2 {
+  background-color: indigo;
+  grid-column: span 2;
+  grid-row: span 3;
+}
+
+.autoRowFirstColumnSpanning2 {
+  background-color: maroon;
+  grid-column: 1 / span 2;
+  grid-row: auto;
+}
+
+.autoRowSecondColumnSpanning2 {
+  background-color: olive;
+  grid-column: 2 / span 2;
+  grid-row: auto;
+}
+
+.firstRowSpanning2AutoColumn {
+  background-color: maroon;
+  grid-column: auto;
+  grid-row: 1 / span 2;
+  height: 100%;
+}
+
+.secondRowSpanning2AutoColumn {
+  background-color: olive;
+  grid-column: auto;
+  grid-row: 2 / span 2;
+  height: 100%;
+}
+
+/* Grid element flow. */
+.gridAutoFlowColumnSparse {
+  grid-auto-flow: column;
+}
+
+.gridAutoFlowColumnDense {
+  grid-auto-flow: column dense;
+}
+
+.gridAutoFlowRowSparse {
+  grid-auto-flow: row;
+}
+
+.gridAutoFlowRowDense {
+  grid-auto-flow: row dense;
+}
+
+/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
+.constrainedContainer {
+  width: 10px;
+  height: 10px;
+}
+
+.unconstrainedContainer {
+  width: 1000px;
+  height: 1000px;
+}
+
+.sizedToGridArea {
+  font: 10px/1 Ahem;
+  /* Make us fit our grid area. */
+  width: 100%;
+  height: 100%;
+}
+
+.verticalRL {
+  writing-mode: vertical-rl;
+}
+.verticalLR {
+  writing-mode: vertical-lr;
+}
+.horizontalTB {
+  writing-mode: horizontal-tb;
+}
+.directionRTL {
+  direction: rtl;
+}
+.directionLTR {
+  direction: ltr;
+}