From 63983bc1193f78f488ce32038202812ab68ea13e Mon Sep 17 00:00:00 2001
From: Yanling Wang <yanlingwang@microsoft.com>
Date: Fri, 5 Sep 2025 17:36:14 -0700
Subject: [PATCH] [Masonry] Adding support for Masonry out-of-flow items

This CL implements out-of-flow support in masonry (outside of
fragmentation).
- Enhanced `placeOutOfFlowItems` to properly handle OOF items with
correct containing block calculation, alignment offset computation,
and static positioning.
- Extended `out_of_flow_layout_part` to recognize masonry containers
and delegate OOF item placement to the masonry-specific containing
block calculation.

Bug: 343257585
Change-Id: I0ecccb7b2e6c3a46a810bd01577a88d53b05d7a1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6909974
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Commit-Queue: Yanling Wang <yanlingwang@microsoft.com>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1511947}
---
 .../abspos/column-masonry-alignment-ref.html  | 144 ++++++++++++++++++
 .../abspos/column-masonry-alignment.html      | 142 +++++++++++++++++
 ...lumn-masonry-intrinsic-sizing-oof-ref.html |  51 +++++++
 .../column-masonry-intrinsic-sizing-oof.html  |  55 +++++++
 .../column-masonry-out-of-flow-001-ref.html   |  87 +++++++++++
 .../column-masonry-out-of-flow-001.html       |  86 +++++++++++
 .../column-masonry-out-of-flow-002-ref.html   |  83 ++++++++++
 .../column-masonry-out-of-flow-002.html       |  84 ++++++++++
 .../column-masonry-out-of-flow-003-ref.html   |  68 +++++++++
 .../column-masonry-out-of-flow-003.html       |  71 +++++++++
 ...ry-positioned-item-dynamic-change-ref.html |  18 +++
 ...asonry-positioned-item-dynamic-change.html |  39 +++++
 .../abspos/row-masonry-alignment-ref.html     | 144 ++++++++++++++++++
 .../abspos/row-masonry-alignment.html         | 143 +++++++++++++++++
 .../row-masonry-intrinsic-sizing-oof-ref.html |  52 +++++++
 .../row-masonry-intrinsic-sizing-oof.html     |  57 +++++++
 .../row-masonry-out-of-flow-001-ref.html      |  88 +++++++++++
 .../abspos/row-masonry-out-of-flow-001.html   |  88 +++++++++++
 .../row-masonry-out-of-flow-002-ref.html      |  84 ++++++++++
 .../abspos/row-masonry-out-of-flow-002.html   |  86 +++++++++++
 .../row-masonry-out-of-flow-003-ref.html      |  68 +++++++++
 .../abspos/row-masonry-out-of-flow-003.html   |  72 +++++++++
 22 files changed, 1810 insertions(+)
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-alignment-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-alignment.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-intrinsic-sizing-oof-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-intrinsic-sizing-oof.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-003-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-003.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-positioned-item-dynamic-change-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/column-masonry-positioned-item-dynamic-change.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-alignment-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-alignment.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-intrinsic-sizing-oof-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-intrinsic-sizing-oof.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-003-ref.html
 create mode 100644 css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-003.html

diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-alignment-ref.html b/css/css-grid/masonry/tentative/abspos/column-masonry-alignment-ref.html
new file mode 100644
index 00000000000000..2565ced24f2130
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-alignment-ref.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+      html,body {
+          color:black;
+          background-color:white;
+          font:15px/1 monospace;
+      }
+
+      .container {
+          width: 850px;
+          height: 800px;
+          border: 2px solid black;
+          margin: 20px;
+      }
+
+      .grid {
+          display: grid;
+          grid-template-columns: repeat(5, 150px);
+          grid-auto-rows: auto;
+          position: relative;
+          padding: 20px;
+          gap: 15px;
+          border: 1px dashed #999;
+          height: 700px;
+      }
+
+      .item {
+          background: lightblue;
+          padding: 10px;
+          border: 1px solid blue;
+          height: 80px;
+      }
+
+      .abspos {
+          position: absolute;
+          width: 60px;
+          height: 40px;
+          border: 2px solid black;
+          font-size: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+      }
+
+      .align-self {
+          grid-column: 2 / 3;
+          grid-row: 1 / 2;
+      }
+
+      .align-start {
+          align-self: start;
+          background: lightcoral;
+      }
+
+      .align-end {
+          align-self: end;
+          background: lightgreen;
+      }
+
+      .align-center {
+          align-self: center;
+          background: lightblue;
+      }
+
+      .justify-self {
+          grid-column: 4 / 5;
+          grid-row: 1 / 2;
+      }
+
+      .justify-start {
+          justify-self: start;
+          background: gold;
+      }
+
+      .justify-end {
+          justify-self: end;
+          background: silver;
+      }
+
+      .justify-center {
+          justify-self: center;
+          background: tan;
+      }
+
+      .combo-center-center {
+          grid-column: 3 / 4;
+          grid-row: 1 / 2;
+          align-self: center;
+          justify-self: center;
+          background: hotpink;
+      }
+
+      .safe-align {
+          position: absolute;
+          background: orange;
+          border: 1px solid darkorange;
+          grid-column: 1 / 2;
+          grid-row: 1 / 2;
+          width: 170px;
+          height: 30px;
+          justify-self: safe end;
+          align-self: center;
+          font-size: 10px;
+      }
+
+    .unsafe-align {
+          position: absolute;
+          background: purple;
+          border: 1px solid darkmagenta;
+          grid-column: 5 / 6;
+          grid-row: 1 / 2;
+          width: 170px;
+          height: 30px;
+          justify-self: unsafe end;
+          align-self: center;
+          font-size: 10px;
+      }
+    </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="item">Item 1</div>
+    <div class="item">Item 2</div>
+    <div class="item">Item 3</div>
+    <div class="abspos align-self align-start">align-self: start</div>
+    <div class="abspos align-self align-end">align-self: end</div>
+    <div class="abspos align-self align-center">align-self: center</div>
+    <div class="item">Item 4</div>
+    <div class="item">Item 5</div>
+    <div class="abspos justify-self justify-start">justify-self: start</div>
+    <div class="abspos justify-self justify-end">justify-self: end</div>
+    <div class="abspos justify-self justify-center">justify-self: center</div>
+    <div class="abspos combo-center-center">center + center</div>
+    <div class="safe-align">justify-self: safe end</div>
+    <div class="unsafe-align">justify-self: unsafe end</div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-alignment.html b/css/css-grid/masonry/tentative/abspos/column-masonry-alignment.html
new file mode 100644
index 00000000000000..1baa113856c0d3
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-alignment.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout alignment properties for absolutely positioned elements</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="column-masonry-alignment-ref.html">
+  <style>
+    html,body {
+        color:black;
+        background-color:white;
+        font:15px/1 monospace;
+    }
+
+    .container {
+        width: 850px;
+        height: 800px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .masonry {
+        display: masonry;
+        grid-template-columns: repeat(5, 150px);
+        position: relative;
+        padding: 20px;
+        gap: 15px;
+        border: 1px dashed #999;
+        height: 700px;
+    }
+
+    .item {
+        background: lightblue;
+        padding: 10px;
+        border: 1px solid blue;
+        height: 80px;
+    }
+
+    .abspos {
+        position: absolute;
+        width: 60px;
+        height: 40px;
+        border: 2px solid black;
+        font-size: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .align-self {
+        grid-column: 2 / 3;
+    }
+
+    .align-start {
+        align-self: start;
+        background: lightcoral;
+    }
+
+    .align-end {
+        align-self: end;
+        background: lightgreen;
+    }
+
+    .align-center {
+        align-self: center;
+        background: lightblue;
+    }
+
+    .justify-self {
+        grid-column: 4 / 5;
+    }
+
+    .justify-start {
+        justify-self: start;
+        background: gold;
+    }
+
+    .justify-end {
+        justify-self: end;
+        background: silver;
+    }
+
+    .justify-center {
+        justify-self: center;
+        background: tan;
+    }
+
+    .combo-center-center {
+        grid-column: 3 / 4;
+        align-self: center;
+        justify-self: center;
+        background: hotpink;
+    }
+
+    .safe-align {
+        position: absolute;
+        background: orange;
+        border: 1px solid darkorange;
+        grid-column: 1 / 2;
+        width: 170px;
+        height: 30px;
+        justify-self: safe end;
+        align-self: center;
+        font-size: 10px;
+    }
+
+    .unsafe-align {
+        position: absolute;
+        background: purple;
+        border: 1px solid darkmagenta;
+        grid-column: 5 / 6;
+        width: 170px;
+        height: 30px;
+        justify-self: unsafe end;
+        align-self: center;
+        font-size: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="item">Item 1</div>
+    <div class="item">Item 2</div>
+    <div class="item">Item 3</div>
+    <div class="abspos align-self align-start">align-self: start</div>
+    <div class="abspos align-self align-end">align-self: end</div>
+    <div class="abspos align-self align-center">align-self: center</div>
+    <div class="item">Item 4</div>
+    <div class="item">Item 5</div>
+    <div class="abspos justify-self justify-start">justify-self: start</div>
+    <div class="abspos justify-self justify-end">justify-self: end</div>
+    <div class="abspos justify-self justify-center">justify-self: center</div>
+    <div class="abspos combo-center-center">center + center</div>
+    <div class="safe-align">justify-self: safe end</div>
+    <div class="unsafe-align">justify-self: unsafe end</div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-intrinsic-sizing-oof-ref.html b/css/css-grid/masonry/tentative/abspos/column-masonry-intrinsic-sizing-oof-ref.html
new file mode 100644
index 00000000000000..db9300ad9b4283
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-intrinsic-sizing-oof-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+        border: 2px solid black;
+        margin: 10px;
+        width: 300px;
+        position: relative;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(3, auto);
+        grid-template-rows: auto;
+        border: 2px solid blue;
+    }
+
+    .oof-item {
+        position: absolute;
+        background: red;
+        color: white;
+        padding: 5px;
+        border: 1px solid darkred;
+    }
+
+    .oof-1 {
+        top: 50px;
+        left: 50px;
+        width: 60px;
+        height: 40px;
+    }
+
+    .oof-2 {
+        top: 100px;
+        left: 150px;
+        width: 70px;
+        height: 50px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="oof-item oof-1"></div>
+    <div class="oof-item oof-2"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-intrinsic-sizing-oof.html b/css/css-grid/masonry/tentative/abspos/column-masonry-intrinsic-sizing-oof.html
new file mode 100644
index 00000000000000..b0be4bff0aedc2
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-intrinsic-sizing-oof.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout intrinsic size with only OOF children</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="column-masonry-intrinsic-sizing-oof-ref.html">
+  <style>
+    .container {
+        border: 2px solid black;
+        margin: 10px;
+        width: 300px;
+        position: relative;
+    }
+
+    .masonry {
+        display: masonry;
+        grid-template-columns: repeat(3, auto);
+        border: 2px solid blue;
+    }
+
+    .oof-item {
+        position: absolute;
+        background: red;
+        color: white;
+        padding: 5px;
+        border: 1px solid darkred;
+    }
+
+    .oof-1 {
+        top: 50px;
+        left: 50px;
+        width: 60px;
+        height: 40px;
+    }
+
+    .oof-2 {
+        top: 100px;
+        left: 150px;
+        width: 70px;
+        height: 50px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="oof-item oof-1"></div>
+    <div class="oof-item oof-2"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001-ref.html b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001-ref.html
new file mode 100644
index 00000000000000..9bf28dea91d723
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001-ref.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+        width: 900px;
+        height: 900px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(4, 10rem);
+        grid-template-rows: 800px;
+        justify-content: center;
+        position: relative;
+        height: 800px;
+        width: 40rem;
+        padding: 20px;
+        gap: 10px;
+        border: 1px dashed #999;
+    }
+
+    .abspos-first {
+        grid-row: 1 / 2;
+        grid-column: span 2;
+        position: absolute;
+        top: 70px;
+        bottom: 440px;
+        left: 80px;
+        right: 30px;
+        background: blue;
+    }
+
+    .abspos-second {
+        grid-row: 1 / 2;
+        grid-column: 4 / 5;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background: red;
+    }
+
+    .abspos-third {
+        grid-row: 1 / 2;
+        grid-column: 4 / 5;
+        position: absolute;
+        width: 50px;
+        height: 60px;
+        background: yellow;
+        align-self: end;
+    }
+
+    .fixedpos {
+        position: fixed;
+        top: 50%;
+        right: 0;
+        background: green;
+        width: 60px;
+        height: 60px;
+    }
+
+    .static-span-two {
+        position: absolute;
+        width: 120px;
+        height: 30px;
+        background: lightcoral;
+        border: 2px solid red;
+        grid-column: span 2;
+        grid-row: 1 / 2;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="abspos-first"></div>
+    <div class="abspos-second"></div>
+    <div class="abspos-third"></div>
+    <div class="fixedpos"></div>
+    <div class="static-span-two"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001.html b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001.html
new file mode 100644
index 00000000000000..3eb9b27937f51e
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-001.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout out-of-flow positioning</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="column-masonry-out-of-flow-001-ref.html">
+  <style>
+    .container {
+        width: 900px;
+        height: 900px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .masonry {
+        display: masonry;
+        grid-template-columns: repeat(4, 10rem);
+        justify-content: center;
+        position: relative;
+        height: 800px;
+        width: 40rem;
+        padding: 20px;
+        gap: 10px;
+        border: 1px dashed #999;
+    }
+
+    .abspos-first {
+        grid-column: span 2;
+        position: absolute;
+        top: 70px;
+        bottom: 440px;
+        left: 80px;
+        right: 30px;
+        background: blue;
+    }
+
+    .abspos-second {
+        grid-column: 4 / 5;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background: red;
+    }
+
+    .abspos-third {
+        grid-column: 4 / 5;
+        position: absolute;
+        width: 50px;
+        height: 60px;
+        background: yellow;
+        align-self: end;
+    }
+
+    .fixedpos {
+        position: fixed;
+        top: 50%;
+        right: 0;
+        background: green;
+        width: 60px;
+        height: 60px;
+    }
+
+    .static-span-two {
+        position: absolute;
+        width: 120px;
+        height: 30px;
+        background: lightcoral;
+        border: 2px solid red;
+        grid-column: span 2;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="abspos-first"></div>
+    <div class="abspos-second"></div>
+    <div class="abspos-third"></div>
+    <div class="fixedpos"></div>
+    <div class="static-span-two"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002-ref.html b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002-ref.html
new file mode 100644
index 00000000000000..498c307e0606b7
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002-ref.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+        width: 300px;
+        height: 150px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: repeat(4, 60px);
+        grid-template-rows: auto;
+        border: 1px solid blue;
+        padding: 10px;
+        gap: 5px;
+        position: relative;
+    }
+
+    .item {
+        background: lightblue;
+        padding: 5px;
+        height: 100px;
+    }
+
+    .wrapper {
+        background: lightgreen;
+        padding: 5px;
+        height: 60px;
+        border: 1px dashed green;
+    }
+
+    .absolute {
+        position: absolute;
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+        background: red;
+        top: 30px;
+        width: 20px;
+        height: 20px;
+    }
+
+    .static-pos-with-grid-column {
+        position: absolute;
+        background: yellow;
+        grid-row: 1 / 2;
+        grid-column: 2 / 3;
+        width: 10px;
+        height: 10px;
+    }
+
+    .static-pos {
+        position: absolute;
+        background: orange;
+        width: 10px;
+        height: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="item">
+      <div class="wrapper">
+        <div class="absolute"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="wrapper">
+        <div class="static-pos-with-grid-column"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="static-pos"></div>
+    </div>
+    <div class="item"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002.html b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002.html
new file mode 100644
index 00000000000000..c24b64dc555d23
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-002.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout out-of-flow positioning</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="column-masonry-out-of-flow-002-ref.html">
+  <style>
+    .container {
+        width: 300px;
+        height: 150px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .masonry {
+        display: masonry;
+        grid-template-columns: repeat(4, 60px);
+        border: 1px solid blue;
+        padding: 10px;
+        gap: 5px;
+        position: relative;
+    }
+
+    .item {
+        background: lightblue;
+        padding: 5px;
+        height: 100px;
+    }
+
+    .wrapper {
+        background: lightgreen;
+        padding: 5px;
+        height: 60px;
+        border: 1px dashed green;
+    }
+
+    .absolute {
+        position: absolute;
+        background: red;
+        grid-column: 1 / 2;
+        top: 30px;
+        width: 20px;
+        height: 20px;
+    }
+
+    .static-pos-with-grid-column {
+        position: absolute;
+        background: yellow;
+        grid-column: 2 / 3;
+        width: 10px;
+        height: 10px;
+    }
+
+    .static-pos {
+        position: absolute;
+        background: orange;
+        width: 10px;
+        height: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="item">
+      <div class="wrapper">
+        <div class="absolute"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="wrapper">
+        <div class="static-pos-with-grid-column"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="static-pos"></div>
+    </div>
+    <div class="item"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-003-ref.html b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-003-ref.html
new file mode 100644
index 00000000000000..a9218014ca0fa6
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-003-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+        width: 500px;
+        height: 400px;
+        position: relative;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-columns: 50px 100px 150px;
+        grid-template-rows: auto;
+        border: 5px solid blue;
+        margin: 20px 30px;
+        padding: 5px 15px;
+        gap: 10px;
+    }
+
+    .grid-item {
+        background: lightgray;
+        padding: 10px;
+        height: 200px;
+    }
+
+    .nested-container {
+        background: lightgreen;
+        padding: 5px;
+        border: 1px solid green;
+    }
+
+    .absolute {
+        position: absolute;
+        background: red;
+        width: 60px;
+        height: 40px;
+        top: 50px;
+        left: 100px;
+        border: 1px solid darkred;
+    }
+
+    .static-pos {
+        position: absolute;
+        background: orange;
+        width: 10px;
+        height: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="grid-item">
+      <div class="nested-container">
+        <div class="absolute"></div>
+      </div>
+    </div>
+    <div class="grid-item"></div>
+    <div class="grid-item"></div>
+    <div class="static-pos"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-003.html b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-003.html
new file mode 100644
index 00000000000000..7dcd5f8eca0c9b
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-out-of-flow-003.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout out-of-flow positioning</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="column-masonry-out-of-flow-003-ref.html">
+  <style>
+    .container {
+        width: 500px;
+        height: 400px;
+        position: relative;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .masonry {
+        display: masonry;
+        grid-template-columns: 50px 100px 150px;
+        border: 5px solid blue;
+        margin: 20px 30px;
+        padding: 5px 15px;
+        gap: 10px;
+    }
+
+    .masonry-item {
+        background: lightgray;
+        padding: 10px;
+        height: 200px;
+    }
+
+    .nested-container {
+        background: lightgreen;
+        padding: 5px;
+        border: 1px solid green;
+    }
+
+    .absolute {
+        position: absolute;
+        background: red;
+        width: 60px;
+        height: 40px;
+        top: 50px;
+        left: 100px;
+        border: 1px solid darkred;
+    }
+
+    .static-pos {
+        position: absolute;
+        background: orange;
+        width: 10px;
+        height: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="masonry-item">
+      <div class="nested-container">
+        <div class="absolute"></div>
+      </div>
+    </div>
+    <div class="masonry-item"></div>
+    <div class="masonry-item"></div>
+    <div class="static-pos"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-positioned-item-dynamic-change-ref.html b/css/css-grid/masonry/tentative/abspos/column-masonry-positioned-item-dynamic-change-ref.html
new file mode 100644
index 00000000000000..ab7661d01af86d
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-positioned-item-dynamic-change-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .reference {
+        display: grid;
+        background: green;
+        width: 100px;
+        height: 50px;
+    }
+  </style>
+</head>
+<body>
+<div class="reference">
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/column-masonry-positioned-item-dynamic-change.html b/css/css-grid/masonry/tentative/abspos/column-masonry-positioned-item-dynamic-change.html
new file mode 100644
index 00000000000000..d31621e9c82002
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/column-masonry-positioned-item-dynamic-change.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Layout Test: Masonry positioned item dynamic change.</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="column-masonry-positioned-item-dynamic-change-ref.html">
+  <style>
+    .masonry {
+        display: masonry;
+        grid-template-columns: 75px 25px;
+        position: relative;
+    }
+
+    .absolute {
+        background: green;
+        position: absolute;
+        grid-column: 2 / 3;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+    }
+  </style>
+</head>
+<body>
+<div class="masonry">
+  <div id="target" style="background: green; width: 100%; height: 25px;"></div>
+  <div style="background: red; width: 100%; height: 25px;"></div>
+  <div class="absolute"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  document.getElementById('target').style.height = '50px';
+  document.documentElement.classList.remove('reftest-wait');
+</script>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-alignment-ref.html b/css/css-grid/masonry/tentative/abspos/row-masonry-alignment-ref.html
new file mode 100644
index 00000000000000..b89eb293056fe2
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-alignment-ref.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    html,body {
+        color:black;
+        background-color:white;
+        font:15px/1 monospace;
+    }
+
+    .container {
+        width: 800px;
+        height: 850px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-rows: repeat(5, 150px);
+        grid-auto-columns: auto;
+        position: relative;
+        padding: 20px;
+        gap: 15px;
+        border: 1px dashed #999;
+        width: 700px;
+    }
+
+    .item {
+        background: lightblue;
+        padding: 10px;
+        border: 1px solid blue;
+        width: 80px;
+    }
+
+    .abspos {
+        position: absolute;
+        width: 40px;
+        height: 60px;
+        border: 2px solid black;
+        font-size: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .align-self {
+        grid-row: 2 / 3;
+        grid-column: 1 / 2;
+    }
+
+    .align-start {
+        align-self: start;
+        background: lightcoral;
+    }
+
+    .align-end {
+        align-self: end;
+        background: lightgreen;
+    }
+
+    .align-center {
+        align-self: center;
+        background: lightblue;
+    }
+
+    .justify-self {
+        grid-row: 4 / 5;
+        grid-column: 1 / 2;
+    }
+
+    .justify-start {
+        justify-self: start;
+        background: gold;
+    }
+
+    .justify-end {
+        justify-self: end;
+        background: silver;
+    }
+
+    .justify-center {
+        justify-self: center;
+        background: tan;
+    }
+
+    .combo-center-center {
+        grid-row: 3 / 4;
+        grid-column: 1 / 2;
+        align-self: center;
+        justify-self: center;
+        background: hotpink;
+    }
+
+    .safe-align {
+        position: absolute;
+        background: orange;
+        border: 1px solid darkorange;
+        grid-row: 1 / 2;
+        grid-column: 1 / 2;
+        height: 170px;
+        width: 30px;
+        align-self: safe end;
+        justify-self: center;
+        font-size: 10px;
+    }
+
+    .unsafe-align {
+        position: absolute;
+        background: purple;
+        border: 1px solid darkmagenta;
+        grid-row: 5 / 6;
+        grid-column: 1 / 2;
+        height: 170px;
+        width: 30px;
+        align-self: unsafe end;
+        justify-self: center;
+        font-size: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="item">Item 1</div>
+    <div class="item">Item 2</div>
+    <div class="item">Item 3</div>
+    <div class="abspos align-self align-start">align-self: start</div>
+    <div class="abspos align-self align-end">align-self: end</div>
+    <div class="abspos align-self align-center">align-self: center</div>
+    <div class="item">Item 4</div>
+    <div class="item">Item 5</div>
+    <div class="abspos justify-self justify-start">justify-self: start</div>
+    <div class="abspos justify-self justify-end">justify-self: end</div>
+    <div class="abspos justify-self justify-center">justify-self: center</div>
+    <div class="abspos combo-center-center">center + center</div>
+    <div class="safe-align">align-self: safe end</div>
+    <div class="unsafe-align">align-self: unsafe end</div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-alignment.html b/css/css-grid/masonry/tentative/abspos/row-masonry-alignment.html
new file mode 100644
index 00000000000000..5fb9b4b133e649
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-alignment.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout alignment properties for absolutely positioned elements</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="row-masonry-alignment-ref.html">
+  <style>
+    html,body {
+        color:black;
+        background-color:white;
+        font:15px/1 monospace;
+    }
+
+    .container {
+        width: 800px;
+        height: 850px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .masonry {
+        display: masonry;
+        masonry-direction: row;
+        grid-template-rows: repeat(5, 150px);
+        position: relative;
+        padding: 20px;
+        gap: 15px;
+        border: 1px dashed #999;
+        width: 700px;
+    }
+
+    .item {
+        background: lightblue;
+        padding: 10px;
+        border: 1px solid blue;
+        width: 80px;
+    }
+
+    .abspos {
+        position: absolute;
+        width: 40px;
+        height: 60px;
+        border: 2px solid black;
+        font-size: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .align-self {
+        grid-row: 2 / 3;
+    }
+
+    .align-start {
+        align-self: start;
+        background: lightcoral;
+    }
+
+    .align-end {
+        align-self: end;
+        background: lightgreen;
+    }
+
+    .align-center {
+        align-self: center;
+        background: lightblue;
+    }
+
+    .justify-self {
+        grid-row: 4 / 5;
+    }
+
+    .justify-start {
+        justify-self: start;
+        background: gold;
+    }
+
+    .justify-end {
+        justify-self: end;
+        background: silver;
+    }
+
+    .justify-center {
+        justify-self: center;
+        background: tan;
+    }
+
+    .combo-center-center {
+        grid-row: 3 / 4;
+        align-self: center;
+        justify-self: center;
+        background: hotpink;
+    }
+
+    .safe-align {
+        position: absolute;
+        background: orange;
+        border: 1px solid darkorange;
+        grid-row: 1 / 2;
+        height: 170px;
+        width: 30px;
+        align-self: safe end;
+        justify-self: center;
+        font-size: 10px;
+    }
+
+    .unsafe-align {
+        position: absolute;
+        background: purple;
+        border: 1px solid darkmagenta;
+        grid-row: 5 / 6;
+        height: 170px;
+        width: 30px;
+        align-self: unsafe end;
+        justify-self: center;
+        font-size: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="item">Item 1</div>
+    <div class="item">Item 2</div>
+    <div class="item">Item 3</div>
+    <div class="abspos align-self align-start">align-self: start</div>
+    <div class="abspos align-self align-end">align-self: end</div>
+    <div class="abspos align-self align-center">align-self: center</div>
+    <div class="item">Item 4</div>
+    <div class="item">Item 5</div>
+    <div class="abspos justify-self justify-start">justify-self: start</div>
+    <div class="abspos justify-self justify-end">justify-self: end</div>
+    <div class="abspos justify-self justify-center">justify-self: center</div>
+    <div class="abspos combo-center-center">center + center</div>
+    <div class="safe-align">align-self: safe end</div>
+    <div class="unsafe-align">align-self: unsafe end</div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-intrinsic-sizing-oof-ref.html b/css/css-grid/masonry/tentative/abspos/row-masonry-intrinsic-sizing-oof-ref.html
new file mode 100644
index 00000000000000..b418cbfb5ea0c3
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-intrinsic-sizing-oof-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+        border: 2px solid black;
+        margin: 10px;
+        height: 300px;
+        position: relative;
+    }
+
+    .grid {
+        display: grid;
+        border: 2px solid blue;
+        padding: 5px;
+        grid-template-columns: auto;
+        grid-template-rows: repeat(3, auto);
+    }
+
+    .oof-item {
+        position: absolute;
+        background: red;
+        color: white;
+        padding: 5px;
+        border: 1px solid darkred;
+    }
+
+    .oof-1 {
+        top: 50px;
+        left: 50px;
+        width: 60px;
+        height: 40px;
+    }
+
+    .oof-2 {
+        top: 150px;
+        left: 100px;
+        width: 70px;
+        height: 50px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="oof-item oof-1"></div>
+    <div class="oof-item oof-2"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-intrinsic-sizing-oof.html b/css/css-grid/masonry/tentative/abspos/row-masonry-intrinsic-sizing-oof.html
new file mode 100644
index 00000000000000..c9d0582d60b0a3
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-intrinsic-sizing-oof.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout intrinsic size with only OOF children</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="row-masonry-intrinsic-sizing-oof-ref.html">
+  <style>
+    .container {
+        border: 2px solid black;
+        margin: 10px;
+        height: 300px;
+        position: relative;
+    }
+
+    .masonry {
+        display: masonry;
+        masonry-direction: row;
+        grid-template-rows: repeat(3, auto);
+        border: 2px solid blue;
+        padding: 5px;
+    }
+
+    .oof-item {
+        position: absolute;
+        background: red;
+        color: white;
+        padding: 5px;
+        border: 1px solid darkred;
+    }
+
+    .oof-1 {
+        top: 50px;
+        left: 50px;
+        width: 60px;
+        height: 40px;
+    }
+
+    .oof-2 {
+        top: 150px;
+        left: 100px;
+        width: 70px;
+        height: 50px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="oof-item oof-1"></div>
+    <div class="oof-item oof-2"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001-ref.html b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001-ref.html
new file mode 100644
index 00000000000000..49fe1967bae397
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+        width: 900px;
+        height: 600px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-rows: repeat(4, 8rem);
+        grid-template-columns: 800px;
+        align-content: center;
+        position: relative;
+        height: 32rem;
+        width: 800px;
+        padding: 20px;
+        gap: 10px;
+    }
+
+    .abspos-first {
+        grid-row: span 2;
+        grid-column: 1 / 2;
+        position: absolute;
+        top: 80px;
+        bottom: 30px;
+        left: 70px;
+        right: 440px;
+        background: blue;
+    }
+
+    .abspos-second {
+        grid-row: 4 / 5;
+        grid-column: 1 / 2;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 100px;
+        height: 60px;
+        background: red;
+    }
+
+    .abspos-third {
+        grid-row: 4 / 5;
+        grid-column: 1 / 2;
+        position: absolute;
+        width: 50px;
+        height: 60px;
+        background: yellow;
+        align-self: end;
+    }
+
+    .fixedpos {
+        position: fixed;
+        left: 50%;
+        bottom: 0;
+        width: 80px;
+        height: 40px;
+        background: green;
+    }
+
+    .static-span-two {
+        position: absolute;
+        width: 120px;
+        height: 30px;
+        background: lightcoral;
+        border: 2px solid red;
+        grid-row: span 2;
+        grid-column: 1 / 2;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="abspos-first"></div>
+    <div class="abspos-second"></div>
+    <div class="abspos-third"></div>
+    <div class="fixedpos"></div>
+    <div class="static-span-two"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001.html b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001.html
new file mode 100644
index 00000000000000..4d5ecb6515474f
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-001.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout out-of-flow positioning</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="row-masonry-out-of-flow-001-ref.html">
+  <style>
+    .container {
+        width: 900px;
+        height: 600px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .masonry {
+        display: masonry;
+        masonry-direction: row;
+        grid-template-rows: repeat(4, 8rem);
+        align-content: center;
+        position: relative;
+        height: 32rem;
+        width: 800px;
+        padding: 20px;
+        gap: 10px;
+    }
+
+    .abspos-first {
+        grid-row: span 2;
+        position: absolute;
+        top: 80px;
+        bottom: 30px;
+        left: 70px;
+        right: 440px;
+        background: blue;
+    }
+
+    .abspos-second {
+        grid-row: 4 / 5;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 100px;
+        height: 60px;
+        background: red;
+    }
+
+    .abspos-third {
+        grid-row: 4 / 5;
+        position: absolute;
+        width: 50px;
+        height: 60px;
+        background: yellow;
+        align-self: end;
+    }
+
+    .fixedpos {
+        position: fixed;
+        left: 50%;
+        bottom: 0;
+        width: 80px;
+        height: 40px;
+        background: green;
+    }
+
+    .static-span-two {
+        position: absolute;
+        width: 120px;
+        height: 30px;
+        background: lightcoral;
+        border: 2px solid red;
+        grid-row: span 2;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="abspos-first"></div>
+    <div class="abspos-second"></div>
+    <div class="abspos-third"></div>
+    <div class="fixedpos"></div>
+    <div class="static-span-two"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002-ref.html b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002-ref.html
new file mode 100644
index 00000000000000..3efc256ec34260
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002-ref.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+        width: 150px;
+        height: 300px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-rows: repeat(4, 60px);
+        grid-template-columns: auto;
+        border: 1px solid blue;
+        padding: 10px;
+        gap: 5px;
+        position: relative;
+    }
+
+    .item {
+        background: lightblue;
+        padding: 5px;
+        width: 40px;
+    }
+
+    .wrapper {
+        background: lightgreen;
+        padding: 5px;
+        width: 30px;
+        height: 30px;
+        border: 1px dashed green;
+    }
+
+    .absolute {
+        position: absolute;
+        grid-row: 1 / 2;
+        grid-column: 1 / 2;
+        background: red;
+        left: 20px;
+        width: 20px;
+        height: 20px;
+    }
+
+    .static-pos-with-grid-row {
+        position: absolute;
+        background: yellow;
+        grid-row: 2 / 3;
+        grid-column: 1 / 2;
+        width: 10px;
+        height: 10px;
+    }
+
+    .static-pos {
+        position: absolute;
+        background: orange;
+        width: 10px;
+        height: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="item">
+      <div class="wrapper">
+        <div class="absolute"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="wrapper">
+        <div class="static-pos-with-grid-row"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="static-pos"></div>
+    </div>
+    <div class="item"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002.html b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002.html
new file mode 100644
index 00000000000000..c93b9c2f60d8cd
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-002.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout out-of-flow positioning</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="row-masonry-out-of-flow-002-ref.html">
+  <style>
+    .container {
+        width: 150px;
+        height: 300px;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .masonry {
+        display: masonry;
+        masonry-direction: row;
+        grid-template-rows: repeat(4, 60px);
+        border: 1px solid blue;
+        padding: 10px;
+        gap: 5px;
+        position: relative;
+    }
+
+    .item {
+        background: lightblue;
+        padding: 5px;
+        width: 40px;
+    }
+
+    .wrapper {
+        background: lightgreen;
+        padding: 5px;
+        width: 30px;
+        height: 30px;
+        border: 1px dashed green;
+    }
+
+    .absolute {
+        position: absolute;
+        background: red;
+        grid-row: 1 / 2;
+        left: 20px;
+        width: 20px;
+        height: 20px;
+    }
+
+    .static-pos-with-grid-row {
+        position: absolute;
+        background: yellow;
+        grid-row: 2 / 3;
+        width: 10px;
+        height: 10px;
+    }
+
+    .static-pos {
+        position: absolute;
+        background: orange;
+        width: 10px;
+        height: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="item">
+      <div class="wrapper">
+        <div class="absolute"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="wrapper">
+        <div class="static-pos-with-grid-row"></div>
+      </div>
+    </div>
+    <div class="item">
+      <div class="static-pos"></div>
+    </div>
+    <div class="item"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-003-ref.html b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-003-ref.html
new file mode 100644
index 00000000000000..23391b5f4aac51
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-003-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    .container {
+        width: 400px;
+        height: 500px;
+        position: relative;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .grid {
+        display: grid;
+        grid-template-rows: 50px 100px 150px;
+        grid-template-columns: auto;
+        border: 5px solid blue;
+        margin: 30px 20px;
+        padding: 15px 5px;
+        gap: 10px;
+    }
+
+    .grid-item {
+        background: lightgray;
+        padding: 10px;
+        width: 200px;
+    }
+
+    .nested-container {
+        background: lightgreen;
+        padding: 5px;
+        border: 1px solid green;
+    }
+
+    .absolute {
+        position: absolute;
+        background: red;
+        width: 60px;
+        height: 40px;
+        top: 50px;
+        left: 100px;
+        border: 1px solid darkred;
+    }
+
+    .static-pos {
+        position: absolute;
+        background: orange;
+        width: 10px;
+        height: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="grid">
+    <div class="grid-item">
+      <div class="nested-container">
+        <div class="absolute"></div>
+      </div>
+    </div>
+    <div class="grid-item"></div>
+    <div class="grid-item"></div>
+    <div class="static-pos"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-003.html b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-003.html
new file mode 100644
index 00000000000000..1706939bae958a
--- /dev/null
+++ b/css/css-grid/masonry/tentative/abspos/row-masonry-out-of-flow-003.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: Masonry layout out-of-flow positioning</title>
+  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos">
+  <link rel="match" href="row-masonry-out-of-flow-003-ref.html">
+  <style>
+    .container {
+        width: 400px;
+        height: 500px;
+        position: relative;
+        border: 2px solid black;
+        margin: 20px;
+    }
+
+    .masonry {
+        display: masonry;
+        masonry-direction: row;
+        grid-template-rows: 50px 100px 150px;
+        border: 5px solid blue;
+        margin: 30px 20px;
+        padding: 15px 5px;
+        gap: 10px;
+    }
+
+    .masonry-item {
+        background: lightgray;
+        padding: 10px;
+        width: 200px;
+    }
+
+    .nested-container {
+        background: lightgreen;
+        padding: 5px;
+        border: 1px solid green;
+    }
+
+    .absolute {
+        position: absolute;
+        background: red;
+        width: 60px;
+        height: 40px;
+        top: 50px;
+        left: 100px;
+        border: 1px solid darkred;
+    }
+
+    .static-pos {
+        position: absolute;
+        background: orange;
+        width: 10px;
+        height: 10px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <div class="masonry">
+    <div class="masonry-item">
+      <div class="nested-container">
+        <div class="absolute"></div>
+      </div>
+    </div>
+    <div class="masonry-item"></div>
+    <div class="masonry-item"></div>
+    <div class="static-pos"></div>
+  </div>
+</div>
+</body>
+</html>