From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../margin-trim/block-container-block-001.html     | 35 ++++++++++++
 .../margin-trim/block-container-block-002.html     | 45 ++++++++++++++++
 .../margin-trim/block-container-block-end-001.html | 34 ++++++++++++
 .../margin-trim/block-container-block-end-002.html | 40 ++++++++++++++
 .../block-container-block-start-001.html           | 34 ++++++++++++
 .../block-container-block-start-002.html           | 40 ++++++++++++++
 .../block-container-non-adjoining-item-ref.html    | 28 ++++++++++
 .../block-container-non-adjoining-item.html        | 32 +++++++++++
 .../block-container-replaced-block-end.html        | 34 ++++++++++++
 .../block-container-replaced-block-start.html      | 34 ++++++++++++
 .../block-container-replaced-block.html            | 35 ++++++++++++
 .../block-container-block-end-nested-child.html    | 55 +++++++++++++++++++
 ...er-block-end-with-self-collapsing-children.html | 60 +++++++++++++++++++++
 .../block-container-block-end.html                 | 32 +++++++++++
 ...ck-container-block-start-child-with-border.html | 43 +++++++++++++++
 ...ntainer-block-start-self-collapsing-nested.html | 41 ++++++++++++++
 .../block-container-block-start.html               | 34 ++++++++++++
 .../flexbox-column-block-end.html                  | 34 ++++++++++++
 .../flexbox-column-block-start.html                | 34 ++++++++++++
 .../flexbox-column-inline-end.html                 | 43 +++++++++++++++
 .../flexbox-column-inline-start.html               | 43 +++++++++++++++
 .../flexbox-column-multi-line-block-end.html       | 38 +++++++++++++
 .../flexbox-column-multi-line-block-start.html     | 38 +++++++++++++
 .../flexbox-column-multi-line-block.html           | 38 +++++++++++++
 .../flexbox-column-multi-line-inline-end.html      | 38 +++++++++++++
 .../flexbox-column-multi-line-inline-start.html    | 38 +++++++++++++
 ...n-style-change-triggers-layout-block-start.html | 42 +++++++++++++++
 .../flexbox-row-block-end.html                     | 43 +++++++++++++++
 .../flexbox-row-block-start.html                   | 43 +++++++++++++++
 .../computed-margin-values/flexbox-row-block.html  | 43 +++++++++++++++
 .../flexbox-row-inline-end.html                    | 33 ++++++++++++
 .../flexbox-row-inline-start.html                  | 33 ++++++++++++
 .../flexbox-row-multi-line-block-end.html          | 36 +++++++++++++
 .../flexbox-row-multi-line-block-start.html        | 47 ++++++++++++++++
 .../flexbox-row-multi-line-block.html              | 37 +++++++++++++
 .../flexbox-row-multi-line-inline-end.html         | 47 ++++++++++++++++
 .../flexbox-row-multi-line-inline-start.html       | 47 ++++++++++++++++
 .../grid-block-end-column-auto-flow.html           | 60 +++++++++++++++++++++
 .../grid-block-end-item-spans-multiple-rows.html   | 42 +++++++++++++++
 .../computed-margin-values/grid-block-end.html     | 55 +++++++++++++++++++
 .../grid-inline-start-item-negative-span.html      | 41 ++++++++++++++
 .../computed-margin-values/grid-inline-start.html  | 62 ++++++++++++++++++++++
 .../flex-block-end-trimmed-only-ref.html           | 31 +++++++++++
 .../margin-trim/flex-block-end-trimmed-only.html   | 33 ++++++++++++
 .../flex-block-start-trimmed-only-ref.html         | 31 +++++++++++
 .../margin-trim/flex-block-start-trimmed-only.html | 33 ++++++++++++
 .../margin-trim/flex-block-trimmed-only-ref.html   | 30 +++++++++++
 .../margin-trim/flex-block-trimmed-only.html       | 33 ++++++++++++
 .../margin-trim/flex-column-block-multiline.html   | 41 ++++++++++++++
 .../css/css-box/margin-trim/flex-column-grow.html  | 33 ++++++++++++
 .../flex-column-inline-multiline-ref.html          | 33 ++++++++++++
 .../margin-trim/flex-column-inline-multiline.html  | 36 +++++++++++++
 .../margin-trim/flex-column-orthogonal-item.html   | 39 ++++++++++++++
 .../css-box/margin-trim/flex-column-shrink.html    | 33 ++++++++++++
 ...style-change-triggers-layout-block-end-ref.html | 33 ++++++++++++
 ...umn-style-change-triggers-layout-block-end.html | 41 ++++++++++++++
 ...umn-style-change-triggers-layout-block-ref.html | 33 ++++++++++++
 ...yle-change-triggers-layout-block-start-ref.html | 33 ++++++++++++
 ...n-style-change-triggers-layout-block-start.html | 41 ++++++++++++++
 ...-column-style-change-triggers-layout-block.html | 41 ++++++++++++++
 .../flex-inline-end-trimmed-only-ref.html          | 34 ++++++++++++
 .../margin-trim/flex-inline-end-trimmed-only.html  | 33 ++++++++++++
 .../flex-inline-start-trimmed-only-ref.html        | 34 ++++++++++++
 .../flex-inline-start-trimmed-only.html            | 33 ++++++++++++
 .../margin-trim/flex-inline-trimmed-only-ref.html  | 31 +++++++++++
 .../margin-trim/flex-inline-trimmed-only.html      | 33 ++++++++++++
 .../margin-trim/flex-row-block-multiline-ref.html  | 32 +++++++++++
 .../margin-trim/flex-row-block-multiline.html      | 34 ++++++++++++
 .../css/css-box/margin-trim/flex-row-grow.html     | 31 +++++++++++
 .../margin-trim/flex-row-inline-multiline.html     | 39 ++++++++++++++
 .../margin-trim/flex-row-orthogonal-item.html      | 39 ++++++++++++++
 .../css/css-box/margin-trim/flex-row-shrink.html   | 31 +++++++++++
 ...tyle-change-triggers-layout-inline-end-ref.html | 33 ++++++++++++
 ...ow-style-change-triggers-layout-inline-end.html | 40 ++++++++++++++
 ...ow-style-change-triggers-layout-inline-ref.html | 33 ++++++++++++
 ...le-change-triggers-layout-inline-start-ref.html | 33 ++++++++++++
 ...-style-change-triggers-layout-inline-start.html | 40 ++++++++++++++
 ...ex-row-style-change-triggers-layout-inline.html | 40 ++++++++++++++
 .../margin-trim/flex-trim-all-margins-ref.html     | 29 ++++++++++
 .../css-box/margin-trim/flex-trim-all-margins.html | 32 +++++++++++
 .../css-box/margin-trim/grid-block-end-ref.html    | 29 ++++++++++
 .../css/css-box/margin-trim/grid-block-end.html    | 33 ++++++++++++
 .../css-box/margin-trim/grid-block-start-ref.html  | 33 ++++++++++++
 .../css/css-box/margin-trim/grid-block-start.html  | 33 ++++++++++++
 .../tests/css/css-box/margin-trim/grid-block.html  | 38 +++++++++++++
 .../css-box/margin-trim/grid-inline-end-ref.html   | 31 +++++++++++
 .../css/css-box/margin-trim/grid-inline-end.html   | 33 ++++++++++++
 .../css-box/margin-trim/grid-inline-start-ref.html | 35 ++++++++++++
 .../css/css-box/margin-trim/grid-inline-start.html | 34 ++++++++++++
 .../tests/css/css-box/margin-trim/grid-inline.html | 38 +++++++++++++
 .../grid-trim-ignores-collapsed-tracks.html        | 34 ++++++++++++
 91 files changed, 3394 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-block-001.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-block-002.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-001.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-002.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-001.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-002.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-style-change-triggers-layout-block-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-column-auto-flow.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-item-spans-multiple-rows.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start-item-negative-span.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-block-multiline.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-grow.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-orthogonal-item.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-shrink.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-grow.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-inline-multiline.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-orthogonal-item.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-shrink.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-block-end-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-block-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-block-start-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-block-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-block.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start-ref.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-inline.html
 create mode 100644 testing/web-platform/tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks.html

(limited to 'testing/web-platform/tests/css/css-box/margin-trim')

diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-001.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-001.html
new file mode 100644
index 0000000000..e31abec367
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-block-001</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-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block should trim block start and end margins for block-level first child">
+<style>
+.container {
+    background-color: green;
+    width: min-content;
+    margin-trim: block;
+}
+.outer {
+    background-color: green;
+    width: 100px;
+    height: 50px;
+}
+.child {
+    margin-top: 50px;
+    margin-bottom: 50px;
+    width: 100px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <div class="container">
+        <div class="child"></div>
+    </div>
+    <div class="outer"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-002.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-002.html
new file mode 100644
index 0000000000..399141b17e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-block-002</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-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block should trim block start and end margins for ONLY block-level first/last children">
+<style>
+.container {
+    background-color: green;
+    width: min-content;
+    margin-trim: block;
+}
+.first {
+    margin-top: 50px;
+    height: 25px;
+}
+.second {
+    width: 100px;
+    height: 10px;
+    margin-bottom: 15px;
+}
+.third {
+    width: 100px;
+    height: 25px;
+    margin-bottom: 50px;
+}
+.outer {
+    width: 100px;
+    height: 25px;
+    background-color: green;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <div class="container">
+        <div class="first"></div>
+        <div class="second"></div>
+        <div class="third"></div>
+    </div>
+    <div class="outer"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-001.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-001.html
new file mode 100644
index 0000000000..fcee65692c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-block-end-001</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-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block-end should trim block end margin for block-level first child">
+<style>
+.container {
+    background-color: green;
+    width: min-content;
+    margin-trim: block-end;
+}
+.outer {
+    background-color: green;
+    width: 100px;
+    height: 50px;
+}
+.child {
+    margin-bottom: 50px;
+    width: 100px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <div class="container">
+        <div class="child"></div>
+    </div>
+    <div class="outer"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-002.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-002.html
new file mode 100644
index 0000000000..42d559fbe9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-end-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-block-end-002</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-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block-end should trim block end margin for ONLY block-level first child">
+<style>
+.container {
+    width: min-content;
+    margin-trim: block-end;
+    background-color: green;
+}
+.outer {
+    width: 100px;
+    height: 40px;
+    background-color: green;
+}
+.first {
+    width: 100px;
+    margin-bottom: 25px;
+    height: 25px;
+}
+.second {
+    margin-bottom: 100px;
+    width: 100px;
+    height: 10px;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <div class="container">
+        <div class="first"></div>
+        <div class="second"></div>
+    </div>
+    <div class="outer"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-001.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-001.html
new file mode 100644
index 0000000000..c33c7f0abe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-block-start-001</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-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block-start should trim block start margin for block-level first child">
+<style>
+.container {
+    background-color: green;
+    width: min-content;
+    margin-trim: block-start;
+}
+.outer {
+    background-color: green;
+    width: 100px;
+    height: 50px;
+}
+.child {
+    width: 100px;
+    margin-top: 50px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <div class="outer"></div>
+    <div class="container">
+        <div class="child"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-002.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-002.html
new file mode 100644
index 0000000000..339c990d10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-block-start-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-block-start-002</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-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block-start should trim block start margin for ONLY block-level first child">
+<style>
+.container {
+    background-color: green;
+    width: min-content;
+    margin-trim: block-start;
+}
+.outer {
+    background-color: green;
+    width: 100px;
+    height: 10px;
+}
+.first {
+    margin-top: 50px;
+    width: 100px;
+    height: 40px;
+}
+.second {
+    margin-top: 10px;
+    width: 100px;
+    height: 40px;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <div class="outer"></div>
+    <div class="container">
+        <div class="first"></div>
+        <div class="second"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item-ref.html
new file mode 100644
index 0000000000..4affb87f11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-non-adjoining-item</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-block">
+<meta name="assert" content="non-adjoining first child should still have its margins trimmed and the container should keep its set margin">
+<style>
+.container {
+    background-color: green;
+    width: min-content;
+    margin-bottom: 100px;
+    padding-bottom: 50px;
+    background-clip: padding-box;
+}
+.child {
+    width: 100px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="child"></div>
+</div>
+<div>This text should be 100px below the green square.</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item.html
new file mode 100644
index 0000000000..215175418b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-non-adjoining-item.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-non-adjoining-item</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-block">
+<link rel="match" href="block-container-non-adjoining-item-ref.html">
+<meta name="assert" content="non-adjoining first child should still have its margins trimmed and the container should keep its set margin">
+<style>
+.container {
+    background-color: green;
+    width: min-content;
+    margin-bottom: 100px;
+    padding-bottom: 50px;
+    background-clip: padding-box;
+    margin-trim: block;
+}
+.child {
+    margin-top: 50px;
+    margin-bottom: 200px;
+    width: 100px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="child"></div>
+</div>
+<div>This text should be 100px below the green square.</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-end.html
new file mode 100644
index 0000000000..0225460b7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-end.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-replaced-block-end</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-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block level replaced element should have block-end trimmed">
+<style>
+.container {
+   width: min-content;
+   margin-trim: block-end;
+}
+.outer {
+    background-color: green;
+    width: 100px;
+    height: 40px;
+}
+.child {
+    display: block;
+    margin-bottom: 50px;
+    background-color: green;
+    padding-right: 40px;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <div class="container">
+        <img class="child" src="/css/support/60x60-green.png"/>
+    </div>
+    <div class="outer"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-start.html
new file mode 100644
index 0000000000..10080c974f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block-start.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-replaced-block-start</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-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block level replaced element should have block-start trimmed">
+<style>
+.container {
+   width: min-content;
+   margin-trim: block-start;
+}
+.outer {
+    background-color: green;
+    width: 100px;
+    height: 40px;
+}
+.child {
+    display: block;
+    margin-top: 50px;
+    background-color: green;
+    padding-right: 40px;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <div class="outer"></div>
+    <div class="container">
+        <img class="child" src="/css/support/60x60-green.png"/>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block.html b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block.html
new file mode 100644
index 0000000000..036066f691
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/block-container-replaced-block.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: block-container-replaced-block</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-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block level replaced element should have both block-start and block-end trimmed when block is specified">
+<style>
+.container {
+    width: min-content;
+    margin-trim: block;
+}
+.outer {
+    background-color: green;
+    width: 100px;
+    height: 40px;
+}
+.child {
+    display: block;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    background-color: green;
+    padding-right: 40px;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <div class="container">
+        <img class="child" src="/css/support/60x60-green.png"/>
+    </div>
+    <div class="outer"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html
new file mode 100644
index 0000000000..2d36e75c26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-nested-child.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://w3c.github.io/csswg-drafts/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/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html
new file mode 100644
index 0000000000..d03c2fe142
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end-with-self-collapsing-children.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://w3c.github.io/csswg-drafts/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/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html
new file mode 100644
index 0000000000..dcf8ba6fe2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-end.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://w3c.github.io/csswg-drafts/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/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html
new file mode 100644
index 0000000000..fc9bb93394
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-child-with-border.html
@@ -0,0 +1,43 @@
+<!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/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html
new file mode 100644
index 0000000000..e7963f327f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start-self-collapsing-nested.html
@@ -0,0 +1,41 @@
+<!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/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html
new file mode 100644
index 0000000000..3a334fc056
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/block-container-block-start.html
@@ -0,0 +1,34 @@
+<!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/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-end.html
new file mode 100644
index 0000000000..ecc266378d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-end.html
@@ -0,0 +1,34 @@
+<!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-flex">
+<meta name="assert" content="block-end trimmed margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    margin-trim: block-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-bottom="10" data-offset-y="8"></item>
+    <item data-expected-margin-bottom="0" data-offset-y="68"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-start.html
new file mode 100644
index 0000000000..6c760bb1f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-block-start.html
@@ -0,0 +1,34 @@
+<!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-flex">
+<meta name="assert" content="block-start trimmed margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    margin-trim: block-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block-start: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-top="0" data-offset-y="8"></item>
+    <item data-expected-margin-top="10" data-offset-y="68"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-end.html
new file mode 100644
index 0000000000..9bf43356f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-end.html
@@ -0,0 +1,43 @@
+<!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-flex">
+<meta name="assert" content="trimmed inline-end margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    margin-trim: inline-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+item:nth-child(1) {
+    margin-inline-end: 10px;
+}
+item:nth-child(2) {
+    margin-inline-end: -10px;
+}
+item:nth-child(3) {
+    margin-inline-end: 30%;
+}
+</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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-right="0" data-offset-x="8"></item>
+    <item data-expected-margin-right="0" data-offset-x="8"></item>
+    <item data-expected-margin-right="0" data-offset-x="8"></item>
+</flexbox>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-start.html
new file mode 100644
index 0000000000..681c9b859f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-inline-start.html
@@ -0,0 +1,43 @@
+<!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-flex">
+<meta name="assert" content="trimmed inline-start margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    margin-trim: inline-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+item:nth-child(1) {
+    margin-inline-start: 10px;
+}
+item:nth-child(2) {
+    margin-inline-start: -10px;
+}
+item:nth-child(3) {
+    margin-inline-start: 30%;
+}
+</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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-left="0" data-offset-x="8"></item>
+    <item data-expected-margin-left="0" data-offset-x="8"></item>
+    <item data-expected-margin-left="0" data-offset-x="8"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-end.html
new file mode 100644
index 0000000000..61f11a9b31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-end.html
@@ -0,0 +1,38 @@
+<!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-flex">
+<meta name="assert" content="block-end trimmed margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 100px;
+    height: 110px;
+    margin-trim: block-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-offset-y="8" data-expected-margin-bottom="10"></item>
+    <item data-offset-y="68" data-expected-margin-bottom="0"></item>
+    <item data-offset-y="8" data-expected-margin-bottom="10"></item>
+    <item data-offset-y="68" data-expected-margin-top="0"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-start.html
new file mode 100644
index 0000000000..517619db49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block-start.html
@@ -0,0 +1,38 @@
+<!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-flex">
+<meta name="assert" content="block-start trimmed margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 10px;
+    height: 110px;
+    margin-trim: block-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block-start: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-offset-y="8" data-expected-margin-top="0"></item>
+    <item data-offset-y="68" data-expected-margin-top="10"></item>
+    <item data-offset-y="8" data-expected-margin-top="0"></item>
+    <item data-offset-y="68" data-expected-margin-top="10"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block.html
new file mode 100644
index 0000000000..e01067fbe2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-block.html
@@ -0,0 +1,38 @@
+<!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-flex">
+<meta name="assert" content="both trimmed block margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 100px;
+    height: 120px;
+    margin-trim: block;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-offset-y="8" data-expected-margin-top="0" data-expected-margin-bottom="10"></item>
+    <item data-offset-y="78" data-expected-margin-top="10" data-expected-margin-bottom="0" ></item>
+    <item data-offset-y="8" data-expected-margin-top="0" data-expected-margin-bottom="10"></item>
+    <item data-offset-y="78" data-expected-margin-top="10" data-expected-margin-bottom="0"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-end.html
new file mode 100644
index 0000000000..4d3d5b5326
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-end.html
@@ -0,0 +1,38 @@
+<!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-flex">
+<meta name="assert" content="trimmed inline-end margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: min-content;
+    height: 100px;
+    margin-trim: inline-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline-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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-offset-x="8" data-expected-margin-right="10"></item>
+    <item data-offset-x="8" data-expected-margin-right="10"></item>
+    <item data-offset-x="68" data-expected-margin-right="0"></item>
+    <item data-offset-x="68" data-expected-margin-right="0"></item>
+</flexbox>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-start.html
new file mode 100644
index 0000000000..1e4d007658
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-multi-line-inline-start.html
@@ -0,0 +1,38 @@
+<!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-flex">
+<meta name="assert" content="trimmed inline-start margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: min-content;
+    height: 100px;
+    margin-trim: inline-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline-start: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-offset-x="8" data-expected-margin-left="0"></item>
+    <item data-offset-x="8" data-expected-margin-left="0"></item>
+    <item data-offset-x="68" data-expected-margin-left="10"></item>
+    <item data-offset-x="68" data-expected-margin-left="10"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-style-change-triggers-layout-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-style-change-triggers-layout-block-start.html
new file mode 100644
index 0000000000..175b5c3f2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-column-style-change-triggers-layout-block-start.html
@@ -0,0 +1,42 @@
+<!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-flex">
+<meta name="assert" content="Make sure margins are no longer trimmed when margin-trim is changed to none on the flexbox">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    margin-trim: block-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block-start: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+<body>
+<div id="target">
+<flexbox>
+    <item data-expected-margin-top="10" data-offset-y="18"></item>
+    <item data-expected-margin-top="10" data-offset-y="78"></item>
+</flexbox>
+</div>
+<script>
+// Force the first layout to trim margins, set margin-trim to none,
+// force a second layout, and then check to see if the margins were added back
+document.body.offsetHeight;
+document.querySelector("flexbox").style["margin-trim"] = "none";
+document.body.offsetHeight;
+checkLayout("flexbox > item");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-end.html
new file mode 100644
index 0000000000..f5ca9854fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-end.html
@@ -0,0 +1,43 @@
+<!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-flex">
+<meta name="assert" content="block-end trimmed margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    margin-trim: block-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+}
+item:nth-child(1) {
+    margin-block-end: 10px;
+}
+item:nth-child(2) {
+    margin-block-end: -10px;
+}
+item:nth-child(3) {
+    margin-block-end: 30%;
+}
+</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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-bottom="0"></item>
+    <item data-expected-margin-bottom="0"></item>
+    <item data-expected-margin-bottom="0"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-start.html
new file mode 100644
index 0000000000..9597c9aa10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block-start.html
@@ -0,0 +1,43 @@
+<!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-flex">
+<meta name="assert" content="block-start trimmed margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    margin-trim: block-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+}
+item:nth-child(1) {
+    margin-block-start: 10px;
+}
+item:nth-child(2) {
+    margin-block-start: -10px;
+}
+item:nth-child(3) {
+    margin-block-start: 30%;
+}
+</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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-top="0" data-offset-y="8"></item>
+    <item data-expected-margin-top="0" data-offset-y="8"></item>
+    <item data-expected-margin-top="0" data-offset-y="8"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block.html
new file mode 100644
index 0000000000..6c35fa6ac2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-block.html
@@ -0,0 +1,43 @@
+<!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-flex">
+<meta name="assert" content="both trimmed block margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    margin-trim: block;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+}
+item:nth-child(1) {
+    margin-block: 10px;
+}
+item:nth-child(2) {
+    margin-block: -10px;
+}
+item:nth-child(3) {
+    margin-block: 30%;
+}
+</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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-top="0" data-expected-margin-bottom="0" data-offset-y="8"></item>
+    <item data-expected-margin-top="0" data-expected-margin-bottom="0" data-offset-y="8"></item>
+    <item data-expected-margin-top="0" data-expected-margin-bottom="0" data-offset-y="8"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-end.html
new file mode 100644
index 0000000000..2c20625ed3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-end.html
@@ -0,0 +1,33 @@
+<!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-flex">
+<meta name="assert" content="trimmed inline-end margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    margin-trim: inline-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline-end: 20px;
+}
+</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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-right="20" data-offset-x="8"></item>
+    <item data-expected-margin-right="20" data-offset-x="78"></item>
+    <item data-expected-margin-right="0" data-offset-x="148"></item>
+</flexbox>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-start.html
new file mode 100644
index 0000000000..24ce7f90e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-inline-start.html
@@ -0,0 +1,33 @@
+<!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-flex">
+<meta name="assert" content="trimmed inline-start margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    margin-trim: inline-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline-start: 20px;
+}
+</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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-left="0" data-offset-x="8"></item>
+    <item data-expected-margin-left="20" data-offset-x="78"></item>
+    <item data-expected-margin-left="20" data-offset-x="148"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-end.html
new file mode 100644
index 0000000000..f4c90c29f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-end.html
@@ -0,0 +1,36 @@
+<!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-flex">
+<meta name="assert" content="block-end trimmed margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100px;
+    margin-trim: block-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-offset-y="8" data-expected-margin-bottom="10"></item>
+    <item data-offset-y="8" data-expected-margin-bottom="10"></item>
+    <item data-offset-y="68" data-expected-margin-bottom="0"></item>
+    <item data-offset-y="68" data-expected-margin-bottom="0"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-start.html
new file mode 100644
index 0000000000..c3190e1a93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block-start.html
@@ -0,0 +1,47 @@
+<!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-flex">
+<meta name="assert" content="block-start trimmed margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    width: 100px;
+    flex-wrap: wrap;
+    margin-trim: block-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+item:nth-child(1) {
+    margin-block-start: 10px;
+}
+item:nth-child(2) {
+    margin-block-start: -10px;
+}
+item:nth-child(3) {
+    margin-block-start: 10px;
+}
+item:nth-child(4) {
+    margin-block-start: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-top="0" data-offset-y="8"></item>
+    <item data-expected-margin-top="0" data-offset-y="8"></item>
+    <item data-expected-margin-top="10" data-offset-y="68"></item>
+    <item data-expected-margin-top="10" data-offset-y="68"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block.html
new file mode 100644
index 0000000000..1db5680306
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-block.html
@@ -0,0 +1,37 @@
+<!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-flex">
+<meta name="assert" content="both trimmed block margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    width: 100px;
+    flex-wrap: wrap;
+    margin-trim: block;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-top="0" data-expected-margin-bottom="10" data-offset-y="8"></item>
+    <item data-expected-margin-top="0" data-expected-margin-bottom="10" data-offset-y="8"></item>
+    <item data-expected-margin-top="10" data-expected-margin-bottom="0" data-offset-y="78"></item>
+    <item data-expected-margin-top="10" data-expected-margin-bottom="0" data-offset-y="78"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-end.html
new file mode 100644
index 0000000000..8a59bc4171
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-end.html
@@ -0,0 +1,47 @@
+<!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-flex">
+<meta name="assert" content="trimmed inline-end margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    width: 110px;
+    flex-wrap: wrap;
+    margin-trim: inline-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+item:nth-child(1) {
+    margin-inline-end: 10px;
+}
+item:nth-child(2) {
+    margin-inline-end: -10px;
+}
+item:nth-child(3) {
+    margin-inline-end: 10px;
+}
+item:nth-child(4) {
+    margin-inline-end: 50%;
+}
+</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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-right="10" data-offset-x="8"></item>
+    <item data-expected-margin-right="0" data-offset-x="68"></item>
+    <item data-expected-margin-right="10" data-offset-x="8"></item>
+    <item data-expected-margin-right="0" data-offset-x="68"></item>
+</flexbox>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-start.html
new file mode 100644
index 0000000000..9b925a7b68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/flexbox-row-multi-line-inline-start.html
@@ -0,0 +1,47 @@
+<!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-flex">
+<meta name="assert" content="trimmed inline-start margins should be reflected in computed style">
+<style>
+flexbox {
+    display: flex;
+    width: 110px;
+    flex-wrap: wrap;
+    margin-trim: inline-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+item:nth-child(1) {
+    margin-inline-start: 10px;
+}
+item:nth-child(2) {
+    margin-inline-start: -10px;
+}
+item:nth-child(3) {
+    margin-inline-start: 50%;
+}
+item:nth-child(4) {
+    margin-inline-start: 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('flexbox > item')">
+<div id="target">
+<flexbox>
+    <item data-expected-margin-left="0" data-offset-x="8"></item>
+    <item data-expected-margin-left="-10" data-offset-x="48"></item>
+    <item data-expected-margin-left="0" data-offset-x="8"></item>
+    <item data-expected-margin-left="10" data-offset-x="68"></item>
+</flexbox>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-column-auto-flow.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-column-auto-flow.html
new file mode 100644
index 0000000000..c491301c8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-column-auto-flow.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://w3c.github.io/csswg-drafts/css-box-4/#margin-trim-grid">
+<meta name="assert" content="Trimmed block-end margins for grid items should be reflected in computed style">
+</head>
+<style>
+grid {
+    display: grid;
+    width: min-content;
+    grid-auto-flow: column;
+    border: 1px solid black;
+    grid-template-rows: auto auto auto;
+    margin-trim: block-end;
+}
+item {
+    display: block;
+    width: 50px;
+    height: 50px;
+    margin-block-end: 10px;
+}
+.span-four {
+    grid-row: span 4;
+}
+item:nth-child(1) {
+    grid-row: 1;
+    background-color: green;
+}
+item:nth-child(2) {
+    grid-row: 2;
+    background-color: blue;
+}
+item:nth-child(3) {
+    grid-row: 3;
+    background-color: purple;
+}
+item:nth-child(4) {
+    background-color:burlywood;
+}
+item:nth-child(5) {
+    background-color: grey;
+    grid-row: 4;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('grid > item')">
+    <div id="target">
+    <grid>
+        <item data-expected-margin-bottom="10"></item>
+        <item data-expected-margin-bottom="10"></item>
+        <item data-expected-margin-bottom="10"></item>
+        <item data-expected-margin-bottom="0" class="span-four"></item>
+        <item data-expected-margin-bottom="0"></item>
+    </grid>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-item-spans-multiple-rows.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-item-spans-multiple-rows.html
new file mode 100644
index 0000000000..4ae597760b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end-item-spans-multiple-rows.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://w3c.github.io/csswg-drafts/css-box-4/#margin-trim-grid">
+<meta name="assert" content="item that spans into last row should have block-end margin trimmed">
+</head>
+<style>
+grid {
+    display: grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+    margin-trim: block-end;
+}
+item {
+    display: block;
+    width: 50px;
+    height: 50px;
+    margin-bottom: 10px;
+}
+.row-two {
+    grid-row: 2;
+    background-color: green;
+}
+.span-two-rows {
+    grid-row: span 2;
+    background-color: blue;
+    height: 90px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('grid > item')">
+    <div id="target">
+    <grid>
+        <item data-expected-margin-bottom="0" class="span-two-rows"></item>
+        <item data-expected-margin-bottom="0" class="row-two"></item>
+    </grid>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end.html
new file mode 100644
index 0000000000..a0143364aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-block-end.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://w3c.github.io/csswg-drafts/css-box-4/#margin-trim-grid">
+<meta name="assert" content="Trimmed block-end margins for grid items should be reflected in computed style">
+</head>
+<style>
+grid {
+    display: grid;
+    width: min-content;
+    border: 1px solid black;
+    grid-template-columns: repeat(4, auto);
+    margin-trim: block-end;
+}
+item {
+    display: block;
+    width: 50px;
+    height: 50px;
+    margin-bottom: 10px;
+}
+.locked-position {
+    grid-row: 2;
+    grid-column: 2;
+    margin-block-end: 50px;
+    background-color: magenta;
+}
+.span-three-columns {
+    grid-column: span 3;
+    background-color: purple;
+}
+.span-five-columns {
+    grid-column: span 5;
+}
+item:nth-child(1) {
+    background-color: green;
+}
+item:nth-child(4) {
+    background-color: blue;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('grid > item')">
+    <div id="target">
+    <grid>
+        <item class="span-five-columns" data-expected-margin-bottom="10"></item>
+        <item class="locked-position" data-expected-margin-bottom="50"></item>
+        <item class="span-three-columns" data-expected-margin-bottom="10"></item>
+        <item data-expected-margin-bottom="0"></item>
+    </grid>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start-item-negative-span.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start-item-negative-span.html
new file mode 100644
index 0000000000..4dc553e15b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start-item-negative-span.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://w3c.github.io/csswg-drafts/css-box-4/#margin-trim-grid">
+<meta name="assert" content="trimmed inline-start margins in grid should be reflected in computed style">
+</head>
+<style>
+grid {
+    display: grid;
+    width: min-content;
+    outline: 1px solid black;
+    grid-template-columns: repeat(2, auto);
+    margin-trim: inline-start;
+}
+item {
+    display: block;
+    width: 50px;
+    height: 50px;
+    margin-inline-start: 10px;
+    background-color: green;
+}
+.negative-line-number {
+    width: 50px;
+    grid-row: 2;
+    grid-column: -3;
+    background-color: blue;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('grid > item')">
+    <div id="target">
+    <grid>
+        <item data-expected-margin-left="0" class="negative-line-number"></item>
+        <item data-expected-margin-left="0"></item>
+    </grid>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start.html
new file mode 100644
index 0000000000..7d4157acfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/computed-margin-values/grid-inline-start.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://w3c.github.io/csswg-drafts/css-box-4/#margin-trim-grid">
+<meta name="assert" content="trimmed inline-start margins in grid should be reflected in computed style">
+</head>
+<style>
+grid {
+    display: grid;
+    width: min-content;
+    outline: 1px solid black;
+    grid-template-columns: repeat(2, auto);
+    margin-trim: inline-start;
+}
+item {
+    display: block;
+    width: 50px;
+    height: 50px;
+}
+.locked-position {
+    grid-row: 3;
+    grid-column: 1;
+    margin-inline-start: -30px;
+}
+item:nth-child(1) {
+    background-color: green;
+    margin-inline-start: 30px;
+}
+item:nth-child(2) {
+    background-color: blue;
+    margin-inline-start: 10px;
+}
+item:nth-child(3) {
+    background-color: orchid;
+    margin-inline-start: 10%;
+}
+item:nth-child(4) {
+    background-color: maroon;
+}
+item:nth-child(5) {
+    background-color: salmon;
+    width: auto;
+    grid-column: span 2;
+    margin-inline-start: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('grid > item')">
+    <div id="target">
+    <grid>
+        <item data-expected-margin-left="0"></item>
+        <item data-expected-margin-left="10"></item>
+        <item data-expected-margin-left="0"></item>
+        <item class="locked-position" data-expected-margin-left="0"></item>
+        <item data-expected-margin-left="0"></item>
+    </grid>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only-ref.html
new file mode 100644
index 0000000000..5145182436
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-block-end-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<meta name="assert" content="block-end should trim only margin block end of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+    margin-block-start: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only.html
new file mode 100644
index 0000000000..0a99b3f308
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-end-trimmed-only.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-block-end-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="flex-block-end-trimmed-only-ref.html">
+<meta name="assert" content="block-end should trim only margin block end of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+    margin-trim: block-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only-ref.html
new file mode 100644
index 0000000000..58a7e5ba31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-block-start-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<meta name="assert" content="block-start should trim only margin block start of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+    margin-block-end: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only.html
new file mode 100644
index 0000000000..5e867ea43d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-start-trimmed-only.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-block-start-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="flex-block-start-trimmed-only-ref.html">
+<meta name="assert" content="block-start should trim only margin block start of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+    margin-trim: block-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only-ref.html
new file mode 100644
index 0000000000..f4cf4fec86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-block-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<meta name="assert" content="block should trim only block margins of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only.html
new file mode 100644
index 0000000000..e730482825
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-block-trimmed-only.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-block-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="flex-block-trimmed-only-ref.html">
+<meta name="assert" content="block should trim only block margins of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+    margin-trim: block;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-block-multiline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-block-multiline.html
new file mode 100644
index 0000000000..6536d7f00d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-block-multiline.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-column-block-multiline</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block-start should be trimmed for items at the start of the flex line and block-end should be trimmed for items at the end of the flex line">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    height: 100px;
+    flex-wrap: wrap;
+    flex-direction: column;
+    margin-trim: block;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+item:nth-child(odd) {
+    margin-block-start: 25px;
+}
+item:nth-child(even) {
+    margin-block-end: 25px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-grow.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-grow.html
new file mode 100644
index 0000000000..62c55b2bff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-grow.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-column-grow</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="items should grow to take up the space made available by trimming margins">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    height: 100px;
+    flex-direction: column;
+    margin-trim: block;
+}
+item {
+    display: block;
+    width: 100px;
+    height: 50px;
+    margin-block: 25px;
+    flex: 1 0 auto;
+    background-color: green;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<flexbox>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline-ref.html
new file mode 100644
index 0000000000..c4b36a91b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-column-inline-multiline</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<meta name="assert" content="inline-start should be trimmed for all items on the first flex line and inline-end should be trimmed for all items on the last flex line">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    height: 100px;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 0px 30px;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline.html
new file mode 100644
index 0000000000..25003aab08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-inline-multiline.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-column-inline-multiline</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="flex-column-inline-multiline-ref.html">
+<meta name="assert" content="inline-start should be trimmed for all items on the first flex line and inline-end should be trimmed for all items on the last flex line">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    height: 100px;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin-trim: inline;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline-start: 10px;
+    margin-inline-end: 20px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-orthogonal-item.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-orthogonal-item.html
new file mode 100644
index 0000000000..9f13e2ce71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-orthogonal-item.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-column-orthogonal-item</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="orthogonal items have correct margins trimmed according to the flexbox's writing mode">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    margin-trim: block;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 100px;
+    height: 50px;
+}
+.orthogonal {
+    writing-mode: vertical-rl;
+}
+item:first-child {
+    margin-inline-start: 10px;
+}
+item:last-child {
+    margin-block-end: 10px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<flexbox>
+<item class="orthogonal"></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-shrink.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-shrink.html
new file mode 100644
index 0000000000..06395ff6d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-shrink.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-column-shrink</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="content should fill all available space when flex item is larger than the container and the margins are trimmed">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    height: 100px;
+    margin-trim: block;
+}
+item {
+    display: block;
+    background-color: green;
+    margin-block: 25px;
+    flex: 0 1 auto;
+    width: 100px;
+    height: 150px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<flexbox>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end-ref.html
new file mode 100644
index 0000000000..933ce0cb3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end-ref.html
@@ -0,0 +1,33 @@
+<!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-flex">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+.margin {
+    margin-block-end: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox>
+        <item class="margin"></item>
+    </flexbox>
+    <flexbox>
+        <item></item>
+    </flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end.html
new file mode 100644
index 0000000000..80f2c62d23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-end.html
@@ -0,0 +1,41 @@
+<!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-flex">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<link rel="match" href="flex-column-style-change-triggers-layout-block-end-ref.html">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+.initial-margin-trim {
+    margin-trim: block-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block-end: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox class="initial-margin-trim" id="to-no-margin-trim">
+        <item></item>
+    </flexbox>
+    <flexbox id="to-margin-trim">
+        <item></item>
+    </flexbox>
+</body>
+<script>
+document.body.offsetHeight;
+document.getElementById("to-no-margin-trim").style["margin-trim"] = "none";
+document.getElementById("to-margin-trim").style["margin-trim"] = "block-end";
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-ref.html
new file mode 100644
index 0000000000..7b53e757d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-ref.html
@@ -0,0 +1,33 @@
+<!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-flex">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+.margin {
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox>
+        <item class="margin"></item>
+    </flexbox>
+    <flexbox>
+        <item></item>
+    </flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start-ref.html
new file mode 100644
index 0000000000..d58cd0827d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start-ref.html
@@ -0,0 +1,33 @@
+<!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-flex">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+.margin {
+    margin-block-start: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox>
+        <item class="margin"></item>
+    </flexbox>
+    <flexbox>
+        <item></item>
+    </flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start.html
new file mode 100644
index 0000000000..15bdcdaebc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block-start.html
@@ -0,0 +1,41 @@
+<!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-flex">
+<link rel="match" href="flex-column-style-change-triggers-layout-block-start-ref.html">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+.initial-margin-trim {
+    margin-trim: block-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block-start: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox class="initial-margin-trim" id="to-no-margin-trim">
+        <item></item>
+    </flexbox>
+    <flexbox id="to-margin-trim">
+        <item></item>
+    </flexbox>
+</body>
+<script>
+document.body.offsetHeight;
+document.getElementById("to-no-margin-trim").style["margin-trim"] = "none";
+document.getElementById("to-margin-trim").style["margin-trim"] = "block-start";
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block.html
new file mode 100644
index 0000000000..505f62ff28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-column-style-change-triggers-layout-block.html
@@ -0,0 +1,41 @@
+<!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-flex">
+<link rel="match" href="flex-column-style-change-triggers-layout-block-ref.html">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    flex-direction: column;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+.initial-margin-trim {
+    margin-trim: block;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox class="initial-margin-trim" id="to-no-margin-trim">
+        <item></item>
+    </flexbox>
+    <flexbox id="to-margin-trim">
+        <item></item>
+    </flexbox>
+</body>
+<script>
+document.body.offsetHeight;
+document.getElementById("to-no-margin-trim").style["margin-trim"] = "none";
+document.getElementById("to-margin-trim").style["margin-trim"] = "block";
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only-ref.html
new file mode 100644
index 0000000000..9fb945d00c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-inline-end-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<meta name="assert" content="inline-end should trim only inline-end margins of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+    gap: 20px;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block: 10px;
+}
+item:first-child {
+    margin-inline-start: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only.html
new file mode 100644
index 0000000000..33451daf30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-end-trimmed-only.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-inline-end-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="flex-inline-end-trimmed-only-ref.html">
+<meta name="assert" content="inline-end should trim only inline-end margins of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+    margin-trim: inline-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only-ref.html
new file mode 100644
index 0000000000..f7dc9ec5c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-inline-start-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<meta name="assert" content="inline-start should trim only inline-start margin of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+    gap: 20px;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block: 10px;
+}
+item:last-child {
+    margin-inline-end: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only.html
new file mode 100644
index 0000000000..05cf112e66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-start-trimmed-only.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-inline-start-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="flex-inline-start-trimmed-only-ref.html">
+<meta name="assert" content="inline-start trims only inline-start margin of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+    margin-trim: inline-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only-ref.html
new file mode 100644
index 0000000000..e262b903df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-inline-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<meta name="assert" content="inline should trim only the inline margins of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+    gap: 20px;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only.html
new file mode 100644
index 0000000000..637dc485af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-inline-trimmed-only.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-inline-trimmed-only</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="flex-inline-trimmed-only-ref.html">
+<meta name="assert" content="inline will trim only the inline margins of flex items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    border: 1px black solid;
+    margin-trim: inline;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline-ref.html
new file mode 100644
index 0000000000..8eb29f5806
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-row-block-multiline</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<meta name="assert" content="block-start margins are trimmed for items on first flex line and block-end margins and trimmed for items on last flex line">
+<style>
+flexbox {
+    display: flex;
+    width: 100px;
+    flex-wrap: wrap;
+    gap: 20px 0px;
+    border: 1px solid black;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline.html
new file mode 100644
index 0000000000..c8fc788ca2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-block-multiline.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-row-block-multiline</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="flex-row-block-multiline-ref.html">
+<meta name="assert" content="block-start margins are trimmed for items on first flex line and block-end margins and trimmed for items on last flex line">
+<style>
+flexbox {
+    display: flex;
+    width: 100px;
+    flex-wrap: wrap;
+    margin-trim: block;
+    border: 1px solid black;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-grow.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-grow.html
new file mode 100644
index 0000000000..64395461cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-grow.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-row-grow</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="items should grow to take up the space made available by trimming margins">
+<style>
+flexbox {
+    display: flex;
+    width: 100px;
+    margin-trim: inline;
+}
+item {
+    display: block;
+    width: 50px;
+    height: 100px;
+    margin-inline: 25px;
+    flex: 1 0 auto;
+    background-color: green;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<flexbox>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-inline-multiline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-inline-multiline.html
new file mode 100644
index 0000000000..d563373d50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-inline-multiline.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-row-inline-multiline</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="inline-start margins are trimmed for items at start of flex line and inline-end margins are trimmed for items at end of flex line">
+<style>
+flexbox {
+    display: flex;
+    width: 100px;
+    flex-wrap: wrap;
+    margin-trim: inline;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+item:nth-child(odd) {
+    margin-inline-start: 25px;
+}
+item:nth-child(even) {
+    margin-inline-end: 25px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-orthogonal-item.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-orthogonal-item.html
new file mode 100644
index 0000000000..3facc7450c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-orthogonal-item.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-row-orthogonal-item</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="orthogonal items have correct margins trimmed according to the flexbox's writing mode">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    margin-trim: inline
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 100px;
+}
+.orthogonal {
+    writing-mode: vertical-rl;
+}
+item:first-child {
+    margin-block-end: 10px;
+}
+item:last-child {
+    margin-inline-end: 10px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<flexbox>
+<item class="orthogonal"></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-shrink.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-shrink.html
new file mode 100644
index 0000000000..172c946cb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-shrink.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-row-shrink</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="content should fill all available space when flex item is larger than the container and the margins are trimmed">
+<style>
+flexbox {
+    display: flex;
+    width: 100px;
+    margin-trim: inline;
+}
+item {
+    display: block;
+    background-color: green;
+    margin-inline: 25px;
+    flex: 0 1 auto;
+    width: 150px;
+    height: 100px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<flexbox>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end-ref.html
new file mode 100644
index 0000000000..cee1fbb55f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end-ref.html
@@ -0,0 +1,33 @@
+<!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-flex">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+.margin {
+    margin-inline-end: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox>
+        <item class="margin"></item>
+    </flexbox>
+    <flexbox>
+        <item></item>
+    </flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end.html
new file mode 100644
index 0000000000..c17e043548
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-end.html
@@ -0,0 +1,40 @@
+<!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-flex">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<link rel="match" href="flex-row-style-change-triggers-layout-inline-end-ref.html">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+.initial-margin-trim {
+    margin-trim: inline-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline-end: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox id="to-no-margin-trim" class="initial-margin-trim">
+        <item></item>
+    </flexbox>
+    <flexbox id="to-margin-trim">
+        <item></item>
+    </flexbox>
+</body>
+<script>
+document.body.offsetHeight;
+document.getElementById("to-no-margin-trim").style["margin-trim"] = "none";
+document.getElementById("to-margin-trim").style["margin-trim"] = "inline-end";
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-ref.html
new file mode 100644
index 0000000000..455a88f78e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-ref.html
@@ -0,0 +1,33 @@
+<!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-flex">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+.margin {
+    margin-inline: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox>
+        <item class="margin"></item>
+    </flexbox>
+    <flexbox>
+        <item></item>
+    </flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start-ref.html
new file mode 100644
index 0000000000..966bdf1be8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start-ref.html
@@ -0,0 +1,33 @@
+<!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-flex">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+.margin {
+    margin-inline-start: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox>
+        <item class="margin"></item>
+    </flexbox>
+    <flexbox>
+        <item></item>
+    </flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start.html
new file mode 100644
index 0000000000..87118ff698
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline-start.html
@@ -0,0 +1,40 @@
+<!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-flex">
+<link rel="match" href="flex-row-style-change-triggers-layout-inline-start-ref.html">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+.initial-margin-trim {
+    margin-trim: inline-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline-start: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox class="initial-margin-trim" id="to-no-margin-trim">
+        <item></item>
+    </flexbox>
+    <flexbox id="to-margin-trim">
+        <item></item>
+    </flexbox>
+</body>
+<script>
+document.body.offsetHeight;
+document.getElementById("to-no-margin-trim").style["margin-trim"] = "none";
+document.getElementById("to-margin-trim").style["margin-trim"] = "inline-start";
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline.html
new file mode 100644
index 0000000000..2e02643e58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-row-style-change-triggers-layout-inline.html
@@ -0,0 +1,40 @@
+<!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-flex">
+<link rel="match" href="flex-row-style-change-triggers-layout-inline-ref.html">
+<meta name="assert" content="Flex items react to change in their flexbox's margin-trim value">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    flex-wrap: wrap;
+    border: 1px solid black;
+}
+.initial-margin-trim {
+    margin-trim: inline;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+}
+</style>
+</head>
+<body>
+    <flexbox class="initial-margin-trim" id="to-no-margin-trim">
+        <item></item>
+    </flexbox>
+    <flexbox id="to-margin-trim">
+        <item></item>
+    </flexbox>
+</body>
+<script>
+document.body.offsetHeight;
+document.getElementById("to-no-margin-trim").style["margin-trim"] = "none";
+document.getElementById("to-margin-trim").style["margin-trim"] = "inline";
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins-ref.html
new file mode 100644
index 0000000000..aebc1045d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-trim-all-margins</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<meta name="assert" content="specifying all margin edges should trim all of them correctly for the appropriate items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    gap: 20px;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins.html b/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins.html
new file mode 100644
index 0000000000..1c2eda8aa0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/flex-trim-all-margins.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: flex-trim-all-margins</title>
+<link rel="author" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-flex">
+<link rel="match" href="flex-trim-all-margins-ref.html">
+<meta name="assert" content="specifying all margin edges should trim all of them correctly for the appropriate items">
+<style>
+flexbox {
+    display: flex;
+    width: min-content;
+    margin-trim: block-start block-end inline-start inline-end;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline: 10px;
+    margin-block: 10px;
+}
+</style>
+</head>
+<body>
+<flexbox>
+<item></item>
+<item></item>
+<item></item>
+</flexbox>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end-ref.html
new file mode 100644
index 0000000000..0ada645147
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-block-end</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-grid">
+<meta name="assert" content="block-end should trim block-end margins of items on last row">
+<style>
+grid {
+    display: inline-grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<grid>
+<item style="grid-row: span 2; height: auto;"></item>
+<item style="margin-block-end: 10px;"></item>
+<item></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end.html
new file mode 100644
index 0000000000..ffbc374756
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-end.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-block-end</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-grid">
+<link rel="match" href="grid-block-end-ref.html">
+<meta name="assert" content="block-end should trim block-end margins of items on last row">
+<style>
+grid {
+    display: inline-grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+    margin-trim: block-end;
+}
+
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block-end: 10px;
+}
+</style>
+</head>
+<body>
+<grid>
+<item style="grid-row: span 2; height: auto;"></item>
+<item></item>
+<item></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start-ref.html
new file mode 100644
index 0000000000..486b64c74a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-block-start</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-grid">
+<meta name="assert" content="block-start should trim block-start margins of items on first row">
+<style>
+grid {
+    display: inline-grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+.block-start-margin {
+    margin-block-start: 10px;
+}
+</style>
+</head>
+<body>
+<grid>
+<item></item>
+<item></item>
+<item class="block-start-margin"></item>
+<item class="block-start-margin"></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start.html
new file mode 100644
index 0000000000..21d5447253
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block-start.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-block-start</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-grid">
+<link rel="match" href="grid-block-start-ref.html">
+<meta name="assert" content="block-start should trim block-start margins of items on first row">
+<style>
+grid {
+    display: inline-grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+    margin-trim: block-start;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-block-start: 10px;
+}
+</style>
+</head>
+<body>
+<grid>
+<item></item>
+<item></item>
+<item></item>
+<item></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-block.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-block.html
new file mode 100644
index 0000000000..6a4c3bbc94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-block.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-block</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-grid">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="block should trim block-start margin of items on first row and block-end margins of items on last row">
+<style>
+grid {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    margin-trim: block;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+.block-start-margin {
+    margin-block-start: 10px;
+}
+.block-end-margin {
+    margin-block-end: 20px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<grid>
+<item class="block-start-margin"></item>
+<item class="block-start-margin"></item>
+<item class="block-end-margin"></item>
+<item class="block-end-margin"></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end-ref.html
new file mode 100644
index 0000000000..e51a97faf8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-inline-end</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-grid">
+<meta name="assert" content="inline-end should trim inline-end margins of items on last column">
+<style>
+grid {
+    display: inline-grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+    margin-trim: inline-end;
+}
+
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<grid>
+<item style="grid-column: span 2; width: auto;"></item>
+<item style="margin-inline-end: 10px;"></item>
+<item></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end.html
new file mode 100644
index 0000000000..3754a9b50a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-end.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-inline-end</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-grid">
+<link rel="match" href="grid-inline-end-ref.html">
+<meta name="assert" content="inline-end should trim inline-end margins of items on last column">
+<style>
+grid {
+    display: inline-grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+    margin-trim: inline-end;
+}
+
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline-end: 10px;
+}
+</style>
+</head>
+<body>
+<grid>
+<item style="grid-column: span 2; width: auto;"></item>
+<item></item>
+<item></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start-ref.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start-ref.html
new file mode 100644
index 0000000000..c35b1f5fe6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-inline-start</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-grid">
+<meta name="assert" content="inline-start should trim inline-start margins of items on first column">
+<style>
+grid {
+    display: inline-grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+    margin-trim: inline-start;
+}
+
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+.inline-start-margin {
+    margin-inline-start: 10px;
+}
+</style>
+</head>
+<body>
+<grid>
+<item></item>
+<item class="inline-start-margin"></item>
+<item></item>
+<item class="inline-start-margin"></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start.html
new file mode 100644
index 0000000000..e0f4c6d454
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline-start.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-inline-start</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-grid">
+<link rel="match" href="grid-inline-start-ref.html">
+<meta name="assert" content="inline-start should trim inline-start margins of items on first column">
+<style>
+grid {
+    display: inline-grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+    margin-trim: inline-start;
+}
+
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+    margin-inline-start: 10px;
+}
+</style>
+</head>
+<body>
+<grid>
+<item></item>
+<item></item>
+<item></item>
+<item></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-inline.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline.html
new file mode 100644
index 0000000000..1ac228296a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-inline.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-inline</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-grid">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="inline should trim inline-start margin of items on first column and inline-end margins of items on last column">
+<style>
+grid {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    margin-trim: inline;
+}
+item {
+    display: block;
+    background-color: green;
+    width: 50px;
+    height: 50px;
+}
+item:nth-child(odd) {
+    margin-inline-start: 10px;
+}
+item:nth-child(even) {
+    margin-inline-end: 20px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<grid>
+<item></item>
+<item></item>
+<item></item>
+<item></item>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks.html b/testing/web-platform/tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks.html
new file mode 100644
index 0000000000..15768ea7aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/margin-trim/grid-trim-ignores-collapsed-tracks.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>margin-trim: grid-trim-ignores-collapsed-tracks</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-grid">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="should ignore collapsed margins when determining if an edge should be trimmed">
+<style>
+grid {
+    display: inline-grid;
+    grid-template-rows: repeat(auto-fit, 250px);
+    grid-template-columns: repeat(auto-fit, 250px);
+    margin-trim: block-start inline-start;
+}
+item {
+    display: block;
+    background-color: green;
+    grid-column: 2;
+    grid-row: 2;
+    margin-inline-start: 30px;
+    margin-block-start: 50px;
+    width: 100px;
+    height: 100px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<grid>
+<item></item>
+</grid>
+</body>
+</html>
-- 
cgit v1.2.3