--- 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;
+}