diff --git a/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html b/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html
deleted file mode 100644
index 8a3b03c2e502c1..00000000000000
--- a/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="author" href="mailto:sammy.gill@apple.com">
-<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block">
-<meta name="assert" content="Items, including self-collapsing ones, at the block-end of the container should have their margins trimmed">
-<style>
-container {
-    display: block;
-    inline-size: min-content;
-    margin-trim: block-end;
-}
-item {
-    display: block;
-    background-color: green;
-    inline-size: 50px;
-    block-size: 10px;
-    margin-block-end: 10px;
-}
-.border {
-    border: 1px solid black;
-}
-.collapsed {
-    block-size: 0px;
-}
-</style>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('item')">
-    <div id="target">
-        <container>
-            <item data-expected-margin-bottom="10"></item>
-            <item data-expected-margin-bottom="0" style="block-size: auto;">
-                <div><item data-expected-margin-bottom="10"></item></div>
-                <div>
-                    <item data-expected-margin-bottom="0" style="block-size: auto;">
-                        <div><item data-expected-margin-bottom="0"></item></div>
-                    </item>
-                    <item class="collapsed" data-expected-margin-bottom="0">
-                        <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-                    </item>
-                </div>
-                <item class="collapsed" data-expected-margin-bottom="0">
-                    <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-                </item>
-            </item>
-            <item class="collapsed" data-expected-margin-bottom="0">
-                <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-            </item>
-        </container>
-    </div>
-</body>
-</html>
diff --git a/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html b/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html
deleted file mode 100644
index 26d46628effdf6..00000000000000
--- a/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="author" href="mailto:sammy.gill@apple.com">
-<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block">
-<meta name="assert" content="Second item and all self-collapsing children at block-end should have margins trimmed">
-<style>
-container {
-    display: block;
-    inline-size: min-content;
-    margin-trim: block-end;
-}
-item {
-    display: block;
-    background-color: green;
-    inline-size: 50px;
-    block-size: 50px;
-    margin-block-end: 10px;
-}
-.collapsed {
-    block-size: 0px;
-}
-</style>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('item')">
-    <div id="target">
-        <container>
-            <item data-expected-margin-bottom="10"></item>
-            <item data-expected-margin-bottom="0"></item>
-            <item class="collapsed" data-expected-margin-bottom="0">
-                <div><item class="collapsed" data-expected-margin-bottom="0">
-                    <div><item class="collapsed" data-expected-margin-bottom="0">
-                        <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-                        <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-                    </item></div>
-                </item></div>
-                <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-            </item>
-            <item class="collapsed" data-expected-margin-bottom="0">
-                <div><item class="collapsed" data-expected-margin-bottom="0">
-                    <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-                    <div><item class="collapsed" data-expected-margin-bottom="0">
-                        <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-                    </item></div>
-                    <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-                </item></div>
-                <div><item class="collapsed" data-expected-margin-bottom="0">
-                    <div><item class="collapsed" data-expected-margin-bottom="0">
-                        <div><item class="collapsed" data-expected-margin-bottom="0"></item></div>
-                    </item></div>
-                </item></div>
-            </item>
-            <item class="collapsed" data-expected-margin-bottom="0"></item>
-        </container>
-    </div>
-</body>
-</html>
diff --git a/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html b/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html
deleted file mode 100644
index 6cd0cce2634d5d..00000000000000
--- a/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="author" href="mailto:sammy.gill@apple.com">
-<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block">
-<meta name="assert" content="block-end margin of item should be trimmed">
-<style>
-container {
-    display: block;
-    inline-size: min-content;
-    margin-trim: block-end;
-}
-item {
-    display: block;
-    background-color: green;
-    inline-size: 50px;
-    block-size: 50px;
-    margin-block-end: 10px;
-}
-</style>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('item')">
-    <div id="target">
-        <container>
-            <item data-expected-margin-bottom="0"></item>
-        </container>
-    </div>
-</body>
-</html>
diff --git a/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html b/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html
deleted file mode 100644
index fc9bb93394e3f5..00000000000000
--- a/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
-<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block">
-<meta name="assert" content="item with border should prevent trimming within itself">
-<style>
-container {
-    display: block;
-    margin-trim: block;
-    border: 1px solid black;
-    margin-block-start: 10px;
-}
-item {
-    display: block;
-    inline-size: 50px;
-    block-size: 50px;
-    background-color: green;
-}
-.collapsed {
-    margin-block: 50px;
-    block-size: 0px
-}
-.with-border-and-margin {
-    border: 1px solid black;
-    margin-block-start: 30px;
-}
-</style>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('item')">
-    <container>
-        <item data-expected-margin-top="0" class="collapsed">
-            <item data-expected-margin-top="0" class="collapsed"></item>
-        </item>
-        <item class="with-border-and-margin" data-expected-margin-top="0">
-            <item class="with-border-and-margin" data-expected-margin-top="30"></item>
-        </item>
-    </container>
-</body>
-</html>
diff --git a/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html b/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html
deleted file mode 100644
index e7963f327f57d9..00000000000000
--- a/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
-<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block">
-<meta name="assert" content="self-collapsing items at block start should have margins trimmed along with first non self-collapsing child block-start margins">
-<style>
-container {
-    display: block;
-    margin-trim: block;
-    border: 1px solid black;
-    margin-block-start: 10px;
-}
-item {
-    display: block;
-    inline-size: 50px;
-    background-color: green;
-}
-.collapsed {
-    margin-block-start: 50px;
-    block-size: 0px
-}
-</style>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload=" checkLayout('container, item');">
-    <container data-expected-margin-top="10">
-        <item data-expected-margin-top="0" class="collapsed">
-            <item data-expected-margin-top="0" class="collapsed"></item>
-        </item>
-        <item data-expected-margin-top="0" style="margin-block: 40px">
-            <item data-expected-margin-top="0" data-expected-margin-bottom="0" class="collapsed"></item>
-            <item data-expected-margin-top="0" style="margin-top: 30px;">
-                <item data-expected-margin-top="0" style="margin-block-start: 100px; height: 50px;"></item>
-            </item>
-        </item>
-    </container>
-</body>
-</html>
diff --git a/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html b/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html
deleted file mode 100644
index 3a334fc056b8e8..00000000000000
--- a/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
-<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block">
-<meta name="assert" content="block-start margin of item should be trimmed">
-<style>
-container {
-    display: block;
-    margin-trim: block;
-    border: 1px solid black;
-    margin-block-start: 10px;
-}
-item {
-    display: block;
-    inline-size: 50px;
-    block-size: 50px;
-    background-color: green;
-}
-.collapsed {
-    margin-block: 50px;
-    block-size: 0px
-}
-</style>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="/resources/check-layout-th.js"></script>
-</head>
-<body onload="checkLayout('item')">
-    <container>
-        <item style="margin-top: 30px;" data-expected-margin-top="0"></item>
-    </container>
-</body>
-</html>
diff --git a/css/css-box/margin-trim/margin-trim-computed-value.html b/css/css-box/margin-trim/margin-trim-computed-value.html
new file mode 100644
index 00000000000000..1e6a111fd7e77f
--- /dev/null
+++ b/css/css-box/margin-trim/margin-trim-computed-value.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>margin-trim: trimmed margins are still reported as the used value</title>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim">
+<meta name="assert" content="margin-trim discards margins for layout, just like margin collapsing does, but it does not change the resolved value of the margin properties.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+container {
+    display: block;
+    inline-size: 200px;
+    border: 1px solid blue;
+}
+container.collapsing {
+    border: none;
+}
+item {
+    display: block;
+    block-size: 25px;
+    background-color: green;
+}
+wrapper {
+    display: block;
+}
+self-collapsing {
+    display: block;
+    block-size: 0px;
+    margin-block: 14px;
+}
+.vertical {
+    writing-mode: vertical-lr;
+}
+</style>
+</head>
+<body>
+<container style="margin-trim: block-start">
+    <item id="trimmed-block-start" style="margin-block-start: 20px"></item>
+    <item></item>
+</container>
+
+<container id="trimmed-block-end-container" style="margin-trim: block-end">
+    <item></item>
+    <item id="trimmed-block-end" style="margin-block-end: 20px"></item>
+</container>
+
+<container style="margin-trim: block-start">
+    <item id="trimmed-percentage-block-start" style="margin-block-start: 10%"></item>
+    <item></item>
+</container>
+
+<container id="collapsed-through-container" style="margin-trim: block-start">
+    <wrapper>
+        <item id="trimmed-collapsed-through" style="margin-block-start: 20px"></item>
+    </wrapper>
+    <item></item>
+</container>
+
+<container id="self-collapsing-container" style="margin-trim: block-end; border: none; border-block-start: 1px solid blue">
+    <item></item>
+    <self-collapsing id="trimmed-self-collapsing"></self-collapsing>
+</container>
+
+<container class="vertical" style="margin-trim: block-start">
+    <item id="trimmed-block-start-vertical" style="margin-block-start: 20px"></item>
+    <item></item>
+</container>
+
+<container class="collapsing" id="collapsing-container">
+    <item id="collapsed-block-start" style="margin-block-start: 20px"></item>
+    <item></item>
+</container>
+
+<container id="self-collapsing-block-end-border-container" style="margin-trim: block-end">
+    <item></item>
+    <self-collapsing id="trimmed-self-collapsing-block-end-border"></self-collapsing>
+</container>
+
+<container id="collapsed-through-block-end-container" style="margin-trim: block-end">
+    <item></item>
+    <wrapper>
+        <item id="trimmed-collapsed-through-block-end" style="margin-block-end: 20px"></item>
+    </wrapper>
+</container>
+
+<script>
+function blockStartOffset(element) {
+    const container = element.closest("container");
+    return element.getBoundingClientRect().top - container.getBoundingClientRect().top;
+}
+
+test(() => {
+    const target = document.getElementById("trimmed-block-start");
+    assert_equals(getComputedStyle(target).marginTop, "20px", "resolved value");
+    assert_equals(blockStartOffset(target), 1, "margin is trimmed for layout");
+}, "block-start margin of a trimmed first child is still the used value");
+
+test(() => {
+    const target = document.getElementById("trimmed-block-end");
+    assert_equals(getComputedStyle(target).marginBottom, "20px", "resolved value");
+    assert_equals(document.getElementById("trimmed-block-end-container").offsetHeight, 52, "margin is trimmed for layout");
+}, "block-end margin of a trimmed last child is still the used value");
+
+test(() => {
+    const target = document.getElementById("trimmed-percentage-block-start");
+    assert_equals(getComputedStyle(target).marginTop, "20px", "resolved value");
+    assert_equals(blockStartOffset(target), 1, "margin is trimmed for layout");
+}, "percentage block-start margin of a trimmed first child resolves against the containing block");
+
+test(() => {
+    const target = document.getElementById("trimmed-collapsed-through");
+    assert_equals(getComputedStyle(target).marginTop, "20px", "resolved value");
+    assert_equals(blockStartOffset(target), 1, "margin is trimmed for layout");
+}, "block-start margin that collapses through to a trimmed edge is still the used value");
+
+test(() => {
+    const target = document.getElementById("trimmed-self-collapsing");
+    assert_equals(getComputedStyle(target).marginTop, "14px", "resolved block-start value");
+    assert_equals(getComputedStyle(target).marginBottom, "14px", "resolved block-end value");
+    assert_equals(blockStartOffset(target), 26, "margins are trimmed for layout");
+    assert_equals(document.getElementById("self-collapsing-container").offsetHeight, 26, "margins are trimmed for layout");
+}, "both margins of a trimmed self-collapsing last child are still the used values");
+
+test(() => {
+    const target = document.getElementById("trimmed-block-start-vertical");
+    const container = target.closest("container");
+    assert_equals(getComputedStyle(target).marginLeft, "20px", "resolved value");
+    assert_equals(target.getBoundingClientRect().left - container.getBoundingClientRect().left, 1, "margin is trimmed for layout");
+}, "block-start margin of a trimmed first child in vertical-lr is still the used value");
+
+test(() => {
+    const target = document.getElementById("collapsed-block-start");
+    assert_equals(getComputedStyle(target).marginTop, "20px", "resolved value");
+    assert_equals(blockStartOffset(target), 0, "margin is collapsed with the container");
+}, "collapsed block-start margin is still the used value");
+
+test(() => {
+    const target = document.getElementById("trimmed-self-collapsing-block-end-border");
+    assert_equals(getComputedStyle(target).marginTop, "14px", "resolved block-start value");
+    assert_equals(getComputedStyle(target).marginBottom, "14px", "resolved block-end value");
+    assert_equals(blockStartOffset(target), 26, "margins are trimmed for layout");
+    assert_equals(document.getElementById("self-collapsing-block-end-border-container").offsetHeight, 27, "trimmed margins do not contribute to the container's block size");
+}, "trimmed margins of a self-collapsing last child do not grow a container that cannot collapse with its children");
+
+test(() => {
+    const target = document.getElementById("trimmed-collapsed-through-block-end");
+    assert_equals(getComputedStyle(target).marginBottom, "20px", "resolved value");
+    assert_equals(blockStartOffset(target), 26, "the nested block is placed after the first item");
+    assert_equals(document.getElementById("collapsed-through-block-end-container").offsetHeight, 52, "trimmed margin does not contribute to the container's block size");
+}, "block-end margin that collapses through to a trimmed edge is still the used value");
+</script>
+</body>
+</html>
