Update gradient color stop serialization to match CSS Images4

https://github.com/w3c/csswg-drafts/issues/2714 clarified that
serialization should always use the expanded form.

Bug: 850537
Change-Id: I77e60df149fb490b0c2c1db78f020a7246ea7b5c
Reviewed-on: https://chromium-review.googlesource.com/1090820Reviewed-by: Fredrik Söderquist <fs@opera.com>
Commit-Queue: Florin Malita <fmalita@chromium.org>
Cr-Commit-Position: refs/heads/master@{#565358}

third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-parsing.html

@@ -52,14 +52,14 @@
     { style: "conic-gradient(black 10%, white 50%)"   , computed: "conic-gradient(black 10%, white 50%)" },
     { style: "conic-gradient(black 10%, white 180deg)", computed: "conic-gradient(black 10%, white 180deg)" },
 
-    { style: "conic-gradient(black 10% 20%, white)"                          , computed: "conic-gradient(black 10% 20%, white)" },
-    { style: "conic-gradient(black, white 270deg 360deg)"                    , computed: "conic-gradient(black, white 270deg 360deg)" },
-    { style: "conic-gradient(black 10% 20%, white 270deg 360deg)"            , computed: "conic-gradient(black 10% 20%, white 270deg 360deg)" },
-    { style: "conic-gradient(blue 10%, blue 20%, white)"                     , computed: "conic-gradient(blue 10% 20%, white)" },
-    { style: "conic-gradient(blue 10%, blue 20%, blue 30%, white)"           , computed: "conic-gradient(blue 10% 20%, blue 30%, white)" },
-    { style: "conic-gradient(blue 10%, blue 20%, blue 30%, blue 40%, white)" , computed: "conic-gradient(blue 10% 20%, blue 30% 40%, white)" },
-    { style: "conic-gradient(blue 10%, blue 20%, white 270deg, white 360deg)", computed: "conic-gradient(blue 10% 20%, white 270deg 360deg)" },
-    { style: "conic-gradient(blue 10%, blue 20% 30%, white)"                 , computed: "conic-gradient(blue 10% 20%, blue 30%, white)" },
+    { style: "conic-gradient(black 10% 20%, white)"                          , computed: "conic-gradient(black 10%, black 20%, white)" },
+    { style: "conic-gradient(black, white 270deg 360deg)"                    , computed: "conic-gradient(black, white 270deg, white 360deg)" },
+    { style: "conic-gradient(black 10% 20%, white 270deg 360deg)"            , computed: "conic-gradient(black 10%, black 20%, white 270deg, white 360deg)" },
+    { style: "conic-gradient(blue 10%, blue 20%, white)"                     , computed: "conic-gradient(blue 10%, blue 20%, white)" },
+    { style: "conic-gradient(blue 10%, blue 20%, blue 30%, white)"           , computed: "conic-gradient(blue 10%, blue 20%, blue 30%, white)" },
+    { style: "conic-gradient(blue 10%, blue 20%, blue 30%, blue 40%, white)" , computed: "conic-gradient(blue 10%, blue 20%, blue 30%, blue 40%, white)" },
+    { style: "conic-gradient(blue 10%, blue 20%, white 270deg, white 360deg)", computed: "conic-gradient(blue 10%, blue 20%, white 270deg, white 360deg)" },
+    { style: "conic-gradient(blue 10%, blue 20% 30%, white)"                 , computed: "conic-gradient(blue 10%, blue 20%, blue 30%, white)" },
     { style: "conic-gradient(blue, blue, blue, white)"                       , computed: "conic-gradient(blue, blue, blue, white)" },
 
     { style: "conic-gradient(at top left, black, white)"     , computed: "conic-gradient(at left top, black, white)" },

third_party/WebKit/LayoutTests/fast/gradients/unprefixed-gradient-parsing-expected.txt

@@ -35,10 +35,10 @@ PASS testGradient("background-image: linear-gradient(10deg, black 0%, 50%, green
 PASS testGradient("background-image: linear-gradient(black, 10% 20%, white)") is "none"
 PASS testGradient("background-image: linear-gradient(black 10% 20% 30%, white)") is "none"
 PASS testGradient("background-image: linear-gradient(black 10% 20%, white 100px 200px 300px)") is "none"
-PASS testGradient("background-image: linear-gradient(black 10% 20%, white)") is "linear-gradient(black 10% 20%, white)"
-PASS testGradient("background-image: linear-gradient(black, white 100px 200px)") is "linear-gradient(black, white 100px 200px)"
-PASS testGradient("background-image: linear-gradient(black 10% 20%, white 100px 200px)") is "linear-gradient(black 10% 20%, white 100px 200px)"
-PASS testGradient("background-image: linear-gradient(black 10% 20%, 50%, white 100px 200px)") is "linear-gradient(black 10% 20%, 50%, white 100px 200px)"
+PASS testGradient("background-image: linear-gradient(black 10% 20%, white)") is "linear-gradient(black 10%, black 20%, white)"
+PASS testGradient("background-image: linear-gradient(black, white 100px 200px)") is "linear-gradient(black, white 100px, white 200px)"
+PASS testGradient("background-image: linear-gradient(black 10% 20%, white 100px 200px)") is "linear-gradient(black 10%, black 20%, white 100px, white 200px)"
+PASS testGradient("background-image: linear-gradient(black 10% 20%, 50%, white 100px 200px)") is "linear-gradient(black 10%, black 20%, 50%, white 100px, white 200px)"
 repeating-linear-gradient
 
 
@@ -83,10 +83,10 @@ PASS testGradient("background-image: radial-gradient(10px 10px at center, white,
 PASS testGradient("background-image: radial-gradient(black, 10% 20%, white)") is "none"
 PASS testGradient("background-image: radial-gradient(black 10% 20% 30%, white)") is "none"
 PASS testGradient("background-image: radial-gradient(black 10% 20%, white 100px 200px 300px)") is "none"
-PASS testGradient("background-image: radial-gradient(black 10% 20%, white)") is "radial-gradient(black 10% 20%, white)"
-PASS testGradient("background-image: radial-gradient(black, white 100px 200px)") is "radial-gradient(black, white 100px 200px)"
-PASS testGradient("background-image: radial-gradient(black 10% 20%, white 100px 200px)") is "radial-gradient(black 10% 20%, white 100px 200px)"
-PASS testGradient("background-image: radial-gradient(black 10% 20%, 50%, white 100px 200px)") is "radial-gradient(black 10% 20%, 50%, white 100px 200px)"
+PASS testGradient("background-image: radial-gradient(black 10% 20%, white)") is "radial-gradient(black 10%, black 20%, white)"
+PASS testGradient("background-image: radial-gradient(black, white 100px 200px)") is "radial-gradient(black, white 100px, white 200px)"
+PASS testGradient("background-image: radial-gradient(black 10% 20%, white 100px 200px)") is "radial-gradient(black 10%, black 20%, white 100px, white 200px)"
+PASS testGradient("background-image: radial-gradient(black 10% 20%, 50%, white 100px 200px)") is "radial-gradient(black 10%, black 20%, 50%, white 100px, white 200px)"
 repeating-radial-gradient
 
 

third_party/WebKit/LayoutTests/fast/gradients/unprefixed-gradient-parsing.html

@@ -56,10 +56,10 @@ shouldBe('testGradient("background-image: linear-gradient(10deg, black 0%, 50%,
 shouldBe('testGradient("background-image: linear-gradient(black, 10% 20%, white)")', '"none"');
 shouldBe('testGradient("background-image: linear-gradient(black 10% 20% 30%, white)")', '"none"');
 shouldBe('testGradient("background-image: linear-gradient(black 10% 20%, white 100px 200px 300px)")', '"none"');
-shouldBe('testGradient("background-image: linear-gradient(black 10% 20%, white)")', '"linear-gradient(black 10% 20%, white)"');
-shouldBe('testGradient("background-image: linear-gradient(black, white 100px 200px)")', '"linear-gradient(black, white 100px 200px)"');
-shouldBe('testGradient("background-image: linear-gradient(black 10% 20%, white 100px 200px)")', '"linear-gradient(black 10% 20%, white 100px 200px)"');
-shouldBe('testGradient("background-image: linear-gradient(black 10% 20%, 50%, white 100px 200px)")', '"linear-gradient(black 10% 20%, 50%, white 100px 200px)"');
+shouldBe('testGradient("background-image: linear-gradient(black 10% 20%, white)")', '"linear-gradient(black 10%, black 20%, white)"');
+shouldBe('testGradient("background-image: linear-gradient(black, white 100px 200px)")', '"linear-gradient(black, white 100px, white 200px)"');
+shouldBe('testGradient("background-image: linear-gradient(black 10% 20%, white 100px 200px)")', '"linear-gradient(black 10%, black 20%, white 100px, white 200px)"');
+shouldBe('testGradient("background-image: linear-gradient(black 10% 20%, 50%, white 100px 200px)")', '"linear-gradient(black 10%, black 20%, 50%, white 100px, white 200px)"');
 
 debug('<p>repeating-linear-gradient</p>');
 shouldBe('testGradient("background-image: repeating-linear-gradient(black, white)")', '"repeating-linear-gradient(black, white)"');
@@ -104,10 +104,10 @@ shouldBe('testGradient("background-image: radial-gradient(10px 10px at center, w
 shouldBe('testGradient("background-image: radial-gradient(black, 10% 20%, white)")', '"none"');
 shouldBe('testGradient("background-image: radial-gradient(black 10% 20% 30%, white)")', '"none"');
 shouldBe('testGradient("background-image: radial-gradient(black 10% 20%, white 100px 200px 300px)")', '"none"');
-shouldBe('testGradient("background-image: radial-gradient(black 10% 20%, white)")', '"radial-gradient(black 10% 20%, white)"');
-shouldBe('testGradient("background-image: radial-gradient(black, white 100px 200px)")', '"radial-gradient(black, white 100px 200px)"');
-shouldBe('testGradient("background-image: radial-gradient(black 10% 20%, white 100px 200px)")', '"radial-gradient(black 10% 20%, white 100px 200px)"');
-shouldBe('testGradient("background-image: radial-gradient(black 10% 20%, 50%, white 100px 200px)")', '"radial-gradient(black 10% 20%, 50%, white 100px 200px)"');
+shouldBe('testGradient("background-image: radial-gradient(black 10% 20%, white)")', '"radial-gradient(black 10%, black 20%, white)"');
+shouldBe('testGradient("background-image: radial-gradient(black, white 100px 200px)")', '"radial-gradient(black, white 100px, white 200px)"');
+shouldBe('testGradient("background-image: radial-gradient(black 10% 20%, white 100px 200px)")', '"radial-gradient(black 10%, black 20%, white 100px, white 200px)"');
+shouldBe('testGradient("background-image: radial-gradient(black 10% 20%, 50%, white 100px 200px)")', '"radial-gradient(black 10%, black 20%, 50%, white 100px, white 200px)"');
 
 debug('<p>repeating-radial-gradient</p>');
 shouldBe('testGradient("background-image: repeating-radial-gradient(white, black)")', '"repeating-radial-gradient(white, black)"');

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

@@ -995,31 +995,19 @@ void CSSLinearGradientValue::TraceAfterDispatch(blink::Visitor* visitor) {
 void CSSGradientValue::AppendCSSTextForColorStops(
     StringBuilder& result,
     bool requires_separator) const {
-  const CSSValue* prev_color = nullptr;
-
   for (const auto& stop : stops_) {
-    bool is_color_repeat = false;
-    if (RuntimeEnabledFeatures::MultipleColorStopPositionsEnabled()) {
-      is_color_repeat = stop.color_ && stop.offset_ &&
-                        DataEquivalent(stop.color_.Get(), prev_color);
-    }
-
     if (requires_separator) {
-      if (!is_color_repeat)
-        result.Append(", ");
+      result.Append(", ");
     } else {
       requires_separator = true;
     }
 
-    if (stop.color_ && !is_color_repeat)
+    if (stop.color_)
       result.Append(stop.color_->CssText());
     if (stop.color_ && stop.offset_)
       result.Append(' ');
     if (stop.offset_)
       result.Append(stop.offset_->CssText());
-
-    // Reset prevColor if we've emitted a color repeat.
-    prev_color = is_color_repeat ? nullptr : stop.color_.Get();
   }
 }