From befe66343e5f21dc464c8c772c6d20695936714f Mon Sep 17 00:00:00 2001
From: Boris Chiou <boris.chiou@gmail.com>
Date: Wed, 12 Jul 2023 22:23:27 +0000
Subject: [PATCH] Add tests for basic-shape-rect and drop duplicate tests from
 test_transitions_per_property.html.

Now xywh() and inset() should be interpolatable, so add some tests for it.

Also, we have a lot of interpolation tests for motion in WPT, so it's
unnecessary to have the similar tests in test_transitions_per_property.html.

Differential Revision: https://phabricator.services.mozilla.com/D183299

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1842277
gecko-commit: 86b90f83c914f4e00bd275368da2f80d72343f43
gecko-reviewers: emilio
---
 css/css-masking/clip-path/interpolation.html  | 18 ++++++++++++++++++
 .../offset-path-interpolation-006.html        | 19 +++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/css/css-masking/clip-path/interpolation.html b/css/css-masking/clip-path/interpolation.html
index f580de9c76951a..e52d9e895916b3 100644
--- a/css/css-masking/clip-path/interpolation.html
+++ b/css/css-masking/clip-path/interpolation.html
@@ -56,5 +56,23 @@
                 'The radius of inset is clamped to zero at 61%');
 }, 'Test inset with negative easing on clip-path');
 
+// 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(function(t) {
+  var div = createDiv(t);
+  div.style.clipPath = 'inset(10px round 20px)';
+  div.style.transition = 'all 100s linear -50s';
+  getComputedStyle(div).clipPath;
+
+  // The equivalent function is
+  // "inset(10px calc(100% - 220px) calc(100% - 110px) 20px)".
+  div.style.clipPath = 'xywh(20px 10px 200px 100px)';
+  assert_equals(getComputedStyle(div).clipPath,
+                'inset(10px calc(50% - 105px) calc(50% - 50px) 15px round 10px)',
+                'The equivalent inset at 50%');
+}, 'Test inset and xywh on clip-path');
+
 </script>
 </html>
diff --git a/css/motion/animation/offset-path-interpolation-006.html b/css/motion/animation/offset-path-interpolation-006.html
index 27bdd3d0c0e70e..7ea118cb64b63a 100644
--- a/css/motion/animation/offset-path-interpolation-006.html
+++ b/css/motion/animation/offset-path-interpolation-006.html
@@ -110,6 +110,25 @@
         {at: 2, expect: 'xywh(15px 15px 50% 50%)'},
       ]);
 
+      // 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)'},
+      ]);
+
       // No interpolation between different radius keywords.
       test_no_interpolation({
         property: 'offset-path',