Add tests for basic-shape-rect and drop duplicate tests from test_tra…

…nsitions_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

@@ -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>

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',