Bug 1808811 - Animate the 'normal' value of font-style as 'oblique 0d…

…eg'. r=firefox-style-system-reviewers,emilio This matches what the spec[1] says for font-style: > Animation type: by computed value type; normal animates as oblique 0deg A bunch of WPT tests for font-style animation are landing in web-platform-tests/wpt#37570. Current Gecko passes 66/129 of the testcases there; with this patch applied it passes all the tests. [1] https://drafts.csswg.org/css-fonts-4/#font-style-prop Differential Revision: https://phabricator.services.mozilla.com/D166128
mozilla · Jan 6, 2023 · 1be379c · 1be379c
1 parent 3ed20ec
commit 1be379c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/dom/smil/test/db_smilCSSFromTo.js b/dom/smil/test/db_smilCSSFromTo.js
@@ -418,7 +418,7 @@ var gFromToBundles = [
     new AnimTestcaseFromTo("italic", "inherit", { toComp: "normal" }),
     new AnimTestcaseFromTo("normal", "italic"),
     new AnimTestcaseFromTo("italic", "oblique"),
-    new AnimTestcaseFromTo("oblique", "normal"),
+    new AnimTestcaseFromTo("oblique", "normal", { midComp: "oblique 7deg" }),
   ]),
   new TestcaseBundle(gPropList.font_variant, [
     new AnimTestcaseFromTo("inherit", "small-caps", { fromComp: "normal" }),

diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html
@@ -440,6 +440,7 @@
   "border-image-outset",
   "border-image-slice",
   "border-image-width",
+  "font-style",  // Tests being added in https://github.com/web-platform-tests/wpt/pull/37570
   "grid-template-columns",
   "grid-template-rows",
 ]

diff --git a/servo/components/style/values/computed/font.rs b/servo/components/style/values/computed/font.rs
@@ -960,7 +960,10 @@ impl ToAnimatedValue for FontStyle {
     #[inline]
     fn to_animated_value(self) -> Self::AnimatedValue {
         if self == Self::NORMAL {
-            return generics::FontStyle::Normal;
+            // This allows us to animate between normal and oblique values. Per spec,
+            // https://drafts.csswg.org/css-fonts-4/#font-style-prop:
+            //   Animation type: by computed value type; 'normal' animates as 'oblique 0deg'
+            return generics::FontStyle::Oblique(Angle::from_degrees(0.0))
         }
         if self == Self::ITALIC {
             return generics::FontStyle::Italic;
@@ -973,7 +976,13 @@ impl ToAnimatedValue for FontStyle {
         match animated {
             generics::FontStyle::Normal => Self::NORMAL,
             generics::FontStyle::Italic => Self::ITALIC,
-            generics::FontStyle::Oblique(ref angle) => Self::oblique(angle.degrees()),
+            generics::FontStyle::Oblique(ref angle) =>
+                if angle.degrees() == 0.0 {
+                    // Reverse the conversion done in to_animated_value()
+                    Self::NORMAL
+                } else {
+                    Self::oblique(angle.degrees())
+                },
         }
     }
 }