Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/motion
parent: Initial commit. (diff)
download: firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
101 files changed, 4047 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/motion/META.yml b/testing/web-platform/tests/css/motion/META.yml
new file mode 100644
index 0000000000..20835b4839
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/META.yml
@@ -0,0 +1,5 @@
+spec: https://drafts.fxtf.org/motion/
+suggested_reviewers:
+  - dirkschulze
+  - jihyerish
+  - ewilligers
diff --git a/testing/web-platform/tests/css/motion/animation/offset-anchor-composition.html b/testing/web-platform/tests/css/motion/animation/offset-anchor-composition.html
new file mode 100644
index 0000000000..53210fdf38
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-anchor-composition.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>offset-anchor composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+<meta name="assert" content="offset-anchor supports animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.target {
+  width: 200px;
+  height: 200px;
+}
+</style>
+<body>
+<script>
+test_composition({
+  property: 'offset-anchor',
+  underlying: '40px 60px',
+  addFrom: '60px 40px',
+  addTo: '160px 140px',
+}, [
+  {at: -0.25, expect: '75px 75px'},
+  {at: 0, expect: '100px 100px'},
+  {at: 0.25, expect: '125px 125px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 175px'},
+  {at: 1, expect: '200px 200px'},
+  {at: 1.25, expect: '225px 225px'},
+]);
+
+test_composition({
+  property: 'offset-anchor',
+  underlying: 'top 20% left 40%',
+  addFrom: 'left 60% top 80%',
+  addTo: 'right 80% bottom 40%',
+}, [
+  {at: -0.25, expect: '110% 105%'},
+  {at: 0, expect: '100% 100%'},
+  {at: 0.25, expect: '90% 95%'},
+  {at: 0.5, expect: '80% 90%'},
+  {at: 0.75, expect: '70% 85%'},
+  {at: 1, expect: '60% 80%'},
+  {at: 1.25, expect: '50% 75%'},
+]);
+
+test_composition({
+  property: 'offset-anchor',
+  underlying: '40px 60px',
+  replaceFrom: '100px 200px',
+  addTo: '160px 40px',
+}, [
+  {at: -0.25, expect: '75px 225px'},
+  {at: 0, expect: '100px 200px'},
+  {at: 0.25, expect: '125px 175px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 125px'},
+  {at: 1, expect: '200px 100px'},
+  {at: 1.25, expect: '225px 75px'},
+]);
+
+test_composition({
+  property: 'offset-anchor',
+  underlying: '40px 60px',
+  addFrom: '60px 140px',
+  replaceTo: '200px 100px',
+}, [
+  {at: -0.25, expect: '75px 225px'},
+  {at: 0, expect: '100px 200px'},
+  {at: 0.25, expect: '125px 175px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 125px'},
+  {at: 1, expect: '200px 100px'},
+  {at: 1.25, expect: '225px 75px'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html
new file mode 100644
index 0000000000..9c69c0f0be
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-anchor interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+    <meta name="assert" content="offset-anchor supports <position> animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        offset-anchor: 30px 10px;
+      }
+      .target {
+        offset-anchor: 10px 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-anchor',
+        from: '220px 240px',
+        to: '300px 400px',
+      }, [
+        {at: -1, expect: '140px 80px'},
+        {at: 0, expect: '220px 240px'},
+        {at: 0.125, expect: '230px 260px'},
+        {at: 0.875, expect: '290px 380px'},
+        {at: 1, expect: '300px 400px'},
+        {at: 2, expect: '380px 560px'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: 'left 480px top 400px',
+        to: 'right -140% bottom -60%',
+      }, [
+        {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%)'},
+        {at: 0, expect: 'left calc(0% + 480px) top calc(0% + 400px)'},
+        {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%)'},
+        {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px)'},
+        {at: 1, expect: 'right -140% bottom -60%'},
+        {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px)'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: 'left top',
+        to: 'left 8px bottom 20%',
+      }, [
+        {at: -1, expect: 'calc(0% - 8px) -80%'},
+        {at: 0, expect: 'left top'},
+        {at: 0.125, expect: 'calc(0% + 1px) 10%'},
+        {at: 0.875, expect: 'calc(0% + 7px) 70%'},
+        {at: 1, expect: 'left calc(0% + 8px) bottom 20%'},
+        {at: 2, expect: 'calc(0% + 16px) 160%'}
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-anchor',
+        from: 'right 10px top 20%',
+        to: 'auto'
+      });
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: neutralKeyframe,
+        to: '20px 20px',
+      }, [
+        {at: -0.3, expect: '7px 33px'},
+        {at: 0, expect: '10px 30px'},
+        {at: 0.3, expect: '13px 27px'},
+        {at: 0.6, expect: '16px 24px'},
+        {at: 1, expect: '20px 20px'},
+        {at: 1.5, expect: '25px 15px'},
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-anchor',
+        from: 'initial',
+        to: '60% 40%',
+      });
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: 'inherit',
+        to: '20px 20px',
+      }, [
+        {at: -0.3, expect: '33px 7px'},
+        {at: 0, expect: '30px 10px'},
+        {at: 0.3, expect: '27px 13px'},
+        {at: 0.6, expect: '24px 16px'},
+        {at: 1, expect: '20px 20px'},
+        {at: 1.5, expect: '15px 25px'},
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-anchor',
+        from: 'unset',
+        to: '50% 10px',
+      });
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: '0% 50%',
+        to: '100% 150%'
+      }, [
+        {at: -0.3, expect: '-30% 20%'},
+        {at: 0, expect: '0% 50%'},
+        {at: 0.3, expect: '30% 80%'},
+        {at: 0.6, expect: '60% 110%'},
+        {at: 1, expect: '100% 150%'},
+        {at: 1.5, expect: '150% 200%'}
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-anchor',
+        from: 'auto',
+        to: '20px 20px',
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-distance-composition.html b/testing/web-platform/tests/css/motion/animation/offset-distance-composition.html
new file mode 100644
index 0000000000..4ff6e95b05
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-distance-composition.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>offset-distance composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+<meta name="assert" content="offset-distance 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: 'offset-distance',
+  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: 'offset-distance',
+  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: 'offset-distance',
+  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: 'offset-distance',
+  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/testing/web-platform/tests/css/motion/animation/offset-distance-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-distance-interpolation.html
new file mode 100644
index 0000000000..bc0c094a8e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-distance-interpolation.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <style>
+    .parent {
+      offset-distance: 30px;
+    }
+    .target {
+      width: 10px;
+      height: 10px;
+      background-color: black;
+      offset-path: path("M0 0H 400");
+      offset-distance: 10px;
+    }
+    .expected {
+      background-color: green;
+    }
+  </style>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-distance',
+        from: '-30px',
+        to: '50px',
+      }, [
+        {at: -1, expect: '-110px'},
+        {at: 0, expect: '-30px'},
+        {at: 0.125, expect: '-20px'},
+        {at: 0.875, expect: '40px'},
+        {at: 1, expect: '50px'},
+        {at: 2, expect: '130px'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: '20%',
+        to: '100%',
+      }, [
+        {at: -1, expect: '-60%'},
+        {at: 0, expect: '20%'},
+        {at: 0.125, expect: '30%'},
+        {at: 0.875, expect: '90%'},
+        {at: 1, expect: '100%'},
+        {at: 2, expect: '180%'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: 'calc(20% - 30px)',
+        to: 'calc(50px + 100%)',
+      }, [
+        {at: -1, expect: 'calc(-110px + -60%)'},
+        {at: 0, expect: 'calc(20% - 30px)'},
+        {at: 0.125, expect: 'calc(-20px + 30%)'},
+        {at: 0.875, expect: 'calc(40px + 90%)'},
+        {at: 1, expect: 'calc(50px + 100%)'},
+        {at: 2, expect: 'calc(130px + 180%)'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: neutralKeyframe,
+        to: '20px',
+      }, [
+        {at: -0.3, expect: '7px'},
+        {at: 0, expect: '10px'},
+        {at: 0.3, expect: '13px'},
+        {at: 0.6, expect: '16px'},
+        {at: 1, expect: '20px'},
+        {at: 1.5, expect: '25px'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: 'initial',
+        to: '20px',
+      }, [
+        {at: -0.3, expect: '-6px'},
+        {at: 0, expect: '0px'},
+        {at: 0.3, expect: '6px'},
+        {at: 0.6, expect: '12px'},
+        {at: 1, expect: '20px'},
+        {at: 1.5, expect: '30px'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: 'inherit',
+        to: '20px',
+      }, [
+        {at: -0.3, expect: '33px'},
+        {at: 0, expect: '30px'},
+        {at: 0.3, expect: '27px'},
+        {at: 0.6, expect: '24px'},
+        {at: 1, expect: '20px'},
+        {at: 1.5, expect: '15px'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: 'unset',
+        to: '20px',
+      }, [
+        {at: -0.3, expect: '-6px'},
+        {at: 0, expect: '0px'},
+        {at: 0.3, expect: '6px'},
+        {at: 0.6, expect: '12px'},
+        {at: 1, expect: '20px'},
+        {at: 1.5, expect: '30px'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: '10px',
+        to: '100%',
+      }, [
+        {at: -0.3, expect: 'calc(13px + -30%)'},
+        {at: 0, expect: 'calc(0% + 10px)'},
+        {at: 0.3, expect: 'calc(7px + 30%)'},
+        {at: 0.6, expect: 'calc(4px + 60%)'},
+        {at: 1, expect: '100%'},
+        {at: 1.5, expect: 'calc(-5px + 150%)'},
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-interpolation.html
new file mode 100644
index 0000000000..2ee011bd77
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-interpolation.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-shorthand">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 200H 700") 500px 800deg',
+        to: 'path("M0 300H 700 Z") 600px 900deg',
+        method: 'CSS Transitions',
+      }, [
+        {at: -0.3, expect: 'path("M0 300H 700 Z") 470px 770deg'},
+        {at: 0, expect: 'path("M0 300H 700 Z") 500px 800deg'},
+        {at: 0.3, expect: 'path("M0 300H 700 Z") 530px 830deg'},
+        {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'},
+        {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'},
+        {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 0H 200") 500px auto',
+        to: 'path("M0 0H 300") 600px 0deg',
+        method: 'CSS Transitions',
+      }, [
+        {at: -0.3, expect: 'path("M0 0H 170") 470px 0deg'},
+        {at: 0, expect: 'path("M0 0H 200") 500px 0deg'},
+        {at: 0.3, expect: 'path("M0 0H 230") 530px 0deg'},
+        {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'},
+        {at: 1, expect: 'path("M0 0H 300") 600px 0deg'},
+        {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 200H 700") 500px 800deg',
+        to: 'path("M0 300H 700 Z") 600px 900deg',
+        method: 'CSS Animations',
+      }, [
+        {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'},
+        {at: 0, expect: 'path("M0 200H 700") 500px 800deg'},
+        {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'},
+        {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'},
+        {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'},
+        {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 0H 200") 500px auto',
+        to: 'path("M0 0H 300") 600px 0deg',
+        method: 'CSS Animations',
+      }, [
+        {at: -0.3, expect: 'path("M0 0H 170") 470px'},
+        {at: 0, expect: 'path("M0 0H 200") 500px'},
+        {at: 0.3, expect: 'path("M0 0H 230") 530px'},
+        {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'},
+        {at: 1, expect: 'path("M0 0H 300") 600px 0deg'},
+        {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 200H 700") 500px 800deg',
+        to: 'path("M0 300H 700 Z") 600px 900deg',
+        method: 'Web Animations',
+      }, [
+        {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'},
+        {at: 0, expect: 'path("M0 200H 700") 500px 800deg'},
+        {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'},
+        {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'},
+        {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'},
+        {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 0V 200") 500px auto',
+        to: 'path("M0 0H 300") 600px 0deg',
+        method: 'Web Animations',
+      }, [
+        {at: -0.3, expect: 'path("M0 0V 200") 470px'},
+        {at: 0, expect: 'path("M0 0V 200") 500px'},
+        {at: 0.3, expect: 'path("M0 0V 200") 530px'},
+        {at: 0.6, expect: 'path("M0 0H 300") 560px 0deg'},
+        {at: 1, expect: 'path("M0 0H 300") 600px 0deg'},
+        {at: 1.5, expect: 'path("M0 0H 300") 650px 0deg'},
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-composition.html b/testing/web-platform/tests/css/motion/animation/offset-path-composition.html
new file mode 100644
index 0000000000..eedd363efa
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-composition.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>offset-distance composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+<meta name="assert" content="offset-distance supports animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+// TODO(ericwilligers) Support additive animation for path strings crbug.com/699308
+
+// Ray paths compose.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg sides)',
+  addFrom: 'ray(10deg sides)',
+  addTo: 'ray(20deg sides)',
+}, [
+  {at: -0.3, expect: 'ray(27deg sides)'},
+  {at: 0, expect: 'ray(30deg sides)'},
+  {at: 0.3, expect: 'ray(33deg sides)'},
+  {at: 0.6, expect: 'ray(36deg sides)'},
+  {at: 1, expect: 'ray(40deg sides)'},
+  {at: 1.5, expect: 'ray(45deg sides)'},
+]);
+
+// Ray paths without contain don't compose with underlying contain.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg closest-corner contain)',
+  addFrom: 'ray(10deg closest-corner)',
+  addTo: 'ray(20deg closest-corner)',
+}, [
+  {at: -0.3, expect: 'ray(7deg closest-corner)'},
+  {at: 0, expect: 'ray(10deg closest-corner)'},
+  {at: 0.3, expect: 'ray(13deg closest-corner)'},
+  {at: 0.6, expect: 'ray(16deg closest-corner)'},
+  {at: 1, expect: 'ray(20deg closest-corner)'},
+  {at: 1.5, expect: 'ray(25deg closest-corner)'},
+]);
+
+// Ray paths don't compose when underlying has different size.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg closest-side)',
+  addFrom: 'ray(10deg closest-corner)',
+  addTo: 'ray(20deg closest-corner)',
+}, [
+  {at: -0.3, expect: 'ray(7deg closest-corner)'},
+  {at: 0, expect: 'ray(10deg closest-corner)'},
+  {at: 0.3, expect: 'ray(13deg closest-corner)'},
+  {at: 0.6, expect: 'ray(16deg closest-corner)'},
+  {at: 1, expect: 'ray(20deg closest-corner)'},
+  {at: 1.5, expect: 'ray(25deg closest-corner)'},
+]);
+
+// Ray contain paths compose with underlying contain.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg farthest-side contain)',
+  addFrom: 'ray(190deg farthest-side contain)',
+  addTo: 'ray(20deg farthest-side contain)',
+}, [
+  {at: -0.3, expect: 'ray(261deg farthest-side contain)'},
+  {at: 0, expect: 'ray(210deg farthest-side contain)'},
+  {at: 0.3, expect: 'ray(159deg farthest-side contain)'},
+  {at: 0.6, expect: 'ray(108deg farthest-side contain)'},
+  {at: 1, expect: 'ray(40deg farthest-side contain)'},
+  {at: 1.5, expect: 'ray(-45deg farthest-side contain)'},
+]);
+
+// When we can't interpolate, we can't compose.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg farthest-corner)',
+  addFrom: 'ray(190deg farthest-corner contain)',
+  addTo: 'ray(20deg farthest-corner)',
+}, [
+  {at: -0.3, expect: 'ray(190deg farthest-corner contain)'},
+  {at: 0, expect: 'ray(190deg farthest-corner contain)'},
+  {at: 0.3, expect: 'ray(190deg farthest-corner contain)'},
+  {at: 0.6, expect: 'ray(40deg farthest-corner)'},
+  {at: 1, expect: 'ray(40deg farthest-corner)'},
+  {at: 1.5, expect: 'ray(40deg farthest-corner)'},
+]);
+
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg sides)',
+  replaceFrom: 'ray(190deg sides contain)',
+  addTo: 'ray(20deg sides)',
+}, [
+  {at: -0.3, expect: 'ray(190deg sides contain)'},
+  {at: 0, expect: 'ray(190deg sides contain)'},
+  {at: 0.3, expect: 'ray(190deg sides contain)'},
+  {at: 0.6, expect: 'ray(40deg sides)'},
+  {at: 1, expect: 'ray(40deg sides)'},
+  {at: 1.5, expect: 'ray(40deg sides)'},
+]);
+
+// Ray paths compose with underlying.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg closest-side)',
+  addFrom: 'ray(10deg closest-side)',
+  replaceTo: 'ray(10deg closest-side)',
+}, [
+  {at: -0.3, expect: 'ray(36deg closest-side)'},
+  {at: 0, expect: 'ray(30deg closest-side)'},
+  {at: 0.3, expect: 'ray(24deg closest-side)'},
+  {at: 0.6, expect: 'ray(18deg closest-side)'},
+  {at: 1, expect: 'ray(10deg closest-side)'},
+  {at: 1.5, expect: 'ray(0deg closest-side)'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-001.html
new file mode 100644
index 0000000000..5b90813bb5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-001.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      // Distinct number of path segments
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 H 1 H 2')",
+        to: "path('M 0 0 H 3')"
+      });
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 1 2 L 3 4 Z')",
+        to: "none"
+      });
+
+      // Distinct segment types
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 10 0 H 11')",
+        to: "path('M 20 0 V 2')"
+      });
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 1 2 L 4 6 Z')",
+        to: "path('M 1 2 H 4 V 6')"
+      });
+
+      // Exercise each segment type
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 Z')",
+        to: "path('M 0 0 Z')"
+      }, [
+        {at: -1, expect: "path('M 0 0 Z')"},
+        {at: 0, expect: "path('M 0 0 Z')"},
+        {at: 0.125, expect: "path('M 0 0 Z')"},
+        {at: 0.875, expect: "path('M 0 0 Z')"},
+        {at: 1, expect: "path('M 0 0 Z')"},
+        {at: 2, expect: "path('M 0 0 Z')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 20 70')",
+        to: "path('M 100 30')"
+      }, [
+        {at: -1, expect: "path('M -60 110')"},
+        {at: 0, expect: "path('M 20 70')"},
+        {at: 0.125, expect: "path('M 30 65')"},
+        {at: 0.875, expect: "path('M 90 35')"},
+        {at: 1, expect: "path('M 100 30')"},
+        {at: 2, expect: "path('M 180 -10')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 20 70')",
+        to: "path('m 100 30')"
+      }, [
+        {at: -1, expect: "path('M -60 110')"},
+        {at: 0, expect: "path('M 20 70')"},
+        {at: 0.125, expect: "path('M 30 65')"},
+        {at: 0.875, expect: "path('M 90 35')"},
+        {at: 1, expect: "path('M 100 30')"},
+        {at: 2, expect: "path('M 180 -10')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 100 200 L 120 270')",
+        to: "path('m 100 200 L 200 230')"
+      }, [
+        {at: -1, expect: "path('M 100 200 L 40 310')"},
+        {at: 0, expect: "path('M 100 200 L 120 270')"},
+        {at: 0.125, expect: "path('M 100 200 L 130 265')"},
+        {at: 0.875, expect: "path('M 100 200 L 190 235')"},
+        {at: 1, expect: "path('M 100 200 L 200 230')"},
+        {at: 2, expect: "path('M 100 200 L 280 190')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 100 200 l 20 70')",
+        to: "path('m 100 200 l 100 30')"
+      }, [
+        {at: -1, expect: "path('M 100 200 L 40 310')"},
+        {at: 0, expect: "path('M 100 200 L 120 270')"},
+        {at: 0.125, expect: "path('M 100 200 L 130 265')"},
+        {at: 0.875, expect: "path('M 100 200 L 190 235')"},
+        {at: 1, expect: "path('M 100 200 L 200 230')"},
+        {at: 2, expect: "path('M 100 200 L 280 190')"}
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-002.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-002.html
new file mode 100644
index 0000000000..2841bd9562
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-002.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 20 10 C 32 42 52 62 120 2200')",
+        to: "path('M 20 10 C 40 50 60 70 200 3000')",
+      }, [
+        {at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"},
+        {at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"},
+        {at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"},
+        {at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"},
+        {at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"},
+        {at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 20 10 c 12 32 32 52 100 2190')",
+        to: "path('m 20 10 c 20 40 40 60 180 2990')"
+      }, [
+        {at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"},
+        {at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"},
+        {at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"},
+        {at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"},
+        {at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"},
+        {at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 20 10 Q 32 42 120 2200')",
+        to: "path('M 20 10 Q 40 50 200 3000')"
+      }, [
+        {at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"},
+        {at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"},
+        {at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"},
+        {at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"},
+        {at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"},
+        {at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 20 10 q 12 32 100 2190')",
+        to: "path('m 20 10 q 20 40 180 2990')"
+      }, [
+        {at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"},
+        {at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"},
+        {at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"},
+        {at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"},
+        {at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"},
+        {at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 100 400 A 10 20 30 1 0 140 450')",
+        to: "path('M 300 200 A 50 60 70 0 1 380 290')"
+      }, [
+        {at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"},
+        {at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"},
+        {at: 0.125, expect: "path('M 125 375 A 15 25 35 1 0 170 430')"},
+        {at: 0.875, expect: "path('M 275 225 A 45 55 65 0 1 350 310')"},
+        {at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"},
+        {at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 100 400 a 10 20 30 1 0 40 50')",
+        to: "path('m 300 200 a 50 60 70 0 1 80 90')"
+      }, [
+        {at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"},
+        {at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"},
+        {at: 0.125, expect: "path('M 125 375 A 15 25 35 1 0 170 430')"},
+        {at: 0.875, expect: "path('M 275 225 A 45 55 65 0 1 350 310')"},
+        {at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"},
+        {at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"}
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-003.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-003.html
new file mode 100644
index 0000000000..44c0285055
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-003.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 50 60 H 70')",
+        to: "path('M 10 140 H 270')"
+      }, [
+        {at: -1, expect: "path('M 90 -20 H -130')"},
+        {at: 0, expect: "path('M 50 60 H 70')"},
+        {at: 0.125, expect: "path('M 45 70 H 95')"},
+        {at: 0.875, expect: "path('M 15 130 H 245')"},
+        {at: 1, expect: "path('M 10 140 H 270')"},
+        {at: 2, expect: "path('M -30 220 H 470')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 50 60 h 20')",
+        to: "path('m 10 140 h 260')"
+      }, [
+        {at: -1, expect: "path('M 90 -20 H -130')"},
+        {at: 0, expect: "path('M 50 60 H 70')"},
+        {at: 0.125, expect: "path('M 45 70 H 95')"},
+        {at: 0.875, expect: "path('M 15 130 H 245')"},
+        {at: 1, expect: "path('M 10 140 H 270')"},
+        {at: 2, expect: "path('M -30 220 H 470')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 50 60 V 70')",
+        to: "path('M 10 140 V 270')"
+      }, [
+        {at: -1, expect: "path('M 90 -20 V -130')"},
+        {at: 0, expect: "path('M 50 60 V 70')"},
+        {at: 0.125, expect: "path('M 45 70 V 95')"},
+        {at: 0.875, expect: "path('M 15 130 V 245')"},
+        {at: 1, expect: "path('M 10 140 V 270')"},
+        {at: 2, expect: "path('M -30 220 V 470')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 50 60 v 10')",
+        to: "path('m 10 140 v 130')"
+      }, [
+        {at: -1, expect: "path('M 90 -20 V -130')"},
+        {at: 0, expect: "path('M 50 60 V 70')"},
+        {at: 0.125, expect: "path('M 45 70 V 95')"},
+        {at: 0.875, expect: "path('M 15 130 V 245')"},
+        {at: 1, expect: "path('M 10 140 V 270')"},
+        {at: 2, expect: "path('M -30 220 V 470')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 12 34 S 45 67 89 123')",
+        to: "path('M 20 26 S 61 51 113 99')"
+      }, [
+        {at: -1, expect: "path('M 4 42 S 29 83 65 147')"},
+        {at: 0, expect: "path('M 12 34 S 45 67 89 123')"},
+        {at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"},
+        {at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"},
+        {at: 1, expect: "path('M 20 26 S 61 51 113 99')"},
+        {at: 2, expect: "path('M 28 18 S 77 35 137 75')"},
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 12 34 s 33 33 77 89')",
+        to: "path('m 20 26 s 41 25 93 73')"
+      }, [
+        {at: -1, expect: "path('M 4 42 S 29 83 65 147')"},
+        {at: 0, expect: "path('M 12 34 S 45 67 89 123')"},
+        {at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"},
+        {at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"},
+        {at: 1, expect: "path('M 20 26 S 61 51 113 99')"},
+        {at: 2, expect: "path('M 28 18 S 77 35 137 75')"},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 12 34 T 45 67')",
+        to: "path('M 20 26 T 61 51')"
+      }, [
+        {at: -1, expect: "path('M 4 42 T 29 83')"},
+        {at: 0, expect: "path('M 12 34 T 45 67')"},
+        {at: 0.125, expect: "path('M 13 33 T 47 65')"},
+        {at: 0.875, expect: "path('M 19 27 T 59 53')"},
+        {at: 1, expect: "path('M 20 26 T 61 51')"},
+        {at: 2, expect: "path('M 28 18 T 77 35')"},
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 12 34 t 33 33')",
+        to: "path('m 20 26 t 41 25')"
+      }, [
+        {at: -1, expect: "path('M 4 42 T 29 83')"},
+        {at: 0, expect: "path('M 12 34 T 45 67')"},
+        {at: 0.125, expect: "path('M 13 33 T 47 65')"},
+        {at: 0.875, expect: "path('M 19 27 T 59 53')"},
+        {at: 1, expect: "path('M 20 26 T 61 51')"},
+        {at: 2, expect: "path('M 28 18 T 77 35')"},
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-004.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-004.html
new file mode 100644
index 0000000000..860348649b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-004.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      // Mix relative and non-relative
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
+        to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 300 100 z')"
+      }, [
+        {at: -1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 0 -100 Z')"},
+        {at: 0, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 0.125, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 225 125 Z')"},
+        {at: 0.875, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 375 275 Z')"},
+        {at: 1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 400 300 Z')"},
+        {at: 2, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 600 500 Z')"},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
+        to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z')"
+      }, [
+        {at: -1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 0, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 0.125, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 0.875, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 2, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 l 40 50 z l 40 60 z m 60 70 l 90 60 z t 70 130')",
+        to: "path('M 210 220 L 170 190 Z L 90 120 Z M 110 130 L 200 230 Z T 220 220')"
+      }, [
+        {at: -1, expect: "path('M -190 -180 L -70 -50 Z L 10 40 Z M 30 50 L 120 70 Z T 60 220')"},
+        {at: 0, expect: "path('M 10 20 L 50 70 Z L 50 80 Z M 70 90 L 160 150 Z T 140 220')"},
+        {at: 0.125, expect: "path('M 35 45 L 65 85 Z L 55 85 Z M 75 95 L 165 160 Z T 150 220')"},
+        {at: 0.875, expect: "path('M 185 195 L 155 175 Z L 85 115 Z M 105 125 L 195 220 Z T 210 220')"},
+        {at: 1, expect: "path('M 210 220 L 170 190 Z L 90 120 Z M 110 130 L 200 230 Z T 220 220')"},
+        {at: 2, expect: "path('M 410 420 L 290 310 Z L 130 160 Z M 150 170 L 240 310 Z T 300 220')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 c 40 50 30 60 80 70 c 120 130 170 140 110 160')",
+        to: "path('M 130 100 C 130 150 120 160 210 170 C 290 300 340 310 320 330')"
+      }, [
+        {at: -1, expect: "path('M -110 -60 C -30 -10 -40 0 -30 10 C 130 140 180 150 80 170')"},
+        {at: 0, expect: "path('M 10 20 C 50 70 40 80 90 90 C 210 220 260 230 200 250')"},
+        {at: 0.125, expect: "path('M 25 30 C 60 80 50 90 105 100 C 220 230 270 240 215 260')"},
+        {at: 0.875, expect: "path('M 115 90 C 120 140 110 150 195 160 C 280 290 330 300 305 320')"},
+        {at: 1, expect: "path('M 130 100 C 130 150 120 160 210 170 C 290 300 340 310 320 330')"},
+        {at: 2, expect: "path('M 250 180 C 210 230 200 240 330 250 C 370 380 420 390 440 410')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 q 30 60 40 50 q 110 80 90 80')",
+        to: "path('M 130 100 Q 120 160 130 150 Q 200 150 180 190')"
+      }, [
+        {at: -1, expect: "path('M -110 -60 Q -40 0 -30 -10 Q 120 150 100 110')"},
+        {at: 0, expect: "path('M 10 20 Q 40 80 50 70 Q 160 150 140 150')"},
+        {at: 0.125, expect: "path('M 25 30 Q 50 90 60 80 Q 165 150 145 155')"},
+        {at: 0.875, expect: "path('M 115 90 Q 110 150 120 140 Q 195 150 175 185')"},
+        {at: 1, expect: "path('M 130 100 Q 120 160 130 150 Q 200 150 180 190')"},
+        {at: 2, expect: "path('M 250 180 Q 200 240 210 230 Q 240 150 220 230')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 s 30 60 40 50 s 110 60 90 70')",
+        to: "path('M 130 140 S 120 160 130 150 S 200 170 140 180')"
+      }, [
+        {at: -1, expect: "path('M -110 -100 S -40 0 -30 -10 S 120 90 140 100')"},
+        {at: 0, expect: "path('M 10 20 S 40 80 50 70 S 160 130 140 140')"},
+        {at: 0.125, expect: "path('M 25 35 S 50 90 60 80 S 165 135 140 145')"},
+        {at: 0.875, expect: "path('M 115 125 S 110 150 120 140 S 195 165 140 175')"},
+        {at: 1, expect: "path('M 130 140 S 120 160 130 150 S 200 170 140 180')"},
+        {at: 2, expect: "path('M 250 260 S 200 240 210 230 S 240 210 140 220')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 h 30 v 60 h 10 v -10 l 110 60')",
+        to: "path('M 130 140 H 120 V 160 H 130 V 150 L 200 170')"
+      }, [
+        {at: -1, expect: "path('M -110 -100 H -40 V 0 H -30 V -10 L 120 90')"},
+        {at: 0, expect: "path('M 10 20 H 40 V 80 H 50 V 70 L 160 130')"},
+        {at: 0.125, expect: "path('M 25 35 H 50 V 90 H 60 V 80 L 165 135')"},
+        {at: 0.875, expect: "path('M 115 125 H 110 V 150 H 120 V 140 L 195 165')"},
+        {at: 1, expect: "path('M 130 140 H 120 V 160 H 130 V 150 L 200 170')"},
+        {at: 2, expect: "path('M 250 260 H 200 V 240 H 210 V 230 L 240 210')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')",
+        to: "path('M 18 12 A 50 100 70 0 1 90 110 A 150 160 70 0 1 70 80')"
+      }, [
+        {at: -1, expect: "path('M 2 28 A -30 -60 -10 1 0 10 30 A 70 80 -10 1 1 310 160')"},
+        {at: 0, expect: "path('M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120')"},
+        {at: 0.125, expect: "path('M 11 19 A 15 30 35 1 0 55 75 A 115 125 35 1 1 175 115')"},
+        {at: 0.875, expect: "path('M 17 13 A 45 90 65 0 1 85 105 A 145 155 65 0 1 85 85')"},
+        {at: 1, expect: "path('M 18 12 A 50 100 70 0 1 90 110 A 150 160 70 0 1 70 80')"},
+        {at: 2, expect: "path('M 26 4 A 90 180 110 0 1 130 150 A 190 200 110 0 1 -50 40')"}
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html
new file mode 100644
index 0000000000..9924106f4b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <style>
+    .parent {
+      offset-path: ray(30deg closest-side);
+    }
+    .target {
+      offset-path: ray(10deg closest-side);
+    }
+  </style>
+  <body>
+    <script>
+      'use strict';
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
+        to: "ray(0deg closest-side)",
+      });
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "ray(0deg closest-corner)",
+        to: "none",
+      });
+
+      // Neutral keyframes use the inline style.
+      test_interpolation({
+        property: 'offset-path',
+        from: neutralKeyframe,
+        to: 'ray(20deg closest-side)',
+      }, [
+        {at: -0.3, expect: 'ray(7deg closest-side)'},
+        {at: 0, expect: 'ray(10deg closest-side)'},
+        {at: 0.3, expect: 'ray(13deg closest-side)'},
+        {at: 0.6, expect: 'ray(16deg closest-side)'},
+        {at: 1, expect: 'ray(20deg closest-side)'},
+        {at: 1.5, expect: 'ray(25deg closest-side)'},
+      ]);
+
+      // No interpolation to a ray from the initial value 'none'.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'initial',
+        to: 'ray(20deg closest-side)',
+      });
+
+      // 'inherit' keyframes use the parent style.
+      test_interpolation({
+        property: 'offset-path',
+        from: 'inherit',
+        to: 'ray(20deg closest-side)',
+      }, [
+        {at: -0.3, expect: 'ray(33deg closest-side)'},
+        {at: 0, expect: 'ray(30deg closest-side)'},
+        {at: 0.3, expect: 'ray(27deg closest-side)'},
+        {at: 0.6, expect: 'ray(24deg closest-side)'},
+        {at: 1, expect: 'ray(20deg closest-side)'},
+        {at: 1.5, expect: 'ray(15deg closest-side)'},
+      ]);
+
+      // No interpolation to a ray from the initial value 'none'.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'unset',
+        to: 'ray(20deg closest-side)',
+      });
+
+      // No interpolation to a ray from the initial value 'none'.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'none',
+        to: 'ray(20deg closest-side)',
+      });
+
+      // Interpolation between rays.
+      test_interpolation({
+        property: 'offset-path',
+        from: 'ray(10deg sides contain)',
+        to: 'ray(50deg sides contain)'
+      }, [
+        {at: -1, expect: 'ray(-30deg sides contain)'},
+        {at: 0, expect: 'ray(10deg sides contain)'},
+        {at: 0.125, expect: 'ray(15deg sides contain)'},
+        {at: 0.875, expect: 'ray(45deg sides contain)'},
+        {at: 1, expect: 'ray(50deg sides contain)'},
+        {at: 2, expect: 'ray(90deg sides contain)'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: 'ray(-10deg farthest-corner)',
+        to: 'ray(-50deg farthest-corner)'
+      }, [
+        {at: -1, expect: 'ray(30deg farthest-corner)'},
+        {at: 0, expect: 'ray(-10deg farthest-corner)'},
+        {at: 0.125, expect: 'ray(-15deg farthest-corner)'},
+        {at: 0.875, expect: 'ray(-45deg farthest-corner)'},
+        {at: 1, expect: 'ray(-50deg farthest-corner)'},
+        {at: 2, expect: 'ray(-90deg farthest-corner)'},
+      ]);
+
+      // No interpolation between different sizes and/or different containment.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'ray(200deg farthest-side)',
+        to: 'ray(300deg sides)'
+      });
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'ray(200deg sides contain)',
+        to: 'ray(300deg sides)'
+      });
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'ray(200deg farthest-side contain)',
+        to: 'ray(300deg sides)'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-position-composition.html b/testing/web-platform/tests/css/motion/animation/offset-position-composition.html
new file mode 100644
index 0000000000..0ee517a73a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-position-composition.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>offset-position composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
+<meta name="assert" content="offset-position supports <position> animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.target {
+  width: 200px;
+  height: 200px;
+}
+</style>
+<body>
+<script>
+test_composition({
+  property: 'offset-position',
+  underlying: '40px 60px',
+  addFrom: '60px 40px',
+  addTo: '160px 140px',
+}, [
+  {at: -0.25, expect: '75px 75px'},
+  {at: 0, expect: '100px 100px'},
+  {at: 0.25, expect: '125px 125px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 175px'},
+  {at: 1, expect: '200px 200px'},
+  {at: 1.25, expect: '225px 225px'},
+]);
+
+test_composition({
+  property: 'offset-position',
+  underlying: 'top 20% left 40%',
+  addFrom: 'left 60% top 80%',
+  addTo: 'right 80% bottom 40%',
+}, [
+  {at: -0.25, expect: '110% 105%'},
+  {at: 0, expect: '100% 100%'},
+  {at: 0.25, expect: '90% 95%'},
+  {at: 0.5, expect: '80% 90%'},
+  {at: 0.75, expect: '70% 85%'},
+  {at: 1, expect: '60% 80%'},
+  {at: 1.25, expect: '50% 75%'},
+]);
+
+test_composition({
+  property: 'offset-position',
+  underlying: '40px 60px',
+  replaceFrom: '100px 200px',
+  addTo: '160px 40px',
+}, [
+  {at: -0.25, expect: '75px 225px'},
+  {at: 0, expect: '100px 200px'},
+  {at: 0.25, expect: '125px 175px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 125px'},
+  {at: 1, expect: '200px 100px'},
+  {at: 1.25, expect: '225px 75px'},
+]);
+
+test_composition({
+  property: 'offset-position',
+  underlying: '40px 60px',
+  addFrom: '60px 140px',
+  replaceTo: '200px 100px',
+}, [
+  {at: -0.25, expect: '75px 225px'},
+  {at: 0, expect: '100px 200px'},
+  {at: 0.25, expect: '125px 175px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 125px'},
+  {at: 1, expect: '200px 100px'},
+  {at: 1.25, expect: '225px 75px'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-position-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-position-interpolation.html
new file mode 100644
index 0000000000..9faaf9487a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-position-interpolation.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-position interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
+    <meta name="assert" content="offset-position supports <position> animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        offset-position: 30px 10px;
+      }
+      .target {
+        offset-position: 10px 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-position',
+        from: '220px 240px',
+        to: '300px 400px',
+      }, [
+        {at: -1, expect: '140px 80px'},
+        {at: 0, expect: '220px 240px'},
+        {at: 0.125, expect: '230px 260px'},
+        {at: 0.875, expect: '290px 380px'},
+        {at: 1, expect: '300px 400px'},
+        {at: 2, expect: '380px 560px'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-position',
+        from: 'left 480px top 400px',
+        to: 'right -140% bottom -60%',
+      }, [
+        {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%)'},
+        {at: 0, expect: 'left 480px top 400px'},
+        {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%)'},
+        {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px)'},
+        {at: 1, expect: 'right -140% bottom -60%'},
+        {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px)'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-position',
+        from: 'left top',
+        to: 'left 8px bottom 20%',
+      }, [
+        {at: -1, expect: '-8px -80%'},
+        {at: 0, expect: 'left top'},
+        {at: 0.125, expect: '1px 10%'},
+        {at: 0.875, expect: '7px 70%'},
+        {at: 1, expect: 'left 8px bottom 20%'},
+        {at: 2, expect: '16px 160%'}
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-position',
+        from: 'right 10px top 20%',
+        to: 'auto'
+      });
+
+      test_interpolation({
+        property: 'offset-position',
+        from: neutralKeyframe,
+        to: '20px 20px',
+      }, [
+        {at: -0.3, expect: '7px 33px'},
+        {at: 0, expect: '10px 30px'},
+        {at: 0.3, expect: '13px 27px'},
+        {at: 0.6, expect: '16px 24px'},
+        {at: 1, expect: '20px 20px'},
+        {at: 1.5, expect: '25px 15px'},
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-position',
+        from: 'initial',
+        to: '20px 20px',
+      });
+
+      test_interpolation({
+        property: 'offset-position',
+        from: 'inherit',
+        to: '20px 20px',
+      }, [
+        {at: -0.3, expect: '33px 7px'},
+        {at: 0, expect: '30px 10px'},
+        {at: 0.3, expect: '27px 13px'},
+        {at: 0.6, expect: '24px 16px'},
+        {at: 1, expect: '20px 20px'},
+        {at: 1.5, expect: '15px 25px'},
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-position',
+        from: 'unset',
+        to: '20px 20px',
+      });
+
+      test_interpolation({
+        property: 'offset-position',
+        from: '0% 50%',
+        to: '100% 150%'
+      }, [
+        {at: -0.3, expect: '-30% 20%'},
+        {at: 0, expect: '0% 50%'},
+        {at: 0.3, expect: '30% 80%'},
+        {at: 0.6, expect: '60% 110%'},
+        {at: 1, expect: '100% 150%'},
+        {at: 1.5, expect: '150% 200%'}
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-position',
+        from: 'auto',
+        to: '20px 20px',
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-rotate-composition.html b/testing/web-platform/tests/css/motion/animation/offset-rotate-composition.html
new file mode 100644
index 0000000000..bf60c19abe
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-rotate-composition.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>offset-rotate composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+<meta name="assert" content="offset-rotate supports animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+// Angle rotations compose.
+test_composition({
+  property: 'offset-rotate',
+  underlying: '20deg',
+  addFrom: '10deg',
+  addTo: '20deg',
+}, [
+  {at: -0.3, expect: '27deg'},
+  {at: 0, expect: '30deg'},
+  {at: 0.3, expect: '33deg'},
+  {at: 0.6, expect: '36deg'},
+  {at: 1, expect: '40deg'},
+  {at: 1.5, expect: '45deg'},
+]);
+
+// Angle rotations don't compose with underlying 'auto'.
+test_composition({
+  property: 'offset-rotate',
+  underlying: 'auto 20deg',
+  addFrom: '10deg',
+  addTo: '20deg',
+}, [
+  {at: -0.3, expect: '7deg'},
+  {at: 0, expect: '10deg'},
+  {at: 0.3, expect: '13deg'},
+  {at: 0.6, expect: '16deg'},
+  {at: 1, expect: '20deg'},
+  {at: 1.5, expect: '25deg'},
+]);
+
+// Auto rotations compose with underlying 'auto'.
+test_composition({
+  property: 'offset-rotate',
+  underlying: 'auto 20deg',
+  addFrom: 'reverse 10deg',
+  addTo: 'auto 20deg',
+}, [
+  {at: -0.3, expect: 'auto 261deg'},
+  {at: 0, expect: 'auto 210deg'},
+  {at: 0.3, expect: 'auto 159deg'},
+  {at: 0.6, expect: 'auto 108deg'},
+  {at: 1, expect: 'auto 40deg'},
+  {at: 1.5, expect: 'auto -45deg'},
+]);
+
+// When we can't interpolate, we can't compose.
+test_composition({
+  property: 'offset-rotate',
+  underlying: '20deg',
+  addFrom: 'reverse 10deg',
+  addTo: '20deg',
+}, [
+  {at: -0.3, expect: 'auto 190deg'},
+  {at: 0, expect: 'auto 190deg'},
+  {at: 0.3, expect: 'auto 190deg'},
+  {at: 0.6, expect: '40deg'},
+  {at: 1, expect: '40deg'},
+  {at: 1.5, expect: '40deg'},
+]);
+
+test_composition({
+  property: 'offset-rotate',
+  underlying: '20deg',
+  replaceFrom: 'reverse 10deg',
+  addTo: '20deg',
+}, [
+  {at: -0.3, expect: 'auto 190deg'},
+  {at: 0, expect: 'auto 190deg'},
+  {at: 0.3, expect: 'auto 190deg'},
+  {at: 0.6, expect: '40deg'},
+  {at: 1, expect: '40deg'},
+  {at: 1.5, expect: '40deg'},
+]);
+
+// Angle rotations compose with underlying angle.
+test_composition({
+  property: 'offset-rotate',
+  underlying: '20deg',
+  addFrom: '10deg',
+  replaceTo: '10deg',
+}, [
+  {at: -0.3, expect: '36deg'},
+  {at: 0, expect: '30deg'},
+  {at: 0.3, expect: '24deg'},
+  {at: 0.6, expect: '18deg'},
+  {at: 1, expect: '10deg'},
+  {at: 1.5, expect: '0deg'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html
new file mode 100644
index 0000000000..55845108eb
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-rotate interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <meta name="assert" content="offset-rotate supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <style>
+    .parent {
+      offset-rotate: 30deg;
+    }
+    .target {
+      width: 80px;
+      height: 80px;
+      display: inline-block;
+      background-color: black;
+      margin-right: 5px;
+      offset-rotate: 10deg;
+    }
+    .expected {
+      background-color: green;
+      margin-right: 15px;
+    }
+  </style>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-rotate',
+        from: '100deg',
+        to: '180deg',
+      }, [
+        {at: -1, expect: '20deg'},
+        {at: 0, expect: '100deg'},
+        {at: 0.125, expect: '110deg'},
+        {at: 0.875, expect: '170deg'},
+        {at: 1, expect: '180deg'},
+        {at: 2, expect: '260deg'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 45deg',
+        to: 'auto 125deg',
+      }, [
+        {at: -1, expect: 'auto -35deg'},
+        {at: 0, expect: 'auto 45deg'},
+        {at: 0.125, expect: 'auto 55deg'},
+        {at: 0.875, expect: 'auto 115deg'},
+        {at: 1, expect: 'auto 125deg'},
+        {at: 2, expect: 'auto 205deg'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 170deg',
+        to: '100grad auto',
+      }, [
+        {at: -1, expect: 'auto 250deg'},
+        {at: 0, expect: 'auto 170deg'},
+        {at: 0.125, expect: 'auto 160deg'},
+        {at: 0.875, expect: 'auto 100deg'},
+        {at: 1, expect: '100grad auto'},
+        {at: 2, expect: 'auto 10deg'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto -280deg',
+        to: 'auto calc(90deg - 0.5turn - 300grad + 0rad)',
+      }, [
+        {at: -1, expect: 'auto -200deg'},
+        {at: 0, expect: 'auto -280deg'},
+        {at: 0.125, expect: 'auto -290deg'},
+        {at: 0.875, expect: 'auto -350deg'},
+        {at: 1, expect: 'auto calc(90deg - 0.5turn - 300grad + 0rad)'},
+        {at: 2, expect: 'auto -440deg'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 100deg',
+        to: 'reverse',
+      }, [
+        {at: -1, expect: 'auto 20deg'},
+        {at: 0, expect: 'auto 100deg'},
+        {at: 0.125, expect: 'auto 110deg'},
+        {at: 0.875, expect: 'auto 170deg'},
+        {at: 1, expect: 'reverse'},
+        {at: 2, expect: 'auto 260deg'}
+      ]);
+
+      // No interpolation between auto/reverse and angle.
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: 'reverse 90deg',
+        to: '360deg',
+      });
+
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: '6rad',
+        to: 'auto',
+      });
+
+      // Neutral keyframes use the inline style.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: neutralKeyframe,
+        to: '20deg',
+      }, [
+        {at: -0.3, expect: '7deg'},
+        {at: 0, expect: '10deg'},
+        {at: 0.3, expect: '13deg'},
+        {at: 0.6, expect: '16deg'},
+        {at: 1, expect: '20deg'},
+        {at: 1.5, expect: '25deg'},
+      ]);
+
+      // No interpolation to an angle from the initial value 'auto'.
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: 'initial',
+        to: '20deg',
+      });
+
+      // 'inherit' keyframes use the parent style.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'inherit',
+        to: '20deg',
+      }, [
+        {at: -0.3, expect: '33deg'},
+        {at: 0, expect: '30deg'},
+        {at: 0.3, expect: '27deg'},
+        {at: 0.6, expect: '24deg'},
+        {at: 1, expect: '20deg'},
+        {at: 1.5, expect: '15deg'},
+      ]);
+
+      // No interpolation to an angle from the initial value 'auto'.
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: 'unset',
+        to: '20deg',
+      });
+
+      // Interpolation between angles.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: '10deg',
+        to: '50deg'
+      }, [
+        {at: -0.3, expect: '-2deg'},
+        {at: 0, expect: '10deg'},
+        {at: 0.3, expect: '22deg'},
+        {at: 0.6, expect: '34deg'},
+        {at: 1, expect: '50deg'},
+        {at: 1.5, expect: '70deg'},
+      ]);
+
+      // Regression test for crbug.com/918430.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: '800deg',
+        to: '900deg'
+      }, [
+        {at: -3.40282e+38, expect: '-3.40282e+38deg'},
+      ]);
+
+      // Interpolation between auto angles.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 10deg',
+        to: 'auto 50deg'
+      }, [
+        {at: -0.3, expect: 'auto -2deg'},
+        {at: 0, expect: 'auto 10deg'},
+        {at: 0.3, expect: 'auto 22deg'},
+        {at: 0.6, expect: 'auto 34deg'},
+        {at: 1, expect: 'auto 50deg'},
+        {at: 1.5, expect: 'auto 70deg'},
+      ]);
+
+      // 'reverse' is like 'auto 180deg'.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'reverse -170deg',
+        to: 'reverse -130deg'
+      }, [
+        {at: -0.3, expect: 'auto -2deg'},
+        {at: 0, expect: 'auto 10deg'},
+        {at: 0.3, expect: 'auto 22deg'},
+        {at: 0.6, expect: 'auto 34deg'},
+        {at: 1, expect: 'auto 50deg'},
+        {at: 1.5, expect: 'auto 70deg'},
+      ]);
+
+      // Interpolation between 'auto' and 'reverse'.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 10deg',
+        to: 'reverse -130deg'
+      }, [
+        {at: -0.3, expect: 'auto -2deg'},
+        {at: 0, expect: 'auto 10deg'},
+        {at: 0.3, expect: 'auto 22deg'},
+        {at: 0.6, expect: 'auto 34deg'},
+        {at: 1, expect: 'auto 50deg'},
+        {at: 1.5, expect: 'auto 70deg'},
+      ]);
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'reverse -170deg',
+        to: 'auto 50deg'
+      }, [
+        {at: -0.3, expect: 'auto -2deg'},
+        {at: 0, expect: 'auto 10deg'},
+        {at: 0.3, expect: 'auto 22deg'},
+        {at: 0.6, expect: 'auto 34deg'},
+        {at: 1, expect: 'auto 50deg'},
+        {at: 1.5, expect: 'auto 70deg'},
+      ]);
+
+      // No interpolation between auto/reverse and angle.
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 200deg',
+        to: '300deg'
+      });
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: '300deg',
+        to: 'reverse 20deg'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-distance-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-distance-interpolation-001.html
new file mode 100644
index 0000000000..88441f5b54
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-distance-interpolation-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>offset-distance interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <link rel="match" href="offset-path-path-interpolation-ref.html">
+    <meta name="assert" content="offset-distance supports animation.">
+    <style>
+      @keyframes anim {
+        from { offset-distance: 0%; }
+        to   { offset-distance: 100%; }
+      }
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path("m 50 150 h 100");
+        animation: anim 10s -5s paused linear;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+  <script>
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-001.html
new file mode 100644
index 0000000000..0f27651896
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>offset-path path() interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-path-interpolation-ref.html">
+    <meta name="assert" content="offset-path path supports animation.">
+    <style>
+      @keyframes anim {
+        from { offset-path: path("m 100 100 l 100 100"); }
+        to   { offset-path: path("m 100 200 l 100 -100"); }
+      }
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        animation: anim 10s -5s paused linear;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+  <script>
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-ref.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-ref.html
new file mode 100644
index 0000000000..9bc2409061
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>offset-path path interpolation reference</title>
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path("M 100 150 L 200 150");
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-001.html
new file mode 100644
index 0000000000..c554264032
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>CSS Motion Path: Combined transformation matrix interpolation</title>
+    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
+    <link rel="match" href="offset-path-with-transforms-ref.html">
+    <meta name="assert" content="This tests animating combined transformation matrix.">
+    <style>
+      @keyframes anim {
+        to {
+          translate: 0px 100px;
+          offset-distance: 100%;
+          transform: translateX(-100px);
+        }
+      }
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        offset-path: path("M25 0v100");
+        animation: anim 10s -5s paused linear;
+      }
+    </style>
+  </head>
+  <body onload="load()">
+    <div id="target"></div>
+    <div style='width: 50px; height: 100px; background-color: red;'></div>
+  </body>
+  <script>
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-ref.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-ref.html
new file mode 100644
index 0000000000..413369e0ef
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: Combined transformation matrix interpolation reference</title>
+    <style>
+      #target {
+        width: 50px;
+        height: 100px;
+        background-color: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-rotate-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-rotate-interpolation-001.html
new file mode 100644
index 0000000000..360caeea68
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-rotate-interpolation-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>offset-rotate interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-path-path-interpolation-ref.html">
+    <meta name="assert" content="offset-rotate supports animation.">
+    <style>
+      @keyframes anim {
+        from { offset-rotate: auto; }
+        to   { offset-rotate: reverse; }
+      }
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path("m 100 150 v -100");
+        animation: anim 10s -5s paused linear;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+  <script>
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/motion/change-offset-path.html b/testing/web-platform/tests/css/motion/change-offset-path.html
new file mode 100644
index 0000000000..bdc01a857b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/change-offset-path.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Change offset-path property</title>
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+<link rel="help" href="https://crbug.com/1365255">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<style>
+#target {
+  will-change: transform;
+  transform: translate(50px, 50px);
+  offset-path: path('M 0 0 L 200 200 Z');
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+#container {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    target.style.offsetPath = 'path(\'M 0 0 Z\')';
+    document.documentElement.removeAttribute('class');
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/css/motion/inheritance.html b/testing/web-platform/tests/css/motion/inheritance.html
new file mode 100644
index 0000000000..4a82f32cd5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/inheritance.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Motion Path properties</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#property-index">
+<meta name="assert" content="Properties inherit or not according to the spec.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="container">
+<div id="target"></div>
+</div>
+<script>
+assert_not_inherited('offset-anchor', 'auto', '2px 3px');
+assert_not_inherited('offset-distance', '0px', '4px');
+assert_not_inherited('offset-path', 'none', 'path("M 5 6 H 7")');
+assert_not_inherited('offset-position', 'auto', '8px 9px');
+// https://github.com/w3c/fxtf-drafts/issues/340
+assert_not_inherited('offset-rotate', ['auto 0deg', 'auto'], '90deg');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-001.html b/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-001.html
new file mode 100644
index 0000000000..ac893bae65
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Motion Path: Default offset-anchor with transform-box: fill-box</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+<link rel="match" href="offset-anchor-transform-box-fill-box-ref.html">
+<meta name="assert" content="Tests default offset-anchor together with a fill-box transform-box">
+<style>
+#target {
+  transform-box: fill-box;
+  transform-origin: 25% 25%;
+  offset-path: path("M75,-25v100");
+  offset-distance: 50%;
+}
+</style>
+<svg width="400" height="400">
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" x="150" y="100" width="100" height="100" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-002.html b/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-002.html
new file mode 100644
index 0000000000..563ffdaf1a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>CSS Motion Path: offset-anchor with transform-box: fill-box</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+<link rel="match" href="offset-anchor-transform-box-fill-box-ref.html">
+<meta name="assert" content="Tests offset-anchor together with a fill-box transform-box">
+<style>
+#target {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  offset-anchor: 25% 25%;
+  offset-path: path("M75,-25v100");
+  offset-distance: 50%;
+}
+</style>
+<svg width="400" height="400">
+  <rect width="100" height="100" fill="red"/>
+  <rect id="target" x="150" y="100" width="100" height="100" fill="green"/>
+</svg>
diff --git a/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-003.html b/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-003.html
new file mode 100644
index 0000000000..8972b2ecd6
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-003.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>CSS Motion Path: offset-anchor with transform-box: fill-box on the svg g element</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+<link rel="match" href="offset-anchor-transform-box-fill-box-ref.html">
+<meta name="assert" content="Tests offset-anchor together with a fill-box transform-box on the <g> element">
+<style>
+#target {
+  transform-box: fill-box;
+  offset-anchor: 25% 25%;
+  offset-path: path("M75,-25v100");
+  offset-distance: 50%;
+}
+</style>
+<svg width="400" height="400">
+  <rect width="100" height="100" fill="red"/>
+  <g id='target'>
+    <rect x="150" y="100" width="100" height="100" fill="green"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-ref.html b/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-ref.html
new file mode 100644
index 0000000000..f718ea6abf
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-anchor-transform-box-fill-box-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="width: 100px; height: 100px; background-color: green"></div>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-001.html b/testing/web-platform/tests/css/motion/offset-distance-001.html
new file mode 100644
index 0000000000..a24f046bde
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#calculating-the-computed-distance-along-a-path">
+    <link rel="match" href="offset-distance-ref.html">
+    <meta name="assert" content="This tests used offset-distance when offset-path is a closed loop.">
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        offset-path: path('m 0 0 h 200 v 150 z');
+        offset-distance: 20%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-002.html b/testing/web-platform/tests/css/motion/offset-distance-002.html
new file mode 100644
index 0000000000..ba253b3bef
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#calculating-the-computed-distance-along-a-path">
+    <link rel="match" href="offset-distance-ref.html">
+    <meta name="assert" content="This tests used offset-distance when offset-path is a closed loop.">
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        offset-path: path('m 0 0 h 200 v 150 z');
+        offset-distance: 120%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-003.html b/testing/web-platform/tests/css/motion/offset-distance-003.html
new file mode 100644
index 0000000000..6f52b95592
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#calculating-the-computed-distance-along-a-path">
+    <link rel="match" href="offset-distance-ref.html">
+    <meta name="assert" content="This tests used offset-distance when offset-path is a closed loop.">
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        offset-path: path('m 0 0 h 200 v 150 z');
+        offset-distance: -280%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-004.html b/testing/web-platform/tests/css/motion/offset-distance-004.html
new file mode 100644
index 0000000000..e56384bb7f
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-004.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#calculating-the-computed-distance-along-a-path">
+    <link rel="match" href="offset-distance-ref.html">
+    <meta name="assert" content="This tests used offset-distance when total length of the path is 0.">
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        offset-path: path('m 120 0 h 0 v 0 z');
+        offset-distance: 20%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-005.html b/testing/web-platform/tests/css/motion/offset-distance-005.html
new file mode 100644
index 0000000000..ff7e855381
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-005.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#calculating-the-computed-distance-along-a-path">
+    <link rel="match" href="offset-distance-ref.html">
+    <meta name="assert" content="This tests used offset-distance when total length of the path is 0.">
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        offset-path: path('m 120 0 h 0 v 0 z');
+        offset-distance: 120%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-006.html b/testing/web-platform/tests/css/motion/offset-distance-006.html
new file mode 100644
index 0000000000..99b1ce076c
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-006.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#calculating-the-computed-distance-along-a-path">
+    <link rel="match" href="offset-distance-ref.html">
+    <meta name="assert" content="This tests used offset-distance when total length of the path is 0.">
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        offset-path: path('m 120 0 h 0 v 0 z');
+        offset-distance: -280%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-007.html b/testing/web-platform/tests/css/motion/offset-distance-007.html
new file mode 100644
index 0000000000..f28a7748cc
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-007.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#calculating-the-computed-distance-along-a-path">
+    <link rel="match" href="offset-distance-ref.html">
+    <meta name="assert" content="This tests used offset-distance when offset-path is an unclosed interval.">
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        offset-path: path('m -80 0 h 1000');
+        offset-distance: 20%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-008.html b/testing/web-platform/tests/css/motion/offset-distance-008.html
new file mode 100644
index 0000000000..1fcda8c366
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-008.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#calculating-the-computed-distance-along-a-path">
+    <link rel="match" href="offset-distance-ref.html">
+    <meta name="assert" content="This tests used offset-distance when offset-path is an unclosed interval.">
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        offset-path: path('m -80 0 h 200');
+        offset-distance: 120%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-009.html b/testing/web-platform/tests/css/motion/offset-distance-009.html
new file mode 100644
index 0000000000..ea345483c4
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-009.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#calculating-the-computed-distance-along-a-path">
+    <link rel="match" href="offset-distance-ref.html">
+    <meta name="assert" content="This tests used offset-distance when offset-path is an unclosed interval.">
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        offset-path: path('m 120 0 h 200 v 150');
+        offset-distance: -280%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-distance-ref.html b/testing/web-platform/tests/css/motion/offset-distance-ref.html
new file mode 100644
index 0000000000..653dd8b105
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-distance-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-distance</title>
+    <style>
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 40px;
+        background-color: lime;
+        transform-origin: 0% 0%;
+        transform: translateX(120px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-geometry-box-ref.html b/testing/web-platform/tests/css/motion/offset-path-geometry-box-ref.html
new file mode 100644
index 0000000000..eb7646db66
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-geometry-box-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(geometry-box) paths</title>
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: translate(0px, 0px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-geometry-box.html b/testing/web-platform/tests/css/motion/offset-path-geometry-box.html
new file mode 100644
index 0000000000..1e9399441c
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-geometry-box.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(basic-shape) paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-geometry-box-ref.html">
+    <meta name="assert" content="This tests that path(<geometry-box>) generates a rotation and translation.">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: stroke-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-huge-angle-deg-001-crash.html b/testing/web-platform/tests/css/motion/offset-path-huge-angle-deg-001-crash.html
new file mode 100644
index 0000000000..1e3ddfafe1
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-huge-angle-deg-001-crash.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<title>offset-path test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+<meta name="assert" content="Large values for offset-path: ray() don't crash">
+
+<style>
+div {
+    offset-path: ray(5165115062564010418886627101859128300222766327801285816786500868064380377045897161681727293067285963498475230944769226741073725068514127966647263258596746856069391481208581271438825453738877078391799112031939038723167596920773364756130563441390791979369626922790366402464887464920502999360570388896433548829612009435379381399038315373628025221199372687681374830995409961497560716647839914164565799020605030287737552269627690337042004538002595445290196546632023324714910033826404818995488649610987deg farthest-side);
+    clip-path: circle(14% at left bottom);
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-huge-angle-grad-001-crash.html b/testing/web-platform/tests/css/motion/offset-path-huge-angle-grad-001-crash.html
new file mode 100644
index 0000000000..c76933ef51
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-huge-angle-grad-001-crash.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<title>offset-path test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+<meta name="assert" content="Large values for offset-path: ray() don't crash">
+
+<style>
+div {
+    offset-path: ray(5165115062564010418886627101859128300222766327801285816786500868064380377045897161681727293067285963498475230944769226741073725068514127966647263258596746856069391481208581271438825453738877078391799112031939038723167596920773364756130563441390791979369626922790366402464887464920502999360570388896433548829612009435379381399038315373628025221199372687681374830995409961497560716647839914164565799020605030287737552269627690337042004538002595445290196546632023324714910033826404818995488649610987grad farthest-side);
+    clip-path: circle(14% at left bottom);
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-huge-angle-turn-001-crash.html b/testing/web-platform/tests/css/motion/offset-path-huge-angle-turn-001-crash.html
new file mode 100644
index 0000000000..c1b06c93d5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-huge-angle-turn-001-crash.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<title>offset-path test</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+<meta name="assert" content="Large values for offset-path: ray() don't crash">
+
+<style>
+div {
+    offset-path: ray(5165115062564010418886627101859128300222766327801285816786500868064380377045897161681727293067285963498475230944769226741073725068514127966647263258596746856069391481208581271438825453738877078391799112031939038723167596920773364756130563441390791979369626922790366402464887464920502999360570388896433548829612009435379381399038315373628025221199372687681374830995409961497560716647839914164565799020605030287737552269627690337042004538002595445290196546632023324714910033826404818995488649610987turn farthest-side);
+    clip-path: circle(14% at left bottom);
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-001-ref.html
new file mode 100644
index 0000000000..63c0a2ea88
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: rotate(45deg) translate(20px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-001.html b/testing/web-platform/tests/css/motion/offset-path-ray-001.html
new file mode 100644
index 0000000000..26b3b11c4e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-001-ref.html">
+    <meta name="assert" content="This tests that ray() generates a rotation and translation.">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(135deg closest-side);
+        offset-distance: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-002.html b/testing/web-platform/tests/css/motion/offset-path-ray-002.html
new file mode 100644
index 0000000000..7c02365778
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-001-ref.html">
+    <meta name="assert" content="This tests that ray() generates a rotation and translation.">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(135deg closest-side);
+        offset-distance: 20%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-003-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-003-ref.html
new file mode 100644
index 0000000000..7261167cd7
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-003-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <style>
+      #container {
+        width: 400px;
+        height: 400px;
+      }
+      #target {
+        position: relative;
+        left: 100px;
+        top: 100px;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: rotate(45deg) translate(100px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-003.html b/testing/web-platform/tests/css/motion/offset-path-ray-003.html
new file mode 100644
index 0000000000..4dc27c4782
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-003.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-003-ref.html">
+    <meta name="assert" content="This tests that ray() generates a rotation and translation.">
+    <style>
+      #container {
+        width: 400px;
+        height: 400px;
+      }
+      #target {
+        position: relative;
+        left: 100px;
+        top: 100px;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(135deg closest-side);
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-004.html b/testing/web-platform/tests/css/motion/offset-path-ray-004.html
new file mode 100644
index 0000000000..e6bf08f0a6
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-004.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-003-ref.html">
+    <meta name="assert" content="This tests that ray() generates a rotation and translation.">
+    <style>
+      #container {
+        width: 150px;
+        height: 150px;
+      }
+      #target {
+        position: relative;
+        left: 100px;
+        top: 100px;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(135deg farthest-side);
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-005-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-005-ref.html
new file mode 100644
index 0000000000..525d747053
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-005-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <style>
+      #container {
+        width: 400px;
+        height: 400px;
+      }
+      #target {
+        position: relative;
+        left: 120px;
+        top: 160px;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: rotate(45deg) translate(200px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-005.html b/testing/web-platform/tests/css/motion/offset-path-ray-005.html
new file mode 100644
index 0000000000..a1aa8e110e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-005.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-005-ref.html">
+    <meta name="assert" content="This tests that ray() generates a rotation and translation.">
+    <style>
+      #container {
+        width: 400px;
+        height: 400px;
+      }
+      #target {
+        position: relative;
+        left: 120px;
+        top: 160px;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(135deg closest-corner);
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-006.html b/testing/web-platform/tests/css/motion/offset-path-ray-006.html
new file mode 100644
index 0000000000..dbbd12bef0
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-006.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-005-ref.html">
+    <meta name="assert" content="This tests that ray() generates a rotation and translation.">
+    <style>
+      #container {
+        width: 200px;
+        height: 200px;
+      }
+      #target {
+        position: relative;
+        left: 120px;
+        top: 160px;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(135deg farthest-corner);
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-007-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-007-ref.html
new file mode 100644
index 0000000000..a48d9f0a2a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-007-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <style>
+      #container {
+        width: 400px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 200px;
+        top: 100px;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: rotate(90deg) translate(200px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-007.html b/testing/web-platform/tests/css/motion/offset-path-ray-007.html
new file mode 100644
index 0000000000..1e75771f48
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-007.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-007-ref.html">
+    <meta name="assert" content="This tests that ray() generates a rotation and translation.">
+    <style>
+      #container {
+        width: 400px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 200px;
+        top: 100px;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(180deg sides);
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-008-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-008-ref.html
new file mode 100644
index 0000000000..2c3720c44c
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-008-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <style>
+      #container {
+        width: 200px;
+        height: 200px;
+      }
+      #target {
+        position: relative;
+        left: 130%;
+        top: 60%;
+        width: 40px;
+        height: 40px;
+        background-color: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-008.html b/testing/web-platform/tests/css/motion/offset-path-ray-008.html
new file mode 100644
index 0000000000..97d9cfb274
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-008.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-008-ref.html">
+    <meta name="assert" content="The initial position is outside the containing block.">
+    <style>
+      #container {
+        width: 200px;
+        height: 200px;
+      }
+      #target {
+        position: relative;
+        left: 140%;
+        top: 70%;
+        width: 40px;
+        height: 40px;
+        background-color: lime;
+        offset-path: ray(-90deg sides);
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-009-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-009-ref.html
new file mode 100644
index 0000000000..95b5436875
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-009-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <style>
+      #container {
+        width: 200px;
+        height: 200px;
+      }
+      #target {
+        position: relative;
+        left: 130%;
+        top: 60%;
+        width: 40px;
+        height: 40px;
+        background-color: lime;
+        transform: translateY(60px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-009.html b/testing/web-platform/tests/css/motion/offset-path-ray-009.html
new file mode 100644
index 0000000000..c4986eb5f3
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-009.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-009-ref.html">
+    <meta name="assert" content="The initial position is outside the containing block.">
+    <style>
+      #container {
+        width: 200px;
+        height: 200px;
+      }
+      #target {
+        position: relative;
+        left: 140%;
+        top: 70%;
+        width: 40px;
+        height: 40px;
+        background-color: lime;
+        offset-path: ray(180deg closest-side);
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-001-ref.html
new file mode 100644
index 0000000000..24a823f9ca
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <style>
+      #container {
+        width: 300px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 150px;
+        top: 150px;
+        width: 100px;
+        height: 100px;
+        background-color: lime;
+        transform: rotate(0deg) translate(50px, -150px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-001.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-001.html
new file mode 100644
index 0000000000..83e169298f
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-contain-001-ref.html">
+    <meta name="assert" content="This tests that the element should be contained in ray() path circle.">
+    <style>
+      #container {
+        width: 300px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 150px;
+        top: 150px;
+        width: 100px;
+        height: 100px;
+        background-color: lime;
+        offset-path: ray(45deg closest-corner contain);
+        offset-rotate: 0deg;
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-002-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-002-ref.html
new file mode 100644
index 0000000000..92ccb13af8
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-002-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <style>
+      #container {
+        width: 300px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 100px;
+        top: 100px;
+        width: 100px;
+        height: 100px;
+        background-color: lime;
+        /* The vertical movement is about sqrt(150^2 - 50^2) - 50 */
+        transform: translateY(91.42px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-002.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-002.html
new file mode 100644
index 0000000000..db7710cb43
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-contain-002-ref.html">
+    <meta name="assert" content="This tests that the element should be contained in ray() path circle.">
+    <style>
+      #container {
+        width: 300px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 150px;
+        top: 150px;
+        width: 100px;
+        height: 100px;
+        background-color: lime;
+        offset-path: ray(180deg closest-side contain);
+        offset-rotate: 0deg;
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-003-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-003-ref.html
new file mode 100644
index 0000000000..3ad660eb2f
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-003-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <style>
+      #container {
+        width: 300px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 100px;
+        top: 100px;
+        width: 100px;
+        height: 100px;
+        background-color: lime;
+        /* The movement is about 150 - 50 * sqrt(2) */
+        transform: rotate(-45deg) translate(79.29px) rotate(45deg);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-003.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-003.html
new file mode 100644
index 0000000000..08705ad945
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-003.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-contain-003-ref.html">
+    <meta name="assert" content="This tests that the element should be contained in ray() path circle.">
+    <style>
+      #container {
+        width: 300px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 150px;
+        top: 150px;
+        width: 100px;
+        height: 100px;
+        background-color: lime;
+        offset-path: ray(45deg closest-side contain);
+        offset-rotate: 0deg;
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-004-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-004-ref.html
new file mode 100644
index 0000000000..38b0d44fb1
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-004-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <style>
+      #container {
+        width: 300px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 100px;
+        top: 100px;
+        width: 100px;
+        height: 100px;
+        background-color: lime;
+        /* The movement is about sqrt(150^2 - 50^2) - 50 */
+        transform: rotate(-45deg) translate(91.42px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-004.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-004.html
new file mode 100644
index 0000000000..9848259133
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-004.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-contain-004-ref.html">
+    <meta name="assert" content="This tests that the element should be contained in ray() path circle.">
+    <style>
+      #container {
+        width: 300px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 150px;
+        top: 150px;
+        width: 100px;
+        height: 100px;
+        background-color: lime;
+        offset-path: ray(45deg closest-side contain);
+        offset-rotate: auto;
+        offset-distance: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-005-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-005-ref.html
new file mode 100644
index 0000000000..c1dafc477d
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-005-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <style>
+      #container {
+        width: 250px;
+        height: 250px;
+        transform: translate(100px);
+      }
+      #target {
+        position: relative;
+        left: 50px;
+        top: 50px;
+        width: 150px;
+        height: 25px;
+        background-color: lime;
+        /*
+         * The original path length is 50px, which is not enough to contain
+         * the element entirely, so it should be increased.
+         * "75px" is just the center of the element, which makes the path
+         * length increase minimally.
+         * Besides, -75px = (-150px * 2) + 225px, the used offset distance is
+         * -225px in this case.
+         * Note: offset-anchor is "200% -300%", and ray angle is -90deg.
+         */
+        transform: translate(calc(-75px), calc(25px * 3));
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-contain-005.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-005.html
new file mode 100644
index 0000000000..0ec0c25fb8
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-005.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-ray-contain-005-ref.html">
+    <meta name="assert" content="This tests that ray() with contain and the path length increases.">
+    <style>
+      #container {
+        width: 250px;
+        height: 250px;
+        /* move container to right 100px to make sure we render the element
+           properly */
+        transform: translate(100px);
+      }
+      #target {
+        position: relative;
+        left: 50px;
+        top: 50px;
+        width: 150px;
+        height: 25px;
+        background-color: lime;
+        offset-path: ray(-90deg closest-side contain);
+        offset-anchor: 200% -300%;
+        offset-rotate: 0deg;
+        offset-distance: 0%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-serialization.html b/testing/web-platform/tests/css/motion/offset-path-serialization.html
new file mode 100644
index 0000000000..7c835c7371
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-serialization.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: path serialization</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/">
+<h:meta name="assert" content="computed offset-path is serialized using absolute commands"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+'use strict';
+
+test(function() {
+  var target = document.getElementById('target');
+
+  target.style.offsetPath = 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")';
+  assert_equals(target.style.offsetPath, 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")');
+  assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 20 Q 40 80 50 70 Q 150 140 140 150")');
+
+  target.style.offsetPath = "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z')";
+  assert_equals(target.style.offsetPath, 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")');
+  assert_equals(getComputedStyle(target).offsetPath, 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 260 220 Z")');
+
+  target.style.offsetPath = 'path("m 10 20   l 20 30   Z   l 50 60   Z   m 70 80   l 90 60   Z   t 70 120")';
+  assert_equals(target.style.offsetPath, 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")');
+  assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 20 L 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220")');
+
+  target.style.offsetPath = 'path("m 10.0 170.0 h 90.00 v 30.00 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")';
+  assert_equals(target.style.offsetPath, 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")');
+  assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 170 H 100 V 200 M 100 200 S 101 202 103 204 Z C 109 208 107 206 105 204")');
+
+  target.style.offsetPath = '  path(  "m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50"  )  ';
+  assert_equals(target.style.offsetPath, 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")');
+  assert_equals(getComputedStyle(target).offsetPath, 'path("M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120")');
+
+  target.style.offsetPath = 'path("M 1 2 H 3 v 4 h 5 V 6 h 7 v 8")';
+  assert_equals(target.style.offsetPath, 'path("M 1 2 H 3 v 4 h 5 V 6 h 7 v 8")');
+  assert_equals(getComputedStyle(target).offsetPath, 'path("M 1 2 H 3 V 6 H 8 V 6 H 15 V 14")');
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-ref.html
new file mode 100644
index 0000000000..a659b287fd
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(basic-shape) paths</title>
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: translate(35px, 44px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape.html b/testing/web-platform/tests/css/motion/offset-path-shape.html
new file mode 100644
index 0000000000..2750fd9f2f
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(basic-shape) paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-shape-ref.html">
+    <meta name="assert" content="This tests that path(<basic-shape>) generates a rotation and translation.">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: inset(22% 12% 15px 35px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-string-001.html b/testing/web-platform/tests/css/motion/offset-path-string-001.html
new file mode 100644
index 0000000000..79d957d82b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-string-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(string) paths</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-string-ref.html">
+    <meta name="assert" content="This tests that path(<string>) generates a rotation and translation.">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path('m 0 0 v 200');
+        offset-distance: 120px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-string-002.html b/testing/web-platform/tests/css/motion/offset-path-string-002.html
new file mode 100644
index 0000000000..0d2fcbbb66
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-string-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(string) paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-string-ref.html">
+    <meta name="assert" content="This tests that path(<string>) generates a rotation and translation.">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path('m 0 120 v 200');
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-string-ref.html b/testing/web-platform/tests/css/motion/offset-path-string-ref.html
new file mode 100644
index 0000000000..5c5ff5f6f2
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-string-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(string) paths</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: rotate(90deg) translate(120px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-ref.html b/testing/web-platform/tests/css/motion/offset-path-url-ref.html
new file mode 100644
index 0000000000..c5f8ec74e8
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(url) paths</title>
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: rotate(90deg) translate(120px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url.html b/testing/web-platform/tests/css/motion/offset-path-url.html
new file mode 100644
index 0000000000..b8cd89104f
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(url) paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-url-ref.html">
+    <meta name="assert" content="This tests that path(<url>) generates a rotation and translation.">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: url(#svgPath);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+    <svg height="220" width="300" xmlns="http://www.w3.org/2000/svg">
+        <path id="svgPath" d='m 0 120 v 200'/>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-rotate-001.html b/testing/web-platform/tests/css/motion/offset-rotate-001.html
new file mode 100644
index 0000000000..55147698a7
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-rotate-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-rotate</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-rotate-ref.html">
+    <meta name="assert" content="This tests offset-rotate auto">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(120deg closest-corner);
+        offset-rotate: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-rotate-002.html b/testing/web-platform/tests/css/motion/offset-rotate-002.html
new file mode 100644
index 0000000000..fb301be24e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-rotate-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-rotate</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-rotate-ref.html">
+    <meta name="assert" content="This tests offset-rotate reverse <angle>">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(-120deg closest-corner);
+        offset-rotate: reverse 60deg;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-rotate-003.html b/testing/web-platform/tests/css/motion/offset-rotate-003.html
new file mode 100644
index 0000000000..522ff35b05
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-rotate-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-rotate</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-rotate-ref.html">
+    <meta name="assert" content="This tests offset-rotate <angle>">
+    <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-57" />
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path('m 0 0 v -200 -200') ;
+        offset-rotate: 30deg;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-rotate-004.html b/testing/web-platform/tests/css/motion/offset-rotate-004.html
new file mode 100644
index 0000000000..33783d423b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-rotate-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>CSS Motion Path: offset-rotate</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-rotate-ref.html">
+    <meta name="assert" content="This tests offset-rotate auto with path()">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-rotate: auto;
+      }
+    </style>
+    <script>
+      function test() {
+        let target = document.getElementById('target');
+        // Get a path which has the same direction as "ray(120deg ...)"
+        let verticalMove = 100 * Math.tan(30 * Math.PI / 180);
+        target.style.offsetPath = `path("m 0 0 l 100 ${verticalMove}")`;
+        window.getComputedStyle(target).offsetPath;
+
+        window.requestAnimationFrame(function() {
+          document.documentElement.removeAttribute('class');
+        });
+      }
+    </script>
+  </head>
+  <body onload='test()'>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-rotate-005.html b/testing/web-platform/tests/css/motion/offset-rotate-005.html
new file mode 100644
index 0000000000..9b1c40ed11
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-rotate-005.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>CSS Motion Path: offset-rotate</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-rotate-ref.html">
+    <meta name="assert" content="This tests offset-rotate reverse <angle> with path()">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-rotate: reverse 60deg;
+      }
+    </style>
+    <script>
+      function test() {
+        let target = document.getElementById('target');
+        // Get a path which has the same direction as "ray(-120deg ...)"
+        let verticalMove = 100 * Math.tan(30 * Math.PI / 180);
+        target.style.offsetPath = `path("m 0 0 l -100 ${verticalMove}")`;
+        window.getComputedStyle(target).offsetPath;
+
+        window.requestAnimationFrame(function() {
+          document.documentElement.removeAttribute('class');
+        });
+      }
+    </script>
+  </head>
+  <body onload='test()'>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-rotate-ref.html b/testing/web-platform/tests/css/motion/offset-rotate-ref.html
new file mode 100644
index 0000000000..ec22768e96
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-rotate-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-rotate</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: rotate(30deg);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-supports-calc.html b/testing/web-platform/tests/css/motion/offset-supports-calc.html
new file mode 100644
index 0000000000..907694f7fc
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-supports-calc.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: calc values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/">
+<link rel="help" href="https://drafts.csswg.org/css-values-3/#calc-notation">
+<meta name="assert" content="calc values are supported in offset properties.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #target {
+    font-size: 20px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+'use strict';
+
+test(function(){
+  target.style = 'offset-position: calc(30px + 20%) calc(-200px + 8em + 100%);';
+  assert_equals(getComputedStyle(target).offsetPosition, 'calc(20% + 30px) calc(100% - 40px)');
+}, 'offset-position supports calc');
+
+test(function(){
+  target.style = 'offset-path: ray(calc(1turn - 100grad) closest-side);';
+  assert_equals(getComputedStyle(target).offsetPath, 'ray(270deg closest-side)');
+}, 'offset-path supports calc');
+
+test(function(){
+  target.style = 'offset-distance: calc(-100px + 50%);';
+  assert_equals(getComputedStyle(target).offsetDistance, 'calc(50% - 100px)');
+}, 'offset-distance supports calc');
+
+test(function(){
+  target.style = 'offset-rotate: auto calc(1turn - 100grad);';
+  assert_equals(getComputedStyle(target).offsetRotate, 'auto 270deg');
+}, 'offset-rotate supports calc');
+
+test(function(){
+  target.style = 'offset-anchor: calc(30px + 20%) calc(-200px + 8em + 100%);';
+  assert_equals(getComputedStyle(target).offsetAnchor, 'calc(20% + 30px) calc(100% - 40px)');
+}, 'offset-anchor supports calc');
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-anchor-computed.html b/testing/web-platform/tests/css/motion/parsing/offset-anchor-computed.html
new file mode 100644
index 0000000000..fc9ddb3d0c
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-anchor-computed.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: getComputedStyle().offsetAnchor</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+<meta name="assert" content="offset-anchor is 'auto' or a computed position.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("offset-anchor", "auto");
+
+test_computed_value("offset-anchor", "left bottom", "0% 100%");
+test_computed_value("offset-anchor", "center center", "50% 50%");
+test_computed_value("offset-anchor", "right center", "100% 50%");
+test_computed_value("offset-anchor", "center top", "50% 0%");
+test_computed_value("offset-anchor", "center bottom", "50% 100%");
+test_computed_value("offset-anchor", "calc(20% - 5em) center", "calc(20% - 200px) 50%");
+test_computed_value("offset-anchor", "right 4em", "100% 160px");
+test_computed_value("offset-anchor", "10px 20%");
+test_computed_value("offset-anchor", "left -10px top -20%", "-10px -20%");
+test_computed_value("offset-anchor", "right 10% bottom 20em", "90% calc(100% - 800px)");
+test_computed_value("offset-anchor", "top 10px right -20%", "120% 10px");
+test_computed_value("offset-anchor", "left 10% bottom 20em", "10% calc(100% - 800px)");
+test_computed_value('offset-anchor', 'calc(10px - 0.5em) calc(10px + 0.5em)', '-10px 30px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-anchor-parsing-invalid.html b/testing/web-platform/tests/css/motion/parsing/offset-anchor-parsing-invalid.html
new file mode 100644
index 0000000000..af32ae2c5a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-anchor-parsing-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-anchor with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+<meta name="assert" content="offset-anchor supports only the grammar 'auto | <position>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("offset-anchor", "none");
+test_invalid_value("offset-anchor", "30deg");
+test_invalid_value("offset-anchor", "left 10% top");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-anchor-parsing-valid.html b/testing/web-platform/tests/css/motion/parsing/offset-anchor-parsing-valid.html
new file mode 100644
index 0000000000..6cb4d44117
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-anchor-parsing-valid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-anchor with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+<meta name="assert" content="offset-anchor supports the full grammar 'auto | <position>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("offset-anchor", "auto");
+
+test_valid_value("offset-anchor", "left bottom");
+test_valid_value("offset-anchor", "center center");
+test_valid_value("offset-anchor", "right center");
+test_valid_value("offset-anchor", "center top");
+test_valid_value("offset-anchor", "center bottom");
+test_valid_value("offset-anchor", "calc(20% + 10px) center");
+test_valid_value("offset-anchor", "right 30em");
+test_valid_value("offset-anchor", "10px 20%");
+test_valid_value("offset-anchor", "left -10px top -20%");
+test_valid_value("offset-anchor", "right 10% bottom 20em");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-distance-computed.html b/testing/web-platform/tests/css/motion/parsing/offset-distance-computed.html
new file mode 100644
index 0000000000..e9de1ef255
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-distance-computed.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: getComputedStyle().offsetDistance</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+<meta name="assert" content="offset-distance is a computed '<length-percentage>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("offset-distance", "10px");
+test_computed_value("offset-distance", "20%");
+test_computed_value("offset-distance", "calc(40% - 30px)");
+test_computed_value("offset-distance", "0", "0px");
+test_computed_value('offset-distance', 'calc(10px - 0.5em)', '-10px');
+test_computed_value('offset-distance', 'calc(10px + 0.5em)', '30px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-distance-parsing-invalid.html b/testing/web-platform/tests/css/motion/parsing/offset-distance-parsing-invalid.html
new file mode 100644
index 0000000000..2d0be83e03
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-distance-parsing-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-distance with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+<meta name="assert" content="offset-distance supports only the grammar '<length-percentage>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("offset-distance", "none");
+test_invalid_value("offset-distance", "30deg");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-distance-parsing-valid.html b/testing/web-platform/tests/css/motion/parsing/offset-distance-parsing-valid.html
new file mode 100644
index 0000000000..fa5fdd04e5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-distance-parsing-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-distance with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+<meta name="assert" content="offset-distance supports the full grammar '<length-percentage>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("offset-distance", "10px");
+test_valid_value("offset-distance", "20%");
+test_valid_value("offset-distance", "calc(40% + 30px)");
+test_valid_value("offset-distance", "0", "0px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-parsing-invalid.html b/testing/web-platform/tests/css/motion/parsing/offset-parsing-invalid.html
new file mode 100644
index 0000000000..cc2eb500eb
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-parsing-invalid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-shorthand">
+<meta name="assert" content="offset supports only the grammar from the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("offset", "100px 0deg path('m 0 0 h 100')");
+test_invalid_value("offset", "30deg path('M 20 30 A 60 70 80')");
+test_invalid_value("offset", "30deg");
+test_invalid_value("offset", "auto 30deg 90px");
+test_invalid_value("offset", "none / 10px 20px 30deg");
+test_invalid_value("offset", "none /");
+test_invalid_value("offset", "path('M 20 30 A 60 70 80') bottom");
+test_invalid_value("offset", "path('m 0 0 h 100') 100px 0");
+test_invalid_value("offset", "path('m 0 0 h 100') 100px 200px");
+test_invalid_value("offset", "path('m 0 0 h 100') 200% auto 100px");
+test_invalid_value("offset", "path('m 0 0 h 100') auto reverse");
+test_invalid_value("offset", "path('m 0 0 h 100') reverse 100px 30deg");
+test_invalid_value("offset", "ray(sides 0) 50% 90deg auto");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-parsing-valid.html b/testing/web-platform/tests/css/motion/parsing/offset-parsing-valid.html
new file mode 100644
index 0000000000..7f8a0fd34c
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-parsing-valid.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-shorthand">
+<meta name="assert" content="offset supports the full grammar from the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("offset", "100px none auto 90deg", "100px center none auto 90deg");
+test_valid_value("offset", "100px", "100px center");
+test_valid_value("offset", "auto none reverse");
+test_valid_value("offset", "auto");
+test_valid_value("offset", "center bottom path(\"M 1 2 V 3 Z\")");
+test_valid_value("offset", "center center path(\"M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z\") 100% 90deg / left bottom");
+test_valid_value("offset", "left bottom ray(0rad closest-side) 10px auto 30deg / right bottom");
+test_valid_value("offset", "left top");
+test_valid_value("offset", "none 30deg reverse", "none reverse 30deg");
+test_valid_value("offset", "none 50px reverse 30deg");
+test_valid_value("offset", "none calc(10px + 20%) auto", "none calc(20% + 10px)");
+test_valid_value("offset", "none reverse");
+test_valid_value("offset", "path(\"M 0 0 H 1\") -200% auto", "path(\"M 0 0 H 1\") -200%");
+test_valid_value("offset", "path(\"M 0 0 H 1\") -200%");
+test_valid_value("offset", "path('M 0 0 H 1') 50px", "path(\"M 0 0 H 1\") 50px");
+test_valid_value("offset", "path(\"M 0 0 H 1\") auto", "path(\"M 0 0 H 1\")");
+test_valid_value("offset", "path(\"M 0 0 H 1\") auto 0deg", "path(\"M 0 0 H 1\")");
+test_valid_value("offset", "path(\"M 0 0 H 1\") auto 0rad", "path(\"M 0 0 H 1\")");
+test_valid_value("offset", "path(\"M 0 0 H 1\") auto 0.5turn", "path(\"M 0 0 H 1\") auto 0.5turn");
+test_valid_value("offset", "path('M 0 0 H 1') reverse 30deg 50px", "path(\"M 0 0 H 1\") 50px reverse 30deg");
+test_valid_value("offset", "path(\"M 0 0 H 1\")");
+test_valid_value("offset", "path('m 20 0 h 100') -7rad 8px / auto", "path(\"m 20 0 h 100\") 8px -7rad");
+test_valid_value("offset", "path('m 0 30 v 100') -7rad 8px / left top", "path(\"m 0 30 v 100\") 8px -7rad / left top");
+test_valid_value("offset", "path('m 0 0 h 100') -7rad 8px", "path(\"m 0 0 h 100\") 8px -7rad");
+test_valid_value("offset", "path(\"M 0 0 H 100\") 100px 0deg");
+test_valid_value("offset", "path(  'm 1 2   v 3.00 z')", "path(\"m 1 2 v 3 Z\")");
+test_valid_value("offset", "ray(farthest-corner 90deg) 1%", "ray(90deg farthest-corner) 1%");
+test_valid_value("offset", "ray(sides 0deg) 50% 90deg auto", "ray(0deg sides) 50% auto 90deg");
+test_valid_value("offset", "right bottom / left top");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-path-computed.html b/testing/web-platform/tests/css/motion/parsing/offset-path-computed.html
new file mode 100644
index 0000000000..79d6022cc9
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-path-computed.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: getComputedStyle().offsetPath</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+<meta name="assert" content="offset-path has absolute path commands.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("offset-path", "none");
+
+test_computed_value("offset-path", "ray(0rad closest-side)", "ray(0deg closest-side)");
+test_computed_value("offset-path", "ray(0.25turn closest-corner contain)", "ray(90deg closest-corner contain)");
+test_computed_value("offset-path", "ray(200grad farthest-side)", "ray(180deg farthest-side)");
+test_computed_value("offset-path", "ray(270deg farthest-corner contain)");
+test_computed_value("offset-path", "ray(-720deg sides)");
+test_computed_value("offset-path", "ray(calc(180deg - 45deg) farthest-side)", "ray(135deg farthest-side)");
+
+test_computed_value("offset-path", 'path("m 20 0 h -100")', 'path("M 20 0 H -80")');
+test_computed_value("offset-path", 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z")');
+test_computed_value("offset-path", 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")', 'path("M 10 20 Q 40 80 50 70 Q 150 140 140 150")');
+test_computed_value("offset-path", 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")', 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 260 220 Z")');
+test_computed_value("offset-path", 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")', 'path("M 10 20 L 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220")');
+test_computed_value("offset-path", 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")', 'path("M 10 170 H 100 V 200 M 100 200 S 101 202 103 204 Z C 109 208 107 206 105 204")');
+test_computed_value("offset-path", 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")', 'path("M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120")');
+
+// url, shape and geometry-box paths are not yet supported by implementations.
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-path-parsing-invalid.html b/testing/web-platform/tests/css/motion/parsing/offset-path-parsing-invalid.html
new file mode 100644
index 0000000000..c69f7c81a9
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-path-parsing-invalid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-path with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+<meta name="assert" content="offset-path supports only the grammar from the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// arc path segments must have at least 7 arguments.
+// https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
+test_invalid_value("offset-path", 'path("M 20 30 A 60 70 80")');
+
+test_invalid_value("offset-path", "ray(0 sides)");
+test_invalid_value("offset-path", "ray(0deg)");
+test_invalid_value("offset-path", "ray(closest-side)");
+test_invalid_value("offset-path", "ray(closest-side 0deg closest-side)");
+test_invalid_value("offset-path", "ray(0deg closest-side 0deg)");
+test_invalid_value("offset-path", "ray(contain 0deg closest-side contain)");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-path-parsing-valid.html b/testing/web-platform/tests/css/motion/parsing/offset-path-parsing-valid.html
new file mode 100644
index 0000000000..fce99f572e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-path-parsing-valid.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-path with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+<meta name="assert" content="offset-path supports the full grammar from the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("offset-path", "none");
+
+test_valid_value("offset-path", "ray(0rad closest-side)");
+test_valid_value("offset-path", "ray(0.25turn closest-corner contain)");
+test_valid_value("offset-path", "ray(200grad farthest-side)");
+test_valid_value("offset-path", "ray(270deg farthest-corner contain)");
+test_valid_value("offset-path", "ray(-720deg sides)");
+test_valid_value("offset-path", "ray(calc(180deg - 45deg) farthest-side)", "ray(calc(135deg) farthest-side)");
+
+test_valid_value("offset-path", 'path("m 20 0 h -100")');
+test_valid_value("offset-path", 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z")');
+test_valid_value("offset-path", 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")');
+test_valid_value("offset-path", 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")');
+test_valid_value("offset-path", 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")');
+test_valid_value("offset-path", 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")', 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")');
+test_valid_value("offset-path", 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")');
+// See https://github.com/w3c/fxtf-drafts/issues/392. If empty path string,
+// Blink serializes it as none, but Gecko serializes as path("").
+test_valid_value("offset-path", 'path("")', ['none', 'path("")']);
+test_valid_value("offset-path", 'path(" ")', ['none', 'path("")']);
+
+test_valid_value("offset-path", 'url("http://www.example.com/index.html#polyline1")');
+
+test_valid_value("offset-path", "circle(100px)");
+test_valid_value("offset-path", "margin-box");
+test_valid_value("offset-path", "inset(10% 20% 30% 40%) border-box");
+test_valid_value("offset-path", "fill-box ellipse(50% 60%)", "ellipse(50% 60%) fill-box");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-position-computed.html b/testing/web-platform/tests/css/motion/parsing/offset-position-computed.html
new file mode 100644
index 0000000000..1cbdbdb0fe
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-position-computed.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: getComputedStyle().offsetPosition</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
+<meta name="assert" content="offset-position is 'auto' or a computed position.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("offset-position", "auto");
+
+test_computed_value("offset-position", "left bottom", "0% 100%");
+test_computed_value("offset-position", "center center", "50% 50%");
+test_computed_value("offset-position", "right center", "100% 50%");
+test_computed_value("offset-position", "center top", "50% 0%");
+test_computed_value("offset-position", "center bottom", "50% 100%");
+test_computed_value("offset-position", "calc(5em + 20%) center", "calc(20% + 200px) 50%");
+test_computed_value("offset-position", "right 3em", "100% 120px");
+test_computed_value("offset-position", "10px 20%");
+test_computed_value("offset-position", "left -10px top -20%", "-10px -20%");
+test_computed_value("offset-position", "right 10% bottom 5em", "90% calc(100% - 200px)");
+test_computed_value("offset-position", "top 10px right -20%", "120% 10px");
+test_computed_value("offset-position", "left 10% bottom 2em", "10% calc(100% - 80px)");
+test_computed_value('offset-position', 'calc(10px - 0.5em) calc(10px + 0.5em)', '-10px 30px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-position-parsing-invalid.html b/testing/web-platform/tests/css/motion/parsing/offset-position-parsing-invalid.html
new file mode 100644
index 0000000000..5e749e5b4e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-position-parsing-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-position with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
+<meta name="assert" content="offset-position supports only the grammar 'auto | <position>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("offset-position", "none");
+test_invalid_value("offset-position", "30deg");
+test_invalid_value("offset-position", "left 10% top");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-position-parsing-valid.html b/testing/web-platform/tests/css/motion/parsing/offset-position-parsing-valid.html
new file mode 100644
index 0000000000..d40f70e8c0
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-position-parsing-valid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-position with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
+<meta name="assert" content="offset-position supports the full grammar 'auto | <position>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("offset-position", "auto");
+
+test_valid_value("offset-position", "left bottom");
+test_valid_value("offset-position", "center center");
+test_valid_value("offset-position", "right center");
+test_valid_value("offset-position", "center top");
+test_valid_value("offset-position", "center bottom");
+test_valid_value("offset-position", "calc(10px + 20%) center");
+test_valid_value("offset-position", "right 30em");
+test_valid_value("offset-position", "10px 20%");
+test_valid_value("offset-position", "left -10px top -20%");
+test_valid_value("offset-position", "right 10% bottom 20em");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-rotate-computed.html b/testing/web-platform/tests/css/motion/parsing/offset-rotate-computed.html
new file mode 100644
index 0000000000..fd1b71966a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-rotate-computed.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: getComputedStyle().offsetRotate</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+<meta name="assert" content="offset-rotate reverse is auto 180deg.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+// https://github.com/w3c/fxtf-drafts/issues/340
+test_computed_value("offset-rotate", "auto", ["auto 0deg", "auto"]);
+test_computed_value("offset-rotate", "reverse", "auto 180deg");
+test_computed_value("offset-rotate", "calc(90deg - 0.5turn - 300grad + 0rad)", "-360deg");
+test_computed_value("offset-rotate", "auto 5turn", "auto 1800deg");
+test_computed_value("offset-rotate", "reverse -50grad", "auto 135deg");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-rotate-parsing-invalid.html b/testing/web-platform/tests/css/motion/parsing/offset-rotate-parsing-invalid.html
new file mode 100644
index 0000000000..4e5a9229a0
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-rotate-parsing-invalid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-rotate with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+<meta name="assert" content="offset-rotate supports only the grammar '[ auto | reverse ] || <angle>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("offset-rotate", "none");
+test_invalid_value("offset-rotate", "0");
+test_invalid_value("offset-rotate", "auto reverse");
+test_invalid_value("offset-rotate", "reverse 30deg auto");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-rotate-parsing-valid.html b/testing/web-platform/tests/css/motion/parsing/offset-rotate-parsing-valid.html
new file mode 100644
index 0000000000..048c246f16
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-rotate-parsing-valid.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: parsing offset-rotate with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+<meta name="assert" content="offset-rotate supports the full grammar '[ auto | reverse ] || <angle>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("offset-rotate", "auto");
+test_valid_value("offset-rotate", "reverse");
+test_valid_value("offset-rotate", "-400deg");
+test_valid_value("offset-rotate", "auto 5turn");
+// https://github.com/w3c/fxtf-drafts/issues/340
+test_valid_value("offset-rotate", "reverse 0rad", ["reverse 0rad", "reverse"]);
+test_valid_value("offset-rotate", "5turn auto", "auto 5turn");
+// https://github.com/w3c/fxtf-drafts/issues/340
+test_valid_value("offset-rotate", "0rad reverse", ["reverse 0rad", "reverse"]);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/parsing/offset-shorthand.html b/testing/web-platform/tests/css/motion/parsing/offset-shorthand.html
new file mode 100644
index 0000000000..611a394b8b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-shorthand.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Motion Path Module Level 1: offset sets longhands</title>
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-shorthand">
+<meta name="assert" content="offset supports the full grammar from the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('offset', 'left bottom ray(0rad closest-side) 10px auto 30deg / right bottom', {
+  'offset-position': 'left bottom',
+  'offset-path': 'ray(0rad closest-side)',
+  'offset-distance': '10px',
+  'offset-rotate': 'auto 30deg',
+  'offset-anchor': 'right bottom',
+});
+
+test_shorthand_value('offset', 'top right / top left', {
+  'offset-position': 'right top',
+  'offset-path': 'none',
+  'offset-distance': '0px',
+  'offset-rotate': 'auto',
+  'offset-anchor': 'left top',
+});
+
+test_shorthand_value('offset', 'path("M 0 0 H 2") reverse 50%', {
+  'offset-position': 'auto',
+  'offset-path': 'path("M 0 0 H 2")',
+  'offset-distance': '50%',
+  'offset-rotate': 'reverse',
+  'offset-anchor': 'auto',
+});
+</script>
+</body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/motion
parent	Initial commit. (diff)
download	firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip