From 321b75a39150db76c493d691a4ab1c613a813ac7 Mon Sep 17 00:00:00 2001 From: Moonchild Date: Fri, 13 Jun 2025 11:40:49 +0200 Subject: [PATCH] Issue #2751 - Use rounded interpolation value when interpolating the Integer type and Font stretch type, per spec. Resolves #2751 --- layout/style/StyleAnimationValue.cpp | 15 +++++++++------ .../style/test/test_transitions_per_property.html | 6 +++--- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/layout/style/StyleAnimationValue.cpp b/layout/style/StyleAnimationValue.cpp index f7a9625211..9f574c9a77 100644 --- a/layout/style/StyleAnimationValue.cpp +++ b/layout/style/StyleAnimationValue.cpp @@ -2675,8 +2675,10 @@ StyleAnimationValue::AddWeighted(nsCSSPropertyID aProperty, switch (aProperty) { case eCSSProperty_font_stretch: { // Animate just like eUnit_Integer. - int32_t result = floor(aCoeff1 * double(aValue1.GetIntValue()) + - aCoeff2 * double(aValue2.GetIntValue())); + // https://drafts.csswg.org/css-fonts-3/#font-stretch-animation + double interpolatedValue = aCoeff1 * double(aValue1.GetIntValue()) + + aCoeff2 * double(aValue2.GetIntValue()); + int32_t result = floor(interpolatedValue + 0.5); // Fast round. if (result < NS_STYLE_FONT_STRETCH_ULTRA_CONDENSED) { result = NS_STYLE_FONT_STRETCH_ULTRA_CONDENSED; } else if (result > NS_STYLE_FONT_STRETCH_ULTRA_EXPANDED) { @@ -2708,10 +2710,11 @@ StyleAnimationValue::AddWeighted(nsCSSPropertyID aProperty, return true; } case eUnit_Integer: { - // http://dev.w3.org/csswg/css3-transitions/#animation-of-property-types- - // says we should use floor - int32_t result = floor(aCoeff1 * double(aValue1.GetIntValue()) + - aCoeff2 * double(aValue2.GetIntValue())); + // https://drafts.csswg.org/css-transitions/#animtype-integer + // Spec says animation of properties should use rounding. + double interpolatedValue = aCoeff1 * double(aValue1.GetIntValue()) + + aCoeff2 * double(aValue2.GetIntValue()); + int32_t result = floor(interpolatedValue + 0.5); if (aProperty == eCSSProperty_font_weight) { if (result < 100) { result = 100; diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html index 2e300fbe83..6f2655244a 100644 --- a/layout/style/test/test_transitions_per_property.html +++ b/layout/style/test/test_transitions_per_property.html @@ -1809,7 +1809,7 @@ function test_integer_transition(prop) { "integer-valued property " + prop + ": computed value before transition"); div.style.setProperty("transition-property", prop, ""); div.style.setProperty(prop, "-14", ""); - is(cs.getPropertyValue(prop), "-1", + is(cs.getPropertyValue(prop), "0", "integer-valued property " + prop + ": interpolation of integers"); check_distance(prop, "6", "1", "-14"); @@ -1853,7 +1853,7 @@ function test_font_stretch(prop) { "font-stretch property " + prop + ": computed value before transition"); div.style.setProperty("transition-property", prop, ""); div.style.setProperty(prop, "extra-condensed", ""); - is(cs.getPropertyValue(prop), "normal", + is(cs.getPropertyValue(prop), "semi-expanded", "font-stretch property " + prop + ": interpolation of font-stretches"); check_distance(prop, "expanded", "semi-expanded", "condensed"); @@ -1934,7 +1934,7 @@ function test_pos_integer_or_auto_transition(prop) { "integer-valued property " + prop + ": computed value before transition"); div.style.setProperty("transition-property", prop, ""); div.style.setProperty(prop, "11", ""); - is(cs.getPropertyValue(prop), "5", + is(cs.getPropertyValue(prop), "6", "integer-valued property " + prop + ": interpolation of integers"); check_distance(prop, "4", "6", "12"); div.style.setProperty(prop, "auto", "");