SVG: marker shorthand is empty string if longhands do not match

The marker shorthand serializes as 'none | <marker-ref>'
https://svgwg.org/svg2-draft/painting.html#MarkerShorthand

If marker-start, marker-mid and marker-end do not all have
the same value, it serializes as the empty string.

Change-Id: I2c3fbcfd308119a7f258a7f269f93f092fabbfaa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1724707
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Auto-Submit: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#683433}

third_party/blink/renderer/core/css/css_properties.json5

@@ -4970,7 +4970,8 @@
     {
       name: "marker",
       longhands: ["marker-start", "marker-mid", "marker-end"],
-      property_methods: ["ParseShorthand"],
+      property_methods: ["ParseShorthand", "CSSValueFromComputedStyleInternal"],
+      svg: true,
     },
     {
       name: "offset",

third_party/blink/renderer/core/css/properties/shorthands/shorthands_custom.cc

@@ -2110,6 +2110,22 @@ bool Marker::ParseShorthand(
   return true;
 }
 
+const CSSValue* Marker::CSSValueFromComputedStyleInternal(
+    const ComputedStyle& style,
+    const SVGComputedStyle& svg_style,
+    const LayoutObject* layout_object,
+    bool allow_visited_style) const {
+  const CSSValue* marker_start =
+      ComputedStyleUtils::ValueForSVGResource(svg_style.MarkerStartResource());
+  if (*marker_start == *ComputedStyleUtils::ValueForSVGResource(
+                           svg_style.MarkerMidResource()) &&
+      *marker_start == *ComputedStyleUtils::ValueForSVGResource(
+                           svg_style.MarkerEndResource())) {
+    return marker_start;
+  }
+  return nullptr;
+}
+
 bool Offset::ParseShorthand(
     bool important,
     CSSParserTokenRange& range,

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

@@ -548,9 +548,15 @@ String StylePropertySerializer::SerializeShorthand(
     case CSSPropertyID::kWebkitTextStroke:
       return GetShorthandValue(webkitTextStrokeShorthand());
     case CSSPropertyID::kMarker: {
-      if (const CSSValue* value =
-              property_set_.GetPropertyCSSValue(GetCSSPropertyMarkerStart()))
-        return value->CssText();
+      if (const CSSValue* start =
+              property_set_.GetPropertyCSSValue(GetCSSPropertyMarkerStart())) {
+        const CSSValue* mid =
+            property_set_.GetPropertyCSSValue(GetCSSPropertyMarkerMid());
+        const CSSValue* end =
+            property_set_.GetPropertyCSSValue(GetCSSPropertyMarkerEnd());
+        if (mid && end && *start == *mid && *start == *end)
+          return start->CssText();
+      }
       return String();
     }
     case CSSPropertyID::kBorderRadius:

third_party/blink/web_tests/external/wpt/svg/painting/parsing/marker-computed.svg

+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: getComputedStyle().marker</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty"/>
+    <h:meta name="assert" content="marker computed value is as specified, with url values absolute."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("marker", "none");
+test_computed_value("marker", 'url("https://example.com/")');
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style['marker'] = 'url("a.b#c")';
+  const result = getComputedStyle(target)['marker'];
+  const resolved = new URL("a.b#c", document.URL).href;
+  assert_equals(result, 'url("' + resolved + '")');
+}, 'url values are made absolute');
+
+  ]]></script>
+</svg>

third_party/blink/web_tests/external/wpt/svg/painting/parsing/marker-invalid.svg

+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty"/>
+    <h:meta name="assert" content="marker supports only the paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("marker", "auto");
+test_invalid_value("marker", 'none url("https://example.com/")');
+
+  ]]></script>
+</svg>

third_party/blink/web_tests/external/wpt/svg/painting/parsing/marker-valid.svg

+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Painting: parsing marker with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#MarkerProperty"/>
+    <h:meta name="assert" content="marker supports the full paint grammar 'none | marker-ref'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("marker", "none");
+
+test_valid_value("marker", 'url("https://example.com/")');
+
+  ]]></script>
+</svg>

third_party/blink/web_tests/svg/css/marker-shorthand.html

+<!DOCTYPE html>
+<title>Marker shorthand can be empty string</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<body>
+  <svg id="container">
+    <g id="target"></g>
+  </svg>
+<script>
+'use strict';
+const target = document.getElementById('target');
+const resource = 'url("https://example.com/")';
+const resource2 = 'url("https://example.com/2")';
+test(() => {
+  target.style.marker = resource;
+  assert_equals(target.style.markerStart, resource);
+  assert_equals(target.style.markerMid, resource);
+  assert_equals(target.style.markerEnd, resource);
+  assert_equals(target.style.marker, resource);
+  assert_equals(getComputedStyle(target).marker, resource);
+
+  target.style.markerStart = resource2;
+  assert_equals(target.style.marker, '');
+  assert_equals(getComputedStyle(target).marker, '');
+  target.style.markerMid = 'none';
+  assert_equals(target.style.marker, '');
+  assert_equals(getComputedStyle(target).marker, '');
+  target.style.markerEnd = 'none';
+  assert_equals(target.style.marker, '');
+  assert_equals(getComputedStyle(target).marker, '');
+
+  target.style.markerStart = 'none';
+  assert_equals(target.style.marker, 'none');
+  assert_equals(getComputedStyle(target).marker, 'none');
+}, 'marker is empty string when marker longhands do not match');
+</script>
+</body>