[CSS] Treat viewport-relative units as computationally independent

According to spec (*):

"A property value is computationally independent if it can be converted
into a computed value using only the value of the property on the
element, and 'global' information that cannot be changed by CSS."

Therefore, viewport-relative length units should be treated as
computationally independent. This patch fixes the implementation to
comply to that.

(*) https://drafts.css-houdini.org/css-properties-values-api-1/#computationally-independent

Change-Id: Ib75a1981aa4083ee68cef8ba0bbc58d557cd663c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1710090Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#679183}

third_party/blink/renderer/core/css/css_numeric_literal_value.cc

@@ -125,6 +125,14 @@ void CSSNumericLiteralValue::AccumulateLengthArray(CSSLengthArray& length_array,
   length_array.type_flags.set(length_type);
 }
 
+bool CSSNumericLiteralValue::IsComputationallyIndependent() const {
+  if (!IsLength())
+    return true;
+  if (IsViewportPercentageLength())
+    return true;
+  return !IsRelativeUnit(GetType());
+}
+
 static String FormatNumber(double number, const char* suffix) {
 #if defined(OS_WIN) && _MSC_VER < 1900
   unsigned oldFormat = _set_output_format(_TWO_DIGIT_EXPONENT);

third_party/blink/renderer/core/css/css_numeric_literal_value.h

@@ -47,9 +47,7 @@ class CORE_EXPORT CSSNumericLiteralValue : public CSSPrimitiveValue {
 
   bool IsZero() const { return !DoubleValue(); }
 
-  bool IsComputationallyIndependent() const {
-    return !IsLength() || !IsRelativeUnit(GetType());
-  }
+  bool IsComputationallyIndependent() const;
 
   double DoubleValue() const { return num_; }
   double ComputeSeconds() const;

third_party/blink/renderer/core/css/css_primitive_value.h

@@ -195,9 +195,10 @@ class CORE_EXPORT CSSPrimitiveValue : public CSSValue {
   static bool IsFlex(UnitType unit) { return unit == UnitType::kFraction; }
   bool IsFlex() const;
 
-  // Returns false when |this| is a length or a math function mixing percentage
-  // with length, and relative length units are involved. Returns true in all
-  // other cases.
+  // https://drafts.css-houdini.org/css-properties-values-api-1/#computationally-independent
+  // A property value is computationally independent if it can be converted into
+  // a computed value using only the value of the property on the element, and
+  // "global" information that cannot be changed by CSS.
   bool IsComputationallyIndependent() const;
 
   // Creates either a |CSSNumericLiteralValue| or a |CSSMathFunctionValue|,

third_party/blink/web_tests/external/wpt/css/css-properties-values-api/register-property-syntax-parsing.html

@@ -54,6 +54,8 @@ assert_valid("<percentage>", "-9.3e3%");
 assert_valid("<length-percentage>", "-54%");
 assert_valid("<length-percentage>", "0");
 assert_valid("<length-percentage>", "calc(-11px + 10.4%)");
+assert_valid("<length>", "10vmin");
+assert_valid("<percentage> | <length>+", "calc(100vh - 10px) 30px");
 
 assert_valid("<number>", "-109");
 assert_valid("<number>", "2.3e4");
@@ -183,14 +185,12 @@ assert_invalid("<length>", "10%");
 assert_invalid("<length>", "calc(5px + 10%)");
 assert_invalid("<length>", "calc(5px * 3px / 6px)");
 assert_invalid("<length>", "10em");
-assert_invalid("<length>", "10vmin");
 assert_invalid("<length>", "calc(4px + 3em)");
 assert_invalid("<length>", "calc(4px + calc(8 * 2em))");
 assert_invalid("<length>+", "calc(2ex + 16px)");
 assert_invalid("<length>+", "10px calc(20px + 4rem)");
 assert_invalid("<length>+", "");
 assert_invalid("<length>#", "");
-assert_invalid("<percentage> | <length>+", "calc(100vh - 10px) 30px");
 assert_invalid("<length>", "10px;");
 assert_invalid("<length-percentage>", "calc(2px + 10% + 7ex)");
 assert_invalid("<percentage>", "0");