Prefer null namespace 'href' over 'xlink:href' on SVG elements
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 6 Sep 2019 21:57:31 +0000 (21:57 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 6 Sep 2019 21:57:31 +0000 (21:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=195802

Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2019-09-06
Reviewed by Youenn Fablet.

Source/WebCore:

-- When the attribute "href" is set, its value is always reflected in
   SVGURIReference::m_href.

-- When the attribute "href" is removed, the value of the attribute
   "xlink:href" is always reflected in SVGURIReference::m_href.

-- When the "xlink:href" is set, its value is reflected in
   SVGURIReference::m_href only if the attribute "href" is not set.

Tests: svg/custom/href-xlink-href-gradient-element-expected.svg
       svg/custom/href-xlink-href-gradient-element.svg
       svg/custom/href-xlink-href-use-element-expected.svg
       svg/custom/href-xlink-href-use-element.svg

* svg/SVGURIReference.cpp:
(WebCore::SVGURIReference::parseAttribute):

LayoutTests:

* svg/custom/href-xlink-href-gradient-element-expected.svg: Added.
* svg/custom/href-xlink-href-gradient-element.svg: Added.
* svg/custom/href-xlink-href-use-element-expected.svg: Added.
* svg/custom/href-xlink-href-use-element.svg: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@249593 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/svg/custom/href-xlink-href-gradient-element-expected.svg [new file with mode: 0644]
LayoutTests/svg/custom/href-xlink-href-gradient-element.svg [new file with mode: 0644]
LayoutTests/svg/custom/href-xlink-href-use-element-expected.svg [new file with mode: 0644]
LayoutTests/svg/custom/href-xlink-href-use-element.svg [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/svg/SVGURIReference.cpp

index 4a8c48a..aeec6e7 100644 (file)
@@ -1,3 +1,15 @@
+2019-09-06  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        Prefer null namespace 'href' over 'xlink:href' on SVG elements
+        https://bugs.webkit.org/show_bug.cgi?id=195802
+
+        Reviewed by Youenn Fablet.
+
+        * svg/custom/href-xlink-href-gradient-element-expected.svg: Added.
+        * svg/custom/href-xlink-href-gradient-element.svg: Added.
+        * svg/custom/href-xlink-href-use-element-expected.svg: Added.
+        * svg/custom/href-xlink-href-use-element.svg: Added.
+
 2019-09-05  Joseph Pecoraro  <pecoraro@apple.com>
 
         Tail Deleted Frames shown in Web Inspector are sometimes incorrect (Shadow Chicken)
diff --git a/LayoutTests/svg/custom/href-xlink-href-gradient-element-expected.svg b/LayoutTests/svg/custom/href-xlink-href-gradient-element-expected.svg
new file mode 100644 (file)
index 0000000..f27d398
--- /dev/null
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <rect id="green-rect" width="100" height="100" fill="green"/>
+    </defs>
+    <use transform="translate(10, 10)" href="#green-rect"/>
+    <use transform="translate(120, 10)" href="#green-rect"/>
+    <use transform="translate(230, 10)" href="#green-rect"/>
+    <use transform="translate(340, 10)" href="#green-rect"/>
+
+    <use transform="translate(120, 120)" href="#green-rect"/>
+    <use transform="translate(10, 120)" href="#green-rect"/>
+    <use transform="translate(230, 120)" href="#green-rect"/>
+    <use transform="translate(340, 120)" href="#green-rect"/>
+
+    <use transform="translate(10, 230)" href="#green-rect"/>
+    <use transform="translate(120, 230)" href="#green-rect"/>
+    <use transform="translate(230, 230)" href="#green-rect"/>
+    <use transform="translate(340, 230)" href="#green-rect"/>
+</svg>
diff --git a/LayoutTests/svg/custom/href-xlink-href-gradient-element.svg b/LayoutTests/svg/custom/href-xlink-href-gradient-element.svg
new file mode 100644 (file)
index 0000000..65a3633
--- /dev/null
@@ -0,0 +1,70 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient id="red-gradient">
+            <stop offset="0%"  stop-color="red" />
+        </linearGradient>
+        <linearGradient id="green-gradient">
+            <stop offset="0%"  stop-color="green" />
+        </linearGradient>
+        <linearGradient id="gradient1" href="#green-gradient"/>
+        <linearGradient id="gradient2" xlink:href="#green-gradient"/>
+        <linearGradient id="gradient3" href="#green-gradient" xlink:href="#red-gradient"/>
+        <linearGradient id="gradient4" xlink:href="#red-gradient" href="#green-gradient"/>
+
+        <linearGradient id="gradient5" href="#green-gradient"/>
+        <linearGradient id="gradient6" xlink:href="#red-gradient"/>
+        <linearGradient id="gradient7" href="#green-gradient" xlink:href="#red-gradient"/>
+        <linearGradient id="gradient8" xlink:href="#green-gradient" href="#red-gradient"/>
+
+        <linearGradient id="gradient9" href=""/>
+        <linearGradient id="gradient10" xlink:href="#red-gradient"/>
+        <linearGradient id="gradient11" href="" xlink:href="#red-gradient"/>
+        <linearGradient id="gradient12" xlink:href="#red-gradient" href=""/>
+    </defs>
+    <rect width="100" height="100" transform="translate(10, 10)" fill="url(#gradient1)"/>
+    <rect width="100" height="100" transform="translate(120, 10)" fill="url(#gradient2)"/>
+    <rect width="100" height="100" transform="translate(230, 10)" fill="url(#gradient3)"/>
+    <rect width="100" height="100" transform="translate(340, 10)" fill="url(#gradient4)"/>
+
+    <rect width="100" height="100" transform="translate(10, 120)" fill="url(#gradient5)"/>
+    <rect width="100" height="100" transform="translate(120, 120)" fill="url(#gradient6)"/>
+    <rect width="100" height="100" transform="translate(230, 120)" fill="url(#gradient7)"/>
+    <rect width="100" height="100" transform="translate(340, 120)" fill="url(#gradient8)"/>
+
+    <rect width="100" height="100" transform="translate(10, 230)" fill="green"/>
+    <rect width="100" height="100" transform="translate(120, 230)" fill="green"/>
+    <rect width="100" height="100" transform="translate(230, 230)" fill="green"/>
+    <rect width="100" height="100" transform="translate(340, 230)" fill="green"/>
+
+    <rect width="100" height="100" transform="translate(10, 230)" fill="url(#gradient9)"/>
+    <rect width="100" height="100" transform="translate(120, 230)" fill="url(#gradient10)"/>
+    <rect width="100" height="100" transform="translate(230, 230)" fill="url(#gradient11)"/>
+    <rect width="100" height="100" transform="translate(340, 230)" fill="url(#gradient12)"/>
+    <script>
+        window.addEventListener('load', (event) => {
+            var gradient5 = document.getElementById("gradient5");
+            gradient5.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#red-gradient");
+
+            var gradient6 = document.getElementById("gradient6");
+            gradient6.setAttribute("href", "#green-gradient");
+
+            var gradient7 = document.getElementById("gradient7");
+            gradient7.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+
+            var gradient8 = document.getElementById("gradient8");
+            gradient8.removeAttribute("href");
+
+            var gradient9 = document.getElementById("gradient9");
+            gradient9.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#red-gradient");
+
+            var gradient10 = document.getElementById("gradient10");
+            gradient10.setAttribute("href", "");
+
+            var gradient11 = document.getElementById("gradient11");
+            gradient11.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+
+            var gradient12 = document.getElementById("gradient12");
+            gradient12.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+        });
+    </script>
+ </svg>
diff --git a/LayoutTests/svg/custom/href-xlink-href-use-element-expected.svg b/LayoutTests/svg/custom/href-xlink-href-use-element-expected.svg
new file mode 100644 (file)
index 0000000..f27d398
--- /dev/null
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <rect id="green-rect" width="100" height="100" fill="green"/>
+    </defs>
+    <use transform="translate(10, 10)" href="#green-rect"/>
+    <use transform="translate(120, 10)" href="#green-rect"/>
+    <use transform="translate(230, 10)" href="#green-rect"/>
+    <use transform="translate(340, 10)" href="#green-rect"/>
+
+    <use transform="translate(120, 120)" href="#green-rect"/>
+    <use transform="translate(10, 120)" href="#green-rect"/>
+    <use transform="translate(230, 120)" href="#green-rect"/>
+    <use transform="translate(340, 120)" href="#green-rect"/>
+
+    <use transform="translate(10, 230)" href="#green-rect"/>
+    <use transform="translate(120, 230)" href="#green-rect"/>
+    <use transform="translate(230, 230)" href="#green-rect"/>
+    <use transform="translate(340, 230)" href="#green-rect"/>
+</svg>
diff --git a/LayoutTests/svg/custom/href-xlink-href-use-element.svg b/LayoutTests/svg/custom/href-xlink-href-use-element.svg
new file mode 100644 (file)
index 0000000..14ceb34
--- /dev/null
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <rect id="red-rect"  width="100" height="100" fill="red"/>
+        <rect id="green-rect" width="100" height="100" fill="green"/>
+    </defs>
+    <use id="use1" transform="translate(10, 10)" href="#green-rect"/>
+    <use id="use2" transform="translate(120, 10)" xlink:href="#green-rect"/>
+    <use id="use3" transform="translate(230, 10)" href="#green-rect" xlink:href="#red-rect"/>
+    <use id="use4" transform="translate(340, 10)" xlink:href="#red-rect" href="#green-rect"/>
+
+    <use id="use5" transform="translate(120, 120)" href="#green-rect"/>
+    <use id="use6" transform="translate(10, 120)" xlink:href="#red-rect"/>
+    <use id="use7" transform="translate(230, 120)" href="#green-rect" xlink:href="#red-rect"/>
+    <use id="use8" transform="translate(340, 120)" xlink:href="#green-rect" href="#red-rect"/>
+
+    <use transform="translate(10, 230)" href="#green-rect"/>
+    <use transform="translate(120, 230)" href="#green-rect"/>
+    <use transform="translate(230, 230)" href="#green-rect"/>
+    <use transform="translate(340, 230)" href="#green-rect"/>
+
+    <use id="use9" transform="translate(10, 230)" href=""/>
+    <use id="use10" transform="translate(120, 230)" xlink:href="#red-rect"/>
+    <use id="use11" transform="translate(230, 230)" href="" xlink:href="#red-rect"/>
+    <use id="use12" transform="translate(340, 230)" xlink:href="#red-rect" href=""/>
+    <script>
+        window.addEventListener('load', (event) => {
+            var use5 = document.getElementById("use5");
+            use5.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#red-rect");
+
+            var use6 = document.getElementById("use6");
+            use6.setAttribute("href", "#green-rect");
+
+            var use7 = document.getElementById("use7");
+            use7.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+
+            var use8 = document.getElementById("use8");
+            use8.removeAttribute("href");
+
+            var use9 = document.getElementById("use9");
+            use9.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#red-rect");
+
+            var use10 = document.getElementById("use10");
+            use10.setAttribute("href", "");
+
+            var use11 = document.getElementById("use11");
+            use11.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+
+            var use12 = document.getElementById("use12");
+            use12.removeAttributeNS("http://www.w3.org/1999/xlink", "href");
+        });
+    </script>
+</svg>
index a5b9b0f..85ce0a6 100644 (file)
@@ -1,3 +1,27 @@
+2019-09-06  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        Prefer null namespace 'href' over 'xlink:href' on SVG elements
+        https://bugs.webkit.org/show_bug.cgi?id=195802
+
+        Reviewed by Youenn Fablet.
+
+        -- When the attribute "href" is set, its value is always reflected in
+           SVGURIReference::m_href.
+
+        -- When the attribute "href" is removed, the value of the attribute
+           "xlink:href" is always reflected in SVGURIReference::m_href.
+
+        -- When the "xlink:href" is set, its value is reflected in
+           SVGURIReference::m_href only if the attribute "href" is not set.
+
+        Tests: svg/custom/href-xlink-href-gradient-element-expected.svg
+               svg/custom/href-xlink-href-gradient-element.svg
+               svg/custom/href-xlink-href-use-element-expected.svg
+               svg/custom/href-xlink-href-use-element.svg
+
+        * svg/SVGURIReference.cpp:
+        (WebCore::SVGURIReference::parseAttribute):
+
 2019-09-06  Zalan Bujtas  <zalan@apple.com>
 
         [LFC][TFC] Set computed row width.
index 86af4a2..8774a33 100644 (file)
@@ -47,7 +47,10 @@ bool SVGURIReference::isKnownAttribute(const QualifiedName& attributeName)
 
 void SVGURIReference::parseAttribute(const QualifiedName& name, const AtomString& value)
 {
-    if (isKnownAttribute(name))
+    auto* contextElement = m_href->contextElement();
+    if (name.matches(SVGNames::hrefAttr))
+        m_href->setBaseValInternal(value.isNull() ? contextElement->getAttribute(XLinkNames::hrefAttr) : value);
+    else if (name.matches(XLinkNames::hrefAttr) && !contextElement->hasAttribute(SVGNames::hrefAttr))
         m_href->setBaseValInternal(value);
 }