Support clamp() in 'sizes' attribute parser

This patch parses clamp() in 'sizes' attribute into nested
max(MIN, min(VAL, MAX)) as per spec to support the function in the
attribute.

Bug: 825895
Change-Id: I087fef6654d2f964fc99071edbbd87a5bc5b8967
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1822217Reviewed-by: Emil A Eklund <eae@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699770}

third_party/blink/renderer/core/css/parser/sizes_calc_parser.cc

@@ -94,6 +94,16 @@ bool SizesCalcParser::HandleRightParenthesis(Vector<CSSParserToken>& stack) {
     return !comma_count;
   }
 
+  if (left_side.FunctionId() == CSSValueID::kClamp) {
+    if (comma_count != 2)
+      return false;
+    // Convert clamp(MIN, VAL, MAX) into max(MIN, min(VAL, MAX))
+    // https://www.w3.org/TR/css-values-4/#calc-notation
+    value_list_.emplace_back(CSSMathOperator::kMin);
+    value_list_.emplace_back(CSSMathOperator::kMax);
+    return true;
+  }
+
   // Break variadic min/max() into binary operations to fit in the reverse
   // polish notation.
   CSSMathOperator op = left_side.FunctionId() == CSSValueID::kMin
@@ -170,8 +180,8 @@ bool SizesCalcParser::CalcToReversePolishNotation(CSSParserTokenRange range) {
       case kFunctionToken:
         if (RuntimeEnabledFeatures::CSSComparisonFunctionsEnabled()) {
           if (token.FunctionId() == CSSValueID::kMin ||
-              token.FunctionId() == CSSValueID::kMax) {
-            // TODO(crbug.com/825895): Add clamp() when min/max are done.
+              token.FunctionId() == CSSValueID::kMax ||
+              token.FunctionId() == CSSValueID::kClamp) {
             stack.push_back(token);
             break;
           }

third_party/blink/renderer/core/css/parser/sizes_calc_parser_test.cc

@@ -151,6 +151,22 @@ TEST(SizesCalcParserTest, Basic) {
       {"calc(min(100px, 200px) / max(3, 4, 5))", 20, true, false},
       {"max(10px, min(20px, 1em))", 16, true, false},
       {"min(20px, max(10px, 1em))", 16, true, false},
+      {"clamp(10px, 20px, 30px)", 20, true, false},
+      {"clamp(10px, 5px, 30px)", 10, true, false},
+      {"clamp(10px, 35px, 30px)", 30, true, false},
+      {"clamp(30px, 20px, 10px)", 30, true, false},
+      {"clamp(10px, 20px, clamp(20px, 30px, 40px))", 20, true, false},
+      {"clamp()", 0, false, false},
+      {"clamp( )", 0, false, false},
+      {"clamp(,)", 0, false, false},
+      {"clamp(1px, )", 0, false, false},
+      {"clamp(, 1px)", 0, false, false},
+      {"clamp(1px, 1px)", 0, false, false},
+      {"clamp(1px, , 1px)", 0, false, false},
+      {"clamp(, 1px, 1px)", 0, false, false},
+      {"clamp(1px, 1px, )", 0, false, false},
+      {"clamp(1px, 1px, 1px, )", 0, false, false},
+      {"clamp(1px 1px 1px)", 0, false, false},
       {nullptr, 0, true, false}  // Do not remove the terminator line.
   };