CSS: Serialize contain keywords in canonical order

Keywords size, layout, style, paint now serialize in that order
for the 'contain' property.
https://drafts.csswg.org/css-contain/#contain-property

Bug: 908353
Change-Id: Ifde635f2d313add887dd43a0a0d98249e45bff4b
Reviewed-on: https://chromium-review.googlesource.com/c/1350562
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#611270}

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

@@ -12,7 +12,7 @@
 namespace blink {
 namespace css_longhand {
 
-// none | strict | content | [ layout || style || paint || size ]
+// none | strict | content | [ size || layout || style || paint ]
 const CSSValue* Contain::ParseSingleValue(CSSParserTokenRange& range,
                                           const CSSParserContext& context,
                                           const CSSParserLocalContext&) const {
@@ -25,16 +25,32 @@ const CSSValue* Contain::ParseSingleValue(CSSParserTokenRange& range,
     list->Append(*css_property_parser_helpers::ConsumeIdent(range));
     return list;
   }
+
+  CSSIdentifierValue* size = nullptr;
+  CSSIdentifierValue* layout = nullptr;
+  CSSIdentifierValue* style = nullptr;
+  CSSIdentifierValue* paint = nullptr;
   while (true) {
-    CSSIdentifierValue* ident = css_property_parser_helpers::ConsumeIdent<
-        CSSValuePaint, CSSValueLayout, CSSValueStyle, CSSValueSize>(range);
-    if (!ident)
+    CSSValueID id = range.Peek().Id();
+    if (id == CSSValueSize && !size)
+      size = css_property_parser_helpers::ConsumeIdent(range);
+    else if (id == CSSValueLayout && !layout)
+      layout = css_property_parser_helpers::ConsumeIdent(range);
+    else if (id == CSSValueStyle && !style)
+      style = css_property_parser_helpers::ConsumeIdent(range);
+    else if (id == CSSValuePaint && !paint)
+      paint = css_property_parser_helpers::ConsumeIdent(range);
+    else
       break;
-    if (list->HasValue(*ident))
-      return nullptr;
-    list->Append(*ident);
   }
-
+  if (size)
+    list->Append(*size);
+  if (layout)
+    list->Append(*layout);
+  if (style)
+    list->Append(*style);
+  if (paint)
+    list->Append(*paint);
   if (!list->length())
     return nullptr;
   return list;
@@ -54,14 +70,14 @@ const CSSValue* Contain::CSSValueFromComputedStyleInternal(
     return CSSIdentifierValue::Create(CSSValueContent);
 
   CSSValueList* list = CSSValueList::CreateSpaceSeparated();
-  if (style.ContainsStyle())
-    list->Append(*CSSIdentifierValue::Create(CSSValueStyle));
+  if (style.ContainsSize())
+    list->Append(*CSSIdentifierValue::Create(CSSValueSize));
   if (style.Contain() & kContainsLayout)
     list->Append(*CSSIdentifierValue::Create(CSSValueLayout));
+  if (style.ContainsStyle())
+    list->Append(*CSSIdentifierValue::Create(CSSValueStyle));
   if (style.ContainsPaint())
     list->Append(*CSSIdentifierValue::Create(CSSValuePaint));
-  if (style.ContainsSize())
-    list->Append(*CSSIdentifierValue::Create(CSSValueSize));
   DCHECK(list->length());
   return list;
 }

third_party/blink/web_tests/external/wpt/css/css-contain/parsing/contain-computed-expected.txt

@@ -0,0 +1,14 @@
+This is a testharness.js-based test.
+PASS Property contain value 'none' computes to 'none'
+PASS Property contain value 'strict' computes to 'strict'
+PASS Property contain value 'content' computes to 'content'
+PASS Property contain value 'size' computes to 'size'
+PASS Property contain value 'layout' computes to 'layout'
+PASS Property contain value 'style' computes to 'style'
+PASS Property contain value 'paint' computes to 'paint'
+PASS Property contain value 'size layout' computes to 'size layout'
+PASS Property contain value 'style paint' computes to 'style paint'
+FAIL Property contain value 'layout style paint' computes to 'layout style paint' assert_equals: expected "layout style paint" but got "content"
+FAIL Property contain value 'size layout style paint' computes to 'size layout style paint' assert_equals: expected "size layout style paint" but got "strict"
+Harness: the test ran to completion.
+

third_party/blink/web_tests/external/wpt/css/css-contain/parsing/contain-computed.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Containment Module Level 1: getComputedValue().contain</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+<meta name="assert" content="contain computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("contain", "none");
+test_computed_value("contain", "strict");
+test_computed_value("contain", "content");
+
+test_computed_value("contain", "size");
+test_computed_value("contain", "layout");
+test_computed_value("contain", "style");
+test_computed_value("contain", "paint");
+test_computed_value("contain", "size layout");
+test_computed_value("contain", "style paint");
+test_computed_value("contain", "layout style paint");
+test_computed_value("contain", "size layout style paint");
+</script>
+</body>
+</html>

third_party/blink/web_tests/external/wpt/css/css-contain/parsing/contain-invalid.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Containment Module Level 1: parsing contain with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+<meta name="assert" content="contain supports only the grammar 'none | strict | content | [ size || layout || style || paint ]'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("contain", "auto");
+test_invalid_value("contain", "strict content");
+test_invalid_value("contain", "size layout size");
+test_invalid_value("contain", "paint content");
+</script>
+</body>
+</html>

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

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Containment Module Level 1: parsing contain with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+<meta name="assert" content="contain supports the full grammar 'none | strict | content | [ size || layout || style || paint ]'.">
+<meta name="assert" content="contain serializes in canonical order.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("contain", "none");
+test_valid_value("contain", "strict");
+test_valid_value("contain", "content");
+
+// [ size || layout || style || paint ]
+test_valid_value("contain", "size");
+test_valid_value("contain", "layout");
+test_valid_value("contain", "style");
+test_valid_value("contain", "paint");
+test_valid_value("contain", "layout size", "size layout");
+test_valid_value("contain", "paint style", "style paint");
+test_valid_value("contain", "layout style paint");
+test_valid_value("contain", "layout paint style size", "size layout style paint");
+</script>
+</body>
+</html>