chromium/src
0
Fork 0
Code Activity

Correctly support interpolation of integers

Browse Source 
Previously <Integer> syntax for a custom property was equivalent to
<Number> with the exception of rounding. This creates a problem when
extracting the CSS value of the property with a large integer value.
Numbers (even if integer valued) are converted to exponential
form when generating the CSS text if the number of digits is 7 or
greater. These floating point representations are rejected when we try
and assign them to the property. The fix is to retain that we are
integer valued when generating CSS values.

Bug: 1217506
Change-Id: I45fcfe2007860b45b80aafb57fcf0b5002fb4bca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2971254
Reviewed-by: Xida Chen <xidachen@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#894653}
This commit is contained in:
Kevin Ellis
2021-06-22 13:13:00 +00:00
committed by Chromium LUCI CQ
parent 211c38928b
commit ddb73473cf
3 changed files with 32 additions and 8 deletions
third_party/blink
renderer
core
animation
css_number_interpolation_type.cccss_number_interpolation_type.h
web_tests
animations
interpolation
integer-interpolation.html

13
third_party/blink/renderer/core/animation/css_number_interpolation_type.cc vendored

@ -42,8 +42,7 @@ const CSSValue* CSSNumberInterpolationType::CreateCSSValue(
const StyleResolverState&) const {
double number = To<InterpolableNumber>(value).Value();
return CSSNumericLiteralValue::Create(
round_to_integer_ ? round(number) : number,
CSSPrimitiveValue::UnitType::kNumber);
round_to_integer_ ? round(number) : number, UnitType());
}
InterpolationValue CSSNumberInterpolationType::CreateNumberValue(
@ -111,12 +110,10 @@ void CSSNumberInterpolationType::ApplyStandardPropertyValue(
CssProperty(), To<InterpolableNumber>(interpolable_value).Value());
if (!NumberPropertyFunctions::SetNumber(CssProperty(), *state.Style(),
clamped_number)) {
StyleBuilder::ApplyProperty(
GetProperty().GetCSSProperty(), state,
ScopedCSSValue(
*CSSNumericLiteralValue::Create(
clamped_number, CSSPrimitiveValue::UnitType::kNumber),
nullptr));
StyleBuilder::ApplyProperty(GetProperty().GetCSSProperty(), state,
ScopedCSSValue(*CSSNumericLiteralValue::Create(
clamped_number, UnitType()),
nullptr));
}
}

5
third_party/blink/renderer/core/animation/css_number_interpolation_type.h vendored

@ -43,6 +43,11 @@ class CORE_EXPORT CSSNumberInterpolationType : public CSSInterpolationType {
const StyleResolverState*,
ConversionCheckers&) const final;
CSSPrimitiveValue::UnitType UnitType() const {
return round_to_integer_ ? CSSPrimitiveValue::UnitType::kInteger
: CSSPrimitiveValue::UnitType::kNumber;
}
const bool round_to_integer_;
};

22
third_party/blink/web_tests/animations/interpolation/integer-interpolation.html vendored Normal file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
@property --num {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
// Regression test for crbug.com/1217506
assertInterpolation({
property: '--num',
from: '0',
to: '1000000000',
}, [
{at: 0.123456789, is: '123456789'},
]);
</script>
</body>