Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/motion
parent: Initial commit. (diff)
download: firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
190 files changed, 7058 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..11234bf31a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html
@@ -0,0 +1,160 @@
+<!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)'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: 'ray(-10deg farthest-corner at 0% 0px)',
+        to: 'ray(-50deg farthest-corner at 100% 100px)'
+      }, [
+        {at: -1, expect: 'ray(30deg farthest-corner at -100% -100px)'},
+        {at: 0, expect: 'ray(-10deg farthest-corner at 0% 0px)'},
+        {at: 0.125, expect: 'ray(-15deg farthest-corner at 12.5% 12.5px)'},
+        {at: 0.875, expect: 'ray(-45deg farthest-corner at 87.5% 87.5px)'},
+        {at: 1, expect: 'ray(-50deg farthest-corner at 100% 100px)'},
+        {at: 2, expect: 'ray(-90deg farthest-corner at 200% 200px)'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: 'ray(-10deg farthest-corner)',
+        to: 'ray(-50deg farthest-corner at 100% 100%)'
+      }, [
+        // TODO: Test intermediate values as well, once the expected behavior
+        // is clear in the spec. Right now it's a bit unclear whether or how to
+        // interpolate to/from the initial 'auto' value.
+        {at: 1, expect: 'ray(-50deg farthest-corner at 100% 100%)'},
+      ]);
+
+      // No interpolation between different sizes and/or different containment and/or coord-boxes.
+      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)'
+      });
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'ray(-10deg farthest-corner) content-box',
+        to: 'ray(-50deg farthest-corner at 100% 100%) padding-box'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-006.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-006.html
new file mode 100644
index 0000000000..8c3e89ab03
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-006.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance basic-shape interpolation</title>
+    <link rel="author" title="Daniil Sakhapov" href="mailto:sakhapov@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+    <meta name="assert" content="offset-path basic shape 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: ellipse(10% 10% at 50% 50%);
+    }
+    .target {
+      offset-path: circle(10px);
+    }
+  </style>
+  <body>
+    <script>
+      'use strict';
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "circle(10px)",
+        to: "inset(20px)",
+      });
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "ellipse(at center)",
+        to: "none",
+      });
+
+      // Neutral keyframes use the inline style.
+      test_interpolation({
+        property: 'offset-path',
+        from: neutralKeyframe,
+        to: 'circle(20px)',
+      }, [
+        {at: -0.3, expect: 'circle(7px)'},
+        {at: 0, expect: 'circle(10px)'},
+        {at: 0.3, expect: 'circle(13px)'},
+        {at: 0.6, expect: 'circle(16px)'},
+        {at: 1, expect: 'circle(20px)'},
+        {at: 1.5, expect: 'circle(25px)'},
+      ]);
+
+      // No interpolation to an ellipse from the initial value 'none'.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'initial',
+        to: 'ellipse()',
+      });
+
+      // 'inherit' keyframes use the parent style.
+      test_interpolation({
+        property: 'offset-path',
+        from: 'inherit',
+        to: 'ellipse(40% 50% at 25% 25%)',
+      }, [
+        {at: -0.3, expect: 'ellipse(1% 0% at 57.5% 57.5%)'},
+        {at: 0, expect: 'ellipse(10% 10% at 50% 50%)'},
+        {at: 0.3, expect: 'ellipse(19% 22% at 42.5% 42.5%)'},
+        {at: 0.6, expect: 'ellipse(28% 34% at 35% 35%)'},
+        {at: 1, expect: 'ellipse(40% 50% at 25% 25%)'},
+        {at: 1.5, expect: 'ellipse(55% 70% at 12.5% 12.5%)'},
+      ]);
+
+      // No interpolation to an inset from the initial value 'none'.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'unset',
+        to: 'inset(10%)',
+      });
+
+      // No interpolation to a rect from the initial value 'none'.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'none',
+        to: 'rect(10px 10px 10px 10px)',
+      });
+
+      // Interpolation between shapes.
+      test_interpolation({
+        property: 'offset-path',
+        from: 'inset(10px)',
+        to: 'inset(20px round 50%)'
+      }, [
+        {at: -1, expect: 'inset(0px round 0%)'},
+        {at: 0, expect: 'inset(10px round 0%)'},
+        {at: 0.125, expect: 'inset(11.25px round 6.25%)'},
+        {at: 0.875, expect: 'inset(18.75px round 43.75%)'},
+        {at: 1, expect: 'inset(20px round 50%)'},
+        {at: 2, expect: 'inset(30px round 100%)'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: 'xywh(5px 5px 150% 150%)',
+        to: 'xywh(10px 10px 100% 100%)'
+      }, [
+        {at: -1, expect: 'xywh(0px 0px 200% 200%)'},
+        {at: 0, expect: 'xywh(5px 5px 150% 150%)'},
+        {at: 0.125, expect: 'xywh(5.63px 5.63px 143.75% 143.75% )'},
+        {at: 0.875, expect: 'xywh(9.38px 9.38px 106.25% 106.25%)'},
+        {at: 1, expect: 'xywh(10px 10px 100% 100%)'},
+        {at: 2, expect: 'xywh(15px 15px 50% 50%)'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: 'rect(10px 100px 50% 10%)',
+        to: 'rect(50px 200px 90% 50%)'
+      }, [
+        {at: -1, expect: 'rect(-30px 0px 10% -30%)'},
+        {at: 0, expect: 'rect(10px 100px 50% 10%)'},
+        {at: 0.125, expect: 'rect(15px 112.5px 55% 15%)'},
+        {at: 0.875, expect: 'rect(45px 187.5px 85% 45%)'},
+        {at: 1, expect: 'rect(50px 200px 90% 50%)'},
+        {at: 2, expect: 'rect(90px 300px 130% 90%)'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: 'rect(auto auto auto auto)',
+        to: 'rect(80% 20% 20% 80%)'
+      }, [
+        {at: -1, expect: 'inset(-80%)'},
+        {at: 0, expect: 'inset(0%)'},
+        {at: 0.125, expect: 'inset(10%)'},
+        {at: 0.875, expect: 'inset(70%)'},
+        {at: 1, expect: 'inset(80%)'},
+        {at: 2, expect: 'inset(160%)'},
+      ]);
+
+      // All <basic-shape-rect>s compute to the equivalent inset() function, so
+      // they are interpolatable.
+      // https://drafts.csswg.org/css-shapes-1/#basic-shape-computed-values
+      // https://github.com/w3c/csswg-drafts/issues/9053
+      test_interpolation({
+        property: 'offset-path',
+        // The equivalent function is
+        // "inset(5px calc(100% - 210px) calc(100% - 105px) 10px)".
+        from: 'xywh(10px 10px 200px 100px)',
+        to: 'inset(50px)'
+      }, [
+        {at: -1, expect: 'inset(-30px calc(200% - 470px) calc(200% - 270px) -30px)'},
+        {at: 0, expect: 'inset(10px calc(100% - 210px) calc(100% - 110px) 10px)'},
+        {at: 0.125, expect: 'inset(15px calc(87.5% - 177.5px) calc(87.5% - 90px) 15px)'},
+        {at: 0.875, expect: 'inset(45px calc(12.5% + 17.5px) calc(12.5% + 30px) 45px)'},
+        {at: 1, expect: 'inset(50px calc(0% + 50px) calc(0% + 50px) 50px)'},
+        {at: 2, expect: 'inset(90px calc(-100% + 310px) calc(-100% + 210px) 90px)'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: 'inset(10px)',
+        // inset(50px calc(100% - 70px) 20% 20%).
+        to: 'rect(50px 70px 80% 20%)',
+      }, [
+        {at: -1, expect: 'inset(-30px calc(-100% + 90px) calc(-20% + 20px) calc(-20% + 20px)'},
+        {at: 0, expect: 'inset(10px calc(0% + 10px) calc(0% + 10px))'},
+        {at: 0.125, expect: 'inset(15px 12.5% calc(2.5% + 8.75px) calc(2.5% + 8.75px))'},
+        {at: 0.875, expect: 'inset(45px calc(87.5% - 60px) calc(17.5% + 1.25px) calc(17.5% + 1.25px))'},
+        {at: 1, expect: 'inset(50px calc(100% - 70px) 20% 20%)'},
+        {at: 2, expect: 'inset(90px calc(200% - 150px) calc(40% - 10px) calc(40% - 10px))'},
+      ]);
+
+      test_interpolation({
+        property: 'clip-path',
+        // inset(10% calc(100% - 100px) 50% 0px round 20px).
+        from: 'xywh(0px 10% 100px 40% round 20px)',
+        // inset(20% 50% calc(100% - 200px) 20px).
+        to: 'rect(20% 50% 200px 20px)',
+      }, [
+        {at: -1, expect: 'inset(0% calc(150% - 200px) calc(0% + 200px) -20px round 40px'},
+        {at: 0, expect: 'inset(10% calc(100% - 100px) 50% 0px round 20px)'},
+        {at: 0.125, expect: 'inset(11.25% calc(93.75% - 87.5px) calc(56.25% - 25px) 2.5px round 17.5px)'},
+        {at: 0.875, expect: 'inset(18.75% calc(56.25% - 12.5px) calc(93.75% - 175px) 17.5px round 2.5px)'},
+        {at: 1, expect: 'inset(20% 50% calc(100% - 200px) 20px)'},
+        {at: 2, expect: 'inset(30% calc(0% + 100px) calc(150% - 400px) 40px)'},
+      ]);
+
+      // No interpolation between different radius keywords.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'circle(farthest-side)',
+        to: 'circle(closest-side)'
+      });
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'ellipse(closest-side farthest-side)',
+        to: 'ellipse(closest-side closest-side)'
+      });
+    </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..7d74c0500c
--- /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 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-position',
+        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-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-math-functions-tentative.html b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation-math-functions-tentative.html
new file mode 100644
index 0000000000..34e0abf2b0
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation-math-functions-tentative.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-rotate interpolation with css math functions</title>
+    <link rel="author" title="Daniil Sakhapov" href="mailto:sakhapov@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="help" href="https://drafts.csswg.org/css-values-5/#progress">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <style>
+    :root {
+      font-size: 10px;
+    }
+  </style>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-rotate',
+        from: '100deg',
+        to: 'calc(sign(20rem - 20px) * 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: 'calc(sign(20rem - 20px) * 100deg)',
+        to: 'calc(progress(10rem from 20px to 100px) * 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'}
+      ]);
+    </script>
+  </body>
+</html>
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..508c0cebf1
--- /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', 'normal', '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-coord-box-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-coord-box-001-ref.html
new file mode 100644
index 0000000000..8b86ce26e1
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-coord-box-001-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;coord-box&gt; &lt;border-box&gt;</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  border-radius: 50%;
+  border: 10px solid black;
+  width: 400px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  transform: translate(260px, 50px);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-coord-box-001.html b/testing/web-platform/tests/css/motion/offset-path-coord-box-001.html
new file mode 100644
index 0000000000..a8f7d98b22
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-coord-box-001.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;coord-box&gt; &lt;border-box&gt;</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-coord-box-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-coord-box">
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-450">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  border-radius: 50%;
+  border: 10px solid black;
+  width: 400px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  top: 100px;
+  left: 100px;
+  position: relative;
+  offset-path: border-box;
+  offset-distance: 25%;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-coord-box-002-ref.html b/testing/web-platform/tests/css/motion/offset-path-coord-box-002-ref.html
new file mode 100644
index 0000000000..41f65dc016
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-coord-box-002-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;coord-box&gt; &lt;padding-box&gt;</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  border: 10px solid black;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  transform: translate(150px, -150px);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-coord-box-002.html b/testing/web-platform/tests/css/motion/offset-path-coord-box-002.html
new file mode 100644
index 0000000000..40b94727d3
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-coord-box-002.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;coord-box&gt; &lt;padding-box&gt;</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-coord-box-002-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-coord-box">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  border: 10px solid black;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  offset-path: padding-box;
+  offset-distance: 15%;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-coord-box-003-ref.html b/testing/web-platform/tests/css/motion/offset-path-coord-box-003-ref.html
new file mode 100644
index 0000000000..0fa94d4c31
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-coord-box-003-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;coord-box&gt; &lt;content-box&gt;</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  border: 10px solid black;
+  padding: 10px;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  transform: translate(150px, -150px);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-coord-box-003.html b/testing/web-platform/tests/css/motion/offset-path-coord-box-003.html
new file mode 100644
index 0000000000..e793c18830
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-coord-box-003.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;coord-box&gt; &lt;content-box&gt;</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-coord-box-003-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-coord-box">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  border: 10px solid black;
+  padding: 10px;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  top: 100px;
+  left: 100px;
+  position: relative;
+  offset-path: content-box;
+  offset-distance: 15%;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-coord-box-004-ref.html b/testing/web-platform/tests/css/motion/offset-path-coord-box-004-ref.html
new file mode 100644
index 0000000000..60870c815e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-coord-box-004-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(-300px, 0px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-coord-box-004.html b/testing/web-platform/tests/css/motion/offset-path-coord-box-004.html
new file mode 100644
index 0000000000..c84bae6832
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-coord-box-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:stoke-box paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#valdef-offset-path-coord-box">
+    <link rel="match" href="offset-path-coord-box-004-ref.html">
+    <meta name="assert" content="This tests that offset-path:stroke-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..1820eb6cfa
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-001.html
@@ -0,0 +1,28 @@
+<!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.">
+    <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-10">
+    <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;
+        offset-position: auto;
+      }
+    </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..adfac939f3
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-002.html
@@ -0,0 +1,27 @@
+<!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.">
+    <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-10">
+    <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%;
+        offset-position: auto;
+      }
+    </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..cbcbd8b3b3
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-003.html
@@ -0,0 +1,32 @@
+<!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%;
+        offset-position: auto;
+      }
+    </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..9b6f5befef
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-004.html
@@ -0,0 +1,32 @@
+<!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%;
+        offset-position: auto;
+      }
+    </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..26167b6bc1
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-005.html
@@ -0,0 +1,32 @@
+<!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%;
+        offset-position: auto;
+      }
+    </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..d3bea43979
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-006.html
@@ -0,0 +1,32 @@
+<!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%;
+        offset-position: auto;
+      }
+    </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..7b9ff1e0eb
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-007.html
@@ -0,0 +1,32 @@
+<!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%;
+        offset-position: auto;
+      }
+    </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..6071392456
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-008.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-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%;
+        offset-position: auto;
+      }
+    </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..8cff313645
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-009.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-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%;
+        offset-position: auto;
+      }
+    </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-010.html b/testing/web-platform/tests/css/motion/offset-path-ray-010.html
new file mode 100644
index 0000000000..9e99898222
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-010.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <link rel="author" title="Daniil Sakhapov" href="mailto:sakhapov@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.">
+    <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-10">
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 100px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(135deg);
+        offset-distance: 20px;
+        offset-position: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-011-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-011-ref.html
new file mode 100644
index 0000000000..9a477b2696
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-011-ref.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with offset-position: normal</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 600px;
+    height: 400px;
+  }
+  #box {
+    background-color: green;
+    position: relative;
+    transform: translate(300px, 200px) translateX(10px) rotate(-90deg) translate(50px, -50px);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-011.html b/testing/web-platform/tests/css/motion/offset-path-ray-011.html
new file mode 100644
index 0000000000..cf01e2b86e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-011.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with offset-position: normal</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-ray-011-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 600px;
+    height: 400px;
+  }
+  #box {
+    background-color: green;
+    position: relative;
+    offset-path: ray(90deg);
+    offset-distance: 10px;
+    offset-position: normal;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-012-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-012-ref.html
new file mode 100644
index 0000000000..dfb34bf784
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-012-ref.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with offset-position specified with position</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 600px;
+    height: 400px;
+  }
+  #box {
+    background-color: green;
+    position: relative;
+    transform: translate(-40px, 320px);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-012.html b/testing/web-platform/tests/css/motion/offset-path-ray-012.html
new file mode 100644
index 0000000000..7c921cfac8
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-012.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with offset-position specified with position</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-ray-012-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 600px;
+    height: 400px;
+  }
+  #box {
+    background-color: green;
+    position: relative;
+    top: 100px;
+    left: 100px;
+    offset-path: ray(180deg closest-side);
+    offset-distance: 100%;
+    offset-position: 10px 90%;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-013-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-013-ref.html
new file mode 100644
index 0000000000..d6bf4c037b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-013-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with position and offset-position</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 600px;
+    height: 400px;
+  }
+  #box {
+    background-color: green;
+    position: relative;
+    top: 100px;
+    left: 100px;
+    transform: translate(-50px, -130px);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-013.html b/testing/web-platform/tests/css/motion/offset-path-ray-013.html
new file mode 100644
index 0000000000..196ff4efd6
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-013.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with position and offset-position</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-ray-013-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 600px;
+    height: 400px;
+  }
+  #box {
+    background-color: green;
+    position: relative;
+    top: 100px;
+    left: 100px;
+    offset-path: ray(0deg closest-side at 100px 30%);
+    offset-distance: 100%;
+    offset-position: 10px 90%;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-014-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-014-ref.html
new file mode 100644
index 0000000000..cd0fab44c3
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-014-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with default position</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 600px;
+    height: 400px;
+  }
+  #box {
+    background-color: green;
+    position: relative;
+    top: 100px;
+    left: 100px;
+    transform: translate(150px, -150px);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-014.html b/testing/web-platform/tests/css/motion/offset-path-ray-014.html
new file mode 100644
index 0000000000..42e431de35
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-014.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with default position</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-ray-014-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 600px;
+    height: 400px;
+  }
+  #box {
+    background-color: green;
+    position: relative;
+    top: 100px;
+    left: 100px;
+    offset-path: ray(0deg closest-side);
+    offset-distance: 100%;
+    offset-position: normal;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-015-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-015-ref.html
new file mode 100644
index 0000000000..13f25aa1a9
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-015-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with padding-box</title>
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 200px;
+    height: 200px;
+    padding: 50px;
+    border: 50px solid black;
+  }
+  #box {
+    background-color: green;
+    transform: translate(-50px, -50px);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-015.html b/testing/web-platform/tests/css/motion/offset-path-ray-015.html
new file mode 100644
index 0000000000..d8729c199e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-015.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with padding-box</title>
+<link rel="match" href="offset-path-ray-015-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 200px;
+    height: 200px;
+    padding: 50px;
+    border: 50px solid black;
+  }
+  #box {
+    background-color: green;
+    offset-path: ray(0deg sides at 0% 0%) padding-box;
+    offset-rotate: 0deg;
+    offset-anchor: 0% 0%;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-016-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-016-ref.html
new file mode 100644
index 0000000000..dea0910150
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-016-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with content-box</title>
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 200px;
+    height: 200px;
+    padding: 50px;
+    border: 50px solid black;
+  }
+  #box {
+    background-color: green;
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-016.html b/testing/web-platform/tests/css/motion/offset-path-ray-016.html
new file mode 100644
index 0000000000..539823a590
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-016.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with content-box</title>
+<link rel="match" href="offset-path-ray-016-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 200px;
+    height: 200px;
+    padding: 50px;
+    border: 50px solid black;
+  }
+  #box {
+    background-color: green;
+    offset-path: ray(0deg sides at 0% 0%) content-box;
+    offset-rotate: 0deg;
+    offset-anchor: 0% 0%;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+  }
+</style>
+
+<div id="outer">
+  <div style="width: 100px; height: 100px; background-color: red;"></div>
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-017-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-017-ref.html
new file mode 100644
index 0000000000..03719c540d
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-017-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with padding-box</title>
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 200px;
+    height: 200px;
+    padding: 50px;
+    border: 50px solid black;
+  }
+  #box {
+    background-color: green;
+    transform: translate(100px, -50px);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-017.html b/testing/web-platform/tests/css/motion/offset-path-ray-017.html
new file mode 100644
index 0000000000..93f3ce09cb
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-017.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with padding-box</title>
+<link rel="match" href="offset-path-ray-017-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 200px;
+    height: 200px;
+    padding: 50px;
+    border: 50px solid black;
+  }
+  #box {
+    background-color: green;
+    offset-path: ray(0deg sides at 50% 50%) padding-box;
+    offset-distance: 100%;
+    offset-rotate: 0deg;
+    offset-anchor: 0% 0%;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-018-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-018-ref.html
new file mode 100644
index 0000000000..39dd8204de
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-018-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with content-box</title>
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 200px;
+    height: 200px;
+    padding: 50px;
+    border: 50px solid black;
+  }
+  #box {
+    background-color: green;
+    transform: translate(100px, 0px);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-018.html b/testing/web-platform/tests/css/motion/offset-path-ray-018.html
new file mode 100644
index 0000000000..73b5b6c263
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-018.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with content-box</title>
+<link rel="match" href="offset-path-ray-018-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+  #outer {
+    top: 100px;
+    left: 100px;
+    position: relative;
+    width: 200px;
+    height: 200px;
+    padding: 50px;
+    border: 50px solid black;
+  }
+  #box {
+    background-color: green;
+    offset-path: ray(0deg sides at 50% 50%) content-box;
+    offset-distance: 100%;
+    offset-rotate: 0deg;
+    offset-anchor: 0% 0%;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+  }
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-019-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-019-ref.html
new file mode 100644
index 0000000000..1bf242e3fc
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-019-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <style>
+      #container1 {
+        width: 100px;
+        height: 100px;
+      }
+      #container2 {
+        width: 200px;
+        height: 200px;
+      }
+      #target1 {
+        position: relative;
+        width: 50px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: translateX(100px);
+      }
+      #target2 {
+        position: relative;
+        width: 50px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        transform: translateX(200px);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container1">
+      <div id="target1"></div>
+    </div>
+    <div id="container2">
+      <div id="target2"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-019.html b/testing/web-platform/tests/css/motion/offset-path-ray-019.html
new file mode 100644
index 0000000000..31681fd43c
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-019.html
@@ -0,0 +1,37 @@
+<!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-019-ref.html">
+    <meta name="assert" content="Tests ray() when sharing style with different sized containing blocks.">
+    <style>
+      #container1 {
+        width: 100px;
+        height: 100px;
+      }
+      #container2 {
+        width: 200px;
+        height: 200px;
+      }
+      #target {
+        position: relative;
+        width: 50px;
+        height: 50px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: ray(90deg sides);
+        offset-distance: 100%;
+        offset-position: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container1">
+      <div id="target"></div>
+    </div>
+    <div id="container2">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-ray-020.html b/testing/web-platform/tests/css/motion/offset-path-ray-020.html
new file mode 100644
index 0000000000..b332453af9
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-020.html
@@ -0,0 +1,33 @@
+<!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 ray() in a flex box.">
+    <style>
+      #container {
+        display: flex;
+        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%;
+        offset-position: auto;
+      }
+    </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-021.html b/testing/web-platform/tests/css/motion/offset-path-ray-021.html
new file mode 100644
index 0000000000..f0a18ea4cb
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-021.html
@@ -0,0 +1,33 @@
+<!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 ray() in a flex box.">
+    <style>
+      #container {
+        display: grid;
+        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%;
+        offset-position: auto;
+      }
+    </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-022-ref.html b/testing/web-platform/tests/css/motion/offset-path-ray-022-ref.html
new file mode 100644
index 0000000000..63bbc2cfb3
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-022-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths</title>
+    <style>
+      #container {
+        width: 400px;
+        height: 300px;
+        overflow: scroll;
+      }
+      #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-022.html b/testing/web-platform/tests/css/motion/offset-path-ray-022.html
new file mode 100644
index 0000000000..c264076c91
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-022.html
@@ -0,0 +1,34 @@
+<!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-022-ref.html">
+    <meta name="assert" content="This tests that ray() affects overflow .">
+    <style>
+      #container {
+        width: 400px;
+        height: 300px;
+        overflow: scroll;
+      }
+
+      #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%;
+        offset-position: auto;
+      }
+    </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..05f54d9dc5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: ray paths with contain</title>
+    <style>
+      #container {
+        width: 300px;
+        height: 300px;
+      }
+      #target {
+        position: relative;
+        left: 30px;
+        top: 40px;
+        width: 10px;
+        height: 10px;
+        background-color: lime;
+        /* ray length is sqrt(30^2 + 40^2); contain does -max(10, 10) / 2; */
+        /* the result length is 45px. angle is 180deg; */
+        /* 5 is origin shift. */
+        transform: translate(-5px, 40px);
+      }
+    </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..dc3cb4d52b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-001.html
@@ -0,0 +1,32 @@
+<!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: 30px;
+        top: 40px;
+        width: 10px;
+        height: 10px;
+        background-color: lime;
+        offset-path: ray(180deg closest-corner contain);
+        offset-rotate: 0deg;
+        offset-distance: 100%;
+        offset-position: auto;
+      }
+    </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..a5bff44670
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-002-ref.html
@@ -0,0 +1,28 @@
+<!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;
+        /* ray length is sqrt(150^2 + 0^2); contain does -max(100, 100) / 2; */
+        /* the result length is 100. sin(90deg) * length = 100; */
+        transform: translateY(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-contain-002.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-002.html
new file mode 100644
index 0000000000..6825c755d5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-002.html
@@ -0,0 +1,32 @@
+<!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%;
+        offset-position: auto;
+      }
+    </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..965960f204
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-003-ref.html
@@ -0,0 +1,28 @@
+<!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;
+        /* ray length is sqrt(150^2 + 0^2); contain does -max(100, 100) / 2; */
+        /* the result length is 100. sin(45deg) * length = 70.71; */
+        transform: rotate(-45deg) translate(100px) 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..a71c8aa73a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-003.html
@@ -0,0 +1,32 @@
+<!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%;
+        offset-position: auto;
+      }
+    </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..188e2597c7
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-004-ref.html
@@ -0,0 +1,28 @@
+<!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;
+        /* ray length is sqrt(150^2 + 0^2); contain does -max(100, 100) / 2; */
+        /* the result length is 100. sin(45deg) * length = 70.71; */
+        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-contain-004.html b/testing/web-platform/tests/css/motion/offset-path-ray-contain-004.html
new file mode 100644
index 0000000000..0689ccba6f
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-004.html
@@ -0,0 +1,33 @@
+<!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.">
+    <meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-10"/>
+    <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%;
+        offset-position: auto;
+      }
+    </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..ead5dfb8cd
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-005-ref.html
@@ -0,0 +1,33 @@
+<!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, contain applies
+         * decrease, so that the new length is -25px (-150px / 2).
+         * Note: offset-anchor is "200% -300%", and ray angle is -90deg
+           and offset-rotate is -90deg.
+         */
+        transform: translate(-75px, -12.5px) rotate(-90deg) translate(-225px, 87.5px);
+      }
+    </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..6e44f88f81
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-ray-contain-005.html
@@ -0,0 +1,36 @@
+<!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: -90deg;
+        offset-distance: 50%;
+        offset-position: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-001-ref.html
new file mode 100644
index 0000000000..6d6b64d32e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-001-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; circle() path with explicit arguments</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(250px, 350px) rotate(180deg);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-001.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-001.html
new file mode 100644
index 0000000000..5b05cb8811
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-001.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; circle() path with explicit arguments</title>
+<meta name="fuzzy" content="maxDifference=0-150; totalPixels=0-300">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-circle-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: circle(closest-side at center);
+  offset-distance: 25%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-002-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-002-ref.html
new file mode 100644
index 0000000000..e56acaaa26
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-002-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; circle() path with no parameters</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  transform: translate(-50px, -50px);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-002.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-002.html
new file mode 100644
index 0000000000..74828fe6f4
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-002.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; circle() path with no parameters</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-circle-002-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: circle();
+  offset-position: auto;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-003-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-003-ref.html
new file mode 100644
index 0000000000..c005984f76
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-003-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; circle() path with offset-distance</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  transform: translate(420.231px, 311.969px) rotate(154.813deg);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-003.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-003.html
new file mode 100644
index 0000000000..390b587de5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-003.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; circle() path with offset-distance</title>
+<meta name="fuzzy" content="maxDifference=0-170; totalPixels=0-550">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-circle-003-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: circle(farthest-side at top);
+  offset-distance: 18%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-004-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-004-ref.html
new file mode 100644
index 0000000000..925abdb8b4
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-004-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; circle() path with offset-distance and offset-anchor</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 400px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  transform: translate(200px, 160px);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-004.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-004.html
new file mode 100644
index 0000000000..6c8bbcc170
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-004.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; circle() path with offset-distance and offset-anchor</title>
+<meta name="fuzzy" content="maxDifference=0-300; totalPixels=0-500">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-circle-004-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 400px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: circle(10% at bottom 25% right 25%);
+  offset-anchor: 100% 100%;
+  offset-distance: 75%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-005-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-005-ref.html
new file mode 100644
index 0000000000..77fc954ad9
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-005-ref.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; circle() path with offset-position</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  transform: translate(300px, 200px) translate(50px, -50px);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-005.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-005.html
new file mode 100644
index 0000000000..e35ab29491
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-005.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; circle() path with offset-position</title>
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-500">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-circle-005-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: circle(100px);
+  offset-position: normal;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-006.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-006.html
new file mode 100644
index 0000000000..f94af711bd
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-006.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; circle() path with border radius on container</title>
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-500" />
+<link rel="match" href="offset-path-shape-circle-005-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+  border-radius: 50%;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: circle(100px);
+  offset-position: normal;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-circle-007.html b/testing/web-platform/tests/css/motion/offset-path-shape-circle-007.html
new file mode 100644
index 0000000000..ea292e5605
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-circle-007.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; circle() path with offset from container</title>
+<meta name="fuzzy" content="maxDifference=0-170; totalPixels=0-550">
+<link rel="match" href="offset-path-shape-circle-003-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  top: 100px;
+  left: 100px;
+  background-color: green;
+  position: relative;
+  offset-path: circle(farthest-side at top);
+  offset-distance: 18%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-001-ref.html
new file mode 100644
index 0000000000..0e53fa2d35
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-001-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; ellipse() path with explicit arguments</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(250px, 350px) rotate(180deg);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-001.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-001.html
new file mode 100644
index 0000000000..ec152e323c
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-001.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; ellipse() path with explicit arguments</title>
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-400">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-ellipse-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: ellipse(closest-side closest-side at center);
+  offset-distance: 25%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-002-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-002-ref.html
new file mode 100644
index 0000000000..e3dfaf5122
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-002-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; ellipse() path with no parameters</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  transform: translate(-50px, -50px);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-002.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-002.html
new file mode 100644
index 0000000000..fa647a9c2e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-002.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; ellipse() path with no parameters</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-ellipse-002-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: ellipse();
+  offset-position: auto;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-003-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-003-ref.html
new file mode 100644
index 0000000000..2239210e49
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-003-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; ellipse() path with offset-distance</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 400px;
+  height: 200px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  transform: translate(8.6px, 91.4px) rotate(-135deg);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-003.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-003.html
new file mode 100644
index 0000000000..ead2229143
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-003.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; ellipse() path with offset-distance</title>
+<!-- Chrome currently passes with 13 max pixel difference and 473 total different pixels -->
+<!-- You can increase the numbers to handle anti-aliasing -->
+<meta name="fuzzy" content="maxDifference=0-150; totalPixels=0-530">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-ellipse-003-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 400px;
+  height: 200px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: ellipse(farthest-side farthest-side at top);
+  offset-distance: 37.5%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-004-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-004-ref.html
new file mode 100644
index 0000000000..fca4b190db
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-004-ref.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; ellipse() path with offset-distance and offset-anchor</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  transform: translate(400px, 210px) translate(-50px, -50px);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-004.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-004.html
new file mode 100644
index 0000000000..af178eb14e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-004.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; ellipse() path with offset-distance and offset-anchor</title>
+<meta name="fuzzy" content="maxDifference=0-250; totalPixels=0-500" />
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-ellipse-004-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: ellipse(10% 10% at bottom 25% right 25%);
+  offset-anchor: 100% 100%;
+  offset-distance: 75%;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-005-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-005-ref.html
new file mode 100644
index 0000000000..98504d1a38
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-005-ref.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; ellipse() path with offset-position</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  transform: translate(300px, 200px) translate(50px, -50px);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="box"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-005.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-005.html
new file mode 100644
index 0000000000..7364728df1
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-005.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; ellipse() path with offset-position</title>
+<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-500" />
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-ellipse-005-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: ellipse(100px 100px);
+  offset-position: normal;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-006.html b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-006.html
new file mode 100644
index 0000000000..6ec56ff496
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-ellipse-006.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; ellipse() path with offset from container</title>
+<!-- Chrome currently passes with 13 max pixel difference and 473 total different pixels -->
+<!-- You can increase the numbers to handle anti-aliasing -->
+<meta name="fuzzy" content="maxDifference=0-150; totalPixels=0-530">
+<link rel="match" href="offset-path-shape-ellipse-003-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 400px;
+  height: 200px;
+}
+#box {
+  top: 100px;
+  left: 100px;
+  background-color: green;
+  position: relative;
+  offset-path: ellipse(farthest-side farthest-side at top);
+  offset-distance: 37.5%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-inset-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-inset-001-ref.html
new file mode 100644
index 0000000000..52a9662841
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-inset-001-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; inset() path with explicit arguments</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(348px, 340px) rotate(180deg);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-inset-001.html b/testing/web-platform/tests/css/motion/offset-path-shape-inset-001.html
new file mode 100644
index 0000000000..8d90aef2e1
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-inset-001.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; inset() path with explicit arguments</title>
+<meta name="fuzzy" content="maxDifference=0-80; totalPixels=0-230">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-inset-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  top: 100px;
+  offset-path: inset(10px 10px 10px 10px);
+  offset-distance: 60%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-inset-002-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-inset-002-ref.html
new file mode 100644
index 0000000000..1bb649474a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-inset-002-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; inset() path with explicit arguments and radius</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 400px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(306px, 94px) rotate(45deg);
+  transform-origin: 0 0;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-inset-002.html b/testing/web-platform/tests/css/motion/offset-path-shape-inset-002.html
new file mode 100644
index 0000000000..ceafdd8cd2
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-inset-002.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; inset() path with explicit arguments and radius</title>
+<meta name="fuzzy" content="maxDifference=0-170; totalPixels=0-500">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-inset-002-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 400px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: inset(50px round 50%);
+  offset-anchor: 0 0;
+  offset-distance: 12.5%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-polygon-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-001-ref.html
new file mode 100644
index 0000000000..efaf54c79f
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-001-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; polygon() path</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(46px, 78px) rotate(-126.87deg);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-polygon-001.html b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-001.html
new file mode 100644
index 0000000000..fcb31f2452
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-001.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; polygon() path</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-polygon-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+<meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: polygon(0px 0px, 600px 0px, 300px 400px);
+  offset-distance: 90%;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-polygon-002-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-002-ref.html
new file mode 100644
index 0000000000..1e4c6c689b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-002-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; polygon() path is closed with 2 points</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(550px, 350px) rotate(33.6901deg);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-polygon-002.html b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-002.html
new file mode 100644
index 0000000000..39352f22be
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-002.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; polygon() path is closed with 2 points</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-polygon-002-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: polygon(50% 50%, 100% 100%);
+  offset-distance: 150%;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-polygon-003-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-003-ref.html
new file mode 100644
index 0000000000..0507f7b45e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-003-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; polygon() path with points as percentage and pixels</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(479.461px, -2.97412px) rotate(-33.6901deg) translate(40px, 45px);
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-polygon-003.html b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-003.html
new file mode 100644
index 0000000000..caa08082e4
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-polygon-003.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; polygon() path with points as percentage and pixels</title>
+<meta name=fuzzy content="0-20;0-50">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-polygon-003-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: polygon(0% 0%, 300px 200px, 100% 0px, 100% 100%, 0px 100%);
+  offset-distance: 30%;
+  offset-anchor: 10px 5%;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-rect-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-rect-001-ref.html
new file mode 100644
index 0000000000..2cb45198e9
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-rect-001-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; rect() path with explicit arguments</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(520px, 142px) rotate(90deg) translate(40px, 40px);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-rect-001.html b/testing/web-platform/tests/css/motion/offset-path-shape-rect-001.html
new file mode 100644
index 0000000000..a8a2336cc8
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-rect-001.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; rect() path with explicit arguments</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-rect-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: rect(5px 95% 95% 5px);
+  offset-distance: 40%;
+  offset-anchor: 10% 10%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-rect-002-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-rect-002-ref.html
new file mode 100644
index 0000000000..bc28974cb5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-rect-002-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; rect() path with explicit arguments and radius</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(420.272px, 317.407px) rotate(161.625deg) translate(40px, 40px);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-rect-002.html b/testing/web-platform/tests/css/motion/offset-path-shape-rect-002.html
new file mode 100644
index 0000000000..204eadcfc3
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-rect-002.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; rect() path with explicit arguments and radius</title>
+<meta name="fuzzy" content="maxDifference=0-160; totalPixels=0-520">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-rect-002-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: rect(5px 95% 95% 5px round 30%);
+  offset-distance: 45%;
+  offset-anchor: 10% 10%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-rect-003-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-rect-003-ref.html
new file mode 100644
index 0000000000..1c74265091
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-rect-003-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: offset-path:rect() path with explicit arguments and padding-box</title>
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 200px;
+  height: 100px;
+  padding: 50px;
+  border: 50px solid black;
+}
+#box {
+  background-color: green;
+  transform: translate(200px, -78px) rotate(90deg);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-rect-003.html b/testing/web-platform/tests/css/motion/offset-path-shape-rect-003.html
new file mode 100644
index 0000000000..597cdb3726
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-rect-003.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: offset-path:rect() path with explicit arguments and padding-box</title>
+<link rel="match" href="offset-path-shape-rect-003-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 200px;
+  height: 100px;
+  padding: 50px;
+  border: 50px solid black;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: rect(auto auto 50% 10px) padding-box;
+  offset-distance: 40%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-xywh-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-001-ref.html
new file mode 100644
index 0000000000..a7fd10c76e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-001-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; xywh() path with explicit arguments</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  transform: translate(260px, 60px) rotate(90deg);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-xywh-001.html b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-001.html
new file mode 100644
index 0000000000..0360b2fa3f
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-001.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; xywh() path with explicit arguments</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-xywh-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 600px;
+  height: 400px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: xywh(10px 10px 300px 200px);
+  offset-distance: 40%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-xywh-002-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-002-ref.html
new file mode 100644
index 0000000000..8b9ca37aa4
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-002-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: &lt;basic-shape&gt; xywh() path with explicit arguments and radius</title>
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 400px;
+  height: 200px;
+}
+#box {
+  background-color: green;
+  transform: translate(375.35px, -15.35px) rotate(45deg);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-xywh-002.html b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-002.html
new file mode 100644
index 0000000000..ef6a9e6324
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-002.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: &lt;basic-shape&gt; xywh() path with explicit arguments and radius</title>
+<meta name="fuzzy" content="maxDifference=0-140; totalPixels=0-500">
+<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com">
+<link rel="match" href="offset-path-shape-xywh-002-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 400px;
+  height: 200px;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: xywh(10% 10% 100% 100% round 50px / 50px);
+  /* Stop at the mid-point of the top-right corner */
+  offset-distance: calc(12.5% + 200px);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-xywh-003-ref.html b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-003-ref.html
new file mode 100644
index 0000000000..ef371f45c5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-003-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: offset-path:xywh() path with explicit arguments and padding-box</title>
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 200px;
+  height: 100px;
+  padding: 50px;
+  border: 50px solid black;
+}
+#box {
+  background-color: green;
+  transform: translate(200px, 10px) rotate(90deg);
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
diff --git a/testing/web-platform/tests/css/motion/offset-path-shape-xywh-003.html b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-003.html
new file mode 100644
index 0000000000..a03bea9e12
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-shape-xywh-003.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: offset-path:xywh() path with explicit arguments and padding-box</title>
+<link rel="match" href="offset-path-shape-xywh-003-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-basic-shape">
+<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh">
+
+<style>
+#outer {
+  top: 100px;
+  left: 100px;
+  position: relative;
+  width: 200px;
+  height: 100px;
+  padding: 50px;
+  border: 50px solid black;
+}
+#box {
+  background-color: green;
+  position: relative;
+  offset-path: xywh(10% 10% 90% 90%) padding-box;
+  offset-distance: 40%;
+  border-radius: 50% 50% 0 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="outer">
+  <div id="box"></div>
+</div>
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-001-ref.html b/testing/web-platform/tests/css/motion/offset-path-url-001-ref.html
new file mode 100644
index 0000000000..f8fde8afae
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path Referecne: url() to svg paths</title>
+    <style>
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        transform: translate(100px, 60px) rotate(90deg);
+        transform-origin: 0% 0%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-001.html b/testing/web-platform/tests/css/motion/offset-path-url-001.html
new file mode 100644
index 0000000000..0c7ac4f101
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-001.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() to svg paths</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="match" href="offset-path-url-001-ref.html">
+    <meta name="assert" content="This tests that url() referenced to a svg path
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 400px;
+        height: 200px;
+      }
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgPath);
+        offset-anchor: 0% 0%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <path id="svgPath" d='m 100 60 v 200'/>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-002-ref.html b/testing/web-platform/tests/css/motion/offset-path-url-002-ref.html
new file mode 100644
index 0000000000..177d71385f
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path Referecne: url() to rect</title>
+    <style>
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        transform: translate(275px, 75px) rotate(90deg);
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-002.html b/testing/web-platform/tests/css/motion/offset-path-url-002.html
new file mode 100644
index 0000000000..7957d785a3
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-002.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() to rectangles</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#RectElement">
+    <link rel="match" href="offset-path-url-002-ref.html">
+    <meta name="assert" content="This tests that url() referenced to a rect
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 400px;
+        height: 200px;
+      }
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgRect);
+        offset-distance: 37.5%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <rect id="svgRect" width="200" height="200" x="100"/>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-003-ref.html b/testing/web-platform/tests/css/motion/offset-path-url-003-ref.html
new file mode 100644
index 0000000000..e34976213e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path Referecne: url() to circle</title>
+    <style>
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        transform: translate(125px, 125px) rotate(180deg);
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-003.html b/testing/web-platform/tests/css/motion/offset-path-url-003.html
new file mode 100644
index 0000000000..4485b52d07
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() to circles</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#CircleElement">
+    <link rel="match" href="offset-path-url-003-ref.html">
+    <meta name=fuzzy content="0-35;0-76">
+    <meta name="assert" content="This tests that url() referenced to a circle
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 400px;
+        height: 200px;
+      }
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgCircle);
+        offset-distance: 25%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <circle id="svgCircle" cx="150" cy="100" r="50"/>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-004-ref.html b/testing/web-platform/tests/css/motion/offset-path-url-004-ref.html
new file mode 100644
index 0000000000..4ff49d968e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-004-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path Referecne: url() to ellipse</title>
+    <style>
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        transform: translate(175px, 125px) rotate(180deg);
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-004.html b/testing/web-platform/tests/css/motion/offset-path-url-004.html
new file mode 100644
index 0000000000..05aea375a1
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-004.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() to ellipses</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#EllipseElement">
+    <link rel="match" href="offset-path-url-004-ref.html">
+    <meta name=fuzzy content="0-15;0-65">
+    <meta name="assert" content="This tests that url() referenced to an ellipse
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 400px;
+        height: 200px;
+      }
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgEllipse);
+        offset-distance: 25%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <ellipse id="svgEllipse" cx="200" cy="100" rx="100" ry="50"/>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-005.html b/testing/web-platform/tests/css/motion/offset-path-url-005.html
new file mode 100644
index 0000000000..437a111a7e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-005.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() to lines</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#LineElement">
+    <link rel="match" href="offset-path-url-001-ref.html">
+    <meta name="assert" content="This tests that url() referenced to a line
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 400px;
+        height: 200px;
+      }
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgLine);
+        offset-distance: 50%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <line id="svgLine" x1="75" y1="0" x2="75" y2="170"/>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-006.html b/testing/web-platform/tests/css/motion/offset-path-url-006.html
new file mode 100644
index 0000000000..b65af774bb
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-006.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() to polylines</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#PolylineElement">
+    <link rel="match" href="offset-path-url-001-ref.html">
+    <meta name="assert" content="This tests that url() referenced to a polyline
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 400px;
+        height: 200px;
+      }
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgPolyline);
+        offset-distance: 50%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <polyline id="svgPolyline" points="75,0 75,170"/>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-007.html b/testing/web-platform/tests/css/motion/offset-path-url-007.html
new file mode 100644
index 0000000000..0f80207c0e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-007.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() to polygons</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#PolygonElement">
+    <link rel="match" href="offset-path-url-002-ref.html">
+    <meta name="assert" content="This tests that url() referenced to a polygon
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 400px;
+        height: 200px;
+      }
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgPolygon);
+        offset-distance: 37.5%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <polygon id="svgPolygon" points="100,0 300,0 300,200 100,200"/>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-008-ref.html b/testing/web-platform/tests/css/motion/offset-path-url-008-ref.html
new file mode 100644
index 0000000000..3e99530eb3
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-008-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path Referecne: url() with border-box</title>
+    <style>
+      #outer {
+        width: 300px;
+        height: 100px;
+        padding: 50px;
+        border: 50px solid black;
+      }
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        transform: translate(25px, -25px);
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-008.html b/testing/web-platform/tests/css/motion/offset-path-url-008.html
new file mode 100644
index 0000000000..48b99006f9
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-008.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() with border-box</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="match" href="offset-path-url-008-ref.html">
+    <meta name="assert" content="This tests that url() using border-box
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 300px;
+        height: 100px;
+        padding: 50px;
+        border: 50px solid black;
+      }
+      #target {
+        position: relative;
+        /**
+         * offset-path:url() references to the svg element and treats coord-box
+         * as its user coordinate system. And the svg element always gives it
+         * the offset starting position (based on the svg attributes). So the
+         * transformed box should ignore its current position from CSS layout.
+         * Intentionally use left property to make sure we ignore it.
+         */
+        left: 100px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgRect) border-box;
+        offset-distance: 0%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <rect id="svgRect" width="100" height="100" x="150" y="100"/>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-009.html b/testing/web-platform/tests/css/motion/offset-path-url-009.html
new file mode 100644
index 0000000000..90a13d18f4
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-009.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() with padding-box</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="match" href="offset-path-url-008-ref.html">
+    <meta name="assert" content="This tests that url() using padding-box
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 300px;
+        height: 100px;
+        padding: 50px;
+        border: 50px solid black;
+      }
+      #target {
+        position: relative;
+        /**
+         * offset-path:url() references to the svg element and treats coord-box
+         * as its user coordinate system. And the svg element always gives it
+         * the offset starting position (based on the svg attributes). So the
+         * transformed box should ignore its current position from CSS layout.
+         * Intentionally use left property to make sure we ignore it.
+         */
+        left: 100px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgRect) padding-box;
+        offset-distance: 0%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <rect id="svgRect" width="100" height="100" x="100" y="50"/>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-010.html b/testing/web-platform/tests/css/motion/offset-path-url-010.html
new file mode 100644
index 0000000000..d290770459
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-010.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() with content-box</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="match" href="offset-path-url-008-ref.html">
+    <meta name="assert" content="This tests that url() using content-box
+      generates a rotation and translation.">
+    <style>
+      #outer {
+        width: 300px;
+        height: 100px;
+        padding: 50px;
+        border: 50px solid black;
+      }
+      #target {
+        position: relative;
+        /**
+         * offset-path:url() references to the svg element and treats coord-box
+         * as its user coordinate system. And the svg element always gives it
+         * the offset starting position (based on the svg attributes). So the
+         * transformed box should ignore its current position from CSS layout.
+         * Intentionally use left property to make sure we ignore it.
+         */
+        left: 100px;
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        offset-path: url(#svgRect) content-box;
+        offset-distance: 0%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <rect id="svgRect" width="100" height="100" x="50" y="0"/>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-011-ref.html b/testing/web-platform/tests/css/motion/offset-path-url-011-ref.html
new file mode 100644
index 0000000000..d0f97eda1d
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-011-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path Referecne: url() to non SVG elements</title>
+    <style>
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        transform: translate(25px, 25px);
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-011.html b/testing/web-platform/tests/css/motion/offset-path-url-011.html
new file mode 100644
index 0000000000..84dfe5205b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-011.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: offset-path:url() reference to non-SVG elements</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url">
+    <link rel="match" href="offset-path-url-011-ref.html">
+    <meta name="assert" content='This tests that url() references to a non-SVG
+      element and behaves as path("m 0 0") instead.'>
+    <style>
+      #outer {
+        position: relative;
+        left: 50px;
+        top: 50px;
+        width: 300px;
+        height: 100px;
+      }
+      #target {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+        /* This behaves as 'offset-path: path("m 0 0")' */
+        offset-path: url(#outer);
+        offset-anchor: 50% 50%;
+        offset-distance: 0%;
+        border-radius: 50% 50% 0 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/offset-path-url-crash.html b/testing/web-platform/tests/css/motion/offset-path-url-crash.html
new file mode 100644
index 0000000000..c6fe631911
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-path-url-crash.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: path(url) paths</title>
+    <link rel="help" href="https://crbug.com/1465301">
+    <meta name="assert" content="This tests that path(<url>) does not crash when the url() is removed before target.">
+    <style>
+      #test {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: url(#target);
+      }
+    </style>
+  </head>
+  <body onload="start();">
+    <iframe id="target"></iframe>
+    <div id="test"></div>
+  </body>
+  <script>
+    async function change_style_and_remove() {
+      let el = document.querySelectorAll("style")[0];
+      el.innerHTML = "garbadge";
+      let t = document.createElement("frame");
+      document.body.appendChild(t);
+      let target = document.querySelectorAll("iframe")[0];
+      target.parentNode.removeChild(target);
+    }
+    function start() {
+      change_style_and_remove();
+    }
+  </script>
+</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..e5b13fe8a9
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-rotate-001.html
@@ -0,0 +1,27 @@
+<!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;
+        offset-position: 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..1edf38d546
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/offset-rotate-002.html
@@ -0,0 +1,27 @@
+<!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;
+        offset-position: auto;
+      }
+    </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..54414be064
--- /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)');
+}, '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..6358582bfe
--- /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", "normal none reverse", "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-corner) 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(20% + 10px) 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..01435968ce
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-path-computed.html
@@ -0,0 +1,119 @@
+<!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(0deg)");
+test_computed_value("offset-path", "ray(0rad closest-side)", "ray(0deg)");
+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", "ray(0deg at 100px 100px)");
+test_computed_value("offset-path", "ray(0deg sides at center center)", "ray(0deg sides at 50% 50%)");
+test_computed_value("offset-path", "ray(0deg at center center sides)", "ray(0deg sides at 50% 50%)");
+test_computed_value("offset-path", "ray(0deg at center center contain)", "ray(0deg contain at 50% 50%)");
+test_computed_value("offset-path", "ray(at 10px 10px 0deg contain)", "ray(0deg contain at 10px 10px)");
+
+// It's unclear about the normalization at computed time, so we accept both
+// cases for now.
+// https://github.com/w3c/svgwg/issues/321
+test_computed_value("offset-path", 'path("m 20 0 h -100")', [
+    'path("M 20 0 H -80")',
+    'path("m 20 0 h -100")'
+]);
+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")',
+    'path("m 10 20 q 30 60 40 50 q 100 70 90 80")'
+]);
+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")',
+    'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 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")',
+    'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")'
+]);
+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")',
+    '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_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")',
+    'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")',
+]);
+
+test_computed_value("offset-path", "inset(100%)");
+test_computed_value("offset-path", "inset(0 1px)", "inset(0px 1px)");
+test_computed_value("offset-path", "inset(0px 1px 2%)");
+test_computed_value("offset-path", "inset(0px 1px 2% 3em)", "inset(0px 1px 2% 48px)");
+test_computed_value("offset-path", "inset(0px round 100%)");
+test_computed_value("offset-path", "inset(0px round 0 1px)", "inset(0px round 0px 1px)");
+test_computed_value("offset-path", "inset(0px round 0px 1px 2%)");
+test_computed_value("offset-path", "inset(0px round 0px 1px 2% 3em)", "inset(0px round 0px 1px 2% 48px)");
+test_computed_value("offset-path", "inset(10px round 20% / 0px 1px 2% 3px)");
+
+test_computed_value("offset-path", "circle()");
+test_computed_value("offset-path", "circle(100px)");
+test_computed_value("offset-path", "circle(closest-side)", "circle()");
+test_computed_value("offset-path", "circle(at 50% 50%)");
+test_computed_value("offset-path", "circle(100px at 50% 50%)");
+test_computed_value("offset-path", "circle(farthest-side at center top)", "circle(farthest-side at 50% 0%)");
+test_computed_value("offset-path", "circle(4% at top right)", "circle(4% at 100% 0%)");
+
+test_computed_value("offset-path", "ellipse()");
+test_computed_value("offset-path", "ellipse(1px closest-side)");
+test_computed_value("offset-path", "ellipse(at 50% 50%)");
+test_computed_value("offset-path", "ellipse(closest-side closest-side at 10% 20%)", "ellipse(at 10% 20%)");
+test_computed_value("offset-path", "ellipse(farthest-side 4% at bottom left)", "ellipse(farthest-side 4% at 0% 100%)");
+
+test_computed_value("offset-path", "polygon(1% 2%)");
+test_computed_value("offset-path", "polygon(1px 2px, 3% 4%)");
+
+// All <basic-shape-rect> functions compute to the equivalent inset() function.
+// Given "xywh(x y w h)", the equivalent function is
+// "inset(y calc(100% - x - w) calc(100% - y - h) x)".
+// https://drafts.csswg.org/css-shapes-1/#basic-shape-computed-values
+// https://github.com/w3c/csswg-drafts/issues/9053
+test_computed_value("offset-path", "xywh(0 1% 2px 3em)", "inset(1% calc(100% - 2px) calc(99% - 48px) 0px)");
+test_computed_value("offset-path", "xywh(0px 1% 2px 3em round 0)", "inset(1% calc(100% - 2px) calc(99% - 48px) 0px)");
+test_computed_value("offset-path", "xywh(0px 1% 2px 3em round 0 1px)", "inset(1% calc(100% - 2px) calc(99% - 48px) 0px round 0px 1px)");
+test_computed_value("offset-path", "xywh(0px 1% 2px 3% round 0px 1px 2em)", "inset(1% calc(100% - 2px) 96% 0px round 0px 1px 32px)");
+test_computed_value("offset-path", "xywh(0px 1% 2px 3% round 0px 1px 2% 3px)", "inset(1% calc(100% - 2px) 96% 0px round 0px 1px 2% 3px)");
+// Given "rect(t r b l)", the equivalent function is
+// "inset(t calc(100% - r) calc(100% - b) l)".
+test_computed_value("offset-path", "rect(auto auto auto auto)", "inset(0%)");
+test_computed_value("offset-path", "rect(0 1% 2px 3em)", "inset(0px 99% calc(100% - 2px) 48px)");
+test_computed_value("offset-path", "rect(0px 1% auto 3em round 0)", "inset(0px 99% 0% 48px)");
+test_computed_value("offset-path", "rect(0px 1% auto 3% round 0 1px)", "inset(0px 99% 0% 3% round 0px 1px)");
+test_computed_value("offset-path", "rect(0px 1% auto 3% round 0px 1px 2em)", "inset(0px 99% 0% 3% round 0px 1px 32px)");
+test_computed_value("offset-path", "rect(0px 1% auto 3% round 0px 1px 2% 3px)", "inset(0px 99% 0% 3% round 0px 1px 2% 3px)");
+
+test_computed_value("offset-path", "content-box");
+test_computed_value("offset-path", "border-box");
+test_computed_value("offset-path", "view-box");
+
+test_computed_value("offset-path", "inset(10% 20% 30% 40%) border-box", "inset(10% 20% 30% 40%)");
+test_computed_value("offset-path", "fill-box ellipse(at 50% 60%)", "ellipse(at 50% 60%) fill-box");
+test_computed_value("offset-path", "ray(0deg) stroke-box");
+// Mentionted above above.
+test_computed_value("offset-path", 'path("m 20 0 h -100") view-box', [
+    'path("M 20 0 H -80") view-box',
+    'path("m 20 0 h -100") view-box'
+]);
+</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..6b7c4f5edf
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-path-parsing-invalid.html
@@ -0,0 +1,43 @@
+<!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", 'path("")');
+test_invalid_value("offset-path", 'path(" ")');
+
+// We ignore `<fill-rule>` from offset-path: path().
+// https://github.com/w3c/fxtf-drafts/issues/512
+// https://github.com/w3c/csswg-drafts/issues/7390
+test_invalid_value("offset-path", 'path(nonzero, "M 0 0 H 100")');
+test_invalid_value("offset-path", 'path(evenodd, "M 0 0 H 100")');
+
+test_invalid_value("offset-path", "ray(0 sides)");
+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)");
+
+test_invalid_value("offset-path", "xywh(0px)");
+test_invalid_value("offset-path", "xywh(0px 1%)");
+test_invalid_value("offset-path", "xywh(0px 1% 2em)");
+
+test_invalid_value("offset-path", "rect(0px)");
+test_invalid_value("offset-path", "rect(0px 1%)");
+test_invalid_value("offset-path", "rect(0px 1% auto)");
+
+</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..c3c22754c4
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-path-parsing-valid.html
@@ -0,0 +1,103 @@
+<!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(0deg)");
+test_valid_value("offset-path", "ray(0rad closest-side)", "ray(0rad)");
+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", "ray(0deg at 100px 100px)");
+test_valid_value("offset-path", "ray(0deg sides at center center)");
+test_valid_value("offset-path", "ray(0deg at center center sides)", "ray(0deg sides at center center)");
+test_valid_value("offset-path", "ray(0deg at center center contain)", "ray(0deg contain at center center)");
+test_valid_value("offset-path", "ray(at 10px 10px 0deg contain)", "ray(0deg contain at 10px 10px)");
+
+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")');
+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")',
+    '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.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")',
+    '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"  )  ',
+    'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")'
+);
+
+test_valid_value("offset-path", 'url("http://www.example.com/index.html#polyline1")');
+
+// https://drafts.csswg.org/css-shapes-1/#basic-shape-serialization
+test_valid_value("offset-path", "inset(100%)");
+test_valid_value("offset-path", "inset(0 1px)", "inset(0px 1px)");
+test_valid_value("offset-path", "inset(0px 1px 2%)");
+test_valid_value("offset-path", "inset(0px 1px 2% 3em)");
+test_valid_value("offset-path", "inset(0px round 100%)");
+test_valid_value("offset-path", "inset(0px round 0 1px)", "inset(0px round 0px 1px)");
+test_valid_value("offset-path", "inset(0px round 0px 1px 2%)");
+test_valid_value("offset-path", "inset(0px round 0px 1px 2% 3em)");
+test_valid_value("offset-path", "inset(10px round 20% / 0px 1px 2% 3em)");
+
+test_valid_value("offset-path", "circle()");
+test_valid_value("offset-path", "circle(100px)");
+test_valid_value("offset-path", "circle(closest-side)", "circle()");
+test_valid_value("offset-path", "circle(at 50% 50%)");
+test_valid_value("offset-path", "circle(100px at 50% 50%)");
+test_valid_value("offset-path", "circle(farthest-side at 0% 0%)");
+
+test_valid_value("offset-path", "ellipse()");
+test_valid_value("offset-path", "ellipse(1px closest-side)");
+test_valid_value("offset-path", "ellipse(at 50% 50%)");
+test_valid_value("offset-path", "ellipse(closest-side closest-side at 10% 20%)", "ellipse(at 10% 20%)");
+test_valid_value("offset-path", "ellipse(farthest-side 4% at 0% 100%)");
+
+test_valid_value("offset-path", "polygon(1% 2%)");
+test_valid_value("offset-path", "polygon(1px 2px, 3em 4em)");
+
+test_valid_value("offset-path", "xywh(0 1% 2px 3em)", "xywh(0px 1% 2px 3em)");
+test_valid_value("offset-path", "xywh(0px 1% 2px 3em round 0)", "xywh(0px 1% 2px 3em)");
+test_valid_value("offset-path", "xywh(0px 1% 2px 3em round 0 1px)", "xywh(0px 1% 2px 3em round 0px 1px)");
+test_valid_value("offset-path", "xywh(0px 1% 2px 3em round 0px 1px 2%)");
+test_valid_value("offset-path", "xywh(0px 1% 2px 3em round 0px 1px 2% 3em)");
+
+test_valid_value("offset-path", "rect(0 100% 200px 4em)", "rect(0px 100% 200px 4em)");
+test_valid_value("offset-path", "rect(auto auto auto auto)");
+test_valid_value("offset-path", "rect(0px 100% auto 4em round 0)", "rect(0px 100% auto 4em)");
+test_valid_value("offset-path", "rect(0px 100% auto 4em round 0 1px)", "rect(0px 100% auto 4em round 0px 1px)");
+test_valid_value("offset-path", "rect(0px 100% auto 4em round 0px 1px 2%)");
+test_valid_value("offset-path", "rect(0px 100% auto 4em round 0px 1px 2% 3em)");
+
+test_valid_value("offset-path", "content-box");
+test_valid_value("offset-path", "border-box");
+test_valid_value("offset-path", "view-box");
+
+test_valid_value("offset-path", "inset(10% 20% 30% 40%) border-box", "inset(10% 20% 30% 40%)");
+test_valid_value("offset-path", "fill-box ellipse(50% 60%)", "ellipse(50% 60%) fill-box");
+test_valid_value("offset-path", "content-box ellipse(50% 60% at 50% 50%)", "ellipse(50% 60% at 50% 50%) content-box");
+test_valid_value("offset-path", "ray(0deg) stroke-box");
+test_valid_value("offset-path", 'path("m 20 0 h -100") view-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..ebb8023e6c
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-position-computed.html
@@ -0,0 +1,38 @@
+<!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', 'normal', 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", "normal");
+
+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..bc0d19a460
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/parsing/offset-position-parsing-valid.html
@@ -0,0 +1,30 @@
+<!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 | normal | <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", "normal");
+
+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(20% + 10px) 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..585e4e6bdb
--- /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-corner) 10px auto 30deg / right bottom', {
+  'offset-position': 'left bottom',
+  'offset-path': 'ray(0rad closest-corner)',
+  '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': 'normal',
+  '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-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/motion
parent	Initial commit. (diff)
download	firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip