CSS Transforms: scale() accepts percentages.

The functions  scale() scaleX() scaleY() scaleZ() scale3d()  and the
property  scale  each accept percentages, that serialize as numbers.

w3c/csswg-drafts#3399
w3c/csswg-drafts#4396
https://drafts.csswg.org/css-transforms-2/#transform-functions
https://drafts.csswg.org/css-transforms-2/#propdef-scale


Bug: 1179579
Change-Id: Icfbc42bf529c1c63045c3e918a6a1db2b14d1ae3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2703674
Commit-Queue: Eric Willigers <[email protected]>
Reviewed-by: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/master@{#867008}

Author: ericwilligers

third_party/blink/renderer/core/css/properties/css_parsing_utils.cc

@@ -375,6 +375,22 @@ bool ConsumeNumbers(CSSParserTokenRange& args,
   return true;
 }
 
+bool ConsumeNumbersOrPercents(CSSParserTokenRange& args,
+                              const CSSParserContext& context,
+                              CSSFunctionValue*& transform_value,
+                              unsigned number_of_arguments) {
+  do {
+    CSSValue* parsed_value =
+        ConsumeNumberOrPercent(args, context, kValueRangeAll);
+    if (!parsed_value)
+      return false;
+    transform_value->Append(*parsed_value);
+    if (--number_of_arguments && !ConsumeCommaIncludingWhitespace(args))
+      return false;
+  } while (number_of_arguments);
+  return true;
+}
+
 bool ConsumePerspective(CSSParserTokenRange& args,
                         const CSSParserContext& context,
                         CSSFunctionValue*& transform_value,
@@ -841,20 +857,24 @@ CSSPrimitiveValue* ConsumePercent(CSSParserTokenRange& range,
   return nullptr;
 }
 
-CSSPrimitiveValue* ConsumeAlphaValue(CSSParserTokenRange& range,
-                                     const CSSParserContext& context) {
-  if (CSSPrimitiveValue* value =
-          ConsumeNumber(range, context, kValueRangeAll)) {
+CSSPrimitiveValue* ConsumeNumberOrPercent(CSSParserTokenRange& range,
+                                          const CSSParserContext& context,
+                                          ValueRange value_range) {
+  if (CSSPrimitiveValue* value = ConsumeNumber(range, context, value_range)) {
     return value;
   }
-  if (CSSPrimitiveValue* value =
-          ConsumePercent(range, context, kValueRangeAll)) {
+  if (CSSPrimitiveValue* value = ConsumePercent(range, context, value_range)) {
     return CSSNumericLiteralValue::Create(value->GetDoubleValue() / 100.0,
                                           CSSPrimitiveValue::UnitType::kNumber);
   }
   return nullptr;
 }
 
+CSSPrimitiveValue* ConsumeAlphaValue(CSSParserTokenRange& range,
+                                     const CSSParserContext& context) {
+  return ConsumeNumberOrPercent(range, context, kValueRangeAll);
+}
+
 bool CanConsumeCalcValue(CalculationCategory category,
                          CSSParserMode css_parser_mode) {
   return category == kCalcLength || category == kCalcPercent ||
@@ -4706,13 +4726,13 @@ CSSValue* ConsumeTransformValue(CSSParserTokenRange& range,
     case CSSValueID::kScaleY:
     case CSSValueID::kScaleZ:
     case CSSValueID::kScale:
-      parsed_value = ConsumeNumber(args, context, kValueRangeAll);
+      parsed_value = ConsumeNumberOrPercent(args, context, kValueRangeAll);
       if (!parsed_value)
         return nullptr;
       if (function_id == CSSValueID::kScale &&
           ConsumeCommaIncludingWhitespace(args)) {
         transform_value->Append(*parsed_value);
-        parsed_value = ConsumeNumber(args, context, kValueRangeAll);
+        parsed_value = ConsumeNumberOrPercent(args, context, kValueRangeAll);
         if (!parsed_value)
           return nullptr;
       }
@@ -4748,7 +4768,7 @@ CSSValue* ConsumeTransformValue(CSSParserTokenRange& range,
       }
       break;
     case CSSValueID::kScale3d:
-      if (!ConsumeNumbers(args, context, transform_value, 3))
+      if (!ConsumeNumbersOrPercents(args, context, transform_value, 3))
         return nullptr;
       break;
     case CSSValueID::kRotate3d:

third_party/blink/renderer/core/css/properties/css_parsing_utils.h

@@ -88,6 +88,12 @@ CSSPrimitiveValue* ConsumeLength(CSSParserTokenRange&,
 CSSPrimitiveValue* ConsumePercent(CSSParserTokenRange&,
                                   const CSSParserContext&,
                                   ValueRange);
+
+// Any percentages are converted to numbers.
+CSSPrimitiveValue* ConsumeNumberOrPercent(CSSParserTokenRange&,
+                                          const CSSParserContext&,
+                                          ValueRange);
+
 CSSPrimitiveValue* ConsumeAlphaValue(CSSParserTokenRange&,
                                      const CSSParserContext&);
 CSSPrimitiveValue* ConsumeLengthOrPercent(

third_party/blink/renderer/core/css/properties/longhands/longhands_custom.cc

@@ -5635,24 +5635,23 @@ const CSSValue* Scale::ParseSingleValue(CSSParserTokenRange& range,
   if (id == CSSValueID::kNone)
     return css_parsing_utils::ConsumeIdent(range);
 
-  CSSValue* x_scale =
-      css_parsing_utils::ConsumeNumber(range, context, kValueRangeAll);
+  CSSPrimitiveValue* x_scale =
+      css_parsing_utils::ConsumeNumberOrPercent(range, context, kValueRangeAll);
   if (!x_scale)
     return nullptr;
 
   CSSValueList* list = CSSValueList::CreateSpaceSeparated();
   list->Append(*x_scale);
 
-  CSSValue* y_scale =
-      css_parsing_utils::ConsumeNumber(range, context, kValueRangeAll);
+  CSSPrimitiveValue* y_scale =
+      css_parsing_utils::ConsumeNumberOrPercent(range, context, kValueRangeAll);
   if (y_scale) {
-    CSSValue* z_scale =
-        css_parsing_utils::ConsumeNumber(range, context, kValueRangeAll);
+    CSSPrimitiveValue* z_scale = css_parsing_utils::ConsumeNumberOrPercent(
+        range, context, kValueRangeAll);
     if (z_scale) {
       list->Append(*y_scale);
       list->Append(*z_scale);
-    } else if (To<CSSPrimitiveValue>(x_scale)->GetDoubleValue() !=
-               To<CSSPrimitiveValue>(y_scale)->GetDoubleValue()) {
+    } else if (x_scale->GetDoubleValue() != y_scale->GetDoubleValue()) {
       list->Append(*y_scale);
     }
   }

third_party/blink/web_tests/external/wpt/css/css-transforms/parsing/scale-parsing-valid-expected.txt

@@ -1,24 +1,25 @@
 This is a testharness.js-based test.
 PASS e.style['scale'] = "none" should set the property value
 PASS e.style['scale'] = "1" should set the property value
-FAIL e.style['scale'] = "1%" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['scale'] = "1%" should set the property value
 PASS e.style['scale'] = "100" should set the property value
-FAIL e.style['scale'] = "100%" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['scale'] = "100%" should set the property value
 PASS e.style['scale'] = "100 100" should set the property value
-FAIL e.style['scale'] = "100% 100%" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['scale'] = "100% 100%" should set the property value
 FAIL e.style['scale'] = "100 100 1" should set the property value assert_equals: serialization should be canonical expected "100" but got "100 100 1"
-FAIL e.style['scale'] = "100% 100% 1" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['scale'] = "100% 100% 1" should set the property value assert_equals: serialization should be canonical expected "1" but got "1 1 1"
 PASS e.style['scale'] = "-100" should set the property value
-FAIL e.style['scale'] = "-100%" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['scale'] = "-100%" should set the property value
 PASS e.style['scale'] = "-100 -100" should set the property value
-FAIL e.style['scale'] = "-100% -100%" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['scale'] = "-100% -100%" should set the property value
 FAIL e.style['scale'] = "-100 -100 1" should set the property value assert_equals: serialization should be canonical expected "-100" but got "-100 -100 1"
-FAIL e.style['scale'] = "-100% -100% 1" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['scale'] = "-100% -100% 1" should set the property value assert_equals: serialization should be canonical expected "-1" but got "-1 -1 1"
 PASS e.style['scale'] = "100 200" should set the property value
-FAIL e.style['scale'] = "100% 200%" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['scale'] = "100% 200%" should set the property value
 FAIL e.style['scale'] = "100 200 1" should set the property value assert_equals: serialization should be canonical expected "100 200" but got "100 200 1"
-FAIL e.style['scale'] = "100% 200% 1" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['scale'] = "100% 200% 1" should set the property value assert_equals: serialization should be canonical expected "1 2" but got "1 2 1"
 PASS e.style['scale'] = "100 200 300" should set the property value
 PASS e.style['scale'] = "100 100 2" should set the property value
+PASS e.style['scale'] = "100% 200% 300%" should set the property value
 Harness: the test ran to completion.
 

third_party/blink/web_tests/external/wpt/css/css-transforms/parsing/scale-parsing-valid.html

@@ -36,7 +36,7 @@
 test_valid_value("scale", "100% 200% 1", "1 2");
 test_valid_value("scale", "100 200 300");
 test_valid_value("scale", "100 100 2", "100 100 2");
-
+test_valid_value("scale", "100% 200% 300%", "1 2 3");
 </script>
 </body>
 </html>

third_party/blink/web_tests/external/wpt/css/css-transforms/parsing/transform-valid-expected.txt

@@ -32,6 +32,7 @@
 
 test_valid_value("transform", "scale(250%)", "scale(2.5)");
 test_valid_value("transform", "scale(325%, 475%)", "scale(3.25, 4.75)");
+test_valid_value("transform", "scale(1, 200%)", "scale(1, 2)");
 
 test_valid_value("transform", "scale(-250%)", "scale(-2.5)");
 test_valid_value("transform", "scale(-500%, -620%)", "scale(-5, -6.2)");
@@ -42,11 +43,15 @@
 test_valid_value("transform", "scaleY(-8)");
 test_valid_value("transform", "scaleY(-85%)", "scaleY(-0.85)");
 
+test_valid_value("transform", "scaleZ(4)");
+test_valid_value("transform", "scaleZ(25%)", "scaleZ(0.25)");
+
 test_valid_value("transform", "scale3d(0.5, 2.5, 3)");
 test_valid_value("transform", "scale3d(50%, 250%, 300%)", "scale3d(0.5, 2.5, 3)");
 
 test_valid_value("transform", "scale3d(-0.5, 2.5, -3)");
 test_valid_value("transform", "scale3d(-50%, 250%, -300%)", "scale3d(-0.5, 2.5, -3)");
+test_valid_value("transform", "scale3d(1, 200%, 3)", "scale3d(1, 2, 3)");
 
 test_valid_value("transform", "rotate(0)", "rotate(0deg)");
 test_valid_value("transform", "rotate(90deg)");

third_party/blink/web_tests/external/wpt/css/css-transforms/parsing/transform-valid.html

@@ -15,19 +15,19 @@
 expect('5 5').parsesAs('5').isComputedTo('5');
 expect('1 -2.3').parsesAs('1 -2.3').isComputedTo('1 -2.3');
 expect('1 -2.3 4').parsesAs('1 -2.3 4').isComputedTo('1 -2.3 4');
+expect('30%').parsesAs('0.3').isComputedTo('0.3');
 
 expect('calc(1 * 2)').parsesAs('2').isComputedTo('2');
 expect('calc(1 * 2) calc(2 / 4)').parsesAs('2 0.5').isComputedTo('2 0.5');
 expect('calc(1 * 2) calc(2 / 4) calc(0.5)').parsesAs('2 0.5 0.5').isComputedTo('2 0.5 0.5');
+expect('calc(1 * 2) calc(2 / 4) calc(0.5%)').parsesAs('2 0.5 0.005').isComputedTo('2 0.5 0.005');
 
 expect('2px').isInvalid();
-expect('30%').isInvalid();
 expect('1 1 1 1').isInvalid();
 expect('1 2 3deg').isInvalid();
 expect('1 + 1').isInvalid();
 expect('1,').isInvalid();
 expect('1, 2,').isInvalid();
 expect('calc(1 * 2 + 4px) calc(2 / 4) calc(0.5)').isInvalid();
 expect('calc(1 * 2) calc(2 / 4 * 4deg) calc(0.5)').isInvalid();
-expect('calc(1 * 2) calc(2 / 4) calc(0.5%)').isInvalid();
 </script>

third_party/blink/web_tests/transforms/scale-parsing.html

@@ -40,23 +40,26 @@ PASS "transform: translateY(1px, 2px);" should be invalid
 PASS "transform: scale(1);" should parse as "scale(1)"
 PASS "transform: scale(2, 3);" should parse as "scale(2, 3)"
 PASS "transform: scale(2, 3);" should be computed to "matrix(2, 0, 0, 3, 0, 0)"
+PASS "transform: scale(20%, 50%);" should parse as "scale(0.2, 0.5)"
+PASS "transform: scale(20%, 50%);" should be computed to "matrix(0.2, 0, 0, 0.5, 0, 0)"
 PASS "transform: scale();" should be invalid
 PASS "transform: scale(1,);" should be invalid
 PASS "transform: scale(1, 2, 3);" should be invalid
 PASS "transform: scale(1px, 2px);" should be invalid
-PASS "transform: scale(20%, 50%);" should be invalid
 PASS "transform: scaleX(2);" should parse as "scaleX(2)"
 PASS "transform: scaleX(2);" should be computed to "matrix(2, 0, 0, 1, 0, 0)"
+PASS "transform: scaleX(50%);" should parse as "scaleX(0.5)"
+PASS "transform: scaleX(50%);" should be computed to "matrix(0.5, 0, 0, 1, 0, 0)"
 PASS "transform: scaleX();" should be invalid
 PASS "transform: scaleX(1, 2);" should be invalid
 PASS "transform: scaleX(1px);" should be invalid
-PASS "transform: scaleX(50%);" should be invalid
 PASS "transform: scaleY(2);" should parse as "scaleY(2)"
 PASS "transform: scaleY(2);" should be computed to "matrix(1, 0, 0, 2, 0, 0)"
+PASS "transform: scaleY(50%);" should parse as "scaleY(0.5)"
+PASS "transform: scaleY(50%);" should be computed to "matrix(1, 0, 0, 0.5, 0, 0)"
 PASS "transform: scaleY();" should be invalid
 PASS "transform: scaleY(1, 2);" should be invalid
 PASS "transform: scaleY(1px);" should be invalid
-PASS "transform: scaleY(50%);" should be invalid
 PASS "transform: rotate(0);" should parse as "rotate(0deg)"
 PASS "transform: rotate(1deg);" should parse as "rotate(1deg)"
 PASS "transform: rotate(2grad);" should parse as "rotate(2grad)"
@@ -113,16 +116,18 @@ PASS "transform: translateZ(50%);" should be invalid
 PASS "transform: translateZ(1px, 2px);" should be invalid
 PASS "transform: scale3d(2, 3, 4);" should parse as "scale3d(2, 3, 4)"
 PASS "transform: scale3d(2, 3, 4);" should be computed to "matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1)"
+PASS "transform: scale3d(20%, 50%, 60%);" should parse as "scale3d(0.2, 0.5, 0.6)"
+PASS "transform: scale3d(20%, 50%, 60%);" should be computed to "matrix3d(0.2, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.6, 0, 0, 0, 0, 1)"
 PASS "transform: scale3d();" should be invalid
 PASS "transform: scale3d(1, 2, 3, 4);" should be invalid
 PASS "transform: scale3d(1px, 2px, 3px);" should be invalid
-PASS "transform: scale3d(20%, 50%, 60%);" should be invalid
 PASS "transform: scaleZ(2);" should parse as "scaleZ(2)"
 PASS "transform: scaleZ(2);" should be computed to "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)"
+PASS "transform: scaleZ(50%);" should parse as "scaleZ(0.5)"
+PASS "transform: scaleZ(50%);" should be computed to "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1)"
 PASS "transform: scaleZ();" should be invalid
 PASS "transform: scaleZ(1, 2);" should be invalid
 PASS "transform: scaleZ(1px);" should be invalid
-PASS "transform: scaleZ(50%);" should be invalid
 PASS "transform: rotate3d(0, 0, 0, 0);" should parse as "rotate3d(0, 0, 0, 0deg)"
 PASS "transform: rotate3d(1, 2, 3, 4deg);" should parse as "rotate3d(1, 2, 3, 4deg)"
 PASS "transform: rotate3d();" should be invalid

third_party/blink/web_tests/transforms/transform-parsing-expected.txt

@@ -54,25 +54,25 @@
 // scale()
 expect('scale(1)').parsesAs('scale(1)');
 expect('scale(2, 3)').parsesAs('scale(2, 3)').isComputedTo('matrix(2, 0, 0, 3, 0, 0)');
+expect('scale(20%, 50%)').parsesAs('scale(0.2, 0.5)').isComputedTo('matrix(0.2, 0, 0, 0.5, 0, 0)');
 expect('scale()').isInvalid();
 expect('scale(1,)').isInvalid();
 expect('scale(1, 2, 3)').isInvalid();
 expect('scale(1px, 2px)').isInvalid();
-expect('scale(20%, 50%)').isInvalid();
 
 // scaleX()
 expect('scaleX(2)').parsesAs('scaleX(2)').isComputedTo('matrix(2, 0, 0, 1, 0, 0)');
+expect('scaleX(50%)').parsesAs('scaleX(0.5)').isComputedTo('matrix(0.5, 0, 0, 1, 0, 0)');
 expect('scaleX()').isInvalid();
 expect('scaleX(1, 2)').isInvalid();
 expect('scaleX(1px)').isInvalid();
-expect('scaleX(50%)').isInvalid();
 
 // scaleY()
 expect('scaleY(2)').parsesAs('scaleY(2)').isComputedTo('matrix(1, 0, 0, 2, 0, 0)');
+expect('scaleY(50%)').parsesAs('scaleY(0.5)').isComputedTo('matrix(1, 0, 0, 0.5, 0, 0)');
 expect('scaleY()').isInvalid();
 expect('scaleY(1, 2)').isInvalid();
 expect('scaleY(1px)').isInvalid();
-expect('scaleY(50%)').isInvalid();
 
 // rotate()
 expect('rotate(0)').parsesAs('rotate(0deg)');
@@ -146,18 +146,20 @@
 // scale3d()
 expect('scale3d(2, 3, 4)').parsesAs('scale3d(2, 3, 4)').
     isComputedTo('matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1)');
+expect('scale3d(20%, 50%, 60%)').parsesAs('scale3d(0.2, 0.5, 0.6)').
+    isComputedTo('matrix3d(0.2, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.6, 0, 0, 0, 0, 1)');
 expect('scale3d()').isInvalid();
 expect('scale3d(1, 2, 3, 4)').isInvalid();
 expect('scale3d(1px, 2px, 3px)').isInvalid();
-expect('scale3d(20%, 50%, 60%)').isInvalid();
 
 // scaleZ()
 expect('scaleZ(2)').parsesAs('scaleZ(2)').
     isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)');
+expect('scaleZ(50%)').parsesAs('scaleZ(0.5)').
+    isComputedTo('matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1)');
 expect('scaleZ()').isInvalid();
 expect('scaleZ(1, 2)').isInvalid();
 expect('scaleZ(1px)').isInvalid();
-expect('scaleZ(50%)').isInvalid();
 
 // rotate3d()
 expect('rotate3d(0, 0, 0, 0)').parsesAs('rotate3d(0, 0, 0, 0deg)');