Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-grid/alignment/self-baseline
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
72 files changed, 3549 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html
new file mode 100644
index 0000000000..c85fd77ef9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html
new file mode 100644
index 0000000000..2473bb5d4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 125px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
new file mode 100644
index 0000000000..1b563f1f42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html
new file mode 100644
index 0000000000..7d9ebecb8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-002-b-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row; }
+.grid { grid: 60px 60px 75px 100px / 125px; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
new file mode 100644
index 0000000000..8593ea1abc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html
new file mode 100644
index 0000000000..700fd26097
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 175px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html
new file mode 100644
index 0000000000..cd097c1d48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area:nth-child(1) { width: 70px;  }
+.area:nth-child(2) { width: 80px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left;  }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 70px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 80px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block {
+   width: 375px;
+   height: 100px;
+}
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item ">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html
new file mode 100644
index 0000000000..2372ac1931
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 100px / 70px 80px 100px 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+}
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html
new file mode 100644
index 0000000000..d589acb374
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR top"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html
new file mode 100644
index 0000000000..c7f49bf24a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all the items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 125px / 60px 75px 75px 125px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-rows: 150px; }
+</style>
+
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item verticalLR  extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item horizontalTB extraLeftPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html
new file mode 100644
index 0000000000..75a366fc40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 140px; }
+.block.verticalLR, .block.verticalRL {
+   width: 140px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div style="direction: rtl;" class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div style="direction: rtl;" class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html
new file mode 100644
index 0000000000..3bfa2d2079
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context. All items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 60px 60px 75px 100px / 140px; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR  extraLeftPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+
+<br clear="all">
+
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html
new file mode 100644
index 0000000000..610b2ad0a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 100px; }
+.block.verticalLR, .block.verticalRL {
+   width: 100px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html
new file mode 100644
index 0000000000..34edced2b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 75px 100px 125px / 100px; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html
new file mode 100644
index 0000000000..59a0e33959
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item, .area.verticalRL > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 100px; }
+.area:nth-child(4) { width: 100px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html
new file mode 100644
index 0000000000..e0966bb6e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 60px 100px 100px / 150px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-columns: 125px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html
new file mode 100644
index 0000000000..7876656c20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+div {
+  float: left;
+  width: 200px;
+  height: 200px;
+  background: green;
+}
+</style>
+<div></div>
+<div style="margin-top: 100px"></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html
new file mode 100644
index 0000000000..5398b7e9c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121761">
+<link rel="match" href="grid-self-baseline-008-ref.html">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test baseline alignment with percentage track sizing functions and grid items being or containing replaced elements with aspect ratio and percentage sizes." />
+<style>
+.grid {
+  display: grid;
+  width: 400px;
+  grid-template-columns: 25% 25% 25% 25%;
+  line-height: 0;
+}
+.percent {
+  width: 100%;
+}
+canvas {
+  background: green;
+}
+</style>
+<div class="grid alignItemsBaseline">
+  <canvas width="100" height="200"></canvas>
+  <canvas width="200" height="400" class="percent"></canvas>
+  <div>
+    <canvas width="100" height="100" class="percent"></canvas>
+    <canvas width="100" height="100" class="percent"></canvas>
+  </div>
+  <div class="percent">
+    <canvas width="100" height="100" class="percent"></canvas>
+    <canvas width="100" height="100" class="percent"></canvas>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html
new file mode 100644
index 0000000000..5b2ecaaab0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</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/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on a fixed grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: start;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX<br>XX X</div>
+    <div style="top: 0px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html
new file mode 100644
index 0000000000..fb4e3f1a4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</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/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and content-distribution.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: space-evenly;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 25px; left: 0px;">XX<br>XXXX<br>XX</div>
+  <div style="top: 73px; left: 0px;">XX X</div>
+  <div style="top: 17px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html
new file mode 100644
index 0000000000..c06394ad58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</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/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and empty items .">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: start;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  font: 20px/1 Ahem;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 0px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 24px; left: 50px" class="big">X</div>
+  <div style="top: 44px; left: 0px;">XX X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html
new file mode 100644
index 0000000000..e877b81480
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</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/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: start;
+  vertical-align: top;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX<br>XX X</div>
+  <div style="top: 0px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html
new file mode 100644
index 0000000000..21cc0b8ac2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</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/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and gutters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  grid-row-gap: 20px;
+  vertical-align: top;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX</div>
+  <div style="top: 58px; left: 0px;">XX X</div>
+  <div style="top: 0px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html
new file mode 100644
index 0000000000..ed3449babe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</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/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and empty items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  font: 10px/1 Ahem;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 0px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 24px; left: 50px" class="big">X</div>
+  <div style="top: 44px; left: 0px;">XX X</div>
+</div>
+<div class="grid"">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html
new file mode 100644
index 0000000000..4b854119b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</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/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
+  <div style="top: 20px; left: 15px;">X</div>
+  <div style="top: 30px; left: 15px;">X X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html
new file mode 100644
index 0000000000..6eb65039e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</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/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and content-distribution.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: space-evenly;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 23px;">XXX<br>XXX</div>
+  <div style="top: 0px; left: 72px;">X</div>
+  <div style="top: 10px; left: 72px;">X</div>
+  <div style="top: 20px; left: 33px;">X</div>
+  <div style="top: 30px; left: 33px;">X</div>
+  <div style="top: 30px; left: 72px;">X</div>
+  <div style="top: 50px; left: 18px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html
new file mode 100644
index 0000000000..a173d290ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</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/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and empty items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 0px; left: 50px;">X</div>
+  <div style="top: 10px; left: 50px;">X</div>
+  <div style="top: 30px; left: 50px;">X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html
new file mode 100644
index 0000000000..0c1c1dbb36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</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/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.big { font-size: 20px; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
+  <div style="top: 20px; left: 15px;">X</div>
+  <div style="top: 30px; left: 15px;">X X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html
new file mode 100644
index 0000000000..dba173a439
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</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/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and gutters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  grid-column-gap: 20px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 5px;">XXX<br>XXX</div>
+  <div style="top: 0px; left: 55px;">X</div>
+  <div style="top: 10px; left: 55px;">X</div>
+  <div style="top: 20px; left: 15px;">X</div>
+  <div style="top: 30px; left: 15px;">X</div>
+  <div style="top: 30px; left: 55px;">X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html
new file mode 100644
index 0000000000..ff5903459b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</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/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and empty items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 0px; left: 50px;">X</div>
+  <div style="top: 10px; left: 50px;">X</div>
+  <div style="top: 30px; left: 50px;">X</div>
+  <div style="top: 50px; left: 0px;">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html
new file mode 100644
index 0000000000..1b8130d7b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div class="item">
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html
new file mode 100644
index 0000000000..556009dfde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html
new file mode 100644
index 0000000000..735ea55786
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin-bottom: 0px; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block"><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalRL extraTopPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html
new file mode 100644
index 0000000000..c196cd35c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item verticalLR extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+
+<br clear="all">
+
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item verticalRL extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html
new file mode 100644
index 0000000000..fd966d16a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin-bottom: 0px; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block" ><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div></div>
+<div class="block"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block" ><div class="item verticalRL extraTopPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html
new file mode 100644
index 0000000000..287cb80fd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR extraTopPadding">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR extraBottomPadding">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL extraTopPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL extraBottomPadding">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html
new file mode 100644
index 0000000000..be610d4f7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline; }
+.left { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block verticalLR"><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraRightPadding left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB extraLeftPadding left">É</div><div class="item horizontalTB left">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html
new file mode 100644
index 0000000000..673c9ff208
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.column { grid-auto-flow: row; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item">É</div>
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html
new file mode 100644
index 0000000000..c38b6c7611
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   position: relative;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.inline { display: inline-block; }
+.item { display: inline-block; }
+.item.horizontalTB:not(.bottom) { margin-left: 0px; }
+.bottom { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html
new file mode 100644
index 0000000000..f816e893ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalRL extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html
new file mode 100644
index 0000000000..6053b38a6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html
new file mode 100644
index 0000000000..c034040b5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item verticalLR extraRightPadding ">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL extraLeftPadding">É</div>
+    <div class="item verticalRL extraRightPadding ">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
new file mode 100644
index 0000000000..cba725f425
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 10px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html
new file mode 100644
index 0000000000..6018514242
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraRightPadding">É</div>
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html
new file mode 100644
index 0000000000..cf19544be8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html
new file mode 100644
index 0000000000..801474df57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html
new file mode 100644
index 0000000000..9a7a53969d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.item.horizontalTB { margin-left: 0px; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html
new file mode 100644
index 0000000000..6dd235a7b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html
@@ -0,0 +1,54 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html
new file mode 100644
index 0000000000..795926615f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { float: left; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html
new file mode 100644
index 0000000000..18f581620d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item horizontalTB extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html
new file mode 100644
index 0000000000..1ce8267ee7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html
new file mode 100644
index 0000000000..1f2e3860b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html
@@ -0,0 +1,54 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html
new file mode 100644
index 0000000000..fb68579d9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
+.item.horizontalTB  { margin: 10px 6px 4px 0px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block"><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div></div>
+<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html
new file mode 100644
index 0000000000..a27cb67898
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item extraTopPadding">É</div>
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html
new file mode 100644
index 0000000000..51c5f77da3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html
new file mode 100644
index 0000000000..654c17cd9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item horizontalTB extraTopPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
new file mode 100644
index 0000000000..6f5641448d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left:15.5px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html
new file mode 100644
index 0000000000..ae7b6bf36e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html
new file mode 100644
index 0000000000..02d3feb126
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html
new file mode 100644
index 0000000000..af7ca16d63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html
new file mode 100644
index 0000000000..ef6b45c9c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.item.horizontalTB { margin-left: 0px; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html
new file mode 100644
index 0000000000..9aa00a7114
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context. No item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html
new file mode 100644
index 0000000000..b72fc8817a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html
new file mode 100644
index 0000000000..2ae2f4fba6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item horizontalTB extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html
new file mode 100644
index 0000000000..bab3592266
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block directionRTL"><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html
new file mode 100644
index 0000000000..d2f08642fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html
new file mode 100644
index 0000000000..da72a5f017
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalRL { margin-bottom: 0px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div></div>
+<div class="block directionRTL"><div class="item verticalRL extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html
new file mode 100644
index 0000000000..0d40ce288d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item extraTopPadding">É</div>
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html
new file mode 100644
index 0000000000..4011c69142
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block directionRTL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block directionRTL"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html
new file mode 100644
index 0000000000..40f1e0796e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item horizontalTB extraTopPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
new file mode 100644
index 0000000000..30658b8cc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalLR">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 16px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html
new file mode 100644
index 0000000000..49bab61ca0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-grid/alignment/self-baseline
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip