diff --git a/tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini b/tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini
index abf0d50aff3..4c1aa18e695 100644
--- a/tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini
+++ b/tests/wpt/metadata/FileAPI/url/url-with-fetch.any.js.ini
@@ -2,6 +2,9 @@
   [Revoke blob URL after creating Request, will fetch]
     expected: FAIL
 
+  [Revoke blob URL after calling fetch, fetch should succeed]
+    expected: FAIL
+
 
 [url-with-fetch.any.html]
   [Revoke blob URL after creating Request, will fetch]
diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
index 39991835803..8a7ba34a58a 100644
--- a/tests/wpt/metadata/MANIFEST.json
+++ b/tests/wpt/metadata/MANIFEST.json
@@ -319660,12 +319660,24 @@
      {}
     ]
    ],
+   "css/css-align/animation/column-gap-composition.html": [
+    [
+     "css/css-align/animation/column-gap-composition.html",
+     {}
+    ]
+   ],
    "css/css-align/animation/column-gap-interpolation.html": [
     [
      "css/css-align/animation/column-gap-interpolation.html",
      {}
     ]
    ],
+   "css/css-align/animation/row-gap-composition.html": [
+    [
+     "css/css-align/animation/row-gap-composition.html",
+     {}
+    ]
+   ],
    "css/css-align/animation/row-gap-interpolation.html": [
     [
      "css/css-align/animation/row-gap-interpolation.html",
@@ -321298,18 +321310,66 @@
      {}
     ]
    ],
+   "css/css-box/animation/margin-bottom-composition.html": [
+    [
+     "css/css-box/animation/margin-bottom-composition.html",
+     {}
+    ]
+   ],
    "css/css-box/animation/margin-interpolation.html": [
     [
      "css/css-box/animation/margin-interpolation.html",
      {}
     ]
    ],
+   "css/css-box/animation/margin-left-composition.html": [
+    [
+     "css/css-box/animation/margin-left-composition.html",
+     {}
+    ]
+   ],
+   "css/css-box/animation/margin-right-composition.html": [
+    [
+     "css/css-box/animation/margin-right-composition.html",
+     {}
+    ]
+   ],
+   "css/css-box/animation/margin-top-composition.html": [
+    [
+     "css/css-box/animation/margin-top-composition.html",
+     {}
+    ]
+   ],
+   "css/css-box/animation/padding-bottom-composition.html": [
+    [
+     "css/css-box/animation/padding-bottom-composition.html",
+     {}
+    ]
+   ],
    "css/css-box/animation/padding-interpolation.html": [
     [
      "css/css-box/animation/padding-interpolation.html",
      {}
     ]
    ],
+   "css/css-box/animation/padding-left-composition.html": [
+    [
+     "css/css-box/animation/padding-left-composition.html",
+     {}
+    ]
+   ],
+   "css/css-box/animation/padding-right-composition.html": [
+    [
+     "css/css-box/animation/padding-right-composition.html",
+     {}
+    ]
+   ],
+   "css/css-box/animation/padding-top-composition.html": [
+    [
+     "css/css-box/animation/padding-top-composition.html",
+     {}
+    ]
+   ],
    "css/css-box/box-chrome-crash-001.html": [
     [
      "css/css-box/box-chrome-crash-001.html",
@@ -328824,12 +328884,24 @@
      {}
     ]
    ],
+   "css/css-shapes/animation/shape-margin-composition.html": [
+    [
+     "css/css-shapes/animation/shape-margin-composition.html",
+     {}
+    ]
+   ],
    "css/css-shapes/animation/shape-margin-interpolation.html": [
     [
      "css/css-shapes/animation/shape-margin-interpolation.html",
      {}
     ]
    ],
+   "css/css-shapes/animation/shape-outside-composition.html": [
+    [
+     "css/css-shapes/animation/shape-outside-composition.html",
+     {}
+    ]
+   ],
    "css/css-shapes/animation/shape-outside-interpolation.html": [
     [
      "css/css-shapes/animation/shape-outside-interpolation.html",
@@ -329490,36 +329562,72 @@
      {}
     ]
    ],
+   "css/css-sizing/animation/height-composition.html": [
+    [
+     "css/css-sizing/animation/height-composition.html",
+     {}
+    ]
+   ],
    "css/css-sizing/animation/height-interpolation.html": [
     [
      "css/css-sizing/animation/height-interpolation.html",
      {}
     ]
    ],
+   "css/css-sizing/animation/max-height-composition.html": [
+    [
+     "css/css-sizing/animation/max-height-composition.html",
+     {}
+    ]
+   ],
    "css/css-sizing/animation/max-height-interpolation.html": [
     [
      "css/css-sizing/animation/max-height-interpolation.html",
      {}
     ]
    ],
+   "css/css-sizing/animation/max-width-composition.html": [
+    [
+     "css/css-sizing/animation/max-width-composition.html",
+     {}
+    ]
+   ],
    "css/css-sizing/animation/max-width-interpolation.html": [
     [
      "css/css-sizing/animation/max-width-interpolation.html",
      {}
     ]
    ],
+   "css/css-sizing/animation/min-height-composition.html": [
+    [
+     "css/css-sizing/animation/min-height-composition.html",
+     {}
+    ]
+   ],
    "css/css-sizing/animation/min-height-interpolation.html": [
     [
      "css/css-sizing/animation/min-height-interpolation.html",
      {}
     ]
    ],
+   "css/css-sizing/animation/min-width-composition.html": [
+    [
+     "css/css-sizing/animation/min-width-composition.html",
+     {}
+    ]
+   ],
    "css/css-sizing/animation/min-width-interpolation.html": [
     [
      "css/css-sizing/animation/min-width-interpolation.html",
      {}
     ]
    ],
+   "css/css-sizing/animation/width-composition.html": [
+    [
+     "css/css-sizing/animation/width-composition.html",
+     {}
+    ]
+   ],
    "css/css-sizing/animation/width-interpolation.html": [
     [
      "css/css-sizing/animation/width-interpolation.html",
@@ -335162,6 +335270,12 @@
      {}
     ]
    ],
+   "css/css-ui/animation/caret-color-composition.html": [
+    [
+     "css/css-ui/animation/caret-color-composition.html",
+     {}
+    ]
+   ],
    "css/css-ui/animation/caret-color-interpolation.html": [
     [
      "css/css-ui/animation/caret-color-interpolation.html",
@@ -335174,12 +335288,24 @@
      {}
     ]
    ],
+   "css/css-ui/animation/outline-offset-composition.html": [
+    [
+     "css/css-ui/animation/outline-offset-composition.html",
+     {}
+    ]
+   ],
    "css/css-ui/animation/outline-offset-interpolation.html": [
     [
      "css/css-ui/animation/outline-offset-interpolation.html",
      {}
     ]
    ],
+   "css/css-ui/animation/outline-width-composition.html": [
+    [
+     "css/css-ui/animation/outline-width-composition.html",
+     {}
+    ]
+   ],
    "css/css-ui/animation/outline-width-interpolation.html": [
     [
      "css/css-ui/animation/outline-width-interpolation.html",
@@ -374566,14 +374692,6 @@
      {}
     ]
    ],
-   "layout-instability/observe-layout-shift.html": [
-    [
-     "layout-instability/observe-layout-shift.html",
-     {
-      "testdriver": true
-     }
-    ]
-   ],
    "layout-instability/partially-clipped-visual-rect.html": [
     [
      "layout-instability/partially-clipped-visual-rect.html",
@@ -374596,6 +374714,14 @@
      }
     ]
    ],
+   "layout-instability/recent-input.html": [
+    [
+     "layout-instability/recent-input.html",
+     {
+      "testdriver": true
+     }
+    ]
+   ],
    "layout-instability/rtl-distance.html": [
     [
      "layout-instability/rtl-distance.html",
@@ -558293,10 +558419,18 @@
    "bd26585d9e639e3133a650c26d3f3cb93579e4ae",
    "support"
   ],
+  "css/css-align/animation/column-gap-composition.html": [
+   "0054206cca8b3448ad5d19e055e9f435a6e123b1",
+   "testharness"
+  ],
   "css/css-align/animation/column-gap-interpolation.html": [
    "c2f02d3ba87f4dee555be80caa45d6909e2495ae",
    "testharness"
   ],
+  "css/css-align/animation/row-gap-composition.html": [
+   "238253adf0cda81aca80d9345219ac8cd8e0df50",
+   "testharness"
+  ],
   "css/css-align/animation/row-gap-interpolation.html": [
    "1d85ffa3b07e8695e7b3a6ad82c02ae4da8d7b21",
    "testharness"
@@ -563165,14 +563299,46 @@
    "dde409360faf79a301c3ae3ea34a995d154d7bb4",
    "support"
   ],
+  "css/css-box/animation/margin-bottom-composition.html": [
+   "c95f8de23efe6e853dd4b05eed07af01c1d02af7",
+   "testharness"
+  ],
   "css/css-box/animation/margin-interpolation.html": [
    "088836cbbd18d0daf203de7dbacfb65733e35813",
    "testharness"
   ],
+  "css/css-box/animation/margin-left-composition.html": [
+   "8f3c646dfec219d30d2fefafdcb89c9e7cabb2b5",
+   "testharness"
+  ],
+  "css/css-box/animation/margin-right-composition.html": [
+   "c903303313bcc06ecf67f86efc55b21537e4af4c",
+   "testharness"
+  ],
+  "css/css-box/animation/margin-top-composition.html": [
+   "5f050bd6c7d9663025d53a04ecd2ec6352275fba",
+   "testharness"
+  ],
+  "css/css-box/animation/padding-bottom-composition.html": [
+   "855b5d3dc2948a9dc4ae391aaaa5caee06f88665",
+   "testharness"
+  ],
   "css/css-box/animation/padding-interpolation.html": [
    "3bf284117960fe78300e95140244d309f8f439a4",
    "testharness"
   ],
+  "css/css-box/animation/padding-left-composition.html": [
+   "417777ae253428cf6c852e6846960494a8ea53f7",
+   "testharness"
+  ],
+  "css/css-box/animation/padding-right-composition.html": [
+   "3c80849bb2bc68a68c098f42a1a29b9247e6a224",
+   "testharness"
+  ],
+  "css/css-box/animation/padding-top-composition.html": [
+   "b5083ae79b3db8a55f7af45373804d223cbbbc47",
+   "testharness"
+  ],
   "css/css-box/box-chrome-crash-001.html": [
    "351df37f1550ab40818b7f7f1c51191cfae5583e",
    "testharness"
@@ -594537,10 +594703,18 @@
    "edac744592f76704ba82b0c4a7e5a53c7db6ba79",
    "testharness"
   ],
+  "css/css-shapes/animation/shape-margin-composition.html": [
+   "395bad063f4c1bfb036d650d6b0319cd3d572fe2",
+   "testharness"
+  ],
   "css/css-shapes/animation/shape-margin-interpolation.html": [
    "48b3d0c460794b18261ce7a6beedf980d8335d36",
    "testharness"
   ],
+  "css/css-shapes/animation/shape-outside-composition.html": [
+   "0115148ec1adde1a32b1c1fb4b3c33ea8b56ece0",
+   "testharness"
+  ],
   "css/css-shapes/animation/shape-outside-interpolation.html": [
    "3380acdba00db8e9440b33c60275f6fd6340d345",
    "testharness"
@@ -595837,26 +596011,50 @@
    "086e654a8e039f259b5e828d024f808c2e95016b",
    "support"
   ],
+  "css/css-sizing/animation/height-composition.html": [
+   "094e247dcf22d9bd665b244993b6239265ee73bb",
+   "testharness"
+  ],
   "css/css-sizing/animation/height-interpolation.html": [
    "10ceed5b2cc0d5511b8020aeaced36be39834c3a",
    "testharness"
   ],
+  "css/css-sizing/animation/max-height-composition.html": [
+   "fb5b241d00865fe68c198a9fee88d932a8977f7e",
+   "testharness"
+  ],
   "css/css-sizing/animation/max-height-interpolation.html": [
    "c4cab0e1cf4534d3705801f3159b6b8724977b66",
    "testharness"
   ],
+  "css/css-sizing/animation/max-width-composition.html": [
+   "8b6d8b704c8771491419db0aa2a3c783a1dea2b3",
+   "testharness"
+  ],
   "css/css-sizing/animation/max-width-interpolation.html": [
    "111199baa7ed89c6023d43b56313413cc5aeeeeb",
    "testharness"
   ],
+  "css/css-sizing/animation/min-height-composition.html": [
+   "1e92b0ec2fd664e7b3dd6dc1cd8310c7b9526e7c",
+   "testharness"
+  ],
   "css/css-sizing/animation/min-height-interpolation.html": [
    "6fd5b4e2f5366f6b18678f60b982e82905558e51",
    "testharness"
   ],
+  "css/css-sizing/animation/min-width-composition.html": [
+   "e8bd41030bbd8a273f7e7c45f5f445d706d044eb",
+   "testharness"
+  ],
   "css/css-sizing/animation/min-width-interpolation.html": [
    "d11fb3d5cb139f870d1eb40618bf547176f109b1",
    "testharness"
   ],
+  "css/css-sizing/animation/width-composition.html": [
+   "bfe45cb31471d0c8623dbb9e84000bc1208bb76f",
+   "testharness"
+  ],
   "css/css-sizing/animation/width-interpolation.html": [
    "d165c994b5de6fe1561498aa04c075196357f5f6",
    "testharness"
@@ -612309,6 +612507,10 @@
    "7ce4b54a22c78576dc2318ebd651dfd1cce374ad",
    "support"
   ],
+  "css/css-ui/animation/caret-color-composition.html": [
+   "6c69578677896e2463331deba85731e13fd94a25",
+   "testharness"
+  ],
   "css/css-ui/animation/caret-color-interpolation.html": [
    "b3a4e30130843163d76a0a24196c66853bd4160a",
    "testharness"
@@ -612317,10 +612519,18 @@
    "f49aa79a382c8e5a8f4c9d834f5f12aea551818f",
    "testharness"
   ],
+  "css/css-ui/animation/outline-offset-composition.html": [
+   "984a63fdc34274fab133308dbb0b9a5c2eca03b9",
+   "testharness"
+  ],
   "css/css-ui/animation/outline-offset-interpolation.html": [
    "46c1c51c6eefaa490fc9d55e4cadfb0cb7804337",
    "testharness"
   ],
+  "css/css-ui/animation/outline-width-composition.html": [
+   "b770feda61ca6c74467c597749a053d3569af012",
+   "testharness"
+  ],
   "css/css-ui/animation/outline-width-interpolation.html": [
    "c024c7cf6a08e0f6e02ccb451ca04d0b4a8c9251",
    "testharness"
@@ -635478,15 +635688,15 @@
    "reftest"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py": [
-   "dd823c78a68d555e3a235cd917edd09297f7c34e",
+   "12fb6a3ad850b357808c47a90a818dd73be2de5b",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py": [
-   "62363a207bd15c3d8733ecd496e73e3f61eb5744",
+   "527959068762f5a7185bf11bdc2536054d2db258",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py": [
-   "b5c59e6f50185f4a63badfb860375959f3af4a02",
+   "fdbaec052e4e4bdfdcad1e9fc9731bf26a518509",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-010-tests.sh": [
@@ -635494,7 +635704,7 @@
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py": [
-   "34e047ab003e0c515cf03e448796aaa5b23a6df7",
+   "1b1d6fc16f24b91eef28cd99c428f426cc61c349",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/text-decoration-propagation-01-ref.html": [
@@ -636538,7 +636748,7 @@
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py": [
-   "75168420287b275af5782891adf73eb4cf7ca2e6",
+   "6e13861374a6f6d5def71d7c2c1a59fbd57b2895",
    "support"
   ],
   "css/vendor-imports/mozilla/mozilla-central-reftests/text3/text-align-match-parent-01.html": [
@@ -671178,11 +671388,11 @@
    "testharness"
   ],
   "layout-instability/buffer-layout-shift.html": [
-   "0cfce2f7124226cf4256284c1238ba1ef024c42b",
+   "b6a33f579b4009d1497fdc104c07633793d53f01",
    "testharness"
   ],
   "layout-instability/buffered-flag.html": [
-   "dabc8068931ff3b15eb4b80481ed2102a7725a62",
+   "cd1260e3613f58c191688ab2f492647b0cc72c0c",
    "testharness"
   ],
   "layout-instability/clip-negative-bottom-margin.html": [
@@ -671213,10 +671423,6 @@
    "36475d4c826c11807e9c0a7fbf4457c33c92c2c0",
    "testharness"
   ],
-  "layout-instability/observe-layout-shift.html": [
-   "1c35fe2aa234c96fce8798e6a1c35362f418e6f1",
-   "testharness"
-  ],
   "layout-instability/partially-clipped-visual-rect.html": [
    "3b18b98dd93312c37b9e2f25918df50266a09243",
    "testharness"
@@ -671229,6 +671435,10 @@
    "e2e7a911dc043bb21cebfd4a5b625795f3523a14",
    "testharness"
   ],
+  "layout-instability/recent-input.html": [
+   "a4fa0d8b0d92a83984034926de30958b840c1028",
+   "testharness"
+  ],
   "layout-instability/resources/slow-image.py": [
    "ee7988c551f6429eea2b929af083ad30cbd5c73d",
    "support"
@@ -671266,7 +671476,7 @@
    "testharness"
   ],
   "layout-instability/toJSON.html": [
-   "3d39d623e13314b183463fa1c365df3a7b725243",
+   "374a7de0cd1c4d5d5b089b7d026c8eb5709e91f1",
    "testharness"
   ],
   "layout-instability/transform.html": [
diff --git a/tests/wpt/metadata/css/css-align/animation/column-gap-composition.html.ini b/tests/wpt/metadata/css/css-align/animation/column-gap-composition.html.ini
new file mode 100644
index 00000000000..efdef9e8059
--- /dev/null
+++ b/tests/wpt/metadata/css/css-align/animation/column-gap-composition.html.ini
@@ -0,0 +1,61 @@
+[column-gap-composition.html]
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (0.5) should be [normal\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (0) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (-0.3) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (1) should be [normal\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [100px\] from add [100px\] to add [normal\] at (1.5) should be [normal\]]
+    expected: FAIL
+
+  [Compositing: property <column-gap> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/css/css-align/animation/row-gap-composition.html.ini b/tests/wpt/metadata/css/css-align/animation/row-gap-composition.html.ini
new file mode 100644
index 00000000000..ea7c97b7b94
--- /dev/null
+++ b/tests/wpt/metadata/css/css-align/animation/row-gap-composition.html.ini
@@ -0,0 +1,61 @@
+[row-gap-composition.html]
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (1) should be [normal\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (-0.3) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (0) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (0.5) should be [normal\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [100px\] to add [normal\] at (1.5) should be [normal\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
+    expected: FAIL
+
+  [Compositing: property <row-gap> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/css/css-ui/animation/caret-color-composition.html.ini b/tests/wpt/metadata/css/css-ui/animation/caret-color-composition.html.ini
new file mode 100644
index 00000000000..ae82fda3148
--- /dev/null
+++ b/tests/wpt/metadata/css/css-ui/animation/caret-color-composition.html.ini
@@ -0,0 +1,31 @@
+[caret-color-composition.html]
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (-0.3) should be [rgb(120, 120, 120)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1.5) should be [rgb(250, 250, 250)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (-0.3) should be [rgb(70, 70, 70)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0) should be [rgb(100, 100, 100)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1) should be [rgb(200, 200, 200)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0.5) should be [rgb(200, 200, 200)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [auto\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0.5) should be [rgb(150, 150, 150)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1.5) should be [rgb(255, 255, 255)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (0) should be [rgb(150, 150, 150)\]]
+    expected: FAIL
+
+  [Compositing: property <caret-color> underlying [rgb(50, 50, 50)\] from add [rgb(100, 100, 100)\] to add [rgb(200, 200, 200)\] at (1) should be [rgb(250, 250, 250)\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/css/css-ui/animation/outline-offset-composition.html.ini b/tests/wpt/metadata/css/css-ui/animation/outline-offset-composition.html.ini
new file mode 100644
index 00000000000..ebb722b54a0
--- /dev/null
+++ b/tests/wpt/metadata/css/css-ui/animation/outline-offset-composition.html.ini
@@ -0,0 +1,61 @@
+[outline-offset-composition.html]
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (1.5) should be [calc(-50px + 40em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (0) should be [calc(100px + 10em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (0.5) should be [calc(50px + 20em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (-0.3) should be [calc(130px + 4em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [10em\] from add [100px\] to add [20em\] at (1) should be [30em\]]
+    expected: FAIL
+
+  [Compositing: property <outline-offset> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/css/css-ui/animation/outline-width-composition.html.ini b/tests/wpt/metadata/css/css-ui/animation/outline-width-composition.html.ini
new file mode 100644
index 00000000000..307f72aadda
--- /dev/null
+++ b/tests/wpt/metadata/css/css-ui/animation/outline-width-composition.html.ini
@@ -0,0 +1,79 @@
+[outline-width-composition.html]
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (-0.5) should be [114px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (1) should be [102px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (0) should be [calc(100px + 10em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (0) should be [110px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (-0.3) should be [19px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (1) should be [30em\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (1.5) should be [1px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (0) should be [150px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (2) should be [0px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (0.5) should be [calc(50px + 20em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (1) should be [250px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (1) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (0.5) should be [106px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (-0.3) should be [135px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (1.5) should be [225px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (0.5) should be [200px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (0.5) should be [11px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (1) should be [6px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (1.5) should be [calc(-50px + 40em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (1.5) should be [300px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [100px\] from add [10px\] to add [2px\] at (1.5) should be [98px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [thick\] from add [11px\] to add [thin\] at (0) should be [16px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [10em\] from add [100px\] to add [20em\] at (-0.3) should be [calc(130px + 4em)\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to add [200px\] at (-0.3) should be [120px\]]
+    expected: FAIL
+
+  [Compositing: property <outline-width> underlying [50px\] from add [100px\] to replace [200px\] at (0.5) should be [175px\]]
+    expected: FAIL
+
diff --git a/tests/wpt/metadata/css/cssom-view/CaretPosition-001.html.ini b/tests/wpt/metadata/css/cssom-view/CaretPosition-001.html.ini
deleted file mode 100644
index 4c79907309b..00000000000
--- a/tests/wpt/metadata/css/cssom-view/CaretPosition-001.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[CaretPosition-001.html]
-  [Element at (400, 100)]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/fetch/content-type/response.window.js.ini b/tests/wpt/metadata/fetch/content-type/response.window.js.ini
index 5db729456de..35c569d8e34 100644
--- a/tests/wpt/metadata/fetch/content-type/response.window.js.ini
+++ b/tests/wpt/metadata/fetch/content-type/response.window.js.ini
@@ -309,18 +309,21 @@
   [<iframe>: separate response Content-Type: */* text/html]
     expected: FAIL
 
-  [<iframe>: combined response Content-Type: text/html;x=" text/plain]
+  [<iframe>: combined response Content-Type: text/html;" text/plain]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/html;x=" text/plain]
+  [<iframe>: combined response Content-Type: */* text/html]
     expected: FAIL
 
-  [<iframe>: combined response Content-Type: text/html */*]
+  [<iframe>: separate response Content-Type: text/html;" text/plain]
     expected: FAIL
 
-  [<iframe>: combined response Content-Type: text/html;" \\" text/plain]
+  [<iframe>: separate response Content-Type: text/html */*;charset=gbk]
     expected: FAIL
 
-  [<iframe>: separate response Content-Type: text/html;" \\" text/plain]
+  [<iframe>: separate response Content-Type: text/plain */*]
+    expected: FAIL
+
+  [<iframe>: combined response Content-Type: text/html */*;charset=gbk]
     expected: FAIL
 
diff --git a/tests/wpt/metadata/fetch/content-type/script.window.js.ini b/tests/wpt/metadata/fetch/content-type/script.window.js.ini
index 2d5faa72ac7..d2df9b78483 100644
--- a/tests/wpt/metadata/fetch/content-type/script.window.js.ini
+++ b/tests/wpt/metadata/fetch/content-type/script.window.js.ini
@@ -53,6 +53,6 @@
   [combined text/javascript ]
     expected: FAIL
 
-  [separate text/javascript;charset=windows-1252 error text/javascript]
+  [separate text/javascript x/x]
     expected: FAIL
 
diff --git a/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini b/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini
index b7052af5b5c..ecd755157c7 100644
--- a/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini
+++ b/tests/wpt/metadata/fetch/nosniff/parsing-nosniff.window.js.ini
@@ -11,6 +11,9 @@
   [X-Content-Type-Options%3A%20nosniff%0C]
     expected: FAIL
 
-  [X-Content-Type-Options%3A%0D%0AX-Content-Type-Options%3A%20nosniff]
+  [X-Content-Type-Options%3A%20%40%23%24%23%25%25%26%5E%26%5E*()()11!%2Cnosniff]
+    expected: FAIL
+
+  [X-Content-Type-Options%3A%20%2Cnosniff]
     expected: FAIL
 
diff --git a/tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini b/tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini
index 6bd06899fdd..80ebd73cb00 100644
--- a/tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini
+++ b/tests/wpt/metadata/fetch/security/embedded-credentials.tentative.sub.html.ini
@@ -8,7 +8,7 @@
     expected: FAIL
 
   [Embedded credentials are treated as network errors in new windows.]
-    expected: FAIL
+    expected: TIMEOUT
 
   [Embedded credentials matching the top-level are treated as network errors for cross-origin URLs.]
     expected: TIMEOUT
diff --git a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_1.html.ini b/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_1.html.ini
deleted file mode 100644
index 87b07c3e670..00000000000
--- a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_1.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[traverse_the_history_1.html]
-  [Multiple history traversals from the same task]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini b/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
deleted file mode 100644
index 385376c7321..00000000000
--- a/tests/wpt/metadata/html/browsers/history/the-history-interface/traverse_the_history_4.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[traverse_the_history_4.html]
-  [Multiple history traversals, last would be aborted]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini b/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini
index 71edac2c5ed..e440b1e38c6 100644
--- a/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini
+++ b/tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini
@@ -1,6 +1,6 @@
 [iframe_sandbox_popups_nonescaping-3.html]
   type: testharness
-  expected: CRASH
+  expected: TIMEOUT
   [Check that popups from a sandboxed iframe do not escape the sandbox]
     expected: NOTRUN
 
diff --git a/tests/wpt/metadata/html/semantics/scripting-1/the-script-element/execution-timing/077.html.ini b/tests/wpt/metadata/html/semantics/scripting-1/the-script-element/execution-timing/077.html.ini
deleted file mode 100644
index bcd2fd0eab8..00000000000
--- a/tests/wpt/metadata/html/semantics/scripting-1/the-script-element/execution-timing/077.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[077.html]
-  [ adding several types of scripts through the DOM and removing some of them confuses scheduler ]
-    expected: FAIL
-
diff --git a/tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini b/tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini
index 66bd350083b..a56bad443a2 100644
--- a/tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini
+++ b/tests/wpt/metadata/webaudio/the-audio-api/the-analysernode-interface/realtimeanalyser-fft-scaling.html.ini
@@ -1,4 +1,5 @@
 [realtimeanalyser-fft-scaling.html]
+  expected: TIMEOUT
   [X 2048-point FFT peak position is not equal to 64. Got 0.]
     expected: FAIL
 
diff --git a/tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini b/tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini
deleted file mode 100644
index 80f9a4f15b8..00000000000
--- a/tests/wpt/metadata/workers/constructors/Worker/Worker-constructor.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[Worker-constructor.html]
-  expected: ERROR
diff --git a/tests/wpt/web-platform-tests/css/css-align/animation/column-gap-composition.html b/tests/wpt/web-platform-tests/css/css-align/animation/column-gap-composition.html
new file mode 100644
index 00000000000..0054206cca8
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-align/animation/column-gap-composition.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>column-gap composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap">
+<meta name="assert" content="column-gap supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'column-gap',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'column-gap',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'column-gap',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'column-gap',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'normal',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'normal'},
+  {at: 1, expect: 'normal'},
+  {at: 1.5, expect: 'normal'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-align/animation/row-gap-composition.html b/tests/wpt/web-platform-tests/css/css-align/animation/row-gap-composition.html
new file mode 100644
index 00000000000..238253adf0c
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-align/animation/row-gap-composition.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>row-gap composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap">
+<meta name="assert" content="row-gap supports animation by computed value type">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'row-gap',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'row-gap',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'row-gap',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'row-gap',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'normal',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'normal'},
+  {at: 1, expect: 'normal'},
+  {at: 1.5, expect: 'normal'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/margin-bottom-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/margin-bottom-composition.html
new file mode 100644
index 00000000000..c95f8de23ef
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-box/animation/margin-bottom-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>margin-bottom composition</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
+<meta name="assert" content="margin-bottom supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'margin-bottom',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'margin-bottom',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'margin-bottom',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'margin-bottom',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'margin-bottom',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/margin-left-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/margin-left-composition.html
new file mode 100644
index 00000000000..8f3c646dfec
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-box/animation/margin-left-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>margin-left composition</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
+<meta name="assert" content="margin-left supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'margin-left',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'margin-left',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'margin-left',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'margin-left',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'margin-left',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/margin-right-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/margin-right-composition.html
new file mode 100644
index 00000000000..c903303313b
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-box/animation/margin-right-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>margin-right composition</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
+<meta name="assert" content="margin-right supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'margin-right',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'margin-right',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'margin-right',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'margin-right',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'margin-right',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/margin-top-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/margin-top-composition.html
new file mode 100644
index 00000000000..5f050bd6c7d
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-box/animation/margin-top-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>margin-top composition</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
+<meta name="assert" content="margin-top supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'margin-top',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'margin-top',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'margin-top',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'margin-top',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'margin-top',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/padding-bottom-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/padding-bottom-composition.html
new file mode 100644
index 00000000000..855b5d3dc29
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-box/animation/padding-bottom-composition.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>padding-bottom composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
+<meta name="assert" content="padding-bottom supports animation as a list of lengths">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'padding-bottom',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'padding-bottom',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'padding-bottom',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'padding-bottom',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/padding-left-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/padding-left-composition.html
new file mode 100644
index 00000000000..417777ae253
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-box/animation/padding-left-composition.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>padding-left composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
+<meta name="assert" content="padding-left supports animation as a list of lengths">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'padding-left',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'padding-left',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'padding-left',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'padding-left',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/padding-right-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/padding-right-composition.html
new file mode 100644
index 00000000000..3c80849bb2b
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-box/animation/padding-right-composition.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>padding-right composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
+<meta name="assert" content="padding-right supports animation as a list of lengths">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'padding-right',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'padding-right',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'padding-right',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'padding-right',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-box/animation/padding-top-composition.html b/tests/wpt/web-platform-tests/css/css-box/animation/padding-top-composition.html
new file mode 100644
index 00000000000..b5083ae79b3
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-box/animation/padding-top-composition.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>padding-top composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-box-3/#padding-shorthand">
+<meta name="assert" content="padding-top supports animation as a list of lengths">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'padding-top',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'padding-top',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'padding-top',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'padding-top',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-margin-composition.html b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-margin-composition.html
new file mode 100644
index 00000000000..395bad063f4
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-margin-composition.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>shape-margin composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property">
+<meta name="assert" content="shape-margin supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'shape-margin',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'shape-margin',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'shape-margin',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'shape-margin',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html
new file mode 100644
index 00000000000..0115148ec1a
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-shapes/animation/shape-outside-composition.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>shape-outside composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property">
+<meta name="assert" content="shape-outside supports animation as <basic-shape> or discrete">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'shape-outside',
+  underlying: 'circle(100px at 25px 25%)',
+  addFrom: 'circle(10px at 25px 75%)',
+  addTo: 'circle(50px at 50px center)',
+}, [
+  {at: -0.3, expect: 'circle(98px at 42.5px 107.5%)'},
+  {at: 0, expect: 'circle(110px at 50px 100%)'},
+  {at: 0.3, expect: 'circle(122px at 57.5px 92.5%)'},
+  {at: 0.6, expect: 'circle(134px at 65px 85%)'},
+  {at: 1, expect: 'circle(150px at 75px 75%)'},
+  {at: 1.5, expect: 'circle(170px at 87.5px 62.5%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'circle(100px at 20px 20%)',
+  addFrom: 'circle(50px at 50px 50%)',
+  replaceTo: 'circle(50% at 150px 150%)',
+}, [
+  {at: -0.3, expect: 'circle(calc(195px + -15%) at 46px 46%)'},
+  {at: 0, expect: 'circle(calc(150px + 0%) at 70px 70%)'},
+  {at: 0.3, expect: 'circle(calc(105px + 15%) at 94px 94%)'},
+  {at: 0.6, expect: 'circle(calc(60px + 30%) at 118px 118%)'},
+  {at: 1, expect: 'circle(50% at 150px 150%)'},
+  {at: 1.5, expect: 'circle(calc(-75px + 75%) at 190px 190%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'circle(farthest-side at 25px 75%)',
+  addFrom: 'circle(farthest-side at 25px 75%)',
+  addTo: 'circle(farthest-side at 50px center)',
+}, [
+  {at: 0.25, expect: 'circle(farthest-side at 25px 75%)'},
+  {at: 0.75, expect: 'circle(farthest-side at 50px 50%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'circle(50px at 10px 20px)',
+  addFrom: 'circle(50px at 10px 20px)',
+  addTo: 'circle(farthest-side at 30px 40px)',
+}, [
+  {at: 0.25, expect: 'circle(100px at 20px 40px)'},
+  {at: 0.75, expect: 'circle(farthest-side at 30px 40px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'ellipse(10px 20px at 30px 40px)',
+  addFrom: 'ellipse(40px 30px at 20px 10px)',
+  addTo: 'ellipse(140px 130px at 120px 110px)',
+}, [
+  {at: -0.3, expect: 'ellipse(20px 20px at 20px 20px)'},
+  {at: 0, expect: 'ellipse(50px 50px at 50px 50px)'},
+  {at: 0.3, expect: 'ellipse(80px 80px at 80px 80px)'},
+  {at: 0.6, expect: 'ellipse(110px 110px at 110px 110px)'},
+  {at: 1, expect: 'ellipse(150px 150px at 150px 150px)'},
+  {at: 1.5, expect: 'ellipse(200px 200px at 200px 200px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'ellipse(10px 20px at 30px 40px)',
+  replaceFrom: 'ellipse(40px 30px at 20px 10px)',
+  addTo: 'ellipse(40px 30px at 20px 10px)',
+}, [
+  {at: -0.3, expect: 'ellipse(37px 24px at 11px -2px)'},
+  {at: 0, expect: 'ellipse(40px 30px at 20px 10px)'},
+  {at: 0.3, expect: 'ellipse(43px 36px at 29px 22px)'},
+  {at: 0.6, expect: 'ellipse(46px 42px at 38px 34px)'},
+  {at: 1, expect: 'ellipse(50px 50px at 50px 50px)'},
+  {at: 1.5, expect: 'ellipse(55px 60px at 65px 70px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'ellipse(25px 75%)',
+  addFrom: 'ellipse()',
+  addTo: 'ellipse(closest-side farthest-side)',
+}, [
+  {at: 0.25, expect: 'ellipse(at 50% 50%)'},
+  {at: 0.75, expect: 'ellipse(closest-side farthest-side at 50% 50%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'inset(20px)',
+  addFrom: 'inset(20px)',
+  addTo: 'inset(40%)',
+}, [
+  {at: -0.3, expect: 'inset(calc(46px + -12%))'},
+  {at: 0, expect: 'inset(calc(40px + 0%))'},
+  {at: 0.3, expect: 'inset(calc(34px + 12%))'},
+  {at: 0.6, expect: 'inset(calc(28px + 24%))'},
+  {at: 1, expect: 'inset(calc(20px + 40%))'},
+  {at: 1.5, expect: 'inset(calc(10px + 60%))'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)',
+  addFrom: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)',
+  replaceTo: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)',
+}, [
+  {at: -0.3, expect: 'inset(-28px -26px -24px -22px round 0px 10px 30px 50px / 70px 90px 110px 130px)'},
+  {at: 0, expect: 'inset(2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px)'},
+  {at: 0.25, expect: 'inset(27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px)'},
+  {at: 0.75, expect: 'inset(77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px)'},
+  {at: 1, expect: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)'},
+  {at: 1.5, expect: 'inset(152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'inset(1px 2px round 100px 200px)',
+  addFrom: 'inset(1px 2px round 100px 200px)',
+  addTo: 'inset(101px 102px 101px 102px)',
+}, [
+  {at: -0.3, expect: 'inset(-28px -26px round 230px 460px)'},
+  {at: 0, expect: 'inset(2px 4px round 200px 400px)'},
+  {at: 0.3, expect: 'inset(32px 34px round 170px 340px)'},
+  {at: 0.6, expect: 'inset(62px 64px round 140px 280px)'},
+  {at: 1, expect: 'inset(102px 104px round 100px 200px)'},
+  {at: 1.5, expect: 'inset(152px 154px round 50px 100px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'polygon(10px 20%, 30px 40%)',
+  addFrom: 'polygon(10px 20%, 30px 40%)',
+  addTo: 'polygon(110px 120%, 130px 140%)',
+}, [
+  {at: -0.3, expect: 'polygon(-10px 10%, 30px 50%)'},
+  {at: 0, expect: 'polygon(20px 40%, 60px 80%)'},
+  {at: 0.3, expect: 'polygon(50px 70%, 90px 110%)'},
+  {at: 0.6, expect: 'polygon(80px 100%, 120px 140%)'},
+  {at: 1, expect: 'polygon(120px 140%, 160px 180%)'},
+  {at: 1.5, expect: 'polygon(170px 190%, 210px 230%)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'polygon(evenodd, 10px 20px)',
+  addFrom: 'polygon(evenodd, 10px 20px)',
+  addTo: 'polygon(evenodd, 110px 120px)',
+}, [
+  {at: -0.3, expect: 'polygon(evenodd, -10px 10px)'},
+  {at: 0, expect: 'polygon(evenodd, 20px 40px)'},
+  {at: 0.3, expect: 'polygon(evenodd, 50px 70px)'},
+  {at: 0.6, expect: 'polygon(evenodd, 80px 100px)'},
+  {at: 1, expect: 'polygon(evenodd, 120px 140px)'},
+  {at: 1.5, expect: 'polygon(evenodd, 170px 190px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'polygon(evenodd, 10px 20px)',
+  addFrom: 'polygon(evenodd, 10px 20px)',
+  addTo: 'polygon(nonzero, 30px 40px)',
+}, [
+  {at: 0.25, expect: 'polygon(evenodd, 20px 40px)'},
+  {at: 0.75, expect: 'polygon(30px 40px)'},
+]);
+
+test_composition({
+  property: 'shape-outside',
+  underlying: 'polygon(10px 20px, 30px 40px)',
+  addFrom: 'polygon(10px 20px, 30px 40px)',
+  addTo: 'polygon(30px 40px)',
+}, [
+  {at: 0.25, expect: 'polygon(20px 40px, 60px 80px)'},
+  {at: 0.75, expect: 'polygon(30px 40px)'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/height-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/height-composition.html
new file mode 100644
index 00000000000..094e247dcf2
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/height-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>height composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-height">
+<meta name="assert" content="height supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'height',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'height',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'height',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'height',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'height',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/max-height-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/max-height-composition.html
new file mode 100644
index 00000000000..fb5b241d008
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/max-height-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>max-height composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height">
+<meta name="assert" content="max-height supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'max-height',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'max-height',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'max-height',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'max-height',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'max-height',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'none',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'none'},
+  {at: 1, expect: 'none'},
+  {at: 1.5, expect: 'none'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/max-width-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/max-width-composition.html
new file mode 100644
index 00000000000..8b6d8b704c8
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/max-width-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>max-width composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-width">
+<meta name="assert" content="max-width supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'max-width',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'max-width',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'max-width',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'max-width',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'max-width',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'none',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'none'},
+  {at: 1, expect: 'none'},
+  {at: 1.5, expect: 'none'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/min-height-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/min-height-composition.html
new file mode 100644
index 00000000000..1e92b0ec2fd
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/min-height-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>min-height composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-height">
+<meta name="assert" content="min-height supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'min-height',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'min-height',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'min-height',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'min-height',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'min-height',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/min-width-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/min-width-composition.html
new file mode 100644
index 00000000000..e8bd41030bb
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/min-width-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>min-width composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width">
+<meta name="assert" content="min-width supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'min-width',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'min-width',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'min-width',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'min-width',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'min-width',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-sizing/animation/width-composition.html b/tests/wpt/web-platform-tests/css/css-sizing/animation/width-composition.html
new file mode 100644
index 00000000000..bfe45cb3147
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-sizing/animation/width-composition.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>width composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width">
+<meta name="assert" content="width supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'width',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'width',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'width',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'width',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'width',
+  underlying: '100px',
+  addFrom: '100px',
+  addTo: 'auto',
+}, [
+  {at: -0.3, expect: '200px'},
+  {at: 0, expect: '200px'},
+  {at: 0.5, expect: 'auto'},
+  {at: 1, expect: 'auto'},
+  {at: 1.5, expect: 'auto'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-ui/animation/caret-color-composition.html b/tests/wpt/web-platform-tests/css/css-ui/animation/caret-color-composition.html
new file mode 100644
index 00000000000..6c695786778
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-ui/animation/caret-color-composition.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>caret-color composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-3/#propdef-caret-color">
+<meta name="assert" content="caret-color supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<style>
+.target {
+  display: inline-block;
+  font-size: 60pt;
+  color: rgb(50, 50, 50);
+}
+
+.expected {
+  margin-right: 15px;
+}
+</style>
+<body contenteditable>
+<template id="target-template">T</template>
+<script src="../interpolation/resources/interpolation-test.js"></script>
+<script>
+test_composition({
+  property: 'caret-color',
+  underlying: 'rgb(50, 50, 50)',
+  addFrom: 'rgb(100, 100, 100)',
+  addTo: 'rgb(200, 200, 200)',
+}, [
+  {at: -0.3, expect: 'rgb(120, 120, 120)'},
+  {at: 0, expect: 'rgb(150, 150, 150)'},
+  {at: 0.5, expect: 'rgb(200, 200, 200)'},
+  {at: 1, expect: 'rgb(250, 250, 250)'},
+  {at: 1.5, expect: 'rgb(255, 255, 255)'},
+]);
+
+test_composition({
+  property: 'caret-color',
+  underlying: 'auto',
+  addFrom: 'rgb(100, 100, 100)',
+  addTo: 'rgb(200, 200, 200)',
+}, [
+  {at: -0.3, expect: 'rgb(70, 70, 70)'},
+  {at: 0, expect: 'rgb(100, 100, 100)'},
+  {at: 0.5, expect: 'rgb(150, 150, 150)'},
+  {at: 1, expect: 'rgb(200, 200, 200)'},
+  {at: 1.5, expect: 'rgb(250, 250, 250)'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-ui/animation/outline-offset-composition.html b/tests/wpt/web-platform-tests/css/css-ui/animation/outline-offset-composition.html
new file mode 100644
index 00000000000..984a63fdc34
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-ui/animation/outline-offset-composition.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>outline-offset composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-offset">
+<meta name="assert" content="outline-offset supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'outline-offset',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'outline-offset',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'outline-offset',
+  underlying: '10em',
+  addFrom: '100px',
+  addTo: '20em',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4em)'},
+  {at: 0, expect: 'calc(100px + 10em)'},
+  {at: 0.5, expect: 'calc(50px + 20em)'},
+  {at: 1, expect: '30em'},
+  {at: 1.5, expect: 'calc(-50px + 40em)'},
+]);
+
+test_composition({
+  property: 'outline-offset',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-ui/animation/outline-width-composition.html b/tests/wpt/web-platform-tests/css/css-ui/animation/outline-width-composition.html
new file mode 100644
index 00000000000..b770feda61c
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-ui/animation/outline-width-composition.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>outline-width composition</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-width">
+<meta name="assert" content="outline-width supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<style>
+.target {
+  /* If outline-style is none (the default), the computed style of outline-width is 0. */
+  outline-style: solid;
+}
+</style>
+<script>
+test_composition({
+  property: 'outline-width',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'outline-width',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'}, // Value clamping should happen after composition.
+]);
+
+test_composition({
+  property: 'outline-width',
+  underlying: '10em',
+  addFrom: '100px',
+  addTo: '20em',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4em)'},
+  {at: 0, expect: 'calc(100px + 10em)'},
+  {at: 0.5, expect: 'calc(50px + 20em)'},
+  {at: 1, expect: '30em'},
+  {at: 1.5, expect: 'calc(-50px + 40em)'},
+]);
+
+test_composition({
+  property: 'outline-width',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+
+test_composition({
+  property: 'outline-width',
+  underlying: 'thick', // 5px
+  addFrom: '11px',
+  addTo: 'thin', // 1px
+}, [
+  {at: -0.3, expect: '19px'},
+  {at: 0, expect: '16px'},
+  {at: 0.5, expect: '11px'},
+  {at: 1, expect: '6px'},
+  {at: 1.5, expect: '1px'},
+  {at: 2, expect: '0px'}, // CSS outline-width can't be negative.
+]);
+</script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py
index dd823c78a68..12fb6a3ad85 100644
--- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py
+++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-line-height-tests.py
@@ -8,7 +8,7 @@ script outputs a list of all tests it generated in the format of Mozilla
 reftest.list to the stdout.
 """
 
-from __future__ import unicode_literals
+from __future__ import unicode_literals, print_function, absolute_import
 
 TEST_FILE = 'text-emphasis-line-height-{:03}{}.html'
 TEST_TEMPLATE = '''<!DOCTYPE html>
diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py
index 62363a207bd..52795906876 100644
--- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py
+++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-position-property-tests.py
@@ -9,7 +9,7 @@ test files are generated by this script. It also outputs a list of all
 tests it generated in the format of Mozilla reftest.list to the stdout.
 """
 
-from __future__ import unicode_literals
+from __future__ import unicode_literals, print_function, absolute_import
 
 import itertools
 
diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py
index b5c59e6f501..fdbaec052e4 100644
--- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py
+++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-ruby-tests.py
@@ -7,7 +7,7 @@ emphasis marks with ruby in four directions. It outputs a list of all
 tests it generated in the format of Mozilla reftest.list to the stdout.
 """
 
-from __future__ import unicode_literals
+from __future__ import unicode_literals, print_function, absolute_import
 
 TEST_FILE = 'text-emphasis-ruby-{:03}{}.html'
 TEST_TEMPLATE = '''<!DOCTYPE html>
diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py
index 34e047ab003..1b1d6fc16f2 100644
--- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py
+++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text-decor-3/support/generate-text-emphasis-style-property-tests.py
@@ -8,7 +8,7 @@ and <string>, with horizontal writing mode. It outputs a list of all
 tests it generated in the format of Mozilla reftest.list to the stdout.
 """
 
-from __future__ import unicode_literals
+from __future__ import unicode_literals, print_function, absolute_import
 
 TEST_FILE = 'text-emphasis-style-property-{:03}{}.html'
 TEST_TEMPLATE = '''<!DOCTYPE html>
diff --git a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py
index 75168420287..6e13861374a 100644
--- a/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py
+++ b/tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/text3/support/generate-segment-break-transformation-rules-tests.py
@@ -18,7 +18,7 @@ So there are 49 different combinations. It outputs a list of all
 tests it generated in the format of Mozilla reftest.list to the stdout.
 """
 
-from __future__ import unicode_literals
+from __future__ import unicode_literals, print_function, absolute_import
 
 TEST_FILE = 'segment-break-transformation-rules-{:03}.html'
 TEST_TEMPLATE = '''<!DOCTYPE html>
diff --git a/tests/wpt/web-platform-tests/layout-instability/buffer-layout-shift.html b/tests/wpt/web-platform-tests/layout-instability/buffer-layout-shift.html
index 0cfce2f7124..b6a33f579b4 100644
--- a/tests/wpt/web-platform-tests/layout-instability/buffer-layout-shift.html
+++ b/tests/wpt/web-platform-tests/layout-instability/buffer-layout-shift.html
@@ -8,38 +8,35 @@
 <div id='myDiv'></div>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<!-- Delay onload by inserting a slow image.-->
-<img src="resources/slow-image.py">
+<script src="resources/util.js"></script>
 <script>
-  async_test(function (t) {
-    if (!window.LayoutShift)
-      assert_unreached('LayoutShift entries are not supported');
-    const startTime = performance.now();
-    new PerformanceObserver(list => {
-      const endTime = performance.now();
-      assert_equals(list.getEntries().length, 1);
-      const entry = list.getEntries()[0];
-      assert_equals(entry.entryType, "layout-shift");
-      assert_equals(entry.name, "");
-      assert_greater_than_equal(entry.startTime, startTime)
-      assert_less_than_equal(entry.startTime, endTime)
-      assert_equals(entry.duration, 0.0);
-      const maxDimension = Math.max(document.documentElement.clientWidth,
-                                    document.documentElement.clientHeight);
-      // The layout shift value should be:
-      // 300 * (100 + 60) * (60 / maxDimension) / viewport size.
-      assert_equals(entry.value, 300 * (100 + 60) * (60 / maxDimension) /
-        (document.documentElement.clientWidth * document.documentElement.clientHeight));
+async_test(async function(t) {
+  assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
 
-      // The entry should not be available via getEntries* methods.
-      assert_equals(performance.getEntriesByType('layout-shift').length, 0, 'getEntriesByType should have no layout-shift entries');
-      assert_equals(performance.getEntriesByName('', 'layout-shift').length, 0, 'getEntriesByName should have no layout-shift entries');
-      assert_equals(performance.getEntries().filter(e => e.entryType === 'layout-shift').length, 0, 'getEntries should have no layout-shift entries');
-      t.done();
-    }).observe({type: 'layout-shift'});
-    // Modify the position of the div.
-    document.getElementById('myDiv').style = "top: 60px";
-  }, 'Layout shift before onload is not buffered into the performance timeline.');
+  const startTime = performance.now();
+  new PerformanceObserver(t.step_func_done(list => {
+    const endTime = performance.now();
+    assert_equals(list.getEntries().length, 1);
+    const entry = list.getEntries()[0];
+    assert_equals(entry.entryType, "layout-shift");
+    assert_equals(entry.name, "");
+    assert_greater_than_equal(entry.startTime, startTime);
+    assert_less_than_equal(entry.startTime, endTime);
+    assert_equals(entry.duration, 0.0);
+    // The layout shift value should be:
+    // 300 * (100 + 60) * (60 / maxDimension) / viewport size.
+    assert_equals(entry.value, computeExpectedScore(300 * (100 + 60),  60));
+
+    // The entry should not be available via getEntries* methods.
+    assert_equals(performance.getEntriesByType('layout-shift').length, 0, 'getEntriesByType should have no layout-shift entries');
+    assert_equals(performance.getEntriesByName('', 'layout-shift').length, 0, 'getEntriesByName should have no layout-shift entries');
+    assert_equals(performance.getEntries().filter(e => e.entryType === 'layout-shift').length, 0, 'getEntries should have no layout-shift entries');
+  })).observe({type: 'layout-shift'});
+  // Modify the position of the div.
+  document.getElementById('myDiv').style = "top: 60px";
+}, 'Layout shift before onload is not buffered into the performance timeline.');
 </script>
 
 </body>
diff --git a/tests/wpt/web-platform-tests/layout-instability/buffered-flag.html b/tests/wpt/web-platform-tests/layout-instability/buffered-flag.html
index dabc8068931..cd1260e3613 100644
--- a/tests/wpt/web-platform-tests/layout-instability/buffered-flag.html
+++ b/tests/wpt/web-platform-tests/layout-instability/buffered-flag.html
@@ -8,10 +8,13 @@
 <div id='myDiv'></div>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
 <script>
-async_test(t => {
-  if (!window.LayoutShift)
-    assert_unreached('LayoutShift entries are not supported');
+async_test(async function(t) {
+  assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
   const startTime = performance.now();
   // First observer creates second in callback to ensure the entry has been dispatched by the time
   // the second observer begins observing.
@@ -22,9 +25,10 @@ async_test(t => {
       assert_equals(list.getEntries().length, 1);
       const entry = list.getEntries()[0];
       assert_equals(entry.entryType, "layout-shift");
-      assert_greater_than_equal(entry.startTime, startTime)
-      assert_less_than_equal(entry.startTime, endTime)
+      assert_greater_than_equal(entry.startTime, startTime);
+      assert_less_than_equal(entry.startTime, endTime);
       assert_equals(entry.duration, 0.0);
+      assert_equals(entry.value, computeExpectedScore(300 * (100 + 60),  60));
     })).observe({'type': 'layout-shift', buffered: true});
   }).observe({type: 'layout-shift'});
   // Modify the position of the div to cause a layout-shift entry.
diff --git a/tests/wpt/web-platform-tests/layout-instability/observe-layout-shift.html b/tests/wpt/web-platform-tests/layout-instability/observe-layout-shift.html
deleted file mode 100644
index 1c35fe2aa23..00000000000
--- a/tests/wpt/web-platform-tests/layout-instability/observe-layout-shift.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE HTML>
-<meta charset=utf-8>
-<title>Layout Instability: observe layout shift value via PerformanceObserver</title>
-<body>
-<style>
-#myDiv { position: relative; width: 300px; height: 100px; }
-
-/* Disable the button's focus ring, which otherwise expands its visual rect by
- * 1px on all sides, triggering a layout shift event.
- */
-#button { outline: none; }
-</style>
-<div id='myDiv'></div>
-<button id='button'>Generate a 'click' event</button>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src=/resources/testdriver.js></script>
-<script src=/resources/testdriver-vendor.js></script><script>
-  let timeAfterClick;
-  function mainThreadBusy(duration) {
-    const now = performance.now();
-    while (performance.now() < now + duration);
-  }
-
-  function clickOnElement(id, callback) {
-    const element = document.getElementById(id);
-    const rect = element.getBoundingClientRect();
-    const xCenter = rect.x + rect.width / 2;
-    const yCenter = rect.y + rect.height / 2;
-    const leftButton = 0;
-    const clickHandler = () => {
-      mainThreadBusy(120);
-      if (callback)
-        callback();
-      element.removeEventListener("mousedown", clickHandler);
-    };
-    element.addEventListener("mousedown", clickHandler);
-    test_driver.click(element);
-  }
-
-  function clickAndBlockMain(id) {
-    return new Promise((resolve, reject) => {
-      clickOnElement(id, resolve);
-    });
-  }
-
-  async_test(function (t) {
-    if (!window.LayoutShift)
-      assert_unreached('LayoutShift entries are not supported');
-    const startTime = performance.now();
-    const observer = new PerformanceObserver(
-      t.step_func_done(function(entryList) {
-        const endTime = performance.now();
-        assert_equals(entryList.getEntries().length, 1);
-        const entry = entryList.getEntries()[0];
-        assert_equals(entry.entryType, "layout-shift");
-        assert_equals(entry.name, "");
-        assert_greater_than_equal(entry.startTime, startTime)
-        assert_less_than_equal(entry.startTime, endTime)
-        assert_equals(entry.duration, 0.0);
-        const maxDimension = Math.max(document.documentElement.clientWidth,
-                                      document.documentElement.clientHeight);
-        // The layout shift value should be:
-        // 300 * (100 + 60) * (60 / maxDimension) / viewport size.
-        assert_equals(entry.value, 300 * (100 + 60) * (60 / maxDimension) /
-          (document.documentElement.clientWidth * document.documentElement.clientHeight));
-      })
-    );
-    observer.observe({entryTypes: ['layout-shift']});
-    window.onload = () => {
-      // Modify the position of the div.
-      document.getElementById('myDiv').style = "top: 60px";
-    };
-  }, 'Layout shift is observable via PerformanceObserver.');
-
-  async_test(function (t) {
-    const startTime = performance.now();
-    const observer = new PerformanceObserver(
-      t.step_func_done(function(entryList) {
-        const endTime = performance.now();
-        assert_equals(entryList.getEntries().length, 1);
-        const entry = entryList.getEntries()[0];
-        assert_equals(entry.entryType, "layout-shift");
-        assert_equals(entry.name, "");
-        assert_greater_than_equal(entry.startTime, startTime)
-        assert_less_than_equal(entry.startTime, endTime)
-        assert_equals(entry.duration, 0.0);
-        const maxDimension = Math.max(document.documentElement.clientWidth,
-                                      document.documentElement.clientHeight);
-        // The layout shift value should be:
-        // 300 * (100 + 60) * (60 / maxDimension) / viewport size.
-        assert_equals(entry.value, 300 * (100 + 60) * (60 / maxDimension) /
-          (document.documentElement.clientWidth * document.documentElement.clientHeight));
-        // We should see that there was a click input entry
-        assert_equals(entry.hadRecentInput, true);
-        assert_greater_than_equal(timeAfterClick, entry.lastInputTime);
-      })
-    );
-    observer.observe({entryTypes: ['layout-shift']});
-    window.onload = () => {
-      // User input event
-      clickAndBlockMain('button').then( () => {
-        timeAfterClick = performance.now();
-        // Modify the position of the div.
-        document.getElementById('myDiv').style = "top: 60px";
-      });
-    };
-  }, 'Layout shift within user input is observable via PerformanceObserver.');
-</script>
-
-</body>
diff --git a/tests/wpt/web-platform-tests/layout-instability/recent-input.html b/tests/wpt/web-platform-tests/layout-instability/recent-input.html
new file mode 100644
index 00000000000..a4fa0d8b0d9
--- /dev/null
+++ b/tests/wpt/web-platform-tests/layout-instability/recent-input.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Layout Instability: observe after user input</title>
+<body>
+<style>
+#myDiv { position: relative; width: 300px; height: 100px; }
+
+/* Disable the button's focus ring, which otherwise expands its visual rect by
+ * 1px on all sides, triggering a layout shift event.
+ */
+#button { outline: none; }
+</style>
+<div id='myDiv'></div>
+<button id='button'>Generate a 'click' event</button>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src=/resources/testdriver.js></script>
+<script src=/resources/testdriver-vendor.js></script>
+<script src=resources/util.js></script>
+<script src=/event-timing/resources/event-timing-test-utils.js></script>
+<script>
+let timeAfterClick;
+
+async_test(async function(t) {
+  assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  const startTime = performance.now();
+  const observer = new PerformanceObserver(
+    t.step_func_done(function(entryList) {
+      const endTime = performance.now();
+      assert_equals(entryList.getEntries().length, 1);
+      const entry = entryList.getEntries()[0];
+      assert_equals(entry.entryType, "layout-shift");
+      assert_equals(entry.name, "");
+      assert_greater_than_equal(entry.startTime, startTime);
+      assert_less_than_equal(entry.startTime, endTime);
+      assert_equals(entry.duration, 0.0);
+      // The layout shift value should be:
+      // 300 * (100 + 60) * (60 / maxDimension) / viewport size.
+      assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60));
+      // We should see that there was a click input entry.
+      assert_equals(entry.hadRecentInput, true);
+      assert_greater_than_equal(timeAfterClick, entry.lastInputTime);
+    })
+  );
+  observer.observe({entryTypes: ['layout-shift']});
+  // User input event
+  clickAndBlockMain('button').then(() => {
+    timeAfterClick = performance.now();
+    // Modify the position of the div.
+    document.getElementById('myDiv').style = "top: 60px";
+  });
+}, 'Layout shift right after user input is observable via PerformanceObserver.');
+</script>
+
+</body>
diff --git a/tests/wpt/web-platform-tests/layout-instability/toJSON.html b/tests/wpt/web-platform-tests/layout-instability/toJSON.html
index 3d39d623e13..374a7de0cd1 100644
--- a/tests/wpt/web-platform-tests/layout-instability/toJSON.html
+++ b/tests/wpt/web-platform-tests/layout-instability/toJSON.html
@@ -8,35 +8,38 @@
 <div id='myDiv'></div>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
 <script>
-  async_test(function (t) {
-    if (!window.LayoutShift)
-      assert_unreached('LayoutShift entries are not supported');
-    const observer = new PerformanceObserver(
-      t.step_func_done(function(entryList) {
-        const entry = entryList.getEntries()[0];
-        assert_equals(typeof(entry.toJSON), 'function');
-        const json = entry.toJSON();
-        assert_equals(typeof(json), 'object');
-        const keys = [
-          // PerformanceEntry
-          'name',
-          'entryType',
-          'startTime',
-          'duration',
-          // LayoutShift
-          'value',
-          'hadRecentInput',
-          'lastInputTime',
-        ];
-        for (const key of keys) {
-          assert_equals(json[key], entry[key],
-            'LayoutShift ${key} entry does not match its toJSON value');
-        }
-      })
-    );
-    observer.observe({type: 'layout-shift'});
-    document.getElementById('myDiv').style = "top: 60px";
-  }, 'Test toJSON() in LayoutShift.');
+async_test(async function(t) {
+  assert_precondition(window.LayoutShift, 'LayoutShift entries are not supported');
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  const observer = new PerformanceObserver(
+    t.step_func_done(function(entryList) {
+      const entry = entryList.getEntries()[0];
+      assert_equals(typeof(entry.toJSON), 'function');
+      const json = entry.toJSON();
+      assert_equals(typeof(json), 'object');
+      const keys = [
+        // PerformanceEntry
+        'name',
+        'entryType',
+        'startTime',
+        'duration',
+        // LayoutShift
+        'value',
+        'hadRecentInput',
+        'lastInputTime',
+      ];
+      for (const key of keys) {
+        assert_equals(json[key], entry[key],
+          'LayoutShift ${key} entry does not match its toJSON value');
+      }
+    })
+  );
+  observer.observe({type: 'layout-shift'});
+  document.getElementById('myDiv').style = "top: 60px";
+}, 'Test toJSON() in LayoutShift.');
 </script>
 </body>