Updating href on linearGradient and radialGradient doesn't update its rendering
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 29 Nov 2018 01:29:54 +0000 (01:29 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 29 Nov 2018 01:29:54 +0000 (01:29 +0000)
https://bugs.webkit.org/show_bug.cgi?id=191934

Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2018-11-28
Reviewed by Ryosuke Niwa.

Source/WebCore:

Mark the gradient renderer for repaint when the value of the 'href'
attribute changes.

Tests: fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree.html
       fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree.html
       svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop.html
       svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop.html

* svg/SVGGradientElement.cpp:
(WebCore::SVGGradientElement::svgAttributeChanged):

LayoutTests:

* fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree-expected.html: Added.
* fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree.html: Added.
* fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree-expected.html: Added.
* fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree.html: Added.
* svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop-expected.html: Added.
* svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop.html: Added.
* svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop-expected.html: Added.
* svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree.html [new file with mode: 0644]
LayoutTests/svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop-expected.html [new file with mode: 0644]
LayoutTests/svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop.html [new file with mode: 0644]
LayoutTests/svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop-expected.html [new file with mode: 0644]
LayoutTests/svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/svg/SVGGradientElement.cpp

index 405e3e2..7257553 100644 (file)
@@ -1,3 +1,19 @@
+2018-11-28  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        Updating href on linearGradient and radialGradient doesn't update its rendering
+        https://bugs.webkit.org/show_bug.cgi?id=191934
+
+        Reviewed by Ryosuke Niwa.
+
+        * fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree-expected.html: Added.
+        * fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree.html: Added.
+        * fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree-expected.html: Added.
+        * fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree.html: Added.
+        * svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop-expected.html: Added.
+        * svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop.html: Added.
+        * svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop-expected.html: Added.
+        * svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop.html: Added.
+
 2018-11-28  Truitt Savell  <tsavell@apple.com>
 
         [ Mojave WK1 ] Layout Test fast/images/animated-image-different-dest-size.html fast/images/animated-image-loop-count.html is failing
diff --git a/LayoutTests/fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree-expected.html b/LayoutTests/fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree-expected.html
new file mode 100644 (file)
index 0000000..7d7221a
--- /dev/null
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #host {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+    }
+</style>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div id="host"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree.html b/LayoutTests/fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree.html
new file mode 100644 (file)
index 0000000..c74f768
--- /dev/null
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #host {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div id="host"></div>
+    <svg>
+        <linearGradient id="gradient">
+            <stop offset="0" stop-color="red" />
+        </linearGradient>
+    </svg>
+    <template>
+        <svg viewbox="0 0 100 100">
+            <linearGradient id="gradient">
+                <stop offset="0" stop-color="green" />
+            </linearGradient>
+            <linearGradient id="blue-gradient">
+                <stop offset="0" stop-color="blue" />
+            </linearGradient>
+            <linearGradient id="gradientUse" fill="red" href="#blue-gradient" />
+            <rect id="rect" width="100" height="100" fill="url(#gradientUse)" />
+        </svg>
+    </template>
+    <script>
+        window.onload = () => {
+            if (window.testRunner)
+                testRunner.waitUntilDone();
+
+            const shadowRoot = host.attachShadow({mode: 'closed'});
+            shadowRoot.appendChild(document.querySelector('template').content.cloneNode(true));
+
+            requestAnimationFrame(() => {
+                shadowRoot.querySelector('#gradientUse').setAttribute('href', '#gradient');
+                if (window.testRunner)
+                    testRunner.notifyDone();
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree-expected.html b/LayoutTests/fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree-expected.html
new file mode 100644 (file)
index 0000000..7d7221a
--- /dev/null
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #host {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+    }
+</style>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div id="host"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree.html b/LayoutTests/fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree.html
new file mode 100644 (file)
index 0000000..1e137bd
--- /dev/null
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #host {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div id="host"></div>
+    <svg>
+        <radialGradient id="gradient">
+            <stop offset="0" stop-color="red" />
+        </radialGradient>
+    </svg>
+    <template>
+        <svg viewbox="0 0 100 100">
+            <radialGradient id="gradient">
+                <stop offset="0" stop-color="green" />
+            </radialGradient>
+            <radialGradient id="blue-gradient">
+                <stop offset="0" stop-color="blue" />
+            </radialGradient>
+            <radialGradient id="gradientUse" fill="red" href="#blue-gradient" />
+            <rect id="rect" width="100" height="100" fill="url(#gradientUse)" />
+        </svg>
+    </template>
+    <script>
+        window.onload = () => {
+            if (window.testRunner)
+                testRunner.waitUntilDone();
+
+            const shadowRoot = host.attachShadow({mode: 'closed'});
+            shadowRoot.appendChild(document.querySelector('template').content.cloneNode(true));
+
+            requestAnimationFrame(() => {
+                shadowRoot.querySelector('#gradientUse').setAttribute('href', '#gradient');
+                if (window.testRunner)
+                    testRunner.notifyDone();
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/LayoutTests/svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop-expected.html b/LayoutTests/svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop-expected.html
new file mode 100644 (file)
index 0000000..e70226f
--- /dev/null
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+    }
+</style>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div id="container"></div>
+</body>
+</html>
diff --git a/LayoutTests/svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop.html b/LayoutTests/svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop.html
new file mode 100644 (file)
index 0000000..ca53734
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div id="container">
+        <svg>
+            <linearGradient id="red-gradient">
+                <stop offset="0" stop-color="red"/>
+            </linearGradient>
+            <linearGradient id="green-gradient">
+                <stop offset="0" stop-color="green"/>
+            </linearGradient>
+            <linearGradient id="gradientUse" href="#red-gradient"/>
+            <rect id="rect" width="100" height="100" fill="url(#gradientUse)"/>
+        </svg>
+    </div>
+    <script>
+        window.onload = () => {
+            if (window.testRunner)
+                testRunner.waitUntilDone();
+
+            requestAnimationFrame(() => {
+                gradientUse.setAttribute('href', '#green-gradient');
+                if (window.testRunner)
+                    testRunner.notifyDone();
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/LayoutTests/svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop-expected.html b/LayoutTests/svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop-expected.html
new file mode 100644 (file)
index 0000000..e70226f
--- /dev/null
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        width: 100px;
+        height: 100px;
+        background-color: green;
+    }
+</style>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div id="container"></div>
+</body>
+</html>
diff --git a/LayoutTests/svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop.html b/LayoutTests/svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop.html
new file mode 100644 (file)
index 0000000..c3ab586
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<style>
+    #container {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div id="container">
+        <svg>
+            <radialGradient id="red-gradient">
+                <stop offset="0" stop-color="red"/>
+            </radialGradient>
+            <radialGradient id="green-gradient">
+                <stop offset="0" stop-color="green"/>
+            </radialGradient>
+            <radialGradient id="gradientUse" href="#red-gradient"/>
+            <rect id="rect" width="100" height="100" fill="url(#gradientUse)"/>
+        </svg>
+    </div>
+    <script>
+        window.onload = () => {
+            if (window.testRunner)
+                testRunner.waitUntilDone();
+
+            requestAnimationFrame(() => {
+                gradientUse.setAttribute('href', '#green-gradient');
+                if (window.testRunner)
+                    testRunner.notifyDone();
+            });
+        }
+    </script>
+</body>
+</html>
index 6c7b714..9716a43 100644 (file)
@@ -1,3 +1,22 @@
+2018-11-28  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        Updating href on linearGradient and radialGradient doesn't update its rendering
+        https://bugs.webkit.org/show_bug.cgi?id=191934
+
+        Reviewed by Ryosuke Niwa.
+
+        Mark the gradient renderer for repaint when the value of the 'href'
+        attribute changes.
+
+        Tests: fast/shadow-dom/svg-linear-gradient-dynamic-update-href-in-shadow-tree.html
+               fast/shadow-dom/svg-radial-gradient-dynamic-update-href-in-shadow-tree.html
+               svg/dynamic-updates/SVGLinearGradientElement-svgdom-href-prop.html
+               svg/dynamic-updates/SVGRadialGradientElement-svgdom-href-prop.html
+
+        * svg/SVGGradientElement.cpp:
+        (WebCore::SVGGradientElement::svgAttributeChanged):
+
+
 2018-11-28  Youenn Fablet  <youenn@apple.com>
 
         imported/w3c/web-platform-tests/webrtc/RTCPeerConnection-transceivers.https.html is flaky on iOS simulator
index d5814f2..8c8c2af 100644 (file)
@@ -88,7 +88,7 @@ void SVGGradientElement::parseAttribute(const QualifiedName& name, const AtomicS
 
 void SVGGradientElement::svgAttributeChanged(const QualifiedName& attrName)
 {
-    if (isKnownAttribute(attrName)) {
+    if (isKnownAttribute(attrName) || SVGURIReference::isKnownAttribute(attrName)) {
         InstanceInvalidationGuard guard(*this);
         if (RenderObject* object = renderer())
             object->setNeedsLayout();