Support animating <integer> custom properties

This patch adds support for animating custom properties registered with the <integer> syntax. Spec: https://drafts.css-houdini.org/css-properties-values-api/#supported-syntax-strings BUG: 671904 Change-Id: I9696f0da0ab7f0f82af65ad59a9dc415c576b3be Reviewed-on: https://chromium-review.googlesource.com/544358 Commit-Queue: Alan Cutter <alancutter@chromium.org> Reviewed-by: Suzy Howlett <suzyh@chromium.org> Cr-Commit-Position: refs/heads/master@{#482549}
Denger-Network · Jun 27, 2017 · 0ebef0f · 0ebef0f
1 parent 9cdf143
commit 0ebef0f
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 3 deletions.
diff --git a/third_party/WebKit/LayoutTests/animations/custom-properties/integer-type-interpolation.html b/third_party/WebKit/LayoutTests/animations/custom-properties/integer-type-interpolation.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+.parent {
+  --integer: 30;
+}
+.target {
+  --integer: 10;
+}
+</style>
+<body>
+<script src="../interpolation/resources/interpolation-test.js"></script>
+<script>
+CSS.registerProperty({
+  name: '--integer',
+  syntax: '<integer>',
+  initialValue: '40',
+});
+
+assertInterpolation({
+  property: '--integer',
+  from: neutralKeyframe,
+  to: '20',
+}, [
+  {at: -0.3, is: '7'},
+  {at: 0, is: '10'},
+  {at: 0.5, is: '15'},
+  {at: 1, is: '20'},
+  {at: 1.5, is: '25'},
+]);
+
+assertInterpolation({
+  property: '--integer',
+  from: 'initial',
+  to: '20',
+}, [
+  {at: -0.3, is: '46'},
+  {at: 0, is: '40'},
+  {at: 0.5, is: '30'},
+  {at: 1, is: '20'},
+  {at: 1.5, is: '10'},
+]);
+
+assertInterpolation({
+  property: '--integer',
+  from: 'inherit',
+  to: '20',
+}, [
+  {at: -0.3, is: '33'},
+  {at: 0, is: '30'},
+  {at: 0.5, is: '25'},
+  {at: 1, is: '20'},
+  {at: 1.5, is: '15'},
+]);
+
+assertInterpolation({
+  property: '--integer',
+  from: 'unset',
+  to: '20',
+}, [
+  {at: -0.3, is: '46'},
+  {at: 0, is: '40'},
+  {at: 0.5, is: '30'},
+  {at: 1, is: '20'},
+  {at: 1.5, is: '10'},
+]);
+
+assertInterpolation({
+  property: '--integer',
+  from: '-10',
+  to: '10',
+}, [
+  {at: -0.3, is: '-16'},
+  {at: 0, is: '-10'},
+  {at: 0.5, is: '0'},
+  {at: 1, is: '10'},
+  {at: 1.5, is: '20'}
+]);
+
+assertInterpolation({
+  property: '--integer',
+  from: '10',
+  to: '15',
+}, [
+  {at: -0.3, is: '9'},
+  {at: 0, is: '10'},
+  {at: 0.25, is: '11'},
+  {at: 0.5, is: '13'},
+  {at: 0.75, is: '14'},
+  {at: 1, is: '15'},
+  {at: 1.5, is: '18'}
+]);
+</script>
+</body>
diff --git a/third_party/WebKit/LayoutTests/animations/custom-properties/number-type-interpolation.html b/third_party/WebKit/LayoutTests/animations/custom-properties/number-type-interpolation.html
@@ -76,5 +76,19 @@
   {at: 1, is: '10'},
   {at: 1.5, is: '20'}
 ]);
+
+assertInterpolation({
+  property: '--number',
+  from: '10',
+  to: '15',
+}, [
+  {at: -0.3, is: '8.5'},
+  {at: 0, is: '10'},
+  {at: 0.25, is: '11.25'},
+  {at: 0.5, is: '12.5'},
+  {at: 0.75, is: '13.75'},
+  {at: 1, is: '15'},
+  {at: 1.5, is: '17.5'}
+]);
 </script>
 </body>
diff --git a/third_party/WebKit/Source/core/animation/CSSInterpolationTypesMap.cpp b/third_party/WebKit/Source/core/animation/CSSInterpolationTypesMap.cpp
@@ -380,6 +380,8 @@ CSSInterpolationTypesMap::CreateInterpolationTypesForCSSSyntax(
             property, &registration));
         break;
       case CSSSyntaxType::kInteger:
+        result.push_back(WTF::MakeUnique<CSSNumberInterpolationType>(
+            property, &registration, true));
       case CSSSyntaxType::kTransformList:
         // TODO(alancutter): Support smooth interpolation of these types.
         break;

diff --git a/third_party/WebKit/Source/core/animation/CSSNumberInterpolationType.cpp b/third_party/WebKit/Source/core/animation/CSSNumberInterpolationType.cpp
@@ -41,7 +41,8 @@ const CSSValue* CSSNumberInterpolationType::CreateCSSValue(
     const InterpolableValue& value,
     const NonInterpolableValue*,
     const StyleResolverState&) const {
-  return CSSPrimitiveValue::Create(ToInterpolableNumber(value).Value(),
+  double number = ToInterpolableNumber(value).Value();
+  return CSSPrimitiveValue::Create(round_to_integer_ ? round(number) : number,
                                    CSSPrimitiveValue::UnitType::kNumber);
 }
 

diff --git a/third_party/WebKit/Source/core/animation/CSSNumberInterpolationType.h b/third_party/WebKit/Source/core/animation/CSSNumberInterpolationType.h
@@ -12,8 +12,13 @@ namespace blink {
 class CSSNumberInterpolationType : public CSSInterpolationType {
  public:
   CSSNumberInterpolationType(PropertyHandle property,
-                             const PropertyRegistration* registration = nullptr)
-      : CSSInterpolationType(property, registration) {}
+                             const PropertyRegistration* registration = nullptr,
+                             bool round_to_integer = false)
+      : CSSInterpolationType(property, registration),
+        round_to_integer_(round_to_integer) {
+    // This integer flag only applies to registered custom properties.
+    DCHECK(!round_to_integer_ || property.IsCSSCustomProperty());
+  }
 
   InterpolationValue MaybeConvertStandardPropertyUnderlyingValue(
       const ComputedStyle&) const final;
@@ -36,6 +41,8 @@ class CSSNumberInterpolationType : public CSSInterpolationType {
   InterpolationValue MaybeConvertValue(const CSSValue&,
                                        const StyleResolverState*,
                                        ConversionCheckers&) const final;
+
+  const bool round_to_integer_;
 };
 
 }  // namespace blink