Bug 1559231 - Make offset-anchor animatable. r=birtles

Per the spec issue, https://github.com/w3c/csswg-drafts/issues/3482,
we update the wpt to keep the percentage in `calc()` for `offset-anchor`.

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

--HG--
extra : moz-landing-system : lando

devtools/server/actors/animation-type-longhand.js

@@ -218,7 +218,6 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
       "min-block-size",
       "-moz-min-font-size-ratio",
       "min-inline-size",
-      "offset-anchor",
       "padding-block-end",
       "padding-block-start",
       "padding-inline-end",
@@ -283,6 +282,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
       "mask-position-y",
       "mask-size",
       "object-position",
+      "offset-anchor",
       "offset-path",
       "offset-rotate",
       "order",

layout/style/test/test_transitions_per_property.html

@@ -374,6 +374,11 @@ if (IsCSSPropertyPrefEnabled("layout.css.motion-path.enabled")) {
   supported_properties["offset-rotate"] =
     [ test_angle_transition,
       test_offset_rotate_transition ];
+
+  // Note: offset-anchor supports "auto | <position>", and the tests for
+  // `auto` are already in wpt, so we don't test it here again.
+  supported_properties["offset-anchor"] =
+    [ test_background_position_transition ];
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.clip-path-path.enabled")) {

servo/components/style/properties/longhands/box.mako.rs

@@ -427,7 +427,7 @@ ${helpers.predefined_type(
     "PositionOrAuto",
     "computed::PositionOrAuto::auto()",
     engines="gecko",
-    animation_value_type="none",
+    animation_value_type="ComputedValue",
     gecko_pref="layout.css.motion-path.enabled",
     spec="https://drafts.fxtf.org/motion-1/#offset-anchor-property",
     servo_restyle_damage="reflow_out_of_flow"

servo/components/style/values/generics/position.rs

@@ -45,13 +45,16 @@ impl<H, V> Position<H, V> {
 /// This is used by <offset-anchor> for now.
 /// https://drafts.fxtf.org/motion-1/#offset-anchor-property
 #[derive(
+    Animate,
     Clone,
+    ComputeSquaredDistance,
     Copy,
     Debug,
     MallocSizeOf,
     Parse,
     PartialEq,
     SpecifiedValueInfo,
+    ToAnimatedZero,
     ToComputedValue,
     ToCss,
     ToResolvedValue,

testing/web-platform/meta/css/motion/animation/offset-anchor-interpolation.html.ini

@@ -1,70 +0,0 @@
-[offset-anchor-interpolation.html]
-  [Animation between "220px 240px" and "300px 400px" at progress -1]
-    expected: FAIL
-
-  [Animation between "220px 240px" and "300px 400px" at progress 0]
-    expected: FAIL
-
-  [Animation between "220px 240px" and "300px 400px" at progress 0.125]
-    expected: FAIL
-
-  [Animation between "220px 240px" and "300px 400px" at progress 0.875]
-    expected: FAIL
-
-  [Animation between "220px 240px" and "300px 400px" at progress 1]
-    expected: FAIL
-
-  [Animation between "220px 240px" and "300px 400px" at progress 2]
-    expected: FAIL
-
-  [Animation between "left 480px top 400px" and "right -140% bottom -60%" at progress -1]
-    expected: FAIL
-
-  [Animation between "left 480px top 400px" and "right -140% bottom -60%" at progress 0]
-    expected: FAIL
-
-  [Animation between "left 480px top 400px" and "right -140% bottom -60%" at progress 0.125]
-    expected: FAIL
-
-  [Animation between "left 480px top 400px" and "right -140% bottom -60%" at progress 0.875]
-    expected: FAIL
-
-  [Animation between "left 480px top 400px" and "right -140% bottom -60%" at progress 1]
-    expected: FAIL
-
-  [Animation between "left 480px top 400px" and "right -140% bottom -60%" at progress 2]
-    expected: FAIL
-
-  [Animation between "left top" and "left 8px bottom 20%" at progress -1]
-    expected: FAIL
-
-  [Animation between "left top" and "left 8px bottom 20%" at progress 0]
-    expected: FAIL
-
-  [Animation between "left top" and "left 8px bottom 20%" at progress 0.125]
-    expected: FAIL
-
-  [Animation between "left top" and "left 8px bottom 20%" at progress 0.875]
-    expected: FAIL
-
-  [Animation between "left top" and "left 8px bottom 20%" at progress 1]
-    expected: FAIL
-
-  [Animation between "left top" and "left 8px bottom 20%" at progress 2]
-    expected: FAIL
-
-  [Animation between "right 10px top 20%" and "auto" at progress -1]
-    expected: FAIL
-
-  [Animation between "right 10px top 20%" and "auto" at progress 0]
-    expected: FAIL
-
-  [Animation between "right 10px top 20%" and "auto" at progress 0.125]
-    expected: FAIL
-
-  [Animation between "right 10px top 20%" and "auto" at progress 0.875]
-    expected: FAIL
-
-  [Animation between "right 10px top 20%" and "auto" at progress 0.4]
-    expected: FAIL
-

testing/web-platform/tests/css/motion/animation/offset-anchor-interpolation.html

@@ -42,7 +42,7 @@
         to: 'right -140% bottom -60%',
       }, [
         {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%)'},
-        {at: 0, expect: 'left 480px top 400px'},
+        {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%'},
@@ -54,12 +54,12 @@
         from: 'left top',
         to: 'left 8px bottom 20%',
       }, [
-        {at: -1, expect: '-8px -80%'},
+        {at: -1, expect: 'calc(0% - 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%'}
+        {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({