From a1d053296d84c556dfdf57503ed38651342a362c Mon Sep 17 00:00:00 2001
From: Boris Chiou <boris.chiou@gmail.com>
Date: Wed, 9 Jun 2021 21:17:21 +0000
Subject: [PATCH] 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                        | 15 ++++++++
 dom/svg/SVGPathElement.cpp                    |  2 ++
 .../path/property/getComputedStyle.svg.ini    |  6 +++-
 .../svg/path/property/serialization.svg.ini   | 14 +++++++-
 .../svg/path/property/getComputedStyle.svg    | 32 ++++++++---------
 .../tests/svg/path/property/serialization.svg | 36 +++++++++----------
 6 files changed, 66 insertions(+), 39 deletions(-)

diff --git a/dom/svg/SVGElement.cpp b/dom/svg/SVGElement.cpp
index 21dd07e2e0fe..cacaea1d0a5a 100644
--- a/dom/svg/SVGElement.cpp
+++ b/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();
diff --git a/dom/svg/SVGPathElement.cpp b/dom/svg/SVGPathElement.cpp
index ec90ffcf4961..a98efacc8f17 100644
--- a/dom/svg/SVGPathElement.cpp
+++ b/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);
 }
 
diff --git a/testing/web-platform/meta/svg/path/property/getComputedStyle.svg.ini b/testing/web-platform/meta/svg/path/property/getComputedStyle.svg.ini
index 4fb758a23501..a42d8a379193 100644
--- a/testing/web-platform/meta/svg/path/property/getComputedStyle.svg.ini
+++ b/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
diff --git a/testing/web-platform/meta/svg/path/property/serialization.svg.ini b/testing/web-platform/meta/svg/path/property/serialization.svg.ini
index 6bfdeeb9885f..138d748a137b 100644
--- a/testing/web-platform/meta/svg/path/property/serialization.svg.ini
+++ b/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
diff --git a/testing/web-platform/tests/svg/path/property/getComputedStyle.svg b/testing/web-platform/tests/svg/path/property/getComputedStyle.svg
index 392c570e3525..400f92ec8417 100644
--- a/testing/web-platform/tests/svg/path/property/getComputedStyle.svg
+++ b/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>
diff --git a/testing/web-platform/tests/svg/path/property/serialization.svg b/testing/web-platform/tests/svg/path/property/serialization.svg
index 297f8ede687a..3199beb92b2e 100644
--- a/testing/web-platform/tests/svg/path/property/serialization.svg
+++ b/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>