CSS Properties & Values API: Compute initial values for transfrom-lis…

…t type. For <transform-function> values contained in <transform-list> values, the computed value is as specified but with all lengths resolved to their computed values. https://drafts.css-houdini.org/css-properties-values-api-1/#calculation-of-computed-values BUG=671490 Review-Url: https://codereview.chromium.org/2937043002 Cr-Commit-Position: refs/heads/master@{#483312}
marcosholgado · Jun 29, 2017 · 53b56ec · 53b56ec
1 parent cf37131
commit 53b56ec
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/third_party/WebKit/LayoutTests/custom-properties/registered-property-initial.html b/third_party/WebKit/LayoutTests/custom-properties/registered-property-initial.html
@@ -13,13 +13,17 @@
 CSS.registerProperty({name: '--length-percentage', syntax: '<length-percentage>', initialValue: 'calc(1in + 10% + 4px)'});
 CSS.registerProperty({name: '--inherited-color', syntax: '<color>', initialValue: 'pink', inherits: true});
 CSS.registerProperty({name: '--non-inherited-color', syntax: '<color>', initialValue: 'purple'});
+CSS.registerProperty({name: '--single-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 2))'});
+CSS.registerProperty({name: '--multiple-transform-list', syntax: '<transform-list>', initialValue: 'scale(calc(2 + 1)) translateX(calc(3px + 1px))'});
 
 test(function() {
     computedStyle = getComputedStyle(target);
     assert_equals(computedStyle.getPropertyValue('--length'), '25px');
     assert_equals(computedStyle.getPropertyValue('--length-percentage'), 'calc(100px + 10%)');
     assert_equals(computedStyle.getPropertyValue('--inherited-color'), 'pink');
     assert_equals(computedStyle.getPropertyValue('--non-inherited-color'), 'purple');
+    assert_equals(computedStyle.getPropertyValue('--single-transform-list'), 'scale(4)');
+    assert_equals(computedStyle.getPropertyValue('--multiple-transform-list'), 'scale(3) translateX(4px)');
 
     assert_equals(computedStyle.backgroundColor, 'rgb(255, 192, 203)');
     assert_equals(computedStyle.color, 'rgb(128, 0, 128)');

diff --git a/third_party/WebKit/Source/core/css/PropertyRegistration.cpp b/third_party/WebKit/Source/core/css/PropertyRegistration.cpp
@@ -71,8 +71,7 @@ static bool ComputationallyIndependent(const CSSValue& value) {
     return true;
   }
 
-  // TODO(timloh): Images and transform-function values can also contain
-  // lengths.
+  // TODO(timloh): Images values can also contain lengths.
 
   return true;
 }

diff --git a/third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.cpp b/third_party/WebKit/Source/core/css/resolver/StyleBuilderConverter.cpp
@@ -1440,8 +1440,18 @@ PassRefPtr<BasicShape> StyleBuilderConverter::ConvertOffsetPath(
 static const CSSValue& ComputeRegisteredPropertyValue(
     const CSSToLengthConversionData& css_to_length_conversion_data,
     const CSSValue& value) {
-  // TODO(timloh): Images and transform-function values can also contain
-  // lengths.
+  // TODO(timloh): Images values can also contain lengths.
+  if (value.IsFunctionValue()) {
+    const CSSFunctionValue& function_value = ToCSSFunctionValue(value);
+    CSSFunctionValue* new_function =
+        CSSFunctionValue::Create(function_value.FunctionType());
+    for (const CSSValue* inner_value : ToCSSValueList(value)) {
+      new_function->Append(ComputeRegisteredPropertyValue(
+          css_to_length_conversion_data, *inner_value));
+    }
+    return *new_function;
+  }
+
   if (value.IsValueList()) {
     CSSValueList* new_list = CSSValueList::CreateSpaceSeparated();
     for (const CSSValue* inner_value : ToCSSValueList(value)) {