Adding upstream version 1:115.7.0.upstream/1%115.7.0 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 17:32:43 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 17:32:43 +0000
commit: 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
tree: a68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/css-grid/masonry/tentative
parent: Initial commit. (diff)
download: thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
111 files changed, 12034 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001-ref.html
new file mode 100644
index 0000000000..fff6cf2138
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001-ref.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `align-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: 1em auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  height: 100px;
+  align-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-top:30px; grid-row:span 2; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001.html
new file mode 100644
index 0000000000..dfefd998c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `align-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-align-content-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  height: 100px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002-ref.html
new file mode 100644
index 0000000000..67318b323a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002-ref.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `align-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: 1em auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  align-items: start;
+  writing-mode: vertical-lr;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-right:30px; grid-row:span 2; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002.html
new file mode 100644
index 0000000000..75b82654fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `align-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-align-content-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  writing-mode: vertical-lr;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003-ref.html
new file mode 100644
index 0000000000..9780d5f5dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003-ref.html
@@ -0,0 +1,127 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `align-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch auto;
+  grid-template-rows: repeat(4,auto);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 0 3px 2px 0;
+  width: 100px;
+  height: 120px;
+  align-content: center;
+  justify-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { grid-row: span 2; padding: 3px 11px 1px 13px; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003.html
new file mode 100644
index 0000000000..ae58e79cb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003.html
@@ -0,0 +1,129 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `align-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-align-content-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,auto);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 0 3px 2px 0;
+  width: 100px;
+  height: 120px;
+  align-content: center;
+  justify-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding: 3px 11px 1px 13px; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004-ref.html
new file mode 100644
index 0000000000..de11c836b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004-ref.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `align-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch auto;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  justify-items: start;
+  writing-mode: vertical-rl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { grid-column: span 2; padding-top: 30px; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004.html
new file mode 100644
index 0000000000..3f07aa1fe7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004.html
@@ -0,0 +1,127 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `align-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-align-content-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  writing-mode: vertical-rl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-top: 30px; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-001-ref.html
new file mode 100644
index 0000000000..3b22489fdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-001-ref.html
@@ -0,0 +1,120 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `align-tracks` alignment</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; direction:ltr; }
+.swr { writing-mode: sideways-lr; direction:rtl; }
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  background: content-box silver;
+  color: #444;
+  padding: 1px 2px;
+  block-size: 30px;
+  vertical-align: top;
+}
+grid.vll, grid.vrr, grid.vlr, grid.vrl, grid.swl, grid.swr {
+  inline-size: 22px;
+}
+
+grid > div {
+  display: inline-flex;
+  inline-size: min-content;
+}
+
+grid2 {
+  display: inline-grid;
+  row-gap: 1px;
+  grid-template-columns: 8px;
+  vertical-align: top;
+  block-size: 21px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  writing-mode: horizontal-tb;
+  direction: ltr;
+}
+grid2:nth-child(1) {
+  grid-template-rows: 8px 8px;
+  margin-inline-end: 2px;
+}
+grid2:nth-child(2) {
+  grid-template-rows: 12px 8px;
+}
+
+.vll grid2:nth-child(1) { block-size:17px; }
+.vrr grid2:nth-child(1) { block-size:17px; }
+.vlr grid2:nth-child(1) { block-size:17px; }
+.vrl grid2:nth-child(1) { block-size:17px; }
+.swl grid2:nth-child(1) { block-size:17px; }
+.swr grid2:nth-child(1) { block-size:17px; }
+
+.vll grid2:nth-child(2) { grid-template-rows:8px 8px; }
+.vrr grid2:nth-child(2) { grid-template-rows:8px 8px; }
+.vlr grid2:nth-child(2) { grid-template-rows:8px 8px; }
+.vrl grid2:nth-child(2) { grid-template-rows:8px 8px; }
+.swl grid2:nth-child(2) { grid-template-rows:8px 8px; }
+.swr grid2:nth-child(2) { grid-template-rows:8px 8px; }
+
+grid2:nth-child(1) > item:nth-child(1) { background: blue; inline-size:8px; block-size:8px; z-index:1; }
+grid2:nth-child(2) > item:nth-child(1) { background: magenta; inline-size:8px; block-size:12px; z-index:1; }
+grid2:nth-child(1) > item:nth-child(2) { background: lime; inline-size:12px; block-size:8px; z-index:2; }
+grid2:nth-child(2) > item:nth-child(2) { background: purple; inline-size:8px; block-size:8px; z-index:2; }
+</style>
+</head>
+<body>
+<div style="display:none">
+<grid>
+ <div>
+  <grid2>
+    <item></item>
+    <item></item>
+  </grid2><grid2>
+    <item></item>
+    <item></item>
+  </grid2>
+ </div>
+</grid>
+</div>
+
+<script>
+let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
+let ats = [ "start", "self-start", "center", "end", "self-end", "stretch", "space-between", "space-around", "space-evenly", ];
+let acs = [ "start", "center", "end", ];
+let grid = document.getElementsByTagName('grid')[0];
+for (const ac of acs) {
+  for (const at of ats) {
+    for (const wm of wms) {
+      let e = grid.cloneNode(true);
+      e.className = wm;
+      e.children[0].children[1].style.className = wm;
+      e.children[0].children[0].style.alignContent = at;
+      e.children[0].children[1].style.alignContent = at;
+      e.style.alignContent = ac;
+      document.body.appendChild(e);
+    }
+  }
+}
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-001.html
new file mode 100644
index 0000000000..4ff3e61087
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-001.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `align-tracks` alignment</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-align-tracks-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; direction:ltr; }
+.swr { writing-mode: sideways-lr; direction:rtl; }
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(2,auto);
+  grid-template-rows: masonry;
+  background: content-box silver;
+  color: #444;
+  padding: 1px 2px;
+  block-size: 30px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  writing-mode: horizontal-tb;
+  direction: ltr;
+}
+
+item:nth-child(1) { background: blue; inline-size:8px; block-size:8px; }
+item:nth-child(2) { background: magenta; inline-size:8px; block-size:12px; }
+item:nth-child(3) { background: lime; inline-size:12px; block-size:8px; }
+item:nth-child(4) { background: purple; inline-size:8px; block-size:8px; }
+</style>
+</head>
+<body>
+<div style="display:none">
+<grid>
+  <item></item>
+  <item></item>
+  <item></item>
+  <item></item>
+</grid>
+</div>
+
+<script>
+let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
+let ats = [ "start", "self-start", "center", "end", "self-end", "stretch", "space-between", "space-around", "space-evenly", ];
+let acs = [ "start", "center", "end", ];
+let grid = document.getElementsByTagName('grid')[0];
+for (const ac of acs) {
+  for (const at of ats) {
+    for (const wm of wms) {
+      let e = grid.cloneNode(true);
+      e.className = wm;
+      e.style.alignTracks = at;
+      e.style.alignContent = ac;
+      document.body.appendChild(e);
+    }
+  }
+}
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-multi-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-multi-001-ref.html
new file mode 100644
index 0000000000..b0bf357861
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-multi-001-ref.html
@@ -0,0 +1,116 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with multiple `align-tracks` values</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:15px/1 "Courier New", monospace; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(8,50px); /*intentionally one more than align-tracks values*/
+  gap: 3px 5px;
+  padding: 10px 3px 1px 7px;
+  border: solid;
+  border-width: 1px 7px 3px 5px;
+  background: lightgrey content-box;
+  height: 500px;
+  vertical-align: top;
+}
+.fallback { grid-template-columns:3px; padding:0; border:0; }
+item {
+  background: grey;
+  height: 2em;
+  position: relative;
+  border: 1px solid;
+}
+.purple { background:purple; height:auto; border-top:3px solid; }
+z { display: block; background: yellow; height: 0; width:80%; }
+a {
+ position: absolute;
+ inset: 0;
+ top: auto;
+ border: 2px solid lime;
+}
+masonry-track {
+  display: grid;
+  gap: 3px 5px;
+}
+masonry-track:nth-child(1) { align-content:start }
+masonry-track:nth-child(2) { align-content:end }
+masonry-track:nth-child(3) { align-content:center }
+masonry-track:nth-child(4) { align-content:stretch; grid-template-rows: auto auto repeat(3,max-content) }
+masonry-track:nth-child(5) { align-content:space-between }
+masonry-track:nth-child(6) { align-content:space-around }
+masonry-track:nth-child(7) { align-content:space-evenly }
+masonry-track:nth-child(8) { align-content:space-evenly }
+</style>
+</head>
+<body>
+<grid>
+ <masonry-track>
+  <item style="width:25px">1</item>
+  <item>11</item>
+  <item class="purple">20</item>
+  <item class="purple">24</item>
+  <item>29</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple" style="height:50px">2</item>
+  <item class="purple" style="writing-mode:vertical-rl">16 vertical-rl</item>
+ </masonry-track>
+ <masonry-track>
+  <item style="margin-left:5px">3</item>
+  <item class="purple">12<z></z></item>
+  <item>17</item>
+  <item>25</item>
+  <item>33</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple" style="margin-top:5px">4</item>
+  <item class="purple">10</item>
+  <item>15</item>
+  <item>23</item>
+  <item>31</item>
+ </masonry-track>
+ <masonry-track>
+  <item>5</item>
+  <item>13</item>
+  <item>21</item>
+  <item class="purple">28</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">6<a></a></item>
+  <item>9<a></a></item>
+  <item class="purple">18</item>
+  <item class="purple">22</item>
+  <item>27</item>
+ </masonry-track>
+ <masonry-track>
+  <item>7</item>
+  <item class="purple">14<z></z><a></a></item>
+  <item>19</item>
+  <item class="purple">26</item>
+  <item class="purple">30</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple" style="writing-mode:vertical-lr">8 vertical-lr</item>
+  <item class="purple">32</item>
+ </masonry-track>
+</grid>
+<grid class="fallback" style="align-content:start">
+  <item></item>
+</grid>
+<grid class="fallback" style="align-content:center">
+  <item></item>
+</grid>
+<grid class="fallback" style="align-content:center">
+  <item></item>
+</grid>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-multi-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-multi-001.html
new file mode 100644
index 0000000000..0e20217da8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-multi-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with multiple `align-tracks` values</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-align-tracks-multi-001-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:15px/1 "Courier New", monospace; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-rows: masonry;
+  grid-template-columns: repeat(8,50px); /*intentionally one more than align-tracks values*/
+  gap: 3px 5px;
+  padding: 10px 3px 1px 7px;
+  border: solid;
+  border-width: 1px 7px 3px 5px;
+  background: lightgrey content-box;
+  align-tracks: start,end,center,stretch,space-between,space-around,space-evenly;
+  height: 500px;
+  vertical-align: top;
+}
+.fallback { grid-template-columns:3px; padding:0; border:0; }
+item {
+  background: grey;
+  height: 2em;
+  position: relative;
+  border: 1px solid;
+}
+item:nth-child(2n) { background:purple; height:auto; border-top:3px solid; }
+z { display: block; background: yellow; height: 20%; width:80%; }
+a {
+ position: absolute;
+ inset: 0;
+ top: auto;
+ border: 2px solid lime;
+}
+</style>
+</head>
+<body>
+<grid>
+  <item style="width:50%">1</item>
+  <item style="height:10%">2</item>
+  <item style="margin-left:10%">3</item>
+  <item style="margin-top:10%">4</item>
+  <item>5</item>
+  <item>6<a></a></item>
+  <item>7</item>
+  <item style="writing-mode:vertical-lr">8 vertical-lr</item>
+  <item>9<a></a></item>
+  <item>10</item>
+  <item>11</item>
+  <item>12<z></z></item>
+  <item>13</item>
+  <item><z></z>14<a></a></item>
+  <item>15</item>
+  <item style="writing-mode:vertical-rl">16 vertical-rl</item>
+  <item>17</item>
+  <item>18</item>
+  <item>19</item>
+  <item>20</item>
+  <item>21</item>
+  <item>22</item>
+  <item>23</item>
+  <item>24</item>
+  <item>25</item>
+  <item>26</item>
+  <item>27</item>
+  <item>28</item>
+  <item>29</item>
+  <item>30</item>
+  <item>31</item>
+  <item>32</item>
+  <item>33</item>
+</grid>
+<grid class="fallback" style="align-tracks:space-between">
+  <item></item>
+</grid>
+<grid class="fallback" style="align-tracks:space-around">
+  <item></item>
+</grid>
+<grid class="fallback" style="align-tracks:space-evenly">
+  <item></item>
+</grid>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-001-ref.html
new file mode 100644
index 0000000000..0712f14bb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-001-ref.html
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `align-tracks:stretch`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-rows: 500px;
+  grid-template-columns: 150px 100px 50px;
+  gap: 3px 5px;
+  padding: 10px;
+  border: 3px solid;
+  background: lightgrey content-box;
+  height: 500px;
+}
+masonry-track {
+  display: grid;
+  gap: 3px 5px;
+  align-content: stretch;
+  height: 500px;
+}
+masonry-track:nth-child(1) {
+  grid-template-columns: 150px;
+  grid-template-rows: min-content min-content min-content auto min-content min-content min-content;
+}
+masonry-track:nth-child(2) {
+  grid-template-columns: 100px;
+  grid-template-rows: auto 50px auto auto 30px;
+}
+masonry-track:nth-child(3) {
+  grid-template-columns: 50px;
+  grid-template-rows: 30px 30px 30px auto 30px 30px auto auto;
+}
+item {
+  background: grey;
+  height: 30px;
+  position: relative;
+}
+.purple { background:purple; height:auto; }
+z { display: block; background: yellow; height: 20%; width:80%; }
+a {
+ position: absolute;
+ inset: 0;
+ top: auto;
+ border: 2px solid lime;
+}
+</style>
+</head>
+<body>
+<grid>
+ <masonry-track>
+  <item style="border:10px solid; margin: 10px 0 5px 3px;">1</item>
+  <item>9<a></a></item>
+  <item>11</item>
+  <item class="purple">12<br><br><z></z></item>
+  <item class="purple" style="height:116px; border:2px solid; margin:1px">14<z></z><a></a></item>
+  <item style="align-self:start" class="purple">16</item>
+  <item>17</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item style="height:40px; margin-top:10px" class="purple">4</item>
+  <item class="purple">6<a></a></item>
+  <item style="writing-mode:vertical-lr" class="purple">8 vertical</item>
+  <item>19</item>
+ </masonry-track>
+ <masonry-track>
+  <item>3</item>
+  <item>5</item>
+  <item>7</item>
+  <item class="purple">10 A<br>B</item>
+  <item>13</item>
+  <item>15</item>
+  <item style="margin:auto 0" class="purple">18</item>
+  <item style="margin-top: auto" class="purple">20</item>
+ </masonry-track>
+</grid>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-001.html
new file mode 100644
index 0000000000..d2fede7a8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-001.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `align-tracks:stretch`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-align-tracks-stretch-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-rows: masonry;
+  grid-template-columns: 150px 100px 50px;
+  gap: 3px 5px;
+  padding: 10px;
+  border: 3px solid;
+  background: lightgrey content-box;
+  align-tracks: stretch;
+  height: 500px;
+}
+item {
+  background: grey;
+  height: 30px;
+  position: relative;
+}
+item:nth-child(2n) { background:purple; height:auto; }
+item:nth-child(1) { border:10px solid; margin: 10px 0 5px 3px; }
+z { display: block; background: yellow; height: 20%; width:80%; }
+a {
+ position: absolute;
+ inset: 0;
+ top: auto;
+ border: 2px solid lime;
+}
+</style>
+</head>
+<body>
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="max-height:40px; margin-top:10px">4</item>
+  <item>5</item>
+  <item>6<a></a></item>
+  <item>7</item>
+  <item style="writing-mode:vertical-lr">8 vertical</item>
+  <item>9<a></a></item>
+  <item>10 A<br>B</item>
+  <item>11</item>
+  <item>12<br><br><z></z></item>
+  <item>13</item>
+  <item style="max-height:120px; border:2px solid; box-sizing:border-box; margin:1px">14<z></z><a></a></item>
+  <item>15</item>
+  <item style="align-self:end">16</item>
+  <item>17</item>
+  <item style="margin:auto 0">18</item>
+  <item>19</item>
+  <item style="margin-top: auto">20</item>
+</grid>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002-ref.html
new file mode 100644
index 0000000000..01f24ea986
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `align-tracks:stretch`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:6px/1 monospace; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: 30px;
+  gap: 1px 2px;
+  padding: 2px 3px 1px 1px;
+  border-style: solid;
+  border-width: 1px 7px 3px 5px;
+  border-inline-start-color: magenta;
+  border-block-start-color: blue;
+  background: lightgrey content-box;
+  block-size: 25px;
+  vertical-align: top;
+}
+item {
+  border-inline-start: 1px solid magenta;
+  border-block-start: 2px solid blue;
+}
+item:nth-child(2n+1) { background: grey; }
+item:nth-child(2n) { background: cyan; }
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; direction:ltr; }
+.swr { writing-mode: sideways-lr; direction:rtl; }
+</style>
+</head>
+<body>
+<div style="display:none">
+<grid>
+  <item>1</item>
+  <item>2a<br>2b</item>
+</grid>
+</div>
+<script>
+let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
+let grid = document.getElementsByTagName('grid')[0];
+for (const reorder of [false, true]) {
+  for (const cb_wm of wms) {
+    for (const child_wm of wms) {
+      let e = grid.cloneNode(true);
+      e.className = cb_wm;
+      e.children[1].className = child_wm;
+      if (reorder) {
+        e.children[0].style.order = '1';
+      }
+      document.body.appendChild(e);
+    }
+  }
+}
+</script>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002.html
new file mode 100644
index 0000000000..1631ac3c07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-tracks/masonry-align-tracks-stretch-002.html
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `align-tracks:stretch`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-align-tracks-stretch-002-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:6px/1 monospace; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-rows: masonry;
+  grid-template-columns: 30px;
+  gap: 1px 2px;
+  padding: 2px 3px 1px 1px;
+  border-style: solid;
+  border-width: 1px 7px 3px 5px;
+  border-inline-start-color: magenta;
+  border-block-start-color: blue;
+  background: lightgrey content-box;
+  align-tracks: stretch;
+  block-size: 25px;
+  vertical-align: top;
+}
+item {
+  border-inline-start: 1px solid magenta;
+  border-block-start: 2px solid blue;
+}
+item:nth-child(2n+1) { background: grey; }
+item:nth-child(2n) { background: cyan; }
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; direction:ltr; }
+.swr { writing-mode: sideways-lr; direction:rtl; }
+</style>
+</head>
+<body>
+<div style="display:none">
+<grid>
+  <item>1</item>
+  <item>2a<br>2b</item>
+</grid>
+</div>
+<script>
+let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
+let grid = document.getElementsByTagName('grid')[0];
+for (const reorder of [false, true]) {
+  for (const cb_wm of wms) {
+    for (const child_wm of wms) {
+      let e = grid.cloneNode(true);
+      e.className = cb_wm;
+      e.children[1].className = child_wm;
+      if (reorder) {
+        e.children[0].style.order = '1';
+      }
+      document.body.appendChild(e);
+    }
+  }
+}
+</script>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001-ref.html
new file mode 100644
index 0000000000..cdb6d4fdf8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: lime;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:15px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="fb" style="padding-top:27px">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="fb pbe" style="padding-top:27px">A<br>B</span><span class="lb" style="margin-bottom:7px">M<br>N</span></div>
+<div class="grid vl"><span class="fb" style="padding-left:18px">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="lb" style="padding-left:2px">M<br>N</span></div>
+<div class="grid vr"><span class="fb" style="padding-right:27px">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="fb pbe" style="padding-right:27px">A<br>B</span><span class="lb" style="margin-left:7px">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vl" style="inline-size:100px"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl" style="padding-left:18px">A<br>B</span><span class="vl">M<br>N</span></div>
+<div class="grid c hl"><span class="fb vl pbe" style="padding-left:18px">A<br>B</span><span class="vl">M<br>N</span></div>
+<div class="grid c vl"><span class="fb hl" style="padding-top:27px">A<br>B</span><span class="hl">M<br>N</span></div>
+<div class="grid c vl"><span class="fb hl pbs" style="padding-top:22px">A<br>B</span><span class="hl">M<br>N</span></div>
+<div class="grid c vr"><span class="fb hl" style="padding-top:27px">A<br>B</span><span class="hl">M<br>N</span></div>
+<div class="grid c vr" style="inline-size:100px"><span class="hl pbe" style="justify-self:start; padding-top:27px">A<br>B</span><span class="fb hl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001.html
new file mode 100644
index 0000000000..60d11653b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="masonry-grid-item-content-baseline-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: masonry / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / masonry;
+}
+
+span {
+  background: lime;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:15px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; }
+.lb { align-content:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vl" style="inline-size:100px"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr" style="inline-size:100px"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001-ref.html
new file mode 100644
index 0000000000..817f19ff84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001-ref.html
@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<!-- TODO: baseline alignment affects intrinsic inline size
+<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid c vll" style="height:80px"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<!-- TODO
+<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001.html
new file mode 100644
index 0000000000..bb486d983d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="masonry-grid-item-self-baseline-001-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: masonry / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+}
+.c {
+  grid: repeat(4, auto) / masonry;
+}
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<!-- TODO: baseline alignment affects intrinsic inline size
+<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid c vll" style="height:80px"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<!-- TODO
+<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a-ref.html
new file mode 100644
index 0000000000..ddce4e34a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+  height: 100px;
+  width: 100px;
+}
+.c { grid: repeat(4, auto) / auto; }
+.ae { align-content: end; }
+.je { justify-content: end; }
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<div class="grid ae"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid ae"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid ae vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid ae vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid je c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid je c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid je c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid je c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a.html
new file mode 100644
index 0000000000..f89217c68e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a.html
@@ -0,0 +1,105 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="masonry-grid-item-self-baseline-002a-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: masonry / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+  align-tracks: end;
+  justify-tracks: end;
+  masonry-auto-flow: next;
+  height: 100px;
+  width: 100px;
+}
+.c { grid: repeat(4, auto) / masonry; }
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; background:yellow; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b-ref.html
new file mode 100644
index 0000000000..44d8266436
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b-ref.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+  height: 100px;
+  width: 100px;
+}
+.c { grid: repeat(4, auto) / auto; }
+.ae { align-content: end; }
+.je { justify-content: end; }
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<!-- TODO: baseline alignment is wrong (bug 1633610)
+<div class="grid je c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid je c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid je c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid je c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid ae"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b.html
new file mode 100644
index 0000000000..eae435707d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b.html
@@ -0,0 +1,101 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="masonry-grid-item-self-baseline-002b-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: masonry / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+  align-tracks: end;
+  justify-tracks: end;
+  masonry-auto-flow: next;
+  height: 100px;
+  width: 100px;
+}
+.c { grid: repeat(4, auto) / masonry; }
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; background:yellow; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<!-- TODO: baseline alignment is wrong (bug 1633610)
+<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001-ref.html
new file mode 100644
index 0000000000..c9318ae0bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001-ref.html
@@ -0,0 +1,333 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+.columns {
+  width: 330px;
+  columns: 6;
+  column-fill: auto;
+  column-gap: 1px;
+  background-color: rgba(80,80,80,.2);
+  margin-bottom: 10px;
+}
+.columns:nth-child(2n) {
+  background-color: rgba(10,100,10,.5);
+}
+.grid {
+  display: flow-root;
+  border: 1px solid;
+  gap: 2px;
+}
+.first { border-bottom-width:0; height:calc(100% - 1px); }
+.middle { border-top-width:0; border-bottom-width:0; height:100%; }
+.last { border-top-width:0; }
+x {
+  background: cyan;
+  height: 5px;
+}
+y {
+  background: blue;
+  height: 10px;
+}
+z {
+  background: pink;
+  height: 12px;
+}
+masonry-track {
+  float: left;
+  height: 100%;
+  gap: 2px;
+}
+x,y,z,masonry-track { display: block; }
+masonry-track > * { margin-bottom:2px; }
+.last > masonry-track > :last-child { margin-bottom:0; }
+masonry-track:nth-child(1) { width: 10px; }
+masonry-track:nth-child(2) { width: 15px; margin-left:2px; }
+masonry-track:nth-child(3) { width: 20px; margin-left:2px; }
+</style></head>
+<body>
+<wrapper>
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x><x></x></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x><x></x><z></z><z></z></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x><y style="height:9px"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:1px">
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><y style="height:1px"></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid last" style="height:12px">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><y></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y></y><x></x><x></x></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z><x></x><y></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:24px">
+    <masonry-track><x></x><x></x><y></y></masonry-track>
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y></y></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z><x></x><y style="height:5px;"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:31px">
+    <masonry-track><z></z><z></z></masonry-track>
+    <masonry-track><x></x><x></x><x></x><x></x></masonry-track>
+    <masonry-track><y style="height:5px"></y><x></x><x></x><y></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y style="height:6px;"></y></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:4px;"></y><z></z><z></z></masonry-track>
+    <masonry-track><x></x><y></y><x></x><x></x><y style="height:5px;"></y></masonry-track>
+    <masonry-track><x></x><x></x><x></x><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid last" style="height:5px">
+    <masonry-track></masonry-track>
+    <masonry-track><y style="height:5px;"></y></masonry-track>
+    <masonry-track></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y style="height:8px;"></y></masonry-track>
+    <masonry-track><x></x><z></z><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:2px;"></y><y></y><y></y></masonry-track>
+    <masonry-track><z></z><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x><z></z></masonry-track>
+  </div>
+  <div class="grid last" style="height:24px">
+    <masonry-track><x></x><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x><y></y></masonry-track>
+    <masonry-track><z></z></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x><y style="height:4px;"></y></masonry-track>
+    <masonry-track><y></y></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><y style="height:6px;"></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><y style="height:4px;"></y></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><y style="height:6px;"></y><x></x></masonry-track>
+  </div>
+  <div class="grid last">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><x></x><y></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y style="height:4px;"></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px;"></y><y style="height:4px;"></y></masonry-track>
+    <masonry-track><z style="height:12px;"></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px;"></y><y style="height:4px;"></y></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><z style="height:12px;"></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x><y style="height:5px;"></y></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:12px;"></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><y style="height:5px;"></y><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:12px;"></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><x></x><y style="height:5px;"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:5px;">
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><y style="height:5px;"></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y style="height:3px;"></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:7px;"></y><y style="height:3px;"></y></masonry-track>
+    <masonry-track><z style="height:11px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+    <masonry-track><z style="height:1px;"></z><x></x><y style="height:1px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:11px;"></z></masonry-track>
+    <masonry-track><y style="height:9px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:1px;"></z></masonry-track>
+    <masonry-track><x></x><y style="height:4px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:11px;"></z></masonry-track>
+    <masonry-track><y style="height:6px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:1px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:11px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x><y style="height:4px;"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:6px;">
+    <masonry-track><z style="height:1px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><y style="height:6px;"></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+    <masonry-track><z style="height:8px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:2px;"></y><y style="height:4px;"></y></masonry-track>
+    <masonry-track><z style="height:4px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><z style="height:8px;"></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+    <masonry-track><z style="height:4px;"></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><x></x><y style="height:1px;"></y></masonry-track>
+    <masonry-track><y style="height:2px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+    <masonry-track><z style="height:8px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:1px;"></y><x></x></masonry-track>
+    <masonry-track><z style="height:4px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:8px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x><y style="height:1px;"></y></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:4px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:1px;">
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><y style="height:1px;"></y></masonry-track>
+  </div>
+</div>
+<script>
+let elts = document.querySelectorAll(".columns");
+let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ];
+for (let i = 0; i < heights.length; ++i) {
+  elts[i].style.height = heights[i] + "px";
+}
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001.html
new file mode 100644
index 0000000000..69182c5425
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-fragmentation-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+.columns {
+  width: 330px;
+  columns: 6;
+  column-fill: auto;
+  column-gap: 1px;
+  background-color: rgba(80,80,80,.2);
+  margin-bottom: 10px;
+}
+.columns:nth-child(2n) {
+  background-color: rgba(10,100,10,.5);
+}
+.grid {
+  display: grid;
+  grid-template-columns: 10px 15px 20px;
+  grid-template-rows: masonry;
+  border: 1px solid;
+  gap: 2px;
+}
+x {
+  background: cyan;
+  height: 5px;
+  break-inside: avoid;
+}
+x:nth-child(4n) {
+  background: blue;
+  height: 10px;
+  break-inside: auto;
+}
+x:nth-child(5n) {
+  background: pink;
+  height: 12px;
+  break-inside: avoid;
+}
+</style></head>
+<body>
+<wrapper style="display:none">
+<div style="display:none">
+<div class="columns">
+  <div class="grid">
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+  </div>
+</div>
+</div>
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let tmplt = document.querySelectorAll(".columns")[0];
+let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ];
+for (let h of heights) {
+  let e = tmplt.cloneNode(true);
+  e.style.height = h + "px";
+  wrapper.appendChild(e);
+}
+wrapper.style.display="";
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002-ref.html
new file mode 100644
index 0000000000..ea21350f43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002-ref.html
@@ -0,0 +1,132 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+.columns {
+  width: 330px;
+  columns: 6;
+  column-fill: auto;
+  column-gap: 1px;
+  background-color: rgba(80,80,80,.2);
+  margin-bottom: 10px;
+}
+.columns:nth-child(2n) {
+  background-color: rgba(10,100,10,.5);
+}
+.grid {
+  display: flow-root;
+  border: 1px solid;
+  gap: 2px;
+}
+.first { border-bottom-width:0; height:calc(100% - 1px); }
+.middle { border-top-width:0; border-bottom-width:0; height:100%; }
+.last { border-top-width:0; }
+x {
+  background: cyan;
+  height: 5px;
+}
+y {
+  background: blue;
+  height: 10px;
+}
+.c1 { width: 27px; }
+.c2 { width: 37px; }
+s { height: 10px; }
+z {
+  background: pink;
+  height: 12px;
+}
+masonry-track {
+  float: left;
+  height: 100%;
+  gap: 2px;
+}
+x,y,s,z,masonry-track { display: block; }
+masonry-track > * { margin-bottom:2px; }
+masonry-track.last > :last-child { margin-bottom:0; }
+masonry-track:nth-child(1) { width: 10px; }
+masonry-track:nth-child(2) { width: 15px; margin-left:2px; }
+masonry-track:nth-child(3) { width: 20px; margin-left:2px; }
+</style></head>
+<body>
+<wrapper>
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y class="c1"></y><x></x><y class="c1"></y><x></x></masonry-track>
+    <masonry-track><x></x><s></s><x></x><s style="margin-bottom:6px"></s><y class="c2" style="height:5px"></y></masonry-track>
+    <masonry-track><x></x><z></z><x></x><z></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><x></x><x></x><s style="height:5px"></s><y class="c1"></y><z class="c1"></z><y class="c1" style="height:1px"></y></masonry-track>
+    <masonry-track><y class="c2" style="height:5px"></y><z></z></masonry-track>
+    <masonry-track><s style="height:5px"></s><x></x><x></x><x></x><x></x><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid last" style="height:9px">
+    <masonry-track><y style="height:9px" class="c1"></y></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y class="c1"></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><y class="c2"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><x></x><s style="height:5px"></s><y style="height:4px" class="c1"></y></masonry-track>
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px" class="c1"></y><y class="c1"></y></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z class="c1"></z><y style="height:4px" class="c1"></y></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid last" style="height:6px;">
+    <masonry-track><y style="height:6px" class="c1"></y></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+  </div>
+</div>
+<script>
+let elts = document.querySelectorAll(".columns");
+let heights = [ 48, 18 ];
+for (let i = 0; i < heights.length; ++i) {
+  elts[i].style.height = heights[i] + "px";
+}
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002.html
new file mode 100644
index 0000000000..01c4de00b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout fragmentation</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-fragmentation-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+.columns {
+  width: 330px;
+  columns: 6;
+  column-fill: auto;
+  column-gap: 1px;
+  background-color: rgba(80,80,80,.2);
+  margin-bottom: 10px;
+}
+.columns:nth-child(2n) {
+  background-color: rgba(10,100,10,.5);
+}
+.grid {
+  display: grid;
+  grid-template-columns: 10px 15px 20px;
+  grid-template-rows: masonry;
+  border: 1px solid;
+  gap: 2px;
+}
+x {
+  background: cyan;
+  height: 5px;
+  break-inside: avoid;
+}
+x:nth-child(4n) {
+  grid-column: span 2;
+  background: blue;
+  height: 10px;
+  break-inside: auto;
+}
+x:nth-child(5n) {
+  background: pink;
+  height: 12px;
+  break-inside: avoid;
+}
+</style></head>
+<body>
+<wrapper style="display:none">
+<div style="display:none">
+<div class="columns">
+  <div class="grid">
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+  </div>
+</div>
+</div>
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let tmplt = document.querySelectorAll(".columns")[0];
+let heights = [ 48, 18 ];
+for (let h of heights) {
+  let e = tmplt.cloneNode(true);
+  e.style.height = h + "px";
+  wrapper.appendChild(e);
+}
+wrapper.style.display="";
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003-ref.html
new file mode 100644
index 0000000000..9d1036dfeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Grid axis fragmentation with column masonry layout</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / auto;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+x {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+y {
+  background: blue;
+  width: 35px;
+}
+z {
+  background: gray;
+  width: 40px;
+}
+masonry-track {
+  display: grid;
+  justify-content: start;
+  column-gap: 5px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div class="columns" style="height:90px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:68px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:48px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:38px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:28px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:18px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+</wrapper>
+
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let grids = document.querySelectorAll(".grid");
+for (let e of grids) {
+  for (let track of e.children) {
+    track.style.gridTemplateColumns = "repeat(" + track.children.length + ",auto)";
+  }
+}
+wrapper.style.display="";
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003.html
new file mode 100644
index 0000000000..fe150e7f83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Grid axis fragmentation with column masonry layout</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-fragmentation-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / masonry;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+.grid > * {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+.grid > :nth-child(4n) {
+  background: blue;
+  width: 35px;
+}
+.grid > :nth-child(3n) {
+  background: gray;
+  width: 40px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div style="display:none">
+<div class="columns">
+  <div class="grid">
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+  </div>
+</div>
+</div>
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let tmplt = document.querySelectorAll(".columns")[0];
+let heights = [ 90, 68, 48, 38, 28, 18 ];
+for (let h of heights) {
+  let e = tmplt.cloneNode(true);
+  e.style.height = h + "px";
+  wrapper.appendChild(e);
+}
+wrapper.style.display="";
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-004-ref.html
new file mode 100644
index 0000000000..10246dac42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-004-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Grid axis fragmentation with column masonry layout</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / auto;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+x {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+y {
+  background: blue;
+  width: 35px;
+}
+z {
+  background: gray;
+  width: 40px;
+}
+masonry-track {
+  display: grid;
+  justify-content: end;
+  column-gap: 5px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div class="columns" style="height:90px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:68px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:48px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:38px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:28px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:18px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+</wrapper>
+
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let grids = document.querySelectorAll(".grid");
+for (let e of grids) {
+  for (let track of e.children) {
+    track.style.gridTemplateColumns = "repeat(" + track.children.length + ",auto)";
+  }
+}
+wrapper.style.display="";
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-004.html
new file mode 100644
index 0000000000..ddfc1bb331
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-004.html
@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Grid axis fragmentation with column masonry layout</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-fragmentation-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / masonry;
+  justify-tracks: end;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+.grid > * {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+.grid > :nth-child(4n) {
+  background: blue;
+  width: 35px;
+}
+.grid > :nth-child(3n) {
+  background: gray;
+  width: 40px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div style="display:none">
+<div class="columns">
+  <div class="grid">
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+  </div>
+</div>
+</div>
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let tmplt = document.querySelectorAll(".columns")[0];
+let heights = [ 90, 68, 48, 38, 28, 18 ];
+for (let h of heights) {
+  let e = tmplt.cloneNode(true);
+  e.style.height = h + "px";
+  wrapper.appendChild(e);
+}
+wrapper.style.display="";
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-005-ref.html
new file mode 100644
index 0000000000..e059f414dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-005-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Grid axis fragmentation with column masonry layout</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / auto;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+x {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+y {
+  background: blue;
+  width: 35px;
+}
+z {
+  background: gray;
+  width: 40px;
+}
+masonry-track {
+  display: grid;
+  justify-content: space-between;
+  column-gap: 5px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div class="columns" style="height:90px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:68px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:48px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:38px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:28px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:18px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+</wrapper>
+
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let grids = document.querySelectorAll(".grid");
+for (let e of grids) {
+  for (let track of e.children) {
+    track.style.gridTemplateColumns = "repeat(" + track.children.length + ",auto)";
+  }
+}
+wrapper.style.display="";
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-005.html
new file mode 100644
index 0000000000..8315b8f2b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-005.html
@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Grid axis fragmentation with column masonry layout</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-fragmentation-005-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / masonry;
+  justify-tracks: space-between;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+.grid > * {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+.grid > :nth-child(4n) {
+  background: blue;
+  width: 35px;
+}
+.grid > :nth-child(3n) {
+  background: gray;
+  width: 40px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div style="display:none">
+<div class="columns">
+  <div class="grid">
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+  </div>
+</div>
+</div>
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let tmplt = document.querySelectorAll(".columns")[0];
+let heights = [ 90, 68, 48, 38, 28, 18 ];
+for (let h of heights) {
+  let e = tmplt.cloneNode(true);
+  e.style.height = h + "px";
+  wrapper.appendChild(e);
+}
+wrapper.style.display="";
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-006-ref.html
new file mode 100644
index 0000000000..5df3737619
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-006-ref.html
@@ -0,0 +1,118 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Grid axis fragmentation with column masonry layout</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / auto;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+x {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+y {
+  background: blue;
+  width: 35px;
+}
+z {
+  background: gray;
+  width: 40px;
+}
+masonry-track {
+  display: grid;
+  justify-content: stretch;
+  column-gap: 5px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div class="columns" style="height:90px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:68px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:48px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:38px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:28px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:18px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+</wrapper>
+
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let grids = document.querySelectorAll(".grid");
+for (let e of grids) {
+  for (let track of e.children) {
+    var cols = "";
+    for (let item of track.children) {
+      if (item.tagName != "X") cols += "min-content "; else  cols += "auto ";
+    }
+    track.style.gridTemplateColumns = cols;
+  }
+}
+wrapper.style.display="";
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-006.html
new file mode 100644
index 0000000000..9dab0ddc9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-006.html
@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Grid axis fragmentation with column masonry layout</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-fragmentation-006-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / masonry;
+  justify-tracks: stretch;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+.grid > * {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+.grid > :nth-child(4n) {
+  background: blue;
+  width: 35px;
+}
+.grid > :nth-child(3n) {
+  background: gray;
+  width: 40px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div style="display:none">
+<div class="columns">
+  <div class="grid">
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+  </div>
+</div>
+</div>
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let tmplt = document.querySelectorAll(".columns")[0];
+let heights = [ 90, 68, 48, 38, 28, 18 ];
+for (let h of heights) {
+  let e = tmplt.cloneNode(true);
+  e.style.height = h + "px";
+  wrapper.appendChild(e);
+}
+wrapper.style.display="";
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001-ref.html
new file mode 100644
index 0000000000..031629e926
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with definite `gap` in both axes</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 "Courier New", monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns:  auto min-content repeat(2,auto);
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="padding:0; place-self:start; min-width:0">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="order:1; width:0; margin-right:-23px; margin-top:-37px; align-self:start">5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001.html
new file mode 100644
index 0000000000..673bbe40e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with definite `gap` in both axes</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-gap-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 "Courier New", monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns:  repeat(4,auto);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="padding:0">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001-ref.html
new file mode 100644
index 0000000000..c99b117f2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001-ref.html
@@ -0,0 +1,129 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+body,html { color:black; background:white; font-size:15px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-gap: 1px;
+  grid-auto-flow: dense;
+}
+.t1 {
+  grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px;
+
+}
+.t2 {
+  grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px;
+}
+
+x {
+  background: grey;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border-top: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+}
+
+  </style>
+</head>
+<body>
+
+<pre>grid-column-start:</pre>
+<div class="grid t1" style="padding-right:13px; border-right-width:5px">
+<x style="grid-column-start:4; background:grey"></x>
+<x style="grid-column-start:7">-1</x>
+<x style="grid-column-start:7">4</x>
+<x style="grid-column-start:6">-2</x>
+<x style="grid-column-start:5">-3</x>
+<x style="grid-column-start:4">-4</x>
+<x style="grid-column-start:3">-5</x>
+<x style="grid-column-start:5">A -1</x>
+<x style="grid-column-start:3">B -1</x>
+<x style="grid-column-start:4">A -2</x>
+<x style="grid-column-start:3">A -3</x>
+<x style="grid-column-start:2">A -4</x>
+<x style="grid-column-start:1">A -5</x>
+<x style="grid-column-start:4">A</x>
+<x style="grid-column-start:4">B</x>
+<x style="grid-column-start:4">A 1</x>
+<x style="grid-column-start:5">A 2</x>
+<x style="grid-column-start:8">A 3</x>
+<x style="grid-column-start:9">A 4</x>
+<x style="grid-column-start:10">A 5</x>
+<y style="grid-column-start:7; top:0"></y>
+<y style="grid-column-start:7; top:2px"></y>
+<y style="grid-column-start:6; top:4px"></y>
+<y style="grid-column-start:5; top:6px"></y>
+<y style="grid-column-start:4; top:8px"></y>
+<y style="grid-column-start:3; top:10px"></y>
+<y style="grid-column-start:5; top:12px"></y>
+<y style="grid-column-start:3; top:14px"></y>
+<y style="grid-column-start:4; top:16px"></y>
+<y style="grid-column-start:3; top:18px"></y>
+<y style="grid-column-start:2; top:20px"></y>
+<y style="grid-column-start:1; top:22px"></y>
+<y style="grid-column-start:4; top:24px"></y>
+<y style="grid-column-start:4; top:26px"></y>
+<y style="grid-column-start:4; top:28px"></y>
+<y style="grid-column-start:5; top:30px"></y>
+<y style="grid-column-start:8; top:32px"></y>
+<y style="grid-column-start:9; top:34px"></y>
+<y style="grid-column-start:10; top:36px"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid t2" style="padding-left:13px;">
+<x style="grid-column-start:5; background:grey"></x>
+<x style="grid-column-start:7">-1</x>
+<x style="grid-column-start:7">4</x>
+<x style="grid-column-start:6">-2</x>
+<x style="grid-column-start:5">-3</x>
+<x style="grid-column-start:4">-4</x>
+<x style="grid-column-start:3">-5</x>
+<x style="grid-column-start:5">A -1</x>
+<x style="grid-column-start:3">B -1</x>
+<x style="grid-column-start:4">A -2</x>
+<x style="grid-column-start:3">A -3</x>
+<x style="grid-column-start:2">A -4</x>
+<x style="grid-column-start:1">A -5</x>
+<x style="grid-column-start:4">A</x>
+<x style="grid-column-start:5">B</x>
+<x style="grid-column-start:4">A 1</x>
+<x style="grid-column-start:5">A 2</x>
+<x style="grid-column-start:8">A 3</x>
+<x style="grid-column-start:9">A 4</x>
+<x style="grid-column-start:10">A 5</x>
+<y style="grid-column-end:8; top:0px"></y>
+<y style="grid-column-end:8; top:2px"></y>
+<y style="grid-column-end:4; top:4px"></y>
+<y style="grid-column-end:5; top:6px"></y>
+<y style="grid-column-end:6; top:8px"></y>
+<y style="grid-column-end:7; top:10px"></y>
+<y style="grid-column-end:6; top:12px"></y>
+<y style="grid-column-end:4; top:14px"></y>
+<y style="grid-column-end:5; top:16px"></y>
+<y style="grid-column-end:4; top:18px"></y>
+<y style="grid-column-end:3; top:20px"></y>
+<y style="grid-column-end:2; top:22px"></y>
+<y style="grid-column-end:5; top:24px"></y>
+<y style="grid-column-end:6; top:26px"></y>
+<y style="grid-column-end:5; top:28px"></y>
+<y style="grid-column-end:6; top:30px"></y>
+<y style="grid-column-end:9; top:32px"></y>
+<y style="grid-column-end:10; top:34px"></y>
+<y style="grid-column-end:11; top:36px"></y>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001.html
new file mode 100644
index 0000000000..b6745f6973
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001.html
@@ -0,0 +1,127 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
+  <link rel="match" href="masonry-grid-placement-named-lines-001-ref.html">
+  <style>
+body,html { color:black; background:white; font-size:15px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-template-columns: [A-start] 60px 60px 60px;
+  grid-template-rows: masonry;
+  grid-template-areas: "B A";
+  grid-auto-columns: 40px;
+  grid-gap: 1px;
+}
+
+x {
+  background: grey;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border-top: 1px solid blue;
+  height:0;left:0;right:0;
+}
+
+  </style>
+</head>
+<body>
+
+<pre>grid-column-start:</pre>
+<div class="grid" style="padding-right:13px; border-right-width:5px">
+<x style="grid-column:1; background:grey">&nbsp;</x>
+<x style="grid-column-start:-1">-1</x>
+<x style="grid-column-start:4">4</x>
+<x style="grid-column-start:-2">-2</x>
+<x style="grid-column-start:-3">-3</x>
+<x style="grid-column-start:-4">-4</x>
+<x style="grid-column-start:-5">-5</x>
+<x style="grid-column-start:A-start -1">A -1</x>
+<x style="grid-column-start:B -1">B -1</x>
+<x style="grid-column-start:A-start -2">A -2</x>
+<x style="grid-column-start:A-start -3">A -3</x>
+<x style="grid-column-start:A-start -4">A -4</x>
+<x style="grid-column-start:A-start -5">A -5</x>
+<x style="grid-column-start:A-start">A</x>
+<x style="grid-column-start:B">B</x>
+<x style="grid-column-start:A-start 1">A 1</x>
+<x style="grid-column-start:A-start 2">A 2</x>
+<x style="grid-column-start:A-start 3">A 3</x>
+<x style="grid-column-start:A-start 4">A 4</x>
+<x style="grid-column-start:A-start 5">A 5</x>
+<y style="grid-column-start:-1; top:0"></y>
+<y style="grid-column-start:4; top:2px"></y>
+<y style="grid-column-start:-2; top:4px"></y>
+<y style="grid-column-start:-3; top:6px"></y>
+<y style="grid-column-start:-4; top:8px"></y>
+<y style="grid-column-start:-5; top:10px"></y>
+<y style="grid-column-start:A-start -1; top:12px"></y>
+<y style="grid-column-start:B -1; top:14px"></y>
+<y style="grid-column-start:A-start -2; top:16px"></y>
+<y style="grid-column-start:A-start -3; top:18px"></y>
+<y style="grid-column-start:A-start -4; top:20px"></y>
+<y style="grid-column-start:A-start -5; top:22px"></y>
+<y style="grid-column-start:A-start; top:24px"></y>
+<y style="grid-column-start:B; top:26px"></y>
+<y style="grid-column-start:A-start 1; top:28px"></y>
+<y style="grid-column-start:A-start 2; top:30px"></y>
+<y style="grid-column-start:A-start 3; top:32px"></y>
+<y style="grid-column-start:A-start 4; top:34px"></y>
+<y style="grid-column-start:A-start 5; top:36px"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid" style="padding-left:13px;">
+<x style="grid-column:1; background:grey">&nbsp;</x>
+<x style="grid-column-end:-1">-1</x>
+<x style="grid-column-end:4">4</x>
+<x style="grid-column-end:-5">-5</x>
+<x style="grid-column-end:-4">-4</x>
+<x style="grid-column-end:-3">-3</x>
+<x style="grid-column-end:-2">-2</x>
+<x style="grid-column-end:A-start -1">A -1</x>
+<x style="grid-column-end:B -1">B -1</x>
+<x style="grid-column-end:A-start -2">A -2</x>
+<x style="grid-column-end:A-start -3">A -3</x>
+<x style="grid-column-end:A-start -4">A -4</x>
+<x style="grid-column-end:A-start -5">A -5</x>
+<x style="grid-column-end:A-start">A</x>
+<x style="grid-column-end:B">B</x>
+<x style="grid-column-end:A-start 1">A 1</x>
+<x style="grid-column-end:A-start 2">A 2</x>
+<x style="grid-column-end:A-start 3">A 3</x>
+<x style="grid-column-end:A-start 4">A 4</x>
+<x style="grid-column-end:A-start 5">A 5</x>
+<y style="grid-column-end:-1; top:0"></y>
+<y style="grid-column-end:4; top:2px"></y>
+<y style="grid-column-end:-5; top:4px"></y>
+<y style="grid-column-end:-4; top:6px"></y>
+<y style="grid-column-end:-3; top:8px"></y>
+<y style="grid-column-end:-2; top:10px"></y>
+<y style="grid-column-end:A-start -1; top:12px"></y>
+<y style="grid-column-end:B -1; top:14px"></y>
+<y style="grid-column-end:A-start -2; top:16px"></y>
+<y style="grid-column-end:A-start -3; top:18px"></y>
+<y style="grid-column-end:A-start -4; top:20px"></y>
+<y style="grid-column-end:A-start -5; top:22px"></y>
+<y style="grid-column-end:A-start; top:24px"></y>
+<y style="grid-column-end:B; top:26px"></y>
+<y style="grid-column-end:A-start 1; top:28px"></y>
+<y style="grid-column-end:A-start 2; top:30px"></y>
+<y style="grid-column-end:A-start 3; top:32px"></y>
+<y style="grid-column-end:A-start 4; top:34px"></y>
+<y style="grid-column-end:A-start 5; top:36px"></y>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002-ref.html
new file mode 100644
index 0000000000..dd589f90c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002-ref.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px;
+  position: relative;
+  border: 1px solid;
+  grid-auto-flow: dense;
+  column-gap: 1px;
+}
+
+x {
+  background: grey;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  top:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+
+  </style>
+</head>
+<body>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid">
+<x style="grid-row:1;  grid-column:4">&nbsp;</x>
+<x style="grid-row:1;  grid-column:7/span 2;">-1</x>
+<x style="grid-row:2;  grid-column:7/span 2;">4</x>
+<x style="grid-row:4;  grid-column:6/span 3;">-2</x>
+<x style="grid-row:5;  grid-column:5/span 4;">-3</x>
+<x style="grid-row:6;  grid-column:4/span 4;">-4</x>
+<x style="grid-row:7;  grid-column:3/span 2;">-5</x>
+<x style="grid-row:7;  grid-column:5/span 4;">A -1</x>
+<x style="grid-row:9;  grid-column:3/span 2;">B -1</x>
+<x style="grid-row:10; grid-column:4/span 4;">A -2</x>
+<x style="grid-row:11; grid-column:3/span 2;">A -3</x>
+<x style="grid-row:12; grid-column:2/span 3;">A -4</x>
+<x style="grid-row:13; grid-column:1/span 4;">A -5</x>
+<x style="grid-row:14; grid-column:4/span 4;">A</x>
+<x style="grid-row:15; grid-column:4/span 4;">B</x>
+<x style="grid-row:16; grid-column:4/span 4;">A 1</x>
+<x style="grid-row:17; grid-column:5/span 4;">A 2</x>
+<x style="grid-row:18; grid-column:8/span 2;">A 3</x>
+<x style="grid-row:1;  grid-column:9/span 2;">A 4</x>
+<x style="grid-row:2;  grid-column:10/span 2;">A 5</x>
+<y style="grid-row:1;  grid-column:7/span 2;"></y>
+<y style="grid-row:2;  grid-column:7/span 2;"></y>
+<y style="grid-row:4;  grid-column:6/span 3;"></y>
+<y style="grid-row:5;  grid-column:5/span 4;"></y>
+<y style="grid-row:6;  grid-column:4/span 4;"></y>
+<y style="grid-row:7;  grid-column:3/span 2;"></y>
+<y style="grid-row:7;  grid-column:5/span 4;"></y>
+<y style="grid-row:9;  grid-column:3/span 2;"></y>
+<y style="grid-row:10; grid-column:4/span 4;"></y>
+<y style="grid-row:11; grid-column:3/span 2;"></y>
+<y style="grid-row:12; grid-column:2/span 3;"></y>
+<y style="grid-row:13; grid-column:1/span 4;"></y>
+<y style="grid-row:14; grid-column:4/span 4;"></y>
+<y style="grid-row:15; grid-column:4/span 4;"></y>
+<y style="grid-row:16; grid-column:4/span 4;"></y>
+<y style="grid-row:17; grid-column:5/span 4;"></y>
+<y style="grid-row:18; grid-column:8/span 2;"></y>
+<y style="grid-row:1;  grid-column:9/span 2;"></y>
+<y style="grid-row:2;  grid-column:10/span 2;"></y>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002.html
new file mode 100644
index 0000000000..0ad0dfcea3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002.html
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
+  <link rel="match" href="masonry-grid-placement-named-lines-002-ref.html">
+  <style>
+body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-template-columns: [A-start] 60px 60px 60px;
+  grid-template-rows: masonry;
+  grid-template-areas: "B A";
+  grid-auto-columns: 40px;
+  grid-auto-flow: dense;
+  gap: 0 1px;
+}
+
+x {
+  background: grey;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+
+  </style>
+</head>
+<body>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid">
+<x style="grid-column:1">&nbsp;</x>
+<x style="grid-column:-1/span A-start 2">-1</x>
+<x style="grid-column:4/span A-start 2">4</x>
+<x style="grid-column:-2/span A-start 2">-2</x>
+<x style="grid-column:-3/span A-start 2">-3</x>
+<x style="grid-column:-4/span A-start 2">-4</x>
+<x style="grid-column:-5/span A-start 2">-5</x>
+<x style="grid-column:A-start -1/span A-start 2">A -1</x>
+<x style="grid-column:B -1/span A-start 2">B -1</x>
+<x style="grid-column:A-start -2/span A-start 2">A -2</x>
+<x style="grid-column:A-start -3/span A-start 2">A -3</x>
+<x style="grid-column:A-start -4/span A-start 2">A -4</x>
+<x style="grid-column:A-start -5/span A-start 2">A -5</x>
+<x style="grid-column:A-start/span A-start 2">A</x>
+<x style="grid-column:B/span B">B</x>
+<x style="grid-column:A-start 1/span A-start 2">A 1</x>
+<x style="grid-column:A-start 2/span A-start 2">A 2</x>
+<x style="grid-column:A-start 3/span A-start 2">A 3</x>
+<x style="grid-column:A-start 4/span A-start 2">A 4</x>
+<x style="grid-column:A-start 5/span A-start 2">A 5</x>
+<y style="grid-column:-1/span A-start 2; top:0em"></y>
+<y style="grid-column:4/span A-start 2; top:1em"></y>
+<y style="grid-column:-2/span A-start 2; top:2em"></y>
+<y style="grid-column:-3/span A-start 2; top:3em"></y>
+<y style="grid-column:-4/span A-start 2; top:4em"></y>
+<y style="grid-column:-5/span A-start 2; top:5em"></y>
+<y style="grid-column:A-start -1/span A-start 2; top:5em"></y>
+<y style="grid-column:B -1/span A-start 2; top:6em"></y>
+<y style="grid-column:A-start -2/span A-start 2; top:7em"></y>
+<y style="grid-column:A-start -3/span A-start 2; top:8em"></y>
+<y style="grid-column:A-start -4/span A-start 2; top:9em"></y>
+<y style="grid-column:A-start -5/span A-start 2; top:10em"></y>
+<y style="grid-column:A-start/span A-start 2; top:11em"></y>
+<y style="grid-column:B/span B; top:12em"></y>
+<y style="grid-column:A-start 1/span A-start 2; top:13em"></y>
+<y style="grid-column:A-start 2/span A-start 2; top:14em"></y>
+<y style="grid-column:A-start 3/span A-start 2; top:15em"></y>
+<y style="grid-column:A-start 4/span A-start 2; top:0em"></y>
+<y style="grid-column:A-start 5/span A-start 2; top:1em"></y>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001-ref.html
new file mode 100644
index 0000000000..898bff16d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001-ref.html
@@ -0,0 +1,271 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout intrinsic sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-auto-rows: 1em;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid style="grid-template-columns: 1ch repeat(3,auto)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid style="grid-template-columns: repeat(4,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr" style="grid-template-columns: 1ch 2ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed" style="grid-template-columns: 2ch 4ch 1ch 1ch">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001.html
new file mode 100644
index 0000000000..0f6cdb1495
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001.html
@@ -0,0 +1,273 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout intrinsic sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-intrinsic-sizing-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-template-rows: masonry;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002-ref.html
new file mode 100644
index 0000000000..4f6519db94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002-ref.html
@@ -0,0 +1,272 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout intrinsic sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-auto-rows: 1em;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: min-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid style="grid-template-columns: 1ch repeat(3,auto)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid style="grid-template-columns: repeat(4,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr" style="grid-template-columns: 1ch 1ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed" style="grid-template-columns: 2ch 1ch 1ch 1ch">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002.html
new file mode 100644
index 0000000000..db83299bf5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002.html
@@ -0,0 +1,274 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout intrinsic sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-intrinsic-sizing-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-template-rows: masonry;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: min-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003-ref.html
new file mode 100644
index 0000000000..61eb21570d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003-ref.html
@@ -0,0 +1,269 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout min-content sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-auto-rows: 1em;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: min-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+item.start { align-self: start; }
+</style>
+</head>
+<body>
+
+<grid style="grid-template-rows: 1em 2em">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid style="grid: 1em 2em / 1ch repeat(3,auto); ">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 2em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid style="grid: 2em 1em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr" style="grid: 1em 2em / 2ch 2fr 1fr 1fr">
+  <item style="width:2ch" class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 1em 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em 2em / 1ch 2ch repeat(2,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em 1em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed" style="grid: 1em 2em / 2ch repeat(3,1ch)">
+  <item style="width:2ch" class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 1em 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 2em / 1ch 2ch repeat(2,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003.html
new file mode 100644
index 0000000000..e43bc86c9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003.html
@@ -0,0 +1,270 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout min-content sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-intrinsic-sizing-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-template-rows: masonry;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: min-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004-ref.html
new file mode 100644
index 0000000000..6a5d81fedb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004-ref.html
@@ -0,0 +1,270 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout max-content sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch 3ch 3ch 1ch;
+  grid-auto-rows: 1em;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  align-items: start;
+  width: max-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+item.start { align-self: start; }
+</style>
+</head>
+<body>
+
+<grid style="grid: 1em 2em / 2ch 3ch 3ch 1ch">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid style="grid: 1em 2em / 1ch 3ch 3ch 1ch; ">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 1em 2em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch" class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed" style="grid: 1em 2em / 2ch 4ch 1ch 1ch">
+  <item style="width:2ch" class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004.html
new file mode 100644
index 0000000000..5365208c00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004.html
@@ -0,0 +1,270 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout max-content sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-intrinsic-sizing-004-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-template-rows: masonry;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: max-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005-ref.html
new file mode 100644
index 0000000000..e564fb1b3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005-ref.html
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout intrinsic sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-auto-flow: column;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+  writing-mode: vertical-lr;
+}
+</style>
+</head>
+<body>
+
+<grid style="grid-template-rows: 3ch repeat(3,1ch)">
+  <item style="height:3ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid style="grid-template-rows: repeat(4,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid style="grid-template-rows: 3ch repeat(3,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-row:1">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid style="grid-template-rows: 3ch repeat(3,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-column:1">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005.html
new file mode 100644
index 0000000000..cf9b680869
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005.html
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout intrinsic sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-intrinsic-sizing-005-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,auto);
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+  writing-mode: vertical-lr;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="height:3ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-row:1">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-column:1">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006-ref.html
new file mode 100644
index 0000000000..e1cb015cfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout intrinsic sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-auto-flow: column;
+  grid-template-columns: 1ch;
+  grid-template-rows: repeat(4,1em);
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:3ch">1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-row:2">5 5</item>
+</grid>
+
+<grid>
+  <item style="width:3ch">1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-row:2">5 5</item>
+</grid>
+
+<grid style="height:5em">
+  <item style="width:3ch">1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-row:2">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006.html
new file mode 100644
index 0000000000..49fd53bb79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout intrinsic sizing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-intrinsic-sizing-006-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,auto);
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid style="max-height:5em; grid-template-rows: repeat(auto-fill,1em);">
+  <item>1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid style="min-height:4em; grid-template-rows: repeat(auto-fill,1em);">
+  <item>1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid style="height:5em; grid-template-rows: repeat(auto-fill,1em);">
+  <item>1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.html
new file mode 100644
index 0000000000..b6373f8d2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid masonry columns masonry-auto-flow next</title>
+  <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
+  <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-rows: repeat(4,80px);
+  grid-template-columns: auto;
+  grid-auto-flow: column;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="grid-row: span 3">2</item>
+  <item>3</item>
+  <item style="grid-row: span 4">4</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html
new file mode 100644
index 0000000000..eacc943bf7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid masonry columns masonry-auto-flow next</title>
+  <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
+  <link rel="match" href="masonry-columns-item-placement-auto-flow-next-001-ref.html">
+  <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-rows: repeat(4,80px);
+  grid-template-columns: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  masonry-auto-flow: next;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="grid-row: span 3">2</item>
+  <item>3</item>
+  <item style="grid-row: span 4">4</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html
new file mode 100644
index 0000000000..7108a11a10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns: repeat(4,80px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="margin-top:10px">3</item>
+  <item style="grid-column:span 2">1</item>
+  <item>2</item>
+  <item style="grid-column:2">5</item>
+  <item style="grid-column:span 2">4</item>
+  <item style="grid-column:1">6</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.html
new file mode 100644
index 0000000000..2f8cfbfacc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-item-placement-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns: repeat(4,80px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item style="margin-top:10px">3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002-ref.html
new file mode 100644
index 0000000000..a02009ec30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns: repeat(4,80px);
+  grid-template-rows: auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:1/-1">1</item>
+  <item>3</item>
+  <x></x>
+  <item>2</item>
+  <item>5</item>
+  <item style="grid-column:1/-2">4</item>
+  <item>6</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html
new file mode 100644
index 0000000000..5f7083b173
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-item-placement-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-auto-columns: 80px;
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:foo 2; grid-row:span 2">2</item>
+  <item>3</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+  <item style="grid-column:span 4; grid-row:-100">1</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003-ref.html
new file mode 100644
index 0000000000..5cbd8db9ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout using `grid-column/row` and `dense`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-auto-columns: 80px;
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item>3</item>
+  <item>2</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003.html
new file mode 100644
index 0000000000..4d490c18d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout using `grid-column/row` and `dense`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-item-placement-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-auto-flow: dense;
+  grid-auto-columns: 80px;
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-row:-100">1</item>
+  <item style="grid-column:foo 2; grid-row:span 2">2</item>
+  <item style="grid-column:span 3">4</item>
+  <item>3</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004-ref.html
new file mode 100644
index 0000000000..75d6b741c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004-ref.html
@@ -0,0 +1,107 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<div style="direction:rtl">
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004.html
new file mode 100644
index 0000000000..4d1a454a86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004.html
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-item-placement-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<div style="direction:rtl">
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005-ref.html
new file mode 100644
index 0000000000..806f314300
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005-ref.html
@@ -0,0 +1,107 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<div style="direction:rtl">
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005.html
new file mode 100644
index 0000000000..ddfbc9e54e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005.html
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-item-placement-005-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<div style="direction:rtl">
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006-ref.html
new file mode 100644
index 0000000000..a6e9b75d0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006-ref.html
@@ -0,0 +1,144 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry item placement</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 3">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 4">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<span class="next">
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 3">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 4">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+</span>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006.html
new file mode 100644
index 0000000000..0082d72df2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006.html
@@ -0,0 +1,149 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry item placement</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-item-placement-006-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+.next > grid {
+  masonry-auto-flow: next;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 4">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<span class="next">
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 4">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+</span>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007-ref.html
new file mode 100644
index 0000000000..50236046fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007-ref.html
@@ -0,0 +1,145 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry item placement (RTL)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  direction: rtl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 3">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 4">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<span class="next">
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 3">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 4">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+</span>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007.html
new file mode 100644
index 0000000000..67a02560f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007.html
@@ -0,0 +1,150 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry item placement (RTL)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-item-placement-007-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  direction: rtl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+.next > grid {
+  masonry-auto-flow: next;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 4">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<span class="next">
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 4">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+</span>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008-ref.html
new file mode 100644
index 0000000000..e14ca3173a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry item placement w/ Images</title>
+  <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+</head>
+
+<body>
+<style>
+grid {
+  display: inline-grid;
+  grid-template-columns: 400px;
+}
+
+img {
+  width: 100%;
+  height: auto;
+  background-color: cyan;
+}
+</style>
+
+<grid>
+    <img width="400" height="400" />
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008.html
new file mode 100644
index 0000000000..c68a9787b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry item placement w/ Images</title>
+  <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-item-placement-008-ref.html">
+</head>
+
+<body>
+<style>
+grid {
+  display: inline-grid;
+  grid-template-rows: masonry;
+  grid-template-columns: repeat( auto-fill, minmax(200px, 400px) );
+  gap: 30px;
+  max-width: 50vw;
+}
+
+img {
+  width: 100%;
+  height: auto;
+  background-color: cyan;
+}
+</style>
+
+<grid>
+    <img width="400" height="400" />
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html
new file mode 100644
index 0000000000..cbb3e825a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid masonry rows masonry-auto-flow next</title>
+  <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
+  <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns: repeat(4,80px);
+  grid-template-rows: auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="grid-column: span 3">2</item>
+  <item>3</item>
+  <item style="grid-column: span 4">4</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html
new file mode 100644
index 0000000000..c425490d2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid masonry rows masonry-auto-flow next</title>
+  <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
+  <link rel="match" href="masonry-rows-item-placement-auto-flow-next-001-ref.html">
+  <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns: repeat(4,80px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  masonry-auto-flow: next;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="grid-column: span 3">2</item>
+  <item>3</item>
+  <item style="grid-column: span 4">4</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed-ref.html
new file mode 100644
index 0000000000..71c081f2ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<meta name="assert" content="When the width of the masonry grid changes, items are repositioned with correct offsets and are not overlapping">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+grid {
+    display: grid;
+    width: 1%;
+    grid-template-rows: masonry;
+    grid-template-columns: auto;
+    grid-gap: 10px;
+    font-family: Ahem;
+    font-size: 40px;
+}
+item {
+    background-color: grey;
+}
+</style>
+</head>
+<body>
+  <grid>
+    <item>Hello, world!</item>
+    <item>2</item>
+  </grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed.html
new file mode 100644
index 0000000000..3a1c4cfa9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<link rel="match" href="masonry-rows-with-grid-width-changed-ref.html">
+<meta name="assert" content="When the width of the masonry grid changes, items are repositioned with correct offsets and are not overlapping">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+  grid {
+    display: grid;
+    grid-template-rows: masonry;
+    grid-template-columns: auto;
+    grid-gap: 10px;
+    font-family: Ahem;
+    font-size: 40px;
+  }
+  item {
+    background-color: grey;
+  }
+</style>
+</head>
+<body>
+  <grid>
+    <item>Hello, world!</item>
+    <item>2</item>
+  </grid>
+</body>
+<script>
+  // Make sure layout occurs and then mutate the style to retrigger it
+  document.body.offsetHeight;
+  document.querySelector("grid").style["width"] = "1%";
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001-ref.html
new file mode 100644
index 0000000000..f7d9ccf48f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001-ref.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `justify-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: 1em auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  align-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-top:30px; grid-row:span 2; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001.html
new file mode 100644
index 0000000000..3d60ac19fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `justify-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-justify-content-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002-ref.html
new file mode 100644
index 0000000000..6889af7eac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002-ref.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `justify-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: 1em auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  height: 100px;
+  writing-mode: vertical-lr;
+  align-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-right:30px; grid-row:span 2; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002.html
new file mode 100644
index 0000000000..b1db084d4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `justify-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-justify-content-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  height: 100px;
+  writing-mode: vertical-lr;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003-ref.html
new file mode 100644
index 0000000000..81d0fba410
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003-ref.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `justify-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch auto;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  justify-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { grid-column:span 2; padding-left: 30px; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003.html
new file mode 100644
index 0000000000..772984b9e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `justify-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-justify-content-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-left: 30px; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004-ref.html
new file mode 100644
index 0000000000..43af71fc01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004-ref.html
@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `justify-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch auto;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 0 3px 2px 0;
+  width: 100px;
+  height: 120px;
+  align-content: center;
+  justify-items: start;
+  writing-mode: vertical-rl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { grid-column: span 2; padding: 11px 3px 13px 7px; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004.html
new file mode 100644
index 0000000000..7d04ffeb4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004.html
@@ -0,0 +1,129 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `justify-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-justify-content-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 0 3px 2px 0;
+  width: 100px;
+  height: 120px;
+  align-content: center;
+  writing-mode: vertical-rl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding: 11px 3px 13px 7px; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-001-ref.html
new file mode 100644
index 0000000000..912c9c9f82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-001-ref.html
@@ -0,0 +1,114 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `justify-tracks` alignment</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; direction:ltr; }
+.swr { writing-mode: sideways-lr; direction:rtl; }
+
+grid {
+  display: inline-flex;
+  flex-flow: row wrap;
+  background: content-box silver;
+  color: #444;
+  padding: 1px 2px;
+  inline-size: 30px;
+  vertical-align: top;
+}
+grid.vll, grid.vrr, grid.vlr, grid.vrl, grid.swl, grid.swr {
+  block-size: 17px;
+}
+grid2 {
+  display: inline-grid;
+  column-gap: 2px;
+  grid-template-columns: 8px 8px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  writing-mode: horizontal-tb;
+  direction: ltr;
+}
+
+grid > div {
+  display: inline-flex;
+  flex-flow: row wrap;
+  inline-size: min-content;
+}
+
+grid2:nth-child(1) { margin-block-end:1px; }
+grid2:nth-child(2) { inline-size: 22px; block-size: 12px; }
+.vll grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
+.vrr grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
+.vlr grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
+.vrl grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
+.swl grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
+.swr grid2:nth-child(2) { margin-block-start:-4px; grid-template-columns: 12px 8px;}
+
+.vll grid2:nth-child(1) { inline-size: 22px; }
+.vrr grid2:nth-child(1) { inline-size: 22px; }
+.vlr grid2:nth-child(1) { inline-size: 22px; }
+.vrl grid2:nth-child(1) { inline-size: 22px; }
+.swl grid2:nth-child(1) { inline-size: 22px; }
+.swr grid2:nth-child(1) { inline-size: 22px; }
+
+grid2:nth-child(1) > item:nth-child(1) { background: blue; inline-size:8px; block-size:8px; z-index:1; }
+grid2:nth-child(2) > item:nth-child(1) { background: magenta; inline-size:8px; block-size:12px; z-index:1; }
+grid2:nth-child(1) > item:nth-child(2) { background: lime; inline-size:12px; block-size:8px; z-index:2; }
+grid2:nth-child(2) > item:nth-child(2) { background: purple; inline-size:8px; block-size:8px; z-index:2; }
+</style>
+</head>
+<body>
+<div style="display:none">
+<grid>
+ <div>
+  <grid2>
+    <item></item>
+    <item></item>
+  </grid2><grid2>
+    <item></item>
+    <item></item>
+  </grid2>
+ </div>
+</grid>
+</div>
+
+<script>
+let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
+let ats = [ "start", "self-start", "center", "end", "self-end", "stretch", "space-between", "space-around", "space-evenly", ];
+let acs = [ "start", "center", "end", ];
+let grid = document.getElementsByTagName('grid')[0];
+for (const ac of acs) {
+  for (const at of ats) {
+    for (const wm of wms) {
+      let e = grid.cloneNode(true);
+      e.className = wm;
+      e.children[0].children[0].children[0].className = "vrl";
+      e.children[0].children[0].style.justifyContent = at;
+      e.children[0].children[1].style.justifyContent = at;
+      e.style.justifyContent = ac;
+      document.body.appendChild(e);
+    }
+  }
+}
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-001.html
new file mode 100644
index 0000000000..bfd3c1ca58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-001.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `justify-tracks` alignment</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-justify-tracks-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; direction:ltr; }
+.swr { writing-mode: sideways-lr; direction:rtl; }
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(2,auto);
+  background: content-box silver;
+  color: #444;
+  padding: 1px 2px;
+  inline-size: 30px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  writing-mode: horizontal-tb;
+  direction: ltr;
+}
+
+item:nth-child(1) { background: blue; inline-size:8px; block-size:8px; }
+item:nth-child(2) { background: magenta; inline-size:8px; block-size:12px; }
+item:nth-child(3) { background: lime; inline-size:12px; block-size:8px; }
+item:nth-child(4) { background: purple; inline-size:8px; block-size:8px; }
+</style>
+</head>
+<body>
+<div style="display:none">
+<grid>
+  <item></item>
+  <item></item>
+  <item></item>
+  <item></item>
+</grid>
+</div>
+
+<script>
+let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
+let ats = [ "start", "self-start", "center", "end", "self-end", "stretch", "space-between", "space-around", "space-evenly", ];
+let acs = [ "start", "center", "end", ];
+let grid = document.getElementsByTagName('grid')[0];
+for (const ac of acs) {
+  for (const at of ats) {
+    for (const wm of wms) {
+      let e = grid.cloneNode(true);
+      e.className = wm;
+      e.children[0].className = "vrl";
+      e.style.justifyTracks = at;
+      e.style.justifyContent = ac;
+      document.body.appendChild(e);
+    }
+  }
+}
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-multi-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-multi-001-ref.html
new file mode 100644
index 0000000000..319ef217ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-multi-001-ref.html
@@ -0,0 +1,117 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with multiple `justify-tracks` values</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:15px/1 "Courier New", monospace; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-columns: auto;
+  grid-template-rows: repeat(8,50px);
+  gap: 3px 5px;
+  padding: 10px 3px 1px 7px;
+  border: solid;
+  border-width: 1px 7px 3px 5px;
+  background: lightgrey content-box;
+  width: 500px;
+  vertical-justify: top;
+}
+.fallback { grid-template-rows:3px; padding:0; border:0; display: grid; }
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+  border: 1px solid;
+}
+.purple { background:purple; width:auto; border-left:3px solid; }
+z { display: block; background: yellow; height: calc(.2 * (50px - 2px)); width:calc(.8 * 2ch); }
+a {
+ position: absolute;
+ inset: 0;
+ top: auto;
+ border: 2px solid lime;
+}
+masonry-track {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 3px 5px;
+}
+masonry-track:nth-child(1) { justify-content:start }
+masonry-track:nth-child(2) { justify-content:end }
+masonry-track:nth-child(3) { justify-content:center }
+masonry-track:nth-child(4) { justify-content:stretch; grid-template-columns: repeat(3,auto) repeat(2,max-content); }
+masonry-track:nth-child(5) { justify-content:space-between }
+masonry-track:nth-child(6) { justify-content:space-around }
+masonry-track:nth-child(7) { justify-content:space-evenly }
+masonry-track:nth-child(8) { justify-content:space-evenly }
+</style>
+</head>
+<body>
+<grid>
+ <masonry-track>
+  <item style="width:50px">1</item>
+  <item class="purple">20</item>
+  <item class="purple">26</item>
+  <item>33</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple" style="height:25px">2</item>
+  <item>9<a></a></item>
+  <item class="purple">18</item>
+  <item>25</item>
+ </masonry-track>
+ <masonry-track>
+  <item style="margin-left:10px">3</item>
+  <item>15</item>
+  <item class="purple">24</item>
+  <item class="purple">32</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple" style="margin-top:5px">4</item>
+  <item class="purple">10</item>
+  <item class="purple" style="writing-mode:vertical-rl">16</item>
+  <item>23</item>
+  <item>31</item>
+ </masonry-track>
+ <masonry-track>
+  <item>5</item>
+  <item>13</item>
+  <item class="purple">22</item>
+  <item>29</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">6<a></a></item>
+  <item>11</item>
+  <item>19</item>
+  <item class="purple">28</item>
+ </masonry-track>
+ <masonry-track>
+  <item>7</item>
+  <item class="purple"><z></z>14<a></a></item>
+  <item>21</item>
+  <item class="purple">30</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple" style="writing-mode:vertical-lr">8</item>
+  <item class="purple">12<z></z></item>
+  <item>17</item>
+  <item>27</item>
+ </masonry-track>
+</grid>
+<grid class="fallback" style="justify-content:start">
+  <item></item>
+</grid>
+<grid class="fallback" style="justify-content:center">
+  <item></item>
+</grid>
+<grid class="fallback" style="justify-content:center">
+  <item></item>
+</grid>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-multi-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-multi-001.html
new file mode 100644
index 0000000000..011c487cb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-multi-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with multiple `justify-tracks` values</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-justify-tracks-multi-001-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:15px/1 "Courier New", monospace; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(8,50px); /*intentionally one more than justify-tracks values*/
+  gap: 3px 5px;
+  padding: 10px 3px 1px 7px;
+  border: solid;
+  border-width: 1px 7px 3px 5px;
+  background: lightgrey content-box;
+  justify-tracks: start,end,center,stretch,space-between,space-around,space-evenly;
+  width: 500px;
+  vertical-justify: top;
+}
+.fallback { grid-template-rows:3px; padding:0; border:0; display: grid; }
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+  border: 1px solid;
+}
+item:nth-child(2n) { background:purple; width:auto; border-left:3px solid; }
+z { display: block; background: yellow; height: 20%; width:80%; }
+a {
+ position: absolute;
+ inset: 0;
+ top: auto;
+ border: 2px solid lime;
+}
+</style>
+</head>
+<body>
+<grid>
+  <item style="width:10%">1</item>
+  <item style="height:50%">2</item>
+  <item style="margin-left:2%">3</item>
+  <item style="margin-top:1%">4</item>
+  <item>5</item>
+  <item>6<a></a></item>
+  <item>7</item>
+  <item style="writing-mode:vertical-lr">8</item>
+  <item>9<a></a></item>
+  <item>10</item>
+  <item>11</item>
+  <item>12<z></z></item>
+  <item>13</item>
+  <item><z></z>14<a></a></item>
+  <item>15</item>
+  <item style="writing-mode:vertical-rl">16</item>
+  <item>17</item>
+  <item>18</item>
+  <item>19</item>
+  <item>20</item>
+  <item>21</item>
+  <item>22</item>
+  <item>23</item>
+  <item>24</item>
+  <item>25</item>
+  <item>26</item>
+  <item>27</item>
+  <item>28</item>
+  <item>29</item>
+  <item>30</item>
+  <item>31</item>
+  <item>32</item>
+  <item>33</item>
+</grid>
+<grid class="fallback" style="justify-tracks:space-between">
+  <item></item>
+</grid>
+<grid class="fallback" style="justify-tracks:space-around">
+  <item></item>
+</grid>
+<grid class="fallback" style="justify-tracks:space-evenly">
+  <item></item>
+</grid>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-001-ref.html
new file mode 100644
index 0000000000..39053051cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-001-ref.html
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `justify-tracks:stretch`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-rows: 150px 100px 50px;
+  grid-template-columns: 500px;
+  gap: 5px 3px;
+  padding: 10px;
+  border: 3px solid;
+  background: lightgrey content-box;
+  width: 500px;
+}
+masonry-track {
+  display: grid;
+  gap: 5px 3px;
+  width: 500px;
+}
+masonry-track:nth-child(1) {
+  grid-template-rows: 150px;
+  grid-template-columns: max-content auto auto min-content min-content auto;
+}
+masonry-track:nth-child(2) {
+  grid-template-rows: 100px;
+  grid-template-columns: auto 50px 3ch 3ch 3ch  min-content min-content;
+}
+masonry-track:nth-child(3) {
+  grid-template-rows: 50px;
+  grid-template-columns: 3ch auto 3ch 3ch auto 3ch auto;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+.purple { background:purple; width:auto; }
+z { display: block; background: yellow; width: 20%; height:10%; }
+a {
+ position: absolute;
+ inset: 0;
+ left: auto;
+ border: 2px solid lime;
+}
+</style>
+</head>
+<body>
+<grid>
+ <masonry-track>
+  <item style="border:10px solid; margin:10px 0 5px 3px;">1</item>
+  <item style="writing-mode:vertical-lr" class="purple">8<br>vertical</item>
+  <item class="purple">10</item>
+  <item class="purple" style="width:86px; border:solid; border-width:0 2px; margin-right:1px">12<z></z></item>
+  <item>15</item>
+  <item style="margin:0 auto" class="purple">18</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item style="width:40px; margin-right:10px" class="purple">4</item>
+  <item>5</item>
+  <item>9<a></a></item>
+  <item>13</item>
+  <item style="justify-self:start" class="purple">16</item>
+  <item>19</item>
+ </masonry-track>
+ <masonry-track>
+  <item>3</item>
+  <item class="purple">6<a></a></item>
+  <item>7</item>
+  <item>11</item>
+  <item class="purple">14<z></z><a></a></item>
+  <item>17</item>
+  <item style="margin-left: auto" class="purple">20</item>
+ </masonry-track>
+</grid>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-001.html
new file mode 100644
index 0000000000..17cb321821
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-001.html
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `justify-tracks:stretch`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-justify-tracks-stretch-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-rows: 150px 100px 50px;
+  grid-template-columns: masonry;
+  justify-tracks: stretch;
+  gap: 5px 3px;
+  padding: 10px;
+  border: 3px solid;
+  background: lightgrey content-box;
+  width: 500px;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+item:nth-child(2n) { background:purple; width:auto; }
+item:nth-child(1) { border:10px solid; margin: 10px 0 5px 3px; }
+z { display: block; background: yellow; width: 20%; height:10%; }
+a {
+ position: absolute;
+ inset: 0;
+ left: auto;
+ border: 2px solid lime;
+}
+</style>
+</head>
+<body>
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="max-width:40px; margin-right:10px">4</item>
+  <item>5</item>
+  <item>6<a></a></item>
+  <item>7</item>
+  <item style="writing-mode:vertical-lr">8 vertical</item>
+  <item>9<a></a></item>
+  <item>10</item>
+  <item>11</item>
+  <item style="max-width:90px; border:solid; border-width:0 2px; box-sizing:border-box; margin-right:1px">12<z></z></item>
+  <item>13</item>
+  <item>14<z></z><a></a></item>
+  <item>15</item>
+  <item style="justify-self:start">16</item>
+  <item>17</item>
+  <item style="margin:0 auto">18</item>
+  <item>19</item>
+  <item style="margin-left: auto">20</item>
+</grid>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-002-ref.html
new file mode 100644
index 0000000000..69759484f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-002-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with `justify-tracks:stretch`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:6px/1 monospace; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: 30px;
+  gap: 1px 2px;
+  padding: 2px 3px 1px 1px;
+  border-style: solid;
+  border-width: 1px 7px 3px 5px;
+  border-inline-start-color: magenta;
+  border-block-start-color: blue;
+  background: lightgrey content-box;
+  inline-size: 25px;
+  vertical-align: top;
+}
+item {
+  border-inline-start: 1px solid magenta;
+  border-block-start: 2px solid blue;
+}
+item:nth-child(2n+1) { background: grey; }
+item:nth-child(2n) { background: cyan; }
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; direction:ltr; }
+.swr { writing-mode: sideways-lr; direction:rtl; }
+</style>
+</head>
+<body>
+<div style="display:none">
+<grid>
+  <item>1</item>
+  <item>2a<br>2b</item>
+</grid>
+</div>
+<script>
+let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
+let grid = document.getElementsByTagName('grid')[0];
+for (const reorder of [false, true]) {
+  for (const cb_wm of wms) {
+    for (const child_wm of wms) {
+      let e = grid.cloneNode(true);
+      e.className = cb_wm;
+      e.children[1].className = child_wm;
+      if (reorder) {
+        e.children[0].style.order = '1';
+      }
+      document.body.appendChild(e);
+    }
+  }
+}
+</script>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-002.html
new file mode 100644
index 0000000000..6b7746722d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-tracks/masonry-justify-tracks-stretch-002.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with `justify-tracks:stretch`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-justify-tracks-stretch-002-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:6px/1 monospace; padding:0; margin:0;
+}
+grid {
+  display: inline-grid;
+  grid-template-columns: masonry;
+  grid-template-rows: 30px;
+  gap: 1px 2px;
+  padding: 2px 3px 1px 1px;
+  border-style: solid;
+  border-width: 1px 7px 3px 5px;
+  border-inline-start-color: magenta;
+  border-block-start-color: blue;
+  background: lightgrey content-box;
+  justify-tracks: stretch;
+  inline-size: 25px;
+  vertical-align: top;
+}
+item {
+  position: relative;
+  border-inline-start: 1px solid magenta;
+  border-block-start: 2px solid blue;
+}
+item:nth-child(2n+1) { background: grey; }
+item:nth-child(2n) { background: cyan; }
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; direction:ltr; }
+.swr { writing-mode: sideways-lr; direction:rtl; }
+</style>
+</head>
+<body>
+<div style="display:none">
+<grid>
+  <item>1</item>
+  <item>2a<br>2b</item>
+</grid>
+</div>
+<script>
+let wms = [ "hl", "hr", "vll", "vrr", "vlr", "vrl", "swl", "swr", ];
+let grid = document.getElementsByTagName('grid')[0];
+for (const reorder of [false, true]) {
+  for (const cb_wm of wms) {
+    for (const child_wm of wms) {
+      let e = grid.cloneNode(true);
+      e.className = cb_wm;
+      e.children[1].className = child_wm;
+      if (reorder) {
+        e.children[0].style.order = '1';
+      }
+      document.body.appendChild(e);
+    }
+  }
+}
+</script>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html
new file mode 100644
index 0000000000..e48b650253
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3/#containing-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Svg should use grid's content logical width for its containing block size and get sized to 100px x 100px">
+<style>
+grid {
+    display: grid;
+    grid-template-columns:masonry;
+    grid-template-rows: auto;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<grid>
+    <svg width="100" height="100" viewBox="0 0 1 1" style="width: 100%; max-width: 100px; background: green;"></svg>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-grid-template-columns-computed-withcontent.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-grid-template-columns-computed-withcontent.html
new file mode 100644
index 0000000000..b36efb664d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-grid-template-columns-computed-withcontent.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Masonry Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    display: grid;
+    grid-template-rows: masonry;
+    font-size: 40px;
+    min-width: 200px;
+    width: 300px;
+    max-width: 400px;
+    min-height: 500px;
+    height: 600px;
+    max-height: 700px;
+  }
+  #child {
+    min-width: 20px;
+    width: 30px;
+    max-width: 40px;
+    min-height: 50px;
+    height: 60px;
+    max-height: 70px;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target">
+    <div id="child"></div>
+  </div>
+</div>
+<script>
+test_computed_value("grid-template-rows", 'masonry', 'masonry');
+test_computed_value("grid-template-columns", 'none', 'none'); // "none" without #child
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width
+test_computed_value("grid-template-columns", 'calc(-0.5em + 10px)', '0px');
+test_computed_value("grid-template-columns", 'calc(0.5em + 10px)', '30px');
+test_computed_value("grid-template-columns", 'calc(30% + 40px)', '130px'); // 30% * width + 40px
+test_computed_value("grid-template-columns", '5fr', '300px'); // width
+test_computed_value("grid-template-columns", 'min-content', '30px');
+test_computed_value("grid-template-columns", 'max-content', '30px');
+test_computed_value("grid-template-columns", 'auto', '300px'); // width
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_computed_value("grid-template-columns", 'minmax(10px, auto)', '300px'); // width
+test_computed_value("grid-template-columns", 'minmax(20%, max-content)', '60px'); // 20% * width
+test_computed_value("grid-template-columns", 'minmax(min-content, calc(-0.5em + 10px))', '30px');
+test_computed_value("grid-template-columns", 'minmax(auto, 0)', '30px');
+
+// track-size fit-content( <length-percentage> )
+test_computed_value("grid-template-columns", 'fit-content(70px)', '30px');
+test_computed_value("grid-template-columns", 'fit-content(20%)', '30px');
+test_computed_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))', '30px');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+test_computed_value("grid-template-columns", 'repeat(1, 10px)', '10px');
+test_computed_value("grid-template-columns", 'repeat(1, [one two] 20%)', '[one two] 60px');
+test_computed_value("grid-template-columns", 'repeat(2, minmax(10px, auto))', '160px 140px');
+
+test_computed_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
+                    '30px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_computed_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))',
+                    '30px 54px 54px 54px 54px 54px');
+test_computed_value("grid-template-columns", '[] 150px [] 1fr []', '150px 150px');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_computed_value("grid-template-columns", 'repeat(auto-fill, 200px)', '200px');
+test_computed_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)',
+                    '[one] 60px [one] 60px [one] 60px [one] 60px [one] 60px');
+test_computed_value("grid-template-columns", 'repeat(auto-fill, minmax(100px, 5fr) [two])',
+                    '100px [two] 100px [two] 100px [two]');
+test_computed_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])',
+                    '[three] 240px [four]');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_computed_value("grid-template-columns", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]',
+                    '[one] 50px 50px [two] 30px [three] 10px 40px [four five] 200px 200px [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001-ref.html
new file mode 100644
index 0000000000..3716999815
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout using `order`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns:  repeat(4,auto);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="margin-top:10px">4</item>
+  <item>6</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">5</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001.html
new file mode 100644
index 0000000000..d01f52ea04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout using `order`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-order-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns:  repeat(4,auto);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="order:1">2</item>
+  <item style="order:2">3</item>
+  <item style="margin-top:10px">4</item>
+  <item style="order:1; grid-column:span 2">5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002-ref.html
new file mode 100644
index 0000000000..5dd4e47d80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout using `order` and `masonry-auto-flow: next`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns:  repeat(4,auto);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="margin-top:10px">4</item>
+  <item>6</item>
+  <item>2</item>
+  <item style="grid-column:1/span 2">5</item>
+  <item style="grid-column:3">3</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002.html
new file mode 100644
index 0000000000..ae68f4e631
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout using `order` and `masonry-auto-flow: next`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-order-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns:  repeat(4,auto);
+  grid-template-rows: masonry;
+  masonry-auto-flow: next;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="order:1">2</item>
+  <item style="order:2">3</item>
+  <item style="margin-top:10px">4</item>
+  <item style="order:1; grid-column:span 2">5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/parsing/masonry-parsing.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/parsing/masonry-parsing.html
new file mode 100644
index 0000000000..e3245095fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/parsing/masonry-parsing.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Masonry Test: parsing properties and shortands</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+function masonry_test_template_prop(name) {
+  test_valid_value(name, 'masonry');
+  test_invalid_value(name, 'masonry []');
+  test_invalid_value(name, 'masonry [foo] 40px');
+  test_invalid_value(name, 'masonry 40px');
+  test_invalid_value(name, '[foo] masonry');
+  test_invalid_value(name, '0px masonry');
+  test_invalid_value(name, 'masonry masonry');
+  test_invalid_value(name, 'subgrid masonry');
+  test_invalid_value(name, 'masonry subgrid');
+  test_invalid_value(name, 'masonry repeat(1, [])');
+  test_invalid_value(name, 'masonry repeat(auto-fill, [])');
+  test_invalid_value(name, 'masonry / none');
+}
+masonry_test_template_prop("grid-template-columns");
+masonry_test_template_prop("grid-template-rows");
+
+test_shorthand_value("grid-template", 'masonry / masonry', {
+  'grid-template-rows': 'masonry',
+  'grid-template-columns': 'masonry',
+  'grid-template-areas': 'none'
+});
+
+test_shorthand_value("grid-template", 'masonry / subgrid [foo]', {
+  'grid-template-rows': 'masonry',
+  'grid-template-columns': 'subgrid [foo]',
+  'grid-template-areas': 'none'
+});
+
+test_shorthand_value("grid-template", '10px / masonry', {
+  'grid-template-rows': '10px',
+  'grid-template-columns': 'masonry',
+  'grid-template-areas': 'none'
+});
+
+test_shorthand_value("grid", 'masonry / masonry', {
+  'grid-template-rows': 'masonry',
+  'grid-template-columns': 'masonry',
+  'grid-template-areas': 'none',
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_shorthand_value("grid", 'masonry / subgrid [foo]', {
+  'grid-template-rows': 'masonry',
+  'grid-template-columns': 'subgrid [foo]',
+  'grid-template-areas': 'none',
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_shorthand_value("grid", '10px / masonry', {
+  'grid-template-rows': '10px',
+  'grid-template-columns': 'masonry',
+  'grid-template-areas': 'none',
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_valid_value("masonry-auto-flow", 'pack');
+test_valid_value("masonry-auto-flow", 'pack ordered', 'ordered');
+test_valid_value("masonry-auto-flow", 'ordered next', 'next ordered');
+test_valid_value("masonry-auto-flow", 'next definite-first', 'next');
+test_valid_value("masonry-auto-flow", 'definite-first pack', 'pack');
+test_invalid_value("masonry-auto-flow", 'auto');
+test_invalid_value("masonry-auto-flow", 'none');
+test_invalid_value("masonry-auto-flow", '10px');
+test_invalid_value("masonry-auto-flow", 'row');
+test_invalid_value("masonry-auto-flow", 'dense');
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html
new file mode 100644
index 0000000000..25ec77bc51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html
@@ -0,0 +1,224 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with a subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  grid-template-rows: 50px 80px 40px;
+  grid-template-columns: auto;
+  gap: 4px 2px;
+  padding: 1px 3px 5px 7px;
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  background: lightgrey content-box;
+}
+masonry-track {
+  display: grid;
+  gap: 4px 2px;
+}
+masonry-track:nth-child(1) {
+  grid-template-rows: 50px;
+  grid-template-columns: min-content auto;
+}
+masonry-track:nth-child(2) {
+  grid-auto-flow: column;
+  grid-template-rows: 80px 40px;
+  grid-template-columns: auto;
+}
+.rows {
+  grid-template-columns: 50px 122px;
+  grid-template-rows: auto;
+  align-content: start;
+}
+.rows > masonry-track:nth-child(1) {
+  grid-template-columns: 50px;
+  grid-template-rows: auto;
+  align-content: start;
+}
+.rows > masonry-track:nth-child(2) {
+  grid-template-columns: 80px 40px;
+  grid-template-rows: auto;
+  align-content: start;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+.purple { background:purple; width:auto; justify-self:start; }
+.rows .purple { justify-self:stretch; }
+.nth-1 {
+  border: solid;
+  border-width: 3px 13px 1px 1px;
+  margin: 7px 1px 5px 3px;
+}
+subgrid {
+  display: grid;
+  grid: subgrid / 2ch auto;
+  grid-row: 2 / span 2;
+  grid-gap: 8px 20px;
+  background: yellow;
+}
+masonry-track > subgrid {
+  grid-row: 1 / span 2;
+}
+.rows > masonry-track > subgrid {
+  grid: auto auto / subgrid;
+  grid-row: 2;
+  grid-column: 1 / span 2;
+}
+.js { justify-self:stretch; }
+</style>
+</head>
+<body>
+
+<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
+<grid style="grid:masonry/none">
+  <item class="nth-1">1</item>
+  <item class="purple js">2</item>
+  <item>3</item>
+  <subgrid style="grid:masonry/none">
+    <item class="nth-1">4a</item>
+    <item style="margin-right:15px" class="purple js">4b</item>
+  </subgrid>
+</grid>
+
+<grid>
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid>
+    <item class="nth-1" style="grid-column:span 2">4a</item>
+    <item class="purple js">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid>
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:subgrid/auto">
+    <item class="nth-1">4a</item>
+    <item class="purple js">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid>
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:subgrid/auto; grid-auto-flow:column">
+    <item class="nth-1">4a</item>
+    <item class="purple js">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid>
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:auto auto/masonry">
+    <item class="nth-1">4a</item>
+    <item class="purple">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid class="rows">
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid>
+    <item class="nth-1" style="grid-row:span 2; align-self:start">4a</item>
+    <item class="purple">4b</item>
+    <item style="grid-column:2">4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid class="rows">
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:auto/subgrid">
+    <item class="nth-1">4a</item>
+    <item class="purple">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid class="rows">
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:auto/subgrid; grid-auto-flow:column">
+    <item class="nth-1">4a</item>
+    <item class="purple">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid class="rows">
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:auto auto/subgrid">
+    <item class="nth-1">4a</item>
+    <item class="purple">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html
new file mode 100644
index 0000000000..de07dfb78d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html
@@ -0,0 +1,164 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with a subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-subgrid-001-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  grid-template-rows: 50px 80px 40px;
+  grid-template-columns: masonry;
+  gap: 4px 2px;
+  padding: 1px 3px 5px 7px;
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  background: lightgrey content-box;
+}
+.rows {
+  grid-template-columns: 50px 80px 40px;
+  grid-template-rows: masonry;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+item:nth-child(2n) { background:purple; width:auto; }
+item:nth-child(1) {
+  border: solid;
+  border-width: 3px 13px 1px 1px;
+  margin: 7px 1px 5px 3px;
+}
+subgrid {
+  display: grid;
+  grid: subgrid / subgrid;
+  grid-row: 2 / span 2;
+  grid-gap: 8px 20px;
+  background: yellow;
+}
+.rows > subgrid {
+  grid-row: initial;
+  grid-column: 2 / span 2;
+}
+</style>
+</head>
+<body>
+
+<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
+<grid style="grid:masonry/masonry">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item style="margin-right:15px">4b</item>
+  </subgrid>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:subgrid/auto">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:subgrid/auto; grid-auto-flow:column">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:auto auto/subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:auto/subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:auto/subgrid; grid-auto-flow:column">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:auto auto/subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html
new file mode 100644
index 0000000000..4750c1899e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html
@@ -0,0 +1,302 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Masonry layout with a subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  grid-template-rows: 40px 30px 20px;
+  grid-template-columns: masonry;
+  gap: 4px 2px;
+  padding: 1px 3px 5px 7px;
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  background: lightgrey content-box;
+  grid-auto-flow: column;
+}
+.rows {
+  grid-template-columns: 40px 30px 20px;
+  grid-template-rows: masonry;
+  grid-auto-flow: row;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+item:nth-child(2n) { background:purple; width:auto; }
+item:nth-child(1) {
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  margin: 7px 1px 5px 3px;
+}
+subgrid {
+  display: grid;
+  grid-row: auto/span 2;
+  grid-column: auto/span 2;
+  grid: subgrid / subgrid;
+  grid-gap: 6px 8px;
+  background: yellow;
+}
+subgrid.definite {
+  grid-row-start:2;
+}
+subgrid.extent {
+  grid-row: 1/span 3;
+}
+.rows > subgrid.definite {
+  grid-column-start:2;
+  grid-row-start:auto;
+}
+.rows > subgrid.extent {
+  grid-row: auto/span 2;
+  grid-column: 1/span 3;
+}
+</style>
+</head>
+<body>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: none / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid>
+  <item>1</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: 29px 19px / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent" style="grid: 39px 28px 19px / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: none / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid>
+  <item>1</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: 29px 19px / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent" style="grid: 39px 28px 19px / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: auto auto / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / none">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid class="rows">
+  <item>1</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / 27px 17px">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent" style="grid: masonry / 37px 24px 17px">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / none">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid class="rows">
+  <item>1</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / 27px 17px">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent" style="grid: masonry / 37px 24px 17px">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / auto auto">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html
new file mode 100644
index 0000000000..466e95eb03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html
@@ -0,0 +1,301 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry layout with a subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drats.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-subgrid-002-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  grid-template-rows: 40px 30px 20px;
+  grid-template-columns: masonry;
+  gap: 4px 2px;
+  padding: 1px 3px 5px 7px;
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  background: lightgrey content-box;
+}
+.rows {
+  grid-template-columns: 40px 30px 20px;
+  grid-template-rows: masonry;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+item:nth-child(2n) { background:purple; width:auto; }
+item:nth-child(1) {
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  margin: 7px 1px 5px 3px;
+}
+subgrid {
+  display: grid;
+  grid-row: auto/span 2;
+  grid-column: auto/span 2;
+  grid: subgrid / subgrid;
+  grid-gap: 6px 8px;
+  background: yellow;
+}
+subgrid.definite {
+  grid-row-start:2;
+}
+subgrid.extent {
+  grid-row: auto/span 3;
+}
+.rows > subgrid.definite {
+  grid-column-start:2;
+}
+.rows > subgrid.extent {
+  grid-row: auto/span 2;
+  grid-column: auto/span 3;
+}
+</style>
+</head>
+<body>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid>
+  <item>1</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: subgrid / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid>
+  <item>1</item>
+  <subgrid style="grid: subgrid / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: auto auto / subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid class="rows">
+  <item>1</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid class="rows">
+  <item>1</item>
+  <subgrid style="grid: masonry / subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: subgrid / auto auto">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block-ref.html
new file mode 100644
index 0000000000..993017919f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Reference: Verify definite blocks effect track-sizing algorithm.</title>
+</head>
+
+<body>
+<style>
+grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 50px 50px;
+    width: 300px;
+    height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 30px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    height: 50px;
+    width: 100px;
+    grid-row: 2;
+    grid-column: 1;
+    background-color: purple;
+}
+
+box4 {
+    height: 50px;
+    background-color: green;
+}
+
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block.html
new file mode 100644
index 0000000000..05f6089390
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify definite blocks effect track-sizing algorithm.</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+    <link rel="match" href="masonry-track-sizing-explicit-block-ref.html">
+</head>
+
+<body>
+<style>
+grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: masonry;
+    width: 300px;
+    height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 30px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    height: 50px;
+    width: 100px;
+    grid-row: 2;
+    grid-column: 1;
+    background-color: purple;
+}
+
+box4 {
+    height: 50px;
+    background-color: green;
+}
+
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side-ref.html
new file mode 100644
index 0000000000..5a31517183
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify correct behavior of track-sizing</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+</head>
+
+<body>
+<style>
+grid {
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  grid-template-rows: 50px 250px;
+  width: 300px;
+  height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+box4 {
+    height: 50px;
+    background-color: green;
+}
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side.html
new file mode 100644
index 0000000000..cd1b78a47b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify correct behavior of track-sizing</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+    <link rel="match" href="masonry-track-sizing-overflow-left-side-ref.html">
+</head>
+
+<body>
+<style>
+grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: masonry;
+  width: 300px;
+  height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+box4 {
+    height: 50px;
+    background-color: green;
+}
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side-ref.html
new file mode 100644
index 0000000000..51e657e2a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify correct behavior of track-sizing</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+</head>
+
+<body>
+<style>
+grid {
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  grid-template-rows: 1fr 50px;
+  width: 300px;
+  height: 100px;
+}
+
+box1 {
+    height: 50px;
+    background-color: red;
+}
+
+box2 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box3 {
+    height: 50px;
+    background-color: green;
+}
+
+box4 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side.html
new file mode 100644
index 0000000000..e4c17fd7b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify correct behavior of track-sizing</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+    <link rel="match" href="masonry-track-sizing-overflow-right-side-ref.html">
+</head>
+
+<body>
+<style>
+grid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: masonry;
+  width: 300px;
+  height: 100px;
+}
+
+box1 {
+    width: 1fr;
+    height: 50px;
+    background-color: red;
+}
+
+box2 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box3 {
+    height: 50px;
+    background-color: green;
+}
+
+box4 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row-ref.html
new file mode 100644
index 0000000000..b3e5fef233
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Reference: Verify that fully spanning blocks take presedence over indefinite ones.</title>
+</head>
+
+<body>
+<style>
+grid {
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    grid-template-rows: auto auto auto;
+    width: 300px;
+    height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+box4 {
+    height: 50px;
+    width: 300px;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    background-color: green;
+}
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box4>4</box4>
+    <box3>3</box3>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row.html
new file mode 100644
index 0000000000..6058ca5e74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify that fully spanning blocks take presedence over indefinite ones.</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+    <link rel="match" href="masonry-track-sizing-span-row-ref.html">
+</head>
+
+<body>
+<style>
+grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: masonry;
+    width: 300px;
+    height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+box4 {
+    height: 50px;
+    width: 300px;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    background-color: green;
+}
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 17:32:43 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 17:32:43 +0000
commit	6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
tree	a68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/css-grid/masonry/tentative
parent	Initial commit. (diff)
download	thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip