diff --git a/css/css-overflow/targeted-column-scroll-marker-selection-001-ref.html b/css/css-overflow/targeted-column-scroll-marker-selection-001-ref.html
new file mode 100644
index 00000000000000..e4dbe28a85a987
--- /dev/null
+++ b/css/css-overflow/targeted-column-scroll-marker-selection-001-ref.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title>
+  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
+</head>
+
+<body>
+  <style>
+    .wrapper {
+      display: grid;
+      justify-content: center;
+    }
+
+    .carousel {
+      width: 800px;
+      height: 200px;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      list-style-type: none;
+      scroll-behavior: smooth;
+      border: solid 2px grey;
+      padding-top: 10%;
+      text-align: center;
+      counter-set: markeridx -1;
+      columns: 2;
+
+      & > :nth-child(odd)::scroll-marker {
+        content: counter(markeridx);
+        counter-increment: markeridx;
+        align-content: center;
+        text-align: center;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        margin: 3px;
+        background-color: red;
+      }
+      /* item 2 is child 3 */
+      & > :nth-child(3)::scroll-marker {
+        background-color: green;
+      }
+
+      &>.item {
+        scroll-snap-align: center;
+        height: 80%;
+        width: 158px;
+        border: 1px solid;
+        place-content: center;
+        display: inline-block;
+      }
+
+      scroll-marker-group: after;
+
+      &::scroll-marker-group {
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: solid 1px black;
+        border-radius: 30px;
+      }
+    }
+  </style>
+  <div class="wrapper" id="wrapper">
+    <div class="carousel" id="carousel">
+      <div class="item item0" tabindex=0>0</div>
+      <div class="item item1" tabindex=0>1</div>
+      <div class="item item2" tabindex=0>2</div>
+      <div class="item item3" tabindex=0>3</div>
+      <div class="item item4" tabindex=0>4</div>
+      <div class="item item5" tabindex=0>5</div>
+      <div class="item item6" tabindex=0>6</div>
+      <div class="item item7" tabindex=0>7</div>
+      <div class="item item8" tabindex=0>8</div>
+      <div class="item item9" tabindex=0>9</div>
+      <div class="item item10" tabindex=0>10</div>
+      <div class="item item11" tabindex=0>11</div>
+      <div class="item item12" tabindex=0>12</div>
+      <div class="item item13" tabindex=0>13</div>
+      <div class="item item14" tabindex=0>14</div>
+      <div class="item item15" tabindex=0>15</div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/css/css-overflow/targeted-column-scroll-marker-selection-001.html b/css/css-overflow/targeted-column-scroll-marker-selection-001.html
new file mode 100644
index 00000000000000..a9b79ae1d097dc
--- /dev/null
+++ b/css/css-overflow/targeted-column-scroll-marker-selection-001.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title>
+  <link rel="match" href="targeted-column-scroll-marker-selection-001-ref.html">
+  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
+  <script src="/css/css-transitions/support/helper.js"></script>
+  <script src="/dom/events/scrolling/scroll_support.js"></script>
+  <script src="/common/reftest-wait.js"></script>
+</head>
+
+<body>
+  <style>
+    .wrapper {
+      display: grid;
+      justify-content: center;
+    }
+
+    .carousel {
+      width: 800px;
+      height: 200px;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      list-style-type: none;
+      scroll-behavior: smooth;
+      border: solid 2px grey;
+      padding-top: 10%;
+      text-align: center;
+      counter-set: markeridx -1;
+      columns: 2;
+
+      &::column::scroll-marker {
+        content: counter(markeridx);
+        counter-increment: markeridx;
+        align-content: center;
+        text-align: center;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        margin: 3px;
+        background-color: red;
+      }
+      &::column::scroll-marker:target-current {
+        background-color: green;
+      }
+      &>.item {
+        scroll-snap-align: center;
+        height: 80%;
+        width: 158px;
+        border: 1px solid;
+        place-content: center;
+        display: inline-block;
+      }
+
+      scroll-marker-group: after;
+
+      &::scroll-marker-group {
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: solid 1px black;
+        border-radius: 30px;
+      }
+    }
+  </style>
+  <div class="wrapper" id="wrapper">
+    <div class="carousel" id="carousel">
+      <div class="item item0" tabindex=0>0</div>
+      <div class="item item1" tabindex=0>1</div>
+      <div class="item item2" tabindex=0>2</div>
+      <div class="item item3" tabindex=0>3</div>
+      <div class="item item4" tabindex=0>4</div>
+      <div class="item item5" tabindex=0>5</div>
+      <div class="item item6" tabindex=0>6</div>
+      <div class="item item7" tabindex=0>7</div>
+      <div class="item item8" tabindex=0>8</div>
+      <div class="item item9" tabindex=0>9</div>
+      <div class="item item10" tabindex=0>10</div>
+      <div class="item item11" tabindex=0>11</div>
+      <div class="item item12" tabindex=0>12</div>
+      <div class="item item13" tabindex=0>13</div>
+      <div class="item item14" tabindex=0>14</div>
+      <div class="item item15" tabindex=0>15</div>
+    </div>
+  </div>
+  <script>
+
+    const items = document.querySelectorAll(".item");
+    function runTest() {
+      const item2 = items[2];
+      item2.scrollIntoView();
+      waitForAnimationFrames(2).then(() => {
+        takeScreenshot();
+      });
+    }
+    waitForCompositorReady().then(runTest);
+  </script>
+</body>
+
+</html>
diff --git a/css/css-overflow/targeted-column-scroll-marker-selection-002-ref.html b/css/css-overflow/targeted-column-scroll-marker-selection-002-ref.html
new file mode 100644
index 00000000000000..63790cb7edc623
--- /dev/null
+++ b/css/css-overflow/targeted-column-scroll-marker-selection-002-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title>
+  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
+</head>
+
+<body>
+  <style>
+    .wrapper {
+      display: grid;
+      justify-content: center;
+    }
+
+    .carousel {
+      width: 800px;
+      height: 200px;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      list-style-type: none;
+      scroll-behavior: smooth;
+      border: solid 2px grey;
+      padding-top: 10%;
+      text-align: center;
+      counter-set: markeridx -1;
+      columns: 2;
+
+      & > :nth-child(odd)::scroll-marker {
+        content: counter(markeridx);
+        counter-increment: markeridx;
+        align-content: center;
+        text-align: center;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        margin: 3px;
+        background-color: red;
+      }
+      /* item 4 is child 5 */
+      & > :nth-child(5)::scroll-marker {
+        background-color: green;
+      }
+
+      &>.item {
+        scroll-snap-align: none;
+        height: 80%;
+        width: 158px;
+        border: 1px solid;
+        place-content: center;
+        display: inline-block;
+      }
+
+      /* Item 3 is child 4. Starting from scrollLeft=0, calling
+      box4.scrollIntoView ends up in a position that aligns box 3. */
+      & > :nth-child(4){
+        scroll-snap-align: center;
+      }
+
+      scroll-marker-group: after;
+
+      &::scroll-marker-group {
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: solid 1px black;
+        border-radius: 30px;
+      }
+    }
+  </style>
+  <div class="wrapper" id="wrapper">
+    <div class="carousel" id="carousel">
+      <div class="item item0" tabindex=0>0</div>
+      <div class="item item1" tabindex=0>1</div>
+      <div class="item item2" tabindex=0>2</div>
+      <div class="item item3" tabindex=0>3</div>
+      <div class="item item4" tabindex=0>4</div>
+      <div class="item item5" tabindex=0>5</div>
+      <div class="item item6" tabindex=0>6</div>
+      <div class="item item7" tabindex=0>7</div>
+      <div class="item item8" tabindex=0>8</div>
+      <div class="item item9" tabindex=0>9</div>
+      <div class="item item10" tabindex=0>10</div>
+      <div class="item item11" tabindex=0>11</div>
+      <div class="item item12" tabindex=0>12</div>
+      <div class="item item13" tabindex=0>13</div>
+      <div class="item item14" tabindex=0>14</div>
+      <div class="item item15" tabindex=0>15</div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/css/css-overflow/targeted-column-scroll-marker-selection-002.html b/css/css-overflow/targeted-column-scroll-marker-selection-002.html
new file mode 100644
index 00000000000000..08c3a302a5491c
--- /dev/null
+++ b/css/css-overflow/targeted-column-scroll-marker-selection-002.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title>
+  <link rel="match" href="targeted-column-scroll-marker-selection-002-ref.html">
+  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
+  <script src="/css/css-transitions/support/helper.js"></script>
+  <script src="/dom/events/scrolling/scroll_support.js"></script>
+  <script src="/common/reftest-wait.js"></script>
+</head>
+
+<body>
+  <style>
+    .wrapper {
+      display: grid;
+      justify-content: center;
+    }
+
+    .carousel {
+      width: 800px;
+      height: 200px;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      list-style-type: none;
+      scroll-behavior: smooth;
+      border: solid 2px grey;
+      padding-top: 10%;
+      text-align: center;
+      counter-set: markeridx -1;
+      columns: 2;
+
+      &::column::scroll-marker {
+        content: counter(markeridx);
+        counter-increment: markeridx;
+        align-content: center;
+        text-align: center;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        margin: 3px;
+        background-color: red;
+      }
+      &::column::scroll-marker:target-current {
+        background-color: green;
+      }
+
+      &>.item {
+        scroll-snap-align: center;
+        height: 80%;
+        width: 158px;
+        border: 1px solid;
+        place-content: center;
+        display: inline-block;
+      }
+
+      scroll-marker-group: after;
+
+      &::scroll-marker-group {
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: solid 1px black;
+        border-radius: 30px;
+      }
+    }
+  </style>
+  <div class="wrapper" id="wrapper">
+    <div class="carousel" id="carousel">
+      <div class="item item0" tabindex=0>0</div>
+      <div class="item item1" tabindex=0>1</div>
+      <div class="item item2" tabindex=0>2</div>
+      <div class="item item3" tabindex=0>3</div>
+      <div class="item item4" tabindex=0>4</div>
+      <div class="item item5" tabindex=0>5</div>
+      <div class="item item6" tabindex=0>6</div>
+      <div class="item item7" tabindex=0>7</div>
+      <div class="item item8" tabindex=0>8</div>
+      <div class="item item9" tabindex=0>9</div>
+      <div class="item item10" tabindex=0>10</div>
+      <div class="item item11" tabindex=0>11</div>
+      <div class="item item12" tabindex=0>12</div>
+      <div class="item item13" tabindex=0>13</div>
+      <div class="item item14" tabindex=0>14</div>
+      <div class="item item15" tabindex=0>15</div>
+    </div>
+  </div>
+  <script>
+
+    const carousel = document.getElementById("carousel");
+    const items = document.querySelectorAll(".item");
+    function runTest() {
+      const item4 = items[4];
+      item4.scrollIntoView();
+      carousel.onscrollend = () => { takeScreenshot(); };
+    }
+    waitForCompositorReady().then(runTest);
+  </script>
+</body>
+
+</html>
diff --git a/css/css-overflow/targeted-column-scroll-marker-selection-003-ref.html b/css/css-overflow/targeted-column-scroll-marker-selection-003-ref.html
new file mode 100644
index 00000000000000..79bc87ff729472
--- /dev/null
+++ b/css/css-overflow/targeted-column-scroll-marker-selection-003-ref.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title>
+  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
+</head>
+
+<body>
+  <style>
+    .wrapper {
+      display: grid;
+      justify-content: center;
+    }
+
+    .carousel {
+      width: 800px;
+      height: 200px;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      list-style-type: none;
+      scroll-behavior: smooth;
+      border: solid 2px grey;
+      padding-top: 10%;
+      text-align: center;
+      counter-set: markeridx -1;
+      columns: 2;
+
+      /* All odd-numbered children generate scroll-markers. For the test, we
+         need 2 more cxhildren to generate scroll-markers. This uses children 2
+         and 4.*/
+      & > :nth-child(odd)::scroll-marker,
+      & > :nth-child(2)::scroll-marker,
+      & > :nth-child(4)::scroll-marker {
+        counter-increment: markeridx;
+        align-content: center;
+        text-align: center;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        margin: 3px;
+        background-color: red;
+      }
+
+      /* This lines up the scroll-markers' numbers to match the way Chromium
+         lays out the scroll-markers which seems to be all
+         element::scroll-markers first/leftmost and then,
+         ::column-scroll-markers, despite the ::column::scroll-markers being
+         numbered first.  The numbers are not important for the test's
+         functionality. They only help investigating the browser's behavior.*/
+      & > :nth-child(1)::scroll-marker { content: "8"; }
+      & > :nth-child(3)::scroll-marker { content: "0"; }
+      & > :nth-child(2)::scroll-marker { content: "9"; }
+      & > :nth-child(4)::scroll-marker { content: "1"; }
+      & > :nth-child(5)::scroll-marker { content: "2"; }
+      & > :nth-child(7)::scroll-marker { content: "3"; }
+      & > :nth-child(9)::scroll-marker { content: "4"; }
+      & > :nth-child(11)::scroll-marker { content: "5"; }
+      & > :nth-child(13)::scroll-marker { content: "6"; }
+      /* In the test, item 14 (child 15) is the scrollIntoView target.
+         Its column (the right-most column) should be selected and corresponds to
+         the column. */
+      & > :nth-child(15)::scroll-marker {
+        content: "7";
+        background-color: green;
+      }
+
+      &>.item {
+        scroll-snap-align: none;
+        height: 80%;
+        width: 158px;
+        border: 1px solid;
+        place-content: center;
+        display: inline-block;
+      }
+
+      /* Make only item 16 (index 15) a snap target so we are scrolled all the
+      way to the right edge */
+      & > :nth-child(14){
+        scroll-snap-align: center;
+      }
+
+      scroll-marker-group: after;
+
+      &::scroll-marker-group {
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: solid 1px black;
+        border-radius: 30px;
+      }
+    }
+  </style>
+  <div class="wrapper" id="wrapper">
+    <div class="carousel" id="carousel">
+      <div class="item item0" tabindex=0>0</div>
+      <div class="item item1" tabindex=0>1</div>
+      <div class="item item2" tabindex=0>2</div>
+      <div class="item item3" tabindex=0>3</div>
+      <div class="item item4" tabindex=0>4</div>
+      <div class="item item5" tabindex=0>5</div>
+      <div class="item item6" tabindex=0>6</div>
+      <div class="item item7" tabindex=0>7</div>
+      <div class="item item8" tabindex=0>8</div>
+      <div class="item item9" tabindex=0>9</div>
+      <div class="item item10" tabindex=0>10</div>
+      <div class="item item11" tabindex=0>11</div>
+      <div class="item item12" tabindex=0>12</div>
+      <div class="item item13" tabindex=0>13</div>
+      <div class="item item14" tabindex=0>14</div>
+      <div class="item item15" tabindex=0>15</div>
+    </div>
+    <div id="buttons" style></div>
+  </div>
+</body>
+
+</html>
diff --git a/css/css-overflow/targeted-column-scroll-marker-selection-003.html b/css/css-overflow/targeted-column-scroll-marker-selection-003.html
new file mode 100644
index 00000000000000..4f8f68646ded53
--- /dev/null
+++ b/css/css-overflow/targeted-column-scroll-marker-selection-003.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title>
+  <link rel="match" href="targeted-column-scroll-marker-selection-003-ref.html">
+  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
+  <script src="/css/css-transitions/support/helper.js"></script>
+  <script src="/dom/events/scrolling/scroll_support.js"></script>
+  <script src="/common/reftest-wait.js"></script>
+</head>
+
+<body>
+  <style>
+    .wrapper {
+      display: grid;
+      justify-content: center;
+    }
+
+    .carousel {
+      width: 800px;
+      height: 200px;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      list-style-type: none;
+      scroll-behavior: smooth;
+      border: solid 2px grey;
+      padding-top: 10%;
+      text-align: center;
+      counter-set: markeridx -1;
+      columns: 2;
+
+      /* Children 13 (index 12) and 16 (index 15) also generate scroll-markers,
+        along with all the ::columns.
+      */
+      &::column::scroll-marker,
+      & >:nth-child(13)::scroll-marker,
+      & >:nth-child(16)::scroll-marker {
+        content: counter(markeridx);
+        counter-increment: markeridx;
+        align-content: center;
+        text-align: center;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        margin: 3px;
+        background-color: red;
+      }
+      &::column::scroll-marker:target-current {
+        background-color: green;
+      }
+      &>:nth-child(13)::scroll-marker:target-current,
+      &>:nth-child(16)::scroll-marker:target-current {
+        background-color: lightgreen;
+      }
+
+      &>.item {
+        scroll-snap-align: center;
+        height: 80%;
+        width: 158px;
+        border: 1px solid;
+        place-content: center;
+        display: inline-block;
+      }
+
+      scroll-marker-group: after;
+
+      &::scroll-marker-group {
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: solid 1px black;
+        border-radius: 30px;
+      }
+    }
+  </style>
+  <div class="wrapper" id="wrapper">
+    <div class="carousel" id="carousel">
+      <div class="item item0" tabindex=0>0</div>
+      <div class="item item1" tabindex=0>1</div>
+      <div class="item item2" tabindex=0>2</div>
+      <div class="item item3" tabindex=0>3</div>
+      <div class="item item4" tabindex=0>4</div>
+      <div class="item item5" tabindex=0>5</div>
+      <div class="item item6" tabindex=0>6</div>
+      <div class="item item7" tabindex=0>7</div>
+      <div class="item item8" tabindex=0>8</div>
+      <div class="item item9" tabindex=0>9</div>
+      <div class="item item10" tabindex=0>10</div>
+      <div class="item item11" tabindex=0>11</div>
+      <div class="item item12" tabindex=0>12</div>
+      <div class="item item13" tabindex=0>13</div>
+      <div class="item item14" tabindex=0>14</div>
+      <div class="item item15" tabindex=0>15</div>
+    </div>
+  </div>
+  <script>
+    const items = document.querySelectorAll(".item");
+    function runTest() {
+      const item14 = items[14];
+      item14.scrollIntoView();
+      carousel.onscrollend = () => {
+        takeScreenshot();
+      };
+    }
+    waitForCompositorReady().then(runTest);
+  </script>
+</body>
+
+</html>
diff --git a/css/css-overflow/targeted-column-scroll-marker-selection-004-ref.html b/css/css-overflow/targeted-column-scroll-marker-selection-004-ref.html
new file mode 100644
index 00000000000000..48baf79e80dc6f
--- /dev/null
+++ b/css/css-overflow/targeted-column-scroll-marker-selection-004-ref.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title>
+  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
+</head>
+
+<body>
+  <style>
+    .wrapper {
+      display: grid;
+      justify-content: center;
+    }
+
+    .carousel {
+      width: 800px;
+      height: 200px;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      list-style-type: none;
+      scroll-behavior: smooth;
+      border: solid 2px grey;
+      padding-top: 10%;
+      text-align: center;
+      counter-set: markeridx -1;
+      columns: 2;
+
+      /* All odd-numbered children generate scroll-markers. For the test, we
+         need 2 more cxhildren to generate scroll-markers. This uses children 2
+         and 4.*/
+      & > :nth-child(odd)::scroll-marker,
+      & > :nth-child(2)::scroll-marker,
+      & > :nth-child(4)::scroll-marker {
+        counter-increment: markeridx;
+        align-content: center;
+        text-align: center;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        margin: 3px;
+        background-color: red;
+      }
+
+      /* This lines up the scroll-markers' numbers to match the way Chromium
+         lays out the scroll-markers which seems to be all
+         element::scroll-markers first/leftmost and then,
+         ::column-scroll-markers, despite the ::column::scroll-markers being
+         numbered first. The numbers are not important for the test's
+         functionality. They only help investigating the browser's behavior. */
+      & > :nth-child(1)::scroll-marker {
+        content: "8";
+        /* In the test, item 13 (child 14) is the scrollIntoView target.
+           Its sibling (item 12 (child 13)) generates a scroll-marker.The column
+           containing both items 13 and 12 generates a scroll-marker, but item
+           12's scroll-marker is to be preferred. Because of the layout quirk
+           mentioned above, item 12's scroll-marker happens to be the leftmost
+           one. */
+        background-color: lightgreen;
+      }
+      & > :nth-child(3)::scroll-marker { content: "0"; }
+      & > :nth-child(2)::scroll-marker { content: "9"; }
+      & > :nth-child(4)::scroll-marker { content: "1"; }
+      & > :nth-child(5)::scroll-marker { content: "2"; }
+      & > :nth-child(7)::scroll-marker { content: "3"; }
+      & > :nth-child(9)::scroll-marker { content: "4"; }
+      & > :nth-child(11)::scroll-marker { content: "5"; }
+      & > :nth-child(13)::scroll-marker { content: "6"; }
+      & > :nth-child(15)::scroll-marker { content: "7"; }
+
+      &>.item {
+        scroll-snap-align: none;
+        height: 80%;
+        width: 158px;
+        border: 1px solid;
+        place-content: center;
+        display: inline-block;
+      }
+
+      /* The test calls scrollIntoView on item 13 (child 14). Make only item 11
+         (index 12) a snap target as it is what is aligned when scrollintoView
+         is called on item 13. */
+      & > :nth-child(12){
+        scroll-snap-align: center;
+      }
+
+      scroll-marker-group: after;
+
+      &::scroll-marker-group {
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: solid 1px black;
+        border-radius: 30px;
+      }
+    }
+  </style>
+  <div class="wrapper" id="wrapper">
+    <div class="carousel" id="carousel">
+      <div class="item item0" tabindex=0>0</div>
+      <div class="item item1" tabindex=0>1</div>
+      <div class="item item2" tabindex=0>2</div>
+      <div class="item item3" tabindex=0>3</div>
+      <div class="item item4" tabindex=0>4</div>
+      <div class="item item5" tabindex=0>5</div>
+      <div class="item item6" tabindex=0>6</div>
+      <div class="item item7" tabindex=0>7</div>
+      <div class="item item8" tabindex=0>8</div>
+      <div class="item item9" tabindex=0>9</div>
+      <div class="item item10" tabindex=0>10</div>
+      <div class="item item11" tabindex=0>11</div>
+      <div class="item item12" tabindex=0>12</div>
+      <div class="item item13" tabindex=0>13</div>
+      <div class="item item14" tabindex=0>14</div>
+      <div class="item item15" tabindex=0>15</div>
+    </div>
+    <div id="buttons" style></div>
+  </div>
+</body>
+
+</html>
diff --git a/css/css-overflow/targeted-column-scroll-marker-selection-004.html b/css/css-overflow/targeted-column-scroll-marker-selection-004.html
new file mode 100644
index 00000000000000..60ed33c73b673f
--- /dev/null
+++ b/css/css-overflow/targeted-column-scroll-marker-selection-004.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title>
+  <link rel="match" href="targeted-column-scroll-marker-selection-004-ref.html">
+  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
+  <script src="/css/css-transitions/support/helper.js"></script>
+  <script src="/dom/events/scrolling/scroll_support.js"></script>
+  <script src="/common/reftest-wait.js"></script>
+</head>
+
+<body>
+  <style>
+    .wrapper {
+      display: grid;
+      justify-content: center;
+    }
+
+    .carousel {
+      width: 800px;
+      height: 200px;
+      overflow-x: scroll;
+      scroll-snap-type: x mandatory;
+      list-style-type: none;
+      scroll-behavior: smooth;
+      border: solid 2px grey;
+      padding-top: 10%;
+      text-align: center;
+      counter-set: markeridx -1;
+      columns: 2;
+
+      /* Children 13 (index 12) and 16 (index 15) also generate scroll-markers.
+      */
+      &::column::scroll-marker,
+      & >:nth-child(13)::scroll-marker,
+      & >:nth-child(16)::scroll-marker {
+        content: counter(markeridx);
+        counter-increment: markeridx;
+        align-content: center;
+        text-align: center;
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        margin: 3px;
+        background-color: red;
+      }
+      &::column::scroll-marker:target-current {
+        background-color: green;
+      }
+      &>:nth-child(13)::scroll-marker:target-current,
+      &>:nth-child(16)::scroll-marker:target-current {
+        background-color: lightgreen;
+      }
+
+      &>.item {
+        scroll-snap-align: center;
+        height: 80%;
+        width: 158px;
+        border: 1px solid;
+        place-content: center;
+        display: inline-block;
+      }
+
+      scroll-marker-group: after;
+
+      &::scroll-marker-group {
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: solid 1px black;
+        border-radius: 30px;
+      }
+    }
+  </style>
+  <div class="wrapper" id="wrapper">
+    <div class="carousel" id="carousel">
+      <div class="item item0" tabindex=0>0</div>
+      <div class="item item1" tabindex=0>1</div>
+      <div class="item item2" tabindex=0>2</div>
+      <div class="item item3" tabindex=0>3</div>
+      <div class="item item4" tabindex=0>4</div>
+      <div class="item item5" tabindex=0>5</div>
+      <div class="item item6" tabindex=0>6</div>
+      <div class="item item7" tabindex=0>7</div>
+      <div class="item item8" tabindex=0>8</div>
+      <div class="item item9" tabindex=0>9</div>
+      <div class="item item10" tabindex=0>10</div>
+      <div class="item item11" tabindex=0>11</div>
+      <div class="item item12" tabindex=0>12</div>
+      <div class="item item13" tabindex=0>13</div>
+      <div class="item item14" tabindex=0>14</div>
+      <div class="item item15" tabindex=0>15</div>
+    </div>
+    <div id="buttons"></div>
+  </div>
+  <script>
+
+    const items = document.querySelectorAll(".item");
+    function runTest() {
+      const item13 = items[13];
+      item13.scrollIntoView();
+      carousel.onscrollend = () => {
+        takeScreenshot();
+      };
+    }
+    waitForCompositorReady().then(runTest);
+  </script>
+</body>
+
+</html>
