Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/motion/animation
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
21 files changed, 1923 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/motion/animation/offset-anchor-composition.html b/testing/web-platform/tests/css/motion/animation/offset-anchor-composition.html
new file mode 100644
index 0000000000..53210fdf38
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-anchor-composition.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>offset-anchor composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+<meta name="assert" content="offset-anchor supports animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.target {
+  width: 200px;
+  height: 200px;
+}
+</style>
+<body>
+<script>
+test_composition({
+  property: 'offset-anchor',
+  underlying: '40px 60px',
+  addFrom: '60px 40px',
+  addTo: '160px 140px',
+}, [
+  {at: -0.25, expect: '75px 75px'},
+  {at: 0, expect: '100px 100px'},
+  {at: 0.25, expect: '125px 125px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 175px'},
+  {at: 1, expect: '200px 200px'},
+  {at: 1.25, expect: '225px 225px'},
+]);
+
+test_composition({
+  property: 'offset-anchor',
+  underlying: 'top 20% left 40%',
+  addFrom: 'left 60% top 80%',
+  addTo: 'right 80% bottom 40%',
+}, [
+  {at: -0.25, expect: '110% 105%'},
+  {at: 0, expect: '100% 100%'},
+  {at: 0.25, expect: '90% 95%'},
+  {at: 0.5, expect: '80% 90%'},
+  {at: 0.75, expect: '70% 85%'},
+  {at: 1, expect: '60% 80%'},
+  {at: 1.25, expect: '50% 75%'},
+]);
+
+test_composition({
+  property: 'offset-anchor',
+  underlying: '40px 60px',
+  replaceFrom: '100px 200px',
+  addTo: '160px 40px',
+}, [
+  {at: -0.25, expect: '75px 225px'},
+  {at: 0, expect: '100px 200px'},
+  {at: 0.25, expect: '125px 175px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 125px'},
+  {at: 1, expect: '200px 100px'},
+  {at: 1.25, expect: '225px 75px'},
+]);
+
+test_composition({
+  property: 'offset-anchor',
+  underlying: '40px 60px',
+  addFrom: '60px 140px',
+  replaceTo: '200px 100px',
+}, [
+  {at: -0.25, expect: '75px 225px'},
+  {at: 0, expect: '100px 200px'},
+  {at: 0.25, expect: '125px 175px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 125px'},
+  {at: 1, expect: '200px 100px'},
+  {at: 1.25, expect: '225px 75px'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html
new file mode 100644
index 0000000000..9c69c0f0be
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-anchor interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
+    <meta name="assert" content="offset-anchor supports <position> animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        offset-anchor: 30px 10px;
+      }
+      .target {
+        offset-anchor: 10px 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-anchor',
+        from: '220px 240px',
+        to: '300px 400px',
+      }, [
+        {at: -1, expect: '140px 80px'},
+        {at: 0, expect: '220px 240px'},
+        {at: 0.125, expect: '230px 260px'},
+        {at: 0.875, expect: '290px 380px'},
+        {at: 1, expect: '300px 400px'},
+        {at: 2, expect: '380px 560px'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: 'left 480px top 400px',
+        to: 'right -140% bottom -60%',
+      }, [
+        {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%)'},
+        {at: 0, expect: 'left calc(0% + 480px) top calc(0% + 400px)'},
+        {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%)'},
+        {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px)'},
+        {at: 1, expect: 'right -140% bottom -60%'},
+        {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px)'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: 'left top',
+        to: 'left 8px bottom 20%',
+      }, [
+        {at: -1, expect: 'calc(0% - 8px) -80%'},
+        {at: 0, expect: 'left top'},
+        {at: 0.125, expect: 'calc(0% + 1px) 10%'},
+        {at: 0.875, expect: 'calc(0% + 7px) 70%'},
+        {at: 1, expect: 'left calc(0% + 8px) bottom 20%'},
+        {at: 2, expect: 'calc(0% + 16px) 160%'}
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-anchor',
+        from: 'right 10px top 20%',
+        to: 'auto'
+      });
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: neutralKeyframe,
+        to: '20px 20px',
+      }, [
+        {at: -0.3, expect: '7px 33px'},
+        {at: 0, expect: '10px 30px'},
+        {at: 0.3, expect: '13px 27px'},
+        {at: 0.6, expect: '16px 24px'},
+        {at: 1, expect: '20px 20px'},
+        {at: 1.5, expect: '25px 15px'},
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-anchor',
+        from: 'initial',
+        to: '60% 40%',
+      });
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: 'inherit',
+        to: '20px 20px',
+      }, [
+        {at: -0.3, expect: '33px 7px'},
+        {at: 0, expect: '30px 10px'},
+        {at: 0.3, expect: '27px 13px'},
+        {at: 0.6, expect: '24px 16px'},
+        {at: 1, expect: '20px 20px'},
+        {at: 1.5, expect: '15px 25px'},
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-anchor',
+        from: 'unset',
+        to: '50% 10px',
+      });
+
+      test_interpolation({
+        property: 'offset-anchor',
+        from: '0% 50%',
+        to: '100% 150%'
+      }, [
+        {at: -0.3, expect: '-30% 20%'},
+        {at: 0, expect: '0% 50%'},
+        {at: 0.3, expect: '30% 80%'},
+        {at: 0.6, expect: '60% 110%'},
+        {at: 1, expect: '100% 150%'},
+        {at: 1.5, expect: '150% 200%'}
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-anchor',
+        from: 'auto',
+        to: '20px 20px',
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-distance-composition.html b/testing/web-platform/tests/css/motion/animation/offset-distance-composition.html
new file mode 100644
index 0000000000..4ff6e95b05
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-distance-composition.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>offset-distance composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+<meta name="assert" content="offset-distance supports animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_composition({
+  property: 'offset-distance',
+  underlying: '50px',
+  addFrom: '100px',
+  addTo: '200px',
+}, [
+  {at: -0.3, expect: '120px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '200px'},
+  {at: 1, expect: '250px'},
+  {at: 1.5, expect: '300px'},
+]);
+
+test_composition({
+  property: 'offset-distance',
+  underlying: '100px',
+  addFrom: '10px',
+  addTo: '2px',
+}, [
+  {at: -0.5, expect: '114px'},
+  {at: 0, expect: '110px'},
+  {at: 0.5, expect: '106px'},
+  {at: 1, expect: '102px'},
+  {at: 1.5, expect: '98px'},
+]);
+
+test_composition({
+  property: 'offset-distance',
+  underlying: '10%',
+  addFrom: '100px',
+  addTo: '20%',
+}, [
+  {at: -0.3, expect: 'calc(130px + 4%)'},
+  {at: 0, expect: 'calc(100px + 10%)'},
+  {at: 0.5, expect: 'calc(50px + 20%)'},
+  {at: 1, expect: '30%'},
+  {at: 1.5, expect: 'calc(-50px + 40%)'},
+]);
+
+test_composition({
+  property: 'offset-distance',
+  underlying: '50px',
+  addFrom: '100px',
+  replaceTo: '200px',
+}, [
+  {at: -0.3, expect: '135px'},
+  {at: 0, expect: '150px'},
+  {at: 0.5, expect: '175px'},
+  {at: 1, expect: '200px'},
+  {at: 1.5, expect: '225px'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-distance-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-distance-interpolation.html
new file mode 100644
index 0000000000..bc0c094a8e
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-distance-interpolation.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <style>
+    .parent {
+      offset-distance: 30px;
+    }
+    .target {
+      width: 10px;
+      height: 10px;
+      background-color: black;
+      offset-path: path("M0 0H 400");
+      offset-distance: 10px;
+    }
+    .expected {
+      background-color: green;
+    }
+  </style>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-distance',
+        from: '-30px',
+        to: '50px',
+      }, [
+        {at: -1, expect: '-110px'},
+        {at: 0, expect: '-30px'},
+        {at: 0.125, expect: '-20px'},
+        {at: 0.875, expect: '40px'},
+        {at: 1, expect: '50px'},
+        {at: 2, expect: '130px'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: '20%',
+        to: '100%',
+      }, [
+        {at: -1, expect: '-60%'},
+        {at: 0, expect: '20%'},
+        {at: 0.125, expect: '30%'},
+        {at: 0.875, expect: '90%'},
+        {at: 1, expect: '100%'},
+        {at: 2, expect: '180%'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: 'calc(20% - 30px)',
+        to: 'calc(50px + 100%)',
+      }, [
+        {at: -1, expect: 'calc(-110px + -60%)'},
+        {at: 0, expect: 'calc(20% - 30px)'},
+        {at: 0.125, expect: 'calc(-20px + 30%)'},
+        {at: 0.875, expect: 'calc(40px + 90%)'},
+        {at: 1, expect: 'calc(50px + 100%)'},
+        {at: 2, expect: 'calc(130px + 180%)'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: neutralKeyframe,
+        to: '20px',
+      }, [
+        {at: -0.3, expect: '7px'},
+        {at: 0, expect: '10px'},
+        {at: 0.3, expect: '13px'},
+        {at: 0.6, expect: '16px'},
+        {at: 1, expect: '20px'},
+        {at: 1.5, expect: '25px'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: 'initial',
+        to: '20px',
+      }, [
+        {at: -0.3, expect: '-6px'},
+        {at: 0, expect: '0px'},
+        {at: 0.3, expect: '6px'},
+        {at: 0.6, expect: '12px'},
+        {at: 1, expect: '20px'},
+        {at: 1.5, expect: '30px'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: 'inherit',
+        to: '20px',
+      }, [
+        {at: -0.3, expect: '33px'},
+        {at: 0, expect: '30px'},
+        {at: 0.3, expect: '27px'},
+        {at: 0.6, expect: '24px'},
+        {at: 1, expect: '20px'},
+        {at: 1.5, expect: '15px'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: 'unset',
+        to: '20px',
+      }, [
+        {at: -0.3, expect: '-6px'},
+        {at: 0, expect: '0px'},
+        {at: 0.3, expect: '6px'},
+        {at: 0.6, expect: '12px'},
+        {at: 1, expect: '20px'},
+        {at: 1.5, expect: '30px'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-distance',
+        from: '10px',
+        to: '100%',
+      }, [
+        {at: -0.3, expect: 'calc(13px + -30%)'},
+        {at: 0, expect: 'calc(0% + 10px)'},
+        {at: 0.3, expect: 'calc(7px + 30%)'},
+        {at: 0.6, expect: 'calc(4px + 60%)'},
+        {at: 1, expect: '100%'},
+        {at: 1.5, expect: 'calc(-5px + 150%)'},
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-interpolation.html
new file mode 100644
index 0000000000..2ee011bd77
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-interpolation.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-shorthand">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 200H 700") 500px 800deg',
+        to: 'path("M0 300H 700 Z") 600px 900deg',
+        method: 'CSS Transitions',
+      }, [
+        {at: -0.3, expect: 'path("M0 300H 700 Z") 470px 770deg'},
+        {at: 0, expect: 'path("M0 300H 700 Z") 500px 800deg'},
+        {at: 0.3, expect: 'path("M0 300H 700 Z") 530px 830deg'},
+        {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'},
+        {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'},
+        {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 0H 200") 500px auto',
+        to: 'path("M0 0H 300") 600px 0deg',
+        method: 'CSS Transitions',
+      }, [
+        {at: -0.3, expect: 'path("M0 0H 170") 470px 0deg'},
+        {at: 0, expect: 'path("M0 0H 200") 500px 0deg'},
+        {at: 0.3, expect: 'path("M0 0H 230") 530px 0deg'},
+        {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'},
+        {at: 1, expect: 'path("M0 0H 300") 600px 0deg'},
+        {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 200H 700") 500px 800deg',
+        to: 'path("M0 300H 700 Z") 600px 900deg',
+        method: 'CSS Animations',
+      }, [
+        {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'},
+        {at: 0, expect: 'path("M0 200H 700") 500px 800deg'},
+        {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'},
+        {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'},
+        {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'},
+        {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 0H 200") 500px auto',
+        to: 'path("M0 0H 300") 600px 0deg',
+        method: 'CSS Animations',
+      }, [
+        {at: -0.3, expect: 'path("M0 0H 170") 470px'},
+        {at: 0, expect: 'path("M0 0H 200") 500px'},
+        {at: 0.3, expect: 'path("M0 0H 230") 530px'},
+        {at: 0.6, expect: 'path("M0 0H 260") 560px 0deg'},
+        {at: 1, expect: 'path("M0 0H 300") 600px 0deg'},
+        {at: 1.5, expect: 'path("M0 0H 350") 650px 0deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 200H 700") 500px 800deg',
+        to: 'path("M0 300H 700 Z") 600px 900deg',
+        method: 'Web Animations',
+      }, [
+        {at: -0.3, expect: 'path("M0 200H 700") 470px 770deg'},
+        {at: 0, expect: 'path("M0 200H 700") 500px 800deg'},
+        {at: 0.3, expect: 'path("M0 200H 700") 530px 830deg'},
+        {at: 0.6, expect: 'path("M0 300H 700 Z") 560px 860deg'},
+        {at: 1, expect: 'path("M0 300H 700 Z") 600px 900deg'},
+        {at: 1.5, expect: 'path("M0 300H 700 Z") 650px 950deg'},
+      ]);
+
+      test_interpolation({
+        property: 'offset',
+        from: 'path("M0 0V 200") 500px auto',
+        to: 'path("M0 0H 300") 600px 0deg',
+        method: 'Web Animations',
+      }, [
+        {at: -0.3, expect: 'path("M0 0V 200") 470px'},
+        {at: 0, expect: 'path("M0 0V 200") 500px'},
+        {at: 0.3, expect: 'path("M0 0V 200") 530px'},
+        {at: 0.6, expect: 'path("M0 0H 300") 560px 0deg'},
+        {at: 1, expect: 'path("M0 0H 300") 600px 0deg'},
+        {at: 1.5, expect: 'path("M0 0H 300") 650px 0deg'},
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-composition.html b/testing/web-platform/tests/css/motion/animation/offset-path-composition.html
new file mode 100644
index 0000000000..eedd363efa
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-composition.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>offset-distance composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+<meta name="assert" content="offset-distance supports animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+// TODO(ericwilligers) Support additive animation for path strings crbug.com/699308
+
+// Ray paths compose.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg sides)',
+  addFrom: 'ray(10deg sides)',
+  addTo: 'ray(20deg sides)',
+}, [
+  {at: -0.3, expect: 'ray(27deg sides)'},
+  {at: 0, expect: 'ray(30deg sides)'},
+  {at: 0.3, expect: 'ray(33deg sides)'},
+  {at: 0.6, expect: 'ray(36deg sides)'},
+  {at: 1, expect: 'ray(40deg sides)'},
+  {at: 1.5, expect: 'ray(45deg sides)'},
+]);
+
+// Ray paths without contain don't compose with underlying contain.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg closest-corner contain)',
+  addFrom: 'ray(10deg closest-corner)',
+  addTo: 'ray(20deg closest-corner)',
+}, [
+  {at: -0.3, expect: 'ray(7deg closest-corner)'},
+  {at: 0, expect: 'ray(10deg closest-corner)'},
+  {at: 0.3, expect: 'ray(13deg closest-corner)'},
+  {at: 0.6, expect: 'ray(16deg closest-corner)'},
+  {at: 1, expect: 'ray(20deg closest-corner)'},
+  {at: 1.5, expect: 'ray(25deg closest-corner)'},
+]);
+
+// Ray paths don't compose when underlying has different size.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg closest-side)',
+  addFrom: 'ray(10deg closest-corner)',
+  addTo: 'ray(20deg closest-corner)',
+}, [
+  {at: -0.3, expect: 'ray(7deg closest-corner)'},
+  {at: 0, expect: 'ray(10deg closest-corner)'},
+  {at: 0.3, expect: 'ray(13deg closest-corner)'},
+  {at: 0.6, expect: 'ray(16deg closest-corner)'},
+  {at: 1, expect: 'ray(20deg closest-corner)'},
+  {at: 1.5, expect: 'ray(25deg closest-corner)'},
+]);
+
+// Ray contain paths compose with underlying contain.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg farthest-side contain)',
+  addFrom: 'ray(190deg farthest-side contain)',
+  addTo: 'ray(20deg farthest-side contain)',
+}, [
+  {at: -0.3, expect: 'ray(261deg farthest-side contain)'},
+  {at: 0, expect: 'ray(210deg farthest-side contain)'},
+  {at: 0.3, expect: 'ray(159deg farthest-side contain)'},
+  {at: 0.6, expect: 'ray(108deg farthest-side contain)'},
+  {at: 1, expect: 'ray(40deg farthest-side contain)'},
+  {at: 1.5, expect: 'ray(-45deg farthest-side contain)'},
+]);
+
+// When we can't interpolate, we can't compose.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg farthest-corner)',
+  addFrom: 'ray(190deg farthest-corner contain)',
+  addTo: 'ray(20deg farthest-corner)',
+}, [
+  {at: -0.3, expect: 'ray(190deg farthest-corner contain)'},
+  {at: 0, expect: 'ray(190deg farthest-corner contain)'},
+  {at: 0.3, expect: 'ray(190deg farthest-corner contain)'},
+  {at: 0.6, expect: 'ray(40deg farthest-corner)'},
+  {at: 1, expect: 'ray(40deg farthest-corner)'},
+  {at: 1.5, expect: 'ray(40deg farthest-corner)'},
+]);
+
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg sides)',
+  replaceFrom: 'ray(190deg sides contain)',
+  addTo: 'ray(20deg sides)',
+}, [
+  {at: -0.3, expect: 'ray(190deg sides contain)'},
+  {at: 0, expect: 'ray(190deg sides contain)'},
+  {at: 0.3, expect: 'ray(190deg sides contain)'},
+  {at: 0.6, expect: 'ray(40deg sides)'},
+  {at: 1, expect: 'ray(40deg sides)'},
+  {at: 1.5, expect: 'ray(40deg sides)'},
+]);
+
+// Ray paths compose with underlying.
+test_composition({
+  property: 'offset-path',
+  underlying: 'ray(20deg closest-side)',
+  addFrom: 'ray(10deg closest-side)',
+  replaceTo: 'ray(10deg closest-side)',
+}, [
+  {at: -0.3, expect: 'ray(36deg closest-side)'},
+  {at: 0, expect: 'ray(30deg closest-side)'},
+  {at: 0.3, expect: 'ray(24deg closest-side)'},
+  {at: 0.6, expect: 'ray(18deg closest-side)'},
+  {at: 1, expect: 'ray(10deg closest-side)'},
+  {at: 1.5, expect: 'ray(0deg closest-side)'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-001.html
new file mode 100644
index 0000000000..5b90813bb5
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-001.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      // Distinct number of path segments
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 H 1 H 2')",
+        to: "path('M 0 0 H 3')"
+      });
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 1 2 L 3 4 Z')",
+        to: "none"
+      });
+
+      // Distinct segment types
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 10 0 H 11')",
+        to: "path('M 20 0 V 2')"
+      });
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 1 2 L 4 6 Z')",
+        to: "path('M 1 2 H 4 V 6')"
+      });
+
+      // Exercise each segment type
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 Z')",
+        to: "path('M 0 0 Z')"
+      }, [
+        {at: -1, expect: "path('M 0 0 Z')"},
+        {at: 0, expect: "path('M 0 0 Z')"},
+        {at: 0.125, expect: "path('M 0 0 Z')"},
+        {at: 0.875, expect: "path('M 0 0 Z')"},
+        {at: 1, expect: "path('M 0 0 Z')"},
+        {at: 2, expect: "path('M 0 0 Z')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 20 70')",
+        to: "path('M 100 30')"
+      }, [
+        {at: -1, expect: "path('M -60 110')"},
+        {at: 0, expect: "path('M 20 70')"},
+        {at: 0.125, expect: "path('M 30 65')"},
+        {at: 0.875, expect: "path('M 90 35')"},
+        {at: 1, expect: "path('M 100 30')"},
+        {at: 2, expect: "path('M 180 -10')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 20 70')",
+        to: "path('m 100 30')"
+      }, [
+        {at: -1, expect: "path('M -60 110')"},
+        {at: 0, expect: "path('M 20 70')"},
+        {at: 0.125, expect: "path('M 30 65')"},
+        {at: 0.875, expect: "path('M 90 35')"},
+        {at: 1, expect: "path('M 100 30')"},
+        {at: 2, expect: "path('M 180 -10')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 100 200 L 120 270')",
+        to: "path('m 100 200 L 200 230')"
+      }, [
+        {at: -1, expect: "path('M 100 200 L 40 310')"},
+        {at: 0, expect: "path('M 100 200 L 120 270')"},
+        {at: 0.125, expect: "path('M 100 200 L 130 265')"},
+        {at: 0.875, expect: "path('M 100 200 L 190 235')"},
+        {at: 1, expect: "path('M 100 200 L 200 230')"},
+        {at: 2, expect: "path('M 100 200 L 280 190')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 100 200 l 20 70')",
+        to: "path('m 100 200 l 100 30')"
+      }, [
+        {at: -1, expect: "path('M 100 200 L 40 310')"},
+        {at: 0, expect: "path('M 100 200 L 120 270')"},
+        {at: 0.125, expect: "path('M 100 200 L 130 265')"},
+        {at: 0.875, expect: "path('M 100 200 L 190 235')"},
+        {at: 1, expect: "path('M 100 200 L 200 230')"},
+        {at: 2, expect: "path('M 100 200 L 280 190')"}
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-002.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-002.html
new file mode 100644
index 0000000000..2841bd9562
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-002.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 20 10 C 32 42 52 62 120 2200')",
+        to: "path('M 20 10 C 40 50 60 70 200 3000')",
+      }, [
+        {at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"},
+        {at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"},
+        {at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"},
+        {at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"},
+        {at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"},
+        {at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 20 10 c 12 32 32 52 100 2190')",
+        to: "path('m 20 10 c 20 40 40 60 180 2990')"
+      }, [
+        {at: -1, expect: "path('M 20 10 C 24 34 44 54 40 1400')"},
+        {at: 0, expect: "path('M 20 10 C 32 42 52 62 120 2200')"},
+        {at: 0.125, expect: "path('M 20 10 C 33 43 53 63 130 2300')"},
+        {at: 0.875, expect: "path('M 20 10 C 39 49 59 69 190 2900')"},
+        {at: 1, expect: "path('M 20 10 C 40 50 60 70 200 3000')"},
+        {at: 2, expect: "path('M 20 10 C 48 58 68 78 280 3800')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 20 10 Q 32 42 120 2200')",
+        to: "path('M 20 10 Q 40 50 200 3000')"
+      }, [
+        {at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"},
+        {at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"},
+        {at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"},
+        {at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"},
+        {at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"},
+        {at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 20 10 q 12 32 100 2190')",
+        to: "path('m 20 10 q 20 40 180 2990')"
+      }, [
+        {at: -1, expect: "path('M 20 10 Q 24 34 40 1400')"},
+        {at: 0, expect: "path('M 20 10 Q 32 42 120 2200')"},
+        {at: 0.125, expect: "path('M 20 10 Q 33 43 130 2300')"},
+        {at: 0.875, expect: "path('M 20 10 Q 39 49 190 2900')"},
+        {at: 1, expect: "path('M 20 10 Q 40 50 200 3000')"},
+        {at: 2, expect: "path('M 20 10 Q 48 58 280 3800')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 100 400 A 10 20 30 1 0 140 450')",
+        to: "path('M 300 200 A 50 60 70 0 1 380 290')"
+      }, [
+        {at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"},
+        {at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"},
+        {at: 0.125, expect: "path('M 125 375 A 15 25 35 1 0 170 430')"},
+        {at: 0.875, expect: "path('M 275 225 A 45 55 65 0 1 350 310')"},
+        {at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"},
+        {at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 100 400 a 10 20 30 1 0 40 50')",
+        to: "path('m 300 200 a 50 60 70 0 1 80 90')"
+      }, [
+        {at: -1, expect: "path('M -100 600 A -30 -20 -10 1 0 -100 610')"},
+        {at: 0, expect: "path('M 100 400 A 10 20 30 1 0 140 450')"},
+        {at: 0.125, expect: "path('M 125 375 A 15 25 35 1 0 170 430')"},
+        {at: 0.875, expect: "path('M 275 225 A 45 55 65 0 1 350 310')"},
+        {at: 1, expect: "path('M 300 200 A 50 60 70 0 1 380 290')"},
+        {at: 2, expect: "path('M 500 0 A 90 100 110 0 1 620 130')"}
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-003.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-003.html
new file mode 100644
index 0000000000..44c0285055
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-003.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 50 60 H 70')",
+        to: "path('M 10 140 H 270')"
+      }, [
+        {at: -1, expect: "path('M 90 -20 H -130')"},
+        {at: 0, expect: "path('M 50 60 H 70')"},
+        {at: 0.125, expect: "path('M 45 70 H 95')"},
+        {at: 0.875, expect: "path('M 15 130 H 245')"},
+        {at: 1, expect: "path('M 10 140 H 270')"},
+        {at: 2, expect: "path('M -30 220 H 470')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 50 60 h 20')",
+        to: "path('m 10 140 h 260')"
+      }, [
+        {at: -1, expect: "path('M 90 -20 H -130')"},
+        {at: 0, expect: "path('M 50 60 H 70')"},
+        {at: 0.125, expect: "path('M 45 70 H 95')"},
+        {at: 0.875, expect: "path('M 15 130 H 245')"},
+        {at: 1, expect: "path('M 10 140 H 270')"},
+        {at: 2, expect: "path('M -30 220 H 470')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 50 60 V 70')",
+        to: "path('M 10 140 V 270')"
+      }, [
+        {at: -1, expect: "path('M 90 -20 V -130')"},
+        {at: 0, expect: "path('M 50 60 V 70')"},
+        {at: 0.125, expect: "path('M 45 70 V 95')"},
+        {at: 0.875, expect: "path('M 15 130 V 245')"},
+        {at: 1, expect: "path('M 10 140 V 270')"},
+        {at: 2, expect: "path('M -30 220 V 470')"}
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 50 60 v 10')",
+        to: "path('m 10 140 v 130')"
+      }, [
+        {at: -1, expect: "path('M 90 -20 V -130')"},
+        {at: 0, expect: "path('M 50 60 V 70')"},
+        {at: 0.125, expect: "path('M 45 70 V 95')"},
+        {at: 0.875, expect: "path('M 15 130 V 245')"},
+        {at: 1, expect: "path('M 10 140 V 270')"},
+        {at: 2, expect: "path('M -30 220 V 470')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 12 34 S 45 67 89 123')",
+        to: "path('M 20 26 S 61 51 113 99')"
+      }, [
+        {at: -1, expect: "path('M 4 42 S 29 83 65 147')"},
+        {at: 0, expect: "path('M 12 34 S 45 67 89 123')"},
+        {at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"},
+        {at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"},
+        {at: 1, expect: "path('M 20 26 S 61 51 113 99')"},
+        {at: 2, expect: "path('M 28 18 S 77 35 137 75')"},
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 12 34 s 33 33 77 89')",
+        to: "path('m 20 26 s 41 25 93 73')"
+      }, [
+        {at: -1, expect: "path('M 4 42 S 29 83 65 147')"},
+        {at: 0, expect: "path('M 12 34 S 45 67 89 123')"},
+        {at: 0.125, expect: "path('M 13 33 S 47 65 92 120')"},
+        {at: 0.875, expect: "path('M 19 27 S 59 53 110 102')"},
+        {at: 1, expect: "path('M 20 26 S 61 51 113 99')"},
+        {at: 2, expect: "path('M 28 18 S 77 35 137 75')"},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 12 34 T 45 67')",
+        to: "path('M 20 26 T 61 51')"
+      }, [
+        {at: -1, expect: "path('M 4 42 T 29 83')"},
+        {at: 0, expect: "path('M 12 34 T 45 67')"},
+        {at: 0.125, expect: "path('M 13 33 T 47 65')"},
+        {at: 0.875, expect: "path('M 19 27 T 59 53')"},
+        {at: 1, expect: "path('M 20 26 T 61 51')"},
+        {at: 2, expect: "path('M 28 18 T 77 35')"},
+      ]);
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 12 34 t 33 33')",
+        to: "path('m 20 26 t 41 25')"
+      }, [
+        {at: -1, expect: "path('M 4 42 T 29 83')"},
+        {at: 0, expect: "path('M 12 34 T 45 67')"},
+        {at: 0.125, expect: "path('M 13 33 T 47 65')"},
+        {at: 0.875, expect: "path('M 19 27 T 59 53')"},
+        {at: 1, expect: "path('M 20 26 T 61 51')"},
+        {at: 2, expect: "path('M 28 18 T 77 35')"},
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-004.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-004.html
new file mode 100644
index 0000000000..860348649b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-004.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      // Mix relative and non-relative
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
+        to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 300 100 z')"
+      }, [
+        {at: -1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 0 -100 Z')"},
+        {at: 0, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 0.125, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 225 125 Z')"},
+        {at: 0.875, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 375 275 Z')"},
+        {at: 1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 400 300 Z')"},
+        {at: 2, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 600 500 Z')"},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
+        to: "path('M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z')"
+      }, [
+        {at: -1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 0, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 0.125, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 0.875, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 1, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+        {at: 2, expect: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')"},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 l 40 50 z l 40 60 z m 60 70 l 90 60 z t 70 130')",
+        to: "path('M 210 220 L 170 190 Z L 90 120 Z M 110 130 L 200 230 Z T 220 220')"
+      }, [
+        {at: -1, expect: "path('M -190 -180 L -70 -50 Z L 10 40 Z M 30 50 L 120 70 Z T 60 220')"},
+        {at: 0, expect: "path('M 10 20 L 50 70 Z L 50 80 Z M 70 90 L 160 150 Z T 140 220')"},
+        {at: 0.125, expect: "path('M 35 45 L 65 85 Z L 55 85 Z M 75 95 L 165 160 Z T 150 220')"},
+        {at: 0.875, expect: "path('M 185 195 L 155 175 Z L 85 115 Z M 105 125 L 195 220 Z T 210 220')"},
+        {at: 1, expect: "path('M 210 220 L 170 190 Z L 90 120 Z M 110 130 L 200 230 Z T 220 220')"},
+        {at: 2, expect: "path('M 410 420 L 290 310 Z L 130 160 Z M 150 170 L 240 310 Z T 300 220')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 c 40 50 30 60 80 70 c 120 130 170 140 110 160')",
+        to: "path('M 130 100 C 130 150 120 160 210 170 C 290 300 340 310 320 330')"
+      }, [
+        {at: -1, expect: "path('M -110 -60 C -30 -10 -40 0 -30 10 C 130 140 180 150 80 170')"},
+        {at: 0, expect: "path('M 10 20 C 50 70 40 80 90 90 C 210 220 260 230 200 250')"},
+        {at: 0.125, expect: "path('M 25 30 C 60 80 50 90 105 100 C 220 230 270 240 215 260')"},
+        {at: 0.875, expect: "path('M 115 90 C 120 140 110 150 195 160 C 280 290 330 300 305 320')"},
+        {at: 1, expect: "path('M 130 100 C 130 150 120 160 210 170 C 290 300 340 310 320 330')"},
+        {at: 2, expect: "path('M 250 180 C 210 230 200 240 330 250 C 370 380 420 390 440 410')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 q 30 60 40 50 q 110 80 90 80')",
+        to: "path('M 130 100 Q 120 160 130 150 Q 200 150 180 190')"
+      }, [
+        {at: -1, expect: "path('M -110 -60 Q -40 0 -30 -10 Q 120 150 100 110')"},
+        {at: 0, expect: "path('M 10 20 Q 40 80 50 70 Q 160 150 140 150')"},
+        {at: 0.125, expect: "path('M 25 30 Q 50 90 60 80 Q 165 150 145 155')"},
+        {at: 0.875, expect: "path('M 115 90 Q 110 150 120 140 Q 195 150 175 185')"},
+        {at: 1, expect: "path('M 130 100 Q 120 160 130 150 Q 200 150 180 190')"},
+        {at: 2, expect: "path('M 250 180 Q 200 240 210 230 Q 240 150 220 230')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 s 30 60 40 50 s 110 60 90 70')",
+        to: "path('M 130 140 S 120 160 130 150 S 200 170 140 180')"
+      }, [
+        {at: -1, expect: "path('M -110 -100 S -40 0 -30 -10 S 120 90 140 100')"},
+        {at: 0, expect: "path('M 10 20 S 40 80 50 70 S 160 130 140 140')"},
+        {at: 0.125, expect: "path('M 25 35 S 50 90 60 80 S 165 135 140 145')"},
+        {at: 0.875, expect: "path('M 115 125 S 110 150 120 140 S 195 165 140 175')"},
+        {at: 1, expect: "path('M 130 140 S 120 160 130 150 S 200 170 140 180')"},
+        {at: 2, expect: "path('M 250 260 S 200 240 210 230 S 240 210 140 220')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 h 30 v 60 h 10 v -10 l 110 60')",
+        to: "path('M 130 140 H 120 V 160 H 130 V 150 L 200 170')"
+      }, [
+        {at: -1, expect: "path('M -110 -100 H -40 V 0 H -30 V -10 L 120 90')"},
+        {at: 0, expect: "path('M 10 20 H 40 V 80 H 50 V 70 L 160 130')"},
+        {at: 0.125, expect: "path('M 25 35 H 50 V 90 H 60 V 80 L 165 135')"},
+        {at: 0.875, expect: "path('M 115 125 H 110 V 150 H 120 V 140 L 195 165')"},
+        {at: 1, expect: "path('M 130 140 H 120 V 160 H 130 V 150 L 200 170')"},
+        {at: 2, expect: "path('M 250 260 H 200 V 240 H 210 V 230 L 240 210')"}
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: "path('m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50')",
+        to: "path('M 18 12 A 50 100 70 0 1 90 110 A 150 160 70 0 1 70 80')"
+      }, [
+        {at: -1, expect: "path('M 2 28 A -30 -60 -10 1 0 10 30 A 70 80 -10 1 1 310 160')"},
+        {at: 0, expect: "path('M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120')"},
+        {at: 0.125, expect: "path('M 11 19 A 15 30 35 1 0 55 75 A 115 125 35 1 1 175 115')"},
+        {at: 0.875, expect: "path('M 17 13 A 45 90 65 0 1 85 105 A 145 155 65 0 1 85 85')"},
+        {at: 1, expect: "path('M 18 12 A 50 100 70 0 1 90 110 A 150 160 70 0 1 70 80')"},
+        {at: 2, expect: "path('M 26 4 A 90 180 110 0 1 130 150 A 190 200 110 0 1 -50 40')"}
+      ]);
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html
new file mode 100644
index 0000000000..9924106f4b
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-path-interpolation-005.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-distance interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <meta name="assert" content="offset-distance supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <style>
+    .parent {
+      offset-path: ray(30deg closest-side);
+    }
+    .target {
+      offset-path: ray(10deg closest-side);
+    }
+  </style>
+  <body>
+    <script>
+      'use strict';
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z')",
+        to: "ray(0deg closest-side)",
+      });
+
+      test_no_interpolation({
+        property: 'offset-path',
+        from: "ray(0deg closest-corner)",
+        to: "none",
+      });
+
+      // Neutral keyframes use the inline style.
+      test_interpolation({
+        property: 'offset-path',
+        from: neutralKeyframe,
+        to: 'ray(20deg closest-side)',
+      }, [
+        {at: -0.3, expect: 'ray(7deg closest-side)'},
+        {at: 0, expect: 'ray(10deg closest-side)'},
+        {at: 0.3, expect: 'ray(13deg closest-side)'},
+        {at: 0.6, expect: 'ray(16deg closest-side)'},
+        {at: 1, expect: 'ray(20deg closest-side)'},
+        {at: 1.5, expect: 'ray(25deg closest-side)'},
+      ]);
+
+      // No interpolation to a ray from the initial value 'none'.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'initial',
+        to: 'ray(20deg closest-side)',
+      });
+
+      // 'inherit' keyframes use the parent style.
+      test_interpolation({
+        property: 'offset-path',
+        from: 'inherit',
+        to: 'ray(20deg closest-side)',
+      }, [
+        {at: -0.3, expect: 'ray(33deg closest-side)'},
+        {at: 0, expect: 'ray(30deg closest-side)'},
+        {at: 0.3, expect: 'ray(27deg closest-side)'},
+        {at: 0.6, expect: 'ray(24deg closest-side)'},
+        {at: 1, expect: 'ray(20deg closest-side)'},
+        {at: 1.5, expect: 'ray(15deg closest-side)'},
+      ]);
+
+      // No interpolation to a ray from the initial value 'none'.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'unset',
+        to: 'ray(20deg closest-side)',
+      });
+
+      // No interpolation to a ray from the initial value 'none'.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'none',
+        to: 'ray(20deg closest-side)',
+      });
+
+      // Interpolation between rays.
+      test_interpolation({
+        property: 'offset-path',
+        from: 'ray(10deg sides contain)',
+        to: 'ray(50deg sides contain)'
+      }, [
+        {at: -1, expect: 'ray(-30deg sides contain)'},
+        {at: 0, expect: 'ray(10deg sides contain)'},
+        {at: 0.125, expect: 'ray(15deg sides contain)'},
+        {at: 0.875, expect: 'ray(45deg sides contain)'},
+        {at: 1, expect: 'ray(50deg sides contain)'},
+        {at: 2, expect: 'ray(90deg sides contain)'},
+      ]);
+
+      test_interpolation({
+        property: 'offset-path',
+        from: 'ray(-10deg farthest-corner)',
+        to: 'ray(-50deg farthest-corner)'
+      }, [
+        {at: -1, expect: 'ray(30deg farthest-corner)'},
+        {at: 0, expect: 'ray(-10deg farthest-corner)'},
+        {at: 0.125, expect: 'ray(-15deg farthest-corner)'},
+        {at: 0.875, expect: 'ray(-45deg farthest-corner)'},
+        {at: 1, expect: 'ray(-50deg farthest-corner)'},
+        {at: 2, expect: 'ray(-90deg farthest-corner)'},
+      ]);
+
+      // No interpolation between different sizes and/or different containment.
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'ray(200deg farthest-side)',
+        to: 'ray(300deg sides)'
+      });
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'ray(200deg sides contain)',
+        to: 'ray(300deg sides)'
+      });
+      test_no_interpolation({
+        property: 'offset-path',
+        from: 'ray(200deg farthest-side contain)',
+        to: 'ray(300deg sides)'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-position-composition.html b/testing/web-platform/tests/css/motion/animation/offset-position-composition.html
new file mode 100644
index 0000000000..0ee517a73a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-position-composition.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>offset-position composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
+<meta name="assert" content="offset-position supports <position> animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.target {
+  width: 200px;
+  height: 200px;
+}
+</style>
+<body>
+<script>
+test_composition({
+  property: 'offset-position',
+  underlying: '40px 60px',
+  addFrom: '60px 40px',
+  addTo: '160px 140px',
+}, [
+  {at: -0.25, expect: '75px 75px'},
+  {at: 0, expect: '100px 100px'},
+  {at: 0.25, expect: '125px 125px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 175px'},
+  {at: 1, expect: '200px 200px'},
+  {at: 1.25, expect: '225px 225px'},
+]);
+
+test_composition({
+  property: 'offset-position',
+  underlying: 'top 20% left 40%',
+  addFrom: 'left 60% top 80%',
+  addTo: 'right 80% bottom 40%',
+}, [
+  {at: -0.25, expect: '110% 105%'},
+  {at: 0, expect: '100% 100%'},
+  {at: 0.25, expect: '90% 95%'},
+  {at: 0.5, expect: '80% 90%'},
+  {at: 0.75, expect: '70% 85%'},
+  {at: 1, expect: '60% 80%'},
+  {at: 1.25, expect: '50% 75%'},
+]);
+
+test_composition({
+  property: 'offset-position',
+  underlying: '40px 60px',
+  replaceFrom: '100px 200px',
+  addTo: '160px 40px',
+}, [
+  {at: -0.25, expect: '75px 225px'},
+  {at: 0, expect: '100px 200px'},
+  {at: 0.25, expect: '125px 175px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 125px'},
+  {at: 1, expect: '200px 100px'},
+  {at: 1.25, expect: '225px 75px'},
+]);
+
+test_composition({
+  property: 'offset-position',
+  underlying: '40px 60px',
+  addFrom: '60px 140px',
+  replaceTo: '200px 100px',
+}, [
+  {at: -0.25, expect: '75px 225px'},
+  {at: 0, expect: '100px 200px'},
+  {at: 0.25, expect: '125px 175px'},
+  {at: 0.5, expect: '150px 150px'},
+  {at: 0.75, expect: '175px 125px'},
+  {at: 1, expect: '200px 100px'},
+  {at: 1.25, expect: '225px 75px'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-position-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-position-interpolation.html
new file mode 100644
index 0000000000..9faaf9487a
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-position-interpolation.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-position interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
+    <meta name="assert" content="offset-position supports <position> animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        offset-position: 30px 10px;
+      }
+      .target {
+        offset-position: 10px 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-position',
+        from: '220px 240px',
+        to: '300px 400px',
+      }, [
+        {at: -1, expect: '140px 80px'},
+        {at: 0, expect: '220px 240px'},
+        {at: 0.125, expect: '230px 260px'},
+        {at: 0.875, expect: '290px 380px'},
+        {at: 1, expect: '300px 400px'},
+        {at: 2, expect: '380px 560px'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-position',
+        from: 'left 480px top 400px',
+        to: 'right -140% bottom -60%',
+      }, [
+        {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%)'},
+        {at: 0, expect: 'left 480px top 400px'},
+        {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%)'},
+        {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px)'},
+        {at: 1, expect: 'right -140% bottom -60%'},
+        {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px)'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-position',
+        from: 'left top',
+        to: 'left 8px bottom 20%',
+      }, [
+        {at: -1, expect: '-8px -80%'},
+        {at: 0, expect: 'left top'},
+        {at: 0.125, expect: '1px 10%'},
+        {at: 0.875, expect: '7px 70%'},
+        {at: 1, expect: 'left 8px bottom 20%'},
+        {at: 2, expect: '16px 160%'}
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-position',
+        from: 'right 10px top 20%',
+        to: 'auto'
+      });
+
+      test_interpolation({
+        property: 'offset-position',
+        from: neutralKeyframe,
+        to: '20px 20px',
+      }, [
+        {at: -0.3, expect: '7px 33px'},
+        {at: 0, expect: '10px 30px'},
+        {at: 0.3, expect: '13px 27px'},
+        {at: 0.6, expect: '16px 24px'},
+        {at: 1, expect: '20px 20px'},
+        {at: 1.5, expect: '25px 15px'},
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-position',
+        from: 'initial',
+        to: '20px 20px',
+      });
+
+      test_interpolation({
+        property: 'offset-position',
+        from: 'inherit',
+        to: '20px 20px',
+      }, [
+        {at: -0.3, expect: '33px 7px'},
+        {at: 0, expect: '30px 10px'},
+        {at: 0.3, expect: '27px 13px'},
+        {at: 0.6, expect: '24px 16px'},
+        {at: 1, expect: '20px 20px'},
+        {at: 1.5, expect: '15px 25px'},
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-position',
+        from: 'unset',
+        to: '20px 20px',
+      });
+
+      test_interpolation({
+        property: 'offset-position',
+        from: '0% 50%',
+        to: '100% 150%'
+      }, [
+        {at: -0.3, expect: '-30% 20%'},
+        {at: 0, expect: '0% 50%'},
+        {at: 0.3, expect: '30% 80%'},
+        {at: 0.6, expect: '60% 110%'},
+        {at: 1, expect: '100% 150%'},
+        {at: 1.5, expect: '150% 200%'}
+      ]);
+
+      test_no_interpolation({
+        property: 'offset-position',
+        from: 'auto',
+        to: '20px 20px',
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-rotate-composition.html b/testing/web-platform/tests/css/motion/animation/offset-rotate-composition.html
new file mode 100644
index 0000000000..bf60c19abe
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-rotate-composition.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>offset-rotate composition</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+<meta name="assert" content="offset-rotate supports animation.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+// Angle rotations compose.
+test_composition({
+  property: 'offset-rotate',
+  underlying: '20deg',
+  addFrom: '10deg',
+  addTo: '20deg',
+}, [
+  {at: -0.3, expect: '27deg'},
+  {at: 0, expect: '30deg'},
+  {at: 0.3, expect: '33deg'},
+  {at: 0.6, expect: '36deg'},
+  {at: 1, expect: '40deg'},
+  {at: 1.5, expect: '45deg'},
+]);
+
+// Angle rotations don't compose with underlying 'auto'.
+test_composition({
+  property: 'offset-rotate',
+  underlying: 'auto 20deg',
+  addFrom: '10deg',
+  addTo: '20deg',
+}, [
+  {at: -0.3, expect: '7deg'},
+  {at: 0, expect: '10deg'},
+  {at: 0.3, expect: '13deg'},
+  {at: 0.6, expect: '16deg'},
+  {at: 1, expect: '20deg'},
+  {at: 1.5, expect: '25deg'},
+]);
+
+// Auto rotations compose with underlying 'auto'.
+test_composition({
+  property: 'offset-rotate',
+  underlying: 'auto 20deg',
+  addFrom: 'reverse 10deg',
+  addTo: 'auto 20deg',
+}, [
+  {at: -0.3, expect: 'auto 261deg'},
+  {at: 0, expect: 'auto 210deg'},
+  {at: 0.3, expect: 'auto 159deg'},
+  {at: 0.6, expect: 'auto 108deg'},
+  {at: 1, expect: 'auto 40deg'},
+  {at: 1.5, expect: 'auto -45deg'},
+]);
+
+// When we can't interpolate, we can't compose.
+test_composition({
+  property: 'offset-rotate',
+  underlying: '20deg',
+  addFrom: 'reverse 10deg',
+  addTo: '20deg',
+}, [
+  {at: -0.3, expect: 'auto 190deg'},
+  {at: 0, expect: 'auto 190deg'},
+  {at: 0.3, expect: 'auto 190deg'},
+  {at: 0.6, expect: '40deg'},
+  {at: 1, expect: '40deg'},
+  {at: 1.5, expect: '40deg'},
+]);
+
+test_composition({
+  property: 'offset-rotate',
+  underlying: '20deg',
+  replaceFrom: 'reverse 10deg',
+  addTo: '20deg',
+}, [
+  {at: -0.3, expect: 'auto 190deg'},
+  {at: 0, expect: 'auto 190deg'},
+  {at: 0.3, expect: 'auto 190deg'},
+  {at: 0.6, expect: '40deg'},
+  {at: 1, expect: '40deg'},
+  {at: 1.5, expect: '40deg'},
+]);
+
+// Angle rotations compose with underlying angle.
+test_composition({
+  property: 'offset-rotate',
+  underlying: '20deg',
+  addFrom: '10deg',
+  replaceTo: '10deg',
+}, [
+  {at: -0.3, expect: '36deg'},
+  {at: 0, expect: '30deg'},
+  {at: 0.3, expect: '24deg'},
+  {at: 0.6, expect: '18deg'},
+  {at: 1, expect: '10deg'},
+  {at: 1.5, expect: '0deg'},
+]);
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html
new file mode 100644
index 0000000000..55845108eb
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/offset-rotate-interpolation.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>offset-rotate interpolation</title>
+    <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <meta name="assert" content="offset-rotate supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <style>
+    .parent {
+      offset-rotate: 30deg;
+    }
+    .target {
+      width: 80px;
+      height: 80px;
+      display: inline-block;
+      background-color: black;
+      margin-right: 5px;
+      offset-rotate: 10deg;
+    }
+    .expected {
+      background-color: green;
+      margin-right: 15px;
+    }
+  </style>
+  <body>
+    <script>
+      test_interpolation({
+        property: 'offset-rotate',
+        from: '100deg',
+        to: '180deg',
+      }, [
+        {at: -1, expect: '20deg'},
+        {at: 0, expect: '100deg'},
+        {at: 0.125, expect: '110deg'},
+        {at: 0.875, expect: '170deg'},
+        {at: 1, expect: '180deg'},
+        {at: 2, expect: '260deg'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 45deg',
+        to: 'auto 125deg',
+      }, [
+        {at: -1, expect: 'auto -35deg'},
+        {at: 0, expect: 'auto 45deg'},
+        {at: 0.125, expect: 'auto 55deg'},
+        {at: 0.875, expect: 'auto 115deg'},
+        {at: 1, expect: 'auto 125deg'},
+        {at: 2, expect: 'auto 205deg'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 170deg',
+        to: '100grad auto',
+      }, [
+        {at: -1, expect: 'auto 250deg'},
+        {at: 0, expect: 'auto 170deg'},
+        {at: 0.125, expect: 'auto 160deg'},
+        {at: 0.875, expect: 'auto 100deg'},
+        {at: 1, expect: '100grad auto'},
+        {at: 2, expect: 'auto 10deg'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto -280deg',
+        to: 'auto calc(90deg - 0.5turn - 300grad + 0rad)',
+      }, [
+        {at: -1, expect: 'auto -200deg'},
+        {at: 0, expect: 'auto -280deg'},
+        {at: 0.125, expect: 'auto -290deg'},
+        {at: 0.875, expect: 'auto -350deg'},
+        {at: 1, expect: 'auto calc(90deg - 0.5turn - 300grad + 0rad)'},
+        {at: 2, expect: 'auto -440deg'}
+      ]);
+
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 100deg',
+        to: 'reverse',
+      }, [
+        {at: -1, expect: 'auto 20deg'},
+        {at: 0, expect: 'auto 100deg'},
+        {at: 0.125, expect: 'auto 110deg'},
+        {at: 0.875, expect: 'auto 170deg'},
+        {at: 1, expect: 'reverse'},
+        {at: 2, expect: 'auto 260deg'}
+      ]);
+
+      // No interpolation between auto/reverse and angle.
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: 'reverse 90deg',
+        to: '360deg',
+      });
+
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: '6rad',
+        to: 'auto',
+      });
+
+      // Neutral keyframes use the inline style.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: neutralKeyframe,
+        to: '20deg',
+      }, [
+        {at: -0.3, expect: '7deg'},
+        {at: 0, expect: '10deg'},
+        {at: 0.3, expect: '13deg'},
+        {at: 0.6, expect: '16deg'},
+        {at: 1, expect: '20deg'},
+        {at: 1.5, expect: '25deg'},
+      ]);
+
+      // No interpolation to an angle from the initial value 'auto'.
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: 'initial',
+        to: '20deg',
+      });
+
+      // 'inherit' keyframes use the parent style.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'inherit',
+        to: '20deg',
+      }, [
+        {at: -0.3, expect: '33deg'},
+        {at: 0, expect: '30deg'},
+        {at: 0.3, expect: '27deg'},
+        {at: 0.6, expect: '24deg'},
+        {at: 1, expect: '20deg'},
+        {at: 1.5, expect: '15deg'},
+      ]);
+
+      // No interpolation to an angle from the initial value 'auto'.
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: 'unset',
+        to: '20deg',
+      });
+
+      // Interpolation between angles.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: '10deg',
+        to: '50deg'
+      }, [
+        {at: -0.3, expect: '-2deg'},
+        {at: 0, expect: '10deg'},
+        {at: 0.3, expect: '22deg'},
+        {at: 0.6, expect: '34deg'},
+        {at: 1, expect: '50deg'},
+        {at: 1.5, expect: '70deg'},
+      ]);
+
+      // Regression test for crbug.com/918430.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: '800deg',
+        to: '900deg'
+      }, [
+        {at: -3.40282e+38, expect: '-3.40282e+38deg'},
+      ]);
+
+      // Interpolation between auto angles.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 10deg',
+        to: 'auto 50deg'
+      }, [
+        {at: -0.3, expect: 'auto -2deg'},
+        {at: 0, expect: 'auto 10deg'},
+        {at: 0.3, expect: 'auto 22deg'},
+        {at: 0.6, expect: 'auto 34deg'},
+        {at: 1, expect: 'auto 50deg'},
+        {at: 1.5, expect: 'auto 70deg'},
+      ]);
+
+      // 'reverse' is like 'auto 180deg'.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'reverse -170deg',
+        to: 'reverse -130deg'
+      }, [
+        {at: -0.3, expect: 'auto -2deg'},
+        {at: 0, expect: 'auto 10deg'},
+        {at: 0.3, expect: 'auto 22deg'},
+        {at: 0.6, expect: 'auto 34deg'},
+        {at: 1, expect: 'auto 50deg'},
+        {at: 1.5, expect: 'auto 70deg'},
+      ]);
+
+      // Interpolation between 'auto' and 'reverse'.
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 10deg',
+        to: 'reverse -130deg'
+      }, [
+        {at: -0.3, expect: 'auto -2deg'},
+        {at: 0, expect: 'auto 10deg'},
+        {at: 0.3, expect: 'auto 22deg'},
+        {at: 0.6, expect: 'auto 34deg'},
+        {at: 1, expect: 'auto 50deg'},
+        {at: 1.5, expect: 'auto 70deg'},
+      ]);
+      test_interpolation({
+        property: 'offset-rotate',
+        from: 'reverse -170deg',
+        to: 'auto 50deg'
+      }, [
+        {at: -0.3, expect: 'auto -2deg'},
+        {at: 0, expect: 'auto 10deg'},
+        {at: 0.3, expect: 'auto 22deg'},
+        {at: 0.6, expect: 'auto 34deg'},
+        {at: 1, expect: 'auto 50deg'},
+        {at: 1.5, expect: 'auto 70deg'},
+      ]);
+
+      // No interpolation between auto/reverse and angle.
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: 'auto 200deg',
+        to: '300deg'
+      });
+      test_no_interpolation({
+        property: 'offset-rotate',
+        from: '300deg',
+        to: 'reverse 20deg'
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-distance-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-distance-interpolation-001.html
new file mode 100644
index 0000000000..88441f5b54
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-distance-interpolation-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>offset-distance interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
+    <link rel="match" href="offset-path-path-interpolation-ref.html">
+    <meta name="assert" content="offset-distance supports animation.">
+    <style>
+      @keyframes anim {
+        from { offset-distance: 0%; }
+        to   { offset-distance: 100%; }
+      }
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path("m 50 150 h 100");
+        animation: anim 10s -5s paused linear;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+  <script>
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-001.html
new file mode 100644
index 0000000000..0f27651896
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>offset-path path() interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
+    <link rel="match" href="offset-path-path-interpolation-ref.html">
+    <meta name="assert" content="offset-path path supports animation.">
+    <style>
+      @keyframes anim {
+        from { offset-path: path("m 100 100 l 100 100"); }
+        to   { offset-path: path("m 100 200 l 100 -100"); }
+      }
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        animation: anim 10s -5s paused linear;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+  <script>
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-ref.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-ref.html
new file mode 100644
index 0000000000..9bc2409061
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-path-interpolation-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>offset-path path interpolation reference</title>
+    <style>
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path("M 100 150 L 200 150");
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-001.html
new file mode 100644
index 0000000000..c554264032
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>CSS Motion Path: Combined transformation matrix interpolation</title>
+    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
+    <link rel="match" href="offset-path-with-transforms-ref.html">
+    <meta name="assert" content="This tests animating combined transformation matrix.">
+    <style>
+      @keyframes anim {
+        to {
+          translate: 0px 100px;
+          offset-distance: 100%;
+          transform: translateX(-100px);
+        }
+      }
+      #target {
+        position: absolute;
+        width: 100px;
+        height: 50px;
+        background-color: lime;
+        offset-path: path("M25 0v100");
+        animation: anim 10s -5s paused linear;
+      }
+    </style>
+  </head>
+  <body onload="load()">
+    <div id="target"></div>
+    <div style='width: 50px; height: 100px; background-color: red;'></div>
+  </body>
+  <script>
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  </script>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-ref.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-ref.html
new file mode 100644
index 0000000000..413369e0ef
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-path-with-transforms-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Motion Path: Combined transformation matrix interpolation reference</title>
+    <style>
+      #target {
+        width: 50px;
+        height: 100px;
+        background-color: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/motion/animation/reftests/offset-rotate-interpolation-001.html b/testing/web-platform/tests/css/motion/animation/reftests/offset-rotate-interpolation-001.html
new file mode 100644
index 0000000000..360caeea68
--- /dev/null
+++ b/testing/web-platform/tests/css/motion/animation/reftests/offset-rotate-interpolation-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <title>offset-rotate interpolation</title>
+    <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
+    <link rel="match" href="offset-path-path-interpolation-ref.html">
+    <meta name="assert" content="offset-rotate supports animation.">
+    <style>
+      @keyframes anim {
+        from { offset-rotate: auto; }
+        to   { offset-rotate: reverse; }
+      }
+      #target {
+        position: absolute;
+        left: 300px;
+        top: 0px;
+        width: 300px;
+        height: 200px;
+        background-color: lime;
+        transform-origin: 0px 0px;
+        offset-path: path("m 100 150 v -100");
+        animation: anim 10s -5s paused linear;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+  </body>
+  <script>
+    requestAnimationFrame(() => {
+      document.documentElement.classList.remove('reftest-wait');
+    });
+  </script>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/motion/animation
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip