Issue #2751 - Use rounded interpolation value when interpolating the Integer type and Font stretch type, per spec.

Resolves #2751
This commit is contained in:
Moonchild 2025-06-13 11:40:49 +02:00 committed by roytam1
commit 321b75a391
2 changed files with 12 additions and 9 deletions

View file

@ -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;

View file

@ -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", "");