Bug 1340422 - Part 2: Map SVG d attribute to CSS. r=emilio

We parse the attribute and store it into CSS. We have tests already in
wpt, svg/path/property/*, but we cannot pass them for now because we
don't convert the relative commands into absolute commands. Those will
be fixed in Bug 1489392 once the spec issue is resolved.

Differential Revision: https://phabricator.services.mozilla.com/D81238

dom/svg/SVGElement.cpp

@@ -1278,6 +1278,21 @@ void SVGElement::UpdateContentDeclarationBlock() {
 
     nsAutoString value;
     mAttrs.AttrAt(i)->ToString(value);
+
+    // FIXME: Now we still have to parse twice for d property because we are
+    // using the different data structure in SVG and CSS. This will be fixed in
+    // the patch series.
+    if (attrName->Equals(nsGkAtoms::d, kNameSpaceID_None)) {
+      // The value of d attribute is a raw svg path string. We convert it as a
+      // path() to align the syntax in CSS parser. We will drop this in the
+      // later patch.
+      nsAutoString path;
+      path.AppendLiteral("path(\"");
+      path.Append(value);
+      path.AppendLiteral("\")");
+      value = path;
+    }
+
     mappedAttrParser.ParseMappedAttrValue(attrName->Atom(), value);
   }
   mContentDeclarationBlock = mappedAttrParser.GetDeclarationBlock();

dom/svg/SVGPathElement.cpp

@@ -230,6 +230,8 @@ SVGPathElement::IsAttributeMapped(const nsAtom* name) const {
   static const MappedAttributeEntry* const map[] = {sMarkersMap};
 
   return FindAttributeDependence(name, map) ||
+         (StaticPrefs::layout_css_d_property_enabled() &&
+          name == nsGkAtoms::d) ||
          SVGPathElementBase::IsAttributeMapped(name);
 }
 

testing/web-platform/meta/svg/path/property/getComputedStyle.svg.ini

@@ -1,4 +1,8 @@
 [getComputedStyle.svg]
-  [getComputedStyle]
+  [d property of g5 should be path("M 10 5 H 50").]
     expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1489392
 
+  [d property of p6 should be path("M 10 5 H 50").]
+    expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1489392

testing/web-platform/meta/svg/path/property/serialization.svg.ini

@@ -1,4 +1,16 @@
 [serialization.svg]
-  [serialization]
+  [Property d value 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")']
     expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1489392
 
+  [Property d value 'path("m 10 20   l 20 30   Z   l 50 60   Z   m 70 80   l 90 60   Z   t 70 120")']
+    expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1489392
+
+  [Property d value 'path("m 10.0 170.0 h 90.00 v 30.00 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")']
+    expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1489392
+
+  [Property d value '  path(  "m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50"  )']
+    expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1489392

testing/web-platform/tests/svg/path/property/getComputedStyle.svg

@@ -29,24 +29,20 @@
   <h:script src="/resources/testharness.js"/>
   <h:script src="/resources/testharnessreport.js"/>
   <script><![CDATA[
-  test(function() {
-    var g0 = document.getElementById('g0');
-    var p1 = document.getElementById('p1');
-    var p2 = document.getElementById('p2');
-    var p3 = document.getElementById('p3');
-    var p4 = document.getElementById('p4');
-    var g5 = document.getElementById('g5');
-    var p6 = document.getElementById('p6');
-    var p7 = document.getElementById('p7');
+  function test_computed_value_of_d(id, expected) {
+    test(function() {
+      let target = document.getElementById(id);
+      assert_equals(getComputedStyle(target).d, expected);
+    }, `d property of ${id} should be ${expected}.`);
+  }
 
-    assert_equals(getComputedStyle(g0).d, 'none');
-    assert_equals(getComputedStyle(p1).d, 'none');
-    assert_equals(getComputedStyle(p2).d, 'path("M 10 2 H 20")');
-    assert_equals(getComputedStyle(p3).d, 'path("M 10 3 H 30")');
-    assert_equals(getComputedStyle(p4).d, 'path("M 10 4 H 40")');
-    assert_equals(getComputedStyle(g5).d, 'path("M 10 5 H 50")');
-    assert_equals(getComputedStyle(p6).d, 'path("M 10 5 H 50")');
-    assert_equals(getComputedStyle(p7).d, 'none');
-  });
+  test_computed_value_of_d('g0', 'none');
+  test_computed_value_of_d('p1', 'none');
+  test_computed_value_of_d('p2', 'path("M 10 2 H 20")');
+  test_computed_value_of_d('p3', 'path("M 10 3 H 30")');
+  test_computed_value_of_d('p4', 'path("M 10 4 H 40")');
+  test_computed_value_of_d('g5', 'path("M 10 5 H 50")');
+  test_computed_value_of_d('p6', 'path("M 10 5 H 50")');
+  test_computed_value_of_d('p7', 'none');
   ]]></script>
 </svg>

testing/web-platform/tests/svg/path/property/serialization.svg

@@ -8,29 +8,27 @@
   <path id="target"></path>
   <h:script src="/resources/testharness.js"/>
   <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
   <script><![CDATA[
-  test(function() {
-    var target = document.getElementById('target');
+  let test1 = 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")';
+  test_valid_value('d', test1);
+  test_computed_value('d', test1, 'path("M 10 20 Q 40 80 50 70 Q 150 140 140 150")');
 
-    target.style.d = 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")';
-    assert_equals(target.style.d, 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")');
-    assert_equals(getComputedStyle(target).d, 'path("M 10 20 Q 40 80 50 70 Q 150 140 140 150")');
+  let test2 = 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")';
+  test_valid_value('d', test2);
+  test_computed_value('d', test2);
 
-    target.style.d = "path('M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z')";
-    assert_equals(target.style.d, 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")');
-    assert_equals(getComputedStyle(target).d, 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 260 220 Z")');
+  let test3 = 'path("m 10 20   l 20 30   Z   l 50 60   Z   m 70 80   l 90 60   Z   t 70 120")';
+  test_valid_value('d', test3, 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")');
+  test_computed_value('d', test3, 'path("M 10 20 L 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220")');
 
-    target.style.d = 'path("m 10 20   l 20 30   Z   l 50 60   Z   m 70 80   l 90 60   Z   t 70 120")';
-    assert_equals(target.style.d, 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")');
-    assert_equals(getComputedStyle(target).d, 'path("M 10 20 L 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220")');
+  let test4 = 'path("m 10.0 170.0 h 90.00 v 30.00 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")';
+  test_valid_value('d', test4, 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")');
+  test_computed_value('d', test4, 'path("M 10 170 H 100 V 200 M 100 200 S 101 202 103 204 Z C 109 208 107 206 105 204")');
 
-    target.style.d = 'path("m 10.0 170.0 h 90.00 v 30.00 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")';
-    assert_equals(target.style.d, 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 Z c 9 8 7 6 5 4")');
-    assert_equals(getComputedStyle(target).d, 'path("M 10 170 H 100 V 200 M 100 200 S 101 202 103 204 Z C 109 208 107 206 105 204")');
-
-    target.style.d = '  path(  "m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50"  )  ';
-    assert_equals(target.style.d, 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")');
-    assert_equals(getComputedStyle(target).d, 'path("M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120")');
-  });
+  let test5 = '  path(  "m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50"  )';
+  test_valid_value('d', test5, 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")');
+  test_computed_value('d', test5, 'path("M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120")');
   ]]></script>
 </svg>