Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:35:37 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:35:37 +0000
commit: a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch)
tree: 532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/css
parent: Adding debian version 126.0.1-1. (diff)
download: firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz
firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip
540 files changed, 10805 insertions, 2262 deletions
diff --git a/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-clear-011-ref.xht b/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-clear-011-ref.xht
new file mode 100644
index 0000000000..2611de9f4a
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-clear-011-ref.xht
@@ -0,0 +1,13 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"/>
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
+ </head>
+ <body style="font: 25px/1 Ahem">
+  <div style="margin-bottom: 1em">X</div>
+  <div style="color: cyan;">X</div>
+  <div style="color: magenta">X</div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-clear-011.xht b/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-clear-011.xht
new file mode 100644
index 0000000000..fed7bef25c
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-clear-011.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: Margin Collapsing with Clearance</title>
+  <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"/>
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control"/>
+  <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/>
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/>
+  <link rel="match" href="margin-collapse-clear-011-ref.xht"/>
+  <meta name="assert" content="The magenta X appears below the cyan X due to clearance"/>
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
+ </head>
+ <body style="font: 25px/1 Ahem">
+  <div style="margin-bottom: 1em">X</div>
+  <div style="float: left; color: cyan;">X</div>
+  <div style="margin-bottom: 1em; height: 0px;">
+    <div style="margin-bottom: -1em;"></div>
+  </div>
+  <div style="clear: both; color: magenta">X</div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/compositing/background-blending/crashtests/bgblend-root-change.html b/testing/web-platform/tests/css/compositing/background-blending/crashtests/bgblend-root-change.html
new file mode 100644
index 0000000000..06db053574
--- /dev/null
+++ b/testing/web-platform/tests/css/compositing/background-blending/crashtests/bgblend-root-change.html
@@ -0,0 +1,17 @@
+<style>
+* {
+  position: sticky;
+  border-left: double 488200679.54Q hsla(-39 5% 68% / 7%) !important;
+  box-shadow: 172vmax 60991vmax 32in 106cm hsl(-57532411.87deg, 70%, 54%);
+  background-blend-mode: overlay;
+  background: url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=) local content-box space space 0em / 15438983.37cm auto;
+}
+</style>
+<script>
+window.addEventListener("load", () => {
+  let a = document.createElementNS("http://www.w3.org/1998/Math/MathML", "math")
+  a.setAttribute("href", "x")
+  a.autofocus = true
+  document.documentElement.appendChild(a)
+})
+</script>
diff --git a/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-2.html b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-2.html
new file mode 100644
index 0000000000..0b12301c4d
--- /dev/null
+++ b/testing/web-platform/tests/css/compositing/mix-blend-mode/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-2.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>CSS Test: blending between an element having overflow:hidden and border-radius and its child, with will-change:opacity</title>
+        <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com">
+        <link rel="author" title="Ion Roșca" href="mailto:rosca@adobe.com">
+        <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
+        <link rel="help" href="https://drafts.fxtf.org/compositing-1/#mix-blend-mode">
+        <link rel="help" href="https://crbug.com/328339028">
+        <meta name="assert" content="Test checks that an element having mix-blend-mode and will-change:opacity blends with the parent element having overflow:hidden and border-radius">
+        <meta name="fuzzy" content="0-128;0-400">
+        <link rel="match" href="reference/mix-blend-mode-parent-element-overflow-hidden-and-border-radius-ref.html">
+        <style type="text/css">
+            .parent {
+                background: red;
+                width: 140px;
+                height: 140px;
+                position: relative;
+                z-index: 1;
+                overflow: hidden;
+                border-radius: 1em 5em;
+            }
+            .blended {
+                background: yellow;
+                width: 200px;
+                height: 200px;
+                mix-blend-mode: difference;
+                will-change: opacity;
+            }
+        </style>
+    </head>
+    <body>
+        <p> Test passes if you see a lime square with rounded corners.</p>
+        <div class="parent">
+            <div class="blended"></div>
+        </div>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-offset-change.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-offset-change.html
new file mode 100644
index 0000000000..fa383154da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-offset-change.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning Test: Dynamically change the anchor-center position</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    position: relative;
+    width: 200px;
+    height: 200px;
+  }
+  #anchor {
+    width: 100px;
+    height: 100px;
+    anchor-name: --anchor;
+  }
+  #anchored {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    position-anchor: --anchor;
+    align-self: anchor-center;
+    left: anchor(--unknown right, 0px);
+  }
+</style>
+<div id="cb">
+  <div id="anchor"></div>
+  <div id="anchored"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(anchored.offsetLeft, 0);
+    assert_equals(anchored.offsetTop, 0);
+  }, "Anchored initially have the same width as the anchor");
+
+  test(() => {
+    anchor.style.height = "200px";
+    assert_equals(anchored.offsetLeft, 0);
+    assert_equals(anchored.offsetTop, 50);
+  }, "Increase the height of the anchor to move the anchor-center offset");
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-scroll-ref.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-scroll-ref.html
new file mode 100644
index 0000000000..d2638491ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-scroll-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>CSS Test Reference</title>
+<body style="margin:0">
+  <div id="scroller" style="width:400px;height:400px;overflow:auto;background:orange">
+    <div style="height:100px"></div>
+    <div style="width:100px;height:100px;background:pink">
+      <div style="height:25px"></div>
+      <div style="width:50px;height:50px;background:purple"></div>
+    </div>
+    <div style="height:1000px"></div>
+  </div>
+</body>
+<script>
+  scroller.scrollTop = 100;
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-scroll.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-scroll.html
new file mode 100644
index 0000000000..29b5e06e2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-center-scroll.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning Test: scroll adjusted anchor-center</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center">
+<link rel="match" href="anchor-center-scroll-ref.html">
+<style>
+  body { margin: 0; }
+  #scroller {
+    width: 400px;
+    height: 400px;
+    overflow: auto;
+    background: orange;
+  }
+  #anchor {
+    margin-top: 100px;
+    width: 100px;
+    height: 100px;
+    background: pink;
+    anchor-name: --anchor;
+  }
+  #anchored {
+    position: absolute;
+    position-anchor: --anchor;
+    align-self: anchor-center;
+    width: 50px;
+    height: 50px;
+    background: purple;
+  }
+  #filler { height: 1000px; }
+</style>
+<div id="scroller">
+  <div id="anchor"></div>
+  <div id="anchored"></div>
+  <div id="filler"></div>
+</div>
+<script>
+  scroller.offsetTop;
+  scroller.scrollTop = 100;
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-fallback-invalidation.html b/testing/web-platform/tests/css/css-anchor-position/anchor-fallback-invalidation.html
new file mode 100644
index 0000000000..a066c2da55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-fallback-invalidation.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: Invalidation when the anchor*() fallback matches old style</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
+<link rel="help" href="https://issues.chromium.org/issues/333858786">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border: 1px solid black;
+  }
+
+  #anchor {
+    anchor-name: --a;
+    position: absolute;
+    width: 40px;
+    height: 30px;
+    left: 75px;
+    top: 75px;
+    background: coral;
+  }
+
+  #anchored {
+    position: absolute;
+    background: seagreen;
+    width: 50px;
+    height: 50px;
+  }
+
+  #anchored.change {
+    /* The fallbacks match what the unchanged style says, but we shouldn't
+       take the fallbacks here. */
+    width: anchor-size(--a width, 50px);
+    height: anchor-size(--a height, 50px);
+  }
+</style>
+<div id=cb>
+  <div id=anchor></div>
+  <div id=anchored>X</div>
+</div>
+<script>
+  test(() => {
+    assert_equals(anchored.offsetWidth, 50);
+    assert_equals(anchored.offsetHeight, 50);
+
+    anchored.classList.toggle('change');
+
+    assert_equals(anchored.offsetWidth, 40);
+    assert_equals(anchored.offsetHeight, 30);
+  }, 'Correct invalidation when fallbacks match the old style');
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-inherited.html b/testing/web-platform/tests/css/css-anchor-position/anchor-inherited.html
new file mode 100644
index 0000000000..0f84311d6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-inherited.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<title>Tests that anchor functions inherit as pixels</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="/css/css-anchor-position/support/test-common.js"></script>
+
+<style>
+.cb {
+  width: 400px;
+  height: 400px;
+  position: relative;
+  border: 1px solid black;
+}
+
+.anchor {
+  width: 100px;
+  height: 100px;
+  top: 10px;
+  left: 20px;
+  position: absolute;
+  background: red;
+  anchor-name: --a;
+}
+
+.anchored {
+  position-anchor: --a;
+  position: absolute;
+  /* Anchored directly on top */
+  top: anchor(top);
+  left: anchor(left);
+  width: anchor-size(width);
+  height: anchor-size(height);
+  background: coral;
+}
+
+/* The child should have the same size as the anchored element,
+   and inset by top:10px,left:20px vs. that element. */
+.child {
+  position-anchor: --unknown; /* Should have no effect. */
+  position: relative;
+  background: skyblue;
+  top: inherit;
+  left: inherit;
+  width: inherit;
+  height: inherit;
+}
+
+</style>
+
+<body onload="checkLayoutForAnchorPos('.child')">
+
+<div class=cb>
+  <div class=anchor></div>
+  <div class=anchored>
+    <div class=child
+         data-offset-x=20 data-offset-y=10
+         data-expected-width=100 data-expected-height=100></div>
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-invalid-fallback.html b/testing/web-platform/tests/css/css-anchor-position/anchor-invalid-fallback.html
new file mode 100644
index 0000000000..4768beac62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-invalid-fallback.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<title>CSS Anchor Position Test: invalid at computed-value time</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-valid">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-size-valid">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  :root {
+    --top: top;
+  }
+  #cb {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border: 1px solid black;
+  }
+
+  #anchor {
+    anchor-name: --a;
+    position: absolute;
+    width: 50px;
+    height: 40px;
+    left: 75px;
+    top: 75px;
+    background: coral;
+  }
+
+  #main > div, #ref {
+    position: absolute;
+    background: seagreen;
+  }
+
+  #ref {
+    inset: unset;
+    width: unset;
+    height: unset;
+    min-width: unset;
+    min-height: unset;
+    max-width: unset;
+    max-height: unset;
+  }
+
+</style>
+<div id=cb>
+  <div id=anchor></div>
+  <div id=main></div>
+  <div id=ref>X</div>
+</div>
+<script>
+
+// Append <div>X</div> to `container`, and remove it again once the test (`t`)
+// is finished.
+function createTarget(t, container) {
+  t.add_cleanup(() => { container.replaceChildren(); });
+  let target = document.createElement('div');
+  target.textContent = 'X';
+  container.append(target);
+  return target;
+}
+
+// First, some sanity checks to verify that the anchor etc is set up correctly,
+// and that anchor() queries can produce results if done correctly.
+
+test((t) => {
+  let target = createTarget(t, main);
+  target.style = `
+    position-anchor: --a;
+    left:anchor(right);
+    top:anchor(top);
+    width:anchor-size(width);
+    height:anchor-size(height);
+  `;
+  let cs = getComputedStyle(target);
+  assert_equals(cs.left, '125px');
+  assert_equals(cs.top, '75px');
+  assert_equals(cs.width, '50px');
+  assert_equals(cs.height, '40px');
+}, 'Element can be anchor positioned');
+
+test((t) => {
+  let target = createTarget(t, main);
+  target.style = `
+    /* No position-anchor here */
+    left:anchor(right, 17px);
+    top:anchor(top, 18px);
+    width:anchor-size(width, 42px);
+    height:anchor-size(height, 43px);
+  `;
+  let cs = getComputedStyle(target);
+  assert_equals(cs.left, '17px');
+  assert_equals(cs.top, '18px');
+  assert_equals(cs.width, '42px');
+  assert_equals(cs.height, '43px');
+}, 'Element can use <length> fallback if present');
+
+// Now test that any invalid anchor*() behaves as invalid at computed-value
+// time if there's no fallback specified.
+
+// Check that an anchored element with the specified style has the same
+// computed insets and sizing as the reference element (#ref), i.e. all
+// insets and sizing properties behave as 'unset'.
+function test_ref(style, description) {
+  test((t) => {
+    let target = createTarget(t, main);
+    target.style = style;
+    let cs = getComputedStyle(target);
+    let ref_cs = getComputedStyle(ref);
+    assert_equals(cs.top, ref_cs.top, 'top');
+    assert_equals(cs.left, ref_cs.left, 'left');
+    assert_equals(cs.right, ref_cs.right, 'right');
+    assert_equals(cs.bottom, ref_cs.bottom, 'bottom');
+    assert_equals(cs.width, ref_cs.width, 'width');
+    assert_equals(cs.height, ref_cs.height, 'height');
+    assert_equals(cs.minWidth, ref_cs.minWidth, 'minWidth');
+    assert_equals(cs.minHeight, ref_cs.minHeight, 'minHeight');
+    assert_equals(cs.maxWidth, ref_cs.maxWidth, 'maxWidth');
+    assert_equals(cs.maxHeight, ref_cs.maxHeight, 'maxHeight');
+  }, `Invalid anchor function, ${description}`);
+}
+
+// No default anchor (position-anchor):
+test_ref('left:anchor(left)', 'left');
+test_ref('right:anchor(right)', 'right');
+test_ref('bottom:anchor(bottom)', 'bottom');
+test_ref('top:anchor(top)', 'top');
+test_ref('width:anchor-size(width)', 'width');
+test_ref('height:anchor-size(height)', 'height');
+test_ref('min-width:anchor-size(width)', 'min-width');
+test_ref('min-height:anchor-size(height)', 'min-height');
+test_ref('max-width:anchor-size(width)', 'max-width');
+test_ref('max-height:anchor-size(height)', 'max-height');
+
+// Unknown anchor reference:
+test_ref('left:anchor(--unknown left)', '--unknown left');
+test_ref('width:anchor-size(--unknown width)', '--unknown width');
+
+// Wrong axis;
+test_ref('left:anchor(--a top)', 'cross-axis query (vertical)');
+test_ref('top:anchor(--a left)', ' cross-axis query (horizontal)');
+
+// Wrong query for the given property:
+test_ref('top:anchor-size(--a width)', 'anchor-size() in inset');
+test_ref('width:anchor(--a left)', 'anchor() in sizing property');
+
+// Invalid anchor*() deeper within calc():
+test_ref('left:calc(anchor(left) + 10px)', 'nested left');
+test_ref('right:calc(anchor(right) + 10px)', 'nested right');
+test_ref('bottom:calc(anchor(bottom) + 10px)', 'nested bottom');
+test_ref('top:calc(anchor(top) + 10px)', 'nested top');
+test_ref('min-width:calc(anchor-size(width) + 10px)', 'nested min-width');
+test_ref('min-height:calc(anchor-size(height) + 10px)', 'nested min-height');
+test_ref('max-width:calc(anchor-size(width) + 10px)', 'nested max-width');
+test_ref('max-height:calc(anchor-size(height) + 10px)', 'nested max-height');
+
+// Invalid anchor*() within fallback:
+test_ref('top:anchor(top, anchor(--unknown top))', 'invalid anchor() in fallback');
+test_ref('width:anchor-size(width, anchor-size(--unknown width))', 'invalid anchor-size() in fallback');
+
+// Non-calc() functions:
+test_ref('top:min(10px, anchor(top))', 'min()');
+test_ref('top:max(10px, anchor(top))', 'max()');
+test_ref('top:abs(anchor(top) - 100px)', 'abs()');
+test_ref('top:calc(sign(anchor(top) - 100px) * 20px)', 'sign()');
+
+// var():
+test_ref('top:anchor(var(--top))', 'anchor(var())');
+test_ref('top:anchor(var(--unknown, top))', 'anchor(unknown var()) (fallback)');
+test_ref('top:anchor(var(--unknown))', 'anchor(unknown var()) (no fallback)');
+
+// Reverting to an invalid anchor():
+test((t) => {
+  let target = createTarget(t, main);
+  target.setAttribute('id', 'target');
+
+  let css = document.createElement('style');
+  css.textContent = `
+    @layer base {
+      #target {
+        top: anchor(top); /* Invalid */
+        color: green;
+      }
+    }
+    #target {
+      top: revert-layer; /* Reverts to 'base'. */
+    }
+  `;
+
+  t.add_cleanup(() => { css.remove(); })
+  cb.append(css);
+
+  let cs = getComputedStyle(target);
+  let ref_cs = getComputedStyle(ref);
+  // The color check verifies that the rule is applied at all.
+  assert_equals(cs.color, 'rgb(0, 128, 0)');
+  assert_equals(cs.top, ref_cs.top);
+}, 'Revert to invalid anchor()');
+
+// Using <try-tactic> to flip to an invalid anchor():
+test((t) => {
+  let target = createTarget(t, main);
+  target.setAttribute('id', 'target');
+
+  let css = document.createElement('style');
+  css.textContent = `
+    @position-try --pt {
+      /* Undo force overflow, and also use this value to check that
+         the rule is applied at all. */
+      left: 10px;
+
+      /* Invalid. Becomes bottom:anchor(bottom) (also invalid)
+         after flip-block. */
+      top: anchor(top);
+    }
+
+    #target {
+      left: 9999px; /* Force overflow. */
+      position-try-options: --pt flip-block;
+    }
+  `;
+
+  t.add_cleanup(() => { css.remove(); })
+  cb.append(css);
+
+  let cs = getComputedStyle(target);
+  let ref_cs = getComputedStyle(ref);
+  assert_equals(cs.left, '10px', 'left');
+  // 'right' is not important in this test.
+
+  assert_equals(cs.top, ref_cs.top, 'top');
+  assert_equals(cs.bottom, ref_cs.bottom, 'bottom');
+}, 'Flip to invalid anchor()');
+
+</script>
+
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.html
index 1235f8fad4..3a86da5f70 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-001.html
@@ -2,7 +2,7 @@
 <title>Tests scroll adjustments of element anchored to another anchored element</title>
 <link rel="author" href="mailto:wangxianzhu@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
-<link rel="match" href="reference/anchor-scroll-chained-001.tentative-ref.html">
+<link rel="match" href="reference/anchor-scroll-chained-001-ref.html">
 <style>
 body {
   margin: 0;
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.html
index 9c60799e0b..38dadba5c8 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-002.html
@@ -2,7 +2,7 @@
 <title>Tests scroll adjustments of element anchored to another anchored element</title>
 <link rel="author" href="mailto:wangxianzhu@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
-<link rel="match" href="reference/anchor-scroll-chained-002.tentative-ref.html">
+<link rel="match" href="reference/anchor-scroll-chained-002-ref.html">
 <style>
 body {
   margin: 0;
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.html
index b441c92bf1..6352ebbfb6 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-003.html
@@ -2,7 +2,7 @@
 <title>Tests scroll adjustments of element anchored to another anchored element</title>
 <link rel="author" href="mailto:wangxianzhu@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
-<link rel="match" href="reference/anchor-scroll-chained-002.tentative-ref.html">
+<link rel="match" href="reference/anchor-scroll-chained-002-ref.html">
 <style>
 body {
   margin: 0;
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.html
index f1765a9870..b31519f580 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-004.html
@@ -2,7 +2,7 @@
 <title>Tests scroll adjustments of element anchored to another anchored element</title>
 <link rel="author" href="mailto:wangxianzhu@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
-<link rel="match" href="reference/anchor-scroll-chained-004.tentative-ref.html">
+<link rel="match" href="reference/anchor-scroll-chained-004-ref.html">
 <style>
 body {
   margin: 0;
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.html
index d2300da818..221df77b06 100644
--- a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-chained-fallback.html
@@ -2,7 +2,7 @@
 <title>Tests scroll adjustments of element anchored to another anchored element with fallback</title>
 <link rel="author" href="mailto:wangxianzhu@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
-<link rel="match" href="reference/anchor-scroll-chained-fallback.tentative-ref.html">
+<link rel="match" href="reference/anchor-scroll-chained-fallback-ref.html">
 <style>
 body {
   margin: 0;
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden-ref.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden-ref.html
new file mode 100644
index 0000000000..b674998a5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+body {
+  font: 20px/1 Ahem;
+  margin: 0;
+}
+
+#placefiller-above-anchor {
+  height: 200px;
+}
+
+#placefiller-before-anchor {
+  display: inline-block;
+  width: 50px;
+}
+
+#inner-anchored {
+  color: green;
+  position: fixed;
+  left: 70px;
+  top: 180px;
+}
+
+#outer-anchored {
+  color: yellow;
+  position: fixed;
+  left: 70px;
+  top: 220px;
+}
+</style>
+
+<div id="placefiller-above-anchor"></div>
+<div id="placefiller-before-anchor"></div>
+<span id="anchor">anchor</span>
+<div id="inner-anchored">inner-anchored</div>
+<div id="outer-anchored">outer-anchored</div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden.html
new file mode 100644
index 0000000000..b57e39956b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-overflow-hidden.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<title>Basic of anchor positioned scrolling: anchored elements should be "pinned" to the anchor when anchor is scrolled in overflow:hidden</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
+<link rel="match" href="anchor-scroll-overflow-hidden-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+body {
+  font: 20px/1 Ahem;
+  margin: 0;
+}
+
+#scroll-container {
+  width: 400px;
+  height: 400px;
+  overflow: hidden;
+}
+
+#scroll-contents {
+  width: 1000px;
+  height: 1000px;
+}
+
+#placefiller-above-anchor {
+  height: 500px;
+}
+
+#placefiller-before-anchor {
+  display: inline-block;
+  width: 500px;
+}
+
+#anchor {
+  anchor-name: --anchor;
+}
+
+#inner-anchored {
+  color: green;
+  position: absolute;
+  left: anchor(--anchor left);
+  bottom: anchor(--anchor top);
+  position-anchor: --anchor;
+}
+
+#outer-anchored {
+  color: yellow;
+  position: absolute;
+  left: anchor(--anchor left);
+  top: anchor(--anchor bottom);
+  position-anchor: --anchor;
+}
+</style>
+
+<div id="scroll-container">
+  <div id="scroll-contents">
+    <div id="placefiller-above-anchor"></div>
+    <div id="placefiller-before-anchor"></div>
+    <span id="anchor">anchor</span>
+    <div id="inner-anchored">inner-anchored</div>
+  </div>
+</div>
+<div id="outer-anchored">outer-anchored</div>
+
+<script>
+const scroller = document.getElementById('scroll-container');
+scroller.scrollTop = 300;
+scroller.scrollLeft = 450;
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-013.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-013.html
new file mode 100644
index 0000000000..3f1330d744
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-013.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-apply">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/test-common.js"></script>
+<style>
+#cb {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  border: solid 1px;
+}
+
+#scroller {
+  width: 200px;
+  height: 200px;
+  overflow: scroll;
+}
+
+#abspos {
+  position: absolute;
+  background: hotpink;
+  width: 50px;
+  height: 50px;
+
+  inset-area: bottom;
+  position-try-options: flip-block;
+  position-anchor: --a;
+}
+
+#anchor {
+  anchor-name: --a;
+  width: 50px;
+  height: 50px;
+  margin: 150px 0 150px 50px;
+  background: dodgerblue;
+}
+
+</style>
+<div id="cb">
+  <div id="scroller">
+    <div id="anchor">
+    </div>
+  </div>
+  <div id="abspos"></div>
+</div>
+
+<script>
+promise_test(async () => {
+  await waitUntilNextAnimationFrame();
+  assert_fallback_position(abspos, anchor, 'top');
+});
+
+promise_test(async () => {
+  scroller.scrollTop = 50;
+  await waitUntilNextAnimationFrame();
+  assert_fallback_position(abspos, anchor, 'bottom');
+});
+
+promise_test(async () => {
+  scroller.scrollTop = 40;
+  await waitUntilNextAnimationFrame();
+  assert_fallback_position(abspos, anchor, 'top');
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-014.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-014.html
new file mode 100644
index 0000000000..f19f41c088
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-position-try-014.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-apply">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/test-common.js"></script>
+<style>
+#cb {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  border: solid 1px;
+}
+
+#scroller {
+  width: 200px;
+  height: 200px;
+  overflow: scroll;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+#abspos {
+  position: absolute;
+  background: hotpink;
+  width: 50px;
+  height: 50px;
+
+  inset-area: top;
+  position-try-options: flip-block;
+  position-anchor: --a;
+}
+
+#anchor {
+  anchor-name: --a;
+  width: 50px;
+  min-height: 50px;
+  flex: 0;
+  margin: 150px 0 150px 50px;
+  background: dodgerblue;
+}
+
+</style>
+<div id="cb">
+  <div id="scroller">
+    <div id="anchor">
+    </div>
+  </div>
+  <div id="abspos"></div>
+</div>
+
+<script>
+promise_test(async () => {
+  await waitUntilNextAnimationFrame();
+  assert_fallback_position(abspos, anchor, 'bottom');
+});
+
+promise_test(async () => {
+  scroller.scrollTop = -100;
+  await waitUntilNextAnimationFrame();
+  assert_fallback_position(abspos, anchor, 'top');
+});
+
+promise_test(async () => {
+  scroller.scrollTop = -50;
+  await waitUntilNextAnimationFrame();
+  assert_fallback_position(abspos, anchor, 'bottom');
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor-ref.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor-ref.html
new file mode 100644
index 0000000000..3528b565fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<style>
+#scroll-container {
+  width: 400px;
+  height: 400px;
+  overflow: scroll;
+}
+
+#scroll-contents {
+  width: 1000px;
+  height: 1000px;
+  position: relative;
+}
+
+#anchor {
+  anchor-name: --anchor;
+  height: 100px;
+  width: 100px;
+  overflow: scroll;
+}
+
+#anchored {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="scroll-container">
+  <div id="scroll-contents">
+    <div style="height: 400px"></div>
+    <div id="anchored"></div>
+    <div id="anchor">
+      <div style="height: 500px"></div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.getElementById('scroll-container').scrollTop = 300;
+document.getElementById('anchor').scrollTop = 300;
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor.html b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor.html
new file mode 100644
index 0000000000..c2a256877d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/anchor-scroll-scrollable-anchor.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<title>Basic of anchor positioned scrolling: scroll of a scrollable anchor should not affect anchor positioing</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
+<link rel="match" href="anchor-scroll-scrollable-anchor-ref.html">
+<style>
+#scroll-container {
+  width: 400px;
+  height: 400px;
+  overflow: scroll;
+  will-change: scroll-position;
+}
+
+#scroll-contents {
+  width: 1000px;
+  height: 1000px;
+  position: relative;
+}
+
+.placefiller {
+  height: 500px;
+}
+
+#anchor {
+  anchor-name: --anchor;
+  height: 100px;
+  width: 100px;
+  overflow: scroll;
+  will-change: scroll-position;
+}
+
+#anchored {
+  background: green;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  left: anchor(left);
+  bottom: anchor(top);
+  position-anchor: --anchor;
+}
+</style>
+
+<div id="scroll-container">
+  <div id="scroll-contents">
+    <div class="placefiller"></div>
+    <div id="anchor">
+      <div class="placefiller"></div>
+    </div>
+  </div>
+</div>
+<div id="anchored"></div>
+
+<script>
+document.getElementById('scroll-container').scrollTop = 300;
+document.getElementById('anchor').scrollTop = 300;
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html
index 91172c5185..42f82d9d4b 100644
--- a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html
+++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html
@@ -24,7 +24,7 @@ test(t => {
   const positionTryRule = style.sheet.cssRules[0];
   assert_true(positionTryRule instanceof CSSPositionTryRule);
   assert_equals(positionTryRule.name, '--pf');
-  assert_true(positionTryRule.style instanceof CSSStyleDeclaration);
+  assert_true(positionTryRule.style instanceof CSSPositionTryDescriptors);
   assert_equals(positionTryRule.style.length, 1);
   assert_equals(positionTryRule.style.left, 'anchor(right)');
 }, 'CSSPositionTryRule attribute values');
@@ -63,4 +63,140 @@ test(t => {
 
 }, 'CSSPositionTryRule.style.setProperty setting allowed and disallowed properties');
 
+test(t => {
+  const style = createStyle(t, `
+    @position-try --pf {
+      top: 10px;
+      left: 20px;
+      --x: 200px;
+      color: red;
+    }
+  `);
+  let declarations = style.sheet.cssRules[0].style;
+  assert_equals(declarations.length, 2);
+  assert_equals(declarations.item(0), 'top');
+  assert_equals(declarations.item(1), 'left');
+}, 'CSSPositionTryDescriptors.item');
+
+test(t => {
+  const style = createStyle(t, '@position-try --pf {}');
+  let declarations = style.sheet.cssRules[0].style;
+  assert_equals(declarations.length, 0);
+  declarations.cssText = `color:red;top:10px;`;
+  assert_equals(declarations.length, 1);
+}, 'CSSPositionTryDescriptors.cssText');
+
+let supported_properties = [
+  'margin',
+  'margin-top',
+  'margin-right',
+  'margin-bottom',
+  'margin-left',
+  'margin-block',
+  'margin-block-start',
+  'margin-block-end',
+  'margin-inline',
+  'margin-inline-start',
+  'margin-inline-end',
+  'inset',
+  'top',
+  'left',
+  'right',
+  'bottom',
+  'inset-block',
+  'inset-block-start',
+  'inset-block-end',
+  'inset-inline',
+  'inset-inline-start',
+  'inset-inline-end',
+  'width',
+  'height',
+  'min-width',
+  'max-width',
+  'min-height',
+  'max-height',
+  'block-size',
+  'min-block-size',
+  'max-block-size',
+  'inline-size',
+  'min-inline-size',
+  'max-inline-size',
+  'place-self',
+  'align-self',
+  'justify-self',
+  'position-anchor',
+  'inset-area',
+];
+
+// A selection of unsupported properties.
+let unsupported_properties = [
+  'color',
+  'align-items',
+  'align-content',
+  'background',
+  'display',
+  'position',
+  'writing-mode',
+  'direction',
+  'syntax', // @property
+];
+
+let upperFirst = (x) => x[0].toUpperCase() + x.slice(1);
+let lowerFirst = (x) => x[0].toLowerCase() + x.slice(1);
+let toLowerCamelCase = (x) => lowerFirst(x.split('-').map(upperFirst).join(''));
+
+// Test getting/setting the specified property on a CSSPositionTryDescriptors
+// object. The property can either be supported or not supported,
+// which determines the expected results.
+function test_property(prop, supported) {
+  test(t => {
+    let decls = supported_properties.map(x => `${x}:unset;`).join('');
+    let style = createStyle(t, `@position-try --pf { ${decls} }`);
+    let declarations = style.sheet.cssRules[0].style;
+    assert_equals(declarations.getPropertyValue(prop), supported ? 'unset' : '');
+  }, `CSSPositionTryDescriptors.getPropertyValue(${prop})`);
+
+  test(t => {
+    let style = createStyle(t, '@position-try --pf {}');
+    let declarations = style.sheet.cssRules[0].style;
+    declarations.setProperty(prop, 'unset');
+    assert_equals(declarations.getPropertyValue(prop), supported ? 'unset' : '');
+  }, `CSSPositionTryDescriptors.setProperty(${prop})`);
+
+  test(t => {
+    let decls = supported_properties.map(x => `${x}:unset;`).join('');
+    let style = createStyle(t, `@position-try --pf { ${decls} }`);
+    let declarations = style.sheet.cssRules[0].style;
+    assert_equals(declarations[prop], supported ? 'unset' : undefined);
+  }, `CSSPositionTryDescriptors[${prop}] (set)`);
+
+  test(t => {
+    let style = createStyle(t, '@position-try --pf {}');
+    let declarations = style.sheet.cssRules[0].style;
+    declarations[prop] = 'unset';
+    assert_equals(declarations.getPropertyValue(prop), supported ? 'unset' : '');
+  }, `CSSPositionTryDescriptors[${prop}] (get)`);
+
+  let camelCaseAttr = toLowerCamelCase(prop);
+  if (camelCaseAttr != prop) {
+    // Also test the camelCase version of the attribute.
+    test(t => {
+      let decls = supported_properties.map(x => `${x}:unset;`).join('');
+      let style = createStyle(t, `@position-try --pf { ${decls} }`);
+      let declarations = style.sheet.cssRules[0].style;
+      assert_equals(declarations[camelCaseAttr], supported ? 'unset' : undefined);
+    }, `CSSPositionTryDescriptors[${camelCaseAttr}] (get)`);
+
+    test(t => {
+      let style = createStyle(t, '@position-try --pf {}');
+      let declarations = style.sheet.cssRules[0].style;
+      declarations[camelCaseAttr] = 'unset';
+      assert_equals(declarations.getPropertyValue(prop), supported ? 'unset' : '');
+    }, `CSSPositionTryDescriptors[${camelCaseAttr}] (set)`);
+  }
+}
+
+supported_properties.forEach(x => { test_property(x, /* supported */ true);  });
+unsupported_properties.forEach(x => { test_property(x, /* supported */ false);  });
+
 </script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/base-style-invalidation.html b/testing/web-platform/tests/css/css-anchor-position/base-style-invalidation.html
new file mode 100644
index 0000000000..8e8e69f9b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/base-style-invalidation.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: Invalidation from changing the base style</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
+<link rel="help" href="https://issues.chromium.org/issues/333608683">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  @position-try --pt {
+    width: 50px; /* Undo force overflow */
+  }
+  #cb {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border: 1px solid black;
+  }
+  #anchor {
+    position: absolute;
+    left: 75px;
+    top: 75px;
+    width: 50px;
+    height: 50px;
+    background: coral;
+    anchor-name: --a;
+  }
+  #anchored {
+    position: absolute;
+    position-anchor: --a;
+    position-try-options: --pt flip-start;
+    inset: 0;
+    top: anchor(top);
+    bottom: anchor(bottom);
+    right: calc(anchor(left) + 5px);
+    width: 50px;
+    height: 50px;
+    background: skyblue;
+    justify-self: end;
+  }
+  #anchored.flip {
+    background: seagreen;
+    width: 300px; /* Force overflow */
+  }
+</style>
+<div id=cb>
+  <div id=anchor></div>
+  <div id=anchored></div>
+</div>
+<script>
+  test(() => {
+    // Initially to the left.
+    assert_equals(anchored.offsetLeft, 20);
+    assert_equals(anchored.offsetTop, 75);
+
+    // Flips to the right.
+    anchored.classList.toggle('flip');
+    assert_equals(anchored.offsetLeft, 75);
+    assert_equals(anchored.offsetTop, 20);
+
+    // Flips to the original position.
+    anchored.classList.toggle('flip');
+    assert_equals(anchored.offsetLeft, 20);
+    assert_equals(anchored.offsetTop, 75);
+  }, 'The chosen position options changes when the base style differs');
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/chrome-336164421-crash.html b/testing/web-platform/tests/css/css-anchor-position/chrome-336164421-crash.html
new file mode 100644
index 0000000000..c45b69059b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/chrome-336164421-crash.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/336164421">
+<style>
+  #inner {
+    position: absolute;
+    left: anchor(left);
+  }
+  #inner::before {
+    display: none;
+    content: "";
+  }
+</style>
+<div id="inner"></div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/chrome-336322507-crash.html b/testing/web-platform/tests/css/css-anchor-position/chrome-336322507-crash.html
new file mode 100644
index 0000000000..922c53b977
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/chrome-336322507-crash.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/336322507">
+<style>
+  #crash {
+    --grad: linear-gradient(black, white);
+    background: var(--grad);
+    position: absolute;
+    top: anchor(center);
+  }
+</style>
+<div id="crash"></div>
+<script>
+  document.body.offsetTop;
+  crash.remove();
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-function.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-function.html
new file mode 100644
index 0000000000..9d68bf9ddf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-function.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: inset-area()</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-options">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #cb {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border: 1px solid black;
+  }
+  #anchor {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    width: 80px;
+    height: 80px;
+    background-color: tomato;
+    anchor-name: --a;
+  }
+  #target, #ref {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    background-color: skyblue;
+    inset-area: bottom right;
+    position-anchor: --a;
+  }
+  #ref {
+    background-color: seagreen;
+  }
+</style>
+<style id=style>
+</style>
+<div id=cb>
+  <div id=anchor></div>
+  <div id=target></div>
+  <div id=ref></div>
+</div>
+<script>
+
+// Test that a given inset-area() produces the same result as a reference
+// element that is styled with an inset-area declaration directly.
+function test_inset_area_fn(inset_area_function, inset_area_expected) {
+  test((t) => {
+    t.add_cleanup(() => {
+      style.textContent = '';
+    });
+    style.textContent = `
+      #target {
+        position-try-options: ${inset_area_function};
+      }
+      #ref {
+        inset-area: ${inset_area_expected};
+      }
+    `;
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `${inset_area_function}, ${inset_area_expected}`);
+}
+
+test_inset_area_fn('inset-area(top left)', 'top left');
+test_inset_area_fn('inset-area(span-top left)', 'span-top left');
+test_inset_area_fn('inset-area(top span-left)', 'top span-left');
+test_inset_area_fn('inset-area(top center)', 'top center');
+test_inset_area_fn('inset-area(left center)', 'left center');
+test_inset_area_fn('inset-area(start center)', 'start center');
+test_inset_area_fn('inset-area(center start)', 'center start');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html
new file mode 100644
index 0000000000..7339c4f41d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-in-position-try.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: inset-area in @position-try</title>
+<link rel="help" href='https://drafts.csswg.org/css-anchor-position-1/#position-try-options'>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<style>
+  #cb {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border: 1px solid black;
+  }
+  #anchor {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    width: 50px;
+    height: 50px;
+    background-color: tomato;
+    anchor-name: --a;
+  }
+  #target {
+    left: 200px; /* force fallback */
+  }
+  #target, #ref {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    background-color: skyblue;
+    inset-area: bottom right;
+    position-anchor: --a;
+  }
+  #ref {
+    background-color: seagreen;
+  }
+</style>
+<style id=style>
+</style>
+<div id=cb>
+  <div id=anchor></div>
+  <div id=target></div>
+  <div id=ref></div>
+</div>
+<script>
+
+// Test that inside-area, when used inside @position-try, works the same
+// as when it's specified in the base style.
+function test_inset_area_ref(inset_area) {
+  test((t) => {
+    t.add_cleanup(() => {
+      style.textContent = '';
+    });
+    style.textContent = `
+      @position-try --pt {
+        inset: unset; /* Undo force fallback */
+        inset-area: ${inset_area};
+      }
+      #target {
+        position-try-options: --pt;
+      }
+      #ref {
+        inset-area: ${inset_area};
+      }
+    `;
+    assert_true(CSS.supports('inset-area', 'top left'));
+    assert_true(CSS.supports('position-try-options', '--x'));
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `${inset_area}`);
+}
+
+test_inset_area_ref('none');
+test_inset_area_ref('span-all');
+test_inset_area_ref('span-all span-all');
+test_inset_area_ref('top left');
+test_inset_area_ref('top center');
+test_inset_area_ref('top right');
+test_inset_area_ref('center left');
+test_inset_area_ref('center center');
+test_inset_area_ref('center right');
+test_inset_area_ref('bottom left');
+test_inset_area_ref('bottom center');
+test_inset_area_ref('bottom right');
+test_inset_area_ref('start start');
+test_inset_area_ref('start center');
+test_inset_area_ref('start end');
+test_inset_area_ref('center start');
+test_inset_area_ref('center end');
+test_inset_area_ref('end start');
+test_inset_area_ref('end center');
+test_inset_area_ref('end end');
+test_inset_area_ref('self-start self-start');
+test_inset_area_ref('self-start center');
+test_inset_area_ref('self-start self-end');
+test_inset_area_ref('center self-start');
+test_inset_area_ref('center self-end');
+test_inset_area_ref('self-end self-start');
+test_inset_area_ref('self-end center');
+test_inset_area_ref('self-end self-end');
+test_inset_area_ref('y-start x-start');
+test_inset_area_ref('y-start center');
+test_inset_area_ref('y-start x-end');
+test_inset_area_ref('center x-start');
+test_inset_area_ref('center x-end');
+test_inset_area_ref('y-end x-start');
+test_inset_area_ref('y-end center');
+test_inset_area_ref('y-end x-end');
+test_inset_area_ref('y-self-start x-self-start');
+test_inset_area_ref('y-self-start center');
+test_inset_area_ref('y-self-start x-self-end');
+test_inset_area_ref('center x-self-start');
+test_inset_area_ref('center x-self-end');
+test_inset_area_ref('y-self-end x-self-start');
+test_inset_area_ref('y-self-end center');
+test_inset_area_ref('y-self-end x-self-end');
+test_inset_area_ref('span-y-self-start span-x-self-end');
+test_inset_area_ref('span-bottom span-all');
+
+</script>
+
+<style>
+  @position-try --top {
+    inset: unset; /* Undo force fallback */
+    inset-area: top;
+  }
+  @position-try --right {
+    inset: unset; /* Undo force fallback */
+    inset-area: right;
+  }
+  @position-try --bottom {
+    inset: unset; /* Undo force fallback */
+    inset-area: bottom;
+  }
+  @position-try --left {
+    inset: unset; /* Undo force fallback */
+    inset-area: left;
+  }
+</style>
+<script>
+
+// Test that an element with the specified position-try-options is placed
+// at the same position as a reference element with inset-area:`expected`.
+// This test uses #target/#ref size of 60x60px, which causes overflow if
+// if we attempt the --right and --bottom positions.
+function test_inset_area_placement(position_try_options, expected) {
+  test((t) => {
+    style.textContent = `
+      #target, #ref {
+        width: 60px;
+        height: 60px;
+      }
+      #target {
+        position-try-options: ${position_try_options};
+      }
+      #ref {
+        inset-area: ${expected};
+      }
+    `;
+    assert_true(CSS.supports('inset-area', 'top left'));
+    assert_true(CSS.supports('position-try-options', '--x'));
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `Placement: ${position_try_options}`);
+}
+
+test_inset_area_placement('--top', 'top');
+test_inset_area_placement('--left', 'left');
+
+// No space to to the right/bottom:
+test_inset_area_placement('--right, --top', 'top');
+test_inset_area_placement('--bottom, --top', 'top');
+test_inset_area_placement('--bottom, --right, --top', 'top');
+test_inset_area_placement('--bottom, --right, --left, --top', 'left');
+test_inset_area_placement('--bottom, --left, --top, --right', 'left');
+
+// Flipping:
+test_inset_area_placement('--right flip-inline', 'left');
+test_inset_area_placement('--bottom flip-block', 'top');
+test_inset_area_placement('--left flip-start', 'top');
+
+// left + flip-inline => right (no space).
+test_inset_area_placement('--left flip-inline, --top', 'top');
+// top + flip-block => bottom (no space).
+test_inset_area_placement('--top flip-block, --left', 'left');
+// left + flip-start flip-block => bottom (no space).
+test_inset_area_placement('--left flip-start flip-block, --left', 'left');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html
index ff4ceb73df..8a8ba88706 100644
--- a/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-computed.tentative.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Anchor Positioning Test: Computed position-visibility</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/computed-testcommon.js"></script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html
index 18dd27eadb..942ec71754 100644
--- a/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/parsing/position-visibility-parsing.tentative.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Anchor Positioning Test: Parsing of position-visibility</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-backdrop.html b/testing/web-platform/tests/css/css-anchor-position/position-try-backdrop.html
new file mode 100644
index 0000000000..6bf2262c69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-try-backdrop.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: position-try-options on ::backdrop</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  @position-try --pt {
+    left: 300px;
+  }
+  #anchor {
+    width: 100px;
+    height: 100px;
+    margin-left: 150px;
+    margin-top: 50px;
+    background: coral;
+  }
+  dialog::backdrop {
+    background: seagreen;
+    width:100px;
+    height:100px;
+    left: 9999px; /* Force overflow */
+    position-try-options: --pt;
+  }
+</style>
+<div id=anchor>Anchor</div>
+<dialog id=dialog>Dialog</dialog>
+<script>
+  test((t) => {
+    dialog.showModal();
+    let style = getComputedStyle(dialog, '::backdrop');
+    assert_equals(style.left, '300px');
+  }, '::backdrop can use position-try-options');
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-order-inset-area.html b/testing/web-platform/tests/css/css-anchor-position/position-try-order-inset-area.html
new file mode 100644
index 0000000000..98e606a7d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-try-order-inset-area.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: position-try-order behavior with inset-area</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-order-property">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#inset-area">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<!--
+  Note: This test is the inset-area version of position-try-order-basic.html.
+-->
+<style>
+  #cb {
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    border: 1px solid black;
+  }
+  #anchor {
+    position: absolute;
+    left: 150px;
+    top: 200px;
+    width: 150px;
+    height: 150px;
+    background-color: coral;
+    anchor-name: --a;
+  }
+  #target, #ref {
+    position: absolute;
+    left: 450px; /* force fallback */
+    width: 40px;
+    height: 40px;
+    background-color: skyblue;
+    position-anchor: --a;
+    /* Note: align/justify is for cosmetic/debugging reasons only,
+       it should not have any effect on the result. */
+    align-self: start;
+    justify-self: start;
+  }
+  #ref {
+    background-color: seagreen;
+  }
+
+/*
+
+The IMCB for --right is the whole area to the right of the anchor, and similarly
+for --left, etc.
+
+  ┌──────────────┐
+  │          xxxx│
+  │          xxxx│
+  │    ┌────┐xxxx│
+  │    │    │xxxx│
+  │    └────┘xxxx│
+  │          xxxx│
+  │          xxxx│
+  └──────────────┘
+
+**/
+
+  @position-try --right {
+    inset: unset;
+    inset-area: right;
+  }
+  @position-try --left {
+    inset: unset;
+    inset-area: left;
+  }
+  @position-try --top {
+    inset: unset;
+    inset-area: top;
+  }
+  @position-try --bottom {
+    inset: unset;
+    inset-area: bottom;
+  }
+
+/*
+
+The IMCB for --right-sweep is the area that would be "swept" by the anchor if it
+moved right, and similarly for --left-sweep, etc.
+
+   ┌──────────────┐
+   │              │
+   │              │
+   │    ┌────┐xxxx│
+   │    │    │xxxx│
+   │    └────┘xxxx│
+   │              │
+   │              │
+   └──────────────┘
+
+*/
+
+  @position-try --right-sweep {
+    inset: unset;
+    inset-area: right center;
+  }
+
+  @position-try --left-sweep {
+    inset: unset;
+    inset-area: left center;
+  }
+
+  @position-try --bottom-sweep {
+    inset: unset;
+    inset-area: bottom center;
+  }
+
+  @position-try --top-sweep {
+    inset: unset;
+    inset-area: top center;
+  }
+
+</style>
+<style id=style>
+</style>
+<div id=cb>
+  <div id=anchor></div>
+  <div id=target></div>
+  <div id=ref></div>
+</div>
+<script>
+
+// Test that an element with the specified `position_try` gets the same
+// position as a reference element with `position_try_expected`.
+function test_inset_area_order(position_try, position_try_expected) {
+  test((t) => {
+    style.textContent = `
+      #target {
+        position-try: ${position_try};
+      }
+      #ref {
+        position-try: ${position_try_expected};
+      }
+    `;
+    assert_true(CSS.supports('position-try', 'normal --x'));
+    assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft');
+    assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop');
+  }, `${position_try} | ${position_try_expected}`);
+}
+
+// Note: --right, --left, --top, and --bottom all fit, but have different
+// inset-modifed containing blocks.
+
+test_inset_area_order('--right', '--right');
+test_inset_area_order('--left', '--left');
+test_inset_area_order('--top', '--top');
+test_inset_area_order('--bottom', '--bottom');
+
+// position-try-order:normal just picks the first option.
+test_inset_area_order('--right, --left, --bottom, --top', '--right');
+test_inset_area_order('normal --right, --left, --bottom, --top', '--right');
+test_inset_area_order('normal --top, --left, --bottom, --right', '--top');
+
+// --right and --left have the same IMCB block-size.
+test_inset_area_order('most-block-size --right, --left', '--right');
+test_inset_area_order('most-height --right, --left', '--right');
+// --left has more inline-size than --right.
+test_inset_area_order('most-inline-size --right, --left', '--left');
+test_inset_area_order('most-width --right, --left', '--left');
+
+// --bottom and --top have the same IMCB inline-size.
+test_inset_area_order('most-inline-size --bottom, --top', '--bottom');
+test_inset_area_order('most-width --bottom, --top', '--bottom');
+// --top has more block-size than --bottom.
+test_inset_area_order('most-block-size --bottom, --top', '--top');
+test_inset_area_order('most-height --bottom, --top', '--top');
+
+// --bottom/--top has more IMBC inline-size than --right/--left.
+test_inset_area_order('most-inline-size --right, --left, --bottom, --top', '--bottom');
+test_inset_area_order('most-inline-size --right, --left, --top, --bottom', '--top');
+
+// --right/--left has more IMBC block-size than --bottom/--top.
+test_inset_area_order('most-block-size --bottom, --top, --right, --left', '--right');
+test_inset_area_order('most-block-size --bottom, --top, --left, --right', '--left');
+
+// --left-sweep and --bottom-sweep has the same IMBC inline-size ...
+test_inset_area_order('most-inline-size --left-sweep, --bottom-sweep', '--left-sweep');
+test_inset_area_order('most-inline-size --bottom-sweep, --left-sweep', '--bottom-sweep');
+// ... but not the same block-size.
+test_inset_area_order('most-block-size --left-sweep, --bottom-sweep', '--left-sweep');
+test_inset_area_order('most-block-size --bottom-sweep, --left-sweep', '--left-sweep');
+
+test_inset_area_order('most-inline-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--left-sweep');
+test_inset_area_order('most-block-size --right-sweep, --left-sweep, --bottom-sweep, --top-sweep', '--top-sweep');
+
+test_inset_area_order(`most-inline-size
+  --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
+  --right, --left, --bottom, --top
+  `, '--left-sweep');
+
+test_inset_area_order(`most-block-size
+  --right-sweep, --left-sweep, --bottom-sweep, --top-sweep,
+  --right, --left, --bottom, --top
+  `, '--right');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.html
index 9d87f82b9f..de0647f88b 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-add-no-overflow.html
@@ -2,7 +2,7 @@
 <html class=reftest-wait>
 <meta charset="utf-8">
 <title>CSS Anchor Positioning Test: position-visibility: no-overflow</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-no-overflow-ref.html">
 <style>
   #scroll-container {
@@ -44,4 +44,4 @@ requestAnimationFrame(() => {
   });
 });
 </script>
-</html>
-\ No newline at end of file
+</html>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html
index bf67921639..4b069c253b 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-valid.tentative.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Anchor Positioning Test: position-visibility: anchors-valid</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-anchors-valid-ref.html">
 <style>
   .anchor {
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html
index cea439c55f..f13c500915 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <meta name="assert" content="Scrolling an anchor in to view should cause a position-visibility: anchors-visible element to appear." />
 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-anchors-visible-after-scroll-in-ref.html">
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.html
index b2e3643b07..4294091b89 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <meta name="assert" content="Scrolling an anchor out of view should cause a position-visibility: anchors-visible element to disappear." />
 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-anchors-visible-after-scroll-out-ref.html">
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed-ref.html
new file mode 100644
index 0000000000..7a9d69a9e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<!-- This test passes if both the anchor and anchored elements are hidden. -->
+<div style="height: 200vh;"></div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed.tentative.html
new file mode 100644
index 0000000000..3ea26c896e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-both-position-fixed.tentative.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="assert" content="position-visibility: anchors-visible should work with a fixed-position anchored element." />
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-anchors-visible-both-position-fixed-ref.html">
+<style>
+  #anchor {
+    anchor-name: --a1;
+    position: fixed;
+    top: -100px;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    background: orange;
+  }
+
+  #target {
+    position-anchor: --a1;
+    position-visibility: anchors-visible;
+    inset-area: bottom right;
+    width: 100px;
+    height: 100px;
+    background: red;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  #spacer {
+    height: 200vh;
+  }
+</style>
+
+<!-- Test passes if #target is not visible, due to #anchor being off-screen. -->
+<div id="anchor">anchor</div>
+<div id="target">target</div>
+<div id="spacer"></div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-001.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-001.html
new file mode 100644
index 0000000000..3f515a5686
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-001.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-anchors-visible-after-scroll-out-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+  #scroll-container {
+    overflow: hidden scroll;
+    width: 300px;
+    height: 100px;
+  }
+
+  #anchor1 {
+    anchor-name: --a1;
+    width: 100px;
+    height: 100px;
+    background: orange;
+  }
+
+  #anchor2 {
+    anchor-name: --a2;
+    width: 100px;
+    height: 50px;
+    background: yellow;
+  }
+
+  .spacer {
+    height: 100px;
+  }
+
+  .anchored {
+    position-visibility: anchors-visible;
+    inset-area: bottom;
+    width: 100px;
+    height: 50px;
+    background: red;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  #chained {
+    position-anchor: --a1;
+  }
+
+  #target {
+    position-anchor: --a2;
+  }
+</style>
+
+<div id="scroll-container">
+  <div id="anchor1">anchor1</div>
+  <div class="spacer"></div>
+  <div id="chained" class="anchored">
+    <div id="anchor2">chained</div>
+  </div>
+  <div id="target" class="anchored">target</div>
+</div>
+
+<script>
+  // #target should be initially visible because it is anchored to #anchor2
+  // which is chained to #anchor1 and both anchors are visible.
+  waitForAtLeastOneFrame().then(() => {
+    // Scroll #anchor1 so that it is out of view.
+    document.getElementById('scroll-container').scrollTop = 100;
+
+    // #target should now be invisible.
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-002.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-002.html
new file mode 100644
index 0000000000..aa1dcd0eb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-002.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-anchors-visible-after-scroll-out-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+  #scroll-container {
+    overflow: hidden scroll;
+    width: 300px;
+    height: 100px;
+  }
+
+  #anchor1 {
+    anchor-name: --a1;
+    width: 100px;
+    height: 100px;
+    background: orange;
+  }
+
+  #chained {
+    position-anchor: --a1;
+    anchor-name: --a2;
+    background: yellow;
+  }
+
+  .spacer {
+    height: 100px;
+  }
+
+  .anchored {
+    position-visibility: anchors-visible;
+    inset-area: bottom;
+    width: 100px;
+    height: 50px;
+    background: red;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  #target {
+    position-anchor: --a2;
+  }
+</style>
+
+<div id="scroll-container">
+  <div id="anchor1">anchor1</div>
+  <div class="spacer"></div>
+  <div id="chained" class="anchored"></div>
+  <div id="target" class="anchored">target</div>
+</div>
+
+<script>
+  // #target should be initially visible because it is anchored to #anchor2
+  // which is chained to #anchor1 and both anchors are visible.
+  waitForAtLeastOneFrame().then(() => {
+    // Scroll #anchor1 so that it is out of view.
+    document.getElementById('scroll-container').scrollTop = 100;
+
+    // #target should now be invisible.
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-003.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-003.html
new file mode 100644
index 0000000000..9a1e077de0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-003.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-anchors-visible-after-scroll-out-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+  #scroll-container {
+    overflow: hidden scroll;
+    width: 300px;
+    height: 100px;
+  }
+
+  #anchor1 {
+    anchor-name: --a1;
+    width: 100px;
+    height: 100px;
+    background: orange;
+  }
+
+  .spacer {
+    height: 100px;
+  }
+
+  #anchor2 {
+    anchor-name: --a2;
+    position-anchor: --a1;
+  }
+
+  #anchor3 {
+    anchor-name: --a3;
+    position-anchor: --a2;
+  }
+
+  #anchor4 {
+    anchor-name: --a4;
+    position-anchor: --a3;
+  }
+
+  .anchored {
+    position-visibility: anchors-visible;
+    inset-area: bottom;
+    width: 100px;
+    height: 50px;
+    background: red;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  #target {
+    position-anchor: --a4;
+  }
+</style>
+
+<div id="scroll-container">
+  <div id="anchor1">anchor1</div>
+  <div class="spacer"></div>
+  <div id="anchor2" class="anchored">anchor2</div>
+  <div id="anchor3" class="anchored">anchor3</div>
+  <div id="anchor4" class="anchored">anchor4</div>
+  <div id="target" class="anchored">target</div>
+</div>
+
+<script>
+  // #target should be initially visible because it is anchored to #anchor2
+  // which is chained to #anchor1 and both anchors are visible.
+  waitForAtLeastOneFrame().then(() => {
+    // Scroll #anchor1 so that it is out of view.
+    document.getElementById('scroll-container').scrollTop = 100;
+
+    // #target should now be invisible.
+    takeScreenshot();
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004-ref.html
new file mode 100644
index 0000000000..409247a695
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+  #scroll-container {
+    overflow: hidden scroll;
+    width: 300px;
+    height: 100px;
+  }
+
+  #anchor {
+    width: 100px;
+    height: 100px;
+    background: orange;
+    margin-bottom: 100px;
+  }
+
+  #chained {
+    width: 100px;
+    height: 50px;
+    background: blue;
+  }
+
+  #target {
+    width: 100px;
+    height: 50px;
+    background: green;
+  }
+</style>
+
+<div id="scroll-container">
+  <div id="anchor">anchor1</div>
+</div>
+<div id="chained">chained</div>
+<div id="target">target</div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html
new file mode 100644
index 0000000000..62ab7578a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-chained-004.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="match" href="position-visibility-anchors-visible-chained-004-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+  #scroll-container {
+    overflow: hidden scroll;
+    width: 300px;
+    height: 100px;
+  }
+
+  #anchor1 {
+    anchor-name: --a1;
+    width: 100px;
+    height: 100px;
+    background: orange;
+  }
+
+  #anchor2 {
+    anchor-name: --a2;
+    width: 100px;
+    height: 50px;
+    background: blue;
+  }
+
+  .spacer {
+    height: 100px;
+  }
+
+  .anchored {
+    position-visibility: anchors-visible;
+    inset-area: bottom;
+    width: 100px;
+    height: 50px;
+    background: green;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  #chained {
+    position-anchor: --a1;
+  }
+
+  #target {
+    position-anchor: --a2;
+  }
+</style>
+
+<div id="scroll-container">
+  <div id="anchor1">anchor1</div>
+  <div class="spacer"></div>
+  <div id="chained" class="anchored">
+    <div id="anchor2">chained</div>
+  </div>
+  <div id="target" class="anchored">target</div>
+</div>
+
+<script>
+  // #target should be initially visible because it is anchored to #anchor2
+  // which is chained to #anchor1 and both anchors are visible.
+  waitForAtLeastOneFrame().then(() => {
+    // Scroll #anchor out of view.
+    const scroller = document.getElementById('scroll-container');
+    scroller.scrollTop = 100;
+    // #target1 should now be invisible.
+
+    waitForAtLeastOneFrame().then(() => {
+      // Scroll #anchor back into view.
+      scroller.scrollTop = 0;
+
+      // #target should now be visible again.
+      takeScreenshot();
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html
index f8b1cc6d10..117628e7dc 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <meta name="assert" content="Position-visibility should not be affected by the visibility of a previous anchor." />
 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-anchors-visible-change-anchor-ref.html">
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html
index 22a30658c8..f9c598374c 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-change-css-visibility.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <meta name="assert" content="Position-visibility: anchors-visible should show an element after an anchor changes from visibility: hidden to visibility: visible." />
 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-anchors-visible-change-css-visibility-ref.html">
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.html
index 31be797798..a699025325 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-css-visibility.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <meta name="assert" content="Position-visibility: anchors-visible should hide an element with an anchor that has visibility: hidden." />
 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-anchors-visible-css-visibility-ref.html">
 <style>
   #container {
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.html
index 7b84976fd3..9c4d085b7e 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-non-intervening-container.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <meta name="assert" content="position-visibility: anchors-visible should consider the visibility of the anchor relative the containing scroller, ignoring visibility in other scrollers." />
 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-anchors-visible-non-intervening-container-ref.html">
 <style>
   #non-intervening-scroll-container {
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.html
new file mode 100644
index 0000000000..e563fecfed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-stacked-child.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="assert" content="Position-visibility: anchors-visible should hide an element and stacked children with an out-of-view anchor." />
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
+<link rel="match" href="position-visibility-anchors-visible-ref.html">
+<style>
+  #scroll-container {
+    overflow: hidden scroll;
+    width: 300px;
+    height: 100px;
+  }
+
+  #anchor {
+    anchor-name: --a1;
+    width: 100px;
+    height: 100px;
+    background: orange;
+  }
+
+  #spacer {
+    height: 100px;
+  }
+
+  #target {
+    position-anchor: --a1;
+    position-visibility: anchors-visible;
+    inset-area: bottom right;
+    width: 100px;
+    height: 100px;
+    background: red;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  #stacking-child {
+    /* stacking context */
+    z-index: 1;
+    width: 100px;
+    height: 100px;
+    background: maroon;
+    position: absolute;
+    top: 25px;
+    left: 25px;
+  }
+</style>
+
+<div id="scroll-container">
+  <div id="anchor">anchor</div>
+  <div id="spacer"></div>
+  <div id="target">target
+    <div id="stacking-child"></div>
+  </div>
+</div>
+
+<script>
+  const scroller = document.getElementById('scroll-container');
+  scroller.scrollTop = 100;
+  // #target should not be visible because #anchor is scrolled out of view.
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.html
index 82eed0beb9..43dd2cc782 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-with-position.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <meta name="assert" content="Position-visibility: anchors-visible should hide an element with an out-of-view anchor and a relpos scroller." />
 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-anchors-visible-ref.html">
 <style>
   #scroll-container {
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.html
index 85b8d897db..78daffb11b 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <meta name="assert" content="Position-visibility: anchors-visible should hide an element with an out-of-view anchor." />
 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-anchors-visible-ref.html">
 <style>
   #scroll-container {
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.html
index 4751faeb0d..f646f819cd 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
 <title>CSS Anchor Positioning Test: position-visibility: no-overflow</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-no-overflow-scroll-ref.html">
 <style>
   #scroll-container {
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.html
index f748fda33e..1ea5ff9a1e 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-stacked-child.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Anchor Positioning Test: position-visibility: no-overflow</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-no-overflow-ref.html">
 <style>
   #scroll-container {
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.html
index 39fb55b120..ea3b2d0802 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>CSS Anchor Positioning Test: position-visibility: no-overflow</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-no-overflow-ref.html">
 <style>
   #scroll-container {
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.html
index c6649e5f93..95be15ca55 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-anchors-visible.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8">
 <meta name="assert" content="Removing position-visibility: anchors-visible from an invisible anchored element should cause it to become visible." />
 <title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-remove-anchors-visible-ref.html">
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.html
index a043917da6..2cd2ed9fa3 100644
--- a/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.tentative.html
+++ b/testing/web-platform/tests/css/css-anchor-position/position-visibility-remove-no-overflow.html
@@ -2,7 +2,7 @@
 <html class=reftest-wait>
 <meta charset="utf-8">
 <title>CSS Anchor Positioning Test: position-visibility: no-overflow</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
 <link rel="match" href="position-visibility-no-overflow-ref.html">
 <style>
   #scroll-container {
@@ -45,4 +45,4 @@ requestAnimationFrame(() => {
   });
 });
 </script>
-</html>
-\ No newline at end of file
+</html>
diff --git a/testing/web-platform/tests/css/css-anchor-position/pseudo-element-anchor-dynamic.html b/testing/web-platform/tests/css/css-anchor-position/pseudo-element-anchor-dynamic.html
new file mode 100644
index 0000000000..9e4fa9828e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/pseudo-element-anchor-dynamic.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: Pseudo elements as anchors</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .cb {
+    position: relative;
+    width: 200px;
+    height: 200px;
+  }
+  #anchor1.enabled::before {
+    display: block;
+    width: 100px;
+    height: 100px;
+    content: "";
+    anchor-name: --a1;
+    background: blue;
+  }
+  #anchor2.enabled::after {
+    display: block;
+    width: 100px;
+    height: 100px;
+    content: "";
+    anchor-name: --a2;
+    background: pink;
+  }
+  .anchored {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: anchor(right);
+    top: anchor(bottom);
+    background: orange;
+  }
+  #anchored1 { position-anchor: --a1; }
+  #anchored2 { position-anchor: --a2; }
+</style>
+<div class="cb">
+  <div id="anchor1"></div>
+  <div id="anchored1" class="anchored"></div>
+</div>
+<div class="cb">
+  <div id="anchor2"></div>
+  <div id="anchored2" class="anchored"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(anchored1.offsetLeft, 0);
+    assert_equals(anchored1.offsetTop, 0);
+    anchor1.className = "enabled";
+    assert_equals(anchored1.offsetLeft, 100);
+    assert_equals(anchored1.offsetTop, 100);
+  }, "::before as anchor dynamically generated");
+  test(() => {
+    assert_equals(anchored2.offsetLeft, 0);
+    assert_equals(anchored2.offsetTop, 0);
+    anchor2.className = "enabled";
+    assert_equals(anchored2.offsetLeft, 100);
+    assert_equals(anchored2.offsetTop, 100);
+  }, "::after as anchor dynamically generated");
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/pseudo-element-anchor.html b/testing/web-platform/tests/css/css-anchor-position/pseudo-element-anchor.html
new file mode 100644
index 0000000000..a107a0ec17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-anchor-position/pseudo-element-anchor.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: Pseudo elements as anchors</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .cb {
+    position: relative;
+    width: 200px;
+    height: 200px;
+  }
+  #anchor1::before {
+    display: block;
+    width: 100px;
+    height: 100px;
+    content: "";
+    anchor-name: --a1;
+    background: blue;
+  }
+  #anchor2::after {
+    display: block;
+    width: 100px;
+    height: 100px;
+    content: "";
+    anchor-name: --a2;
+    background: pink;
+  }
+  .anchored {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: anchor(right);
+    top: anchor(bottom);
+    background: orange;
+  }
+  #anchored1 { position-anchor: --a1; }
+  #anchored2 { position-anchor: --a2; }
+</style>
+<div class="cb">
+  <div id="anchor1"></div>
+  <div id="anchored1" class="anchored"></div>
+</div>
+<div class="cb">
+  <div id="anchor2"></div>
+  <div id="anchored2" class="anchored"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(anchored1.offsetLeft, 100);
+    assert_equals(anchored1.offsetTop, 100);
+  }, "::before as anchor");
+  test(() => {
+    assert_equals(anchored2.offsetLeft, 100);
+    assert_equals(anchored2.offsetTop, 100);
+  }, "::after as anchor");
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-001.tentative-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-001-ref.html
index fb858cc105..fb858cc105 100644
--- a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-001.tentative-ref.html
+++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-001-ref.html
diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-002.tentative-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-002-ref.html
index 9dde5d00f0..9dde5d00f0 100644
--- a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-002.tentative-ref.html
+++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-002-ref.html
diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-004.tentative-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-004-ref.html
index 22c2270dde..22c2270dde 100644
--- a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-004.tentative-ref.html
+++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-004-ref.html
diff --git a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-fallback.tentative-ref.html b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-fallback-ref.html
index 0933430fc3..0933430fc3 100644
--- a/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-fallback.tentative-ref.html
+++ b/testing/web-platform/tests/css/css-anchor-position/reference/anchor-scroll-chained-fallback-ref.html
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html
deleted file mode 100644
index 77f9670638..0000000000
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-computed.tentative.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-end">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/computed-testcommon.js"></script>
-<div id="target"></div>
-<script>
-test_computed_value("animation-delay-end", "initial", "0s");
-test_computed_value("animation-delay-end", "-500ms", "-0.5s");
-test_computed_value("animation-delay-end", "calc(2 * 3s)", "6s");
-test_computed_value("animation-delay-end", "20s, 10s");
-</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html
deleted file mode 100644
index 7cabd4e8e5..0000000000
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-invalid.tentative.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-end">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/parsing-testcommon.js"></script>
-<script>
-test_invalid_value("animation-delay-end", "infinite");
-test_invalid_value("animation-delay-end", "0");
-test_invalid_value("animation-delay-end", "1s 2s");
-test_invalid_value("animation-delay-end", "1s / 2s");
-test_invalid_value("animation-delay-end", "100px");
-test_invalid_value("animation-delay-end", "100%");
-
-test_invalid_value("animation-delay-end", "peek 50%");
-test_invalid_value("animation-delay-end", "50% contain");
-test_invalid_value("animation-delay-end", "50% cover");
-test_invalid_value("animation-delay-end", "50% entry");
-test_invalid_value("animation-delay-end", "50% enter");
-test_invalid_value("animation-delay-end", "50% exit");
-test_invalid_value("animation-delay-end", "contain contain");
-test_invalid_value("animation-delay-end", "auto");
-test_invalid_value("animation-delay-end", "none");
-test_invalid_value("animation-delay-end", "cover 50% enter 50%");
-test_invalid_value("animation-delay-end", "cover 100px");
-test_invalid_value("animation-delay-end", "cover");
-test_invalid_value("animation-delay-end", "contain");
-test_invalid_value("animation-delay-end", "enter");
-test_invalid_value("animation-delay-end", "exit");
-</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html
deleted file mode 100644
index 162c781bb0..0000000000
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-end-valid.tentative.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-end">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/parsing-testcommon.js"></script>
-<script>
-test_valid_value("animation-delay-end", "-5ms");
-test_valid_value("animation-delay-end", "0s");
-test_valid_value("animation-delay-end", "10s");
-test_valid_value("animation-delay-end", "20s, 10s");
-</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html
deleted file mode 100644
index 0a1eb96041..0000000000
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand-computed.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<title>animation-delay shorthand (computed values)</title>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/computed-testcommon.js"></script>
-<div id="target"></div>
-<script>
-test_computed_value("animation-delay", "1s");
-test_computed_value("animation-delay", "-1s");
-test_computed_value("animation-delay", "1s 2s");
-test_computed_value("animation-delay", "1s, 2s");
-test_computed_value("animation-delay", "1s 2s, 3s");
-test_computed_value("animation-delay", "1s, 2s 3s");
-test_computed_value("animation-delay", "1s, 2s, 3s");
-</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html
deleted file mode 100644
index 5c74a4d8e4..0000000000
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-shorthand.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<title>animation-delay shorthand</title>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/shorthand-testcommon.js"></script>
-<script src="/css/support/parsing-testcommon.js"></script>
-<script>
-test_valid_value("animation-delay", "1s");
-test_valid_value("animation-delay", "-1s");
-test_valid_value("animation-delay", "1s 2s");
-test_valid_value("animation-delay", "1s, 2s");
-test_valid_value("animation-delay", "1s 2s, 3s");
-test_valid_value("animation-delay", "1s, 2s 3s");
-test_valid_value("animation-delay", "1s, 2s, 3s");
-
-test_invalid_value("animation-delay", "1s 2s 3s");
-test_invalid_value("animation-delay", "0s, 1s 2s 3s");
-test_invalid_value("animation-delay", "1s / 2s");
-test_invalid_value("animation-delay", "1s, 2px");
-test_invalid_value("animation-delay", "#ff0000");
-test_invalid_value("animation-delay", "red");
-test_invalid_value("animation-delay", "thing");
-test_invalid_value("animation-delay", "thing 0%");
-test_invalid_value("animation-delay", "thing 42%");
-test_invalid_value("animation-delay", "thing 100%");
-test_invalid_value("animation-delay", "thing 100px");
-test_invalid_value("animation-delay", "100% thing");
-
-test_shorthand_value('animation-delay', '1s 2s', {
-  'animation-delay-start': '1s',
-  'animation-delay-end': '2s',
-});
-
-test_shorthand_value('animation-delay', '1s', {
-  'animation-delay-start': '1s',
-  'animation-delay-end': '0s',
-});
-
-test_shorthand_value('animation-delay', '1s 2s, 3s 4s', {
-  'animation-delay-start': '1s, 3s',
-  'animation-delay-end': '2s, 4s',
-});
-
-test_shorthand_value('animation-delay', '1s 2s, 3s, 4s 5s', {
-  'animation-delay-start': '1s, 3s, 4s',
-  'animation-delay-end': '2s, 0s, 5s',
-});
-</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html
deleted file mode 100644
index bfb89d0267..0000000000
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-computed.tentative.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/computed-testcommon.js"></script>
-<div id="target"></div>
-<script>
-test_computed_value("animation-delay-start", "initial", "0s");
-test_computed_value("animation-delay-start", "-500ms", "-0.5s");
-test_computed_value("animation-delay-start", "calc(2 * 3s)", "6s");
-test_computed_value("animation-delay-start", "20s, 10s");
-</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html
deleted file mode 100644
index bff31f3789..0000000000
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-invalid.tentative.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/parsing-testcommon.js"></script>
-<script>
-test_invalid_value("animation-delay-start", "infinite");
-test_invalid_value("animation-delay-start", "0");
-test_invalid_value("animation-delay-start", "1s 2s");
-test_invalid_value("animation-delay-start", "1s / 2s");
-test_invalid_value("animation-delay-start", "100px");
-test_invalid_value("animation-delay-start", "100%");
-
-test_invalid_value("animation-delay-start", "peek 50%");
-test_invalid_value("animation-delay-start", "50% contain");
-test_invalid_value("animation-delay-start", "50% cover");
-test_invalid_value("animation-delay-start", "50% entry");
-test_invalid_value("animation-delay-start", "50% enter");
-test_invalid_value("animation-delay-start", "50% exit");
-test_invalid_value("animation-delay-start", "contain contain");
-test_invalid_value("animation-delay-start", "auto");
-test_invalid_value("animation-delay-start", "none");
-test_invalid_value("animation-delay-start", "cover 50% enter 50%");
-test_invalid_value("animation-delay-start", "cover 100px");
-test_invalid_value("animation-delay-start", "cover");
-test_invalid_value("animation-delay-start", "contain");
-test_invalid_value("animation-delay-start", "enter");
-test_invalid_value("animation-delay-start", "exit");
-</script>
diff --git a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html b/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html
deleted file mode 100644
index f52286444e..0000000000
--- a/testing/web-platform/tests/css/css-animations/parsing/animation-delay-start-valid.tentative.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-delay-start">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/css/support/parsing-testcommon.js"></script>
-<script>
-test_valid_value("animation-delay-start", "-5ms");
-test_valid_value("animation-delay-start", "0s");
-test_valid_value("animation-delay-start", "10s");
-test_valid_value("animation-delay-start", "20s, 10s");
-</script>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081-print-ref.html
new file mode 100644
index 0000000000..5eb4a31173
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081-print-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: block;
+  border: 0.25in solid black;
+}
+.flexbox > div > div {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div>
+    <div>1</div><div>2</div>
+  </div>
+  <div style="break-before: page">
+    <div>3</div><div>4</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081a-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081a-print.html
new file mode 100644
index 0000000000..d773768bf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081a-print.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-before values on flex items are propagated to the flex line</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="multi-line-row-flex-fragmentation-081-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div>1</div><div>2</div>
+  <div style="break-before: page">3</div><div>4</div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081b-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081b-print.html
new file mode 100644
index 0000000000..7c4eeb2083
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081b-print.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-before values on flex items are propagated to the flex line</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="multi-line-row-flex-fragmentation-081-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div>1</div><div>2</div>
+  <div>3</div><div style="break-before: page">4</div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081c-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081c-print.html
new file mode 100644
index 0000000000..2181bc56b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081c-print.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-after values on flex items are propagated to the flex line</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="multi-line-row-flex-fragmentation-081-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div style="break-after: page">1</div><div>2</div>
+  <div>3</div><div>4</div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081d-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081d-print.html
new file mode 100644
index 0000000000..b4d9f06142
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-081d-print.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-after values on flex items are propagated to the flex line</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="multi-line-row-flex-fragmentation-081-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div>1</div><div style="break-after: page">2</div>
+  <div>3</div><div>4</div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082-print-ref.html
new file mode 100644
index 0000000000..e7314be63b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082-print-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: block;
+  border: 0.25in solid black;
+}
+.flexbox > div > div {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  box-sizing: border-box;
+  width: 100%;
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested">
+    <div>1</div><div>2</div>
+    <div>3</div><div>4</div>
+  </div>
+  <div class="flexbox nested" style="break-before: page">
+    <div>5</div><div>6</div>
+    <div>7</div><div>8</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082a-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082a-print.html
new file mode 100644
index 0000000000..18c732d242
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082a-print.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-before values on the flex item in the flex line are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="multi-line-row-flex-fragmentation-082-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  box-sizing: border-box;
+  width: 100%;
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested">
+    <div>1</div><div>2</div>
+    <div>3</div><div>4</div>
+  </div>
+  <div class="flexbox nested">
+    <div style="break-before: page">5</div><div>6</div>
+    <div>7</div><div>8</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082b-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082b-print.html
new file mode 100644
index 0000000000..6f88af6cf6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082b-print.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-before values on the flex item in the flex line are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="multi-line-row-flex-fragmentation-082-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  box-sizing: border-box;
+  width: 100%;
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested">
+    <div>1</div><div>2</div>
+    <div>3</div><div>4</div>
+  </div>
+  <div class="flexbox nested">
+    <div>5</div><div style="break-before: page">6</div>
+    <div>7</div><div>8</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082c-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082c-print.html
new file mode 100644
index 0000000000..116e8db2b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082c-print.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-after values on the flex item in the flex line are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="multi-line-row-flex-fragmentation-082-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  box-sizing: border-box;
+  width: 100%;
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested">
+    <div>1</div><div>2</div>
+    <div style="break-after: page">3</div><div>4</div>
+  </div>
+  <div class="flexbox nested">
+    <div>5</div><div>6</div>
+    <div>7</div><div>8</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082d-print.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082d-print.html
new file mode 100644
index 0000000000..e649304e7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-082d-print.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-after values on the flex item in the flex line are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="multi-line-row-flex-fragmentation-082-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  box-sizing: border-box;
+  width: 50%;
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  box-sizing: border-box;
+  width: 100%;
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested">
+    <div>1</div><div>2</div>
+    <div>3</div><div style="break-after: page">4</div>
+  </div>
+  <div class="flexbox nested">
+    <div>5</div><div>6</div>
+    <div>7</div><div>8</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083a.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083a.html
new file mode 100644
index 0000000000..efc64d5f4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083a.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-before values on flex items are propagated to the flex line</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<style>
+.multicol {
+  columns: 2;
+  column-fill: auto;
+  column-gap: 0;
+  width: 100px;
+  height: 300px;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.item {
+  background: green;
+  width: 25px;
+  height: 100px;
+}
+</style>
+
+<p>Test passes if there is a filled green square.</p>
+
+<div class="multicol">
+  <div class="flexbox">
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="flexbox" style="break-before: always; break-before: column">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083b.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083b.html
new file mode 100644
index 0000000000..9181fd5f01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083b.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-before values on the flex item in the flex line are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<style>
+.multicol {
+  columns: 2;
+  column-fill: auto;
+  column-gap: 0;
+  width: 100px;
+  height: 300px;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.item {
+  background: green;
+  width: 25px;
+  height: 100px;
+}
+</style>
+
+<p>Test passes if there is a filled green square.</p>
+
+<div class="multicol">
+  <div class="flexbox">
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="flexbox">
+      <div class="item" style="break-before: always; break-before: column"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083c.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083c.html
new file mode 100644
index 0000000000..b54571898d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083c.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-after values on flex items are propagated to the flex line</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<style>
+.multicol {
+  columns: 2;
+  column-fill: auto;
+  column-gap: 0;
+  width: 100px;
+  height: 300px;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.item {
+  background: green;
+  width: 25px;
+  height: 100px;
+}
+</style>
+
+<p>Test passes if there is a filled green square.</p>
+
+<div class="multicol">
+  <div class="flexbox">
+    <div class="flexbox" style="break-after: always; break-after: column">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083d.html b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083d.html
new file mode 100644
index 0000000000..025fd67436
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/multi-line-row-flex-fragmentation-083d.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a row flex container, the break-after values on the flex item in the flex line are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<style>
+.multicol {
+  columns: 2;
+  column-fill: auto;
+  column-gap: 0;
+  width: 100px;
+  height: 300px;
+}
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.item {
+  background: green;
+  width: 25px;
+  height: 100px;
+}
+</style>
+
+<p>Test passes if there is a filled green square.</p>
+
+<div class="multicol">
+  <div class="flexbox">
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item" style="break-after: always; break-after: column"></div>
+    </div>
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068-print-ref.html
new file mode 100644
index 0000000000..feff86edf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068-print-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: block;
+  border: 0.25in solid black;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div>1</div>
+  <div>2</div>
+  <div style="break-before: page">3</div>
+  <div>4</div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068a-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068a-print.html
new file mode 100644
index 0000000000..5eebf66432
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068a-print.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-before values on flex items are honored</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="single-line-column-flex-fragmentation-068-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+  border: 0.25in solid black;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div>1</div>
+  <div>2</div>
+  <div style="break-before: page">3</div>
+  <div>4</div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068b-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068b-print.html
new file mode 100644
index 0000000000..64a495e01c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068b-print.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-after values on flex items are honored</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="single-line-column-flex-fragmentation-068-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+  border: 0.25in solid black;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div>1</div>
+  <div style="break-after: page">2</div>
+  <div>3</div>
+  <div>4</div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068c-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068c-print.html
new file mode 100644
index 0000000000..6c004f3d19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068c-print.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column-reverse flex container, the break-before values on flex items are honored</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="single-line-column-flex-fragmentation-068-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column-reverse;
+  border: 0.25in solid black;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div>4</div>
+  <div style="break-before: page">3</div>
+  <div>2</div>
+  <div>1</div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068d-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068d-print.html
new file mode 100644
index 0000000000..7ccf5e9f3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-068d-print.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column-reverse flex container, the break-after values on flex items are honored</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="single-line-column-flex-fragmentation-068-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column-reverse;
+  border: 0.25in solid black;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div>4</div>
+  <div>3</div>
+  <div style="break-after: page">2</div>
+  <div>1</div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069-print-ref.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069-print-ref.html
new file mode 100644
index 0000000000..7f37d32454
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069-print-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: block;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested">
+    <div>1</div>
+    <div>2</div>
+  </div>
+  <div class="flexbox nested" style="break-before: page">
+    <div>3</div>
+    <div>4</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069a-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069a-print.html
new file mode 100644
index 0000000000..1d18987036
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069a-print.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-before values on flex items are honored</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="single-line-column-flex-fragmentation-069-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested">
+    <div>1</div>
+    <div>2</div>
+  </div>
+  <div class="flexbox nested" style="break-before: page">
+    <div>3</div>
+    <div>4</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069b-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069b-print.html
new file mode 100644
index 0000000000..b5312837a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069b-print.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-before values on the first item are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="single-line-column-flex-fragmentation-069-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested">
+    <div>1</div>
+    <div>2</div>
+  </div>
+  <div class="flexbox nested">
+    <div style="break-before: page">3</div>
+    <div>4</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069c-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069c-print.html
new file mode 100644
index 0000000000..76686cb481
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069c-print.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-after values on flex items are honored</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="single-line-column-flex-fragmentation-069-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested" style="break-after: page">
+    <div>1</div>
+    <div>2</div>
+  </div>
+  <div class="flexbox nested">
+    <div>3</div>
+    <div>4</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069d-print.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069d-print.html
new file mode 100644
index 0000000000..7a740c35f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-069d-print.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-after values on the first item are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="single-line-column-flex-fragmentation-069-print-ref.html">
+
+<style>
+@page { size: 5in 3in; margin: 0.5in; }
+body {
+  margin: 0;
+  font-size: 0.25in;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+  border: 0.25in solid black;
+}
+.flexbox > div {
+  border: 4px solid purple;
+}
+.flexbox > .nested {
+  border: 4px solid gold;
+}
+</style>
+
+<div>Before Flexbox</div>
+<div class="flexbox">
+  <div class="flexbox nested">
+    <div>1</div>
+    <div style="break-after: page">2</div>
+  </div>
+  <div class="flexbox nested">
+    <div>3</div>
+    <div>4</div>
+  </div>
+</div>
+<div>After Flexbox</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070a.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070a.html
new file mode 100644
index 0000000000..aa9af6a290
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070a.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-before values on flex items are honored</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<style>
+.multicol {
+  columns: 2;
+  column-fill: auto;
+  column-gap: 0;
+  width: 100px;
+  height: 300px;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+}
+.item {
+  background: green;
+  height: 50px;
+}
+</style>
+
+<p>Test passes if there is a filled green square.</p>
+
+<div class="multicol">
+  <div class="flexbox">
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="flexbox" style="break-before: always; break-before: column">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070b.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070b.html
new file mode 100644
index 0000000000..45a91d96cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070b.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-before values on the first item are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<style>
+.multicol {
+  columns: 2;
+  column-fill: auto;
+  column-gap: 0;
+  width: 100px;
+  height: 300px;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+}
+.item {
+  background: green;
+  height: 50px;
+}
+</style>
+
+<p>Test passes if there is a filled green square.</p>
+
+<div class="multicol">
+  <div class="flexbox">
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="flexbox">
+      <div class="item" style="break-before: always; break-before: column"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070c.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070c.html
new file mode 100644
index 0000000000..149ff6667c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070c.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-after values on flex items are honored</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<style>
+.multicol {
+  columns: 2;
+  column-fill: auto;
+  column-gap: 0;
+  width: 100px;
+  height: 300px;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+}
+.item {
+  background: green;
+  height: 50px;
+}
+</style>
+
+<p>Test passes if there is a filled green square.</p>
+
+<div class="multicol">
+  <div class="flexbox">
+    <div class="flexbox" style="break-after: always; break-after: column">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070d.html b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070d.html
new file mode 100644
index 0000000000..2265e71df6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-break/flexbox/single-line-column-flex-fragmentation-070d.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test that in a column flex container, the break-after values on the first item are propagated to the flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1890238">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+
+<style>
+.multicol {
+  columns: 2;
+  column-fill: auto;
+  column-gap: 0;
+  width: 100px;
+  height: 300px;
+}
+.flexbox {
+  display: flex;
+  flex-direction: column;
+}
+.item {
+  background: green;
+  height: 50px;
+}
+</style>
+
+<p>Test passes if there is a filled green square.</p>
+
+<div class="multicol">
+  <div class="flexbox">
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item" style="break-after: always; break-after: column"></div>
+    </div>
+    <div class="flexbox">
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-break/ruby-002.html b/testing/web-platform/tests/css/css-break/ruby-002.html
index d17cc563f3..2c4f6aae5b 100644
--- a/testing/web-platform/tests/css/css-break/ruby-002.html
+++ b/testing/web-platform/tests/css/css-break/ruby-002.html
@@ -30,15 +30,13 @@
 <div style="position:relative; width:100px; height:100px; background:red;">
   <div style="columns:2; column-fill:auto; column-gap:0; height:175px; orphans:1; widows:1;">
     <ruby>
-      <div class="main"></div><rt><div class="annotation"></div></rt>
-    </ruby><ruby class="under">
-      <div class="main"></div><rt><div class="annotation"></div></rt>
+      <div class="main"></div><rt><div class="annotation"></div></rt></ruby
+    ><ruby class="under"><div class="main"></div><rt><div class="annotation"></div></rt>
     </ruby>
     <br>
     <ruby>
-      <div class="main"></div><rt><div class="annotation"></div></rt>
-    </ruby><ruby class="under">
-      <div class="main"></div><rt><div class="annotation"></div></rt>
+      <div class="main"></div><rt><div class="annotation"></div></rt></ruby
+    ><ruby class="under"><div class="main"></div><rt><div class="annotation"></div></rt>
     </ruby>
     <br>
   </div>
diff --git a/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml
index 38aaee3021..5d0f726ab5 100644
--- a/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml
+++ b/testing/web-platform/tests/css/css-cascade/WEB_FEATURES.yml
@@ -2,3 +2,7 @@ features:
 - name: cascade-layers
   files:
   - layer-*
+- name: scope
+  files:
+  - at-scope-*
+  - scope-*
diff --git a/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html b/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html
index 868267b285..3a1d621d17 100644
--- a/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html
+++ b/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html
@@ -15,8 +15,6 @@
   alt: "a";
   animation-composition: add;
   animation-delay: 123s;
-  animation-delay-start: 123s;
-  animation-delay-end: 456s;
   animation-direction: reverse;
   animation-duration: 123s;
   animation-fill-mode: both;
diff --git a/testing/web-platform/tests/css/css-cascade/scope-pseudo-element-ref.html b/testing/web-platform/tests/css/css-cascade/scope-pseudo-element-ref.html
new file mode 100644
index 0000000000..2ad6a0995a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-cascade/scope-pseudo-element-ref.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<title>@scope - pseudo-elements (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#link">
+
+<!-- Cosmetic -->
+<style>
+  body > div {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    vertical-align:top;
+  }
+</style>
+
+<!-- ::before -->
+<style>
+  #before_test > main {
+    background-color: skyblue;
+  }
+  #before_test > main::before {
+    content: "B";
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    background-color: tomato;
+  }
+</style>
+<div id=before_test>
+  <main>
+    Foo
+  </main>
+</div>
+
+<!-- ::after -->
+<style>
+  #after_test > main {
+    background-color: skyblue;
+  }
+  #after_test > main::after {
+    content: "A";
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    background-color: tomato;
+  }
+</style>
+<div id=after_test>
+  <main>
+    Foo
+  </main>
+</div>
+
+<!-- ::marker -->
+<style>
+  #marker_test li {
+    background-color: skyblue;
+  }
+  #marker_test li::marker {
+    content: "M";
+  }
+</style>
+<div id=marker_test>
+  <ul>
+    <li>One</li>
+    <li>Two</li>
+  </ul>
+</div>
diff --git a/testing/web-platform/tests/css/css-cascade/scope-pseudo-element.html b/testing/web-platform/tests/css/css-cascade/scope-pseudo-element.html
new file mode 100644
index 0000000000..29c4469060
--- /dev/null
+++ b/testing/web-platform/tests/css/css-cascade/scope-pseudo-element.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<title>@scope - pseudo-elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#link">
+<link rel="match" href="scope-pseudo-element-ref.html">
+
+<!-- Cosmetic -->
+<style>
+  body > div {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    vertical-align:top;
+  }
+</style>
+
+<!-- ::before -->
+<style>
+  @scope (#before_test > main) {
+    :scope {
+      background-color: skyblue;
+    }
+    :scope::before {
+      content: "B";
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      background-color: tomato;
+    }
+  }
+</style>
+<div id=before_test>
+  <main>
+    Foo
+  </main>
+</div>
+
+<!-- ::after -->
+<style>
+  @scope (#after_test > main) {
+    :scope {
+      background-color: skyblue;
+    }
+    :scope::after {
+      content: "A";
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      background-color: tomato;
+    }
+  }
+</style>
+<div id=after_test>
+  <main>
+    Foo
+  </main>
+</div>
+
+<!-- ::marker -->
+<style>
+  @scope (#marker_test li) {
+    :scope {
+      background-color: skyblue;
+    }
+    :scope::marker {
+      content: "M";
+    }
+  }
+</style>
+<div id=marker_test>
+  <ul>
+    <li>One</li>
+    <li>Two</li>
+  </ul>
+</div>
diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/WEB_FEATURES.yml
new file mode 100644
index 0000000000..48bbe25901
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: color-scheme
+  files: "**"
diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank.tentative.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank.tentative.html
index a5a9843ac8..f9ab24fdc1 100644
--- a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank.tentative.html
+++ b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/color-scheme-iframe-background-about-blank.tentative.html
@@ -8,6 +8,3 @@
 </style>
 <p>Should not see a white frame below</p>
 <iframe width="600" height="400"></iframe>
-<script>
-  document.querySelector("iframe").contentWindow.stop();
-</script>
diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme.svg b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme.svg
deleted file mode 100644
index 3afcac70fe..0000000000
--- a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width='100px' height='100px'>
-  <style>
-    @media (prefers-color-scheme: dark) {
-      rect {
-        fill: green;
-      }
-    }
-  </style>
-  <rect fill='blue' width='100px' height='100px' />
-</svg>
diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image.html b/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image.html
deleted file mode 100644
index 6fc33f56ce..0000000000
--- a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<!doctype html>
-<head>
-  <title>prefers-color-scheme inside an SVG image</title>
-  <link rel="help" href="https://www.w3.org/TR/mediaqueries-5/#descdef-media-prefers-color-scheme">
-  <link rel="match" href="svg-as-image-ref.html">
-</head>
-<p>There should be green square below when the preferred color-scheme is dark, and blue otherwise.</p>
-<img src='support/prefers-color-scheme.svg'>
diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b-ref.html b/testing/web-platform/tests/css/css-color/hsl-clamp-negative-saturation-ref.html
index 7d1f1bf278..33a82517ae 100644
--- a/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b-ref.html
+++ b/testing/web-platform/tests/css/css-color/hsl-clamp-negative-saturation-ref.html
@@ -7,8 +7,6 @@
   td { border: none; padding: 0; height: 1.2em; }
 </style>
 <body>
-  <p><strong>WARNING: This test assumes that the device gamut is sRGB
-  (as it will be for many CRT monitors).</strong></p>
   <p>Every row in this table should have both columns the same color:</p>
   <table>
     <tr>
@@ -16,21 +14,6 @@
       <th style="background:black; color: white">Column 2</th>
     </tr>
     <tr>
-      <td colspan='2' style="background: black">&nbsp;</td>
-    </tr>
-    <tr>
-      <td colspan='2' style="background: black">&nbsp;</td>
-    </tr>
-    <tr>
-      <td colspan='2' style="background: white">&nbsp;</td>
-    </tr>
-    <tr>
-      <td colspan='2' style="background: rgb(0, 0, 255)">&nbsp;</td>
-    </tr>
-    <tr>
-      <td colspan='2' style="background: rgb(102, 0, 255)">&nbsp;</td>
-    </tr>
-    <tr>
       <td colspan='2' style="background: rgb(102, 102, 102)">&nbsp;</td>
     </tr>
     <tr>
diff --git a/testing/web-platform/tests/css/css-color/hsl-clamp-negative-saturation.html b/testing/web-platform/tests/css/css-color/hsl-clamp-negative-saturation.html
new file mode 100644
index 0000000000..25b54c2e2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/hsl-clamp-negative-saturation.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>CSS Test: hsl() clamp negative saturation values</title>
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+		<link rel="help" href="https://www.w3.org/TR/css-color-4/#the-hsl-notation" />
+		<link rel="match" href="hsl-clamp-negative-saturation-ref.html" />
+		<meta name="assert" content="Test clamping of negative saturation values in hsl() functions." />
+		<style type="text/css">
+
+		table { border-spacing: 0 2px; padding: 0; border: none; }
+		td { border: none; padding: 0; height: 1.2em; }
+
+		</style>
+	</head>
+	<body>
+
+	<p>Every row in this table should have both columns the same color:</p>
+
+	<table>
+		<tr>
+			<th style="background:white; color: black">Column 1</th>
+			<th style="background:black; color: white">Column 2</th>
+		</tr>
+		<tr>
+			<td style="background: hsl(0, -50%, 40%)">&nbsp;</td>
+			<td style="background: rgb(102, 102, 102)">&nbsp;</td>
+		</tr>
+		<tr>
+			<td style="background: hsl(30, -50%, 60%)">&nbsp;</td>
+			<td style="background: rgb(153, 153, 153)">&nbsp;</td>
+		</tr>
+	</table>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b-ref.html b/testing/web-platform/tests/css/css-color/hsla-clamp-negative-saturation-ref.html
index d35a608fb5..bbf5c3b037 100644
--- a/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b-ref.html
+++ b/testing/web-platform/tests/css/css-color/hsla-clamp-negative-saturation-ref.html
@@ -8,8 +8,6 @@
   td { border: none; padding: 0; height: 1.2em; }
 </style>
 <body>
-  <p><strong>WARNING: This test assumes that the device gamut is sRGB
-  (as it will be for many CRT monitors).</strong></p>
   <p>Every row in this table should have both columns the same color:</p>
   <table>
     <tr>
@@ -17,21 +15,6 @@
       <th style="background:black; color: white">Column 2</th>
     </tr>
     <tr>
-      <td colspan='2' style="background: rgb(102, 102, 102)">&nbsp;</td>
-    </tr>
-    <tr>
-      <td colspan='2' style="background: rgb(153, 153, 153)">&nbsp;</td>
-    </tr>
-    <tr>
-      <td colspan='2' style="background: white">&nbsp;</td>
-    </tr>
-    <tr>
-      <td colspan='2' style="background: rgb(153, 153, 255)">&nbsp;</td>
-    </tr>
-    <tr>
-      <td colspan='2' style="background: rgb(163, 102, 255)">&nbsp;</td>
-    </tr>
-    <tr>
       <td colspan='2' style="background: rgb(194, 194, 194)">&nbsp;</td>
     </tr>
     <tr>
diff --git a/testing/web-platform/tests/css/css-color/hsla-clamp-negative-saturation.html b/testing/web-platform/tests/css/css-color/hsla-clamp-negative-saturation.html
new file mode 100644
index 0000000000..239151efe3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/hsla-clamp-negative-saturation.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>CSS Test: hsla()  clamp negative saturation values</title>
+		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
+		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+		<link rel="help" href="https://www.w3.org/TR/css-color-4/#the-hsl-notation" />
+		<link rel="match" href="hsla-clamp-negative-saturation-ref.html" />
+		<meta name="assert" content="Test clamping of negative saturation values in hsla() functions." />
+		<style type="text/css">
+
+		body { background: white; color: black; }
+		table { border-spacing: 0 2px; padding: 0; border: none; }
+		td { border: none; padding: 0; height: 1.2em; }
+
+		</style>
+	</head>
+	<body>
+
+	<p>Every row in this table should have both columns the same color:</p>
+
+	<table>
+		<tr>
+			<th style="background:white; color: black">Column 1</th>
+			<th style="background:black; color: white">Column 2</th>
+		</tr>
+		<tr>
+			<td style="background: hsla(0, -50%, 40%, 0.4)">&nbsp;</td>
+			<td style="background: rgb(194, 194, 194)">&nbsp;</td>
+		</tr>
+		<tr>
+			<td style="background: hsla(30, -50%, 60%, 0.6)">&nbsp;</td>
+			<td style="background: rgb(194, 194, 194)">&nbsp;</td>
+		</tr>
+	</table>
+
+	</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html
index cd1f381a1a..baa6512053 100644
--- a/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html
+++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html
@@ -11,409 +11,410 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/color-testcommon.js"></script>
 </head>
 <body>
 <div id="target"></div>
 <script>
     // https://github.com/w3c/csswg-drafts/issues/7302: Specified values shouldn't resolve keyword colors or calc values
-    test_valid_value(`color`, `color-mix(in srgb, red, blue)`, `color-mix(in srgb, red, blue)`);
-    test_valid_value(`color`, `color-mix(in srgb, 70% red, 50% blue)`, `color-mix(in srgb, red 70%, blue 50%)`);
-    test_valid_value(`color`, `color-mix(in hsl, red, blue)`, `color-mix(in hsl, red, blue)`);
-    test_valid_value(`color`, `color-mix(in hsl, red calc(20%), blue)`, `color-mix(in hsl, red calc(20%), blue)`);
-    test_valid_value(`color`, `color-mix(in hsl, red calc(var(--v)*1%), blue)`, `color-mix(in hsl, red calc(var(--v)*1%), blue)`);
-    test_valid_value(`color`, `color-mix(in hsl, currentcolor, blue)`, `color-mix(in hsl, currentcolor, blue)`);
-    test_valid_value(`color`, `color-mix(in hsl, red 60%, blue 40%)`, `color-mix(in hsl, red 60%, blue)`);
-    test_valid_value(`color`, `color-mix(in hsl, red 50%, blue)`, `color-mix(in hsl, red, blue)`);
-    test_valid_value(`color`, `color-mix(in hsl, red, blue 50%)`, `color-mix(in hsl, red, blue)`);
-    test_valid_value(`color`, `color-mix(in lch decreasing hue, red, hsl(120, 100%, 50%))`, `color-mix(in lch decreasing hue, red, rgb(0, 255, 0))`);
-
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`);
-    test_valid_value(`color`, `color-mix(in hsl, 50% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%), 50% hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`);
-    test_valid_value(`color`, `color-mix(in hsl, 25% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%), 25% hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 75%, rgb(133, 102, 71))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%) 25%)`, `color-mix(in hsl, rgb(46, 56, 46) 75%, rgb(133, 102, 71))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%) 75%)`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 30%, hsl(30deg 30% 40%) 90%)`, `color-mix(in hsl, rgb(46, 56, 46) 30%, rgb(133, 102, 71) 90%)`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)`, `color-mix(in hsl, rgb(46, 56, 46) 12.5%, rgb(133, 102, 71) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 0%, rgb(133, 102, 71))`);
-
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4), rgba(133, 102, 71, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgba(133, 102, 71, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hsl, 25% hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 25%, rgba(133, 102, 71, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4), 25% hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 75%, rgba(133, 102, 71, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8) 25%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 75%, rgba(133, 102, 71, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4) 25%, hsl(30deg 30% 40% / .8) 75%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 25%, rgba(133, 102, 71, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4) 30%, hsl(30deg 30% 40% / .8) 90%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 30%, rgba(133, 102, 71, 0.8) 90%)`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4) 12.5%, hsl(30deg 30% 40% / .8) 37.5%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 12.5%, rgba(133, 102, 71, 0.8) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4) 0%, hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 0%, rgba(133, 102, 71, 0.8))`);
-
-    test_valid_value(`color`, `color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl, rgb(191, 149, 64), rgb(191, 191, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl, rgb(191, 191, 64), rgb(191, 149, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl, rgb(191, 170, 64), rgb(191, 64, 128))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 128), rgb(191, 170, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl, rgb(191, 106, 64), rgb(191, 64, 149))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 149), rgb(191, 106, 64))`);
-
-    test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl, rgb(191, 149, 64), rgb(191, 191, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl, rgb(191, 191, 64), rgb(191, 149, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl, rgb(191, 170, 64), rgb(191, 64, 128))`);
-    test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 128), rgb(191, 170, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl, rgb(191, 106, 64), rgb(191, 64, 149))`);
-    test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 149), rgb(191, 106, 64))`);
-
-    test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 149, 64), rgb(191, 191, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 191, 64), rgb(191, 149, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 170, 64), rgb(191, 64, 128))`);
-    test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 64, 128), rgb(191, 170, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 106, 64), rgb(191, 64, 149))`);
-    test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 64, 149), rgb(191, 106, 64))`);
-
-    test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 149, 64), rgb(191, 191, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 191, 64), rgb(191, 149, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 170, 64), rgb(191, 64, 128))`);
-    test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 64, 128), rgb(191, 170, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 106, 64), rgb(191, 64, 149))`);
-    test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 64, 149), rgb(191, 106, 64))`);
-
-    test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 149, 64), rgb(191, 191, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 191, 64), rgb(191, 149, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 170, 64), rgb(191, 64, 128))`);
-    test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 64, 128), rgb(191, 170, 64))`);
-    test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 106, 64), rgb(191, 64, 149))`);
-    test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 64, 149), rgb(191, 106, 64))`);
-
-    test_valid_value(`color`, `color-mix(in hsl, hsl(none none none), hsl(none none none))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(none none none), hsl(30deg 40% 80%))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(224, 204, 184))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 20% 40%), hsl(none none none))`, `color-mix(in hsl, rgb(82, 122, 82), rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 20% none), hsl(30deg 40% 60%))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(194, 153, 112))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 20% 40%), hsl(30deg 20% none))`, `color-mix(in hsl, rgb(82, 122, 82), rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))`, `color-mix(in hsl, rgb(122, 82, 82), rgb(204, 204, 204))`);
-
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgb(143, 61, 61))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0.5))`);
-    test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / none))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0))`);
-
-    test_valid_value(`color`, `color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0))`);
-
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, 50% hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), 50% hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, 25% hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%) 25%)`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%) 75%)`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 30%, hwb(30deg 30% 40%) 90%)`, `color-mix(in hwb, rgb(26, 204, 26) 30%, rgb(153, 115, 77) 90%)`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)`, `color-mix(in hwb, rgb(26, 204, 26) 12.5%, rgb(153, 115, 77) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 0%, rgb(153, 115, 77))`);
-
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4), rgba(153, 115, 77, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hwb, 25% hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgba(153, 115, 77, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8) 25%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 75%, rgba(153, 115, 77, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8) 75%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 30%, hwb(30deg 30% 40% / .8) 90%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 30%, rgba(153, 115, 77, 0.8) 90%)`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 12.5%, hwb(30deg 30% 40% / .8) 37.5%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 12.5%, rgba(153, 115, 77, 0.8) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 0%, hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 0%, rgba(153, 115, 77, 0.8))`);
-
-    test_valid_value(`color`, `color-mix(in hwb, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb, rgb(153, 128, 77), rgb(153, 153, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb, rgb(153, 153, 77), rgb(153, 128, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb, rgb(153, 140, 77), rgb(153, 77, 115))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 115), rgb(153, 140, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb, rgb(153, 102, 77), rgb(153, 77, 128))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 128), rgb(153, 102, 77))`);
-
-    test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb, rgb(153, 128, 77), rgb(153, 153, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb, rgb(153, 153, 77), rgb(153, 128, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb, rgb(153, 140, 77), rgb(153, 77, 115))`);
-    test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 115), rgb(153, 140, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb, rgb(153, 102, 77), rgb(153, 77, 128))`);
-    test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 128), rgb(153, 102, 77))`);
-
-    test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 128, 77), rgb(153, 153, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 153, 77), rgb(153, 128, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 140, 77), rgb(153, 77, 115))`);
-    test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 77, 115), rgb(153, 140, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 102, 77), rgb(153, 77, 128))`);
-    test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 77, 128), rgb(153, 102, 77))`);
-
-    test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 128, 77), rgb(153, 153, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 153, 77), rgb(153, 128, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 140, 77), rgb(153, 77, 115))`);
-    test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 77, 115), rgb(153, 140, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 102, 77), rgb(153, 77, 128))`);
-    test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 77, 128), rgb(153, 102, 77))`);
-
-    test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 128, 77), rgb(153, 153, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 153, 77), rgb(153, 128, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 140, 77), rgb(153, 77, 115))`);
-    test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 77, 115), rgb(153, 140, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 102, 77), rgb(153, 77, 128))`);
-    test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 77, 128), rgb(153, 102, 77))`);
-
-    test_valid_value(`color`, `color-mix(in hwb, hwb(none none none), hwb(none none none))`, `color-mix(in hwb, rgb(255, 0, 0), rgb(255, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(none none none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(255, 0, 0), rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), hwb(none none none))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(255, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 255, 26), rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% none))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(255, 166, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(none 10% 20%), hwb(30deg none 40%))`, `color-mix(in hwb, rgb(204, 26, 26), rgb(153, 77, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgb(153, 115, 77))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / 0.5))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgba(153, 115, 77, 0.5))`);
-    test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / none))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgba(153, 115, 77, 0))`);
-
-    test_valid_value(`color`, `color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
-    test_valid_value(`color`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in srgb, red, blue)`, `color-mix(in srgb, red, blue)`);
+    fuzzy_test_valid_color(`color-mix(in srgb, 70% red, 50% blue)`, `color-mix(in srgb, red 70%, blue 50%)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, red, blue)`, `color-mix(in hsl, red, blue)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, red calc(20%), blue)`, `color-mix(in hsl, red calc(20%), blue)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, red calc(var(--v)*1%), blue)`, `color-mix(in hsl, red calc(var(--v)*1%), blue)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, currentcolor, blue)`, `color-mix(in hsl, currentcolor, blue)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, red 60%, blue 40%)`, `color-mix(in hsl, red 60%, blue)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, red 50%, blue)`, `color-mix(in hsl, red, blue)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, red, blue 50%)`, `color-mix(in hsl, red, blue)`);
+    fuzzy_test_valid_color(`color-mix(in lch decreasing hue, red, hsl(120, 100%, 50%))`, `color-mix(in lch decreasing hue, red, rgb(0, 255, 0))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, 50% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%), 50% hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, 25% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%), 25% hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 75%, rgb(133, 102, 71))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%) 25%)`, `color-mix(in hsl, rgb(46, 56, 46) 75%, rgb(133, 102, 71))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%) 75%)`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 30%, hsl(30deg 30% 40%) 90%)`, `color-mix(in hsl, rgb(46, 56, 46) 30%, rgb(133, 102, 71) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)`, `color-mix(in hsl, rgb(46, 56, 46) 12.5%, rgb(133, 102, 71) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 0%, rgb(133, 102, 71))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4), rgba(133, 102, 71, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgba(133, 102, 71, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, 25% hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 25%, rgba(133, 102, 71, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4), 25% hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 75%, rgba(133, 102, 71, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8) 25%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 75%, rgba(133, 102, 71, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 25%, hsl(30deg 30% 40% / .8) 75%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 25%, rgba(133, 102, 71, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 30%, hsl(30deg 30% 40% / .8) 90%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 30%, rgba(133, 102, 71, 0.8) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 12.5%, hsl(30deg 30% 40% / .8) 37.5%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 12.5%, rgba(133, 102, 71, 0.8) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 0%, hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 0%, rgba(133, 102, 71, 0.8))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl, rgb(191, 149, 64), rgb(191, 191, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl, rgb(191, 191, 64), rgb(191, 149, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl, rgb(191, 170, 64), rgb(191, 64, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 128), rgb(191, 170, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl, rgb(191, 106, 64), rgb(191, 64, 149))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 149), rgb(191, 106, 64))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl, rgb(191, 149, 64), rgb(191, 191, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl, rgb(191, 191, 64), rgb(191, 149, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl, rgb(191, 170, 64), rgb(191, 64, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 128), rgb(191, 170, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl, rgb(191, 106, 64), rgb(191, 64, 149))`);
+    fuzzy_test_valid_color(`color-mix(in hsl shorter hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 149), rgb(191, 106, 64))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 149, 64), rgb(191, 191, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 191, 64), rgb(191, 149, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 170, 64), rgb(191, 64, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 64, 128), rgb(191, 170, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 106, 64), rgb(191, 64, 149))`);
+    fuzzy_test_valid_color(`color-mix(in hsl longer hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 64, 149), rgb(191, 106, 64))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 149, 64), rgb(191, 191, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 191, 64), rgb(191, 149, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 170, 64), rgb(191, 64, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 64, 128), rgb(191, 170, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 106, 64), rgb(191, 64, 149))`);
+    fuzzy_test_valid_color(`color-mix(in hsl increasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 64, 149), rgb(191, 106, 64))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 149, 64), rgb(191, 191, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 191, 64), rgb(191, 149, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 170, 64), rgb(191, 64, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 64, 128), rgb(191, 170, 64))`);
+    fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 106, 64), rgb(191, 64, 149))`);
+    fuzzy_test_valid_color(`color-mix(in hsl decreasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 64, 149), rgb(191, 106, 64))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(none none none), hsl(none none none))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(none none none), hsl(30deg 40% 80%))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(224, 204, 184))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 20% 40%), hsl(none none none))`, `color-mix(in hsl, rgb(82, 122, 82), rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 20% none), hsl(30deg 40% 60%))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(194, 153, 112))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 20% 40%), hsl(30deg 20% none))`, `color-mix(in hsl, rgb(82, 122, 82), rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))`, `color-mix(in hsl, rgb(122, 82, 82), rgb(204, 204, 204))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgb(143, 61, 61))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0.5))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / none))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0))`);
+
+    fuzzy_test_valid_color(`color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0))`);
+
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, 50% hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), 50% hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, 25% hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%) 25%)`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%) 75%)`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 30%, hwb(30deg 30% 40%) 90%)`, `color-mix(in hwb, rgb(26, 204, 26) 30%, rgb(153, 115, 77) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)`, `color-mix(in hwb, rgb(26, 204, 26) 12.5%, rgb(153, 115, 77) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 0%, rgb(153, 115, 77))`);
+
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4), rgba(153, 115, 77, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, 25% hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgba(153, 115, 77, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8) 25%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 75%, rgba(153, 115, 77, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8) 75%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 30%, hwb(30deg 30% 40% / .8) 90%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 30%, rgba(153, 115, 77, 0.8) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 12.5%, hwb(30deg 30% 40% / .8) 37.5%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 12.5%, rgba(153, 115, 77, 0.8) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 0%, hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 0%, rgba(153, 115, 77, 0.8))`);
+
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb, rgb(153, 128, 77), rgb(153, 153, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb, rgb(153, 153, 77), rgb(153, 128, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb, rgb(153, 140, 77), rgb(153, 77, 115))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 115), rgb(153, 140, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb, rgb(153, 102, 77), rgb(153, 77, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 128), rgb(153, 102, 77))`);
+
+    fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb, rgb(153, 128, 77), rgb(153, 153, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb, rgb(153, 153, 77), rgb(153, 128, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb, rgb(153, 140, 77), rgb(153, 77, 115))`);
+    fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 115), rgb(153, 140, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb, rgb(153, 102, 77), rgb(153, 77, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hwb shorter hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 128), rgb(153, 102, 77))`);
+
+    fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 128, 77), rgb(153, 153, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 153, 77), rgb(153, 128, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 140, 77), rgb(153, 77, 115))`);
+    fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 77, 115), rgb(153, 140, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 102, 77), rgb(153, 77, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hwb longer hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 77, 128), rgb(153, 102, 77))`);
+
+    fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 128, 77), rgb(153, 153, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 153, 77), rgb(153, 128, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 140, 77), rgb(153, 77, 115))`);
+    fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 77, 115), rgb(153, 140, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 102, 77), rgb(153, 77, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hwb increasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 77, 128), rgb(153, 102, 77))`);
+
+    fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 128, 77), rgb(153, 153, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 153, 77), rgb(153, 128, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 140, 77), rgb(153, 77, 115))`);
+    fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 77, 115), rgb(153, 140, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 102, 77), rgb(153, 77, 128))`);
+    fuzzy_test_valid_color(`color-mix(in hwb decreasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 77, 128), rgb(153, 102, 77))`);
+
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(none none none), hwb(none none none))`, `color-mix(in hwb, rgb(255, 0, 0), rgb(255, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(none none none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(255, 0, 0), rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(none none none))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(255, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 255, 26), rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% none))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(255, 166, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(none 10% 20%), hwb(30deg none 40%))`, `color-mix(in hwb, rgb(204, 26, 26), rgb(153, 77, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgb(153, 115, 77))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / 0.5))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgba(153, 115, 77, 0.5))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / none))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgba(153, 115, 77, 0))`);
+
+    fuzzy_test_valid_color(`color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`);
+    fuzzy_test_valid_color(`color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`);
 
     // lch()
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30), lch(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lch, 25% lch(10 20 30deg), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), 25% lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 75%, lch(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg) 25%)`, `color-mix(in lch, lch(10 20 30) 75%, lch(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg) 75%)`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 30%, lch(50 60 70deg) 90%)`, `color-mix(in lch, lch(10 20 30) 30%, lch(50 60 70) 90%)`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 12.5%, lch(50 60 70deg) 37.5%)`, `color-mix(in lch, lch(10 20 30) 12.5%, lch(50 60 70) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 0%, lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 0%, lch(50 60 70))`);
-
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4), lch(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lch, 25% lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4), 25% lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 75%, lch(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8) 25%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 75%, lch(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8) 75%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 30%, lch(50 60 70deg / .8) 90%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 30%, lch(50 60 70 / 0.8) 90%)`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 12.5%, lch(50 60 70deg / .8) 37.5%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 12.5%, lch(50 60 70 / 0.8) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 0%, lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 0%, lch(50 60 70 / 0.8))`);
-
-    test_valid_value(`color`, `color-mix(in lch, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch, lch(100 0 40), lch(100 0 60))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch, lch(100 0 60), lch(100 0 40))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch, lch(100 0 50), lch(100 0 330))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch, lch(100 0 330), lch(100 0 50))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch, lch(100 0 20), lch(100 0 320))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch, lch(100 0 320), lch(100 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch, lch(100 0 40), lch(100 0 60))`);
-    test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch, lch(100 0 60), lch(100 0 40))`);
-    test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch, lch(100 0 50), lch(100 0 330))`);
-    test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch, lch(100 0 330), lch(100 0 50))`);
-    test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch, lch(100 0 20), lch(100 0 320))`);
-    test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch, lch(100 0 320), lch(100 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch longer hue, lch(100 0 40), lch(100 0 60))`);
-    test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch longer hue, lch(100 0 60), lch(100 0 40))`);
-    test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch longer hue, lch(100 0 50), lch(100 0 330))`);
-    test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch longer hue, lch(100 0 330), lch(100 0 50))`);
-    test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch longer hue, lch(100 0 20), lch(100 0 320))`);
-    test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch longer hue, lch(100 0 320), lch(100 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch increasing hue, lch(100 0 40), lch(100 0 60))`);
-    test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch increasing hue, lch(100 0 60), lch(100 0 40))`);
-    test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch increasing hue, lch(100 0 50), lch(100 0 330))`);
-    test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch increasing hue, lch(100 0 330), lch(100 0 50))`);
-    test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch increasing hue, lch(100 0 20), lch(100 0 320))`);
-    test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch increasing hue, lch(100 0 320), lch(100 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch decreasing hue, lch(100 0 40), lch(100 0 60))`);
-    test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch decreasing hue, lch(100 0 60), lch(100 0 40))`);
-    test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch decreasing hue, lch(100 0 50), lch(100 0 330))`);
-    test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch decreasing hue, lch(100 0 330), lch(100 0 50))`);
-    test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch decreasing hue, lch(100 0 20), lch(100 0 320))`);
-    test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch decreasing hue, lch(100 0 320), lch(100 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in lch, lch(none none none), lch(none none none))`, `color-mix(in lch, lch(none none none), lch(none none none))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(none none none), lch(50 60 70deg))`, `color-mix(in lch, lch(none none none), lch(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), lch(none none none))`, `color-mix(in lch, lch(10 20 30), lch(none none none))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 none), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 none), lch(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), lch(50 60 none))`, `color-mix(in lch, lch(10 20 30), lch(50 60 none))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))`, `color-mix(in lch, lch(none 20 30), lch(50 none 70))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / 0.5))`);
-    test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / none))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30), lch(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, 25% lch(10 20 30deg), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), 25% lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 75%, lch(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg) 25%)`, `color-mix(in lch, lch(10 20 30) 75%, lch(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg) 75%)`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 30%, lch(50 60 70deg) 90%)`, `color-mix(in lch, lch(10 20 30) 30%, lch(50 60 70) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 12.5%, lch(50 60 70deg) 37.5%)`, `color-mix(in lch, lch(10 20 30) 12.5%, lch(50 60 70) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg) 0%, lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 0%, lch(50 60 70))`);
+
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4), lch(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lch, 25% lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4), 25% lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 75%, lch(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8) 25%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 75%, lch(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8) 75%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 30%, lch(50 60 70deg / .8) 90%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 30%, lch(50 60 70 / 0.8) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 12.5%, lch(50 60 70deg / .8) 37.5%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 12.5%, lch(50 60 70 / 0.8) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / .4) 0%, lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 0%, lch(50 60 70 / 0.8))`);
+
+    fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch, lch(100 0 40), lch(100 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch, lch(100 0 60), lch(100 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch, lch(100 0 50), lch(100 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch, lch(100 0 330), lch(100 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch, lch(100 0 20), lch(100 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch, lch(100 0 320), lch(100 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch, lch(100 0 40), lch(100 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch, lch(100 0 60), lch(100 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch, lch(100 0 50), lch(100 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch, lch(100 0 330), lch(100 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch, lch(100 0 20), lch(100 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in lch shorter hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch, lch(100 0 320), lch(100 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch longer hue, lch(100 0 40), lch(100 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch longer hue, lch(100 0 60), lch(100 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch longer hue, lch(100 0 50), lch(100 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch longer hue, lch(100 0 330), lch(100 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch longer hue, lch(100 0 20), lch(100 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in lch longer hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch longer hue, lch(100 0 320), lch(100 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch increasing hue, lch(100 0 40), lch(100 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch increasing hue, lch(100 0 60), lch(100 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch increasing hue, lch(100 0 50), lch(100 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch increasing hue, lch(100 0 330), lch(100 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch increasing hue, lch(100 0 20), lch(100 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in lch increasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch increasing hue, lch(100 0 320), lch(100 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch decreasing hue, lch(100 0 40), lch(100 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch decreasing hue, lch(100 0 60), lch(100 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch decreasing hue, lch(100 0 50), lch(100 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch decreasing hue, lch(100 0 330), lch(100 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch decreasing hue, lch(100 0 20), lch(100 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in lch decreasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch decreasing hue, lch(100 0 320), lch(100 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in lch, lch(none none none), lch(none none none))`, `color-mix(in lch, lch(none none none), lch(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(none none none), lch(50 60 70deg))`, `color-mix(in lch, lch(none none none), lch(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), lch(none none none))`, `color-mix(in lch, lch(10 20 30), lch(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 none), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 none), lch(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 none))`, `color-mix(in lch, lch(10 20 30), lch(50 60 none))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))`, `color-mix(in lch, lch(none 20 30), lch(50 none 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / 0.5))`);
+    fuzzy_test_valid_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / none))`);
 
     // oklch()
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(0.5 0.6 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, 25% oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), 25% oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 75%, oklch(0.5 0.6 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg) 25%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 75%, oklch(0.5 0.6 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg) 75%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 30%, oklch(0.5 0.6 70deg) 90%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 30%, oklch(0.5 0.6 70) 90%)`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 12.5%, oklch(0.5 0.6 70deg) 37.5%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 12.5%, oklch(0.5 0.6 70) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 0%, oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 0%, oklch(0.5 0.6 70))`);
-
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4), oklch(0.5 0.6 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklch, 25% oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4), 25% oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 75%, oklch(0.5 0.6 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8) 25%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 75%, oklch(0.5 0.6 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8) 75%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 30%, oklch(0.5 0.6 70deg / .8) 90%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 30%, oklch(0.5 0.6 70 / 0.8) 90%)`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 12.5%, oklch(0.5 0.6 70deg / .8) 37.5%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 12.5%, oklch(0.5 0.6 70 / 0.8) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 0%, oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 0%, oklch(0.5 0.6 70 / 0.8))`);
-
-    test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch, oklch(1 0 40), oklch(1 0 60))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch, oklch(1 0 60), oklch(1 0 40))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch, oklch(1 0 50), oklch(1 0 330))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch, oklch(1 0 330), oklch(1 0 50))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch, oklch(1 0 20), oklch(1 0 320))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch, oklch(1 0 320), oklch(1 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch, oklch(1 0 40), oklch(1 0 60))`);
-    test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch, oklch(1 0 60), oklch(1 0 40))`);
-    test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch, oklch(1 0 50), oklch(1 0 330))`);
-    test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch, oklch(1 0 330), oklch(1 0 50))`);
-    test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch, oklch(1 0 20), oklch(1 0 320))`);
-    test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch, oklch(1 0 320), oklch(1 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch longer hue, oklch(1 0 40), oklch(1 0 60))`);
-    test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch longer hue, oklch(1 0 60), oklch(1 0 40))`);
-    test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch longer hue, oklch(1 0 50), oklch(1 0 330))`);
-    test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch longer hue, oklch(1 0 330), oklch(1 0 50))`);
-    test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch longer hue, oklch(1 0 20), oklch(1 0 320))`);
-    test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch longer hue, oklch(1 0 320), oklch(1 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch increasing hue, oklch(1 0 40), oklch(1 0 60))`);
-    test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch increasing hue, oklch(1 0 60), oklch(1 0 40))`);
-    test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch increasing hue, oklch(1 0 50), oklch(1 0 330))`);
-    test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch increasing hue, oklch(1 0 330), oklch(1 0 50))`);
-    test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch increasing hue, oklch(1 0 20), oklch(1 0 320))`);
-    test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch increasing hue, oklch(1 0 320), oklch(1 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 40), oklch(1 0 60))`);
-    test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 60), oklch(1 0 40))`);
-    test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 50), oklch(1 0 330))`);
-    test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 330), oklch(1 0 50))`);
-    test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 20), oklch(1 0 320))`);
-    test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 320), oklch(1 0 20))`);
-
-    test_valid_value(`color`, `color-mix(in oklch, oklch(none none none), oklch(none none none))`, `color-mix(in oklch, oklch(none none none), oklch(none none none))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(none none none))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(none none none))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 none))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(0.5 0.6 none))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 none 70deg))`, `color-mix(in oklch, oklch(none 0.2 30), oklch(0.5 none 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / 0.5))`);
-    test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / none))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(0.5 0.6 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, 25% oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), 25% oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 75%, oklch(0.5 0.6 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg) 25%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 75%, oklch(0.5 0.6 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg) 75%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 30%, oklch(0.5 0.6 70deg) 90%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 30%, oklch(0.5 0.6 70) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 12.5%, oklch(0.5 0.6 70deg) 37.5%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 12.5%, oklch(0.5 0.6 70) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 0%, oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 0%, oklch(0.5 0.6 70))`);
+
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4), oklch(0.5 0.6 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, 25% oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4), 25% oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 75%, oklch(0.5 0.6 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8) 25%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 75%, oklch(0.5 0.6 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8) 75%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 30%, oklch(0.5 0.6 70deg / .8) 90%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 30%, oklch(0.5 0.6 70 / 0.8) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 12.5%, oklch(0.5 0.6 70deg / .8) 37.5%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 12.5%, oklch(0.5 0.6 70 / 0.8) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 0%, oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 0%, oklch(0.5 0.6 70 / 0.8))`);
+
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch, oklch(1 0 40), oklch(1 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch, oklch(1 0 60), oklch(1 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch, oklch(1 0 50), oklch(1 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch, oklch(1 0 330), oklch(1 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch, oklch(1 0 20), oklch(1 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch, oklch(1 0 320), oklch(1 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch, oklch(1 0 40), oklch(1 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch, oklch(1 0 60), oklch(1 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch, oklch(1 0 50), oklch(1 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch, oklch(1 0 330), oklch(1 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch, oklch(1 0 20), oklch(1 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in oklch shorter hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch, oklch(1 0 320), oklch(1 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch longer hue, oklch(1 0 40), oklch(1 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch longer hue, oklch(1 0 60), oklch(1 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch longer hue, oklch(1 0 50), oklch(1 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch longer hue, oklch(1 0 330), oklch(1 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch longer hue, oklch(1 0 20), oklch(1 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in oklch longer hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch longer hue, oklch(1 0 320), oklch(1 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch increasing hue, oklch(1 0 40), oklch(1 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch increasing hue, oklch(1 0 60), oklch(1 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch increasing hue, oklch(1 0 50), oklch(1 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch increasing hue, oklch(1 0 330), oklch(1 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch increasing hue, oklch(1 0 20), oklch(1 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in oklch increasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch increasing hue, oklch(1 0 320), oklch(1 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 40), oklch(1 0 60))`);
+    fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 60), oklch(1 0 40))`);
+    fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 50), oklch(1 0 330))`);
+    fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 330), oklch(1 0 50))`);
+    fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 20), oklch(1 0 320))`);
+    fuzzy_test_valid_color(`color-mix(in oklch decreasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 320), oklch(1 0 20))`);
+
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(none none none), oklch(none none none))`, `color-mix(in oklch, oklch(none none none), oklch(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(none none none))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 none))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(0.5 0.6 none))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 none 70deg))`, `color-mix(in oklch, oklch(none 0.2 30), oklch(0.5 none 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / 0.5))`);
+    fuzzy_test_valid_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / none))`);
 
     // lab()
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30), lab(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lab, 25% lab(10 20 30), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), 25% lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 75%, lab(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), lab(50 60 70) 25%)`, `color-mix(in lab, lab(10 20 30) 75%, lab(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70) 75%)`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)`, `color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)`, `color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))`);
-
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4), lab(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lab, 25% lab(10 20 30 / .4), lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4), 25% lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 75%, lab(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8) 25%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 75%, lab(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8) 75%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 30%, lab(50 60 70 / .8) 90%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 30%, lab(50 60 70 / 0.8) 90%)`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 12.5%, lab(50 60 70 / .8) 37.5%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 12.5%, lab(50 60 70 / 0.8) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 0%, lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 0%, lab(50 60 70 / 0.8))`);
-
-    test_valid_value(`color`, `color-mix(in lab, lab(none none none), lab(none none none))`, `color-mix(in lab, lab(none none none), lab(none none none))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(none none none), lab(50 60 70))`, `color-mix(in lab, lab(none none none), lab(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), lab(none none none))`, `color-mix(in lab, lab(10 20 30), lab(none none none))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 none), lab(50 60 70))`, `color-mix(in lab, lab(10 20 none), lab(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), lab(50 60 none))`, `color-mix(in lab, lab(10 20 30), lab(50 60 none))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(none 20 30), lab(50 none 70))`, `color-mix(in lab, lab(none 20 30), lab(50 none 70))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`);
-    test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30), lab(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, 25% lab(10 20 30), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), 25% lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 75%, lab(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), lab(50 60 70) 25%)`, `color-mix(in lab, lab(10 20 30) 75%, lab(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70) 75%)`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)`, `color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)`, `color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))`);
+
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4), lab(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lab, 25% lab(10 20 30 / .4), lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4), 25% lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 75%, lab(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8) 25%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 75%, lab(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8) 75%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 30%, lab(50 60 70 / .8) 90%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 30%, lab(50 60 70 / 0.8) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 12.5%, lab(50 60 70 / .8) 37.5%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 12.5%, lab(50 60 70 / 0.8) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / .4) 0%, lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 0%, lab(50 60 70 / 0.8))`);
+
+    fuzzy_test_valid_color(`color-mix(in lab, lab(none none none), lab(none none none))`, `color-mix(in lab, lab(none none none), lab(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(none none none), lab(50 60 70))`, `color-mix(in lab, lab(none none none), lab(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), lab(none none none))`, `color-mix(in lab, lab(10 20 30), lab(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 none), lab(50 60 70))`, `color-mix(in lab, lab(10 20 none), lab(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30), lab(50 60 none))`, `color-mix(in lab, lab(10 20 30), lab(50 60 none))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(none 20 30), lab(50 none 70))`, `color-mix(in lab, lab(none 20 30), lab(50 none 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`);
+    fuzzy_test_valid_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`);
 
     // oklab()
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`);
-
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4), oklab(0.5 0.6 0.7 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 30%, oklab(0.5 0.6 0.7 / 0.8) 90%)`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 12.5%, oklab(0.5 0.6 0.7 / 0.8) 37.5%)`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 0%, oklab(0.5 0.6 0.7 / 0.8))`);
-
-    test_valid_value(`color`, `color-mix(in oklab, oklab(none none none), oklab(none none none))`, `color-mix(in oklab, oklab(none none none), oklab(none none none))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`, `color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`);
-    test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`);
+
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4), oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 30%, oklab(0.5 0.6 0.7 / 0.8) 90%)`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 12.5%, oklab(0.5 0.6 0.7 / 0.8) 37.5%)`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 0%, oklab(0.5 0.6 0.7 / 0.8))`);
+
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(none none none), oklab(none none none))`, `color-mix(in oklab, oklab(none none none), oklab(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`, `color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`);
+    fuzzy_test_valid_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`);
 
   for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
       const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace;
 
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, 50% color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), 50% color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 25%, color(${resultColorSpace} 0.5 0.6 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7) 25%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 75%, color(${resultColorSpace} 0.5 0.6 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7) 75%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 25%, color(${resultColorSpace} 0.5 0.6 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 30%, color(${colorSpace} .5 .6 .7) 90%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 30%, color(${resultColorSpace} 0.5 0.6 0.7) 90%)`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 12.5%, color(${colorSpace} .5 .6 .7) 37.5%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 12.5%, color(${resultColorSpace} 0.5 0.6 0.7) 37.5%)`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 0%, color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 0%, color(${resultColorSpace} 0.5 0.6 0.7))`);
-
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .5), color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.5), color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 25%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8) 25%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 75%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8) 75%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 25%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 30%, color(${colorSpace} .5 .6 .7 / .8) 90%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 30%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8) 90%)`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 12.5%, color(${colorSpace} .5 .6 .7 / .8) 37.5%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 12.5%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8) 37.5%)`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 0%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
-
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} 2 3 4 / 5), color(${colorSpace} 4 6 8 / 10))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 2 3 4), color(${resultColorSpace} 4 6 8))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4), color(${colorSpace} -4 -6 -8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} -2 -3 -4), color(${resultColorSpace} -4 -6 -8))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4 / -5), color(${colorSpace} -4 -6 -8 / -10))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} -2 -3 -4 / 0), color(${resultColorSpace} -4 -6 -8 / 0))`);
-
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} none none none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none none none), color(${resultColorSpace} none none none))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none none none), color(${resultColorSpace} 0.5 0.6 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} none none none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} none none none))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 none), color(${resultColorSpace} 0.5 0.6 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 none))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} none .2 .3), color(${colorSpace} .5 none .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none 0.2 0.3), color(${resultColorSpace} 0.5 none 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / 0.5))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / 0.5))`);
-      test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / none))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, 50% color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), 50% color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 25%, color(${resultColorSpace} 0.5 0.6 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7) 25%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 75%, color(${resultColorSpace} 0.5 0.6 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7) 75%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 25%, color(${resultColorSpace} 0.5 0.6 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 30%, color(${colorSpace} .5 .6 .7) 90%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 30%, color(${resultColorSpace} 0.5 0.6 0.7) 90%)`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 12.5%, color(${colorSpace} .5 .6 .7) 37.5%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 12.5%, color(${resultColorSpace} 0.5 0.6 0.7) 37.5%)`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 0%, color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 0%, color(${resultColorSpace} 0.5 0.6 0.7))`);
+
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .5), color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.5), color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 25%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8) 25%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 75%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8) 75%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 25%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 30%, color(${colorSpace} .5 .6 .7 / .8) 90%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 30%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8) 90%)`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 12.5%, color(${colorSpace} .5 .6 .7 / .8) 37.5%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 12.5%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8) 37.5%)`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 0%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`);
+
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} 2 3 4 / 5), color(${colorSpace} 4 6 8 / 10))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 2 3 4), color(${resultColorSpace} 4 6 8))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4), color(${colorSpace} -4 -6 -8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} -2 -3 -4), color(${resultColorSpace} -4 -6 -8))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4 / -5), color(${colorSpace} -4 -6 -8 / -10))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} -2 -3 -4 / 0), color(${resultColorSpace} -4 -6 -8 / 0))`);
+
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} none none none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none none none), color(${resultColorSpace} none none none))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none none none), color(${resultColorSpace} 0.5 0.6 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} none none none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} none none none))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 none), color(${resultColorSpace} 0.5 0.6 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 none))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} none .2 .3), color(${colorSpace} .5 none .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none 0.2 0.3), color(${resultColorSpace} 0.5 none 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / 0.5))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / 0.5))`);
+      fuzzy_test_valid_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / none))`);
   }
 </script>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b.xht b/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b.xht
deleted file mode 100644
index d66c2db925..0000000000
--- a/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b.xht
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-	<head>
-		<title>CSS Test: hsl() clipping outside device gamut</title>
-		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
-		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
-		<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" />
-		<link rel="match" href="t424-hsl-clip-outside-gamut-b-ref.html" />
-		<meta name="assert" content="Test clipping of hsl() values outside the device gamut." />
-		<style type="text/css"><![CDATA[
-
-		table { border-spacing: 0 2px; padding: 0; border: none; }
-		td { border: none; padding: 0; height: 1.2em; }
-
-		]]></style>
-	</head>
-	<body>
-
-	<p><strong>WARNING: This test assumes that the device gamut is sRGB
-	(as it will be for many CRT monitors).</strong></p>
-
-	<p>Every row in this table should have both columns the same color:</p>
-
-	<table>
-		<tr>
-			<th style="background:white; color: black">Column 1</th>
-			<th style="background:black; color: white">Column 2</th>
-		</tr>
-		<tr>
-			<td style="background: hsl(240, 100%, -100%)">&nbsp;</td>
-			<td style="background: black">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsl(240, 75%, -20%)">&nbsp;</td>
-			<td style="background: black">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsl(240, 75%, 120%)">&nbsp;</td>
-			<td style="background: white">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsl(240, 130%, 50%)">&nbsp;</td>
-			<td style="background: rgb(0, 0, 255)">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsl(264, 130%, 50%)">&nbsp;</td>
-			<td style="background: rgb(102, 0, 255)">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsl(0, -50%, 40%)">&nbsp;</td>
-			<td style="background: rgb(102, 102, 102)">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsl(30, -50%, 60%)">&nbsp;</td>
-			<td style="background: rgb(153, 153, 153)">&nbsp;</td>
-		</tr>
-	</table>
-
-	</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b.xht b/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b.xht
deleted file mode 100644
index d30cf8c483..0000000000
--- a/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b.xht
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-	<head>
-		<title>CSS Test: hsla() clipping outside device gamut</title>
-		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
-		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
-		<link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" />
-		<link rel="match" href="t425-hsla-clip-outside-device-gamut-b-ref.html" />
-		<meta name="assert" content="Test clipping of hsla() values outside the device gamut." />
-		<style type="text/css"><![CDATA[
-
-		body { background: white; color: black; }
-		table { border-spacing: 0 2px; padding: 0; border: none; }
-		td { border: none; padding: 0; height: 1.2em; }
-
-		]]></style>
-	</head>
-	<body>
-
-	<p><strong>WARNING: This test assumes that the device gamut is sRGB
-	(as it will be for many CRT monitors).</strong></p>
-
-	<p>Every row in this table should have both columns the same color:</p>
-
-	<table>
-		<tr>
-			<th style="background:white; color: black">Column 1</th>
-			<th style="background:black; color: white">Column 2</th>
-		</tr>
-		<tr>
-			<td style="background: hsla(240, 100%, -100%, 0.6)">&nbsp;</td>
-			<td style="background: rgb(102, 102, 102)">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsla(240, 75%, -20%, 0.4)">&nbsp;</td>
-			<td style="background: rgb(153, 153, 153)">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsla(240, 75%, 120%, 0.6)">&nbsp;</td>
-			<td style="background: white">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsla(240, 130%, 50%, 0.4)">&nbsp;</td>
-			<td style="background: rgb(153, 153, 255)">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsla(264, 130%, 50%, 0.6)">&nbsp;</td>
-			<td style="background: rgb(163, 102, 255)">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsla(0, -50%, 40%, 0.4)">&nbsp;</td>
-			<td style="background: rgb(194, 194, 194)">&nbsp;</td>
-		</tr>
-		<tr>
-			<td style="background: hsla(30, -50%, 60%, 0.6)">&nbsp;</td>
-			<td style="background: rgb(194, 194, 194)">&nbsp;</td>
-		</tr>
-	</table>
-
-	</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html b/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html
index 0971402e6b..fb706cbf03 100644
--- a/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-baseline-005.html
@@ -43,7 +43,6 @@ fieldset, details {
 <div class="wrapper">
   <canvas></canvas>
   <div class="inline-block">foo</div>
-  <button>foo</button>
   <select><option>foo</option></select>
   <select multiple style="height: 40px;"><option>foo</option></select>
   <textarea style="height: 40px;"></textarea>
diff --git a/testing/web-platform/tests/css/css-contain/contain-layout-button-001.html b/testing/web-platform/tests/css/css-contain/contain-layout-button-001.tentative.html
index b53b28879e..f5a664e566 100644
--- a/testing/web-platform/tests/css/css-contain/contain-layout-button-001.html
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-button-001.tentative.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align">
 <link rel="match" href="reference/contain-layout-button-001-ref.html">
-<meta name=assert content="Layout containment does apply to buttons, thus their baseline is their margin-bottom edge.">
+<meta name=assert content="Layout containment does apply to buttons, but in an inline context their baseline is synthesized from their content-box.">
 <style>
 button {
   border: 5px solid green;
diff --git a/testing/web-platform/tests/css/css-contain/contain-layout-button-002.tentative.html b/testing/web-platform/tests/css/css-contain/contain-layout-button-002.tentative.html
new file mode 100644
index 0000000000..15026d55f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-button-002.tentative.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="help" href="https://github.com/web-platform-tests/wpt/issues/45889">
+<link rel="match" href="reference/contain-layout-button-002-ref.html">
+<meta name=assert content="An empty button and a button with layout containment should align the same.">
+<style>
+button {
+  border: 5px solid green;
+  padding: 10px;
+  margin-bottom: 2px;
+  color: transparent;
+  width: 20px;
+  height: 20px;
+}
+</style>
+
+<p>This test passes if it has the same output as the reference.</p>
+<button></button> <button style="contain:layout"></button>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html b/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html
index 4ae5efca91..d9152432ed 100644
--- a/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html
+++ b/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html
@@ -206,6 +206,9 @@
     --inherit-no: bar;
     --unset-no: baz;
     --initial-no: baz;
+    --space-no: baz;
+    --explicit-initial: initial;
+    --space: ;
   }
   @container style(--initial: initial) {
     #initial { color: green; }
@@ -225,6 +228,18 @@
   @container not style(--inherit-no: inherit) {
     #inherit-no { color: green; }
   }
+  @container style(--explicit-initial: initial) {
+    #explicit-initial { color: green; }
+  }
+  @container not style(--explicit-initial) {
+    #explicit-initial-implicit { color: green; }
+  }
+  @container style(--space: ) {
+    #space { color: green; }
+  }
+  @container not style(--space-no: ) {
+    #space-no { color: green; }
+  }
   @container style(--unset: unset) {
     #unset { color: green; }
   }
@@ -238,6 +253,10 @@
     <div id="initial-implicit"></div>
     <div id="initial-no"></div>
     <div id="initial-no-implicit"></div>
+    <div id="explicit-initial"></div>
+    <div id="explicit-initial-implicit"></div>
+    <div id="space"></div>
+    <div id="space-no"></div>
     <div id="inherit"></div>
     <div id="inherit-no"></div>
     <div id="unset"></div>
@@ -262,6 +281,22 @@
   }, "Style query matching value-less query against non-initial value");
 
   test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#explicit-initial")).color, green);
+  }, "Style query 'initial' matching (with explicit 'initial' value)");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#explicit-initial-implicit")).color, green);
+  }, "Style query matching negated value-less query against initial value (with explicit 'initial' value)");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#space")).color, green);
+  }, "Style query 'space' matching");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#space-no")).color, green);
+  }, "Style query 'space' not matching");
+
+  test(() => {
     assert_equals(getComputedStyle(document.querySelector("#inherit")).color, green);
   }, "Style query 'inherit' matching");
 
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/registered-color-style-queries.html b/testing/web-platform/tests/css/css-contain/container-queries/registered-color-style-queries.html
new file mode 100644
index 0000000000..6e2bfb896b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/registered-color-style-queries.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: registered color syntax style queries</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#style-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  @property --reg-color {
+    syntax: "<color>";
+    inherits: false;
+    initial-value: red;
+  }
+
+  #light { color-scheme: light; }
+  #dark { color-scheme: dark; }
+  .container { --reg-color: light-dark(white, black); }
+
+  @container style(--reg-color: white) {
+    #t1 { color: green; }
+  }
+  @container style(--reg-color: black) {
+    #t2 { color: green; }
+  }
+</style>
+<div id="light" class="container">
+  <div id="t1"></div>
+</div>
+<div id="dark" class="container">
+  <div id="t2"></div>
+</div>
+<script>
+  const green = "rgb(0, 128, 0)";
+
+  test(() => {
+    assert_equals(getComputedStyle(t1).color, green);
+  }, "Registered color with light color-scheme and light-dark()");
+
+  test(() => {
+    assert_equals(getComputedStyle(t2).color, green);
+  }, "Registered color with dark color-scheme and light-dark()");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-background-clip-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-background-clip-crash.html
new file mode 100644
index 0000000000..1fa645f457
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-background-clip-crash.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<body>
+    <style>
+        body {
+            content-visibility: hidden;
+            background-clip: text;
+            position: absolute;
+            border-right-style: dashed;
+            border-top-style: ridge;
+            background-color: green;
+        }
+    </style>
+    <script>
+        var p1 = document.createElement('p');
+        var p2 = document.createElement('p');
+        document.body.appendChild(p1);
+        document.body.appendChild(p2);
+        p1.scroll();
+        p2.remove();
+    </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html
index 360652c939..83340137ac 100644
--- a/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html
+++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html
@@ -39,7 +39,6 @@ fieldset, details {
 <div class="wrapper">
   <canvas></canvas>
   <div class="inline-block">foo</div>
-  <button>foo</button>
   <select><option>foo</option></select>
   <select multiple style="height: 40px;"><option>foo</option></select>
   <textarea style="height: 40px;"></textarea>
diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html
index da83204dce..c20efbbb39 100644
--- a/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html
+++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html
@@ -7,7 +7,7 @@ div.fakeButton {
   display: inline-block;
   border: 5px solid green;
   padding: 0;
-  margin-bottom: 2px;
+  margin-bottom: -5px;
   color: transparent;
   width: 0;
   height: 0px;
diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-002-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-002-ref.html
new file mode 100644
index 0000000000..85b98ee4a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-002-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+button {
+  border: 5px solid green;
+  padding: 10px;
+  margin-bottom: 2px;
+  color: transparent;
+  width: 20px;
+  height: 20px;
+}
+</style>
+<p>This test passes if it has the same output as the reference.</p>
+<button></button> <button></button>
diff --git a/testing/web-platform/tests/css/css-content/parsing/content-valid.html b/testing/web-platform/tests/css/css-content/parsing/content-valid.html
index 5c75586107..60d03a4d4c 100644
--- a/testing/web-platform/tests/css/css-content/parsing/content-valid.html
+++ b/testing/web-platform/tests/css/css-content/parsing/content-valid.html
@@ -42,7 +42,7 @@ test_valid_value_combinations("content", `counters(counter-name, ".", counter-st
 test_valid_value_combinations("content", `counters(counter-name, ".", dECiMaL)`, `counters(counter-name, ".")`);
 test_valid_value_combinations("content", `counters(counter-name, ".", DECIMAL)`, `counters(counter-name, ".")`);
 
-test_valid_value_combinations("content", `url("https://www.example.com/picture.svg")`);
+test_valid_value_combinations("content", `url("picture.svg")`);
 
 test_valid_value_combinations("content", `"hello"`);
 
@@ -52,7 +52,7 @@ test_valid_value_combinations("content", `counter(counter-name) "potato"`);
 test_valid_value_combinations("content", `counters(counter-name, ".") "potato"`);
 test_valid_value_combinations("content", `"(" counters(counter-name, ".", counter-style) ")"`);
 test_valid_value_combinations("content", `open-quote "hello" "world" close-quote`);
-test_valid_value_combinations("content", `url("https://www.example.com/picture.svg") "hello"`);
+test_valid_value_combinations("content", `url("picture.svg") "hello"`);
 </script>
 </body>
 </html>
diff --git a/testing/web-platform/tests/css/css-counter-styles/counter-style-at-rule/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-counter-styles/counter-style-at-rule/WEB_FEATURES.yml
new file mode 100644
index 0000000000..fc866d5c12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/counter-style-at-rule/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: counter-style
+  files: "**"
diff --git a/testing/web-platform/tests/css/css-counter-styles/cssom/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-counter-styles/cssom/WEB_FEATURES.yml
new file mode 100644
index 0000000000..1efb03070d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-counter-styles/cssom/WEB_FEATURES.yml
@@ -0,0 +1,26 @@
+# All of the tests in this directory are for CSSCounterStyleRule, but tests for
+# other parts of CSS Counter Styles could potentially be added here, so list of
+# the (current) tests to avoid matching tests from unrelated features added
+# later.
+features:
+- name: counter-style
+  files:
+  - cssom-additive-symbols-setter-invalid.html
+  - cssom-additive-symbols-setter.html
+  - cssom-fallback-setter-invalid.html
+  - cssom-fallback-setter.html
+  - cssom-name-setter-invalid.html
+  - cssom-name-setter.html
+  - cssom-negative-setter-invalid.html
+  - cssom-negative-setter.html
+  - cssom-pad-setter-invalid.html
+  - cssom-pad-setter.html
+  - cssom-prefix-suffix-setter-invalid.html
+  - cssom-prefix-suffix-setter.html
+  - cssom-range-setter-invalid.html
+  - cssom-range-setter.html
+  - cssom-symbols-setter-invalid.html
+  - cssom-symbols-setter.html
+  - cssom-system-setter-1.html
+  - cssom-system-setter-2.html
+  - cssom-system-setter-invalid.html
diff --git a/testing/web-platform/tests/css/css-display/accessibility/display-contents-role-and-label.html b/testing/web-platform/tests/css/css-display/accessibility/display-contents-role-and-label.html
index 4a06d0ff5b..6b5453e9f6 100644
--- a/testing/web-platform/tests/css/css-display/accessibility/display-contents-role-and-label.html
+++ b/testing/web-platform/tests/css/css-display/accessibility/display-contents-role-and-label.html
@@ -75,7 +75,7 @@
     </thead>
     <tbody>
       <tr style="display: contents;">
-        <td data-expectedrole="cell" data-expectedlabel="x" data-testname="td as child of tr with display: contents, within table with display: flex, has cell role" class="ex-role-and-label">x</td>
+        <td data-expectedrole="cell" data-testname="td as child of tr with display: contents, within table with display: flex, has cell role" class="ex-role">x</td>
         <td>x</td>
       </tr>
     </tbody>
@@ -90,7 +90,7 @@
     </thead>
     <tbody>
       <tr style="display: contents;">
-        <td data-expectedrole="cell" data-expectedlabel="x" data-testname="td as child of tr with display: contents, within table with role=table with display: flex, has cell role" class="ex-role-and-label">x</td>
+        <td data-expectedrole="cell" data-testname="td as child of tr with display: contents, within table with role=table with display: flex, has cell role" class="ex-role">x</td>
         <td>x</td>
       </tr>
     </tbody>
@@ -105,7 +105,7 @@
     </thead>
     <tbody>
       <tr style="display: contents;">
-        <td data-expectedrole="gridcell" data-expectedlabel="x" data-testname="td (no explicit role) as child of tr with display: contents, within table with role=grid with display: flex, has gridcell role" class="ex-role-and-label">x</td>
+        <td data-expectedrole="gridcell" data-testname="td (no explicit role) as child of tr with display: contents, within table with role=grid with display: flex, has gridcell role" class="ex-role">x</td>
         <td>x</td>
       </tr>
     </tbody>
@@ -116,7 +116,7 @@
     <h2>x</h2>
     <ul style="display: contents" data-expectedrole="list" data-testname="ul with display: contents, as child of div with display: grid, has list role" class="ex-role">
       <li>x</li>
-      <li data-expectedrole="listitem" data-expectedlabel="x" data-testname="listitem within ul with display: contents, as child of div with display: grid, has listitem role" class="ex-role-and-label">x</li>
+      <li data-expectedrole="listitem" data-testname="listitem within ul with display: contents, as child of div with display: grid, has listitem role" class="ex-role">x</li>
     </ul>
   </div>
 
@@ -131,8 +131,8 @@
 
   <!-- Landmarks and regions -->
   <header style="display: contents;" data-expectedrole="banner" data-testname="header with display: contents has banner role" class="ex-role">x</header>
-  <nav style="display: contents;" aria-label="label" data-expectedrole="navigation" data-testname="nav with display: contents and aria-label has navigation role" class="ex-role-and-label">x</nav>
-  <aside style="display: contents;" aria-label="label" data-expectedrole="complementary" data-testname="aside with display: contents and aria-label has complementary role" class="ex-role-and-label">x</aside>
+  <nav style="display: contents;" aria-label="label" data-expectedrole="navigation" data-expectedlabel="label" data-testname="nav with display: contents and aria-label has navigation role" class="ex-role-and-label">x</nav>
+  <aside style="display: contents;" aria-label="label" data-expectedrole="complementary" data-expectedlabel="label" data-testname="aside with display: contents and aria-label has complementary role" class="ex-role-and-label">x</aside>
   <main style="display: contents;" data-expectedrole="main" data-testname="main with display: contents has main role" class="ex-role">x</main>
   <footer style="display: contents;" data-expectedrole="contentinfo" data-testname="footer with display: contents has contentinfo role" class="ex-role">x</footer>
   <form aria-label="label" style="display: contents;" data-expectedrole="form" data-expectedlabel="label" data-testname="form with display: contents has form role" class="ex-role-and-label">x</form>
@@ -140,12 +140,12 @@
   <section aria-label="label" style="display: contents;" data-expectedrole="region" data-expectedlabel="label" data-testname="section with aria-label and display: contents has region role" class="ex-role-and-label"></section>
 
   <div role="banner" style="display: contents;" data-expectedrole="banner" data-testname="div with role banner and display: contents has banner role" class="ex-role">x</div>
-  <div role="navigation" aria-label="label" style="display: contents;" data-expectedrole="navigation" data-testname="div with role navigation, aria-label and display: contents has navigation role" class="ex-role-and-label">x</div>
-  <div role="complementary" aria-label="label" style="display: contents;" data-expectedrole="complementary" data-testname="div with role complementary, aria-label and display: contents has complementary role" class="ex-role-and-label">x</div>
+  <div role="navigation" aria-label="label" style="display: contents;" data-expectedrole="navigation" data-expectedlabel="label" data-testname="div with role navigation, aria-label and display: contents has navigation role" class="ex-role-and-label">x</div>
+  <div role="complementary" aria-label="label" style="display: contents;" data-expectedrole="complementary" data-expectedlabel="label" data-testname="div with role complementary, aria-label and display: contents has complementary role" class="ex-role-and-label">x</div>
   <div role="main" style="display: contents;" data-expectedrole="main" data-testname="div with role main and display: contents has main role" class="ex-role">x</div>
   <div role="contentinfo" style="display: contents;" data-expectedrole="contentinfo" data-testname="div with role contentinfo and display: contents has contentinfo role" class="ex-role">x</div>
   <div role="form" aria-label="label" style="display: contents;" data-expectedrole="form" data-expectedlabel="label" data-testname="div with role form, aria-label and display: contents has form role" class="ex-role-and-label">x</div>
-  <div role="search" aria-label="label" style="display: contents;" data-expectedrole="search" data-testname="div with role search and display: contents has search role" class="ex-role-and-label">x</div>
+  <div role="search" aria-label="label" style="display: contents;" data-expectedrole="search" data-expectedlabel="label" data-testname="div with role search and display: contents has search role" class="ex-role-and-label">x</div>
   <div role="region" aria-label="label" style="display: contents;" data-expectedrole="region" data-expectedlabel="label" data-testname="div with role region, aria-label and display: contents has region role" class="ex-role-and-label">x</div>
 
   <!-- Links -->
@@ -156,33 +156,33 @@
 
   <!-- Lists -->
   <ul role="list" style="display: contents;" data-expectedrole="list" data-testname="ul with role list and display: contents (child li has display: contents) has list role" class="ex-role">
-    <li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="x" data-testname="li as child of ul with role list, both with display: contents, has listitem role" class="ex-role-and-label">x</li>
+    <li style="display: contents;" data-expectedrole="listitem" data-testname="li as child of ul with role list, both with display: contents, has listitem role" class="ex-role">x</li>
     <li>y</li>
   </ul>
 
   <ul role="list" style="display: contents;" data-expectedrole="list" data-testname="ul with role list and display: contents has list role" class="ex-role">
     <li>x</li>
-    <li data-expectedrole="listitem" data-expectedlabel="y" data-testname="li, as child of ul with role list and display: contents, has listitem role" class="ex-role-and-label">y</li>
+    <li data-expectedrole="listitem" data-testname="li, as child of ul with role list and display: contents, has listitem role" class="ex-role">y</li>
   </ul>
 
   <ul role="list">
     <li>x</li>
-    <li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="li with display: contents, as child of ul with role list, has listitem role" class="ex-role-and-label">y</li>
+    <li style="display: contents;" data-expectedrole="listitem" data-testname="li with display: contents, as child of ul with role list, has listitem role" class="ex-role">y</li>
   </ul>
 
   <ol role="list" style="display: contents;" data-expectedrole="list" data-testname="ol with role list and display: contents has list role (child li has display: contents)" class="ex-role">
-    <li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="x" data-testname="li as child of ol with role list, both with display: contents, has listitem role" class="ex-role-and-label">x</li>
+    <li style="display: contents;" data-expectedrole="listitem" data-testname="li as child of ol with role list, both with display: contents, has listitem role" class="ex-role">x</li>
     <li>y</li>
   </ol>
 
   <ol role="list" style="display: contents;" data-expectedrole="list" data-testname="ol with role list and display: contents has list role" class="ex-role">
     <li>x</li>
-    <li data-expectedrole="listitem" data-expectedlabel="y" data-testname="li, as child of ol with role list and display: contents, has listitem role" class="ex-role-and-label">y</li>
+    <li data-expectedrole="listitem" data-testname="li, as child of ol with role list and display: contents, has listitem role" class="ex-role">y</li>
   </ol>
 
   <ol role="list">
     <li>x</li>
-    <li style="display: contents;" data-expectedrole="listitem" data-expectedlabel="y" data-testname="li with display: contents, as child of ol with role list, has listitem role" class="ex-role-and-label">y</li>
+    <li style="display: contents;" data-expectedrole="listitem" data-testname="li with display: contents, as child of ol with role list, has listitem role" class="ex-role">y</li>
   </ol>
 
   <div role="list" style="display: contents;" data-expectedrole="list" data-testname="div with list role and display: contents has list role" class="ex-role">
@@ -212,7 +212,7 @@
     </thead>
     <tbody>
       <tr>
-        <td style="display: contents;" data-expectedrole="cell" data-expectedlabel="x" data-testname="td within tr in table with role table, all with display: contents, has cell role" class="ex-role-and-label">x</td>
+        <td style="display: contents;" data-expectedrole="cell" data-testname="td within tr in table with role table, all with display: contents, has cell role" class="ex-role">x</td>
         <td>x</td>
       </tr>
     </tbody>
@@ -242,7 +242,7 @@
     </thead>
     <tbody>
       <tr>
-        <td style="display: contents;" data-expectedrole="gridcell" data-expectedlabel="x" data-testname="td within table with role grid, both with display: contents, has gridcell role" class="ex-role-and-label">x</td>
+        <td style="display: contents;" data-expectedrole="gridcell" data-testname="td within table with role grid, both with display: contents, has gridcell role" class="ex-role">x</td>
         <td>x</td>
       </tr>
     </tbody>
@@ -282,10 +282,10 @@
   <div role="treegrid" style="display: contents;" data-expectedrole="treegrid" data-testname="div with role treegrid and display: contents has treegrid role" class="ex-role"></div>
 
   <ul role="tree" style="display: contents;" data-expectedrole="tree" data-testname="ul with role tree and display: contents has tree role" class="ex-role">
-    <li role="treeitem" aria-expanded="true" style="display: contents;" data-expectedrole="treeitem" data-expectedlabel="x" data-testname="li with role treeitem and display: contents, within ul with role tree and display: contents, has treeitem role" class="ex-role-and-label">
+    <li role="treeitem" aria-expanded="true" style="display: contents;" data-expectedrole="treeitem" data-testname="li with role treeitem and display: contents, within ul with role tree and display: contents, has treeitem role" class="ex-role">
       <span>x</span>
       <ul role="group">
-        <li role="treeitem" aria-expanded="false" style="display: contents;" data-expectedrole="treeitem" data-expectedlabel="x" data-testname="li with role treeitem and display: contents, within ul with role=group (within ul with role tree and display: contents), has treeitem role" class="ex-role-and-label">
+        <li role="treeitem" aria-expanded="false" style="display: contents;" data-expectedrole="treeitem" data-testname="li with role treeitem and display: contents, within ul with role=group (within ul with role tree and display: contents), has treeitem role" class="ex-role">
           <span>x</span>
         </li>
       </ul>
diff --git a/testing/web-platform/tests/css/css-easing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-easing/WEB_FEATURES.yml
new file mode 100644
index 0000000000..c17b6206c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-easing/WEB_FEATURES.yml
@@ -0,0 +1,4 @@
+features:
+- name: linear-easing
+  files:
+  - linear-timing-*
diff --git a/testing/web-platform/tests/css/css-easing/linear-timing-functions-output.tentative.html b/testing/web-platform/tests/css/css-easing/linear-timing-functions-output.html
index 82ea469052..ef157e2e28 100644
--- a/testing/web-platform/tests/css/css-easing/linear-timing-functions-output.tentative.html
+++ b/testing/web-platform/tests/css/css-easing/linear-timing-functions-output.html
@@ -2,7 +2,7 @@
 <meta charset=utf-8>
 <meta name="assert" content="This test checks the output of linear timing functions" />
 <title>Tests for the output of linear timing functions</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/6533">
+<link rel="help" href="https://drafts.csswg.org/css-easing-2/#the-linear-easing-function">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/util.js"></script>
diff --git a/testing/web-platform/tests/css/css-easing/linear-timing-functions-syntax.tentative.html b/testing/web-platform/tests/css/css-easing/linear-timing-functions-syntax.html
index 99b680d0bd..2d1baea4eb 100644
--- a/testing/web-platform/tests/css/css-easing/linear-timing-functions-syntax.tentative.html
+++ b/testing/web-platform/tests/css/css-easing/linear-timing-functions-syntax.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <title>CSS Easing: getComputedStyle().animationTimingFunction with linear(...)</title>
-<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/6533">
+<link rel="help" href="https://drafts.csswg.org/css-easing-2/#the-linear-easing-function">
 <meta name="assert" content="animation-timing-function: linear(...) parsing tests">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -34,6 +34,9 @@ test_computed_value("animation-timing-function", "linear(0 calc(min(50%, 60%)),
 test_computed_value("animation-timing-function", "linear(0 0% 50%, 1 50% 100%)", "linear(0 0%, 0 50%, 1 50%, 1 100%)");
 test_computed_value("animation-timing-function", "linear(0, 0.5 25% 75%, 1 100% 100%)", "linear(0 0%, 0.5 25%, 0.5 75%, 1 100%, 1 100%)");
 test_computed_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)", "linear(0 0%, 1.3 12.5%, 1 25%, 0.92 37.5%, 1 50%, 0.99 62.5%, 1 75%, 0.998 87.5%, 1 100%, 1 100%)");
+
+test_computed_value("animation-timing-function", "linear(0, 0 40%, 1, 0.5, 1)", "linear(0 0%, 0 40%, 1 60%, 0.5 80%, 1 100%)");
+
 </script>
 </body>
 </html>
diff --git a/testing/web-platform/tests/css/css-flexbox/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-flexbox/WEB_FEATURES.yml
new file mode 100644
index 0000000000..69d0875451
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/WEB_FEATURES.yml
@@ -0,0 +1,7 @@
+features:
+- name: flexbox
+  files: "**"
+# TODO: map *gap* to flexbox-gap. This is currently not possible without the
+# tests being associated with both flexbox and flexbox-gap. All but one of the
+# *gap* tests are passing in all browsers, so lumping them in with flexbox is
+# relatively harmless.
diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-020.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-020.html
new file mode 100644
index 0000000000..ffbfa711c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/col-wrap-020.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="column-wrap container's max-content width includes gap" />
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    width: 10px;
+    flex: 0 0 100px;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<div
+  style="display: flex; flex-flow: column wrap; height: 100px; width: max-content; column-gap: 80px; background: green;">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-flexbox/min-size-auto-overflow-clip-ref.html b/testing/web-platform/tests/css/css-flexbox/min-size-auto-overflow-clip-ref.html
new file mode 100644
index 0000000000..2503af6df3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/min-size-auto-overflow-clip-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  .flex {
+    display: flex;
+    width: 100px;
+    border: 1px solid;
+  }
+</style>
+<div class="flex">
+  <div>
+    <div style="background: green; width: 150px; height: 50px;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-flexbox/min-size-auto-overflow-clip.html b/testing/web-platform/tests/css/css-flexbox/min-size-auto-overflow-clip.html
new file mode 100644
index 0000000000..ec3bc5f593
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/min-size-auto-overflow-clip.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">
+<link rel="match" href="min-size-auto-overflow-clip-ref.html">
+<title>overflow: visible and clip behave the same for min-size purposes</title>
+<style>
+  .flex {
+    display: flex;
+    width: 100px;
+    border: 1px solid;
+  }
+</style>
+<div class="flex">
+  <div style="overflow: clip">
+    <div style="background: green; width: 150px; height: 50px;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-fonts/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-fonts/WEB_FEATURES.yml
index 5e69c923ab..6739fa2d06 100644
--- a/testing/web-platform/tests/css/css-fonts/WEB_FEATURES.yml
+++ b/testing/web-platform/tests/css/css-fonts/WEB_FEATURES.yml
@@ -6,7 +6,19 @@ features:
   - palette-values-rule-*
 - name: font-synthesis
   files:
-  - font-synthesis-*
+  - font-synthesis-0*.html
+- name: font-synthesis-position
+  files:
+  - font-synthesis-position*
+- name: font-synthesis-small-caps
+  files:
+  - font-synthesis-small-caps*
+- name: font-synthesis-style
+  files:
+  - font-synthesis-style*
+- name: font-synthesis-weight
+  files:
+  - font-synthesis-weight*
 - name: font-variant-alternates
   files:
   - alternates-order.html
diff --git a/testing/web-platform/tests/css/css-fonts/font-size-adjust-reload.html b/testing/web-platform/tests/css/css-fonts/font-size-adjust-reload.html
index 37d79a68bd..68ccba4398 100644
--- a/testing/web-platform/tests/css/css-fonts/font-size-adjust-reload.html
+++ b/testing/web-platform/tests/css/css-fonts/font-size-adjust-reload.html
@@ -16,8 +16,7 @@ body {
 </body>
 <script>
     const iframe = document.getElementById('iframe');
-    // Forcing reload
-    iframe.src += '';
+    iframe.contentWindow.location.reload();
     iframe.contentWindow.onload = function(){
         document.documentElement.classList.remove("reftest-wait");
     };
diff --git a/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA-primary-font-notref.html b/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA-primary-font-notref.html
new file mode 100644
index 0000000000..df9b829a41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA-primary-font-notref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Vitor Roriz" href="https://github.com/vitorroriz">
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues">
+<style>
+.target {
+    font-family: Times;
+    font-size: 60px;
+}
+</style>
+</head>
+<body>
+"If a given character is a Private-Use Area Unicode codepoint, user agents must only match font families named in the font-family list that are not generic families. If none of the families named in the font-family list contain a glyph for that codepoint, user agents must display some form of missing glyph symbol for that character rather than attempting installed font fallback for that codepoint." - <a href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues">css-fonts-4</a>
+<p class="target">&#xE0AD;&#xE0AE;&#xE0AD;&#xE0AF;&#xE0B0;&#xE0B1;&#xE0C0;&#xE0C1;&#xE0D3;&#xE0D4;</p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA-primary-font.html b/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA-primary-font.html
new file mode 100644
index 0000000000..1b03c98e40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/matching/font-unicode-PUA-primary-font.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Vitor Roriz" href="https://github.com/vitorroriz">
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues">
+<link rel="mismatch" href="./font-unicode-PUA-primary-font-notref.html">
+<style>
+.target {
+    font-family: Arial;
+    font-size: 60px;
+}
+</style>
+</head>
+<body>
+"If a given character is a Private-Use Area Unicode codepoint, user agents must only match font families named in the font-family list that are not generic families. If none of the families named in the font-family list contain a glyph for that codepoint, user agents must display some form of missing glyph symbol for that character rather than attempting installed font fallback for that codepoint." - <a href="https://drafts.csswg.org/css-fonts-4/#char-handling-issues">css-fonts-4</a>
+<p class="target">&#xE0AD;&#xE0AE;&#xE0AD;&#xE0AF;&#xE0B0;&#xE0B1;&#xE0C0;&#xE0C1;&#xE0D3;&#xE0D4;</p>
+</html>
diff --git a/testing/web-platform/tests/css/css-fonts/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-fonts/parsing/WEB_FEATURES.yml
index 6a24d269b4..a3bc09cb1f 100644
--- a/testing/web-platform/tests/css/css-fonts/parsing/WEB_FEATURES.yml
+++ b/testing/web-platform/tests/css/css-fonts/parsing/WEB_FEATURES.yml
@@ -8,7 +8,21 @@ features:
   - font-palette-values-*
 - name: font-synthesis
   files:
-  - font-synthesis-*
+  - font-synthesis-computed.html
+  - font-synthesis-invalid.html
+  - font-synthesis-valid.html
+- name: font-synthesis-position
+  files:
+  - font-synthesis-position*
+- name: font-synthesis-small-caps
+  files:
+  - font-synthesis-small-caps*
+- name: font-synthesis-style
+  files:
+  - font-synthesis-style*
+- name: font-synthesis-weight
+  files:
+  - font-synthesis-weight*
 - name: font-variant-alternates
   files:
   - font-variant-alternates-*
diff --git a/testing/web-platform/tests/css/css-fonts/parsing/font-palette-values-invalid.html b/testing/web-platform/tests/css/css-fonts/parsing/font-palette-values-invalid.html
index 2056055f34..b93a48fb37 100644
--- a/testing/web-platform/tests/css/css-fonts/parsing/font-palette-values-invalid.html
+++ b/testing/web-platform/tests/css/css-fonts/parsing/font-palette-values-invalid.html
@@ -115,13 +115,33 @@
 @font-palette-values --A {
     override-colors: 0 canvas;
 }
+
+/* 19 */
+@font-palette-values --A {
+    override-colors: 0 currentcolor;
+}
+
+/* 20 */
+@font-palette-values --A {
+    override-colors: 0 light-dark(white, black);
+}
+
+/* 21 */
+@font-palette-values --A {
+    override-colors: 0 color-mix(in lch, red, canvas);
+}
+
+/* 22 */
+@font-palette-values --A {
+    override-colors: 0 light-dark(white, currentcolor);
+}
 </style>
 </head>
 <body>
 <script>
 let rules = document.getElementById("style").sheet.cssRules;
 test(function() {
-    assert_equals(rules.length, 19);
+    assert_equals(rules.length, 23);
 });
 
 test(function() {
@@ -283,6 +303,34 @@ test(function() {
     assert_equals(rule.basePalette, "");
     assert_equals(rule.overrideColors, "");
 });
+
+test(function() {
+    let text = rules[19].cssText;
+    let rule = rules[19];
+    assert_equals(text.indexOf("override-colors"), -1);
+    assert_equals(rule.overrideColors, "");
+});
+
+test(function() {
+    let text = rules[20].cssText;
+    let rule = rules[20];
+    assert_equals(text.indexOf("override-colors"), -1);
+    assert_equals(rule.overrideColors, "");
+});
+
+test(function() {
+    let text = rules[21].cssText;
+    let rule = rules[21];
+    assert_equals(text.indexOf("override-colors"), -1);
+    assert_equals(rule.overrideColors, "");
+});
+
+test(function() {
+    let text = rules[22].cssText;
+    let rule = rules[22];
+    assert_equals(text.indexOf("override-colors"), -1);
+    assert_equals(rule.overrideColors, "");
+});
 </script>
 </body>
 </html>
diff --git a/testing/web-platform/tests/css/css-fonts/parsing/font-palette-values-valid.html b/testing/web-platform/tests/css/css-fonts/parsing/font-palette-values-valid.html
index 3c0c0626f5..99fceff234 100644
--- a/testing/web-platform/tests/css/css-fonts/parsing/font-palette-values-valid.html
+++ b/testing/web-platform/tests/css/css-fonts/parsing/font-palette-values-valid.html
@@ -103,6 +103,11 @@
 @font-palette-values --P {
     font-family: foo, bar, baz;
 }
+
+/* 17 */
+@font-palette-values --Q {
+    override-colors: 0 color-mix(in lch, red, blue);
+}
 </style>
 </head>
 <body>
@@ -385,6 +390,14 @@ test(function() {
     assert_equals(rule.basePalette, "");
     assert_equals(rule.overrideColors, "");
 });
+
+test(function() {
+    let rule = rules[17];
+    assert_equals(rule.name, "--Q");
+    assert_equals(rule.fontFamily, "");
+    assert_equals(rule.basePalette, "");
+    assert_equals(rule.overrideColors, "0 color-mix(in lch, red, blue)");
+});
 </script>
 </body>
 </html>
diff --git a/testing/web-platform/tests/css/css-fonts/resources/vs/MPLUS1-Regular_without-cmap14-subset.ttf b/testing/web-platform/tests/css/css-fonts/resources/vs/MPLUS1-Regular_without-cmap14-subset.ttf
new file mode 100644
index 0000000000..b77096690d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/resources/vs/MPLUS1-Regular_without-cmap14-subset.ttf
diff --git a/testing/web-platform/tests/css/css-fonts/resources/vs/NotoColorEmoji-Regular_subset.ttf b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoColorEmoji-Regular_subset.ttf
new file mode 100644
index 0000000000..24ab79fd05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoColorEmoji-Regular_subset.ttf
diff --git a/testing/web-platform/tests/css/css-fonts/resources/vs/NotoEmoji-Regular_subset.ttf b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoEmoji-Regular_subset.ttf
new file mode 100644
index 0000000000..0b054c7c8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoEmoji-Regular_subset.ttf
diff --git a/testing/web-platform/tests/css/css-fonts/resources/vs/NotoEmoji-Regular_without-cmap14-subset.ttf b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoEmoji-Regular_without-cmap14-subset.ttf
new file mode 100644
index 0000000000..3d00ef81de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoEmoji-Regular_without-cmap14-subset.ttf
diff --git a/testing/web-platform/tests/css/css-fonts/resources/vs/NotoSansJP-Regular_with-cmap14-subset.ttf b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoSansJP-Regular_with-cmap14-subset.ttf
new file mode 100644
index 0000000000..edcb98e374
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoSansJP-Regular_with-cmap14-subset.ttf
diff --git a/testing/web-platform/tests/css/css-fonts/resources/vs/NotoSansMath-Regular_without-cmap14-subset.ttf b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoSansMath-Regular_without-cmap14-subset.ttf
new file mode 100644
index 0000000000..5436d06dae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/resources/vs/NotoSansMath-Regular_without-cmap14-subset.ttf
diff --git a/testing/web-platform/tests/css/css-fonts/resources/vs/STIXTwoMath-Regular_with-cmap14-subset.ttf b/testing/web-platform/tests/css/css-fonts/resources/vs/STIXTwoMath-Regular_with-cmap14-subset.ttf
new file mode 100644
index 0000000000..c9720cf9ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/resources/vs/STIXTwoMath-Regular_with-cmap14-subset.ttf
diff --git a/testing/web-platform/tests/css/css-fonts/support/css/variation-sequences.css b/testing/web-platform/tests/css/css-fonts/support/css/variation-sequences.css
new file mode 100644
index 0000000000..5977f17b67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/support/css/variation-sequences.css
@@ -0,0 +1,38 @@
+@font-face {
+    font-family: "MonoEmojiFont";
+    src: url(../../resources/vs/NotoEmoji-Regular_subset.ttf);
+}
+
+@font-face {
+    font-family: "ColorEmojiFont";
+    src: url(../../resources/vs/NotoColorEmoji-Regular_subset.ttf);
+}
+
+@font-face {
+    font-family: "EmojiFontWithBaseCharOnly";
+    src: url(../../resources/vs/NotoEmoji-Regular_without-cmap14-subset.ttf);
+}
+
+@font-face {
+    font-family: "CJKFontWithVS";
+    src: url(../../resources/vs/NotoSansJP-Regular_with-cmap14-subset.ttf);
+}
+
+@font-face {
+    font-family: "CJKFontWithBaseCharOnly";
+    src: url(../../resources/vs/MPLUS1-Regular_without-cmap14-subset.ttf);
+}
+
+@font-face {
+    font-family: "MathFontWithVS";
+    src: url(../../resources/vs/STIXTwoMath-Regular_with-cmap14-subset.ttf);
+}
+
+@font-face {
+    font-family: "MathFontWithBaseCharOnly";
+    src: url(../../resources/vs/NotoSansMath-Regular_without-cmap14-subset.ttf);
+}
+
+body {
+    font-size: 24px;
+}
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-fonts/support/js/variation-sequences.js b/testing/web-platform/tests/css/css-fonts/support/js/variation-sequences.js
new file mode 100644
index 0000000000..84c5a1a9c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/support/js/variation-sequences.js
@@ -0,0 +1,125 @@
+var baseChars = {
+    "emoji": "\u{1fae8}",
+    "cjk": "\u{8279}",
+    "math": "\u{2205}"
+};
+
+var variationSelectors = {
+    "emoji": ["\u{fe0e}", "\u{fe0f}"],
+    "cjk": ["", "\u{FE00}", "\u{FE01}", "\u{e0100}", "\u{e0101}",
+        "\u{e0102}"
+    ],
+    "math": ["", "\u{FE00}"]
+};
+
+var families = {
+    "emoji": ["ColorEmojiFont", "MonoEmojiFont",
+        "EmojiFontWithBaseCharOnly",
+        "sans-serif"
+    ],
+    "cjk": ["CJKFontWithVS", "CJKFontWithBaseCharOnly",
+        "sans-serif"
+    ],
+    "math": ["MathFontWithVS", "MathFontWithBaseCharOnly",
+        "sans-serif"
+    ]
+};
+
+var variationSequenceFamilies = new Map([
+    ["\u{1fae8}\u{fe0e}", "MonoEmojiFont"],
+    ["\u{1fae8}\u{fe0f}", "ColorEmojiFont"],
+    ["\u{8279}\u{fe00}", "CJKFontWithVS"],
+    ["\u{8279}\u{fe01}", "CJKFontWithVS"],
+    ["\u{8279}\u{e0100}", "CJKFontWithVS"],
+    ["\u{8279}\u{e0101}", "CJKFontWithVS"],
+    ["\u{8279}\u{e0102}", "CJKFontWithVS"],
+    ["\u{2205}\u{FE00}", "MathFontWithVS"]
+]);
+
+var baseCharFamilies = new Map([
+    ["\u{1fae8}", new Set(["MonoEmojiFont", "ColorEmojiFont",
+        "EmojiFontWithBaseCharOnly"
+    ])],
+    ["\u{8279}", new Set(["CJKFontWithVS",
+        "CJKFontWithBaseCharOnly"
+    ])],
+    ["\u{2205}", new Set(["MathFontWithVS",
+        "MathFontWithBaseCharOnly"
+    ])]
+]);
+
+const range = function*(l) {
+    for (let i = 0; i < l; i += 1) yield i;
+}
+const isEmpty = arr =>
+    arr.length === 0;
+
+const permutations =
+    function*(a) {
+  const r = arguments[1] || [];
+  if (isEmpty(a))
+    yield r;
+  for (let i of range(a.length)) {
+    const aa = [...a];
+    const rr = [...r, ...aa.splice(i, 1)];
+    yield* permutations(aa, rr);
+  }
+}
+
+function getMatchedFamilyForVariationSequence(
+    familyList, baseCharacter, variationSelector) {
+  const variationSequence = baseCharacter + variationSelector;
+  // First try to find a match for the whole variation sequence.
+  if (variationSequenceFamilies.has(variationSequence)) {
+    const matchedFamily = variationSequenceFamilies.get(variationSequence);
+    if (familyList.includes(matchedFamily)) {
+      return matchedFamily;
+    }
+  }
+  // If failed, try to match only the base character from the
+  // variation sequence.
+  if (baseCharFamilies.has(baseCharacter)) {
+    const eligibleFamilies = baseCharFamilies.get(baseCharacter);
+    const matchedFamilies =
+        familyList.filter(value => eligibleFamilies.has(value));
+    if (matchedFamilies.length) {
+      return matchedFamilies[0];
+    }
+  }
+  // We should not reach here, we should always match one of the
+  // specified web fonts in the tests.
+  return "";
+}
+
+function generateContent(
+    families, baseChar, variationSelectors, getFontFamilyValue) {
+  var rootElem = document.createElement('div');
+  // We want to test all possible combinations of variation
+  // selectors and font-family list values. For the refs,
+  // we explicitly specify the font that we expect to be
+  // matched from the maps at the beginning of the files.
+  const allFamiliesLists = permutations(families);
+  for (const familyList of allFamiliesLists) {
+    for (const variationSelector of variationSelectors) {
+      const contentSpan = document.createElement("span");
+      contentSpan.textContent = baseChar + variationSelector;
+      contentSpan.style.fontFamily =
+          getFontFamilyValue(familyList, baseChar, variationSelector);
+      rootElem.appendChild(contentSpan);
+    }
+  }
+  document.body.appendChild(rootElem);
+}
+
+function generateVariationSequenceTests(type) {
+  var getFontFamilyValue = (familyList, baseChar, variationSelector) => {
+    return familyList.join(', ');
+  }
+  generateContent(families[type], baseChars[type], variationSelectors[type], getFontFamilyValue);
+}
+
+function generateVariationSequenceRefs(type) {
+  generateContent(
+      families[type], baseChars[type], variationSelectors[type],
+      getMatchedFamilyForVariationSequence);
+}
diff --git a/testing/web-platform/tests/css/css-fonts/variation-sequences-ref.html b/testing/web-platform/tests/css/css-fonts/variation-sequences-ref.html
new file mode 100644
index 0000000000..a44f18bb3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/variation-sequences-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="UTF-8" />
+<title>CSS Test: Cluster Matching Variation Sequences</title>
+<link rel="stylesheet" type="text/css" href="support/css/variation-sequences.css" />
+<script type="text/javascript" src="support/js/variation-sequences.js"></script>
+<body></body>
+<script>
+    generateVariationSequenceRefs("emoji");
+    generateVariationSequenceRefs("cjk");
+    generateVariationSequenceRefs("math");
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-fonts/variation-sequences.html b/testing/web-platform/tests/css/css-fonts/variation-sequences.html
new file mode 100644
index 0000000000..91e46a84d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/variation-sequences.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="UTF-8" />
+<title>CSS Test: Cluster Matching Variation Sequences</title>
+<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#cluster-matching" />
+<link rel="help" href="https://unicode.org/reports/tr51/" />
+<link rel="help" href="https://unicode.org/reports/tr37/" />
+<link rel="help" href="https://www.unicode.org/Public/UNIDATA/StandardizedVariants.txt" />
+<link rel="help" href="https://www.unicode.org/versions/Unicode15.1.0/ch23.pdf#G19053" />
+<link rel="match" href="variation-sequences-ref.html">
+<meta name="assert" content="Variation sequences should be taken into account during cluster matching.">
+<link rel="stylesheet" type="text/css" href="support/css/variation-sequences.css" />
+<script type="text/javascript" src="support/js/variation-sequences.js"></script>
+<body></body>
+<script>
+    generateVariationSequenceTests("emoji");
+    generateVariationSequenceTests("cjk");
+    generateVariationSequenceTests("math");
+</script>
+\ No newline at end of file
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/alignment/masonry-align-content-001-ref.html
index fff6cf2138..fff6cf2138 100644
--- 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/alignment/masonry-align-content-001-ref.html
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/alignment/masonry-align-content-001.html
index dfefd998c6..387ee9da5e 100644
--- 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/alignment/masonry-align-content-001.html
@@ -5,9 +5,13 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout with `align-content` in masonry axis</title>
+  <title>CSS Grid Test: Masonry layout with `align-content` in masonry axis (horizontal writing mode)</title>
+  <meta name="assert"
+        content="Test passes if align-content shifts content
+                 in the masonry axis of a masonry grid container
+                 and the grid container's baseline is also shifted accordingly.">
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
   <link rel="match" href="masonry-align-content-001-ref.html">
   <style>
 html,body {
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/alignment/masonry-align-content-002-ref.html
index 67318b323a..67318b323a 100644
--- 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/alignment/masonry-align-content-002-ref.html
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/alignment/masonry-align-content-002.html
index 75b82654fe..be7e7a813e 100644
--- 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/alignment/masonry-align-content-002.html
@@ -5,9 +5,12 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout with `align-content` in masonry axis</title>
+  <title>CSS Grid Test: Masonry layout with `align-content` in masonry axis (vertical writing mode)</title>
+  <meta name="assert"
+        content="Test passes if align-content shifts content
+                 in the masonry axis of a vertical writing-mode masonry grid container.">
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
   <link rel="match" href="masonry-align-content-002-ref.html">
   <style>
 html,body {
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/alignment/masonry-align-content-003-ref.html
index 9780d5f5dc..9da15c0f40 100644
--- 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/alignment/masonry-align-content-003-ref.html
@@ -8,31 +8,31 @@
   <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;
-}
+    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;
-}
+    grid {
+      display: inline-grid;
+      gap: 1px 2px;
+      grid-template-columns: 1ch auto;
+      grid-template-rows: repeat(4,19px);
+      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;
-}
+    item {
+      background-color: #444;
+      color: #fff;
+    }
 
-.tall { grid-row: span 2; padding: 3px 11px 1px 13px; }
-</style>
+    .tall { grid-row: span 2; padding: 3px 11px 1px 13px; }
+  </style>
 </head>
 <body>
 
@@ -90,7 +90,7 @@ item {
   <item style="grid-row:3/4">6</item>
 </grid>
 
-<grid style="align-content:stretch">
+<grid style="align-content:stretch; grid-template-rows: repeat(4,29.25px);">
   <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>
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/alignment/masonry-align-content-003.html
index ae58e79cb2..818d7e2d84 100644
--- 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/alignment/masonry-align-content-003.html
@@ -5,9 +5,13 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout with `align-content` in grid axis</title>
+  <title>CSS Grid Test: Masonry layout with `align-content` in grid axis (horizontal writing mode)</title>
+  <meta name="assert"
+        content="Test passes if align-content distributes tracks
+                 in the grid axis of a masonry grid container
+                 and the grid container's baseline is also shifted accordingly.">
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
   <link rel="match" href="masonry-align-content-003-ref.html">
   <style>
 html,body {
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/alignment/masonry-align-content-004-ref.html
index de11c836b8..de11c836b8 100644
--- 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/alignment/masonry-align-content-004-ref.html
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/alignment/masonry-align-content-004.html
index 3f07aa1fe7..747420ba46 100644
--- 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/alignment/masonry-align-content-004.html
@@ -5,9 +5,12 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout with `align-content` in grid axis</title>
+  <title>CSS Grid Test: Masonry layout with `align-content` in grid axis (vertical writing mode)</title>
+  <meta name="assert"
+        content="Test passes if align-content distributes tracks
+                 in the grid axis of a vertical writing-mode masonry grid container.">
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
   <link rel="match" href="masonry-align-content-004-ref.html">
   <style>
 html,body {
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/alignment/masonry-justify-content-001-ref.html
index f7d9ccf48f..f7d9ccf48f 100644
--- 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/alignment/masonry-justify-content-001-ref.html
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/alignment/masonry-justify-content-001.html
index 3d60ac19fe..36ecd4f3b3 100644
--- 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/alignment/masonry-justify-content-001.html
@@ -5,9 +5,12 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout with `justify-content` in grid axis</title>
+  <title>CSS Grid Test: Masonry layout with `justify-content` in grid axis (horizontal writing mode)</title>
+  <meta name="assert"
+        content="Test passes if justify-content distributes tracks
+                 in the grid axis of a masonry grid container.">
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
   <link rel="match" href="masonry-justify-content-001-ref.html">
   <style>
 html,body {
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/alignment/masonry-justify-content-002-ref.html
index 6889af7eac..6889af7eac 100644
--- 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/alignment/masonry-justify-content-002-ref.html
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/alignment/masonry-justify-content-002.html
index b1db084d4e..fc3696282c 100644
--- 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/alignment/masonry-justify-content-002.html
@@ -5,9 +5,12 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout with `justify-content` in grid axis</title>
+  <title>CSS Grid Test: Masonry layout with `justify-content` in grid axis (vertical writing mode)</title>
+  <meta name="assert"
+        content="Test passes if justify-content distributes tracks
+                 in the grid axis of a vertical writing-mode masonry grid container.">
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
   <link rel="match" href="masonry-justify-content-002-ref.html">
   <style>
 html,body {
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/alignment/masonry-justify-content-003-ref.html
index 81d0fba410..81d0fba410 100644
--- 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/alignment/masonry-justify-content-003-ref.html
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/alignment/masonry-justify-content-003.html
index 772984b9e0..e2e6ead819 100644
--- 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/alignment/masonry-justify-content-003.html
@@ -5,9 +5,12 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout with `justify-content` in masonry axis</title>
+  <title>CSS Grid Test: Masonry layout with `justify-content` in masonry axis (horizontal writing mode)</title>
+  <meta name="assert"
+        content="Test passes if justify-content shifts content
+                 in the masonry axis of a masonry grid container.">
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
   <link rel="match" href="masonry-justify-content-003-ref.html">
   <style>
 html,body {
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/alignment/masonry-justify-content-004-ref.html
index 43af71fc01..43af71fc01 100644
--- 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/alignment/masonry-justify-content-004-ref.html
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/alignment/masonry-justify-content-004.html
index 7d04ffeb4b..e309ef8870 100644
--- 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/alignment/masonry-justify-content-004.html
@@ -5,9 +5,12 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout with `justify-content` in masonry axis</title>
+  <title>CSS Grid Test: Masonry layout with `justify-content` in masonry axis (vertical writing mode)</title>
+  <meta name="assert"
+        content="Test passes if justify-content shifts content
+                 in the masonry axis of a vertical writing-mode masonry grid container.">
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
-  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
   <link rel="match" href="masonry-justify-content-004-ref.html">
   <style>
 html,body {
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
index 69182c5425..24a5b29061 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-fragmentation-001-ref.html">
   <style>
 html,body {
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
index 01c4de00b5..76a0540fa9 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-fragmentation-002-ref.html">
   <style>
 html,body {
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
index fe150e7f83..7252fc169e 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-fragmentation-003-ref.html">
   <style>
 html,body {
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
index 031629e926..7157460267 100644
--- 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
@@ -15,7 +15,7 @@ html,body {
 grid {
   display: inline-grid;
   gap: 10px 20px;
-  grid-template-columns:  auto min-content repeat(2,auto);
+  grid-template-columns: auto min-content repeat(2,auto);
   color: #444;
   border: 1px solid;
   padding: 2px;
@@ -27,6 +27,8 @@ item {
   padding: 20px;
   margin: 3px;
   border: 5px solid blue;
+  place-self: start;
+  grid-row: span 2;
 }
 </style>
 </head>
@@ -34,9 +36,8 @@ item {
 
 <grid>
   <item>1</item>
-  <item style="padding:0; place-self:start; min-width:0">2</item>
+  <item style="padding:0; grid-row: span 1">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>
+  <item style="padding:0; grid-column: 2; grid-row: 2">5</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
index 673bbe40e4..628c00135d 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
   <link rel="match" href="masonry-gap-001-ref.html">
   <style>
 html,body {
@@ -17,7 +17,7 @@ html,body {
 grid {
   display: inline-grid;
   gap: 10px 20px;
-  grid-template-columns:  repeat(4,auto);
+  grid-template-columns: repeat(4,auto);
   grid-template-rows: masonry;
   color: #444;
   border: 1px solid;
@@ -36,10 +36,9 @@ item {
 <body>
 
 <grid>
-  <item>1</item>
-  <item style="padding:0">2</item>
-  <item>3</item>
-  <item>4</item>
-  <item>5</item>
-  <item>6</item>
+  <item style="grid-column: 1;">1</item>
+  <item style="padding:0; grid-column: 2;">2</item>
+  <item style="grid-column: 3;">3</item>
+  <item style="grid-column: 4;">4</item>
+  <item style="padding:0; grid-column: 2;">5</item>
 </grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-002-ref.html
new file mode 100644
index 0000000000..834a884f76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-002-ref.html
@@ -0,0 +1,62 @@
+<!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 normal `gap` in both axes</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="author" title="Elika J. Etemad" href="https://fantasai.inkedblade.net/contact">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 "Courier New", monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 0;
+  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;
+  place-self: start;
+  grid-row: span 2;
+  display: block;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="padding:0; grid-row: span 1">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="padding:0; grid-column: 2; grid-row: 2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding:0; grid-row: span 1">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="padding:0; grid-column: 2; grid-row: 2">5</item>
+</grid>
+
+<grid>
+  <div style="columns: 3; column-gap: 1em;">
+    <item>1</item>
+    <item>2</item>
+    <item>3</item>
+  </div>
+</grid>
+
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-002.html
new file mode 100644
index 0000000000..6dae0a1a72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-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 normal `gap` in both axes</title>
+  <meta name="assert"
+        content="Test passes if a 'normal' gap is the initial value,
+                 is resolved to zero,
+                 does not allow margin collapsing,
+                 and inherits as 'normal' in masonry layout">
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="author" title="Elika J. Etemad" href="https://fantasai.inkedblade.net/contact">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
+  <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;
+  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;
+  display: block;
+}
+
+</style>
+</head>
+<body>
+
+<!-- test initial value of normal -->
+<grid>
+  <item style="grid-column: 1;">1</item>
+  <item style="padding:0; grid-column: 2;">2</item>
+  <item style="grid-column: 3;">3</item>
+  <item style="grid-column: 4;">4</item>
+  <item style="padding:0; grid-column: 2;">5</item>
+</grid>
+
+<!-- test that 'normal' is supported and also resolves to zero -->
+<grid style="gap: 10px; gap: normal">
+  <item style="grid-column: 1;">1</item>
+  <item style="padding:0; grid-column: 2;">2</item>
+  <item style="grid-column: 3;">3</item>
+  <item style="grid-column: 4;">4</item>
+  <item style="padding:0; grid-column: 2;">5</item>
+</grid>
+
+<!-- test inheritance of normal as keyword -->
+
+<grid style="gap: 10px; gap: normal">
+  <div style="columns: 3; gap: inherit;">
+    <item>1</item>
+    <item>2</item>
+    <item>3</item>
+  </div>
+</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
index c99b117f2e..2aefa719dc 100644
--- 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
@@ -5,7 +5,7 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>Reference: Placement involving named lines</title>
+  <title>Reference: Definite column placement in a masonry grid (single edge)</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; }
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
index b6745f6973..8bb78e307d 100644
--- 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
@@ -5,8 +5,9 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Placement involving named lines</title>
+  <title>CSS Grid Test: Definite column placement in a masonry grid (single edge)</title>
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#grid-template-masonry">
   <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>
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
index dd589f90c5..cfe1369e87 100644
--- 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
@@ -5,7 +5,7 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>Reference: Placement involving named lines</title>
+  <title>Reference: Definite column placement in a masonry grid (double edge)</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; }
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
index 0ad0dfcea3..4e51f09f94 100644
--- 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
@@ -5,8 +5,9 @@
 -->
 <html><head>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Placement involving named lines</title>
+  <title>CSS Grid Test: Definite column placement in a masonry grid (double edge)</title>
   <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#grid-template-masonry">
   <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>
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
index 898bff16d8..1a9f65aaf6 100644
--- 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
@@ -3,41 +3,38 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 grid {
   display: inline-grid;
   gap: 1px 2px;
-  grid-template-columns: repeat(4,auto);
-  grid-auto-rows: 1em;
+  grid-auto-rows: auto;
   border: 1px solid;
   padding: 0 1px 0 2px;
   vertical-align: top;
 }
-.fr {
+.auto grid {
+  grid-template-columns: repeat(4,auto);
+}
+.fr grid {
   grid-template-columns: 1fr 2fr 1fr 1fr;
 }
-.mixed {
+.mixed grid {
   grid-template-columns: 1fr 2fr min-content max-content;
 }
-
-item {
-  background-color: #444;
-  color: blue;
-}
 </style>
-</head>
+
 <body>
 
-<grid>
+<section class="auto">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -45,7 +42,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid style="grid-template-columns: 1ch repeat(3,auto)">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -58,7 +55,7 @@ item {
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-column:2">5</item>
+  <item style="width:2ch; grid-area:1/2">5</item>
 </grid>
 
 <grid>
@@ -66,26 +63,28 @@ item {
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:4ch; grid-column:2/span 2">5</item>
+  <item style="visibility: hidden">4</item>
+  <item style="width:4ch; grid-area:1/2/2/4">5</item>
 </grid>
 
 <grid>
-  <item>1</item>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="grid-area: 1/2/2/span 2">5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
 </grid>
 
-
 <grid>
-  <item>1</item>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="width:3ch; grid-area:1/2/2/4">5</item>
+  <item style="width:5ch; grid-area:2/1/3/4">6</item>
 </grid>
 
 <grid>
@@ -104,17 +103,20 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid style="grid-template-columns: repeat(4,1ch)">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:6ch; grid-column:span 3">5</item>
+  <item style="width:6ch; grid-area: 2/1/3/4">5</item>
+  <item style="width:6ch; grid-area: 2/2/3/5; visibility: hidden">5</item>
 </grid>
+</section>
 
 <!-- ditto with 'fr' sizing -->
 
-<grid class="fr">
+<section class="fr">
+<grid>
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -122,7 +124,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -130,42 +132,43 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid class="fr">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-column:2">5</item>
+  <item style="width:2ch; grid-area: 1/2">5</item>
 </grid>
 
-<grid class="fr">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:4ch; grid-column:2/span 2">5</item>
+  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
 </grid>
 
-<grid class="fr">
-  <item>1</item>
+<grid>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="grid-area: 1/2/2/span 2">5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
 </grid>
 
-
-<grid class="fr">
-  <item>1</item>
+<grid>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="width:3ch; grid-area:1/2/2/4">5</item>
+  <item style="width:5ch; grid-area:2/1/3/4">6</item>
 </grid>
 
-<grid class="fr">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -173,7 +176,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid class="fr">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -181,18 +184,20 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid class="fr" style="grid-template-columns: 1ch 2ch 1ch 1ch">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:6ch; grid-column:span 3">5</item>
+  <item style="width:6ch; grid-area: 2/1/3/4">5</item>
+  <item style="width:6ch; grid-area: 2/2/3/5; visibility: hidden">5</item>
 </grid>
-
+</section>
 
 <!-- ditto with mixed sizing -->
 
-<grid class="mixed" style="grid-template-columns: 2ch 4ch 1ch 1ch">
+<section class="mixed">
+<grid style="grid-template-columns: 2ch 4ch 2ch 2ch">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -200,7 +205,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch">
+<grid style="grid-template-columns: 2ch 4ch 2ch 2ch">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -208,42 +213,44 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid class="mixed">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-column:2">5</item>
+  <item style="width:2ch; grid-area: 1/2">5</item>
 </grid>
 
-<grid class="mixed">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:4ch; grid-column:2/span 2">5</item>
+  <item style="visibility: hidden">4</item>
+  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
 </grid>
 
-<grid class="mixed">
-  <item>1</item>
+<grid>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="grid-area: 1/2/2/span 2">5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
 </grid>
 
-
-<grid class="mixed">
-  <item>1</item>
+<grid>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="width:3ch; grid-area:1/2/2/4">5</item>
+  <item style="width:5ch; grid-area:2/1/3/4">6</item>
 </grid>
 
-<grid class="mixed">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -251,7 +258,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid class="mixed">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -259,13 +266,13 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:6ch; grid-column:span 3">5</item>
+  <item style="width:6ch; grid-area: 2/1/3/4">5</item>
+  <item style="width:6ch; grid-area: 2/2/3/5; visibility: hidden">5</item>
 </grid>
+</section>
 
-</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
index 0f6cdb1495..cc0608eafe 100644
--- 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
@@ -3,43 +3,40 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout intrinsic sizing</title>
+  <title>CSS Grid Test: Masonry layout column sizing - intrinsic</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="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 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 {
+.auto grid {
+  grid-template-columns: repeat(4,auto);
+}
+.fr grid {
   grid-template-columns: 1fr 2fr 1fr 1fr;
 }
-.mixed {
+.mixed grid {
   grid-template-columns: 1fr 2fr min-content max-content;
 }
-
-item {
-  background-color: #444;
-  color: blue;
-}
 </style>
-</head>
+
 <body>
 
-<grid>
+<section class="auto">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -47,7 +44,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid>
+<grid title="Wider 5th item 2ch">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -55,7 +52,7 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid>
+<grid title="Wider 5th item 2ch in col 2">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -63,7 +60,7 @@ item {
   <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
-<grid>
+<grid title="Wider 5th item 4ch in col 2-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -71,7 +68,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
-<grid>
+<grid title="5th item in col 2-3, wider 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -80,8 +77,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-
-<grid>
+<grid title="5th item 3ch in 2-3, 6th item 5ch in 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -90,7 +86,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid>
+<grid title="5th item span 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -98,7 +94,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid>
+<grid title="5th item 6ch span 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -106,17 +102,19 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid>
+<grid title="5th item 6ch span 3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 3">5</item>
 </grid>
+</section>
 
 <!-- ditto with 'fr' sizing -->
 
-<grid class="fr">
+<section class="fr">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -124,7 +122,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wider 5th item 2ch">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -132,7 +130,7 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wider 5th item 2ch in col 2">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -140,7 +138,7 @@ item {
   <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wider 5th item 4ch in col 2-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -148,7 +146,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item in col 2-3, wider 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -157,8 +155,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-
-<grid class="fr">
+<grid title="5th item 3ch in 2-3, 6th item 5ch in 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -167,7 +164,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item span 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -175,7 +172,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item 6ch span 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -183,18 +180,19 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item 6ch span 3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 3">5</item>
 </grid>
-
+</section>
 
 <!-- ditto with mixed sizing -->
 
-<grid class="mixed">
+<section class="mixed">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -202,7 +200,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wider 5th item 2ch">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -210,7 +208,7 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wider 5th item 2ch in col 2">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -218,7 +216,7 @@ item {
   <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wider 5th item 4ch in col 2-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -226,7 +224,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item in col 2-3, wider 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -236,7 +234,7 @@ item {
 </grid>
 
 
-<grid class="mixed">
+<grid title="5th item 3ch in 2-3, 6th item 5ch in 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -245,7 +243,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item span 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -253,7 +251,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item 6ch span 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -261,13 +259,12 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item 6ch span 3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 3">5</item>
 </grid>
+</section>
 
-</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
index 4f6519db94..ddae8e7fe3 100644
--- 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
@@ -3,42 +3,39 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 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 {
+.auto grid {
+  grid-template-columns: repeat(4,auto);
+}
+.fr grid {
   grid-template-columns: 1fr 2fr 1fr 1fr;
 }
-.mixed {
+.mixed grid {
   grid-template-columns: 1fr 2fr min-content max-content;
 }
-
-item {
-  background-color: #444;
-  color: blue;
-}
 </style>
-</head>
+
 <body>
 
-<grid>
+<section class="auto">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -46,7 +43,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid style="grid-template-columns: 1ch repeat(3,auto)">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -59,7 +56,7 @@ item {
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-column:2">5</item>
+  <item style="width:2ch; grid-area:1/2">5</item>
 </grid>
 
 <grid>
@@ -67,26 +64,28 @@ item {
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:4ch; grid-column:2/span 2">5</item>
+  <item style="visibility: hidden">4</item>
+  <item style="width:4ch; grid-area:1/2/2/4">5</item>
 </grid>
 
 <grid>
-  <item>1</item>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="grid-area: 1/2/2/span 2">5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
 </grid>
 
-
 <grid>
-  <item>1</item>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="width:3ch; grid-area:1/2/2/4">5</item>
+  <item style="width:5ch; grid-area:2/1/3/4">6</item>
 </grid>
 
 <grid>
@@ -105,17 +104,20 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid style="grid-template-columns: repeat(4,1ch)">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:6ch; grid-column:span 3">5</item>
+  <item style="width:6ch; grid-area: 2/1/3/4">5</item>
+  <item style="width:6ch; grid-area: 2/2/3/5; visibility: hidden">5</item>
 </grid>
+</section>
 
 <!-- ditto with 'fr' sizing -->
 
-<grid class="fr">
+<section class="fr">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -123,7 +125,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -131,42 +133,43 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid class="fr">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-column:2">5</item>
+  <item style="width:2ch; grid-area: 1/2">5</item>
 </grid>
 
-<grid class="fr">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:4ch; grid-column:2/span 2">5</item>
+  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
 </grid>
 
-<grid class="fr">
-  <item>1</item>
+<grid>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="grid-area: 1/2/2/span 2">5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
 </grid>
 
-
-<grid class="fr">
-  <item>1</item>
+<grid>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="width:3ch; grid-area:1/2/2/4">5</item>
+  <item style="width:5ch; grid-area:2/1/3/4">6</item>
 </grid>
 
-<grid class="fr">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -174,7 +177,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid class="fr">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -182,18 +185,20 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid class="fr" style="grid-template-columns: 1ch 1ch 1ch 1ch">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:6ch; grid-column:span 3">5</item>
+  <item style="width:6ch; grid-area: 2/1/3/4">5</item>
+  <item style="width:6ch; grid-area: 2/2/3/5; visibility: hidden">5</item>
 </grid>
-
+</section>
 
 <!-- ditto with mixed sizing -->
 
-<grid class="mixed" style="grid-template-columns: 2ch 1ch 1ch 1ch">
+<section class="mixed">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -201,7 +206,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -209,42 +214,44 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid class="mixed">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:2ch; grid-column:2">5</item>
+  <item style="width:2ch; grid-area: 1/2">5</item>
 </grid>
 
-<grid class="mixed">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:4ch; grid-column:2/span 2">5</item>
+  <item style="visibility: hidden">4</item>
+  <item style="width:4ch; grid-area: 1/2/2/4">5</item>
 </grid>
 
-<grid class="mixed">
-  <item>1</item>
+<grid>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="grid-area: 1/2/2/span 2">5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
 </grid>
 
-
-<grid class="mixed">
-  <item>1</item>
+<grid>
+  <item style="grid-column: 4">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>
+  <item style="visibility: hidden">4</item>
+  <item style="width:3ch; grid-area:1/2/2/4">5</item>
+  <item style="width:5ch; grid-area:2/1/3/4">6</item>
 </grid>
 
-<grid class="mixed">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -252,7 +259,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid class="mixed">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -260,13 +267,14 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch">
+<grid>
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="width:6ch; grid-column:span 3">5</item>
+  <item style="width:6ch; grid-area: 2/1/3/4">5</item>
+  <item style="width:6ch; grid-area: 2/2/3/5; visibility: hidden">5</item>
 </grid>
+</section>
+
 
-</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
index db83299bf5..3867bb13c8 100644
--- 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
@@ -3,44 +3,42 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout intrinsic sizing</title>
+  <title>CSS Grid Test: Masonry layout column sizing - min-content constraint</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="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 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 {
+
+.auto grid {
+  grid-template-columns: repeat(4,auto);
+}
+.fr grid {
   grid-template-columns: 1fr 2fr 1fr 1fr;
 }
-.mixed {
+.mixed grid {
   grid-template-columns: 1fr 2fr min-content max-content;
 }
-
-item {
-  background-color: #444;
-  color: blue;
-}
 </style>
-</head>
+
 <body>
 
-<grid>
+<section class="auto">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -48,7 +46,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid>
+<grid title="Wider 5th item 2ch">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -56,7 +54,7 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid>
+<grid title="Wider 5th item 2ch in col 2">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -64,7 +62,7 @@ item {
   <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
-<grid>
+<grid title="Wider 5th item 4ch in col 2-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -72,7 +70,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
-<grid>
+<grid title="5th item in col 2-3, wider 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -81,8 +79,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-
-<grid>
+<grid title="5th item 3ch in 2-3, 6th item 5ch in 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -91,7 +88,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid>
+<grid title="5th item spanning 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -99,7 +96,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid>
+<grid title="5th item 6ch spanning 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -107,17 +104,19 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid>
+<grid title="5th item 6ch spanning 3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 3">5</item>
 </grid>
+</section>
 
 <!-- ditto with 'fr' sizing -->
 
-<grid class="fr">
+<section class="fr">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -125,7 +124,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wider 5th item 2ch">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -133,7 +132,7 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wider 5th item 2ch in col 2">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -141,7 +140,7 @@ item {
   <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wider 5th item 4ch in col 2-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -149,7 +148,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item in col 2-3, wider 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -158,8 +157,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-
-<grid class="fr">
+<grid title="5th item 3ch in 2-3, 6th item 5ch in 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -168,7 +166,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item span 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -176,7 +174,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item 6ch span 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -184,18 +182,19 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item 6ch span 3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 3">5</item>
 </grid>
-
+</section>
 
 <!-- ditto with mixed sizing -->
 
-<grid class="mixed">
+<section class="mixed">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -203,7 +202,7 @@ item {
   <item>5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wider 5th item 2ch">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -211,7 +210,7 @@ item {
   <item style="width:2ch">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wider 5th item 2ch in col 2">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -219,7 +218,7 @@ item {
   <item style="width:2ch; grid-column:2">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wider 5th item 4ch in col 2-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -227,7 +226,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item in col 2-3, wider 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -236,8 +235,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-
-<grid class="mixed">
+<grid title="5th item 3ch in 2-3, 6th item 5ch in 1-3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -246,7 +244,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item spanning 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -254,7 +252,7 @@ item {
   <item style="grid-column:span 4">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item 6ch spanning 4">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -262,13 +260,12 @@ item {
   <item style="width:6ch; grid-column:span 4">5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item 6ch spanning 3">
   <item>1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
   <item style="width:6ch; grid-column:span 3">5</item>
 </grid>
+</section>
 
-</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
index 61eb21570d..044750dc45 100644
--- 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
@@ -3,267 +3,331 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 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 {
+.auto grid {
+  grid-template-columns: repeat(4,auto);
+}
+.fr grid {
   grid-template-columns: 1fr 2fr 1fr 1fr;
 }
-.mixed {
+.mixed grid {
   grid-template-columns: 1fr 2fr min-content max-content;
 }
 
 item {
-  background-color: #444;
-  color: blue;
+  align-self: start;
+}
+.hidden {
+  visibility: hidden;
+  height: 0;
 }
-item.start { align-self: start; }
 </style>
-</head>
+
 <body>
 
-<grid style="grid-template-rows: 1em 2em">
+<section class="auto">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item style="width:2ch">1</item>
-  <item>2 2</item>
-  <item>3 3</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
   <item>4</item>
-  <item>5 5</item>
+  <item style="grid-row: span 2">5 5</item>
 </grid>
 
-<grid style="grid: 1em 2em / 1ch repeat(3,auto); ">
+<grid style="grid-template-columns: repeat(4, 2ch)">
   <item>1</item>
-  <item>2 2</item>
-  <item>3 3</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
   <item>4</item>
-  <item style="width:2ch">5 5</item>
+  <item style="grid-row: span 2">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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-area: 1/2/3">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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
+
+  <item class="hidden">0</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>
+  <item style="grid-column: 4">1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden">0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item style="grid-column: 4">1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden">0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-area: 3/1/4/5">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 3/1/4/5">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 3/1/4/4">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden" style="width:6ch; grid-area: 3/2/4/5">0 0</item>
 </grid>
+</section>
 
 <!-- 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>
+<section class="fr">
+<grid style="grid-template-columns: repeat(4, 2ch)">
+  <item style="width:2ch">1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-row: span 2">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 style="grid-template-columns: repeat(4, 2ch)">
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-row: span 2">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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-area: 1/2/3">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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
+  <item class="hidden">0</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>
+  <item style="grid-column: 4">1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item class="hidden">0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item style="grid-column: 4">1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden">0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-area: 3/1/4/5">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 3/1/4/5">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 3/1/4/4">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden" style="width:6ch; grid-area: 3/2/4/5">0 0</item>
 </grid>
+</section>
 
 <!-- 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>
+<section class="mixed">
+<grid style="grid-template-columns: repeat(3, 2ch) max-content">
+  <item style="width:2ch">1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-row: span 2">5 5</item>
+  <item class="hidden" style="grid-area: 2/4/4">0 0</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 style="grid-template-columns: repeat(3, 2ch) max-content">
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-row: span 2">5 5</item>
+  <item class="hidden" style="grid-area: 2/4/4">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-area: 1/2/3">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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
+  <item class="hidden">0</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>
+  <item style="grid-column: 4">1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+  <item class="hidden">0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item style="grid-column: 4">1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden">0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-area: 3/1/4/5">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 3/1/4/5">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 3/1/4/4">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden" style="width:6ch; grid-area: 3/2/4/5">0 0</item>
 </grid>
+</section>
 
-</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
index e43bc86c9b..48489d3c86 100644
--- 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
@@ -3,44 +3,41 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout min-content sizing</title>
+  <title>CSS Grid Test: Masonry layout column sizing - min-content</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="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 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 {
+.auto grid {
+  grid-template-columns: repeat(4,auto);
+}
+.fr grid {
   grid-template-columns: 1fr 2fr 1fr 1fr;
 }
-.mixed {
+.mixed grid {
   grid-template-columns: 1fr 2fr min-content max-content;
 }
-
-item {
-  background-color: #444;
-  color: blue;
-}
 </style>
-</head>
+
 <body>
 
-<grid>
+<section class="auto">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -48,7 +45,7 @@ item {
   <item>5 5</item>
 </grid>
 
-<grid>
+<grid title="Wrapped 5th item 2ch">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -56,7 +53,7 @@ item {
   <item style="width:2ch">5 5</item>
 </grid>
 
-<grid>
+<grid title="Wrapped 5th item 2ch col 2">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -64,7 +61,7 @@ item {
   <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
-<grid>
+<grid title="5th item 4ch in col 2-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -72,7 +69,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
-<grid>
+<grid title="5th item in col 2-3, 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -81,7 +78,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid>
+<grid title="5th item 3ch in col 2-3, 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -90,7 +87,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid>
+<grid title="5th item span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -98,7 +95,7 @@ item {
   <item style="grid-column:span 4">5 5</item>
 </grid>
 
-<grid>
+<grid title="5th item 6ch span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -106,17 +103,19 @@ item {
   <item style="width:6ch; grid-column:span 4">5 5</item>
 </grid>
 
-<grid>
+<grid title="5th item 6ch span 3">
   <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>
+</section>
 
 <!-- ditto with 'fr' sizing -->
 
-<grid class="fr">
+<section class="fr">
+<grid title="Wider first item 2ch">
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -124,7 +123,7 @@ item {
   <item>5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wrapped last item 2ch">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -132,7 +131,7 @@ item {
   <item style="width:2ch">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wrapped last item 2ch col 2">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -140,7 +139,7 @@ item {
   <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Last item 4ch col 2-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -148,7 +147,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Item col 2-3 + Item 5ch col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -157,7 +156,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="fr">
+<grid title="Item 3ch col 2-3 + Item 5ch col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -166,7 +165,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="fr">
+<grid title="Last item span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -174,7 +173,7 @@ item {
   <item style="grid-column:span 4">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Last item 6ch span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -182,17 +181,19 @@ item {
   <item style="width:6ch; grid-column:span 4">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Last item 6ch span 3">
   <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>
+</section>
 
 <!-- ditto with mixed sizing -->
 
-<grid class="mixed">
+<section class="mixed">
+<grid title="Wider first item 2ch">
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -200,7 +201,7 @@ item {
   <item>5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wrapped last item 2ch">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -208,7 +209,7 @@ item {
   <item style="width:2ch">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wrapped last item 2ch col 2">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -216,7 +217,7 @@ item {
   <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Last item 4ch col 2-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -224,7 +225,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Item col 2-3 + Item 5ch col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -233,7 +234,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Item 3ch col 2-3 + Item 5ch col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -242,7 +243,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Last item span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -250,7 +251,7 @@ item {
   <item style="grid-column:span 4">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Last item 6ch span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -258,13 +259,12 @@ item {
   <item style="width:6ch; grid-column:span 4">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Last item 6ch span 3">
   <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>
+</section>
 
-</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
index 6a5d81fedb..302dcad116 100644
--- 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
@@ -3,268 +3,355 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 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 {
+.auto grid {
+  grid-template-columns: repeat(4, auto);
+}
+.fr grid {
   grid-template-columns: 1fr 2fr 1fr 1fr;
 }
-.mixed {
+.mixed grid {
   grid-template-columns: 1fr 2fr min-content max-content;
 }
 
 item {
-  background-color: #444;
-  color: blue;
+  align-self: start;
+}
+.hidden {
+  visibility: hidden;
+  height: 0;
 }
-item.start { align-self: start; }
 </style>
-</head>
+
 <body>
 
-<grid style="grid: 1em 2em / 2ch 3ch 3ch 1ch">
+<section class="auto">
+<grid>
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
   <item>5 5</item>
+
+  <item class="hidden" style="grid-column: 4">0 0</item>
 </grid>
 
-<grid style="grid: 1em 2em / 1ch 3ch 3ch 1ch; ">
+<grid>
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
   <item>4</item>
-  <item style="width:2ch">5 5</item>
+  <item style="width: 2ch; grid-area: 2/1">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
-<grid style="grid-template-rows: 1em 2em">
-  <item class="start">1</item>
+<grid>
+  <item>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>
+  <item style="grid-area: 2/1">4</item>
+  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/2">0 0</item>
 </grid>
 
 <grid>
-  <item class="start">1</item>
+  <item>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>
+  <item style="grid-area: 2/2">4</item>
+  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/2">0 0</item>
+  <item class="hidden" style="grid-area: 2/3">0 0</item>
 </grid>
 
 <grid>
-  <item class="start">1</item>
+  <item style="grid-area: 1/4">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>
+  <item>4</item>
+  <item style="grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden" style="grid-area: 1/1">0</item>
+  <item class="hidden" style="grid-area: 2/2">0 0</item>
+  <item class="hidden" style="grid-area: 2/3">0 0</item>
+  <item class="hidden" style="grid-area: 1/4">0 0</item>
 </grid>
 
 <grid>
-  <item class="start">1</item>
+  <item style="grid-area: 1/4">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>
+  <item>4</item>
+  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden" style="grid-area: 1/1">0</item>
+  <item class="hidden" style="grid-area: 2/2">0 0</item>
+  <item class="hidden" style="grid-area: 2/3">0 0</item>
+  <item class="hidden" style="grid-area: 1/4">0 0</item>
 </grid>
 
 <grid>
-  <item class="start">1</item>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
-  <item class="start">4</item>
-  <item style="grid-column:span 4">5 5</item>
+  <item>4</item>
+  <item style="grid-area: 2/1/3/5">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
 <grid>
-  <item class="start">1</item>
+  <item>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>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 2/1/3/5">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
 <grid>
-  <item class="start">1</item>
+  <item>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>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 2/1/3/4">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
+  <item class="hidden" style="width:6ch; grid-area: 2/2/3/5">0 0</item>
 </grid>
+</section>
 
 <!-- ditto with 'fr' sizing -->
 
-<grid class="fr">
-  <item style="width:2ch" class="start">1</item>
+<section class="fr">
+<grid>
+  <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
-  <item class="start">4</item>
+  <item>4</item>
   <item>5 5</item>
+  <item class="hidden" style="grid-area: 2/4/4">0 0</item>
 </grid>
 
-<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch">
-  <item class="start">1</item>
+<grid>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
-  <item class="start">4</item>
-  <item style="width:2ch">5 5</item>
+  <item>4</item>
+  <item style="width: 2ch">5 5</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
-<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch">
-  <item class="start">1</item>
+<grid>
+  <item>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>
+  <item>4</item>
+  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
 </grid>
 
-<grid class="fr">
-  <item class="start">1</item>
+<grid>
+  <item>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>
+  <item>4</item>
+  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
+  <item class="hidden">0</item>
 </grid>
 
-<grid class="fr">
-  <item class="start">1</item>
+<grid>
+  <item style="grid-area: 1/4">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>
+  <item>4</item>
+  <item style="grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden" style="grid-area: 1/1">0</item>
+  <item class="hidden" style="grid-area: 2/2">0 0</item>
+  <item class="hidden" style="grid-area: 2/3">0 0</item>
+  <item class="hidden" style="grid-area: 1/4">0 0</item>
 </grid>
 
-<grid class="fr">
-  <item class="start">1</item>
+<grid>
+  <item style="grid-area: 1/4">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>
+  <item>4</item>
+  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden" style="grid-area: 1/1">0</item>
+  <item class="hidden" style="grid-area: 2/2">0 0</item>
+  <item class="hidden" style="grid-area: 2/3">0 0</item>
+  <item class="hidden" style="grid-area: 1/4">0 0</item>
 </grid>
 
-<grid class="fr">
-  <item class="start">1</item>
+<grid>
+  <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
-  <item class="start">4</item>
-  <item style="grid-column:span 4">5 5</item>
+  <item>4</item>
+  <item style="grid-area: 2/1/3/5">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
-<grid class="fr">
-  <item class="start">1</item>
+<grid>
+  <item>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>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 2/1/3/5">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
-<grid class="fr">
-  <item class="start">1</item>
+<grid>
+  <item>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>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 2/1/3/4">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
+  <item class="hidden" style="width:6ch; grid-area: 2/2/3/5">0 0</item>
 </grid>
+</section>
 
 <!-- ditto with mixed sizing -->
 
-<grid class="mixed" style="grid: 1em 2em / 2ch 4ch 1ch 1ch">
-  <item style="width:2ch" class="start">1</item>
+<section class="mixed">
+<grid>
+  <item style="width:2ch">1</item>
   <item>2 2</item>
-  <item>3 3</item>
-  <item class="start">4</item>
-  <item>5 5</item>
+  <item style="grid-area: 1/3/3">3 3</item>
+  <item>4</item>
+  <item style="grid-area: 2/1">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/3; width: 2ch">0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
-<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch">
-  <item class="start">1</item>
+<grid>
+  <item>1</item>
   <item>2 2</item>
-  <item>3 3</item>
-  <item class="start">4</item>
-  <item style="width:2ch">5 5</item>
+  <item style="grid-area: 1/3/3">3 3</item>
+  <item>4</item>
+  <item style="width: 2ch; grid-area: 2/1">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/3; width: 2ch">0</item>
+  <item class="hidden" style="grid-area: 2/4">0 0</item>
 </grid>
 
-<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch">
-  <item class="start">1</item>
+<grid>
+  <item>1</item>
+  <item style="grid-row: span 2">2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item style="grid-area: 2/1">4</item>
+  <item style="width:2ch; grid-area: 1/2/3">5 5</item>
+
+  <item class="hidden" style="grid-area: 2/1">0 0</item>
+</grid>
+
+<grid>
+  <item>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>
+  <item>4</item>
+  <item style="width:4ch; grid-area: 1/2/auto/4">5 5</item>
 
-<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>
+  <item class="hidden">0</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>
+  <item style="grid-column: 4">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden" style="grid-area: 2/2">0 0</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>
+  <item style="grid-column: 4">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-area: 1/2/2/4">5 5</item>
+  <item style="width:5ch; grid-area: 2/1/3/4">6</item>
+
+  <item class="hidden" style="grid-area: 2/3">0 0</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>
+  <item>1</item>
+  <item>2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="grid-area: 3/1/4/5">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item>2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 3/1/4/5">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</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>
+  <item>1</item>
+  <item>2 2</item>
+  <item style="grid-row: span 2">3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-area: 3/1/4/4">5 5</item>
+
+  <item class="hidden">0 0</item>
+  <item class="hidden">0 0</item>
+  <item class="hidden" style="width:6ch; grid-area: 3/2/4/5">0 0</item>
 </grid>
+</section>
 
-</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
index 5365208c00..c8bc671bb3 100644
--- 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
@@ -3,44 +3,41 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout max-content sizing</title>
+  <title>CSS Grid Test: Masonry layout column sizing - max-content</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="help" href="https://drafts.csswg.org/css-grid-3">
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 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 {
+.auto grid {
+  grid-template-columns: repeat(4,auto);
+}
+.fr grid {
   grid-template-columns: 1fr 2fr 1fr 1fr;
 }
-.mixed {
+.mixed grid {
   grid-template-columns: 1fr 2fr min-content max-content;
 }
-
-item {
-  background-color: #444;
-  color: blue;
-}
 </style>
-</head>
+
 <body>
 
-<grid>
+<section class="auto">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -48,7 +45,7 @@ item {
   <item>5 5</item>
 </grid>
 
-<grid>
+<grid title="Wrapped 5th item 2ch">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -56,7 +53,7 @@ item {
   <item style="width:2ch">5 5</item>
 </grid>
 
-<grid>
+<grid title="Wrapped 5th item 2ch in col 2">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -64,7 +61,7 @@ item {
   <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
-<grid>
+<grid title="5th item 4ch in col 2-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -72,7 +69,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
-<grid>
+<grid title="4th item in col 2-3, 5th item 5ch in col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -81,7 +78,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid>
+<grid title="5th item 3ch in col 2-3, 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -90,7 +87,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid>
+<grid title="5th item span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -98,7 +95,7 @@ item {
   <item style="grid-column:span 4">5 5</item>
 </grid>
 
-<grid>
+<grid title="5th item 6ch span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -106,17 +103,19 @@ item {
   <item style="width:6ch; grid-column:span 4">5 5</item>
 </grid>
 
-<grid>
+<grid title="5th item 6ch span 3">
   <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>
+</section>
 
 <!-- ditto with 'fr' sizing -->
 
-<grid class="fr">
+<section class="fr">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -124,7 +123,7 @@ item {
   <item>5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wrapped 5th item 2ch">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -132,7 +131,7 @@ item {
   <item style="width:2ch">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="Wrapped 5th item 2ch in col 2">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -140,7 +139,7 @@ item {
   <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item 4ch in col 2-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -148,7 +147,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="4th item in col 2-3, 5th item 5ch in col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -157,7 +156,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item 3ch in col 2-3, 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -166,7 +165,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -174,7 +173,7 @@ item {
   <item style="grid-column:span 4">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item 6ch span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -182,17 +181,19 @@ item {
   <item style="width:6ch; grid-column:span 4">5 5</item>
 </grid>
 
-<grid class="fr">
+<grid title="5th item 6ch span 3">
   <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>
+</section>
 
 <!-- ditto with mixed sizing -->
 
-<grid class="mixed">
+<section class="mixed">
+<grid title="Wider 1st item 2ch">
   <item style="width:2ch">1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -200,7 +201,7 @@ item {
   <item>5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wrapped 5th item 2ch">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -208,7 +209,7 @@ item {
   <item style="width:2ch">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="Wrapped 5th item 2ch in col 2">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -216,7 +217,7 @@ item {
   <item style="width:2ch; grid-column:2">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item 4ch in col 2-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -224,7 +225,7 @@ item {
   <item style="width:4ch; grid-column:2/span 2">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="4th item in col 2-3, 5th item 5ch in col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -233,7 +234,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item 3ch in col 2-3, 6th item 5ch in col 1-3">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -242,7 +243,7 @@ item {
   <item style="width:5ch; grid-column:1/span 3">6</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -250,7 +251,7 @@ item {
   <item style="grid-column:span 4">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item 6ch span 4">
   <item>1</item>
   <item>2 2</item>
   <item>3 3</item>
@@ -258,13 +259,12 @@ item {
   <item style="width:6ch; grid-column:span 4">5 5</item>
 </grid>
 
-<grid class="mixed">
+<grid title="5th item 6ch span 3">
   <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>
+</section>
 
-</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
index e564fb1b3e..725f646ebd 100644
--- 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
@@ -3,35 +3,32 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <meta charset="utf-8">
-  <title>Reference: Masonry layout intrinsic sizing</title>
+  <title>Reference: Masonry layout row sizing (vertical writing mode)</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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 grid {
   display: inline-grid;
   gap: 1px 2px;
+  grid-template-rows: repeat(4,auto);
   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)">
+<grid style="grid-template-rows: repeat(4, 3ch)">
   <item style="height:3ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -43,7 +40,7 @@ item {
   <item>9 9</item>
 </grid>
 
-<grid style="grid-template-rows: repeat(4,1ch)">
+<grid style="grid-template-rows: repeat(4,3ch)">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -79,5 +76,3 @@ 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
index cf9b680869..83afd5bafa 100644
--- 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
@@ -3,17 +3,16 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout intrinsic sizing</title>
+  <title>CSS Grid Test: Masonry layout row sizing (vertical writing mode)</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="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 grid {
   display: inline-grid;
@@ -26,15 +25,13 @@ grid {
 }
 
 item {
-  background-color: #444;
-  color: blue;
   writing-mode: vertical-lr;
 }
 </style>
-</head>
+
 <body>
 
-<grid>
+<grid title="First item 3ch">
   <item style="height:3ch">1</item>
   <item>2</item>
   <item>3</item>
@@ -46,7 +43,7 @@ item {
   <item>9 9</item>
 </grid>
 
-<grid>
+<grid title="Fifth item 3ch">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -58,7 +55,7 @@ item {
   <item>9 9</item>
 </grid>
 
-<grid>
+<grid title="Fifth item 3ch row 1">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -70,7 +67,7 @@ item {
   <item>9 9</item>
 </grid>
 
-<grid>
+<grid title="Fifth item 3ch col 1 (ignored)">
   <item>1</item>
   <item>2</item>
   <item>3</item>
@@ -82,5 +79,3 @@ 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
index e1cb015cfe..1a88c2b4cb 100644
--- 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
@@ -3,58 +3,49 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <meta charset="utf-8">
-  <title>Reference: Masonry layout intrinsic sizing</title>
+  <title>Reference: Masonry layout row auto-fill 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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 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 style="width:3ch; grid-column: span 2">1 1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="grid-row:2">5 5</item>
+  <item style="grid-column: span 2">5 5</item>
 </grid>
 
 <grid>
-  <item style="width:3ch">1 1</item>
+  <item style="width:3ch; grid-column: span 2">1 1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="grid-row:2">5 5</item>
+  <item style="grid-column: span 2">5 5</item>
 </grid>
 
 <grid style="height:5em">
-  <item style="width:3ch">1 1</item>
+  <item style="width:3ch; grid-column: span 2">1 1</item>
   <item>2</item>
   <item>3</item>
   <item>4</item>
-  <item style="grid-row:2">5 5</item>
+  <item style="grid-column: span 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
index 49fd53bb79..ad54800921 100644
--- 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
@@ -3,17 +3,16 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
-<html><head>
+<html>
   <meta charset="utf-8">
-  <title>CSS Grid Test: Masonry layout intrinsic sizing</title>
+  <title>CSS Grid Test: Masonry layout row auto-fill 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="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
   <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;
-}
+
+@import "support/masonry-intrinsic-sizing-visual.css";
 
 grid {
   display: inline-grid;
@@ -24,16 +23,12 @@ grid {
   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);">
+<grid title="max-height 5em"
+      style="max-height:5em; grid-template-rows: repeat(auto-fill,1em);">
   <item>1 1</item>
   <item>2</item>
   <item>3</item>
@@ -41,7 +36,8 @@ item {
   <item>5 5</item>
 </grid>
 
-<grid style="min-height:4em; grid-template-rows: repeat(auto-fill,1em);">
+<grid title="min-height 4em"
+      style="min-height:4em; grid-template-rows: repeat(auto-fill,1em);">
   <item>1 1</item>
   <item>2</item>
   <item>3</item>
@@ -49,7 +45,8 @@ item {
   <item>5 5</item>
 </grid>
 
-<grid style="height:5em; grid-template-rows: repeat(auto-fill,1em);">
+<grid title="height 5em"
+      style="height:5em; grid-template-rows: repeat(auto-fill,1em);">
   <item>1 1</item>
   <item>2</item>
   <item>3</item>
@@ -57,5 +54,3 @@ item {
   <item>5 5</item>
 </grid>
 
-</body>
-</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/support/masonry-intrinsic-sizing-visual.css b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/support/masonry-intrinsic-sizing-visual.css
new file mode 100644
index 0000000000..150f0f2679
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/support/masonry-intrinsic-sizing-visual.css
@@ -0,0 +1,48 @@
+/* Basic Testing Setup */
+html,body {
+  color: black; background: white; font: 15px/1 Ahem, monospace;
+  padding: 1em 0; margin: 0;
+  max-width: 800px; height: calc(600px - 2em);
+  border-bottom: 1px solid orange; /* Do Not Cross */
+}
+
+
+/* Visualization */
+grid {
+  margin: 0.5em;
+}
+item {
+  background-color: gray;
+  color: blue;
+}
+
+/* Debugging Aid */
+section {
+  border-top: 1px solid gray;
+  counter-reset: grid;
+}
+
+grid {
+  margin-inline-start: 1em;
+  counter-increment: grid;
+}
+grid::before {
+  position: absolute;
+  margin: 0 -1.1em;
+  font: smaller sans-serif;
+  content: counter(grid);
+  color: navy;
+}
+
+grid:hover {
+  outline: navy solid;
+}
+grid:hover item[style] {
+  color: navy;
+}
+grid:hover::after {
+  content: attr(title);
+  position: absolute;
+  inset: 0.1em auto auto 0.5rem;
+  font: bold smaller sans-serif;
+}
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
index 649e1edb7c..2438df8bac 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-item-placement-001-ref.html">
   <style>
     html,body {
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
index 7d321bf731..8833cdfcfc 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-item-placement-002-ref.html">
   <style>
     html,body {
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
index 8a183cffc6..bde2fa0e66 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-item-placement-003-ref.html">
   <style>
     html,body {
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
index 4d1a454a86..52867cd4a2 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-item-placement-004-ref.html">
   <style>
 html,body {
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
index ddfbc9e54e..7d4993fb3a 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-item-placement-005-ref.html">
   <style>
 html,body {
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
index 0082d72df2..467e313d33 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-item-placement-006-ref.html">
   <style>
 html,body {
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
index 67a02560f4..4c8053ba66 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-item-placement-007-ref.html">
   <style>
 html,body {
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
index e14ca3173a..f3503bf071 100644
--- 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
@@ -3,7 +3,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
 </head>
 
 <body>
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
index c68a9787b8..bdf651d77b 100644
--- 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
@@ -3,7 +3,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
   <link rel="match" href="masonry-item-placement-008-ref.html">
 </head>
 
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
index e48b650253..b5eb7f4984 100644
--- 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
@@ -4,7 +4,7 @@
 <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">
+<meta name="assert" content="Test passes if SVG uses grid's content logical width for its containing block size and get sized to 100px x 100px">
 <style>
 grid {
     display: grid;
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
index b36efb664d..0ee2ee78c0 100644
--- 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
@@ -1,34 +1,34 @@
 <!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>
+  <meta charset="utf-8">
+  <title>CSS Masonry Test: getComputedStyle().gridTemplateColumns</title>
+  <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-template-masonry">
+  <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">
@@ -37,59 +37,59 @@
   </div>
 </div>
 <script>
-test_computed_value("grid-template-rows", 'masonry', 'masonry');
-test_computed_value("grid-template-columns", 'none', 'none'); // "none" without #child
+  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 <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 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-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');
+  // <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))', '150px 150px');
 
-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]');
+  test_computed_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
+          '30px [three four] 30px 40px [five six] 30px [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');
+  // <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-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>?
+  // <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]');
+  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/masonry-not-inhibited-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001.html
index 54499d3d69..1c912feb1f 100644
--- a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001.html
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <title>CSS Grid Test: Masonry layout shouldn't be inhibited simply due to being an independent formatting context (unlike subgrid)</title>
 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3/#grid-template-masonry">
 <link rel="match" href="masonry-not-inhibited-001-ref.html">
 <style>
 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
index d01f52ea04..37b3d01fb4 100644
--- 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
@@ -7,7 +7,8 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-layout-algorithm">
   <link rel="match" href="masonry-order-001-ref.html">
   <style>
 html,body {
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
index abad3d44b8..5ebdec2719 100644
--- 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
@@ -7,7 +7,8 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3/#masonry-layout-algorithm">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
   <link rel="match" href="masonry-order-002-ref.html">
   <style>
     html,body {
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
index e3245095fa..2204c06f72 100644
--- 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
@@ -3,7 +3,8 @@
 <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">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3/#grid-template-masonry">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/parsing-testcommon.js"></script>
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
index de07dfb78d..c71ba68612 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
   <link rel="match" href="masonry-subgrid-001-ref.html">
 <style>
 html,body {
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
index 466e95eb03..167f2d4496 100644
--- 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
@@ -7,7 +7,7 @@
   <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="help" href="https://drafts.csswg.org/css-grid-3/#subgrids">
   <link rel="match" href="masonry-subgrid-002-ref.html">
 <style>
 html,body {
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html
index 7196886492..53447e0dad 100644
--- a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html
@@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html>
-
+<title>CSS Reference: Masonry grid container size changes when item sizes change</title>
 <head>
 <meta charset="utf-8">
 <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
-<link rel="help" href="https://drafts.csswg.org/css-grid-3">
-<meta name="assert" content="When the height of an element in the grid changes, ensure the grid is properly resized">
 </head>
 
 <style>
   grid {
-    display: grid;
+    display: inline-grid;
     grid-template-rows: masonry;
     grid-template-columns: auto;
     grid-gap: 10px;
@@ -20,7 +18,7 @@
   item1 {
     background-color: grey;
     height: 125px;
-    width: 250px;
+    width: 300px;
   }
   item2 {
     background-color: grey;
@@ -35,4 +33,4 @@
     <item2>2</item2>
   </grid>
 </body>
-</html>
-\ No newline at end of file
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html
index 06c2901f27..dbff19f28e 100644
--- a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html
@@ -1,17 +1,18 @@
 <!DOCTYPE html>
-<html>
+<html class="reftest-wait">
 
 <head>
 <meta charset="utf-8">
+<title>CSS Test: Masonry grid container size changes when item sizes change</title>
 <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
 <link rel="help" href="https://drafts.csswg.org/css-grid-3">
 <link rel="match" href="masonry-track-sizing-check-grid-height-on-resize-ref.html">
-<meta name="assert" content="When the height of an element in the grid changes, ensure the grid is properly resized">
+<meta name="assert" content="Test passes if when the size of an item in the masonry grid changes, the grid container is properly resized">
 </head>
 
 <style>
   grid {
-    display: grid;
+    display: inline-grid;
     grid-template-rows: masonry;
     grid-template-columns: auto;
     grid-gap: 10px;
@@ -32,8 +33,11 @@
   </grid>
 </body>
 <script>
-    /* Force a relayout */
-    document.body.offsetHeight;
-    document.querySelector("item").style["height"] = "125px";
+    document.body.offsetHeight; // Force a relayout
+    var gridItem = document.querySelector('item');
+    gridItem.style.height = '125px';
+    gridItem.style.width = '300px';
+    document
+    document.documentElement.className = '';
 </script>
-</html>
-\ No newline at end of file
+</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
index 5a31517183..3e973b7fe7 100644
--- 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
@@ -12,7 +12,7 @@
 <style>
 grid {
   display: grid;
-  grid-template-columns: 50px 1fr;
+  grid-template-columns: 100px 1fr;
   grid-template-rows: 50px 250px;
   width: 300px;
   height: 100px;
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
index 51e657e2a4..eb84b2e6bd 100644
--- 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
@@ -12,7 +12,7 @@
 <style>
 grid {
   display: grid;
-  grid-template-columns: 1fr 50px;
+  grid-template-columns: 1fr 100px;
   grid-template-rows: 1fr 50px;
   width: 300px;
   height: 100px;
diff --git a/testing/web-platform/tests/css/css-grid/min-size-auto-overflow-clip-ref.html b/testing/web-platform/tests/css/css-grid/min-size-auto-overflow-clip-ref.html
new file mode 100644
index 0000000000..64e6ff2d99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/min-size-auto-overflow-clip-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  .flex {
+    display: flex;
+    flex-direction: column;
+  }
+  .grid {
+    display: grid;
+    flex-basis: 20px;
+    border: 1px solid;
+  }
+</style>
+<div class="flex">
+  <div class="grid">
+    <div style="height: 50px;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/min-size-auto-overflow-clip.html b/testing/web-platform/tests/css/css-grid/min-size-auto-overflow-clip.html
new file mode 100644
index 0000000000..3dfd2c18f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/min-size-auto-overflow-clip.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+<link rel="match" href="min-size-auto-overflow-clip-ref.html">
+<title>overflow: visible and clip behave the same for min-size purposes</title>
+<style>
+  .flex {
+    display: flex;
+    flex-direction: column;
+  }
+  .grid {
+    display: grid;
+    flex-basis: 20px;
+    border: 1px solid;
+  }
+</style>
+<div class="flex">
+  <div class="grid" style="overflow: clip">
+    <div style="height: 50px;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-013.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-013.html
new file mode 100644
index 0000000000..a964cf7813
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-013.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Clamping a subgrid's own grid-template-areas</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#grid-template-areas-property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  background: red;
+  display: grid;
+  grid-template: 100px 100px / 100px;
+  height: 100px;
+  width: 100px;
+}
+.subgrid {
+  display: grid;
+  grid-template-areas: "item item"
+                       "item item";
+  grid-template-rows: subgrid;
+}
+.item {
+  background: green;
+  grid-area: item;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="item"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2.html
index 0a612d66d1..1b8ff935a6 100644
--- a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2.html
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-004-2.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
 <link rel="match" href="custom-highlight-painting-004-2-ref.html">
 <meta name="assert" value="When painting overlapping highlights with the same .priority, the one added last should be painted on top; and style properties not defined by the one on top (background-color in this case) should follow the rules of the next Highlight from top to bottom until there's one that overwrites default (or use default value otherwise).">
-<meta name="fuzzy" content="0-88;0-1">
+<meta name="fuzzy" content="0-88;0-4">
 <style>
   ::highlight(foo) {
     color:blue;
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020-ref.html
new file mode 100644
index 0000000000..92cf04c180
--- /dev/null
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Highlight API Test: Highlighing Ligatures Ref</title>
+<style>
+  @font-face {
+    font-family: 'mplus';
+    src: url('../../../fonts/mplus-1p-regular.woff');
+  }
+  div {
+      font-size: 7em;
+      font-family: mplus, sans-serif;
+  }
+  ::selection {
+    color:green;
+    text-decoration: blue 2px line-through;
+  }
+</style>
+<body><div>fii ffi fff</div>
+<script>
+  let textNode = document.body.firstChild.firstChild;
+
+  let r1 = new Range();
+  r1.setStart(textNode, 1);
+  r1.setEnd(textNode, 9);
+  window.getSelection().addRange(r1);
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020.html
new file mode 100644
index 0000000000..64ae924aa9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-020.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlighting Ligatures</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="match" href="custom-highlight-painting-020-ref.html">
+<meta name="assert" value="Highlights should split ligatures.">
+<meta name="fuzzy" content="0-128;0-28">
+<style>
+  @font-face {
+    font-family: 'mplus';
+    src: url('../../../fonts/mplus-1p-regular.woff');
+  }
+  ::highlight(foo) {
+    color:green;
+    text-decoration: blue 2px line-through;
+  }
+  div {
+      font-size: 7em;
+      font-family: mplus, serif;
+  }
+</style>
+<body><div>fii ffi fff</div>
+<script>
+  let textNode = document.body.firstChild.firstChild;
+
+  let r1 = new Range();
+  r1.setStart(textNode, 1);
+  r1.setEnd(textNode, 9);
+  let h1 = new Highlight(r1);
+  CSS.highlights.set("foo", h1);
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021-ref.html
new file mode 100644
index 0000000000..1ec68549b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlighting thick text - Reference</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+  body {
+    -webkit-text-stroke-width: 3px;
+    font-size: 25px;
+  }
+  span {
+    -webkit-text-stroke-width: 0px;
+    background-color: green;
+  }
+</style>
+<body>This<span> thick text </span>should not be highlighted</body>
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021.html
new file mode 100644
index 0000000000..29ee123457
--- /dev/null
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-021.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: Highlighting thick text</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-text">
+<link rel="match" href="custom-highlight-painting-021-ref.html">
+<meta name="assert" value="Text with -webkit-text-stroke-width should not be highlighted.">
+<meta name="fuzzy" content="0-128;0-4">
+<style>
+  body {
+    -webkit-text-stroke-width: 3px;
+    font-size: 25px;
+  }
+  ::highlight(foo) {
+    background-color: green;
+  }
+</style>
+<body>This thick text should not be highlighted</body>
+<script>
+  let textNode = document.body.firstChild;
+
+  let r1 = new Range();
+  r1.setStart(textNode, 4);
+  r1.setEnd(textNode, 16);
+
+  let h1 = new Highlight(r1);
+
+  CSS.highlights.set("foo", h1);
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001-ref.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001-ref.html
index b46c679c9f..c2bf7ae7bd 100644
--- a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001-ref.html
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001-ref.html
@@ -2,14 +2,25 @@
 <link rel="stylesheet" href="../../css-pseudo/support/highlights.css">
 <meta charset="utf-8">
 <style>
-    :root {
+    #verticalRL {
         writing-mode: vertical-rl;
     }
-
+    #verticalLR {
+        writing-mode: vertical-lr;
+    }
+    #sidewaysRL {
+        writing-mode: sideways-rl;
+    }
+    #sidewaysLR {
+        writing-mode: sideways-lr;
+    }
     .highlighted {
       background-color: yellow;
       color: blue;
     }
 </style>
 <body>
-<div class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
+<div id="verticalRL" class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
+<div id="verticalLR" class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
+<div id="sidewaysRL" class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
+<div id="sidewaysLR" class="highlight_reftest"><span class="highlighted">One two </span><span>three…</span></div>
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html
index 9fe2bdcd5f..ba25037976 100644
--- a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html
@@ -5,21 +5,44 @@
 <link rel="match" href="custom-highlight-painting-vertical-writing-mode-001-ref.html">
 <link rel="stylesheet" href="../../css-pseudo/support/highlights.css">
 <meta name="assert" value="::highlight overlay is painted correctly when the highlighted text is in a vertical writing mode">
+<meta name="fuzzy" content="0-255;0-18">
 <style>
-  :root {
+  #verticalRL {
       writing-mode: vertical-rl;
   }
+  #verticalLR {
+      writing-mode: vertical-lr;
+  }
+  #sidewaysRL {
+      writing-mode: sideways-rl;
+  }
+  #sidewaysLR {
+      writing-mode: sideways-lr;
+  }
   ::highlight(example-highlight) {
     background-color: yellow;
     color: blue;
   }
 </style>
 <body>
-<div class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="verticalRL" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="verticalLR" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="sidewaysRL" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="sidewaysLR" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
 <script>
-  let r = new Range();
-  r.setStart(document.querySelector("div"), 0);
-  r.setEnd(document.querySelector("div"), 2);
+  let verticalRLRange = new Range();
+  verticalRLRange.setStart(verticalRL, 0);
+  verticalRLRange.setEnd(verticalRL, 2);
+  let verticalLRRange = new Range();
+  verticalLRRange.setStart(verticalLR, 0);
+  verticalLRRange.setEnd(verticalLR, 2);
+  let sidewaysRLRange = new Range();
+  sidewaysRLRange.setStart(sidewaysRL, 0);
+  sidewaysRLRange.setEnd(sidewaysRL, 2);
+  let sidewaysLRRange = new Range();
+  sidewaysLRRange.setStart(sidewaysLR, 0);
+  sidewaysLRRange.setEnd(sidewaysLR, 2);
 
-  CSS.highlights.set("example-highlight", new Highlight(r));
+  CSS.highlights.set("example-highlight",
+    new Highlight(verticalRLRange, verticalLRRange, sidewaysLRRange, sidewaysRLRange));
 </script>
diff --git a/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html
index 71e615d919..82e65d1dac 100644
--- a/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html
+++ b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <html lang="en">
-
+<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-2000">
 <head>
     <meta charset="utf-8">
     <title>Repeating linear gradients in HSL and OKLCH space</title>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001c.tentative.html b/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001c.tentative.html
new file mode 100644
index 0000000000..b17f59f887
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001c.tentative.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' and 'contain-intrinsic-size' on a canvas element, drawing a PNG image</title>
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116">
+    <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        image-rendering: pixelated;
+        float: left;
+        object-position: top left;
+        contain: size;
+      }
+      br {
+        clear: both;
+      }
+      .big {
+        contain-intrinsic-width: 32px;
+        contain-intrinsic-height: 48px;
+      }
+      .small {
+        contain-intrinsic-width: 8px;
+        contain-intrinsic-height: 8px;
+      }
+
+      .cover { object-fit: cover }
+      .contain { object-fit: contain }
+      .fill { object-fit: fill }
+      .none { object-fit: none }
+      .scaledown { object-fit: scale-down }
+
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big: -->
+    <canvas width="16" height="8" class="big cover"></canvas>
+    <canvas width="16" height="8" class="big contain"></canvas>
+    <canvas width="16" height="8" class="big fill"></canvas>
+    <canvas width="16" height="8" class="big none"></canvas>
+    <canvas width="16" height="8" class="big scaledown"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small cover"></canvas>
+    <canvas width="16" height="8" class="small contain"></canvas>
+    <canvas width="16" height="8" class="small fill"></canvas>
+    <canvas width="16" height="8" class="small none"></canvas>
+    <canvas width="16" height="8" class="small scaledown"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001e.tentative.html b/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001e.tentative.html
new file mode 100644
index 0000000000..1b121f4eee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001e.tentative.html
@@ -0,0 +1,57 @@
+<!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 Test: 'object-fit: contain' and 'contain-intrinsic-size' on an embed element, embedding a PNG image</title>
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116">
+    <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        image-rendering: pixelated;
+        float: left;
+        object-position: top left;
+        contain: size;
+      }
+      br {
+        clear: both;
+      }
+      .big {
+        contain-intrinsic-width: 32px;
+        contain-intrinsic-height: 48px;
+      }
+      .small {
+        contain-intrinsic-width: 8px;
+        contain-intrinsic-height: 8px;
+      }
+
+      .cover { object-fit: cover }
+      .contain { object-fit: contain }
+      .fill { object-fit: fill }
+      .none { object-fit: none }
+      .scaledown { object-fit: scale-down }
+
+    </style>
+  </head>
+  <body>
+    <!-- big: -->
+    <embed src="support/colors-16x8.png" class="big cover"></embed>
+    <embed src="support/colors-16x8.png" class="big contain"></embed>
+    <embed src="support/colors-16x8.png" class="big fill"></embed>
+    <embed src="support/colors-16x8.png" class="big none"></embed>
+    <embed src="support/colors-16x8.png" class="big scaledown"></embed>
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small cover"></embed>
+    <embed src="support/colors-16x8.png" class="small contain"></embed>
+    <embed src="support/colors-16x8.png" class="small fill"></embed>
+    <embed src="support/colors-16x8.png" class="small none"></embed>
+    <embed src="support/colors-16x8.png" class="small scaledown"></embed>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001i.tentative.html b/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001i.tentative.html
new file mode 100644
index 0000000000..2da201f3d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001i.tentative.html
@@ -0,0 +1,58 @@
+<!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 Test: 'object-fit: contain' and 'contain-intrinsic-size' on img element, embedding a PNG image</title>
+    <link rel="author" title="Eric Portis" href="mailto:e@ericportis.com">
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116">
+    <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        image-rendering: pixelated;
+        float: left;
+        object-position: top left;
+        contain: size;
+      }
+      br {
+        clear: both;
+      }
+      .big {
+        contain-intrinsic-width: 32px;
+        contain-intrinsic-height: 48px;
+      }
+      .small {
+        contain-intrinsic-width: 8px;
+        contain-intrinsic-height: 8px;
+      }
+
+      .cover { object-fit: cover }
+      .contain { object-fit: contain }
+      .fill { object-fit: fill }
+      .none { object-fit: none }
+      .scaledown { object-fit: scale-down }
+
+    </style>
+  </head>
+  <body>
+    <!-- big: -->
+    <img src="support/colors-16x8.png" class="big cover">
+    <img src="support/colors-16x8.png" class="big contain">
+    <img src="support/colors-16x8.png" class="big fill">
+    <img src="support/colors-16x8.png" class="big none">
+    <img src="support/colors-16x8.png" class="big scaledown">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small cover">
+    <img src="support/colors-16x8.png" class="small contain">
+    <img src="support/colors-16x8.png" class="small fill">
+    <img src="support/colors-16x8.png" class="small none">
+    <img src="support/colors-16x8.png" class="small scaledown">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001p.tentative.html b/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001p.tentative.html
new file mode 100644
index 0000000000..c2c1697c63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-containcontainintrinsicsize-png-001p.tentative.html
@@ -0,0 +1,57 @@
+<!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 Test: 'object-fit: contain' and 'contain-intrinsic-size' on video element with a PNG poster image</title>
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116">
+    <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        image-rendering: pixelated;
+        float: left;
+        object-position: top left;
+        contain: size;
+      }
+      br {
+        clear: both;
+      }
+      .big {
+        contain-intrinsic-width: 32px;
+        contain-intrinsic-height: 48px;
+      }
+      .small {
+        contain-intrinsic-width: 8px;
+        contain-intrinsic-height: 8px;
+      }
+
+      .cover { object-fit: cover }
+      .contain { object-fit: contain }
+      .fill { object-fit: fill }
+      .none { object-fit: none }
+      .scaledown { object-fit: scale-down }
+
+    </style>
+  </head>
+  <body>
+    <!-- big: -->
+    <video poster="support/colors-16x8.png" class="big cover"></video>
+    <video poster="support/colors-16x8.png" class="big contain"></video>
+    <video poster="support/colors-16x8.png" class="big fill"></video>
+    <video poster="support/colors-16x8.png" class="big none"></video>
+    <video poster="support/colors-16x8.png" class="big scaledown"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small cover"></video>
+    <video poster="support/colors-16x8.png" class="small contain"></video>
+    <video poster="support/colors-16x8.png" class="small fill"></video>
+    <video poster="support/colors-16x8.png" class="small none"></video>
+    <video poster="support/colors-16x8.png" class="small scaledown"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001-ref.tentative.html b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001-ref.tentative.html
new file mode 100644
index 0000000000..0c7c533d31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001-ref.tentative.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>CSS Reftest Reference</title>
+    <link rel="author" title="Eric Portis" href="mailto:e@ericportis.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("support/colors-16x8.png");
+        background-repeat: no-repeat;
+        image-rendering: pixelated;
+        background-position: 0% 0%;
+      }
+      br {
+        clear: both;
+      }
+      .big {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      .cover { background-size: cover; }
+      .contain { background-size: contain; }
+      .fill { background-size: 100% 100%; }
+      .none { background-size: auto auto; }
+      .scaledown { background-size: auto auto; }
+      .small.scaledown { background-size: contain; }
+
+    </style>
+  </head>
+  <body>
+    <!-- big: -->
+    <div class="objectOuter"><div class="big cover"></div></div>
+    <div class="objectOuter"><div class="big contain"></div></div>
+    <div class="objectOuter"><div class="big fill"></div></div>
+    <div class="objectOuter"><div class="big none"></div></div>
+    <div class="objectOuter"><div class="big scaledown"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small cover"></div></div>
+    <div class="objectOuter"><div class="small contain"></div></div>
+    <div class="objectOuter"><div class="small fill"></div></div>
+    <div class="objectOuter"><div class="small none"></div></div>
+    <div class="objectOuter"><div class="small scaledown"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001c.tentative.html b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001c.tentative.html
new file mode 100644
index 0000000000..43a50adced
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001c.tentative.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' and 'contain: size' on canvas element, drawing a PNG image</title>
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116">
+    <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        image-rendering: pixelated;
+        float: left;
+        contain: size;
+        object-position: top left;
+      }
+      br {
+        clear: both;
+      }
+      .big {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      .cover { object-fit: cover }
+      .contain { object-fit: contain }
+      .fill { object-fit: fill }
+      .none { object-fit: none }
+      .scaledown { object-fit: scale-down }
+
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big: -->
+    <canvas width="16" height="8" class="big cover"></canvas>
+    <canvas width="16" height="8" class="big contain"></canvas>
+    <canvas width="16" height="8" class="big fill"></canvas>
+    <canvas width="16" height="8" class="big none"></canvas>
+    <canvas width="16" height="8" class="big scaledown"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small cover"></canvas>
+    <canvas width="16" height="8" class="small contain"></canvas>
+    <canvas width="16" height="8" class="small fill"></canvas>
+    <canvas width="16" height="8" class="small none"></canvas>
+    <canvas width="16" height="8" class="small scaledown"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001e.tentative.html b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001e.tentative.html
new file mode 100644
index 0000000000..37e0f1e447
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001e.tentative.html
@@ -0,0 +1,57 @@
+<!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 Test: 'object-fit: contain' and 'contain: size' on an embed element, embedding a PNG image</title>
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116">
+    <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        image-rendering: pixelated;
+        float: left;
+        contain: size;
+        object-position: top left;
+      }
+      br {
+        clear: both;
+      }
+      .big {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      .cover { object-fit: cover }
+      .contain { object-fit: contain }
+      .fill { object-fit: fill }
+      .none { object-fit: none }
+      .scaledown { object-fit: scale-down }
+
+    </style>
+  </head>
+  <body>
+    <!-- big: -->
+    <embed src="support/colors-16x8.png" class="big cover"></embed>
+    <embed src="support/colors-16x8.png" class="big contain"></embed>
+    <embed src="support/colors-16x8.png" class="big fill"></embed>
+    <embed src="support/colors-16x8.png" class="big none"></embed>
+    <embed src="support/colors-16x8.png" class="big scaledown"></embed>
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small cover"></embed>
+    <embed src="support/colors-16x8.png" class="small contain"></embed>
+    <embed src="support/colors-16x8.png" class="small fill"></embed>
+    <embed src="support/colors-16x8.png" class="small none"></embed>
+    <embed src="support/colors-16x8.png" class="small scaledown"></embed>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001i.tentative.html b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001i.tentative.html
new file mode 100644
index 0000000000..1654cbf36f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001i.tentative.html
@@ -0,0 +1,58 @@
+<!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 Test: 'object-fit: contain' and 'contain: size' on img element, embedding a PNG image</title>
+    <link rel="author" title="Eric Portis" href="mailto:e@ericportis.com">
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116">
+    <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        image-rendering: pixelated;
+        float: left;
+        contain: size;
+        object-position: top left;
+      }
+      br {
+        clear: both;
+      }
+      .big {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      .cover { object-fit: cover }
+      .contain { object-fit: contain }
+      .fill { object-fit: fill }
+      .none { object-fit: none }
+      .scaledown { object-fit: scale-down }
+
+    </style>
+  </head>
+  <body>
+    <!-- big: -->
+    <img src="support/colors-16x8.png" class="big cover">
+    <img src="support/colors-16x8.png" class="big contain">
+    <img src="support/colors-16x8.png" class="big fill">
+    <img src="support/colors-16x8.png" class="big none">
+    <img src="support/colors-16x8.png" class="big scaledown">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small cover">
+    <img src="support/colors-16x8.png" class="small contain">
+    <img src="support/colors-16x8.png" class="small fill">
+    <img src="support/colors-16x8.png" class="small none">
+    <img src="support/colors-16x8.png" class="small scaledown">
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001p.tentative.html b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001p.tentative.html
new file mode 100644
index 0000000000..c3072f9838
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/object-fit-containsize-png-001p.tentative.html
@@ -0,0 +1,57 @@
+<!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 Test: 'object-fit: contain' and 'contain: size' on video element with a PNG poster image</title>
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116">
+    <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        image-rendering: pixelated;
+        float: left;
+        contain: size;
+        object-position: top left;
+      }
+      br {
+        clear: both;
+      }
+      .big {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      .cover { object-fit: cover }
+      .contain { object-fit: contain }
+      .fill { object-fit: fill }
+      .none { object-fit: none }
+      .scaledown { object-fit: scale-down }
+
+    </style>
+  </head>
+  <body>
+    <!-- big: -->
+    <video poster="support/colors-16x8.png" class="big cover"></video>
+    <video poster="support/colors-16x8.png" class="big contain"></video>
+    <video poster="support/colors-16x8.png" class="big fill"></video>
+    <video poster="support/colors-16x8.png" class="big none"></video>
+    <video poster="support/colors-16x8.png" class="big scaledown"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small cover"></video>
+    <video poster="support/colors-16x8.png" class="small contain"></video>
+    <video poster="support/colors-16x8.png" class="small fill"></video>
+    <video poster="support/colors-16x8.png" class="small none"></video>
+    <video poster="support/colors-16x8.png" class="small scaledown"></video>
+    <br>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html
index 2cbf1c26db..14429b1002 100644
--- a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html
+++ b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-001.html
@@ -15,6 +15,6 @@
 </style>
 
 <div class ="div-parent"">
-  <div id="d1"></div>
+
   <div id="d2">Testline1<br>Testline2<br>Testline3</div>
 </div>
diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002-ref.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002-ref.html
new file mode 100644
index 0000000000..8c10a80370
--- /dev/null
+++ b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Reference for trimming block-boxes at their first/last formatted lines</title>
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.div-parent {
+  outline: 1px solid orange;
+  font-family: Ahem;
+  font-size: 20px;
+  line-height: 1;
+  writing-mode:vertical-lr;
+}
+</style>
+<div class ="div-parent">
+  Test<br><br>
+</div>
diff --git a/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002.html b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002.html
new file mode 100644
index 0000000000..fdf5b71d43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Tests block boxes's edges are trimmed at text-over/text-under baselines of their first/last formatted lines</title>
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#leading-trim">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="match" href="text-box-trim-half-leading-block-box-002-ref.html">
+
+<style>
+.div-parent {
+  outline: 1px solid orange;
+  font-family: Ahem;
+  font-size: 20px;
+  line-height: 3;
+  writing-mode:vertical-lr;
+}
+</style>
+
+<div class ="div-parent" style="text-box-trim:start">Test</div>
diff --git a/testing/web-platform/tests/css/css-lists/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-lists/WEB_FEATURES.yml
new file mode 100644
index 0000000000..89ef4a2521
--- /dev/null
+++ b/testing/web-platform/tests/css/css-lists/WEB_FEATURES.yml
@@ -0,0 +1,4 @@
+features:
+- name: counter-set
+  files:
+  - counter-set-*
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error-ref.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error-ref.html
index a069e4d3ae..e9f54f3ad3 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error-ref.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error-ref.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <style>
   .container {
-    position: fixed;
     width: 70px;
     height: 126px;
     background-color: green;
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error.html
index 8a02a5b2a6..02a14ad65f 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position-rounding-error.html
@@ -2,11 +2,10 @@
 <html class="reftest-wait">
 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
 <link rel="match" href="clip-path-animation-fixed-position-rounding-error-ref.html">
+<meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-400">
 <!--
   Test that clip paths on elements with position: fixed draw correctly,
   even in scenarios that involve partial pixels
-
-  Currently uses fuzzy diff because of crbug.com/1249071
 -->
 <style>
   .container {
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position.html
index 3ffc2a30a7..20fc8e52d8 100644
--- a/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position.html
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/clip-path-animation-fixed-position.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
-<meta name=fuzzy content="0-10;0-150">
+<meta name=fuzzy content="0-60;0-350">
 <link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
 <link rel="match" href="clip-path-animation-fixed-position-ref.html">
 <!--
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length4.html b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length4.html
new file mode 100644
index 0000000000..0a893cb756
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/animations/two-clip-path-animation-diff-length4.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
+<link rel="match" href="two-clip-path-animation-diff-length1-ref.html">
+<style>
+  #container {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    animation: clippath2 0.5s;
+  }
+
+  @keyframes clippath2 {
+    0% {
+      clip-path: inset(10px 10px);
+    }
+
+    1% {
+      clip-path: inset(10px 10px);
+    }
+
+    100% {
+      clip-path: inset(40px 40px);
+    }
+  }
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="../../../../web-animations/testcommon.js"></script>
+<script src="../../../../web-animations/resources/timing-utils.js"></script>
+
+<body>
+  <div id="container"></div>
+
+  <script>
+    // This test ensures that a new no-op animation still invalidates paint
+    // and the animation running on the compositor.
+    document.getAnimations()[0].ready.then(() => {
+      let anim = document.getElementById("container").animate(
+        [
+          { clipPath: "inset(10px 10px)" },
+          { clipPath: "inset(10px 10px)" },
+        ],
+        2000,
+      );
+      anim.ready.then(() => { return requestAnimationFrame(takeScreenshot); });
+    });
+  </script>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-viewport-changed.html b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-viewport-changed.html
new file mode 100644
index 0000000000..156317b251
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/mask-image/mask-image-svg-viewport-changed.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>Change of viewport affecting mask content</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-image">
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#svg-masks">
+<link rel="match" href="../clip-path/reference/green-100x100.html">
+<div id="container" style="width: 0%">
+  <svg style="width: 100%">
+    <mask id="mask">
+      <rect width="100%" height="100%" fill="white"/>
+    </mask>
+    <rect width="100" height="100" fill="red"/>
+    <rect width="100" height="100" fill="green" mask="url(#mask)"/>
+  </svg>
+</div>
+<script>
+  document.body.offsetTop;
+  document.getElementById('container').style.width = '100%';
+</script>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-021.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-021.tentative.html
new file mode 100644
index 0000000000..611cd6f890
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-021.tentative.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp hidden content is treated as ink overflow</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-021-ref.html">
+<meta name="assert" content="Any overflowing content hidden from paint by line-clamp is treated as ink overflow and therefore doesn't cause the scrollable overflow rectangle to grow.">
+<style>
+#scrollContainer {
+  overflow: scroll;
+  font: 16px / 32px serif;
+  height: 3lh;
+  border: 1px solid black;
+}
+.clamp {
+  line-clamp: 4;
+  padding: 4px;
+  background-color: yellow;
+}
+.pre {
+  white-space: pre;
+}
+</style>
+
+<div id="scrollContainer">
+
+  <div class="clamp">
+    <div class="pre">Line 1
+Line 2
+Line 3
+Line 4
+Line 5
+Line 6</div>
+
+    <div>Another div</div>
+
+    <table>
+      <tr>
+        <td>A</td>
+        <td>B</td>
+      </tr>
+      <tr>
+        <td>C</td>
+        <td>D</td>
+      </tr>
+    </table>
+  </div>
+
+</div>
+
+<script>
+  window.addEventListener("load", () => {
+    const scrollContainer = document.getElementById("scrollContainer");
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-011.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-011.tentative.html
new file mode 100644
index 0000000000..ab5102a7cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-abspos-011.tentative.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp hidden abspos should count as ink overflow</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-with-abspos-011-ref.html">
+<meta name="assert" content="Any overflowing content hidden from paint by line-clamp is treated as ink overflow, including absolute positioned boxes, and therefore doesn't cause the scrollable overflow rectangle to grow. Meanwhile, non-hidden abspos count as scrollable overflow.">
+<style>
+#scrollContainer {
+  overflow: scroll;
+  position: relative;
+  font: 16px / 32px serif;
+  height: 4lh;
+  border: 1px solid black;
+}
+.clamp {
+  line-clamp: 4;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.abspos {
+  position: absolute;
+  right: 0;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+#abspos1 {
+  top: 4.5lh;
+}
+#abspos2 {
+  top: 6lh;
+}
+</style>
+
+<div id="scrollContainer">
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4<div class="abspos" id="abspos1"></div>
+Line 5
+Line 6<div class="abspos" id="abspos2"></div></div>
+</div>
+
+<script>
+  window.addEventListener("load", () => {
+    const scrollContainer = document.getElementById("scrollContainer");
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-001.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-001.tentative.html
new file mode 100644
index 0000000000..98bbdcb904
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-001.tentative.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: float at the start of a line-clamp</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-with-floats-001-ref.html">
+<meta name="assert" content="Floats in an inline formatting context inside a line-clamp container are not hidden if they come before the clamp point.">
+<style>
+.clamp {
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp"><div class="float"></div>Line 1
+Line 2
+Line 3
+Line 4
+Line 5</div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-002.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-002.tentative.html
new file mode 100644
index 0000000000..15379a3de3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-002.tentative.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: float at the start of a line-clamp</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-with-floats-001-ref.html">
+<meta name="assert" content="Floats in a block formatting context inside a line-clamp container are not hidden if they come before the clamp point.">
+<style>
+.clamp {
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+.pre {
+  white-space: pre;
+}
+</style>
+<div class="clamp">
+<div class="float"></div>
+<div class="pre">Line 1
+Line 2
+Line 3
+Line 4
+Line 5</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-003.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-003.tentative.html
new file mode 100644
index 0000000000..c203758235
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-003.tentative.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: float in line-clamp after clamp point</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
+<meta name="assert" content="Floats in an inline formatting context inside a line-clamp container are always hidden if they come after the clamp point.">
+<style>
+.clamp {
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4
+<div class="float"></div>Line 5</div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-004.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-004.tentative.html
new file mode 100644
index 0000000000..6213130174
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-004.tentative.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: float in line-clamp after clamp point</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
+<meta name="assert" content="Floats in a block formatting context inside a line-clamp container are always hidden if they come after the clamp point.">
+<style>
+.clamp {
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+.pre {
+  white-space: pre;
+}
+</style>
+<div class="clamp">
+<div class="pre">Line 1
+Line 2
+Line 3
+Line 4</div>
+<div class="float"></div>
+<div>Line 5</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-005.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-005.tentative.html
new file mode 100644
index 0000000000..9689a83fa7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-005.tentative.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: float in line-clamp before clamp point which extends past it</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-with-floats-005-ref.html">
+<meta name="assert" content="Floats in an inline formatting context inside a line-clamp container are not hidden if they come before the clamp point, even if they extend beyond that point">
+<style>
+.clamp {
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4<div class="float"></div>
+Line 5</div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-006.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-006.tentative.html
new file mode 100644
index 0000000000..0a709bff19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-006.tentative.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: float in line-clamp before clamp point which extends past it</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-with-floats-006-ref.html">
+<meta name="assert" content="Floats in a block formatting context inside a line-clamp container are not hidden if they come before the clamp point, even if they extend beyond that point">
+<style>
+.clamp {
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 75px;
+  margin: 4px;
+  background-color: skyblue;
+}
+.pre {
+  white-space: pre;
+}
+</style>
+<div class="clamp">
+<div class="pre">Line 1
+Line 2
+Line 3</div>
+<div class="float"></div>
+<div class="pre">Line 4
+Line 5</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-007.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-007.tentative.html
new file mode 100644
index 0000000000..7ee286fbf4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-007.tentative.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp doesn't propagate to floats</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-with-floats-007-ref.html">
+<meta name="assert" content="Floats create a new BFC, and line-clamp does not propagate into independent BFCs">
+<style>
+.clamp {
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  margin: 4px;
+  white-space: pre;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4<div class="float">Line A
+Line B
+Line C
+Line D
+Line E</div>
+Line 5</div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-008.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-008.tentative.html
new file mode 100644
index 0000000000..c62ba5371a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-008.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp IFC with floats extending past the clamp point</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-with-floats-008-ref.html">
+<meta name="assert" content="If the line-clamp container is an independent formatting context, it will clear contained floats before the clamp point, even if they extend beyond the last line. Lines past the clamp point will remain hidden.">
+<style>
+.clamp {
+  display: flow-root;
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp">Line 1
+Line 2
+Line 3
+<div class="float"></div>Line 4
+Line 5</div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-009.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-009.tentative.html
new file mode 100644
index 0000000000..f25ac381c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-009.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp IFC with floats after the clamp point</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
+<meta name="assert" content="If the line-clamp container is an independent formatting context, it will not clear any floats after the clamp point.">
+<style>
+.clamp {
+  display: flow-root;
+  line-clamp: 4;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4
+Line 5<div class="float"></div></div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-010.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-010.tentative.html
new file mode 100644
index 0000000000..a00ff60171
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-010.tentative.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: line-clamp hidden floats should count as ink overflow</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="reference/line-clamp-with-floats-010-ref.html">
+<meta name="assert" content="Any overflowing content hidden from paint by line-clamp is treated as ink overflow, including floats, and therefore doesn't cause the scrollable overflow rectangle to grow. Meanwhile, non-hidden floats count as scrollable overflow.">
+<style>
+#scrollContainer {
+  overflow: scroll;
+  font: 16px / 32px serif;
+  height: 4lh;
+  border: 1px solid black;
+}
+.clamp {
+  line-clamp: 4;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+
+<div id="scrollContainer">
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4<div class="float"></div>
+Line 5
+Line 6<div class="float"></div></div>
+</div>
+
+<script>
+  window.addEventListener("load", () => {
+    const scrollContainer = document.getElementById("scrollContainer");
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-021-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-021-ref.html
new file mode 100644
index 0000000000..d794c76e3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-021-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+#scrollContainer {
+  overflow: scroll;
+  font: 16px / 32px serif;
+  height: 3lh;
+  border: 1px solid black;
+}
+.clamp {
+  padding: 4px;
+  background-color: yellow;
+}
+.pre {
+  white-space: pre;
+}
+</style>
+
+<div id="scrollContainer">
+
+  <div class="clamp">
+    <div class="pre">Line 1
+Line 2
+Line 3
+Line 4…</div>
+  </div>
+
+</div>
+
+<script>
+  window.addEventListener("load", () => {
+    const scrollContainer = document.getElementById("scrollContainer");
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-011-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-011-ref.html
new file mode 100644
index 0000000000..f08b0270e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-abspos-011-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+#scrollContainer {
+  overflow: scroll;
+  position: relative;
+  font: 16px / 32px serif;
+  height: 4lh;
+  border: 1px solid black;
+}
+.clamp {
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.abspos {
+  position: absolute;
+  top: 4.5lh;
+  right: 0;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+
+<div id="scrollContainer">
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4…<div class="abspos"></div></div>
+
+<script>
+  window.addEventListener("load", () => {
+    const scrollContainer = document.getElementById("scrollContainer");
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-001-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-001-ref.html
new file mode 100644
index 0000000000..bcd70aa930
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+.clamp {
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp"><div class="float"></div>Line 1
+Line 2
+Line 3
+Line 4…</div>
diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-005-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-005-ref.html
new file mode 100644
index 0000000000..d20d6c53dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-005-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+.clamp {
+  display: flow-root;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4…<div class="float"></div></div>
diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-006-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-006-ref.html
new file mode 100644
index 0000000000..9288c4e36f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-006-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+.clamp {
+  display: flow-root;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 75px;
+  margin: 4px;
+  background-color: skyblue;
+}
+.pre {
+  white-space: pre;
+}
+</style>
+<div class="clamp">
+<div class="pre">Line 1
+Line 2
+Line 3</div>
+<div class="float"></div>
+<div class="pre">Line 4…</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-007-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-007-ref.html
new file mode 100644
index 0000000000..6d5390246b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-007-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+.clamp {
+  display: flow-root;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  margin: 4px;
+  white-space: pre;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4…<div class="float">Line A
+Line B
+Line C
+Line D
+Line E</div></div>
diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-008-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-008-ref.html
new file mode 100644
index 0000000000..50b3d53900
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-008-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+.clamp {
+  display: flow-root;
+  font: 16px / 32px serif;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+<div class="clamp">Line 1
+Line 2
+Line 3
+<div class="float"></div>Line 4…</div>
diff --git a/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-010-ref.html b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-010-ref.html
new file mode 100644
index 0000000000..12b8cdc441
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/reference/line-clamp-with-floats-010-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference</title>
+<style>
+#scrollContainer {
+  overflow: scroll;
+  font: 16px / 32px serif;
+  height: 4lh;
+  border: 1px solid black;
+}
+.clamp {
+  display: flow-root;
+  padding: 0 4px;
+  white-space: pre;
+  background-color: yellow;
+}
+.float {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin: 4px;
+  background-color: skyblue;
+}
+</style>
+
+<div id="scrollContainer">
+<div class="clamp">Line 1
+Line 2
+Line 3
+Line 4…<div class="float"></div></div>
+
+<script>
+  window.addEventListener("load", () => {
+    const scrollContainer = document.getElementById("scrollContainer");
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-overflow/scroll-with-ancestor-border-radius.html b/testing/web-platform/tests/css/css-overflow/scroll-with-ancestor-border-radius.html
new file mode 100644
index 0000000000..9192c613e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/scroll-with-ancestor-border-radius.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Should not scroll out of rounded corner</title>
+<link rel="help" href="https://crbug.com/40277896">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/dom/events/scrolling/scroll_support.js"></script>
+<style>
+  #container {
+    width: 300px;
+    height: 300px;
+    border-radius: 100px;
+    overflow: hidden;
+    border: 2px solid blue;
+  }
+
+  #scroller {
+    overflow: auto;
+    width: 300px;
+    height: 300px;
+    will-change: scroll-position;
+  }
+
+  .spacer {
+    height: 200vh;
+  }
+
+</style>
+
+<div id="container">
+  <div id="scroller">
+    <div class="spacer"></div>
+  </div>
+</div>
+<div class="spacer"></div>
+
+<script>
+  promise_test(async (t) => {
+    await waitForCompositorCommit();
+    let scrolled = new Promise((resolve) => {
+      let scrollers = [window, document.getElementById("scroller")];
+      let onscroll = (evt) => {
+        for (const scroller of scrollers) {
+          scroller.removeEventListener("scroll", onscroll);
+        }
+        resolve(evt.target.id || "root");
+      }
+      for (const scroller of scrollers) {
+        scroller.addEventListener("scroll", onscroll);
+      }
+    });
+    const actions = new test_driver.Actions().scroll(20, 20, 0, 50, { duration: 50 });
+    actions.send();
+    assert_equals(await scrolled, "root", "Incorrect element scrolled");
+  }, "Wheel-scroll out of rounded corner skips that scroller");
+</script>
diff --git a/testing/web-platform/tests/css/css-overflow/scroll-with-border-radius.html b/testing/web-platform/tests/css/css-overflow/scroll-with-border-radius.html
new file mode 100644
index 0000000000..88bb0f1fa8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-overflow/scroll-with-border-radius.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Should not scroll out of rounded corner</title>
+<link rel="help" href="https://crbug.com/40277896">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/dom/events/scrolling/scroll_support.js"></script>
+<style>
+  #scroller {
+    border-radius: 100px;
+    overflow: auto;
+    width: 300px;
+    height: 300px;
+    border: 2px solid blue;
+    will-change: scroll-position;
+  }
+
+  .spacer {
+    height: 200vh;
+  }
+
+</style>
+
+<div id="scroller">
+  <div class="spacer"></div>
+</div>
+<div class="spacer"></div>
+
+<script>
+  promise_test(async (t) => {
+    await waitForCompositorCommit();
+    let scrolled = new Promise((resolve) => {
+      let scrollers = [window, document.getElementById("scroller")];
+      let onscroll = (evt) => {
+        for (const scroller of scrollers) {
+          scroller.removeEventListener("scroll", onscroll);
+        }
+        resolve(evt.target.id || "root");
+      }
+      for (const scroller of scrollers) {
+        scroller.addEventListener("scroll", onscroll);
+      }
+    });
+    const actions = new test_driver.Actions().scroll(20, 20, 0, 50, { duration: 50 });
+    actions.send();
+    assert_equals(await scrolled, "root", "Incorrect element scrolled");
+  }, "Wheel-scroll out of rounded corner skips that scroller");
+</script>
diff --git a/testing/web-platform/tests/css/css-page/fixedpos-009-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-009-print-ref.html
new file mode 100644
index 0000000000..31a6a6724f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/fixedpos-009-print-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  body {
+    margin: 0;
+  }
+  .pencil {
+    background-color: black;
+    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTMgMTcuMjVWMjFoMy43NUwxNy44MSA5Ljk0bC0zLjc1LTMuNzVMMyAxNy4yNXpNMjAuNzEgNy4wNGEuOTk2Ljk5NiAwIDAgMCAwLTEuNDFsLTIuMzQtMi4zNGEuOTk2Ljk5NiAwIDAgMC0xLjQxIDBsLTEuODMgMS44MyAzLjc1IDMuNzUgMS44My0xLjgzeiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=);
+    mask-repeat: no-repeat;
+    width: 36px;
+    height: 36px;
+  }
+  .fakepage {
+    position: relative;
+    height: 100vh;
+  }
+</style>
+<div class="fakepage">
+  <div style="position:absolute; bottom:0; right:0;">
+    <div class="pencil"></div>
+  </div>
+  When printed, there should be two pages. There should be a black pencil in the
+  bottom right corner on both pages.
+</div>
+
+<div class="fakepage">
+  <div style="position:absolute; bottom:0; right:0;">
+    <div class="pencil"></div>
+  </div>
+  Page 2.
+</div>
diff --git a/testing/web-platform/tests/css/css-page/fixedpos-009-print.html b/testing/web-platform/tests/css/css-page/fixedpos-009-print.html
new file mode 100644
index 0000000000..803a077c0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/fixedpos-009-print.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="http://crbug.com/337791467">
+<link rel="match" href="fixedpos-009-print-ref.html">
+<style>
+  body {
+    margin: 0;
+  }
+  .pencil {
+    background-color: black;
+    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTMgMTcuMjVWMjFoMy43NUwxNy44MSA5Ljk0bC0zLjc1LTMuNzVMMyAxNy4yNXpNMjAuNzEgNy4wNGEuOTk2Ljk5NiAwIDAgMCAwLTEuNDFsLTIuMzQtMi4zNGEuOTk2Ljk5NiAwIDAgMC0xLjQxIDBsLTEuODMgMS44MyAzLjc1IDMuNzUgMS44My0xLjgzeiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=);
+    mask-repeat: no-repeat;
+    width: 36px;
+    height: 36px;
+  }
+</style>
+<div style="position:fixed; bottom:0; right:0;">
+  <div class="pencil"></div>
+</div>
+When printed, there should be two pages. There should be a black pencil in the
+bottom right corner on both pages.
+<div style="break-before:page;">
+  Page 2.
+</div>
diff --git a/testing/web-platform/tests/css/css-page/fixedpos-010-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-010-print-ref.html
new file mode 100644
index 0000000000..90bd5e7fc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/fixedpos-010-print-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  @page {
+    size: 400px;
+    margin: 0;
+  }
+  @page large {
+    size: 500px 400px;
+  }
+  body {
+    margin: 0;
+  }
+</style>
+This page should <em>not</em> have a blue box.
+<div style="page:large;">
+  <div style="float:right; margin-top:300px; width:100px; height:100px; background:blue;"></div>
+  <div style="width:400px;">
+    This page should have a blue box in the bottom right corner.
+  </div>
+  <div style="break-before:page;">
+    <div style="float:right; margin-top:300px; width:100px; height:100px; background:blue;"></div>
+    <div style="width:400px;">
+      This page should have a blue box in the bottom right corner.
+    </div>
+  </div>
+</div>
+This page should <em>not</em> have a blue box.
diff --git a/testing/web-platform/tests/css/css-page/fixedpos-010-print.html b/testing/web-platform/tests/css/css-page/fixedpos-010-print.html
new file mode 100644
index 0000000000..cdd50828d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/fixedpos-010-print.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#valdef-position-fixed">
+<link rel="match" href="fixedpos-010-print-ref.html">
+<style>
+  @page {
+    size: 400px;
+    margin: 0;
+  }
+  @page large {
+    size: 500px 400px;
+  }
+  body {
+    margin: 0;
+  }
+</style>
+<div style="position:fixed; right:-100px; bottom:0; width:100px; height:100px; background:blue;"></div>
+This page should <em>not</em> have a blue box.
+<div style="page:large; width:400px;">
+  This page should have a blue box in the bottom right corner.
+  <div style="break-before:page;">
+    This page should have a blue box in the bottom right corner.
+  </div>
+</div>
+This page should <em>not</em> have a blue box.
diff --git a/testing/web-platform/tests/css/css-page/page-box-000-print-ref.html b/testing/web-platform/tests/css/css-page/page-box-000-print-ref.html
new file mode 100644
index 0000000000..d39bd73850
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/page-box-000-print-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  html {
+    box-sizing: border-box;
+    display: grid;
+    place-items: center;
+    height: 100%;
+    border: 20px solid green;
+  }
+</style>
+This page should have a green border.
diff --git a/testing/web-platform/tests/css/css-page/page-box-000-print.html b/testing/web-platform/tests/css/css-page/page-box-000-print.html
new file mode 100644
index 0000000000..aee317ab97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/page-box-000-print.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties">
+<link rel="match" href="page-box-000-print-ref.html">
+<style>
+  @page {
+    border: 20px solid green;
+  }
+  html {
+    display: grid;
+    place-items: center;
+    height: 100%;
+  }
+</style>
+This page should have a green border.
diff --git a/testing/web-platform/tests/css/css-page/page-size-012-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-012-print-ref.html
new file mode 100644
index 0000000000..e85e5f0785
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/page-size-012-print-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  @page {
+    size: 600px 400px;
+    margin: 0;
+  }
+  body { margin: 0; }
+</style>
+<div style="margin-left:auto; margin-right:50px; writing-mode:vertical-rl; height:400px; background:yellow;">
+  50px to the left of page box right edge.<br>
+  Page widths larger than heights.<br>
+</div>
+<div style="break-before:page;"></div>
+<div style="margin-left:auto; margin-top:50px; writing-mode:vertical-rl; height:350px; background:yellow;">
+  50px below the page box top edge.<br>
+</div>
diff --git a/testing/web-platform/tests/css/css-page/page-size-012-print.html b/testing/web-platform/tests/css/css-page/page-size-012-print.html
new file mode 100644
index 0000000000..737b37cbc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-page/page-size-012-print.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Test vertical writing mode with specified page size and logical margins.</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule">
+<link rel="help" href="https://www.w3.org/TR/css-page-3/#typedef-page-size-page-size">
+<link rel="match" href="page-size-012-print-ref.html">
+<style>
+  @page {
+    size: 600px 400px;
+    margin: 0;
+    margin-inline-start: 50px;
+  }
+  @page :first {
+    margin-inline-start: 0;
+    margin-block-start: 50px;
+  }
+  html {
+    writing-mode: vertical-rl;
+  }
+  body { margin: 0; }
+</style>
+<div style="background:yellow;">
+  50px to the left of page box right edge.<br>
+  Page widths larger than heights.<br>
+</div>
+<div style="break-before:page; background:yellow;">
+  50px below the page box top edge.<br>
+</div>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-004.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-004.html
new file mode 100644
index 0000000000..79188e84b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Position Test: Test position:sticky element with 100% left in a block container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1748891">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1835705">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that a position:sticky element with 100% left value does not cause the scrollbar to show when shrinking the width of its overflow container.">
+
+<style>
+#scroll {
+  width: 200px;
+  height: 100px;
+  overflow: auto;
+  background: red;
+}
+.sticky {
+  position: sticky;
+  width: 100px;
+  height: 100px;
+  left: 100%;
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="scroll">
+  <div class="sticky"></div>
+</div>
+
+<script>
+window.onload = () => {
+  document.getElementById("scroll").style.width = "100px";
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-005.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-005.html
new file mode 100644
index 0000000000..b029e59363
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-005.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Position Test: Test position:sticky element with 100% left in a grid container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1748891">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1835705">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that a position:sticky element with 100% left value does not cause the scrollbar to show when shrinking the width of its overflow container.">
+
+<style>
+#scroll {
+  display: grid;
+  width: 200px;
+  height: 100px;
+  overflow: auto;
+  background: red;
+}
+.sticky {
+  position: sticky;
+  width: 100px;
+  height: 100px;
+  left: 100%;
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="scroll">
+  <div class="sticky"></div>
+</div>
+
+<script>
+window.onload = () => {
+  document.getElementById("scroll").style.width = "100px";
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-006.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-006.html
new file mode 100644
index 0000000000..63fa1ebfd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-006.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Position Test: Test position:sticky element with 100% left in a flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1748891">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1835705">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that a position:sticky element with 100% left value does not cause the scrollbar to show when shrinking the width of its overflow container.">
+
+<style>
+#scroll {
+  display: flex;
+  width: 200px;
+  height: 100px;
+  overflow: auto;
+  background: red;
+}
+.sticky {
+  position: sticky;
+  width: 100px;
+  height: 100px;
+  left: 100%;
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="scroll">
+  <div class="sticky"></div>
+</div>
+
+<script>
+window.onload = () => {
+  document.getElementById("scroll").style.width = "100px";
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-margins-002.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-margins-002.html
new file mode 100644
index 0000000000..29833ccae0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-margins-002.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Position Test: Test position:sticky element with auto margin in flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position/#staticpos-rect">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488080">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that a position:sticky element aligning with 'auto' margin still honors the sticky positioning.">
+
+<style>
+#container{
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  background: red;
+}
+.flex {
+  display: flex;
+  flex-direction: column;
+  height: 500px;
+}
+.child {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: sticky;
+  margin-top: auto;
+  bottom: 0;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="container">
+  <div class="flex">
+    <div class="child"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-margins-003.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-margins-003.html
new file mode 100644
index 0000000000..2bc1a3ef25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-margins-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Position Test: Test position:sticky element with auto margin in block container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position/#staticpos-rect">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1488080">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that a position:sticky element aligning with 'auto' margin still honors the sticky positioning.">
+
+<style>
+#container{
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  background: red;
+}
+.block {
+  width: 500px;
+}
+.child {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: sticky;
+  margin-left: auto;
+  right: 0;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="container">
+  <div class="block">
+    <div class="child">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-scrolled-remove-sibling-002.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-scrolled-remove-sibling-002.html
new file mode 100644
index 0000000000..870efa417c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-scrolled-remove-sibling-002.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1612561">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that there is no vertical scrollbar after removing the sibling that overflows the scroll container">
+
+<style>
+#scroll {
+  width: 100px;
+  height: 100px;
+  overflow: auto;
+  background: green;
+}
+.sticky {
+  position: sticky;
+  width: 50px;
+  height: 100px;
+  top: 0;
+  margin-bottom: -100px;
+}
+#sibling {
+  width: 50px;
+  height: 500px;
+  background: red;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="scroll">
+  <div class="sticky"></div>
+  <div id="sibling"></div>
+</div>
+
+<script>
+window.onload = () => {
+  document.getElementById("scroll").scrollTop = 200;
+  document.getElementById("sibling").remove();
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-004.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-004.html
new file mode 100644
index 0000000000..bf0b87ab36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Position Test: Test position:sticky element with 100% top in a block container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1748891">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1835705">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that a position:sticky element with 100% top value does not cause the scrollbar to show when shrinking the height of its container.">
+
+<style>
+#scroll {
+  width: 100px;
+  height: 200px;
+  overflow: auto;
+  background: red;
+}
+.sticky {
+  position: sticky;
+  width: 100px;
+  height: 100px;
+  top: 100%;
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="scroll">
+  <div class="sticky"></div>
+</div>
+
+<script>
+window.onload = () => {
+  document.getElementById("scroll").style.height = "100px";
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-005.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-005.html
new file mode 100644
index 0000000000..5f76a722b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-005.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Position Test: Test position:sticky element with 100% top in a grid container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1748891">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1835705">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that a position:sticky element with 100% top value does not cause the scrollbar to show when shrinking the height of its container.">
+
+<style>
+#scroll {
+  display: grid;
+  width: 100px;
+  height: 200px;
+  overflow: auto;
+  background: red;
+}
+.sticky {
+  position: sticky;
+  width: 100px;
+  height: 100px;
+  top: 100%;
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="scroll">
+  <div class="sticky"></div>
+</div>
+
+<script>
+window.onload = () => {
+  document.getElementById("scroll").style.height = "100px";
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-006.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-006.html
new file mode 100644
index 0000000000..4ac5310bf3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-006.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Position Test: Test position:sticky element with 100% top in a flex container</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1748891">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1835705">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that a position:sticky element with 100% top value does not cause the scrollbar to show when shrinking the height of its container.">
+
+<style>
+#scroll {
+  display: flex;
+  width: 100px;
+  height: 200px;
+  overflow: auto;
+  background: red;
+}
+.sticky {
+  position: sticky;
+  width: 100px;
+  height: 100px;
+  top: 100%;
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="scroll">
+  <div class="sticky"></div>
+</div>
+
+<script>
+window.onload = () => {
+  document.getElementById("scroll").style.height = "100px";
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/crashtests/computed-property-universal-syntax.html b/testing/web-platform/tests/css/css-properties-values-api/crashtests/computed-property-universal-syntax.html
new file mode 100644
index 0000000000..b87f03b2df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/crashtests/computed-property-universal-syntax.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset=utf8>
+<style>
+@property --my-registered-property {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #f0f2f5;
+}
+
+.outer {
+  --unregistered-property: var(--my-registered-property);
+}
+
+.inner {
+  --unregistered-property: #c6cfdb;
+}
+</style>
+<div class="outer">
+  <div class="inner"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html b/testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html
index f4c718b139..8ca9d4499a 100644
--- a/testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html
+++ b/testing/web-platform/tests/css/css-properties-values-api/registered-property-computation.html
@@ -155,6 +155,14 @@ test_computed_value('<color>', '#badbee33', 'rgba(186, 219, 238, 0.2)');
 test_computed_value('<color>', 'tomato', 'rgb(255, 99, 71)');
 test_computed_value('<color>', 'plum', 'rgb(221, 160, 221)');
 test_computed_value('<color>', 'currentcolor', 'currentcolor');
+test_computed_value('<color>', 'color-mix(in srgb, black, white)', 'color(srgb 0.5 0.5 0.5)');
+test_computed_value('<color>', 'color-mix(in srgb, currentcolor, red)', 'color-mix(in srgb, currentcolor, rgb(255, 0, 0))');
+test_computed_value('<color>', 'color-mix(in srgb, currentcolor, #ffffff 70%)', 'color-mix(in srgb, currentcolor 30%, rgb(255, 255, 255))');
+test_computed_value('<color>', 'color-mix(in srgb, currentcolor 20%, #ffffff 20%)', 'color-mix(in srgb, currentcolor 20%, rgb(255, 255, 255) 20%)');
+test_computed_value('<color>', 'light-dark(currentcolor, red)', 'currentcolor');
+test_computed_value('<color>', 'light-dark(lime, red)', 'rgb(0, 255, 0)');
+test_computed_value('<color>', 'color(from lime srgb g g g)', 'color(srgb 1 1 1)');
+test_computed_value('<color>', 'color(srgb 1 1 1 / calc(NaN))', 'color(srgb 1 1 1 / 0)');
 
 // Custom ident values that look like color keywords should not be converted.
 test_computed_value('*', 'tomato', 'tomato');
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html
deleted file mode 100644
index 17629a6dba..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-    main {
-        font-size: 7em;
-        margin: 0.5em;
-    }
-    main::selection {
-        color: black;
-        background-color: transparent;
-    }
-    main > .control > span::selection,
-    main > .bg > span::selection {
-        color: white;
-        background-color: green;
-    }
-    main > .fg > span::selection {
-        color: green;
-        background-color: white;
-    }
-</style>
-<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
-<!--
-    The element tree below is intentionally the same shape as the
-    test, despite the fact that we might be able to simplify it. This
-    is because multiple impls (including Gecko and Blink) split the
-    background paints accordingly, which can obscure ink overflow in
-    some of the highlighted text (especially “f”).
--->
-<main class="highlight_reftest"
-    ><span class="control"><span>foo</span></span
-    > <span class="fg"><span>b</span></span
-    ><span class="fg"><span>a</span></span
-    ><span class="fg"><span>r</span></span
-    > <span class="bg"><span>b</span></span
-    ><span class="bg"><span>a</span></span
-    ><span class="bg"><span>z</span></span
-    ></main>
-<script>selectNodeContents(document.querySelector("main"));</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html
deleted file mode 100644
index c01d3c796e..0000000000
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html
+++ /dev/null
@@ -1,120 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight cascade: custom properties are inherited regardless of inherits flag or inheritedness of referencing property</title>
-<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
-<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<link rel="match" href="highlight-cascade-002-ref.html">
-<meta name="assert" value="This test verifies that, given ::selection styles referencing custom properties, their substitution values are inherited from the parent ::selection styles, even if the property is registered with inherits set to false (--inherits-false) or the referencing property is not an inherited property (background-color). All custom properties are treated as inherited when used in highlight styles in any way.">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
-<style>
-    /*
-        Register the custom properties, other than --unregistered,
-        which would be an inherited property [css-variables-1].
-    */
-    @property --control {
-        syntax: "<color>";
-        initial-value: green;
-        inherits: false;
-    }
-    @property --inherits-false {
-        syntax: "<color>";
-        initial-value: red;
-        inherits: false;
-    }
-    @property --inherits-true {
-        syntax: "<color>";
-        initial-value: red;
-        inherits: true;
-    }
-
-    main {
-        font-size: 7em;
-        margin: 0.5em;
-    }
-    main::selection {
-        /*
-            Don’t visibly highlight the spaces between words.
-        */
-        color: black;
-        background-color: transparent;
-    }
-
-    /*
-        Non-highlight control: if this text is white on red (inherit)
-        rather than white on green (initial), then @property is not
-        supported well enough to make this test meaningful.
-    */
-    main > .control {
-        --control: red;
-    }
-    main > .control > span {
-        color: white;
-        background-color: var(--control);
-    }
-
-    main > *::selection {
-        --inherits-false: green;
-        --inherits-true: green;
-        --unregistered: green;
-    }
-
-    /*
-        Foreground tests: if the foreground of this text is red or
-        black (initial) rather than green (inherit), then custom
-        properties are not being inherited in highlight styles.
-
-        color is an inherited property, but that shouldn’t matter.
-    */
-    main > .fg > span::selection {
-        background-color: white;
-    }
-    main > .fg.inherits-false > span::selection {
-        color: var(--inherits-false);
-    }
-    main > .fg.inherits-true > span::selection {
-        color: var(--inherits-true);
-    }
-    main > .fg.unregistered > span::selection {
-        color: var(--unregistered);
-    }
-
-    /*
-        Background tests: if the background of this text is red or
-        black (initial) rather than green (inherit), then custom
-        properties are not being inherited in highlight styles.
-
-        background-color is not an inherited property, but that
-        shouldn’t matter.
-    */
-    main > .bg > span::selection {
-        color: white;
-    }
-    main > .bg.inherits-false > span::selection {
-        background-color: var(--inherits-false);
-    }
-    main > .bg.inherits-true > span::selection {
-        background-color: var(--inherits-true);
-    }
-    main > .bg.unregistered > span::selection {
-        background-color: var(--unregistered);
-    }
-</style>
-<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
-<main class="highlight_reftest"
-    ><span class="control"><span>foo</span></span
-    > <span class="fg inherits-false"><span>b</span></span
-    ><span class="fg inherits-true"><span>a</span></span
-    ><span class="fg unregistered"><span>r</span></span
-    > <span class="bg inherits-false"><span>b</span></span
-    ><span class="bg inherits-true"><span>a</span></span
-    ><span class="bg unregistered"><span>z</span></span
-    ></main>
-<script>
-    const main = document.querySelector("main");
-    selectRangeWith(range => {
-        range.selectNodeContents(main);
-        range.setStart(main, 2);
-        range.setEnd(main, 9);
-    });
-</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001-ref.html
index 25dbeadb2e..2a2907b10a 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001-ref.html
@@ -6,7 +6,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001.html
index 6068a076f0..f441adf3b9 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-001.html
@@ -15,7 +15,7 @@
 
   <meta name="assert" content="This test is an adaptation (or modified version) of Example 11 (#example-c35bf49a). The 'div &gt; span::selection' selector has an higher specificity than the 'span::selection' selector.">
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-002.html
index 50be805f01..d10bdb9b04 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-002.html
@@ -15,7 +15,7 @@
 
   <meta name="assert" content="This test is an adaptation (or modified version) of Example 12 (#example-97480f68). In this test, &ltspan&gt; element's ::selection matches the ::selection { background-color: green; } rule and not the div#test::selection rule because '*' is implied when a tag selector is missing.">
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004-ref.html
index e755283a32..9b8507c4cc 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004-ref.html
@@ -6,7 +6,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004.html
index 56abba7156..295321a172 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-004.html
@@ -19,7 +19,7 @@
   https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
   -->
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
   <style>
   div
     {
diff --git a/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005-ref.html
index d1e597e05b..d1e597e05b 100644
--- a/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005-ref.html
diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005.html
index 2c6ba60270..25ad85fe70 100644
--- a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/cascade-highlight-005.html
@@ -6,7 +6,7 @@
 
   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-cascade">
-  <link rel="match" href="reference/cascade-highlight-005-ref.html">
+  <link rel="match" href="cascade-highlight-005-ref.html">
 
   <meta name="assert" content="In this test, 'background-color' has not been specified a value for the highlight pseudo-element of the span element. Since the span's parent element has an highlight pseudo-element also, then the span's background color for its highlight pseudo-element should be inherited from its parent highlight pseudo-element. Therefore the span element should have a green background color.">
 
@@ -28,7 +28,7 @@
   https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
   -->
 
-  <link rel="stylesheet" href="support/highlights.css">
+  <link rel="stylesheet" href="../support/highlights.css">
 
   <style>
   div
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001-ref.html
index a18690962f..b96ffce5ab 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001.html
index f237e9eca7..18b3635b3f 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-001.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-cascade-001-ref.html">
 <meta name="assert" value="This test verifies that, given ::selection styles with both color and background-color declared as unset, both properties inherit their values from the parent ::selection styles. All properties become inherited for the purposes of deciding whether unset should mean initial or inherit.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003-ref.html
index 256c28ba0c..68964149ba 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>Initial custom property values in :root::selection rule</title>
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   :root::selection {
     background-color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003.html
index 61bc46d4c5..b29f37528c 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-003.html
@@ -3,7 +3,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="match" href="highlight-cascade-003-ref.html">
 <meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   @property --bg {
     syntax: "<color>";
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004-ref.html
index f9bf83f9c1..5845e93620 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004-ref.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>Initial custom property values in div::selection rule</title>
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   div::selection {
     background-color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004.html
index eb181096ce..f3155bcec6 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-004.html
@@ -3,7 +3,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="match" href="highlight-cascade-004-ref.html">
 <meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   @property --bg {
     syntax: "<color>";
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005-ref.html
index 20d2b0bdb3..f0ea3faa76 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005-ref.html
@@ -3,7 +3,7 @@
 <title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     nav::selection,
     span::selection,
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005.html
index 008f56aded..958bdf6544 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-005.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-cascade-005-ref.html">
 <meta name="assert" content="This test verifies that, given both universal and non-universal ::selection rules, the subject of the non-universal rule has styles from both rules with the non-universal styles overriding the universal styles (due to the cascade), its descendants have styles from both rules with the universal styles overriding the non-universal styles (due to highlight inheritance), and its siblings have the universal styles only.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     /* * (universal) */::selection {
         background-color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006-ref.xhtml
index df0a56123e..643dd79325 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006-ref.xhtml
@@ -2,7 +2,7 @@
 <meta charset="utf-8"/>
 <title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and namespace-universal rules</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"/>
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
     main * { all: initial; display: block; }
     ::selection { color: green; }
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006.xhtml
index fb6d07f8f0..4a37af7c25 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-006.xhtml
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"/>
 <link rel="match" href="highlight-cascade-006-ref.xhtml"/>
 <meta name="assert" content="This test verifies that, given both universal ::selection rules and ::selection rules that are actually non-universal due to an explicit namespace prefix or default @namespace rule, the non-universal rules are not erroneously treated as universal."/>
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
     main * { all: initial; display: block; }
     ::selection { color: green; } /* 1. universal (* means *|* if there is no default @namespace) */
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-007.html
index de0322d910..df79d8dff5 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-007.html
@@ -5,8 +5,8 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7591">
 <meta name="assert" content="This test verifies that non-applicable property declarations are ignored in highlight pseudos, that the computed values of ‘font-size’ and ‘line-height’ in highlight pseudos are taken from the originating element, and that ‘text-shadow’ in highlight pseudos respects these values when given ‘em’ and ‘lh’ units.">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<script src="../support/selections.js"></script>
+<link rel="stylesheet" href="../support/highlights.css">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008-ref.html
index c87ddcf93c..70b9d958b5 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008-ref.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <title>Custom property values from the root element</title>
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   div::selection {
     background-color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008.html
index 10ca924b8f..720e2f0469 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-008.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-008.html
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
-<title>Custom property values from the root element</title>
+<title>Custom property values from the originating element</title>
 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="match" href="highlight-cascade-008-ref.html">
-<meta name="assert" value="This test verifies that when a custom property is not found in highlight cascade, its value is taken from the root element.">
+<meta name="assert" value="This test verifies that custom properties from the originating element are used to resolve var() on highlight pseudos.">
 <meta name="fuzzy" content="0-255;0-10">
-<script src="support/selections.js"></script>
+<script src="../support/selections.js"></script>
 <style>
   :root {
     --background-color: green;
-    --decoration-color: purple;
+    --decoration-color: yellow;
   }
   ::selection {
-    --decoration-color: yellow;
+    --background-color: cyan;
+    --decoration-color: magenta;
   }
   div::selection {
     background-color: var(--background-color, red);
@@ -20,8 +21,11 @@
     text-decoration-style: line;
     text-decoration-color: var(--decoration-color, red);
   }
-  span::selection {
+  span {
     --background-color: blue;
+  }
+  span::selection {
+    --background-color: purple;
     background-color: var(--background-color, red);
   }
 </style>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-009.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-009.html
index acc48c7c36..e95de9a781 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-009.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-cascade-009.html
@@ -4,18 +4,18 @@
 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6641">
-<meta name="assert" content="This test verifies that custom properties used in highlight pseudos are taken from the ::root if not found in the highlight inheritance chain.">
-<script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<meta name="assert" content="This test verifies that custom properties used in highlight pseudos are taken from the originating element.">
+<script src="../support/selections.js"></script>
+<link rel="stylesheet" href="../support/highlights.css">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <style>
   :root {
     --background-color: green;
-    --decoration-color: purple;
+    --decoration-color: green;
   }
   ::selection {
-    --decoration-color: green;
+    --decoration-color: purple;
   }
   div::selection {
     --background-color: blue;
@@ -31,11 +31,11 @@
     const body_selection = getComputedStyle(document.querySelector("body"), "::selection");
     const div_selection = getComputedStyle(document.querySelector("div"), "::selection");
     test(() => void assert_equals(body_selection.getPropertyValue("--background-color"), "green"),
-        "body ::selection has the root custom property");
+        "body ::selection uses the originating custom property");
     test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "green"),
-        "body ::selection uses its own custom property");
+        "body ::selection does not use its own custom property");
     test(() => void assert_equals(div_selection.getPropertyValue("--decoration-color"), "green"),
-        "div::selection inherits a custom property");
-    test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "blue"),
-        "div::selection uses its own custom property");
+        "div::selection uses the originating element custom property");
+    test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "green"),
+        "div::selection does not use its own custom property");
 </script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-inheritance.html
index d67ae82881..d67ae82881 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-inheritance.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-visited.html
index 207cb7b7dd..207cb7b7dd 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed-visited.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed.html
index 97c31809df..97c31809df 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-computed.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001-ref.html
index 93e2002f4a..d3a3d49797 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001-ref.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8" />
 <title>CSS Pseudo-Elements Test: Reference</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001.html
index 76d80d228a..efdb9016bc 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-001.html
@@ -5,7 +5,7 @@
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-painting-properties-001-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <meta name="fuzzy" content="0-50;0-150">
 <style>
 div {
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002-ref.html
index 11ca501065..6f9066cba8 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002-ref.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8" />
 <title>CSS Pseudo-Elements Test: Reference</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002.html
index ac3677c1cf..d02dc9e8c5 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-properties-002.html
@@ -5,7 +5,7 @@
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-painting-properties-002-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <meta name="fuzzy" content="0-50;0-150">
 <style>
 div {
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001-ref.html
index d6ee33cda7..1ab60db5c8 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset="utf-8">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001.html
index 141556f935..c82da8c380 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-001.html
@@ -4,7 +4,7 @@
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-painting-text-shadow-001-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002-ref.html
index fb2696a55a..6452a34d0e 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset="utf-8">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002.html
index 77858729af..870243f501 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-painting-text-shadow-002.html
@@ -4,7 +4,7 @@
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-painting-text-shadow-002-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001-ref.html
index 794796a88f..70ce6b59a4 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001-ref.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8" />
 <title>CSS Pseudo-Elements Test: Reference</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001.html
index a1512f014d..1869f8ab53 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-001.html
@@ -5,7 +5,7 @@
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-root-explicit-default-001-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 div {
   color: lime;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002-ref.html
index 3175948317..b64b007c64 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002-ref.html
@@ -3,7 +3,7 @@
 <meta charset="utf-8" />
 <title>CSS Pseudo-Elements Test: Reference</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 .highlight_reftest {
   color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002.html
index fc5698faa1..fe6d80be2e 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-explicit-default-002.html
@@ -5,7 +5,7 @@
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
 <link rel="match" href="highlight-currentcolor-root-explicit-default-002-ref.html">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
 .highlight_reftest {
   color: green;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-001.html
index ecf787b9b4..ecf787b9b4 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-001.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-002.html
index 420cc5ba15..420cc5ba15 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-002.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-ref.html
index 67ecb8df64..67ecb8df64 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-currentcolor-root-implicit-default-ref.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001-ref.html
index 14687acb84..102b07b481 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001.html
index 09e5abf9a3..7f370238df 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-001.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-001-ref.html">
 <meta name="assert" value="This test verifies that setting color on ::selection suppresses any UA non-initial used value for background-color. These properties are highlight colors, which are subject to paired cascade.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002-ref.html
index 48eb9911a1..19d731af02 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002.html
index affbe95629..626fc57558 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-002.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-002-ref.html">
 <meta name="assert" value="This test verifies that setting background-color on ::selection suppresses any UA non-initial used value for color. These properties are highlight colors, which are subject to paired cascade.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003-ref.html
index 18885fdc89..638ae00c68 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003.html
index 250e320210..8c621cc777 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-003.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-003-ref.html">
 <meta name="assert" value="This test verifies that setting text-decoration on ::selection does not suppress any UA non-initial used values for color or background-color. While the former is an applicable (shorthand) property for highlight styles, it is not one of the highlight colors (color or background-color), so paired cascade does not apply.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004-notref.html
index 63472b6758..72490b1461 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004-notref.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     :link, :visited {
         color: blue;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004.html
index 61e2b7d7f0..0a73d006b5 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-004.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
 <link rel="mismatch" href="highlight-paired-cascade-004-notref.html">
 <meta name="assert" value="This test verifies that setting color on ::target-text suppresses any UA non-initial used value for background-color. ::target-text is a highlight pseudo with a recommended UA default background-color that is not initial (Mark), so paired cascade can be observed.">
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     :link, :visited {
         color: blue;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005-ref.html
index 0ac5c02b20..862d06e6f6 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005.html
index 50677c811e..4ee6db3a09 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-005.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-005-ref.html">
 <meta name="assert" value="This test verifies that setting color to unset on ::selection suppresses any UA non-initial used value for background-color. The unset value is defined as both “treated as [inherit or initial depending on whether the property is inherited]” and “effectively erases all declared values occurring earlier in the cascade [(inclusive)]”, which are normally equivalent, but under paired cascade, the former wins.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006-ref.html
index 18885fdc89..638ae00c68 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006-ref.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006.html
index 20c03282c8..bef3601ccb 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-paired-cascade-006.html
@@ -6,7 +6,7 @@
 <link rel="match" href="highlight-paired-cascade-006-ref.html">
 <meta name="assert" value="This test verifies that setting color to revert on ::selection does not suppress any UA non-initial used value for background-color. Because the revert value rolls back the cascade, it destroys its own existence as a cascaded value, and this is also true under paired cascade.">
 <script src="support/selections.js"></script>
-<link rel="stylesheet" href="support/highlights.css">
+<link rel="stylesheet" href="../support/highlights.css">
 <style>
     main {
         font-size: 7em;
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-computed.html
index 4a274e1bbd..4a274e1bbd 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-computed.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-inheritance-computed-001.html
index 84c4045a54..84c4045a54 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-inheritance-computed-001.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-visited-computed-001.html
index a2b18effcc..a2b18effcc 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade/highlight-pseudos-visited-computed-001.html
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html
new file mode 100644
index 0000000000..836874df05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Pseudo Test: Dynamic Custom Properties for Highlights</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<head>
+  <style>
+    ::selection {
+      background-color: green;
+    }
+  </style>
+</head>
+<body>Green background when selected</body>
+<script>
+  window.getSelection().selectAllChildren(document.body);
+</script>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html
new file mode 100644
index 0000000000..836ef546fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-custom-properties-dynamic-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Pseudo Test: Dynamic Custom Properties for Highlights</title>
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="match" href="highlight-custom-properties-dynamic-001-ref.html">
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@igalia.com">
+<meta name="assert" value="Custom property values in highlights update correctly when the property is updated.">
+<head>
+  <style>
+    div {
+      --background-color: red;
+    }
+    ::selection {
+      background-color: var(--background-color, red);
+    }
+  </style>
+</head>
+<div id="originating">Green background when selected</div>
+<script>
+  window.getSelection().selectAllChildren(document.body);
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      originating.style.setProperty("--background-color", "green");
+      requestAnimationFrame(() => takeScreenshot());
+    });
+  });
+</script>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html
new file mode 100644
index 0000000000..4ff90afb38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal-ref.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights horizontal text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    :root {
+        line-height: 1;
+        white-space: break-spaces;
+    }
+    #originating_shadow {
+        font-size: 2em;
+        color: transparent;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 0;
+        top: 10px;
+        left: 10px;
+    }
+    #originating_text {
+        font-size: 2em;
+        color: black;
+        position: absolute;
+        z-index: 7;
+        top: 10px;
+        left: 10px;
+    }
+    #selection_only {
+        font-size: 2em;
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 5;
+        top: 10px;
+    }
+    #target {
+        font-size: 2em;
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 3;
+        top: 10px;
+    }
+    #both_text {
+        font-size: 2em;
+        color: green;
+        position: absolute;
+        z-index: 4;
+        top: 10px;
+    }
+    #both_shadow {
+        font-size: 2em;
+        color: transparent;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 2;
+        top: 10px;
+    }
+</style>
+<p id="originating_shadow">part</p>
+<p id="originating_text">part</p>
+<p id="selection_only">ially selected </p>
+<p id="both_text">ta</p>
+<p id="both_shadow">ta</p>
+<p id="target">rget</p>
+<script>
+    originatingCS = getComputedStyle(originating_text);
+    selection_only.style.left = (parseFloat(originatingCS.width) + parseFloat(originatingCS.left)).toString() + "px";
+    selectionCS = getComputedStyle(selection_only);
+    both_text.style.left = (parseFloat(selectionCS.width) + parseFloat(selectionCS.left)).toString() + "px";
+    both_shadow.style.left = both_text.style.left;
+    bothCS = getComputedStyle(both_text);
+    target.style.left = (parseFloat(bothCS.width) + parseFloat(bothCS.left)).toString() + "px";
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
new file mode 100644
index 0000000000..b1762e85ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights horizontal text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="highlight-painting-shadows-horizontal-ref.html">
+<meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows">
+<meta name="fuzzy" content="0-32;0-20">
+<script src="support/selections.js"></script>
+<style>
+    :root {
+        line-height: 1;
+        white-space: pre;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        top: 10px;
+        left: 10px;
+    }
+    p::selection {
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5);
+    }
+    p::target-text {
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5);
+    }
+</style>
+<p>partially selected target</p>
+<script>
+    window.location.hash = "#:~:text=target";
+    const target = document.querySelector("p");
+    selectRangeWith(range => {
+        range.selectNodeContents(target);
+        range.setStart(target.childNodes[0], 4);
+        range.setEnd(target.childNodes[0], 21);
+    });
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html
new file mode 100644
index 0000000000..00a6f1c808
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical-ref.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights vertical text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+    :root {
+        font-family: Ahem;
+        writing-mode: vertical-lr;
+        line-height: 1;
+        white-space: break-spaces;
+    }
+    #originating_shadow {
+        color: transparent;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 0;
+        top: 10px;
+        left: 10px;
+    }
+    #originating_text {
+        color: black;
+        position: absolute;
+        z-index: 7;
+        top: 10px;
+        left: 10px;
+    }
+    #selection_only {
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 5;
+        left: 10px;
+    }
+    #target {
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 3;
+        left: 10px;
+    }
+    #both_text {
+        color: green;
+        position: absolute;
+        z-index: 4;
+        left: 10px;
+    }
+    #both_shadow {
+        color: transparent;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5), -0.25em -0.25em rgba(0,128,0,0.5), 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        z-index: 2;
+        left: 10px;
+    }
+</style>
+<p id="originating_shadow">part</p>
+<p id="originating_text">part</p>
+<p id="selection_only">ially selected </p>
+<p id="both_text">ta</p>
+<p id="both_shadow">ta</p>
+<p id="target">rget</p>
+<script>
+    originatingCS = getComputedStyle(originating_text);
+    selection_only.style.top = (parseFloat(originatingCS.height) + parseFloat(originatingCS.top)).toString() + "px";
+    selectionCS = getComputedStyle(selection_only);
+    both_text.style.top = (parseFloat(selectionCS.height) + parseFloat(selectionCS.top)).toString() + "px";
+    both_shadow.style.top =  both_text.style.top;
+    bothCS = getComputedStyle(both_text);
+    target.style.top = (parseFloat(bothCS.height) + parseFloat(bothCS.top)).toString() + "px";
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
new file mode 100644
index 0000000000..7187c34da4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on highlights vertical text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="highlight-painting-shadows-vertical-ref.html">
+<meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows">
+<meta name="fuzzy" content="0-32;0-4">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<script src="support/selections.js"></script>
+<style>
+    :root {
+        font-family: Ahem;
+        writing-mode: vertical-lr;
+        line-height: 1;
+        white-space: pre;
+    }
+    p {
+        color: black;
+        text-shadow: 0.1em 0.1em rgba(0,0,0,0.5);
+        position: absolute;
+        top: 10px;
+        left: 10px;
+    }
+    p::selection {
+        color: green;
+        text-shadow: -0.25em -0.25em rgba(0,128,0,0.5);
+    }
+    p::target-text {
+        color: blue;
+        text-shadow: 0.25em 0.25em rgba(0,0,128,0.5);
+    }
+</style>
+<p>partially selected target</p>
+<script>
+    window.location.hash = "#:~:text=target";
+    const target = document.querySelector("p");
+    selectRangeWith(range => {
+        range.selectNodeContents(target);
+        range.setStart(target.childNodes[0], 4);
+        range.setEnd(target.childNodes[0], 21);
+    });
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html
index 63d8ee1eda..7fe76d1938 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight styling: custom properties are applicable properties in highlight pseudos</title>
+<title>CSS Pseudo-Elements Test: highlight styling: custom properties are not applicable properties in highlight pseudos</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
 <link rel="match" href="highlight-styling-001-ref.html">
-<meta name="assert" value="This test verifies that ::selection styles can set and reference custom properties.">
+<meta name="assert" value="This test verifies that ::selection styles cannot set custom properties.">
 <script src="support/selections.js"></script>
 <link rel="stylesheet" href="support/highlights.css">
 <style>
@@ -13,9 +13,9 @@
         margin: 0.5em;
     }
     main::selection {
-        --x: green;
+        --x: red;
         color: white;
-        background-color: var(--x);
+        background-color: var(--x, green);
     }
 </style>
 <p>Test passes if the text below is white on green.
diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html
index 2f7cc29128..351eacac88 100644
--- a/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html
@@ -1,21 +1,21 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>CSS Pseudo-Elements Test: highlight styling: originating custom property values do not affect highlight pseudos</title>
+<title>CSS Pseudo-Elements Test: highlight styling: originating custom property values are used for highlight pseudos</title>
 <link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
 <link rel="match" href="highlight-styling-002-ref.html">
-<meta name="assert" value="This test verifies that custom property values set in originating elements do not participate in the substitution of those properties in ::selection styles.">
+<meta name="assert" value="This test verifies that custom property values on the originating element are used for resolving var() in a selection pseudo.">
 <script src="support/selections.js"></script>
 <link rel="stylesheet" href="support/highlights.css">
 <style>
     main {
         font-size: 7em;
         margin: 0.5em;
-        --x: red;
+        --x: green;
     }
     main::selection {
         color: white;
-        background-color: var(--x, green);
+        background-color: var(--x, red);
     }
 </style>
 <p>Test passes if the text below is white on green.
diff --git a/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html
new file mode 100644
index 0000000000..f75017d5ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001-ref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: selected highlight highlight painting - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    div {
+      background-color: lightblue;
+      color: green;
+      width: fit-content;
+    }
+</style>
+<div id="content">When selected, the highlight color should remain.</div>
diff --git a/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html
new file mode 100644
index 0000000000..57078cf83b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/selection-over-highlight-001.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: selected highlight highlight painting</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<meta name="assert" value="Checks that the highlight colors persist when selected.">
+<link rel="match" href="selection-over-highlight-001-ref.html">
+<style>
+    ::selection {
+      background-color: lightblue;
+    }
+    ::highlight(green) {
+      color: green;
+    }
+</style>
+<div id="content">When selected, the highlight color should remain.</div>
+<script>
+  let range = new Range();
+  range.setStart(content, 0);
+  range.setEnd(content, 1);
+  CSS.highlights.set("green", new Highlight(range));
+
+  document.execCommand("selectAll");
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html
index 279ec674b4..35f2542c76 100644
--- a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html
@@ -18,7 +18,7 @@
 </style>
 
 <p>The test passes if the following word has a magenta background.</p>
-<div>Example</div>
+<div><span>Example</span></div>
 
 <script>
   location.href = "#:~:text=Example";
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html
new file mode 100644
index 0000000000..6189f844b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on horizontal target text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    :root {
+        line-height: 1;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    span {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5), 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+</style>
+<p>the <span>target</span> should have a shadow</p>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html
new file mode 100644
index 0000000000..1ded1360ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-horizontal.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on horizontal target text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="target-text-shadow-horizontal-ref.html">
+<meta name="assert" value="::target-text with a shadow is painted, including originating element shadows">
+<style>
+    :root {
+        line-height: 1;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    p::target-text {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5);
+    }
+</style>
+<p>the target should have a shadow</p>
+<script>
+    window.location.hash = "#:~:text=target";
+</script>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html
new file mode 100644
index 0000000000..cd9e179053
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical-ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on vertical target text - reference</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<style>
+    :root {
+        line-height: 1;
+        writing-mode: vertical-lr;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    span {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5), 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+</style>
+<p>the <span>target</span> should have a shadow</p>
diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html
new file mode 100644
index 0000000000..088f6fc175
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/target-text-shadow-vertical.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Pseudo-Elements Test: Shadows on vertical target text</title>
+<link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
+<link rel="match" href="target-text-shadow-vertical-ref.html">
+<meta name="assert" value="::target-text with a shadow is painted, including originating element shadows">
+<style>
+    :root {
+        line-height: 1;
+        writing-mode: vertical-lr;
+    }
+    p {
+        font-size: 2em;
+        color: black;
+        text-shadow: 0.1em 0.1em 3px rgba(0,0,0,0.5);
+    }
+    p::target-text {
+        color: green;
+        text-shadow: 0.25em 0.25em 3px rgba(0,0,128,0.5);
+    }
+</style>
+<p>the target should have a shadow</p>
+<script>
+    window.location.hash = "#:~:text=target";
+</script>
diff --git a/testing/web-platform/tests/css/css-ruby/line-spacing.html b/testing/web-platform/tests/css/css-ruby/line-spacing.html
index 9d3c6f23e7..4854e984c4 100644
--- a/testing/web-platform/tests/css/css-ruby/line-spacing.html
+++ b/testing/web-platform/tests/css/css-ruby/line-spacing.html
@@ -149,5 +149,16 @@ test(() => {
   assert_greater_than_equal(thirdLine.top - rubyLine.top,
                             rubyLine.top - firstLine.top + RUBY_EMPHASIS_SIZE);
 }, 'Don\'t Consume half-leading of the next line with text-emphasis');
+
+// crbug.com/336592423
+test(() => {
+  const {container, ruby, rt} = renderRuby(
+      '<div style="line-height:1;">' +
+      '<span style="display:inline-block; width:1em; height:4em; vertical-align:top"></span><br>' +
+      '<ruby>base<rt>annotation</rt></ruby></div>');
+  const firstLine = container.querySelector('span').getBoundingClientRect();
+  const rtBox = rt.getBoundingClientRect();
+  assert_greater_than_equal(rtBox.top, firstLine.bottom);
+}, 'An atomic-inline should not overlap with an annotation in the next line');
 </script>
 </body>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html
index 03e5cabe55..79a19130ff 100644
--- a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005-ref.html
@@ -11,3 +11,12 @@
 <p><rb>a</rb><rt>x</rt><rb>b</rb><rt>y</rt></p>
 <p><rbc><span>a</span><rb></rb>b</rbc><rt>x</rt><rt></rt><rt>y</rt></p>
 <p><rb>a</rb><rb></rb><rb>b</rb><rtc><span>x</span><rt></rt>y</rtc></p>
+
+<p>'a' and 'b c' should be paired with 'x' and 'y z' repectively:</p>
+<p><ruby>a <rt>x</rt><span style="display:block">b</span> c<rt>y z</ruby></p>
+
+<p>'a b' and 'c' should be paired with 'x y' and 'z' repectively:</p>
+<p><ruby>a <span style="display:block">b</span> <rt>x y</rt><span>c</span><rt>z</ruby></p>
+
+<p>'a b' and 'c d' should be paired with 'w x' and 'y z'  repectively:</p>
+<p><ruby>a <span style="display:block">b</span> <rt>w x</rt><span>c</span> <span style="display:block">d</span><rt>y z</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html
index a684d665c8..66f7dbdd17 100644
--- a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-insertion-005.html
@@ -20,3 +20,12 @@
 <p><rbc><span data-insert="after" data-tag="rb">a</span>b</rbc><rt>x</rt><rt></rt><rt>y</rt></p>
 <!--     pseudo ruby text -->
 <p><rb>a</rb><rb></rb><rb>b</rb><rtc><span data-insert="after" data-tag="rt">x</span>y</rtc></p>
+
+<p>'a' and 'b c' should be paired with 'x' and 'y z' repectively:</p>
+<p><ruby>a <span style="display:block" data-insert="before" data-tag="rt" data-text="x">b</span> c<rt>y z</ruby></p>
+
+<p>'a b' and 'c' should be paired with 'x y' and 'z' repectively:</p>
+<p><ruby>a <span style="display:block">b</span> <span data-insert="before" data-tag="rt" data-text="x y">c</span><rt>z</ruby></p>
+
+<p>'a b' and 'c d' should be paired with 'w x' and 'y z'  repectively:</p>
+<p><ruby>a <span style="display:block">b</span> <span data-insert="before" data-tag="rt" data-text="w x">c</span> <span style="display:block">d</span><rt>y z</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html
index 0067c014f5..113598eff2 100644
--- a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003-ref.html
@@ -18,3 +18,8 @@
 
 <p><rbc>ab</rbc><rt>xy</rt></p>
 <p><rb>ab</rb><rtc style="letter-spacing: 1px">xy</rtc></p>
+
+<p>'a b c' should be paried with 'x y z':</p>
+<p><ruby>a b <span style="display:block">c</span><rt>x y z</ruby>
+<p><ruby>a <span style="display:block">b</span> c<rt>x y z</ruby>
+<p><ruby><span style="display:block">a</span> b <span style="display:block">c</span><rt>x y z</ruby>
diff --git a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html
index d35b2b968d..ff6c0b4c83 100644
--- a/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html
+++ b/testing/web-platform/tests/css/css-ruby/ruby-dynamic-removal-003.html
@@ -31,3 +31,9 @@
 <!--     pseudo ruby text -->
 <!-- letter-spacing is added here to avoid fuzzy on Windows. See bug 1111891 -->
 <p><rb>ab</rb><rtc style="letter-spacing: 1px">x<rt class="remove"></rt>y</rtc></p>
+
+<p>'a b c' should be paried with 'x y z':</p>
+<!-- merge -->
+<p><ruby>a <rt class="remove">w</rt><span>b</span> <span style="display:block">c</span><rt>x y z</ruby>
+<p><ruby>a <span style="display:block">b</span> <rt class="remove">w</rt><span>c</span><rt>x y z</ruby>
+<p><ruby><span style="display:block">a</span> <rt class="remove">w</rt><span>b</span> <span style="display:block">c</span><rt>x y z</ruby>
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-001.html b/testing/web-platform/tests/css/css-scoping/font-face-001.html
index 7e47d18cba..4496786449 100644
--- a/testing/web-platform/tests/css/css-scoping/font-face-001.html
+++ b/testing/web-platform/tests/css/css-scoping/font-face-001.html
@@ -12,7 +12,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -27,6 +27,8 @@ test(function() {
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_not_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face applies in the shadow tree")
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-002.html b/testing/web-platform/tests/css/css-scoping/font-face-002.html
index 2e3272c44f..3a20d0b808 100644
--- a/testing/web-platform/tests/css/css-scoping/font-face-002.html
+++ b/testing/web-platform/tests/css/css-scoping/font-face-002.html
@@ -13,7 +13,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       #in-shadow {
@@ -24,6 +24,8 @@ test(function() {
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_not_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from the document applies in the shadow tree");
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-003.html b/testing/web-platform/tests/css/css-scoping/font-face-003.html
index d3f83e4ec3..4e8d8ff482 100644
--- a/testing/web-platform/tests/css/css-scoping/font-face-003.html
+++ b/testing/web-platform/tests/css/css-scoping/font-face-003.html
@@ -13,7 +13,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+  promise_test(async function () {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       :host {
@@ -24,6 +24,7 @@ test(function() {
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
   assert_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from document applies to :host");
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-004.html b/testing/web-platform/tests/css/css-scoping/font-face-004.html
index 6ac50bd432..f68e70994f 100644
--- a/testing/web-platform/tests/css/css-scoping/font-face-004.html
+++ b/testing/web-platform/tests/css/css-scoping/font-face-004.html
@@ -14,7 +14,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async function() {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       ::slotted(#in-document) {
@@ -25,6 +25,7 @@ test(function() {
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
   assert_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_not_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from document applies to a slotted element");
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-005.html b/testing/web-platform/tests/css/css-scoping/font-face-005.html
index fdf86fb56e..de102f253e 100644
--- a/testing/web-platform/tests/css/css-scoping/font-face-005.html
+++ b/testing/web-platform/tests/css/css-scoping/font-face-005.html
@@ -12,7 +12,7 @@
 </style>
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -27,6 +27,8 @@ test(function() {
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_not_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face should not leak out of shadow tree.");
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-006.html b/testing/web-platform/tests/css/css-scoping/font-face-006.html
index 8c6e341713..e72d4ec2aa 100644
--- a/testing/web-platform/tests/css/css-scoping/font-face-006.html
+++ b/testing/web-platform/tests/css/css-scoping/font-face-006.html
@@ -16,7 +16,7 @@
 </style>
 <div id="host"></div>
 <script>
-promise_test(async function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       :host::before, :host::after {
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-007.html b/testing/web-platform/tests/css/css-scoping/font-face-007.html
index ae669f638f..c644a54986 100644
--- a/testing/web-platform/tests/css/css-scoping/font-face-007.html
+++ b/testing/web-platform/tests/css/css-scoping/font-face-007.html
@@ -7,7 +7,7 @@
 
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -22,6 +22,8 @@ test(function() {
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from shadow applies to :host");
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-008.html b/testing/web-platform/tests/css/css-scoping/font-face-008.html
index a40b0247d1..52c7869f9f 100644
--- a/testing/web-platform/tests/css/css-scoping/font-face-008.html
+++ b/testing/web-platform/tests/css/css-scoping/font-face-008.html
@@ -8,7 +8,7 @@
 
 <div id="host"><span id="in-document">1234567890</span></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -23,6 +23,8 @@ test(function() {
     <span id="in-shadow">0123456789</span>
   `;
 
+  await document.fonts.ready;
+
   assert_equals(document.getElementById('in-document').offsetWidth, 160);
   assert_not_equals(host.shadowRoot.getElementById('in-shadow').offsetWidth, 160);
 }, "@font-face from shadow applies to a slotted element");
diff --git a/testing/web-platform/tests/css/css-scoping/font-face-009.html b/testing/web-platform/tests/css/css-scoping/font-face-009.html
index 5d770929ca..4e08162dcd 100644
--- a/testing/web-platform/tests/css/css-scoping/font-face-009.html
+++ b/testing/web-platform/tests/css/css-scoping/font-face-009.html
@@ -12,7 +12,7 @@
 </style>
 <div id="host"></div>
 <script>
-test(function() {
+promise_test(async () => {
   host.attachShadow({ mode: "open" }).innerHTML = `
     <style>
       @font-face {
@@ -27,6 +27,8 @@ test(function() {
     <slot></slot>
   `;
 
+  await document.fonts.ready;
+
   //shrinkwrapped size for a default font will be a bit more than 80-90
   //if the font is applied, it will be a bit more than 160
   assert_greater_than(document.getElementById('host').offsetWidth, 160);
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js b/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js
index a3591d48ed..8dce29474d 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/resources/common.js
@@ -26,13 +26,15 @@ async function snap_test_setup(test, scroller, event_type) {
   });
 }
 
-async function test_snap_event(test, test_data, event_type) {
+async function test_snap_event(test, test_data, event_type,
+                               use_onsnap_member = false) {
   await snap_test_setup(test, test_data.scroller, event_type);
 
   let listener = test_data.scroller ==
     document.scrollingElement ? document : test_data.scroller;
 
-  const event_promise = waitForSnapEvent(listener, event_type);
+  const event_promise = waitForSnapEvent(listener, event_type, true,
+                                         use_onsnap_member);
   await test_data.scrolling_function();
   let evt = await event_promise;
 
@@ -45,19 +47,36 @@ async function test_snap_event(test, test_data, event_type) {
     "horizontal scroll offset mismatch.");
 }
 
-async function test_snapchanged(test, test_data) {
-  await test_snap_event(test, test_data, "snapchanged");
+async function test_snapchanged(test, test_data, use_onsnap_member = false) {
+  await test_snap_event(test, test_data, "snapchanged", use_onsnap_member);
 }
 
-function waitForEventUntil(event_target, event_type, wait_until) {
+function waitForEventUntil(event_target, event_type, wait_until,
+                           use_onsnap_member = false) {
   return new Promise(resolve => {
     let result = null;
     const listener = (evt) => {
       result = evt;
     };
-    event_target.addEventListener(event_type, listener);
+    if (use_onsnap_member) {
+      if (event_type === "snapchanging") {
+        event_target.onsnapchanging = listener;
+      } else {
+        event_target.onsnapchanged = listener;
+      }
+    } else {
+      event_target.addEventListener(event_type, listener);
+    }
     wait_until.then(() => {
-      event_target.removeEventListener(event_type, listener);
+      if (use_onsnap_member) {
+        if (event_type === "snapchanging") {
+          event_target.onsnapchanging = null;
+        } else {
+          event_target.onsnapchanged = null;
+        }
+      } else {
+        event_target.removeEventListener(event_type, listener);
+      }
       resolve(result);
     });
   });
@@ -77,30 +96,19 @@ function waitForEventsUntil(event_target, event_type, wait_until) {
   });
 }
 
-function waitForOnSnapchanging(event_target) {
-  return new Promise(resolve => {
-    let result = null;
-    const listener = (evt) => {
-      result = evt;
-    };
-    event_target.onsnapchanging = listener;
-    waitForScrollendEventNoTimeout(event_target).then(() => {
-      event_target.onsnapchanging = null;
-      resolve(result);
-    });
-  });
-}
-
 // Proxy a wait for a snap event. We want to avoid having a test
 // timeout in the event of an expected snap event not firing in a particular
 // test case as that would cause the entire file to fail.
 // Snap events should fire before scrollend, so if a scroll should happen, wait
 // for a scrollend event. Otherwise, just do a rAF-based wait.
-function waitForSnapEvent(event_target, event_type, scroll_happens = true) {
+function waitForSnapEvent(event_target, event_type, scroll_happens = true,
+                          use_onsnap_member = false) {
   return scroll_happens ? waitForEventUntil(event_target, event_type,
-                                   waitForScrollendEventNoTimeout(event_target))
+                                   waitForScrollendEventNoTimeout(event_target),
+                                   use_onsnap_member)
                         : waitForEventUntil(event_target, event_type,
-                                   waitForAnimationFrames(2));
+                                   waitForAnimationFrames(2),
+                                   use_onsnap_member);
 }
 
 function waitForSnapChangedEvent(event_target, scroll_happens = true) {
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/resources/programmatic-scroll-common.js b/testing/web-platform/tests/css/css-scroll-snap-2/resources/programmatic-scroll-common.js
deleted file mode 100644
index 8257b98fe3..0000000000
--- a/testing/web-platform/tests/css/css-scroll-snap-2/resources/programmatic-scroll-common.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// Helper functions for snapchanged-on-programmatic-* tests.
-
-// Utility function to test that onsnapchanging is triggered for
-// snapchanging-on-programmatic-* tests which set up a similar layout in which
-// the |scroller| has 3 snap targets that form a vertical column along
-// |scroller|'s middle. onsnapchanging should be triggered by conducting a
-// programmatic scroll to the top of snap_target.
-async function test_programmatic_scroll_onsnapchanging(test,
-                                                       scroller,
-                                                       event_target,
-                                                       snap_target) {
-  await snap_test_setup(test, scroller, "snapchanging");
-  const expected_snap_targets = { block: snap_target, inline: null };
-
-  // Scroll and wait for a snapchanging event.
-  const snapchanging_promise = waitForOnSnapchanging(event_target);
-  scroller.scrollTo(0, snap_target.offsetTop);
-  const snapchanging_event = await snapchanging_promise;
-
-  // Assert that snapchanging fired and indicated that snap_target would
-  // be snapped to.
-  assertSnapEvent(snapchanging_event, expected_snap_targets);
-  assert_equals(scroller.scrollLeft, 0, "scrollLeft is zero");
-  assert_equals(scroller.scrollTop, snap_target.offsetTop,
-    "snapped to snap_target");
-}
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js b/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js
index 820f143816..07c1428633 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/resources/user-scroll-common.js
@@ -69,32 +69,3 @@ async function test_no_snapchanged(t, scroller, delta) {
 async function test_no_snapchanging(t, scroller, delta) {
   await test_no_snap_event(t, scroller, delta, "snapchanging");
 }
-
-// Utility function to test that onsnapchanging is triggered for
-// snapchanging-on-user-* tests which set up a similar layout in which
-// the |scroller| has 3 snap targets that form a vertical column along
-// |scroller|'s middle. onsnapchanging should be triggered by touch-dragging
-// |scroller|'s content so that |snap_target|'s top aligns to |snap_target|.
-async function test_user_scroll_onsnapchanging(test, scroller, event_target,
-                                                snap_target) {
-  await snap_test_setup(test, scroller, "snapchanging");
-
-  // Compute touch positions to drag the top of snap_target to the top of
-  // the scroller.
-  const scroller_middle = Math.round(scroller.clientWidth / 2);
-  const start_pos = { x: scroller_middle, y: snap_target.offsetTop };
-  const end_pos = { x: scroller_middle, y: 0 };
-  const expected_snap_targets = { block: snap_target, inline: null };
-
-  // Scroll and wait for a snapchanging event.
-  const snapchanging_promise = waitForOnSnapchanging(event_target);
-  await snap_event_touch_scroll_helper(start_pos, end_pos);
-  const snapchanging_event = await snapchanging_promise;
-
-  // Assert that snapchanging fired and indicated that snap_target would
-  // be snapped to.
-  assertSnapEvent(snapchanging_event, expected_snap_targets);
-  assert_equals(scroller.scrollLeft, 0, "scrollLeft is zero");
-  assert_equals(scroller.scrollTop, snap_target.offsetTop,
-    "snapped to snap_target");
-}
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snap-events-with-pseudo-target.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snap-events-with-pseudo-target.tentative.html
new file mode 100644
index 0000000000..baa3efc7ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snap-events-with-pseudo-target.tentative.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title> CSS Scroll Snap 2 Test: Snap Events with pseudo-element targets.</title>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/resources/testdriver.js"></script>
+    <script src="/resources/testdriver-actions.js"></script>
+    <script src="/resources/testdriver-vendor.js"></script>
+    <script src="/css/css-scroll-snap-2/resources/common.js"></script>
+    <script src="/css/css-scroll-snap-2/resources/user-scroll-common.js"></script>
+    <script src="/dom/events/scrolling/scroll_support.js"></script>
+  </head>
+  <body>
+    <style>
+      .scroller {
+        overflow: scroll;
+        width: 200px;
+        height: 200px;
+        border: solid 1px black;
+        scroll-snap-type: y mandatory;
+        position: absolute;
+        resize: both;
+      }
+      .space {
+        height: 300vh;
+        width: 300vw;
+        position: absolute;
+      }
+      .scroller::before, .scroller::after {
+        scroll-snap-align: start;
+        height: 50px;
+        width: 50px;
+        color: white;
+        display: block;
+      }
+      .scroller::before {
+        content: "before";
+        background-color: blue;
+      }
+      .scroller::after {
+        content: "after";
+        background-color: orange;
+        margin-top: 100px;
+      }
+    </style>
+    <div class="scroller" id="scroller">
+      <div class="space"></div>
+    </div>
+
+    <script>
+      const start_pos = {
+        x: scroller.clientWidth / 2,
+        y: scroller.clientHeight / 2,
+      };
+      const end_pos = { x: scroller.clientWidth / 2, y: 0 };
+      // The top of the ::after pseudo element is the sum of the
+      // ::before pseudo-element's height (50) and the ::after
+      // pseudo-element's margin-top (100).
+      const after_pseudo_element_top = 50 + 100;
+      const test_data = {
+        scroller: scroller,
+        scrolling_function: async () => {
+          await snap_event_touch_scroll_helper(start_pos, end_pos);
+        },
+        expected_snap_targets: { block: scroller, inline: null },
+        expected_scroll_offsets: {
+          x: 0,
+          y: after_pseudo_element_top,
+        }
+      };
+
+      promise_test(async (t) => {
+        await test_snapchanged(t, test_data);
+      }, "snapTarget for snapchanged is the owning element when a snap area " +
+         "belongs to a pseudo-element");
+
+      promise_test(async (t) => {
+        await test_snap_event(t, test_data, "snapchanging");
+      }, "snapTarget for snapchanging is the owning element when a snap area " +
+         "belongs to a pseudo-element");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html
index 98ec2e5d75..8360369422 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-root-scroll.tentative.html
@@ -8,6 +8,7 @@
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <script src="/css/css-scroll-snap-2/resources/common.js"></script>
+  <script src="/css/css-scroll-snap-2/resources/programmatic-scroll-common.js"></script>
   <script src="/dom/events/scrolling/scroll_support.js"></script>
   <script src="/web-animations/testcommon.js"></script>
 </head>
@@ -61,6 +62,7 @@
 
   <script>
     let scroller = document.scrollingElement;
+    let snap_point_2 = document.getElementById("snap_point_2");
 
     promise_test(async (t) => {
       await waitForCompositorCommit();
@@ -79,6 +81,23 @@
     }, "snapchanged event fires after snap target changes via scrollTo");
 
     promise_test(async (t) => {
+      await waitForCompositorCommit();
+      const test_data = {
+        scroller: scroller,
+        scrolling_function: () => {
+            scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop);
+        },
+        expected_snap_targets: { block: snap_point_2, inline: snap_point_2 },
+        expected_scroll_offsets: {
+          x: snap_point_2.offsetLeft,
+          y: snap_point_2.offsetTop,
+        }
+      };
+      await test_snapchanged(t, test_data, /*use_onsnap_member*/true);
+    }, "Document.onsnapchanged event fires after snap target changes via" +
+       "scrollTo");
+
+    promise_test(async (t) => {
       checkSnapEventSupport("snapchanged");
       await waitForScrollReset(t, scroller);
       await waitForCompositorCommit();
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html
index 9dff856f34..2b2e6a77c5 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-programmatic-scroll.tentative.html
@@ -8,6 +8,7 @@
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <script src="/css/css-scroll-snap-2/resources/common.js"></script>
+  <script src="/css/css-scroll-snap-2/resources/programmatic-scroll-common.js"></script>
   <script src="/dom/events/scrolling/scroll_support.js"></script>
   <script src="/web-animations/testcommon.js"></script>
 </head>
@@ -68,6 +69,7 @@
   <script>
   function runTests () {
     let scroller = document.getElementById("scroller");
+    let snap_point_2 = document.getElementById("snap_point_2");
 
     promise_test(async (t) => {
       await waitForCompositorCommit();
@@ -86,6 +88,23 @@
     }, "snapchanged event fires after snap target changes via scrollTo");
 
     promise_test(async (t) => {
+      await waitForCompositorCommit();
+      const test_data = {
+        scroller: scroller,
+        scrolling_function: () => {
+            scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop);
+        },
+        expected_snap_targets: { block: snap_point_2, inline: snap_point_2 },
+        expected_scroll_offsets: {
+          x: snap_point_2.offsetLeft,
+          y: snap_point_2.offsetTop,
+        }
+      };
+      await test_snapchanged(t, test_data, /*use_onsnap_member*/true);
+    }, "Element.onsnapchanged event fires after snap target changes via" +
+       "scrollTo");
+
+    promise_test(async (t) => {
       checkSnapEventSupport("snapchanged");
       await waitForScrollReset(t, scroller);
       await waitForCompositorCommit();
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html
index 127376caa2..a59d9c5859 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-root-scroll.tentative.html
@@ -161,6 +161,29 @@
       await test_snapchanged(t, test_data);
     }, "snapchanged event fires after snap target changes on keydown press");
 
+    // Touch scroll test (onsnapchanged variant).
+    promise_test(async (t) => {
+      await waitForCompositorCommit();
+      const start_pos = {
+        x: scroller.clientWidth / 2,
+        y: scroller.clientHeight / 2,
+      };
+      const end_pos = { x: 0, y: 0 };
+      const test_data = {
+        scroller: scroller,
+        scrolling_function: async () => {
+          await snap_event_touch_scroll_helper(start_pos, end_pos);
+        },
+        expected_snap_targets: { block: snap_point_2, inline: snap_point_2 },
+        expected_scroll_offsets: {
+          x: offset_to_snap_point_2.x,
+          y: offset_to_snap_point_2.y,
+        }
+      };
+      await test_snapchanged(t, test_data, /*use_onsnap_memeber*/true);
+    }, "Document.snapchanged event fires after snap target changes on touch " +
+       "scroll");
+
     promise_test(async (t) => {
       await test_no_snapchanged(t, scroller, /*delta*/10);
     }, "snapchanged is not fired if snap target doesn't change on user scroll");
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html
index 91194642b5..d2c2789c88 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-on-user-scroll.tentative.html
@@ -165,6 +165,29 @@
       await test_snapchanged(t, test_data);
     }, "snapchanged event fires after snap target changes on keydown press");
 
+    // Touch scroll test (onsnapchanged variant).
+    promise_test(async (t) => {
+      await waitForCompositorCommit();
+      const start_pos = {
+        x: scroller.clientWidth / 2,
+        y: scroller.clientHeight / 2,
+      };
+      const end_pos = { x: 0, y: 0 };
+      const test_data = {
+        scroller: scroller,
+        scrolling_function: async () => {
+          await snap_event_touch_scroll_helper(start_pos, end_pos);
+        },
+        expected_snap_targets: { block: snap_point_2, inline: snap_point_2 },
+        expected_scroll_offsets: {
+          x: offset_to_snap_point_2.x,
+          y: offset_to_snap_point_2.y,
+        }
+      };
+      await test_snapchanged(t, test_data, /*use_onsnap_memeber*/true);
+    }, "Element.onsnapchanged event fires after snap target changes on touch " +
+       "scroll");
+
     promise_test(async (t) => {
       await test_no_snapchanged(t, scroller, /*delta*/10);
     }, "snapchanged is not fired if snap target doesn't change on user scroll");
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-scrolling-non-snapping-axis.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-scrolling-non-snapping-axis.tentative.html
new file mode 100644
index 0000000000..e39fc0c44e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanged/snapchanged-scrolling-non-snapping-axis.tentative.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title> CSS Scroll Snap 2 Test: snapchanged events</title>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/resources/testdriver.js"></script>
+    <script src="/resources/testdriver-actions.js"></script>
+    <script src="/resources/testdriver-vendor.js"></script>
+    <script src="/css/css-scroll-snap-2/resources/common.js"></script>
+    <script src="/dom/events/scrolling/scroll_support.js"></script>
+    <script src="/css/css-scroll-snap/support/common.js"></script>
+  </head>
+  <body>
+    <style>
+      .scroller {
+        overflow: scroll;
+        width: 200px;
+        height: 200px;
+        border: solid 1px black;
+        scroll-snap-type: y mandatory;
+        position: absolute;
+        resize: both;
+      }
+      .snaparea {
+        scroll-snap-align: start;
+        height: 50px;
+        width: 50px;
+        color: white;
+        margin-top: 100px;
+        background-color: purple;
+      }
+      .space {
+        height: 300vh;
+        width: 300vw;
+        position: absolute;
+      }
+    </style>
+    <div class="scroller" id="scroller">
+      <div class="space"></div>
+      <div class="snaparea"> Area2</div>
+      <div class="snaparea"> Area1</div>
+    </div>
+
+    <script>
+      promise_test(async (t) => {
+        await waitForCompositorCommit();
+
+        scroller.focus();
+
+        const snapchanged_promise = waitForSnapEvent(scroller, "snapchanged");
+        await test_driver.send_keys(scroller, KEY_CODE_MAP["ArrowRight"]);
+        const snap_event = await snapchanged_promise;
+
+        assert_equals(snap_event, null, "no snapchanged event fired as " +
+          "scroller doesn't snap in the x axis");
+      }, "keyboard scroll on non-snapping axis doesn't trigger snapchanged");
+
+      promise_test(async (t) => {
+        await waitForScrollReset(t, scroller);
+        await waitForCompositorCommit();
+        scroller.focus();
+
+        const snapchanged_promise = waitForSnapEvent(scroller, "snapchanged");
+        const wheel_scroll_amount = 25;
+        new test_driver.Actions().scroll(0, 0,
+          wheel_scroll_amount,
+          0,
+          { origin: scroller }).send();
+        const snap_event = await snapchanged_promise;
+        assert_equals(snap_event, null, "no snapchanged event fired as " +
+          "scroller doesn't snap in the x axis");
+      }, "wheel scroll on non-snapping axis doesn't trigger snapchanged");
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html
index b714a6cfb5..54c2c95c50 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-root-scroll.tentative.html
@@ -87,10 +87,22 @@
     " snap targets.");
 
     promise_test(async (t) => {
-      await test_programmatic_scroll_onsnapchanging(t, scroller, document,
-                                                    snap_area_2);
-    }, "programmatic scroll triggers Document.snapchanging when scrolling a " +
-       "snap container");
+      await waitForCompositorCommit();
+      const test_data = {
+        scroller: scroller,
+        scrolling_function: async () => {
+          scroller.scrollTo(0, snap_area_2.offsetTop);
+        },
+        expected_snap_targets: { block: snap_area_2, inline: null },
+        expected_scroll_offsets: {
+          x: 0,
+          y: snap_area_2.offsetTop
+        }
+      };
+      await test_snap_event(t, test_data, "snapchanging",
+                            /*use_onsnap_member*/true);
+    }, "Document.snapchanging fires on programmatic scrolls that changes a" +
+       "scroller's snap targets.");
 
     promise_test(async (t) => {
       checkSnapEventSupport("snapchanging");
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html
index 6e7b0126f7..0bd65f8e42 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-programmatic-scroll.tentative.html
@@ -94,10 +94,22 @@
     " snap targets.");
 
     promise_test(async (t) => {
-      await test_programmatic_scroll_onsnapchanging(t, scroller, scroller,
-                                                    snap_area_2);
-    }, "programmatic scroll triggers Element.onsnapchanging when scrolling a " +
-       "snap container");
+      await waitForCompositorCommit();
+      const test_data = {
+        scroller: scroller,
+        scrolling_function: async () => {
+          scroller.scrollTo(0, snap_area_2.offsetTop);
+        },
+        expected_snap_targets: { block: snap_area_2, inline: null },
+        expected_scroll_offsets: {
+          x: 0,
+          y: snap_area_2.offsetTop
+        }
+      };
+      await test_snap_event(t, test_data, "snapchanging",
+                            /*use_onsnap_member*/true);
+    }, "Element.onsnapchanging fires on programmatic scrolls that changes a " +
+       "scroller's snap targets.");
 
     promise_test(async (t) => {
       checkSnapEventSupport("snapchanging");
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html
index 815c3c0922..8054db548d 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-root-scroll.tentative.html
@@ -159,10 +159,26 @@
       await test_snap_event(t, test_data, "snapchanging");
     }, "keyboard scroll triggers snapchanging.");
 
+    // Touch scroll test (onsnapchanging variant).
     promise_test(async (t) => {
-      await test_user_scroll_onsnapchanging(t, scroller, document,
-                                             snap_area_2);
-    }, "Document.onsnapchanging fires when scrolling a snap container.");
+      await waitForCompositorCommit();
+      const scroller_middle = Math.round(scroller.clientWidth / 2);
+      const test_data = {
+        scroller: scroller,
+        scrolling_function: async () => {
+          const start_pos = { x: scroller_middle, y: snap_area_2.offsetTop };
+          const end_pos = { x: scroller_middle, y: 0 };
+          await snap_event_touch_scroll_helper(start_pos, end_pos);
+        },
+        expected_snap_targets: { block: snap_area_2, inline: null },
+        expected_scroll_offsets: {
+          x: 0,
+          y: snap_area_2.offsetTop
+        }
+      };
+      await test_snap_event(t, test_data, "snapchanging",
+        /*use_onsnap_memeber*/true);
+    }, "touch scrolling fires Document.onsnapchanging.");
 
     // Touch scroll test: peek at snap_area_2 and then drag back to
     // snap_area_1.
diff --git a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html
index 27f52efc71..3755369a2f 100644
--- a/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html
+++ b/testing/web-platform/tests/css/css-scroll-snap-2/snapchanging/snapchanging-on-user-scroll.tentative.html
@@ -181,10 +181,26 @@
         assertSnapEvent(evts[1], { block: snap_area_1, inline: null });
       }, "snapchanging fires as scroll moves through different snap targets.");
 
+      // Touch scroll test.
       promise_test(async (t) => {
-        await test_user_scroll_onsnapchanging(t, scroller, scroller,
-                                             snap_area_2);
-      }, "Element.onsnapchanging fires when scrolling a snap container.");
+        await waitForCompositorCommit();
+        const scroller_middle = Math.round(scroller.clientWidth / 2);
+        const test_data = {
+          scroller: scroller,
+          scrolling_function: async () => {
+            const start_pos = { x: scroller_middle, y: snap_area_2.offsetTop };
+            const end_pos = { x: scroller_middle, y: 0 };
+            await snap_event_touch_scroll_helper(start_pos, end_pos);
+          },
+          expected_snap_targets: { block: snap_area_2, inline: null },
+          expected_scroll_offsets: {
+            x: 0,
+            y: snap_area_2.offsetTop
+          }
+        };
+        await test_snap_event(t, test_data, "snapchanging",
+                              /*use_onsnap_member*/true);
+      }, "touch scrolling fires Element.onsnapchanging.");
 
     // snapchanging doesn't fire test.
     promise_test(async (t) => {
diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/layout-follows-focused-targeted-block-iframe.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/layout-follows-focused-targeted-block-iframe.html
new file mode 100644
index 0000000000..4f4b4309fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/layout-follows-focused-targeted-block-iframe.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <style>
+      .scroller {
+        width: 200px;
+        height: 200px;
+        border: solid 1px black;
+        overflow: scroll;
+        scroll-snap-type: both mandatory;
+        position: relative;
+        resize: both;
+      }
+      .target {
+        scroll-snap-align: start;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        position: absolute;
+      }
+      .target:target {
+        background-color: blue;
+      }
+      .target:focus {
+        background-color: yellow;
+      }
+      #box1 {
+        left: 150px;
+        top: 0px;
+      }
+      #box2 {
+        left: 0px;
+        top: 150px;
+      }
+      .space {
+        width: 500%;
+        height: 500%;
+        position: absolute;
+      }
+    </style>
+    <div class="scroller" id="scroller">
+        <div tabindex="1" id="box1" class="target">Box 1</div>
+        <div tabindex="1" id="box2" class="target">Box 2</div>
+      <div class="space"></div>
+    </div>
+  </body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/layout-follows-focused-targeted-block.html b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/layout-follows-focused-targeted-block.html
new file mode 100644
index 0000000000..57dd52bcea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/snap-after-relayout/layout-follows-focused-targeted-block.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="help" href="https://drafts.csswg.org/css-scroll-snap" />
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/dom/events/scrolling/scroll_support.js"></script>
+  </head>
+  <body>
+    <style>
+      iframe {
+        width: 1000px;
+        height: 1000px;
+      }
+    </style>
+    <script>
+      let scroller;
+      let box1;
+      let box2;
+      let frame;
+
+      const iframe_load_promise = new Promise((resolve) => {
+        frame = document.createElement("iframe");
+        frame.onload = async () => {
+          scroller = frame.contentDocument.getElementById("scroller");
+          box1 = frame.contentDocument.getElementById("box1");
+          box2 = frame.contentDocument.getElementById("box2");
+          resolve();
+        };
+        frame.src = "./layout-follows-focused-targeted-block-iframe.html#box2";
+        document.body.appendChild(frame);
+      });
+
+      const displacement = 150;
+      async function test_resnap(t, target) {
+        // Save box1's position and setup the cleanup.
+        const box1_left = box1.style.left;
+        t.add_cleanup(async () => {
+          // Reset box1's position.
+          box1.style.left = box1_left;
+          // Reset scroller's writing-mode.
+          scroller.style.writingMode = "horizontal-tb";
+          // Reset scroll position.
+          await waitForScrollReset(t, scroller);
+        });
+
+        assert_equals(scroller.scrollTop, 0, "scroll top is reset");
+        assert_equals(scroller.scrollLeft, 0, "scroll left is reset");
+
+        // Move box1 outside the scrollport by translating it 150px
+        // horizontally.
+        const new_left = box1.offsetLeft + displacement;
+        box1.style.left = `${new_left}px`;
+
+        assert_equals(scroller.scrollLeft, target.offsetLeft,
+          `scroller followed ${target.id} in x axis`);
+
+        assert_equals(scroller.scrollTop, target.offsetTop,
+          `scroller followed ${target.id} in y axis`);
+      }
+
+      promise_test(async (t) => {
+        await iframe_load_promise;
+
+        box1.focus();
+        assert_equals(frame.contentDocument.activeElement, box1,
+          "sanity check that box1 is focused.");
+        assert_equals(frame.contentDocument.querySelector(":target"), box2,
+          "sanity check that box2 is targeted.");
+        // box2 is targeted but box1 is focused, so box1 should be
+        // followed.
+        await test_resnap(t, box1);
+
+        // Remove focus from box1.
+        scroller.focus();
+      }, "focused area prefered over targeted area.");
+
+      promise_test(async (t) => {
+        await iframe_load_promise;
+
+        assert_not_equals(frame.contentDocument.activeElement, box1,
+          "sanity check that box1 is not focused.");
+        assert_equals(frame.contentDocument.querySelector(":target"), box2,
+          "sanity check that box2 is targeted.");
+        // box2 is targeted and box1 is not focused, so box2 should be
+        // followed.
+        await test_resnap(t, box2);
+      }, "targeted area prefered over non-focused area.");
+
+      promise_test(async (t) => {
+        await iframe_load_promise;
+
+        // Clear the targeted element.
+        frame.contentDocument.location.hash = "";
+        assert_equals(frame.contentDocument.querySelector(":target"), null,
+          "sanity check that no box is targeted.");
+        assert_not_equals(frame.contentDocument.activeElement, box1,
+          "sanity check that box1 is not focused.");
+
+        // Neither box is targeted or focused; so, the block axis target should
+        // be followed.
+        await test_resnap(t, box1);
+      }, "block axis area is preferred.");
+
+      promise_test(async (t) => {
+        await iframe_load_promise;
+
+        scroller.style.writingMode = "vertical-lr";
+
+        // Clear the targeted element.
+        frame.contentDocument.location.hash = "";
+        assert_equals(frame.contentDocument.querySelector(":target"), null,
+          "sanity check that no box is targeted.");
+        assert_not_equals(frame.contentDocument.activeElement, box1,
+          "sanity check that box1 is not focused.");
+
+        // Neither box is targeted or focused; so, the block (x) axis target
+        // should be followed.
+        await test_resnap(t, box2);
+      }, "block axis area is preferred (vertical writing-mode).");
+    </script>
+  </body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html b/testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html
index fca4a964dc..66df33a4b7 100644
--- a/testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html
+++ b/testing/web-platform/tests/css/css-shadow-parts/invalidation-part-pseudo.html
@@ -3,7 +3,6 @@
 <link rel="help" href="https://drafts.csswg.org/css-shadow-parts" >
 <link rel="help" href="https://drafts.csswg.org/selectors/#matches">
 <link href="https://drafts.csswg.org/selectors/#matches" rel="help">
-<link rel="match" href="interaction-with-nested-pseudo-class-ref.html">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/testdriver.js"></script>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/part-after-combinator-invalidation-ref.html b/testing/web-platform/tests/css/css-shadow-parts/part-after-combinator-invalidation-ref.html
new file mode 100644
index 0000000000..d6db0d0e4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/part-after-combinator-invalidation-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<meta charset="utf-8">
+<div>What color am I?</div>
diff --git a/testing/web-platform/tests/css/css-shadow-parts/part-after-combinator-invalidation.html b/testing/web-platform/tests/css/css-shadow-parts/part-after-combinator-invalidation.html
new file mode 100644
index 0000000000..76beabe885
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shadow-parts/part-after-combinator-invalidation.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-shadow-parts">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1891296">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="part-after-combinator-invalidation-ref.html">
+<style>
+.inactive > ::part(content) {
+  color: red;
+}
+</style>
+<div class="inactive">
+  <div id="host">
+    <template shadowrootmode="open">
+      <div part="content">What color am I?</div>
+    </template>
+  </div>
+</div>
+<script>
+onload = () => {
+  host.getBoundingClientRect();
+  host.parentNode.className = "";
+  host.getBoundingClientRect();
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.webm b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.webm
index 74af43afeb..d1c021c03d 100644
--- a/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.webm
+++ b/testing/web-platform/tests/css/css-sizing/aspect-ratio/support/2x2-green.webm
diff --git a/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/WEB_FEATURES.yml
new file mode 100644
index 0000000000..5fc7189215
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: contain-intrinsic-size
+  files: "**"
diff --git a/testing/web-platform/tests/css/css-syntax/custom-property-rule-ambiguity.html b/testing/web-platform/tests/css/css-syntax/custom-property-rule-ambiguity.html
index b1adce7f9e..04f908acde 100644
--- a/testing/web-platform/tests/css/css-syntax/custom-property-rule-ambiguity.html
+++ b/testing/web-platform/tests/css/css-syntax/custom-property-rule-ambiguity.html
@@ -47,7 +47,7 @@
     assert_equals(rules[0].selectorText, 'div');
     let div = rules[0];
     let x = div.style.getPropertyValue('--x');
-    assert_equals(x, 'hover { }\n    .b { }');
+    assert_equals(x.trim(), 'hover { }\n    .b { }');
     let childRules = div.cssRules;
     assert_equals(childRules.length, 1);
     assert_equals(childRules[0].selectorText, '& .a');
diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-003-ref.html b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-003-ref.html
new file mode 100644
index 0000000000..2b19a83814
--- /dev/null
+++ b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-003-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="David Shin" href="dshin@mozilla.com">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1871609">
+<style>
+table {
+  border-collapse: collapse;
+}
+tr {
+  border: 1px solid grey;
+}
+</style>
+<table>
+  <tr>
+    <td>X</td>
+    <td>X</td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-003.html b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-003.html
new file mode 100644
index 0000000000..073f67e669
--- /dev/null
+++ b/testing/web-platform/tests/css/css-tables/collapsed-border-partial-invalidation-003.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="author" title="David Shin" href="dshin@mozilla.com">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1871609">
+<link rel="match" href="collapsed-border-partial-invalidation-003-ref.html">
+<meta name="assert" content="Invalidating part of a border-collapsed table keeps border styling correctly.">
+<style>
+table {
+  border-collapse: collapse;
+}
+tr {
+  border: 1px solid grey;
+}
+
+.foo {
+  border-right: 20px solid black;
+}
+
+</style>
+<table>
+  <tr>
+    <td id="cell" class="foo">X</td>
+    <td>X</td>
+  </tr>
+</table>
+<script>
+onload = function () {
+  cell.classList.remove("foo");
+  document.documentElement.className = "";
+}
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-near-zero-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-near-zero-ref.html
new file mode 100644
index 0000000000..6254e4e9fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-near-zero-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+  #target {
+    font-size: 100px;
+    color: rgba(0 255 0 / 0.5);
+    text-decoration: line-through;
+  }
+</style>
+<div id="target">X</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-near-zero.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-near-zero.html
new file mode 100644
index 0000000000..01cb5f8684
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-near-zero.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>Text with decoration and a text-shadow with a color with alpha close to 0</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor/#text-shadow-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor/#text-decoration-property">
+<link rel="match" href="basic-opacity-near-zero-ref.html">
+<style>
+  #target {
+    font-size: 100px;
+    color: rgba(0 255 0 / 0.5);
+    text-shadow: 0 2px 0 rgba(0 0 255 / 0.0001);
+    text-decoration: line-through;
+  }
+</style>
+<div id="target">X</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-zero-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-zero-ref.html
new file mode 100644
index 0000000000..6254e4e9fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-zero-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+  #target {
+    font-size: 100px;
+    color: rgba(0 255 0 / 0.5);
+    text-decoration: line-through;
+  }
+</style>
+<div id="target">X</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-zero.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-zero.html
new file mode 100644
index 0000000000..ff9d507853
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-zero.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>Text with decoration and a text-shadow with a color with alpha=0</title>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor/#text-shadow-property">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor/#text-decoration-property">
+<link rel="match" href="basic-opacity-zero-ref.html">
+<style>
+  #target {
+    font-size: 100px;
+    color: rgba(0 255 0 / 0.5);
+    text-shadow: 0 2px 0 rgba(255 128 0 / 0);
+    text-decoration: line-through;
+  }
+</style>
+<div id="target">X</div>
diff --git a/testing/web-platform/tests/css/css-text/hyphens/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-text/hyphens/WEB_FEATURES.yml
new file mode 100644
index 0000000000..c8270e62c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/hyphens/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: hyphens
+  files: "**"
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-subset-001-ref.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-subset-001-ref.html
new file mode 100644
index 0000000000..10abd537c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-subset-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt-min.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+  text-spacing-trim: space-all;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+halt {
+  font-feature-settings: 'halt' 1, 'vhal' 1;
+}
+</style>
+<div id="container">
+  <div>国（<halt>（</halt>国</div>
+  <div>国）<halt>（</halt>国</div>
+  <div>国<halt>）</halt>）国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-subset-001.html b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-subset-001.html
new file mode 100644
index 0000000000..caef2b18e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text/text-spacing-trim/text-spacing-trim-subset-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
+<link rel="match" href="text-spacing-trim-subset-001-ref.html">
+<meta name="variant" content="?class=halt,htb">
+<meta name="variant" content="?class=halt,vrl">
+<script src="support/variant-class.js"></script>
+<style>
+@font-face {
+  font-family: halt-font;
+  src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt-min.otf');
+}
+#container {
+  font-family: halt-font;
+  font-size: 20px;
+}
+.vrl {
+  writing-mode: vertical-rl;
+}
+</style>
+<div id="container">
+  <div>国（（国</div>
+  <div>国）（国</div>
+  <div>国））国</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-transitions/shadow-root-insertion.html b/testing/web-platform/tests/css/css-transitions/shadow-root-insertion.html
new file mode 100644
index 0000000000..47fc665aa3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-transitions/shadow-root-insertion.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Transitions: behavior when a shadow root is inserted while transitioning</title>
+<meta name="assert" content="Checks the addition of a shadow root does not affect an in-flight transition">
+<link rel="help" href="https://drafts.csswg.org/css-transitions/">
+
+<script src="/resources/testharness.js" type="text/javascript"></script>
+<script src="/resources/testharnessreport.js" type="text/javascript"></script>
+<script src="./support/helper.js" type="text/javascript"></script>
+
+</head>
+<body>
+<div id="log"></div>
+<script>
+test(t => {
+  // Start a 100s transition 50% of the way through
+  const div = addDiv(t, {
+    style: 'transition: height 100s -50s linear; height: 0px',
+  });
+  getComputedStyle(div).height;
+  div.style.height = '100px';
+  assert_equals(
+    getComputedStyle(div).height,
+    '50px',
+    'Transition should be initially 50% complete'
+  );
+
+  // Add a shadow root
+  div.attachShadow({ mode: "open" });
+
+  // The transition on the height property should not have been canceled
+  assert_equals(
+    getComputedStyle(div).height,
+    '50px',
+    'Transition should not have been canceled'
+  );
+}, 'addition of a shadow root should not cancel in-flight transitions');
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html b/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html
index 92ad6e6125..1ad609dd90 100644
--- a/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html
+++ b/testing/web-platform/tests/css/css-transitions/starting-style-size-container.html
@@ -5,32 +5,58 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/css-transitions/support/helper.js"></script>
-<div id="container" style="width: 200px">
-  <div id="target" style="display: none"></div>
-</div>
+<body>
+</body>
 <style>
   #container {
     container-type: inline-size;
+    width: 100px;
   }
   #target {
     transition-property: background-color;
     transition-duration: 100s;
     transition-timing-function: steps(2, start);
     background-color: lime;
+    display: none;
   }
   @container (width > 300px) {
     @starting-style {
       #target { background-color: white; }
     }
   }
-  @container (width < 300px) {
+  @container ((width > 200px) and (width < 300px)) {
+    #target {
+      display: block;
+    }
+    @starting-style {
+      #target { background-color: white; }
+    }
+  }
+  @container (width < 200px) {
     @starting-style {
       #target { background-color: red; }
     }
   }
 </style>
 <script>
+  function setup(test) {
+    let container = document.createElement("div");
+    container.id = "container";
+    document.body.appendChild(container);
+
+    let target = document.createElement("div");
+    target.id = "target";
+    container.appendChild(target);
+
+    test.add_cleanup(() => {
+      target.remove();
+      container.remove();
+    });
+    return [container, target];
+  }
+
   promise_test(async t => {
+    let [container, target] = setup(t);
     await waitForAnimationFrames(2);
     assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)",
                   "No transition while display:none");
@@ -38,6 +64,21 @@
     target.style.display = "block";
     await waitForAnimationFrames(2);
     assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)",
-                  "@starting-style based on the size query evaluation from the same frame");
-  }, "Triggered transition from first style update based on up-to-date container query");
+                  "@starting-style based on the size query evaluation from " +
+                  "the same frame");
+  }, "Triggered transition from first style update based on up-to-date " +
+     "container query");
+
+  promise_test(async t => {
+    let [container, target] = setup(t);
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)",
+                  "No transition while display:none");
+    container.style.width = "250px";
+    await waitForAnimationFrames(2);
+    assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)",
+                  "@starting-style based on the size query evaluation from " +
+                  "the same frame");
+  }, "Triggered transition from the display change inside the up-to-date " +
+     "container query");
 </script>
diff --git a/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-delay-end.tentative.html b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-delay-end.tentative.html
deleted file mode 100644
index 79b9f94617..0000000000
--- a/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-delay-end.tentative.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<title>'animation-delay-end' property</title>
-<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
-<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
-<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="../../resources/testhelper.js"></script>
-<script src="resources/testsuite.js"></script>
-<body>
-<div id="log"></div>
-<script>
-'use strict';
-
-runListValuedPropertyTests('animation-delay-end', [
-  { syntax: '<time>' }
-]);
-
-</script>
diff --git a/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-delay-start.tentative.html b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-delay-start.tentative.html
deleted file mode 100644
index 2fba4d8e51..0000000000
--- a/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/animation-delay-start.tentative.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<title>'animation-delay-start' property</title>
-<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
-<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
-<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="../../resources/testhelper.js"></script>
-<script src="resources/testsuite.js"></script>
-<body>
-<div id="log"></div>
-<script>
-'use strict';
-
-runListValuedPropertyTests('animation-delay-start', [
-  { syntax: '<time>' }
-]);
-
-</script>
diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-auto-non-html-namespace-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-auto-non-html-namespace-001.html
new file mode 100644
index 0000000000..2756749725
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-auto-non-html-namespace-001.html
@@ -0,0 +1,19 @@
+<!-- DO NOT EDIT THIS FILE.
+Edit the appearance-* file instead and then run:
+    ./tools/appearance-build-webkit-reftests.py
+-->
+<!DOCTYPE html>
+<title>CSS Basic User Interface Test: -webkit-appearance: auto on elements in non-HTML namespace</title>
+<link rel="match" href="nothing-below-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching">
+<meta name="assert" content="-webkit-appearance: auto should have no effect on non-HTML elements.">
+<style>
+  div * { -webkit-appearance: auto; display: inline-block; width: 1em; height: 1em; }
+</style>
+<p>There should be nothing below:</p>
+<div id=div></div>
+<script>
+for (var tagName of ['button', 'input', 'meter', 'progress', 'select', 'textarea']) {
+  div.appendChild(document.createElementNS('not-html', tagName));
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml
index ca3c0ff91b..dc7331ab95 100644
--- a/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml
+++ b/testing/web-platform/tests/css/css-values/WEB_FEATURES.yml
@@ -5,6 +5,10 @@ features:
 - name: cap
   files:
   - cap-*
+- name: exp-functions
+  files:
+  - exp-log-*
+  - hypot-pow-sqrt-*
 - name: ic
   files:
   - ic-*
diff --git a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
index 06277376e9..6d15c3f226 100644
--- a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
+++ b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
@@ -180,7 +180,7 @@
   test_interpolation({
     property: 'height',
     from: 'calc-size(37px, 200px)',
-    to: `calc-size(37px, size * 2 + 3% + 17px)`, /* adds to 100px */
+    to: 'calc-size(37px, size * 2 + 3% + 17px)', /* adds to 100px */
   }, [
     { at: -0.25, expect: '225px' },
     { at: 0, expect: '200px' },
@@ -189,4 +189,43 @@
     { at: 1.25, expect: '75px' },
   ]);
 
+  test_interpolation({
+    property: 'height',
+    from: 'calc-size(auto, size)',
+    to: '50%',
+  }, [
+    { at: -0.25, expect: '87.5px' },
+    { at: 0, expect: '100px' },
+    { at: 0.75, expect: '137.5px' },
+    { at: 1, expect: '150px' },
+    { at: 1.25, expect: '162.5px' },
+  ]);
+
+  // Rerun roughly the same test with an auto height container.
+  let auto_style_text = `
+    .parent {
+      height: auto;
+    }
+  `;
+  let auto_style_element = document.createElement("style");
+  auto_style_element.append(document.createTextNode(auto_style_text));
+  document.head.append(auto_style_element);
+
+  test_interpolation({
+    property: 'height',
+    from: 'calc-size(auto, size * 2)',
+    to: '50%',
+  }, [
+    { at: -0.25, expect: '250px' },
+    { at: 0, expect: '200px' },
+    { at: 0.75, expect: '50px' },
+    /* TODO(https://crbug.com/40339056): It's questionable whether this should
+     * be the case, particularly for transitions.  Perhaps the value at the
+     * end should have its percentage-ness back and be 100px here? */
+    { at: 1, expect: '0px' },
+    { at: 1.25, expect: '0px' },
+  ]);
+
+  auto_style_element.remove();
+
 </script>
diff --git a/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html
index afcb200424..422ab3c33e 100644
--- a/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html
+++ b/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html
@@ -70,4 +70,16 @@ test_valid_value("width", "calc-size(calc-size(min-content, size), size)");
 
 test_invalid_value("height", "calc(12% + calc-size(any, 31%))");
 
+// Based on the discussion in https://github.com/w3c/csswg-drafts/issues/10259
+// this presumes parse-time conversion of the one-argument form to the
+// two-argument form, but this isn't yet specified.
+test_valid_value("width", "calc-size(30px)", "calc-size(any, 30px)");
+test_valid_value("width", "calc-size(min(30px, 2em))", "calc-size(any, min(30px, 2em))");
+test_invalid_value("width", "calc-size(any)");
+test_valid_value("width", "calc-size(calc-size(any, 30px))", "calc-size(calc-size(any, 30px), size)");
+test_invalid_value("width", "calc-size(size)");
+test_valid_value("width", "calc-size(fit-content)", "calc-size(fit-content, size)");
+test_valid_value("width", "calc-size(calc-size(fit-content, size * 2))", "calc-size(calc-size(fit-content, size * 2), size)");
+test_valid_value("width", "calc-size(calc-size(30px))", "calc-size(calc-size(any, 30px), size)");
+
 </script>
diff --git a/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html b/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html
index 9ab537cad6..5c8d12f9cd 100644
--- a/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html
+++ b/testing/web-platform/tests/css/css-values/container-progress-computed.tentative.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="help" href="https://drafts.csswg.org/css-values-5/#container-progress-func">
 <link rel="author" title="sakhapov@chromium.org">
 <script src="/resources/testharness.js"></script>
@@ -15,6 +16,8 @@
 <style>
 :root {
   font-size: 10px;
+  width: 100vw;
+  height: 100vh;
 }
 #out-of-scope-container {
   container: my-container-3 / size;
@@ -42,8 +45,9 @@
 </style>
 <script>
 
-let width = window.innerWidth;
-let height = window.innerHeight;
+// innerWidth and innerHeight have lossy precision, see
+// https://github.com/w3c/csswg-drafts/issues/5260.
+let { width, height } = document.documentElement.getBoundingClientRect();
 
 let extraWidth = 5051;
 let extraHeight = 1337;
@@ -68,10 +72,10 @@ test_math_used('calc(container-progress(width of my-container from 0px to 50px)
 test_math_used('calc(container-progress(height of my-container from 10px to sign(50px - 500em) * 10px))', (outerHeight - 10) / (-10 - 10), {type:'number'});
 
 // Fallback
-test_math_used('container-progress(width of non-existing-container from 0px to 1px)', width, {type:'number'});
-test_math_used('container-progress(height of non-existing-container from 0px to 1px)', height, {type:'number'});
-test_math_used('container-progress(width of out-of-scope-container from 0px to 1px)', width, {type:'number'});
-test_math_used('container-progress(height of out-of-scope-container from 0px to 1px)', height, {type:'number'});
+test_math_used('container-progress(width of non-existing-container from 0px to 1px)', width, {type:'number', msg: 'container-progress() width fallback for non-existing container name'});
+test_math_used('container-progress(height of non-existing-container from 0px to 1px)', height, {type:'number', msg: 'container-progress() height fallback for non-existing container names'});
+test_math_used('container-progress(width of out-of-scope-container from 0px to 1px)', width, {type:'number', msg: 'container-progress() width fallback for out of scope container'});
+test_math_used('container-progress(height of out-of-scope-container from 0px to 1px)', height, {type:'number', msg: 'container-progress() height fallback for out of scope container'});
 
 // Type checking
 test_math_used('calc(container-progress(width from 0px to 1px) * 1px)', innerWidth + 'px');
diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html
index 983ba1d861..4b1411f25d 100644
--- a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html
+++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="3d-transform-incoming-ref.html">
-<meta name=fuzzy content="3d-transform-incoming-ref.html:0-255;0-515">
+<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
 <script src="/common/reftest-wait.js"></script>
 <style>
 div { box-sizing: border-box; will-change: transform }
diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html
index 398fa97ca9..2fe4887bb1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html
+++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="3d-transform-outgoing-ref.html">
-<meta name=fuzzy content="3d-transform-outgoing-ref.html:0-255;0-1200">
+<meta name=fuzzy content="maxDifference=0-255; totalPixels=0-1200">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html
index b3f8f42cfd..15d1653bfc 100644
--- a/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html
+++ b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="block-with-overflowing-text-ref.html">
-<meta name="fuzzy" content="block-with-overflowing-text-ref.html:maxDifference=0-2;totalPixels=0-1200">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-1200">
 
 
 <script src="/common/reftest-wait.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html b/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html
index 7b2a83c776..87d56d33af 100644
--- a/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html
+++ b/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="break-inside-avoid-child-ref.html">
-<meta name="fuzzy" content="break-inside-avoid-child-ref.html:0-5;0-1600">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-1600">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html
index 8588968d8a..7f8085cae2 100644
--- a/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="capture-with-offscreen-child-ref.html">
-<meta name="fuzzy" content="capture-with-offscreen-child-ref.html:0-5;0-200">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-200">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html
index 888d0d1720..2b0563ea31 100644
--- a/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="capture-with-visibility-hidden-child-ref.html">
-<meta name="fuzzy" content="capture-with-visibility-hidden-child-ref.html:0-5;0-300">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-300">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html
index 462d267b94..3a4811ada1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="capture-with-visibility-mixed-descendants-ref.html">
-<meta name=fuzzy content="capture-with-visibility-mixed-descendants-ref.html:0-5;0-500">
+<meta name=fuzzy content="maxDifference=0-5; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html b/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html
index 4cde9cb586..4a26c50ef8 100644
--- a/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html
+++ b/testing/web-platform/tests/css/css-view-transitions/clip-path-larger-than-border-box-on-child-of-named-element.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="clip-path-larger-than-border-box-on-child-of-named-element-ref.html">
-<meta name="fuzzy" content="clip-path-larger-than-border-box-on-child-of-named-element-ref.html:maxDifference=0-255;totalPixels=0-400">
+<meta name="fuzzy" content="maxDifference=0-255;totalPixels=0-400">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html
index f86f64843c..a6c444917a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="content-with-transform-ref.html">
-<meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html
index 3755910a1b..c6fda7f988 100644
--- a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="content-with-transform-ref.html">
-<meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-400">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-400">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html
index 2ba73758e2..c8d92ed33f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html
+++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="css-tags-paint-order-with-entry-ref.html">
-<meta name="fuzzy" content="css-tags-paint-order-with-entry-ref.html:0-120;0-300">
+<meta name="fuzzy" content="maxDifference=0-120; totalPixels=0-300">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html
index f5959bf434..05bc98dca9 100644
--- a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html
+++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html
@@ -5,7 +5,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
   <link rel="author" href="mailto:bokan@chromium.org">
   <link rel="match" href="dialog-in-rtl-iframe-ref.html">
-  <meta name=fuzzy content="dialog-in-rtl-iframe-ref.html:0-80;0-500">
+  <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-500">
   <script src="/common/reftest-wait.js"></script>
   <style>
     iframe {
diff --git a/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html b/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html
index a57c1d5108..d77c817345 100644
--- a/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html
+++ b/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html
@@ -2,7 +2,6 @@
 <title>View transitions: event pseudo name</title>
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
-<link rel="match" href="web-animations-api-ref.html">
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html b/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html
index 97ad9dfb44..9ac1621639 100644
--- a/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html
+++ b/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="far-away-capture-ref.html">
-<meta name="fuzzy" content="far-away-capture-ref.html:0-1;0-5">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-5">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .flex {
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html
index e50e6654a7..14371aca3f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html
@@ -6,7 +6,7 @@
 <link rel="match" href="fractional-box-with-overflow-children-ref.html">
 <!-- subpixel differences are ok in this test (in highdpi), but channel difference
      should not be perceptible -->
-<meta name=fuzzy content="fractional-box-with-overflow-children-ref.html:0-3;0-100">
+<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html
index acf72e20df..0d19bf9c29 100644
--- a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html
@@ -6,7 +6,7 @@
 <link rel="match" href="fractional-box-with-overflow-children-ref.html">
 <!-- subpixel differences are ok in this test (in highdpi), but channel difference
      should not be perceptible -->
-<meta name=fuzzy content="fractional-box-with-overflow-children-ref.html:0-3;0-100">
+<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe-ref.html
new file mode 100644
index 0000000000..86bc2a4a36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: lightgreen;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: lightblue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe.html
new file mode 100644
index 0000000000..89360c0dcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-new-iframe.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-new-main-new-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* Keep showing the live state for the main frame so we can assert the state of
+   screenshots in the iframe */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 0;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  /* The iframe is showing new live DOM */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 1;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 0;
+  }
+</style>
+<body></body>
+"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    await startTransition(document, "green", "lightgreen");
+
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe-ref.html
new file mode 100644
index 0000000000..baafea3656
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: lightgreen;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: blue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe.html
new file mode 100644
index 0000000000..7a9c53ffc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-new-main-old-iframe.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-new-main-old-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* Keep showing the live state for the main frame so we can assert the state of
+   screenshots in the iframe */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 0;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  /* The iframe is showing old screenshots */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 1;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 0;
+  }
+</style>
+<body></body>
+"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    await startTransition(document, "green", "lightgreen");
+
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe-ref.html
new file mode 100644
index 0000000000..7033cd9d21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: green;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: lightblue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe.html
new file mode 100644
index 0000000000..d3681aa434
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-new-iframe.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-old-main-new-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* Keep showing the screenshot for the main frame */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 0;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  /* The iframe is showing live DOM */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 1;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 0;
+  }
+</style>
+<body></body>
+"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    await startTransition(document, "green", "lightgreen");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe-ref.html
new file mode 100644
index 0000000000..2824884c4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: green;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: blue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe.html
new file mode 100644
index 0000000000..bcdc566a26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-old-iframe.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-old-main-old-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* Keep showing the screenshot for the main frame */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 0;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  /* The iframe is showing an old screenshot */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 1;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 0;
+  }
+</style>
+<body></body>
+"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    await startTransition(document, "green", "lightgreen");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-ref.html
new file mode 100644
index 0000000000..9253bb5f21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+body {
+  background: green;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: orange;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main.html
new file mode 100644
index 0000000000..bd58368645
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-old-main.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-old-main-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+}
+
+/* The main frame is showing the old screenshot */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 0;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+  body {
+    background: orange;
+  }
+</style>
+<body></body>"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor) {
+    document.documentElement.style.background = oldColor;
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+    }).ready;
+  }
+
+  async function runTest() {
+    await startTransition(document, "green", "lightgreen");
+
+    // Start an iframe transition while the main frame transition is showing the
+    // old screenshot. This change shouldn't show up visually because the old
+    // screenshot on the main frame still has the iframe's old content.
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue");
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe-ref.html
new file mode 100644
index 0000000000..94bd3bdac3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>View transitions: iframe and main frame transition at the same time with name on iframe (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+  border: 1px solid orange;
+}
+
+body {
+  background: green;
+}
+</style>
+
+<iframe srcdoc="
+<style>
+body {
+  background: blue;
+}
+</style>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe.html b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe.html
new file mode 100644
index 0000000000..f948e89dc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-and-main-frame-transition-with-name-on-iframe.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe and main frame transition at the same time with name on iframe</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="iframe-and-main-frame-transition-with-name-on-iframe-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 50vw;
+  height: 50vh;
+  view-transition-name: inner;
+}
+
+.old {
+  border: 1px solid black;
+}
+
+.new {
+  border: 1px solid orange;
+}
+
+/* The main frame is showing the old screenshot for the root */
+::view-transition-group(root) {
+  animation-duration: 300s;
+}
+::view-transition-new(root) {
+  animation: unset;
+  opacity: 0;
+}
+::view-transition-old(root) {
+  animation: unset;
+  opacity: 1;
+}
+
+/* The iframe is showing the live screenshot */
+::view-transition-new(inner) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-old(inner) {
+  animation: unset;
+  opacity: 0;
+}
+
+</style>
+
+<iframe id="inner" srcdoc="
+<style>
+  /* The iframe document itself is showing an old screenshot */
+  ::view-transition-group(root) {
+    animation-duration: 300s;
+  }
+  ::view-transition-new(root) {
+    animation: unset;
+    opacity: 0;
+  }
+  ::view-transition-old(root) {
+    animation: unset;
+    opacity: 1;
+  }
+</style>
+<body></body>"></iframe>
+<script>
+  onload = runTest;
+
+  async function startTransition(document, oldColor, newColor, nestedFrame) {
+    document.documentElement.style.background = oldColor;
+    if (nestedFrame != null)
+      nestedFrame.classList.add("old");
+
+    await document.startViewTransition(() => {
+      document.documentElement.style.background = newColor;
+      if (nestedFrame != null) {
+        nestedFrame.classList.remove("old");
+        nestedFrame.classList.add("new");
+      }
+    }).ready;
+  }
+
+  async function runTest() {
+    await startTransition(document, "green", "lightgreen", document.getElementById("inner"));
+
+    const iframeDocument = document.querySelector("iframe").contentDocument;
+    await startTransition(iframeDocument, "blue", "lightblue", null);
+
+    takeScreenshot();
+  }
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html
index 67a57bb885..81072ac38a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html
@@ -5,7 +5,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
   <link rel="author" href="mailto:bokan@chromium.org">
   <link rel="match" href="iframe-new-has-scrollbar-ref.html">
-  <meta name=fuzzy content="iframe-new-has-scrollbar-ref.html:0-80;0-500">
+  <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-500">
   <script src="/common/reftest-wait.js"></script>
   <style>
     iframe {
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html
index 96dd75a3df..5d26633398 100644
--- a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html
@@ -5,7 +5,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
   <link rel="author" href="mailto:bokan@chromium.org">
   <link rel="match" href="iframe-old-has-scrollbar-ref.html">
-  <meta name=fuzzy content="iframe-old-has-scrollbar-ref.html:0-80;0-500">
+  <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-500">
   <script src="/common/reftest-wait.js"></script>
   <style>
     iframe {
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html
index 31f6a10ed6..13e743c3a1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
-<html class=reftest-wait>
+<html class=test-wait>
 <title>View transitions: crash test</title>
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
-<script src="/common/reftest-wait.js"></script>
 <html>
 <head>
 <script>
 function eventhandler1() {
-  var var00106 = htmlvar00011.contentDocument;
-  var var00228 = var00106.startViewTransition();
+  var iframeDoc = iframe.contentDocument;
+  var viewTransition = iframeDoc.startViewTransition();
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
-      requestAnimationFrame(takeScreenshot);
+      requestAnimationFrame(() => document.documentElement.classList.remove("test-wait"));
     })
   });
 }
@@ -20,8 +19,7 @@ function eventhandler1() {
 </script>
 </head>
 <body>
-<iframe id="htmlvar00011" onunload="eventhandler3()" border="0" srcdoc="A#:^;&lt;gV&lt;&gt;8" style=":{,J" referrerpolicy="unsafe-url" background="!xp&gt;" nohref="nohref" nonce="nonce" inputEncoding="s" offsetX="0.3538512271910753">:+j&amp;;&amp;-^&gt;.7xf\jZ1,xb</iframe>
-<style id="htmlvar00014" nonce="nonce" media="screen and (min-width:0px)" onerror="eventhandler1()" onload="eventhandler1()" dir="N5!" updateRangeEnd="0" abbr="4IvGMN[Wxd" symbols="=d##y#)DA4V8ya}KO.cv" frameBorder="^b*]&amp;:|#lB:" search="N">ynFXo*</style>
+<iframe id="iframe" onunload="eventhandler3()" border="0" srcdoc="A#:^;&lt;gV&lt;&gt;8" style=":{,J" referrerpolicy="unsafe-url" background="!xp&gt;" nohref="nohref" nonce="nonce" inputEncoding="s" offsetX="0.3538512271910753">:+j&amp;;&amp;-^&gt;.7xf\jZ1,xb</iframe>
+<style nonce="nonce" media="screen and (min-width:0px)" onerror="eventhandler1()" onload="eventhandler1()" dir="N5!" updateRangeEnd="0" abbr="4IvGMN[Wxd" symbols="=d##y#)DA4V8ya}KO.cv" frameBorder="^b*]&amp;:|#lB:" search="N">ynFXo*</style>
 </body>
 </html>
-
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html b/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html
index 8fa361b0fc..5f26a494b2 100644
--- a/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html
@@ -6,7 +6,7 @@
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="iframe-transition-ref.html">
 <meta name="assert" content="Ensure that iframe root capture is sized and displayed correctly">
-<meta name=fuzzy content="iframe-transition-ref.html:0-200;0-200">
+<meta name=fuzzy content="maxDifference=0-200; totalPixels=0-200">
 <script src="/common/reftest-wait.js"></script>
 <style>
 iframe { width: 500px; height: 500px }
diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html
index 8640899814..026ecb240a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html
+++ b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="inline-with-offset-from-containing-block-ref.html">
-<meta name="fuzzy" content="inline-with-offset-from-containing-block-ref.html:0-255;0-1400">
+<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-1400">
 
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
index 23f5fc22cf..65b14a6c4b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
index fbc8edadc0..b35222c24a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-700">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
index 611d4da21a..a122cd4b3b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-950">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-950">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
index bda3ebf1b1..567819fadf 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-445">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
index e881e19622..42f97555f5 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
index c8c3c53082..87b9a20795 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-1600">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
index c8471032a4..97a3cb41ff 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
index 04ab58f3aa..a41a738826 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
index 15cc94ffe7..accd909158 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
index 0d2aeec59d..e16806e8f3 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
index 6ef8edd3b0..24edbc1ec7 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-6;totalPixels=0-920">
+<meta name="fuzzy" content="maxDifference=0-6;totalPixels=0-920">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
index 5e303e8286..8dfc8eefe1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
index a9e5f5842a..c301e47099 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
index 41dc622914..1f810af745 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
index 719701fe88..426751d093 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
index e8eeec3f26..ea10e2471b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-700">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
index 89d00a53a8..53749f29b2 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-445">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
index 04247af18e..b5337c4491 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-445">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
index a7b599e5eb..ac3fe48a0a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-330">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
index 2498f2e1f1..2626910d78 100644
--- a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html">
-<meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-445">
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-445">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html b/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html
index e166b3c9df..8fff184b2a 100644
--- a/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html
+++ b/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="multiline-span-with-overflowing-text-and-box-decorations-ref.html">
-<meta name="fuzzy" content="multiline-span-with-overflowing-text-and-box-decorations-ref.html:maxDifference=0-3;totalPixels=0-4900">
+<meta name="fuzzy" content="maxDifference=0-3; totalPixels=0-4900">
 
 
 <script src="/common/reftest-wait.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html
index 094d6963bf..70b6515fb5 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-and-old-sizes-match-ref.html">
-<meta name="fuzzy" content="new-and-old-sizes-match-ref.html:0-1;0-300">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-300">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped-ref.html
new file mode 100644
index 0000000000..caa99f2807
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped-ref.html
@@ -0,0 +1,34 @@
+<!doctype HTML>
+<html>
+<head>
+<style>
+html {
+  background: lightpink;
+}
+div {
+  position: relative;
+  width: 200px;
+  height: 200px;
+}
+
+.outer {
+  background-color: blue;
+  box-shadow: -50px -50px 0px 0px rgba(0,0,0,1);
+  left: 100px;
+  top: 100px;
+}
+
+.inner {
+  background-color: red;
+  left: 50px;
+  top: 50px;
+}
+
+</style>
+</head>
+<body>
+</body>
+<div class="outer">
+  <div class="inner"></div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped.html b/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped.html
new file mode 100644
index 0000000000..69a8de5f52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-ancestor-clipped.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture opacity elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:mattwoodrow@apple.com">
+<link rel="match" href="new-content-ancestor-clipped-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.outer {
+  background-color: blue;
+  overflow: hidden;
+  box-shadow: -50px -50px 0px 0px rgba(0,0,0,1);
+  position: relative;
+  left: 100px;
+  top: 100px;
+  width: 200px;
+  height: 200px;
+  view-transition-name: outer;
+}
+.inner {
+  background-color: red;
+  position: relative;
+  left: 50px;
+  top: 50px;
+  width: 200px;
+  height: 200px;
+  view-transition-name: inner;
+}
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div class="outer">
+  <div class="inner"></div>
+</div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html
index 702bb09bc3..19af2493d0 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-content-captures-clip-path-ref.html">
-<meta name="fuzzy" content="new-content-captures-clip-path-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html
index 740199675d..18f323c320 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-content-captures-different-size-ref.html">
-<meta name=fuzzy content="new-content-captures-different-size-ref.html:0-40;0-30000">
+<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-30000">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html
index 94bef1d6dd..5f4807404c 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html
@@ -4,6 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-content-captures-spans-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-400">
 <script src="/common/reftest-wait.js"></script>
 <style>
 span {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left-ref.html
new file mode 100644
index 0000000000..e86e5197da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>View transitions: capture elements and then change overflow (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<style>
+body { background: pink }
+#target {
+  position: relative;
+  background: green;
+  left: 10px;
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+#target.toggle {
+  outline: 300px solid transparent;
+}
+</style>
+
+<div id=target class=toggle></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left.html b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left.html
new file mode 100644
index 0000000000..e362dce76a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-left.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: capture elements and then change overflow</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="author" href="mailto:mattwoodrow@apple.com">
+<link rel="match" href="new-content-changes-overflow-left-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  position: relative;
+  background: green;
+  left: 10px;
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+#target.toggle {
+  outline: 300px solid transparent;
+}
+
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+</style>
+
+<div id=target></div>
+<script>
+
+async function runTest() {
+  document.startViewTransition().ready.then(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        target.classList.add("toggle");
+        requestAnimationFrame(takeScreenshot);
+      });
+    });
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html
index 3246a7e76f..834d0e8f45 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html
@@ -6,7 +6,7 @@
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="new-content-has-scrollbars-ref.html">
-<meta name=fuzzy content="new-content-has-scrollbars-ref.html:0-40;0-30000">
+<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-30000">
 <script src="/common/reftest-wait.js"></script>
 <style>
   html, body {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html b/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html
index 46c96acb04..81b261a9bf 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="new-content-is-inline-ref.html">
-<meta name="fuzzy" content="new-content-is-inline-ref.html:0-255;0-1000">
+<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-1000">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html
index 04a80409c5..a610d68802 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="content-object-fit-fill-ref.html">
-<meta name="fuzzy" content="content-object-fit-fill-ref.html:0-60;0-20">
+<meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-20">
 <script src="/common/reftest-wait.js"></script>
 <style>
 #target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html
index bccb760fb5..376b7fd11f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="new-content-scaling-ref.html">
-<meta name="fuzzy" content="new-content-scaling-ref.html:maxDifference=0-16;totalPixels=0-400">
+<meta name="fuzzy" content="maxDifference=0-16; totalPixels=0-400">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .shared {
diff --git a/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html b/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html
index 335e48fa70..793dfd46c9 100644
--- a/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html
+++ b/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="object-view-box-ref.html">
-<meta name="fuzzy" content="object-view-box-ref.html:0-1;0-300">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-300">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html
index 7ed5e1ca15..67aa5bf32f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-clip-path-ref.html">
-<meta name="fuzzy" content="old-content-captures-clip-path-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html
index 392247bc95..7f3be742b0 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-different-size-ref.html">
-<meta name=fuzzy content="old-content-captures-different-size-ref.html:0-40;0-30000">
+<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-30000">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html
index cd71c9dfaf..97b8911644 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-opacity-ref.html">
-<meta name=fuzzy content="old-content-captures-opacity-ref.html:0-1;0-50000">
+<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-50000">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html
index 51a22bc136..a1cb332942 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-root-ref.html">
-<meta name="fuzzy" content="old-content-captures-root-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .box {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html
index 13e26c702d..b9638ebb10 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html
@@ -6,7 +6,7 @@
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="old-content-has-scrollbars-ref.html">
-<meta name=fuzzy content="old-content-has-scrollbars-ref.html:0-40;0-30000">
+<meta name=fuzzy content="maxDifference=0-40; totalPixels=0-30000">
 <script src="/common/reftest-wait.js"></script>
 <style>
   html, body {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html
index 70ff67c0e0..3333a07a02 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="old-content-is-inline-ref.html">
-<meta name="fuzzy" content="old-content-is-inline-ref.html:0-255;0-500">
+<meta name="fuzzy" content="maxDifference=0-255; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html
index 0652b30a07..51023fa27b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="content-object-fit-fill-ref.html">
-<meta name="fuzzy" content="content-object-fit-fill-ref.html:0-60;0-20">
+<meta name="fuzzy" content="maxDifference=0-60; totalPixels=0-20">
 <script src="/common/reftest-wait.js"></script>
 <style>
 #target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html
index 5e6969d9cc..827ca027dd 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-object-view-box-clip-path-reference-ref.html">
-<meta name="fuzzy" content="old-content-object-view-box-clip-path-reference-ref.html:0-1;0-100">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-100">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html
index f894555154..d0d26b9790 100644
--- a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-object-view-box-clip-path-ref.html">
-<meta name="fuzzy" content="old-content-object-view-box-clip-path-ref.html:0-1;0-30">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-30">
 <script src="/common/reftest-wait.js"></script>
 <style>
 .target {
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden-ref.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden-ref.html
new file mode 100644
index 0000000000..02bcb5bb49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html style="background:pink">
+<title>View transitions: overflow:hidden is respected on pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<style>
+body {
+  margin: 0px;
+}
+div {
+  width: 200px;
+  height: 200px;
+}
+#target {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: green;
+  overflow: hidden;
+}
+#inner {
+  position: relative;
+  left: 100px;
+  top: 100px;
+  background: blue;
+}
+.offset {
+  left: 400px;
+}
+</style>
+
+<div id="target"><div id="inner"></div></div>
+<div id="target" class="offset"><div id="inner"></div></div>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden.html
new file mode 100644
index 0000000000..e40df4f6a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-overflow-hidden.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: overflow:hidden is respected on pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:mattwoodrow@apple.com">
+<link rel="match" href="pseudo-element-overflow-hidden-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+body {
+  margin: 0px;
+}
+div {
+  width: 200px;
+  height: 200px;
+}
+#target {
+  width: 200px;
+  height: 200px;
+  background: green;
+  view-transition-name: target;
+}
+#inner {
+  position: relative;
+  left: 100px;
+  top: 100px;
+  background: blue;
+}
+
+/* We're verifying what we capture, so just display both of the captures for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+
+html::view-transition-new(target) {
+  overflow:hidden;
+}
+html::view-transition-old(target) {
+  left: 400px;
+  overflow: hidden;
+}
+</style>
+
+<div id="target"><div id="inner"></div></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition();
+  t.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d-ref.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d-ref.html
new file mode 100644
index 0000000000..1eefed24b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: transform-style: preserve-3d is respected on pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+
+<style>
+body {
+  background: pink;
+}
+div {
+  width: 200px;
+  height: 200px;
+  background: green;
+}
+
+</style>
+
+<div id="target"></div>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d.html
new file mode 100644
index 0000000000..474f743e1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-element-preserve-3d.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: transform-style: preserve-3d is respected on pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:mattwoodrow@apple.com">
+<link rel="match" href="pseudo-element-preserve-3d-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  background: green;
+  view-transition-name: target;
+}
+
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-group(target) { background: green; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+html::view-transition-image-pair(target) {
+  transform: rotateX(90deg);
+  transform-style: preserve-3d;
+}
+html::view-transition-old(target) {
+  transform: rotateX(90deg);
+}
+</style>
+
+<div id="target"></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition();
+  t.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html
index e1f1718618..4d492c40d8 100644
--- a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="pseudo-rendering-invalidation-ref.html">
-<meta name="fuzzy" content="pseudo-rendering-invalidation-ref.html:0-20;0-300">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-300">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildard.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildcard.html
index 13490d5878..13490d5878 100644
--- a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildard.html
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildcard.html
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html
index a4d6f11ad4..1d4d1610d1 100644
--- a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html
+++ b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="old-content-captures-root-ref.html">
-<meta name="fuzzy" content="old-content-captures-root-ref.html:0-1;0-500">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-500">
 <script src="/common/reftest-wait.js"></script>
 <style>
 :root { view-transition-name: another-root; }
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html
index b9c384d94a..d67bb256fd 100644
--- a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html
+++ b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
-<html class=reftest-wait>
+<html class=test-wait>
 <title>View transitions: entry animation from root display none</title>
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 
-<script src="/common/reftest-wait.js"></script>
 <style>
 .hidden {
   display: none;
@@ -15,16 +14,14 @@
 </style>
 
 <script>
-failIfNot(document.startViewTransition, "Missing document.startViewTransition");
-
 async function runTest() {
   transition = document.startViewTransition();
-  transition.ready.then(
+  transition.ready.then(() => {
     requestAnimationFrame(() => {
       document.documentElement.classList.toggle("hidden");
-    }));
-  transition.finished.then(takeScreenshot);
+    });
+  });
+  transition.finished.then(() => document.documentElement.classList.remove("test-wait"));
 }
 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
 </script>
-
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html
index 2fa0132727..3c3429412b 100644
--- a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html
+++ b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html
@@ -4,6 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="root-scrollbar-with-fixed-background-ref.html">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-4500">
 
 <script src="/common/rendering-utils.js"></script>
 <script src="/common/reftest-wait.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html
index df0ec1a9d8..6044ba2636 100644
--- a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html
+++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html
@@ -10,4 +10,4 @@ body {
   padding: 0;
   margin: 0;
 }
-
+</style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html b/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html
index c7179b7a01..f61b916caa 100644
--- a/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html
+++ b/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="rotated-cat-off-top-edge-ref.html">
-<meta name="fuzzy" content="rotated-cat-off-top-edge-ref.html:0-5;0-1500">
+<meta name="fuzzy" content="maxDifference=0-70; totalPixels=0-22000">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html b/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html
index 3b94ffa7bb..d04f87215e 100644
--- a/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="scroller-child-abspos-ref.html">
-<meta name="fuzzy" content="scroller-child-abspos-ref.html:0-5;0-800">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-800">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller-child.html b/testing/web-platform/tests/css/css-view-transitions/scroller-child.html
index 5cb2f03e70..7d4368fe57 100644
--- a/testing/web-platform/tests/css/css-view-transitions/scroller-child.html
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller-child.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="scroller-child-ref.html">
-<meta name="fuzzy" content="scroller-child-ref.html:0-5;0-800">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-800">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller.html b/testing/web-platform/tests/css/css-view-transitions/scroller.html
index e61d13b316..9d82046891 100644
--- a/testing/web-platform/tests/css/css-view-transitions/scroller.html
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="scroller-ref.html">
-<meta name="fuzzy" content="scroller-ref.html:0-5;0-10">
+<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-10">
 <script src="/common/reftest-wait.js"></script>
 
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/set-current-time.html b/testing/web-platform/tests/css/css-view-transitions/set-current-time.html
index f7e802d79b..efe561c6ea 100644
--- a/testing/web-platform/tests/css/css-view-transitions/set-current-time.html
+++ b/testing/web-platform/tests/css/css-view-transitions/set-current-time.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="author" href="mailto:vmpstr@chromium.org">
 <link rel="match" href="set-current-time-ref.html">
-<meta name="fuzzy" content="set-current-time-ref.html:0-2;0-40000">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-40000">
 <script src="/common/reftest-wait.js"></script>
 <style>
 :root { view-transition-name: unset; }
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
index 4a619f29cc..91b71f7eec 100644
--- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="snapshot-containing-block-absolute-ref.html">
-<meta name="fuzzy" content="snapshot-containing-block-absolute-ref.html:0-20;0-100">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
index 8e47a056bd..40feea46ef 100644
--- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="snapshot-containing-block-includes-scrollbar-gutter-ref.html">
-<meta name="fuzzy" content="snapshot-containing-block-includes-scrollbar-gutter-ref.html:0-20;0-100">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100">
 <script src="/common/reftest-wait.js"></script>
 <style>
   :root {
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
index fc0c7033c9..44fe4cfc5e 100644
--- a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:bokan@chromium.org">
 <link rel="match" href="snapshot-containing-block-static-ref.html">
-<meta name="fuzzy" content="snapshot-containing-block-static-ref.html:0-20;0-100">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
index a2bf59ecb0..262970ad5f 100644
--- a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
@@ -4,8 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="span-with-overflowing-text-and-box-decorations-ref.html">
-<meta name="fuzzy" content="span-with-overflowing-text-and-box-decorations-ref.html:maxDifference=0-3;totalPixels=0-4900">
-
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-4900">
 
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html
index f3f0f534e9..5a6268ddf0 100644
--- a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html
@@ -4,8 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="span-with-overflowing-text-ref.html">
-<meta name="fuzzy" content="span-with-overflowing-text-ref.html:maxDifference=0-3;totalPixels=0-1100">
-
+<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-1100">
 
 <script src="/common/reftest-wait.js"></script>
 <script src="/common/rendering-utils.js"></script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html
index 7cd621fbfd..101f7c2a63 100644
--- a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html
+++ b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html
@@ -5,7 +5,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
   <link rel="author" href="mailto:bokan@chromium.org">
   <link rel="match" href="transition-in-empty-iframe-ref.html">
-  <meta name=fuzzy content="transition-in-empty-iframe-ref.html:0-80;0-1000">
+  <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-1000">
   <script src="/common/reftest-wait.js"></script>
   <style>
     iframe {
diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html
index 40c9a0d0c2..dfaac62c17 100644
--- a/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html
+++ b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-parse-pseudo-argument.html
@@ -3,7 +3,7 @@
 <title>View transitions with web-animation API: full parsing of argument</title>
 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
 <link rel="match" href="web-animations-api-ref.html">
-<meta name="fuzzy" content="web-animations-api-ref.html:0-2;0-500">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-500">
 <meta name="variant" content="?first-pseudo=::view-transition-group( first)">
 <meta name="variant" content="?first-pseudo=::view-transition-group(first)">
 <meta name="variant" content="?first-pseudo=::view-transition-group( first">
diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html b/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html
index c739e416c8..23b1504b24 100644
--- a/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html
+++ b/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html
@@ -4,7 +4,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
 <link rel="author" href="mailto:khushalsagar@chromium.org">
 <link rel="match" href="web-animations-api-ref.html">
-<meta name="fuzzy" content="web-animations-api-ref.html:0-2;0-500">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-500">
 
 <script src="/common/reftest-wait.js"></script>
 <style>
diff --git a/testing/web-platform/tests/css/zoom/iframe-zoom-nested.html b/testing/web-platform/tests/css/css-viewport/zoom/iframe-zoom-nested.html
index 22a491eb0b..22a491eb0b 100644
--- a/testing/web-platform/tests/css/zoom/iframe-zoom-nested.html
+++ b/testing/web-platform/tests/css/css-viewport/zoom/iframe-zoom-nested.html
diff --git a/testing/web-platform/tests/css/zoom/iframe-zoom.sub.html b/testing/web-platform/tests/css/css-viewport/zoom/iframe-zoom.sub.html
index 82a202161b..a27fb91619 100644
--- a/testing/web-platform/tests/css/zoom/iframe-zoom.sub.html
+++ b/testing/web-platform/tests/css/css-viewport/zoom/iframe-zoom.sub.html
@@ -35,7 +35,7 @@
   </div>
 
   <div id="another_with_zoom" style="zoom: 3;">
-    <iframe src="http://{{hosts[alt][]}}:{{ports[http][0]}}/css/zoom/tentative/resources/iframe_content.html"></iframe>
+    <iframe src="http://{{hosts[alt][]}}:{{ports[http][0]}}/css-viewport/zoom/resources/iframe_content.html"></iframe>
   </div>
 
 </body>
diff --git a/testing/web-platform/tests/css/zoom/reference/iframe-zoom-nested-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/reference/iframe-zoom-nested-ref.html
index b855278516..b855278516 100644
--- a/testing/web-platform/tests/css/zoom/reference/iframe-zoom-nested-ref.html
+++ b/testing/web-platform/tests/css/css-viewport/zoom/reference/iframe-zoom-nested-ref.html
diff --git a/testing/web-platform/tests/css/zoom/reference/iframe-zoom-ref.html b/testing/web-platform/tests/css/css-viewport/zoom/reference/iframe-zoom-ref.html
index 43bc3e24cf..43bc3e24cf 100644
--- a/testing/web-platform/tests/css/zoom/reference/iframe-zoom-ref.html
+++ b/testing/web-platform/tests/css/css-viewport/zoom/reference/iframe-zoom-ref.html
diff --git a/testing/web-platform/tests/css/zoom/resources/iframe_content.html b/testing/web-platform/tests/css/css-viewport/zoom/resources/iframe_content.html
index 58c4d03a46..58c4d03a46 100644
--- a/testing/web-platform/tests/css/zoom/resources/iframe_content.html
+++ b/testing/web-platform/tests/css/css-viewport/zoom/resources/iframe_content.html
diff --git a/testing/web-platform/tests/css/zoom/resources/nested-iframe-no-zoom.html b/testing/web-platform/tests/css/css-viewport/zoom/resources/nested-iframe-no-zoom.html
index 60b1fd6481..60b1fd6481 100644
--- a/testing/web-platform/tests/css/zoom/resources/nested-iframe-no-zoom.html
+++ b/testing/web-platform/tests/css/css-viewport/zoom/resources/nested-iframe-no-zoom.html
diff --git a/testing/web-platform/tests/css/zoom/resources/nested-iframe-with-zoom.html b/testing/web-platform/tests/css/css-viewport/zoom/resources/nested-iframe-with-zoom.html
index e7de64aafb..e7de64aafb 100644
--- a/testing/web-platform/tests/css/zoom/resources/nested-iframe-with-zoom.html
+++ b/testing/web-platform/tests/css/css-viewport/zoom/resources/nested-iframe-with-zoom.html
diff --git a/testing/web-platform/tests/css/css-viewport/zoom/scroll-top-test-with-zoom.html b/testing/web-platform/tests/css/css-viewport/zoom/scroll-top-test-with-zoom.html
new file mode 100644
index 0000000000..9656fe120e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-viewport/zoom/scroll-top-test-with-zoom.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<title>Scroll Top Test with Zoom</title>
+<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container {
+    width: 200px;
+    height: 100px;
+    border: solid thick;
+    overflow: auto;
+  }
+</style>
+<div id="container">
+  <div style="width: 100px; height: 2000px"></div>
+</div>
+
+<script>
+  var container = document.getElementById('container');
+  container.scrollTop = 77;
+  test(function() {
+    assert_equals(container.scrollTop, 77, "Initial scrollTop should be 77");
+  }, "Initial scrollTop with no zoom");
+
+  document.body.style.zoom = 1.2;
+  document.body.offsetTop;
+
+  document.body.style.zoom = 1;
+  test(function() {
+    assert_equals(container.scrollTop, 77, "scrollTop should remain consistent after resetting zoom");
+  }, "scrollTop after resetting zoom");
+  done();
+</script>
diff --git a/testing/web-platform/tests/css/cssom-view/WEB_FEATURES.yml b/testing/web-platform/tests/css/cssom-view/WEB_FEATURES.yml
index a545dbadcb..d5352fb4a1 100644
--- a/testing/web-platform/tests/css/cssom-view/WEB_FEATURES.yml
+++ b/testing/web-platform/tests/css/cssom-view/WEB_FEATURES.yml
@@ -1,4 +1,7 @@
 features:
+- name: check-visibility
+  files:
+  - checkVisibility.html
 - name: scroll-into-view
   files:
   - scrollIntoView-*
diff --git a/testing/web-platform/tests/css/cssom-view/offsetTop-offsetLeft-with-zoom.html b/testing/web-platform/tests/css/cssom-view/offsetTop-offsetLeft-with-zoom.html
index a60a18a431..b0f11ea02e 100644
--- a/testing/web-platform/tests/css/cssom-view/offsetTop-offsetLeft-with-zoom.html
+++ b/testing/web-platform/tests/css/cssom-view/offsetTop-offsetLeft-with-zoom.html
@@ -24,7 +24,6 @@
     margin: 1px;
     top:10x;
     left: 10x;
-
   }
   .one {
     position: relative;
@@ -36,7 +35,7 @@
     top: 20px;
     left: 20px;
     zoom: 2;
-    }
+  }
 
   .three {
     position: absolute;
@@ -54,18 +53,18 @@
   <div id="unzoomed_two" class="square two"></div>
   <div id="unzoomed_three" class="square three"></div>
 </div>
-<div style="zoom:3" class=outer_div>
+<div style="zoom:3" class="outer_div">
   <div id="zoomed_one" class="square one"></div>
   <div id="zoomed_two" class="square two"></div>
   <div id="zoomed_three" class="square three"></div>
 </div>
 
-<div class ="outer_div" style="margin: 30px;" id="outer_div">
+<div class="outer_div" style="margin: 30px;" id="outer_div">
     <div id="zoomed_middle" style="margin: 10px; zoom:2">
         <div class="square" id="unzoomed_inner"></div>
     </div>
 </div>
-<div class = outer_div style="margin: 30px;">
+<div class="outer_div" style="margin: 30px;">
     <div id="unzoomed_middle">
         <div class="square" id="zoomed_inner" style="zoom:2; width: 100px; height: 100px; border: 1px solid black;"></div>
     </div>
@@ -90,12 +89,12 @@ test(() => {
   assert_equals(unzoomed_inner.offsetLeft, 11, 'unzoomed_inner.offsetLeft');
   assert_equals(zoomed_inner.offsetTop, 0, 'zoomed_inner.offsetTop');
   assert_equals(zoomed_inner.offsetLeft, 1, 'zoomed_inner.offsetLeft');
+}, 'Verifies that offsetTop and offsetLeft find the right OffsetParent and return values excluding the target zoom');
 
-  // check that offset is equal between elements when one of them has css zoom
+test(() => {
   assert_equals(unzoomed_one.offsetWidth, zoomed_one.offsetWidth, "offsetWidth");
   assert_equals(unzoomed_one.offsetHeight, zoomed_one.offsetHeight, "offsetHeight");
   assert_equals(zoomed_inner.offsetWidth, outer_div.offsetWidth, "offsetWidth for nested element");
   assert_equals(zoomed_inner.offsetHeight, outer_div.offsetHeight, "offsetHeight for nested element");
-
-}, 'Verifies that offsetTop and offsetLeft find the right OffsetParent and return values excluding the target zoom');
+}, 'check that offset is equal between elements when one of them has css zoom');
 </script>
diff --git a/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-baseURL.tentative.html b/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-baseURL.html
index 8997a59e9c..d0f0f828b0 100644
--- a/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-baseURL.tentative.html
+++ b/testing/web-platform/tests/css/cssom/CSSStyleSheet-constructable-baseURL.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>CSSStyleSheet baseURL</title>
 <link rel="author" title="Erik Nordin" href="mailto:enordin@mozilla.com">
-<link rel="help" href="https://github.com/WICG/construct-stylesheets/issues/95#issuecomment-593545252">
+<link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstylesheetinit-baseurl">
 <div id="target"></div>
 <script src='/resources/testharness.js'></script>
 <script src='/resources/testharnessreport.js'></script>
diff --git a/testing/web-platform/tests/css/cssom/WEB_FEATURES.yml b/testing/web-platform/tests/css/cssom/WEB_FEATURES.yml
new file mode 100644
index 0000000000..def314c45c
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom/WEB_FEATURES.yml
@@ -0,0 +1,7 @@
+features:
+- name: constructed-stylesheets
+  files:
+  - adoptedstylesheets-observablearray.html
+  - CSSStyleSheet-constructable-*
+  - CSSStyleSheet-constructable.html
+  - CSSStyleSheet-template-adoption.html
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-backdrop-filter.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-backdrop-filter.html
new file mode 100644
index 0000000000..6be85d5cf2
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-backdrop-filter.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: The backdrop root concept</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot">
+<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
+<link rel="match"  href="backdrop-filter-backdrop-root-ref.html">
+
+<!-- A Backdrop Root is formed, anywhere in the document, by:
+     - An element with a backdrop-filter value other than "none".
+     - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. -->
+<div class=container>
+  <div class=testcase>
+    <div style="backdrop-filter: invert(0);"><div></div></div>
+  </div>
+  <div class=testcase>
+    <div style="will-change:backdrop-filter;"><div></div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-ref.html
new file mode 100644
index 0000000000..08a2ad4fc5
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
+
+<div class=container>
+  <div class=testcase style="clip-path: xywh(5px 5px 40px 40px);">
+    <div></div>
+    <div class="box2" style="background: #00ffff;"></div>
+  </div>
+  <div class=testcase>
+    <div></div>
+    <div class="box2" style="background: #00ffff;"></div>
+  </div>
+</div>
+
+<style>
+.box2 {
+  top:-50px;
+  left: 50px;
+  border: 1px solid black;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path.html
new file mode 100644
index 0000000000..172d07be93
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: The backdrop root concept</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot">
+<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
+<link rel="match"  href="backdrop-filter-backdrop-root-clip-path-ref.html">
+
+<!-- A Backdrop Root is formed, anywhere in the document, by:
+     - An element with mask, mask-image, mask-border, or clip-path properties with values other than “none”.
+     - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. -->
+<div class=container>
+  <div class=testcase>
+    <div style="clip-path: inset(10%);"><div></div></div>
+  </div>
+  <div class=testcase>
+    <div style="will-change:clip-path;"><div></div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter-ref.html
new file mode 100644
index 0000000000..ffa4dfcf0e
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
+
+<div class=container>
+  <div class=testcase>
+    <div style="filter: invert(0.1)"></div>
+    <div class="box2" style="border-color: #1A1A1A; background: #00ffff;"></div>
+  </div>
+  <div class=testcase>
+    <div></div>
+    <div class="box2" style="background: #00ffff;"></div>
+  </div>
+</div>
+
+<style>
+.box2 {
+  top:-50px;
+  left: 50px;
+  border: 1px solid black;
+}
+</style>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter.html
new file mode 100644
index 0000000000..e988b479ce
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: The backdrop root concept</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot">
+<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
+<link rel="match"  href="backdrop-filter-backdrop-root-filter-ref.html">
+<meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-500">
+
+<!-- A Backdrop Root is formed, anywhere in the document, by:
+     - An element with a filter property other than "none".
+     - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. -->
+<div class=container>
+  <div class=testcase>
+    <div style="filter: invert(0.1);"><div></div></div>
+  </div>
+  <div class=testcase>
+    <div style="will-change:filter;"><div></div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-mix-blend-mode.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-mix-blend-mode.html
new file mode 100644
index 0000000000..2d77b61b84
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-mix-blend-mode.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: The backdrop root concept</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot">
+<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
+<link rel="match"  href="backdrop-filter-backdrop-root-ref.html">
+
+<!-- A Backdrop Root is formed, anywhere in the document, by:
+     - An element with a mix-blend-mode value other than "normal".
+     - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. -->
+<div class=container>
+  <div class=testcase>
+    <div style="mix-blend-mode:darken;"><div></div></div>
+  </div>
+  <div class=testcase>
+    <div style="will-change:mix-blend-mode;"><div></div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity-ref.html
new file mode 100644
index 0000000000..76d4854df6
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
+
+<div class=container>
+  <div class=testcase>
+    <div style="opacity:0.9"></div>
+    <div class="box2" style="border-color: #021919; background: #00ffff;"></div>
+  </div>
+  <div class=testcase>
+    <div></div>
+    <div class="box2" style="background: #00ffff;"></div>
+  </div>
+</div>
+
+<style>
+.box2 {
+  top:-50px;
+  left: 50px;
+  border: 1px solid black;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity.html
new file mode 100644
index 0000000000..b11d064cb3
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>backdrop-filter: The backdrop root concept</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot">
+<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
+<link rel="match"  href="backdrop-filter-backdrop-root-opacity-ref.html">
+<meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-500">
+
+<!-- A Backdrop Root is formed, anywhere in the document, by:
+     - An element with an opacity value less than 1.
+     - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. -->
+<div class=container>
+  <div class=testcase>
+    <div style="opacity: 0.9;"><div></div></div>
+  </div>
+  <div class=testcase>
+    <div style="will-change:opacity;"><div></div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-ref.html
new file mode 100644
index 0000000000..934e08acb9
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=stylesheet  href="resources/backdrop-filter-backdrop-root.css">
+
+<div class=container>
+  <div class=testcase>
+    <div></div>
+    <div class="box2" style="background: #00ffff;"></div>
+  </div>
+  <div class=testcase>
+    <div></div>
+    <div class="box2" style="background: #00ffff;"></div>
+  </div>
+</div>
+
+<style>
+.box2 {
+  top:-50px;
+  left: 50px;
+  border: 1px solid black;
+}
+</style>
+
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html
deleted file mode 100644
index fc2bccc36c..0000000000
--- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>backdrop-filter: Should not filter outside parent stacking context.</title>
-<link rel="author" href="mailto:masonf@chromium.org">
-
-
-
-<div>
-  <p>Expected: Two green boxes overlapped by a yellow box. The overlapped region<br>
-  of the right-hand box ONLY should be inverted (pink).</p>
-</div>
-<div class="box outside">
-  <div class="box stacking-context">
-    <div class="box filter">
-    </div>
-  </div>
-</div>
-<div class="box overlay"></div>
-<style>
-.box {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  background: green;
-}
-.outside {
-  top: 110px;
-  left: 10px;
-}
-.stacking-context {
-  will-change: transform;
-  top: 0px;
-  left: 120px;
-}
-.filter {
-  width: 160px;
-  height: 160px;
-  top: 30px;
-  left: -90px;
-  will-change: transform;
-  background: #ff08;
-}
-.overlay {
-  background:#ffc377;
-  width:70px;
-  height:70px;
-  top:140px;
-  left:130px;
-}
-</style>
-
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html
deleted file mode 100644
index 06791f73d2..0000000000
--- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<title>backdrop-filter: Should not filter outside parent stacking context.</title>
-<link rel="author" href="mailto:masonf@chromium.org">
-<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty">
-<link rel="match"  href="backdrop-filter-isolation-ref.html">
-
-<div>
-  <p>Expected: Two green boxes overlapped by a yellow box. The overlapped region<br>
-  of the right-hand box ONLY should be inverted (pink).</p>
-</div>
-<div class="box outside">
-  <div class="box stacking-context">
-    <div class="box filter">
-    </div>
-  </div>
-</div>
-
-<style>
-.box {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  background: green;
-}
-.outside {
-  top: 110px;
-  left: 10px;
-}
-.stacking-context {
-  opacity: 0.9999;
-  top: 0px;
-  left: 120px;
-}
-.filter {
-  width: 160px;
-  height: 160px;
-  top: 30px;
-  left: -90px;
-  backdrop-filter: invert(1);
-  background: #ff08;
-}
-</style>
-
diff --git a/testing/web-platform/tests/css/filter-effects/resources/backdrop-filter-backdrop-root.css b/testing/web-platform/tests/css/filter-effects/resources/backdrop-filter-backdrop-root.css
new file mode 100644
index 0000000000..635e497cdf
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/resources/backdrop-filter-backdrop-root.css
@@ -0,0 +1,30 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 250px;
+  height: 100px;
+  align-content: flex-start;
+  background:#00ffff;
+}
+.testcase {
+  width: 100px;
+  height: 50px;
+}
+.testcase div {
+  width: 50px;
+  height: 50px;
+  position: relative;
+}
+.testcase>div {
+  background: green;
+}
+.testcase>div>div {
+  left: 50px;
+  backdrop-filter: invert(1);
+  background: transparent;
+  border: 1px solid black;
+}
+* {
+  box-sizing: border-box;
+}
diff --git a/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg b/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg
index ed294041e1..0ddcb37d70 100644
--- a/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg
+++ b/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg
@@ -1,6 +1,6 @@
 <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <defs>
-    <filter id="MyFilter">
+    <filter id="MyFilter" color-interpolation-filters="sRGB">
       <feColorMatrix type="hueRotate" values="90"/>
     </filter>
   </defs>
diff --git a/testing/web-platform/tests/css/mediaqueries/WEB_FEATURES.yml b/testing/web-platform/tests/css/mediaqueries/WEB_FEATURES.yml
new file mode 100644
index 0000000000..88f1510e1b
--- /dev/null
+++ b/testing/web-platform/tests/css/mediaqueries/WEB_FEATURES.yml
@@ -0,0 +1,5 @@
+features:
+- name: prefers-color-scheme
+  files:
+  - prefers-color-scheme.html
+  - prefers-color-scheme-*
diff --git a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image-ref.html b/testing/web-platform/tests/css/mediaqueries/prefers-color-scheme-svg-as-image-ref.html
index 1ff9d88f30..012513ef9f 100644
--- a/testing/web-platform/tests/css/css-color-adjust/rendering/dark-color-scheme/svg-as-image-ref.html
+++ b/testing/web-platform/tests/css/mediaqueries/prefers-color-scheme-svg-as-image-ref.html
@@ -6,14 +6,14 @@
 <style>
   div {
     background-color: blue;
-    height: 100px;
-    width: 100px;
+    height: 32px;
+    width: 32px;
   }
   @media (prefers-color-scheme: dark) {
     div {
-      background-color: green;
+      background-color: purple;
     }
   }
 </style>
-<p>There should be green square below when the preferred color-scheme is dark, and blue otherwise.</p>
+<p>There should be a purple square below when the preferred color-scheme is dark, and blue otherwise.</p>
 <div></div>
diff --git a/testing/web-platform/tests/css/mediaqueries/prefers-color-scheme-svg-as-image.html b/testing/web-platform/tests/css/mediaqueries/prefers-color-scheme-svg-as-image.html
new file mode 100644
index 0000000000..65d6556f7a
--- /dev/null
+++ b/testing/web-platform/tests/css/mediaqueries/prefers-color-scheme-svg-as-image.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<head>
+  <title>prefers-color-scheme inside an SVG image</title>
+  <link rel="help" href="https://www.w3.org/TR/mediaqueries-5/#descdef-media-prefers-color-scheme">
+  <link rel="match" href="prefers-color-scheme-svg-as-image-ref.html">
+</head>
+<p>There should be a purple square below when the preferred color-scheme is dark, and blue otherwise.</p>
+<img src='resources/prefers-color-scheme.svg'>
diff --git a/testing/web-platform/tests/css/motion/WEB_FEATURES.yml b/testing/web-platform/tests/css/motion/WEB_FEATURES.yml
new file mode 100644
index 0000000000..0a436801cb
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: motion-path
+  files: "**"
diff --git a/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html
index 55845108eb..10c337244f 100644
--- a/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html
+++ b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html
@@ -163,15 +163,6 @@
         {at: 1.5, expect: '70deg'},
       ]);
 
-      // Regression test for crbug.com/918430.
-      test_interpolation({
-        property: 'offset-rotate',
-        from: '800deg',
-        to: '900deg'
-      }, [
-        {at: -3.40282e+38, expect: '-3.40282e+38deg'},
-      ]);
-
       // Interpolation between auto angles.
       test_interpolation({
         property: 'offset-rotate',
diff --git a/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml b/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml
index 47cf05a2c0..2449bf4808 100644
--- a/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml
+++ b/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml
@@ -5,3 +5,10 @@ features:
 - name: has
   files:
   - has-*
+- name: read-write-pseudos
+  files:
+  - selector-read-write-*
+- name: user-pseudos
+  files:
+  - user-invalid.html
+  - user-valid.html
diff --git a/testing/web-platform/tests/css/selectors/focus-visible-028.html b/testing/web-platform/tests/css/selectors/focus-visible-028.html
new file mode 100644
index 0000000000..a8b704838b
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/focus-visible-028.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>CSS Test (Selectors): Programmatic focus causes :focus-visible to match after keyboard usage when preventDefault() is used</title>
+  <link rel="author" title="Tyler Jones" href="tylerjdev@github.com" />
+  <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/resources/testdriver.js"></script>
+  <script src="/resources/testdriver-vendor.js"></script>
+  <style>
+    @supports not selector(:focus-visible) {
+      :focus {
+        outline: red solid 5px;
+        background-color: red;
+      }
+    }
+
+    :focus-visible {
+      outline: blue solid 5px;
+    }
+
+    :focus:not(:focus-visible) {
+      outline: 0;
+      background-color: lime;
+    }
+  </style>
+</head>
+<body>
+  This test checks that programmatically focusing an element after a click and using keyboard afterwards triggers <code>:focus-visible</code> matching.
+  <ol id="instructions">
+    <li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
+    <li>Click the button below that says "Click me".</li>
+    <li>Once focused on the button that says "I will be focused programmatically", use "Left" or "Right" arrow keys to navigate through the button group</li>
+    <li>If any button within the group has a blue outline after using either arrow key, then the test result is SUCCESS. If the element has a green background after using either arrow key, then the test result is FAILURE.</li>
+  </ol>
+  <br />
+  <button id="button">Click me</button>
+  <div id="container">
+      <button id="btn1">I will be focused programmatically.</button>
+      <button id="btn2">Button 2</button>
+      <button id="btn3">Button 3</button>
+  </div>
+  <script>
+    button.addEventListener("click", () => {
+      btn1.focus();
+    });
+
+    focusTrap(document.querySelector('#container'));
+
+    function focusTrap(container) {
+      container.addEventListener('keydown', (e) => {
+        if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+        e.preventDefault();
+
+        const btns = container.querySelectorAll('button');
+        const currentIndex = Array.from(btns).indexOf(document.activeElement);
+        let nextIndex;
+
+        if (e.key === 'ArrowRight') {
+          nextIndex = (currentIndex + 1) % btns.length;
+        } else if (e.key === 'ArrowLeft') {
+          nextIndex = (currentIndex - 1 + btns.length) % btns.length;
+        }
+
+        btns[nextIndex].focus();
+      });
+    }
+
+    promise_test(async t => {
+      const arrow_right = "\uE014";
+      btn2.addEventListener("focus", t.step_func_done((e) => {
+        assert_equals(getComputedStyle(btn2).outlineColor, "rgb(0, 0, 255)", `outlineColor for ${btn2.tagName}#${btn2.id} is blue`);
+        assert_not_equals(getComputedStyle(btn2).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${btn2.tagName}#${btn2.id} is NOT lime`);
+      }));
+
+      await test_driver.click(button);
+      assert_equals(document.activeElement, btn1);
+      await test_driver.send_keys(btn1, arrow_right);
+    }, "Programmatic focus after click and keyboard interaction should match :focus-visible");
+  </script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml b/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml
index 4eaa2f3931..5e6a6d0d5c 100644
--- a/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml
+++ b/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml
@@ -4,3 +4,6 @@ features:
   - has-*
   - "*-in-has.*"
   - "*-in-has-*"
+- name: user-pseudos
+  files:
+  - user-valid-user-invalid.html
diff --git a/testing/web-platform/tests/css/selectors/user-invalid.html b/testing/web-platform/tests/css/selectors/user-invalid.html
index 5f8fa5811a..c57e764831 100644
--- a/testing/web-platform/tests/css/selectors/user-invalid.html
+++ b/testing/web-platform/tests/css/selectors/user-invalid.html
@@ -29,6 +29,7 @@
   <input placeholder="Required field" required id="required-input"><br>
   <textarea placeholder="Required field" required id="required-textarea"></textarea><br>
   <input type="checkbox" required id="required-checkbox"><br>
+  <input type="date" required id="required-date"><br>
   <input type="submit" id="submit-button">
   <input type="reset" id="reset-button">
 </form>
@@ -80,12 +81,14 @@ promise_test(async () => {
   const requiredInput = document.querySelector("#required-input");
   const requiredTextarea = document.querySelector("#required-textarea");
   const requiredCheckbox = document.querySelector("#required-checkbox");
+  const requiredDate = document.querySelector("#required-date");
   const submitButton = document.querySelector("#submit-button");
   const resetButton = document.querySelector("#reset-button");
 
   assert_false(requiredInput.validity.valid);
   assert_false(requiredTextarea.validity.valid);
   assert_false(requiredCheckbox.validity.valid);
+  assert_false(requiredDate.validity.valid);
   // The selector can't match because no interaction has happened.
   assert_false(requiredInput.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(requiredInput.matches(":user-invalid"), "Initially does not match :user-invalid");
@@ -96,6 +99,9 @@ promise_test(async () => {
   assert_false(requiredCheckbox.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(requiredCheckbox.matches(":user-invalid"), "Initially does not match :user-invalid");
 
+  assert_false(requiredDate.matches(":user-valid"), "Initially does not match :user-valid");
+  assert_false(requiredDate.matches(":user-invalid"), "Initially does not match :user-invalid");
+
   submitButton.click();
 
   assert_true(requiredInput.matches(":user-invalid"), "Submitted the form, input is validated");
@@ -107,6 +113,9 @@ promise_test(async () => {
   assert_true(requiredCheckbox.matches(":user-invalid"), "Submitted the form, checkbox is validated");
   assert_false(requiredCheckbox.matches(":user-valid"), "Submitted the form, checkbox is validated");
 
+  assert_true(requiredDate.matches(":user-invalid"), "Submitted the form, date input is validated");
+  assert_false(requiredDate.matches(":user-valid"), "Submitted the form, date input is validated");
+
   resetButton.click();
 
   assert_false(requiredInput.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
@@ -118,6 +127,9 @@ promise_test(async () => {
   assert_false(requiredCheckbox.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
   assert_false(requiredCheckbox.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
 
+  assert_false(requiredDate.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
+  assert_false(requiredDate.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
+
   // Test programmatic form submission with constraint validation.
   form.requestSubmit();
 
@@ -129,6 +141,9 @@ promise_test(async () => {
 
   assert_true(requiredCheckbox.matches(":user-invalid"), "Called form.requestSubmit(), checkbox is validated");
   assert_false(requiredCheckbox.matches(":user-valid"), "Called form.requestSubmit(), checkbox is validated");
+
+  assert_true(requiredDate.matches(":user-invalid"), "Called form.requestSubmit(), date input is validated");
+  assert_false(requiredDate.matches(":user-valid"), "Called form.requestSubmit(), date input is validated");
 }, ":user-invalid selector properly interacts with submit & reset buttons");
 
 // historical: https://github.com/w3c/csswg-drafts/issues/1329
@@ -193,4 +208,38 @@ promise_test(async () => {
   assert_true(checkbox.matches(':user-invalid'),
     'Checkbox should match :user-invalid after clicking twice.');
 }, 'A required checkbox should match :user-invalid if the user unchecks it and blurs.');
+
+promise_test(async () => {
+  const date = document.getElementById('required-date');
+
+  const resetButton = document.getElementById('reset-button');
+  resetButton.click();
+  assert_false(date.matches(':user-invalid'),
+    'date input should not match :user-invalid at the start of the test.');
+  assert_equals(date.value, '',
+    'date input should not have a value at the start of the test.');
+
+  date.value = '2024-04-15';
+  assert_false(date.matches(':user-invalid'),
+    'date should not match :user-invalid after programatically changing value.');
+  date.value = '';
+  assert_false(date.matches(':user-invalid'),
+    'date should not match :user-invalid after programatically changing value.');
+
+  const tabKey = '\uE004';
+  const backspace = '\uE003';
+  date.focus();
+  // Press tab twice at the end to make sure that focus has left the input.
+  await test_driver.send_keys(date, `1${tabKey}1${tabKey}1234${tabKey}${tabKey}`);
+  assert_not_equals(document.activeElement, date,
+    'Pressing tab twice after typing in the date should have blurred the input.');
+  assert_equals(date.value, '1234-01-01',
+    'Date input value should match the testdriver input.');
+  date.focus();
+  await test_driver.send_keys(date, backspace);
+  assert_equals(date.value, '',
+    'Date input value should be cleared when deleting one of the sub-values.');
+  assert_true(date.matches(':user-invalid'),
+    'Date input should match :user-invalid after typing in an invalid value.');
+}, 'A required date should match :user-invalid if the user unchecks it and blurs.');
 </script>
diff --git a/testing/web-platform/tests/css/selectors/user-valid-user-invalid-multifield-inputs.tentative.html b/testing/web-platform/tests/css/selectors/user-valid-user-invalid-multifield-inputs.tentative.html
new file mode 100644
index 0000000000..d6358ea269
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/user-valid-user-invalid-multifield-inputs.tentative.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/selectors/#user-pseudos">
+<link rel="help" href="https://html.spec.whatwg.org/#selector-user-invalid">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<!-- This test asserts specifics of keyboard behavior in multifield inputs,
+  like type=date and type=time, in ways that are not specified. -->
+
+<form>
+  <input id=date type=date required>
+  <input id=time type=time required>
+  <input id=datetime-local type=datetime-local required>
+</form>
+
+<script>
+const tabKey = '\uE004';
+const backspace = '\uE003';
+
+promise_test(async () => {
+  const date = document.getElementById('date');
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid at the start of the test.');
+  assert_false(date.matches(':user-invalid'),
+    'Date input should not match :user-invalid at the start of the test.');
+  assert_equals(date.value, '',
+    'Date input should not have a value at the start of the test.');
+
+  date.focus();
+  await test_driver.send_keys(date, `1${tabKey}`);
+  assert_equals(date.value, '',
+    'Date input value should not be set after partially inputting the date.');
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid after partially inputting the date.');
+  assert_false(date.matches(':user-invalid'),
+    'Date input should not match :user-invalid after partially inputting the date.');
+
+  await test_driver.send_keys(date, `1${tabKey}1234${tabKey}`);
+  assert_equals(date.value, '1234-01-01',
+    'Date input value should match the testdriver input.');
+  assert_true(date.matches(':user-valid'),
+    'Date input should match :user-valid after typing in a complete value.');
+  assert_false(date.matches(':user-invalid'),
+    'Date input should not match :user-invalid after typing in a complete value.');
+
+  date.blur();
+  date.focus();
+  await test_driver.send_keys(date, backspace);
+  assert_equals(date.value, '',
+    'Date input value should be cleared when deleting one of the sub-values.');
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid after typing in an invalid value.');
+  assert_true(date.matches(':user-invalid'),
+    'Date input should match :user-invalid after typing in an invalid value.');
+}, '<input type=date> keyboard behavior for :user-valid/:user-invalid.');
+
+promise_test(async () => {
+  const time = document.getElementById('time');
+  assert_false(time.matches(':user-valid'),
+    'Time input should not match :user-valid at the start of the test.');
+  assert_false(time.matches(':user-invalid'),
+    'Time input should not match :user-invalid at the start of the test.');
+  assert_equals(time.value, '',
+    'Time input should not have a value at the start of the test.');
+
+  time.focus();
+  await test_driver.send_keys(time, `1${tabKey}`);
+  assert_equals(time.value, '',
+    'Time input value should not be set after partially inputting the time.');
+  assert_false(time.matches(':user-valid'),
+    'Time input should not match :user-valid after partially inputting the time.');
+  assert_false(time.matches(':user-invalid'),
+    'Time input should not match :user-invalid after partially inputting the time.');
+
+  await test_driver.send_keys(time, `2${tabKey}a${tabKey}`);
+  assert_equals(time.value, '01:02',
+    'Time input value should match the testdriver input.');
+  assert_true(time.matches(':user-valid'),
+    'Time input should match :user-valid after typing in a complete value.');
+  assert_false(time.matches(':user-invalid'),
+    'Time input should not match :user-invalid after typing in a complete value.');
+
+  time.blur();
+  time.focus();
+  await test_driver.send_keys(time, backspace);
+  assert_equals(time.value, '',
+    'Time input value should be cleared when deleting one of the sub-values.');
+  assert_false(time.matches(':user-valid'),
+    'Time input should not match :user-valid after typing in an invalid value.');
+  assert_true(time.matches(':user-invalid'),
+    'Time input should match :user-invalid after typing in an invalid value.');
+}, '<input type=time> keyboard behavior for :user-valid/:user-invalid.');
+
+promise_test(async () => {
+  const dateTimeLocal = document.getElementById('datetime-local');
+  assert_false(dateTimeLocal.matches(':user-valid'),
+    'Datetime input should not match :user-valid at the start of the test.');
+  assert_false(dateTimeLocal.matches(':user-invalid'),
+    'Datetime input should not match :user-invalid at the start of the test.');
+  assert_equals(dateTimeLocal.value, '',
+    'Datetime input should not have a value at the start of the test.');
+
+  dateTimeLocal.focus();
+  await test_driver.send_keys(dateTimeLocal, `1${tabKey}`);
+  assert_equals(dateTimeLocal.value, '',
+    'Datetime input value should not be set after partially inputting the dateTimeLocal.');
+  assert_false(dateTimeLocal.matches(':user-valid'),
+    'Datetime input should not match :user-valid after partially inputting the dateTimeLocal.');
+  assert_false(dateTimeLocal.matches(':user-invalid'),
+    'Datetime input should not match :user-invalid after partially inputting the dateTimeLocal.');
+
+  await test_driver.send_keys(dateTimeLocal, `1${tabKey}1234${tabKey}1${tabKey}2${tabKey}a${tabKey}`);
+  assert_equals(dateTimeLocal.value, '1234-01-01T01:02',
+    'Datetime input value should match the testdriver input.');
+  assert_true(dateTimeLocal.matches(':user-valid'),
+    'Datetime input should match :user-valid after typing in a complete value.');
+  assert_false(dateTimeLocal.matches(':user-invalid'),
+    'Datetime input should not match :user-invalid after typing in a complete value.');
+
+  dateTimeLocal.blur();
+  dateTimeLocal.focus();
+  await test_driver.send_keys(dateTimeLocal, backspace);
+  assert_equals(dateTimeLocal.value, '',
+    'Datetime input value should be cleared when deleting one of the sub-values.');
+  assert_false(dateTimeLocal.matches(':user-valid'),
+    'Datetime input should not match :user-valid after typing in an invalid value.');
+  assert_true(dateTimeLocal.matches(':user-invalid'),
+    'Datetime input should match :user-invalid after typing in an invalid value.');
+}, '<input type=datetime-local> keyboard behavior for :user-valid/:user-invalid.');
+</script>
diff --git a/testing/web-platform/tests/css/selectors/user-valid.html b/testing/web-platform/tests/css/selectors/user-valid.html
index 7a12eb237d..402003ba5e 100644
--- a/testing/web-platform/tests/css/selectors/user-valid.html
+++ b/testing/web-platform/tests/css/selectors/user-valid.html
@@ -29,6 +29,7 @@
   <input placeholder="Optional field" id="optional-input"><br>
   <textarea placeholder="Optional field" id="optional-textarea"></textarea><br>
   <input type="checkbox" id="optional-checkbox"><br>
+  <input type="date" id="optional-date"><br>
   <input required placeholder="Required field"> <!-- Prevent the form from navigating with this invalid input -->
   <input type="submit" id="submit-button">
   <input type="reset" id="reset-button">
@@ -77,12 +78,14 @@ promise_test(async () => {
   const optionalInput = document.querySelector("#optional-input");
   const optionalTextarea = document.querySelector("#optional-textarea");
   const optionalCheckbox = document.querySelector("#optional-checkbox");
+  const optionalDate = document.querySelector("#optional-date");
   const submitButton = document.querySelector("#submit-button");
   const resetButton = document.querySelector("#reset-button");
 
   assert_true(optionalInput.validity.valid);
   assert_true(optionalTextarea.validity.valid);
   assert_true(optionalCheckbox.validity.valid);
+  assert_true(optionalDate.validity.valid);
   // The selector can't match because no interaction has happened.
   assert_false(optionalInput.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(optionalInput.matches(":user-invalid"), "Initially does not match :user-invalid");
@@ -93,6 +96,9 @@ promise_test(async () => {
   assert_false(optionalCheckbox.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(optionalCheckbox.matches(":user-invalid"), "Initially does not match :user-invalid");
 
+  assert_false(optionalDate.matches(":user-valid"), "Initially does not match :user-valid");
+  assert_false(optionalDate.matches(":user-invalid"), "Initially does not match :user-invalid");
+
   submitButton.click();
 
   assert_true(optionalInput.matches(":user-valid"), "Submitted the form, input is validated");
@@ -104,6 +110,9 @@ promise_test(async () => {
   assert_true(optionalCheckbox.matches(":user-valid"), "Submitted the form, checkbox is validated");
   assert_false(optionalCheckbox.matches(":user-invalid"), "Submitted the form, checkbox is validated");
 
+  assert_true(optionalDate.matches(":user-valid"), "Submitted the form, date is validated");
+  assert_false(optionalDate.matches(":user-invalid"), "Submitted the form, date is validated");
+
   resetButton.click();
 
   assert_false(optionalInput.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
@@ -115,6 +124,9 @@ promise_test(async () => {
   assert_false(optionalCheckbox.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
   assert_false(optionalCheckbox.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
 
+  assert_false(optionalDate.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
+  assert_false(optionalDate.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
+
   // Test programmatic form submission with constraint validation.
   form.requestSubmit();
 
@@ -126,6 +138,9 @@ promise_test(async () => {
 
   assert_true(optionalCheckbox.matches(":user-valid"), "Called form.requestSubmit(), checkbox is validated");
   assert_false(optionalCheckbox.matches(":user-invalid"), "Called form.requestSubmit(), checkbox is validated");
+
+  assert_true(optionalDate.matches(":user-valid"), "Called form.requestSubmit(), date is validated");
+  assert_false(optionalDate.matches(":user-invalid"), "Called form.requestSubmit(), date is validated");
 }, ":user-valid selector properly interacts with submit & reset buttons");
 
 promise_test(async () => {
@@ -151,4 +166,33 @@ promise_test(async () => {
   assert_true(checkbox.matches(':user-valid'),
     'Checkbox should match :user-valid after clicking once.');
 }, 'Checkboxes should match :user-valid after the user clicks on it.');
+
+promise_test(async () => {
+  const date = document.getElementById('optional-date');
+
+  const resetButton = document.getElementById('reset-button');
+  resetButton.click();
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid at the start of the test.');
+  assert_equals(date.value, '',
+    'Date input should not have a value at the start of the test.');
+
+  date.value = '2024-04-15';
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid after programatically changing value.');
+  date.value = '';
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid after programatically changing value.');
+
+  const tabKey = '\uE004';
+  date.focus();
+  // Press tab twice at the end to make sure that focus has left the input.
+  await test_driver.send_keys(date, `1${tabKey}1${tabKey}1234${tabKey}${tabKey}`);
+  assert_not_equals(document.activeElement, date,
+    'Pressing tab twice after typing in the date should have blurred the input.');
+  assert_equals(date.value, '1234-01-01',
+    'Date input value should match the testdriver input.');
+  assert_true(date.matches(':user-valid'),
+    'Date input should match :user-valid after typing in a value.');
+}, 'Date inputs should match :user-valid after the user types a value into it.');
 </script>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:35:37 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:35:37 +0000
commit	a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch)
tree	532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/css
parent	Adding debian version 126.0.1-1. (diff)
download	firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip