Bug 1670155 - Implement Animate trait and ComputeSquaredDistance trait for <ratio>. r=emilio

I also update the wpt becasue it seems the original one lets <ratio>
support the addition. However, the spec says "Addition of <ratio>s is not
possible".

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

layout/style/test/test_transitions_per_property.html

@@ -426,6 +426,40 @@ if (IsCSSPropertyPrefEnabled("layout.css.individual-transform.enabled")) {
   supported_properties["translate"] = [ test_translate_transition ];
 }
 
+if (IsCSSPropertyPrefEnabled("layout.css.aspect-ratio.enabled")) {
+  function test_aspect_ratio_transition(prop) {
+    [
+      // No transition between auto and <ratio>.
+      { start: "auto", end: "1 / 1",
+        expected: "1 / 1" },
+      // No transition between auto && <ratio> and <ratio>.
+      { start: "auto 1 / 1", end: "1 / 1",
+        expected: "1 / 1" },
+      // No transition between auto && <ratio> and auto.
+      { start: "auto 1 / 1", end: "auto",
+        expected: "auto" },
+      { start: "1 / 2", end: "8 / 1",
+        expected: "1 / 1" },
+      { start: "auto 1 / 2", end: "auto 8 / 1",
+        expected: "auto 1 / 1" },
+    ].forEach(test => {
+      div.style.transitionProperty = 'none';
+      div.style[prop] = test.start;
+      is(cs[prop], test.start,
+         `aspect-ratio: computed value before transition`);
+      div.style.transitionProperty = prop;
+      div.style[prop] = test.end;
+      is(cs[prop], test.expected,
+         `aspect-ratio: interpolation of aspect-ratio`);
+      // We check distance only if there is a transition.
+      if (test.end != test.expected) {
+        check_distance(prop, test.start, test.expected, test.end);
+      }
+    });
+  }
+  supported_properties["aspect-ratio"] = [ test_aspect_ratio_transition ];
+}
+
 supported_properties["scrollbar-color"] = [
   test_scrollbar_color_transition,
 ];

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

@@ -457,7 +457,7 @@ ${helpers.predefined_type(
     "AspectRatio",
     "computed::AspectRatio::auto()",
     engines="gecko servo-2013",
-    animation_value_type="discrete",
+    animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-sizing-4/#aspect-ratio",
     gecko_pref="layout.css.aspect-ratio.enabled",
     servo_restyle_damage="reflow",

servo/components/style/values/computed/ratio.rs

@@ -4,7 +4,9 @@
 
 //! `<ratio>` computed values.
 
+use crate::values::animated::{Animate, Procedure};
 use crate::values::computed::NonNegativeNumber;
+use crate::values::distance::{ComputeSquaredDistance, SquaredDistance};
 use crate::values::generics::ratio::Ratio as GenericRatio;
 use crate::{One, Zero};
 use std::cmp::{Ordering, PartialOrd};
@@ -21,8 +23,58 @@ impl PartialOrd for Ratio {
     }
 }
 
+/// https://drafts.csswg.org/css-values/#combine-ratio
+impl Animate for Ratio {
+    fn animate(&self, other: &Self, procedure: Procedure) -> Result<Self, ()> {
+        // If either <ratio> is degenerate, the values cannot be interpolated.
+        if self.is_degenerate() || other.is_degenerate() {
+            return Err(());
+        }
+
+        // Addition of <ratio>s is not possible, and based on
+        // https://drafts.csswg.org/css-values-4/#not-additive,
+        // we simply use the first value as the result value.
+        // Besides, the procedure for accumulation should be identical to addition here.
+        if matches!(procedure, Procedure::Add | Procedure::Accumulate { .. }) {
+            return Ok(self.clone());
+        }
+
+        // The interpolation of a <ratio> is defined by converting each <ratio> to a number by
+        // dividing the first value by the second (so a ratio of 3 / 2 would become 1.5), taking
+        // the logarithm of that result (so the 1.5 would become approximately 0.176), then
+        // interpolating those values.
+        //
+        // The result during the interpolation is converted back to a <ratio> by inverting the
+        // logarithm, then interpreting the result as a <ratio> with the result as the first value
+        // and 1 as the second value.
+        let start = self.to_f32().ln();
+        let end = other.to_f32().ln();
+        let e = std::f32::consts::E;
+        let result = e.powf(start.animate(&end, procedure)?);
+        // The range of the result is [0, inf), based on the easing function.
+        if result.is_zero() || result.is_infinite() {
+            return Err(());
+        }
+        Ok(Ratio::new(result, 1.0f32))
+    }
+}
+
+impl ComputeSquaredDistance for Ratio {
+    fn compute_squared_distance(&self, other: &Self) -> Result<SquaredDistance, ()> {
+        if self.is_degenerate() || other.is_degenerate() {
+            return Err(());
+        }
+        // Use the distance of their logarithm values. (This is used by testing, so don't need to
+        // care about the base. Here we use the same base as that in animate().)
+        self.to_f32()
+            .ln()
+            .compute_squared_distance(&other.to_f32().ln())
+    }
+}
+
 impl Ratio {
     /// Returns a new Ratio.
+    #[inline]
     pub fn new(a: f32, b: f32) -> Self {
         GenericRatio(a.into(), b.into())
     }
@@ -36,4 +88,18 @@ impl Ratio {
             self
         }
     }
+
+    /// Returns true if this is a degenerate ratio.
+    /// https://drafts.csswg.org/css-values/#degenerate-ratio
+    #[inline]
+    pub fn is_degenerate(&self) -> bool {
+        self.0.is_zero() || self.1.is_zero()
+    }
+
+    /// Returns the f32 value by dividing the first value by the second one.
+    #[inline]
+    fn to_f32(&self) -> f32 {
+        debug_assert!(!self.is_degenerate());
+        (self.0).0 / (self.1).0
+    }
 }

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

@@ -5,6 +5,7 @@
 //! Generic types for CSS handling of specified and computed values of
 //! [`position`](https://drafts.csswg.org/css-backgrounds-3/#position)
 
+use crate::values::animated::ToAnimatedZero;
 use crate::values::generics::ratio::Ratio;
 
 /// A generic type for representing a CSS [position](https://drafts.csswg.org/css-values/#position).
@@ -163,7 +164,6 @@ impl<Integer> ZIndex<Integer> {
     MallocSizeOf,
     PartialEq,
     SpecifiedValueInfo,
-    ToAnimatedZero,
     ToComputedValue,
     ToCss,
     ToResolvedValue,
@@ -175,7 +175,12 @@ pub enum PreferredRatio<N> {
     #[css(skip)]
     None,
     /// With specified ratio
-    Ratio(#[css(field_bound)] Ratio<N>),
+    Ratio(
+        #[animation(field_bound)]
+        #[css(field_bound)]
+        #[distance(field_bound)]
+        Ratio<N>,
+    ),
 }
 
 /// A generic value for the `aspect-ratio` property, the value is `auto || <ratio>`.
@@ -188,7 +193,6 @@ pub enum PreferredRatio<N> {
     MallocSizeOf,
     PartialEq,
     SpecifiedValueInfo,
-    ToAnimatedZero,
     ToComputedValue,
     ToCss,
     ToResolvedValue,
@@ -201,7 +205,9 @@ pub struct GenericAspectRatio<N> {
     #[css(represents_keyword)]
     pub auto: bool,
     /// The preferred aspect-ratio value.
+    #[animation(field_bound)]
     #[css(field_bound)]
+    #[distance(field_bound)]
     pub ratio: PreferredRatio<N>,
 }
 
@@ -217,3 +223,10 @@ impl<N> AspectRatio<N> {
         }
     }
 }
+
+impl<N> ToAnimatedZero for AspectRatio<N> {
+    #[inline]
+    fn to_animated_zero(&self) -> Result<Self, ()> {
+        Err(())
+    }
+}

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

@@ -10,15 +10,12 @@ use style_traits::{CssWriter, ToCss};
 
 /// A generic value for the `<ratio>` value.
 #[derive(
-    Animate,
     Clone,
-    ComputeSquaredDistance,
     Copy,
     Debug,
     MallocSizeOf,
     PartialEq,
     SpecifiedValueInfo,
-    ToAnimatedZero,
     ToComputedValue,
     ToResolvedValue,
     ToShmem,

testing/web-platform/meta/css/css-sizing/animation/__dir__.ini

@@ -1 +1,2 @@
+prefs: [layout.css.aspect-ratio.enabled:true]
 leak-threshold: [default:51200, tab:51200]

testing/web-platform/meta/css/css-sizing/animation/aspect-ratio-interpolation.html.ini

@@ -1,701 +0,0 @@
-[aspect-ratio-interpolation.html]
-  [CSS Transitions: property <aspect-ratio> from [0.5\] to [2\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [0.5\] to [2\] at (0) should be [0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [0.5\] to [2\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [0.5\] to [2\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [0.5\] to [2\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [0.5\] to [2\] at (0) should be [0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [0.5\] to [2\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [0.5\] to [2\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [0.5\] to [2\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [0.5\] to [2\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [0.5\] to [2\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [0.5\] to [2\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [0.5\] to [2\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [0.5\] to [2\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (0) should be [0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (0) should be [0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (0) should be [0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (0) should be [0.5 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [\] to [2 / 1\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [\] to [2 / 1\] at (0) should be [0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [\] to [2 / 1\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [\] to [2 / 1\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [\] to [2 / 1\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [\] to [2 / 1\] at (0) should be [0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [\] to [2 / 1\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [\] to [2 / 1\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [\] to [2 / 1\] at (-0.5) should be [0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [\] to [2 / 1\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [\] to [2 / 1\] at (1.5) should be [4 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (-0.5) should be [auto 0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (0) should be [auto 0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (0.5) should be [auto 1 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (1.5) should be [auto 4 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (-0.5) should be [auto 0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (0) should be [auto 0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (0.5) should be [auto 1 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (1.5) should be [auto 4 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (-0.5) should be [auto 0.25 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (0) should be [auto 0.5 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (0.5) should be [auto 1 / 1\]]
-    expected: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (1.5) should be [auto 4 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (-0.5) should be [auto 0.25 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (0) should be [auto 0.5 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (0.5) should be [auto 1 / 1\]]
-    expected: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (1.5) should be [auto 4 / 1\]]
-    expected: FAIL
-
-  [Compositing: property <aspect-ratio> underlying [0.5 / 1\] from replace [1 / 1\] to add [2 / 1\] at (0.5) should be [1 / 1\]]
-    expected: FAIL
-
-  [Compositing: property <aspect-ratio> underlying [0.5 / 1\] from replace [1 / 1\] to add [2 / 1\] at (1) should be [1 / 1\]]
-    expected: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [0.5\] to [2\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [0.5\] to [2\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [0.5\] to [2\] at (0) should be [0.5 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [0.5\] to [2\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [0.5\] to [2\] at (0) should be [0.5 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [0.5\] to [2\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 2\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [\] to [2 / 1\] at (0) should be [0.5 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (1) should be [auto 2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (1) should be [auto 2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (1) should be [auto 2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 2\] to [auto 2 / 1\] at (1) should be [auto 2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto\] to [2 / 1\] at (-0.3) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto\] to [2 / 1\] at (0) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.3) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.6) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto\] to [2 / 1\] at (1.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto\] to [2 / 1\] at (-0.3) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto\] to [2 / 1\] at (0) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.3) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.6) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto\] to [2 / 1\] at (1.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (-0.3) should be [auto\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (0) should be [auto\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.3) should be [auto\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.6) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (1.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (-0.3) should be [auto\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (0) should be [auto\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.3) should be [auto\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (0.6) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto\] to [2 / 1\] at (1.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (-0.3) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.3) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.6) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (1.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (-0.3) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.3) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.6) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (1.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (-0.3) should be [auto 1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0) should be [auto 1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.3) should be [auto 1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.6) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (1.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (-0.3) should be [auto 1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0) should be [auto 1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.3) should be [auto 1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (0.6) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (1) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [auto 1 / 1\] to [2 / 1\] at (1.5) should be [2 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (-0.3) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.3) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.5) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.6) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (1) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (1.5) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (-0.3) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.3) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.5) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.6) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (1) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (1.5) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (-0.3) should be [1 / 0\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0) should be [1 / 0\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.3) should be [1 / 0\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.5) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.6) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (1) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (1.5) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (-0.3) should be [1 / 0\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0) should be [1 / 0\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.3) should be [1 / 0\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.5) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (0.6) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (1) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 0\] to [1 / 1\] at (1.5) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (-0.3) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.3) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.5) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.6) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (1) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (1.5) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (-0.3) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.3) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.5) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.6) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (1) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Transitions with transition: all: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (1.5) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (-0.3) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.3) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.5) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.6) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (1) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [CSS Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (1.5) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (-0.3) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.3) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.5) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (0.6) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (1) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Web Animations: property <aspect-ratio> from [1 / 1\] to [0 / 1\] at (1.5) should be [0 / 1\]]
-    expected:
-      if release_or_beta: FAIL
-
-  [Compositing: property <aspect-ratio> underlying [0.5 / 1\] from replace [1 / 1\] to add [2 / 1\] at (0) should be [1 / 1\]]
-    expected:
-      if release_or_beta: FAIL

testing/web-platform/tests/css/css-sizing/animation/aspect-ratio-interpolation.html

@@ -101,15 +101,29 @@ test_no_interpolation({
   to: '0 / 1',
 });
 
+// Addition of <ratio>s is not possible.
+// https://drafts.csswg.org/css-values/#combine-ratio
+//
+// And if a value type does not define a specific procedure for addition or is
+// defined as not additive, its addition operation is simply Vresult = Va.
+// (The first value is Va, the second value is Vb, and the result is Vresult.)
+// https://drafts.csswg.org/css-values-4/#not-additive,
+//
+// So in this test case:
+// 1. The 1st keyframe: { aspectRatio: 0.5/1, composite: 'replace', offset: 0 }
+// 2. The 2nd keyframe: { aspectRatio:   1/1, composite: 'add',     offset: 1 }
+// and the underlying value is 2/1. Based on the spec, the composited from_value
+// is 0.5/1 (because we just replace it), and the composited to_value is 2/1
+// (because we use Va as the result value).
 test_composition({
   property: 'aspect-ratio',
-  underlying: '0.5 / 1',
-  replaceFrom: '1 / 1',
-  addTo: '2 / 1',
+  underlying: '2 / 1',
+  replaceFrom: '0.5 / 1',
+  addTo: '1 / 1',
 }, [
-  {at: 0, expect: '1 / 1'},
+  {at: 0, expect: '0.5 / 1'},
   {at: 0.5, expect: '1 / 1'},
-  {at: 1, expect: '1 / 1'}
+  {at: 1, expect: '2 / 1'}
 ]);
 
 </script>