diff --git a/dom/smil/test/db_smilCSSFromTo.js b/dom/smil/test/db_smilCSSFromTo.js index daa75eccd10ef..e33c38819c25a 100644 --- 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 index 3a72acaf458ae..dca49aa239f7c 100644 --- 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 index 55ba4de0973ac..c792cd97cfb5e 100644 --- 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()) + }, } } }