SVG Animation (SMIL) on <text> or <tspan> doesn't work on second run
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 3 Apr 2019 00:26:04 +0000 (00:26 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 3 Apr 2019 00:26:04 +0000 (00:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=150388

Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2019-04-02
Reviewed by Simon Fraser.

The bug is fixed by removing the SVG tear off objects. See
https://bugs.webkit.org/show_bug.cgi?id=191237.

We need to add a layout test to ensure that no code change will break
this scenario in the future.

* svg/animations/smil-multiple-animate-list-expected.svg: Added.
* svg/animations/smil-multiple-animate-list.svg: Added.

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

LayoutTests/ChangeLog
LayoutTests/svg/animations/smil-multiple-animate-list-expected.svg [new file with mode: 0644]
LayoutTests/svg/animations/smil-multiple-animate-list.svg [new file with mode: 0644]

index ee037a5..c521e55 100644 (file)
@@ -1,3 +1,19 @@
+2019-04-02  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        SVG Animation (SMIL) on <text> or <tspan> doesn't work on second run
+        https://bugs.webkit.org/show_bug.cgi?id=150388
+
+        Reviewed by Simon Fraser.
+
+        The bug is fixed by removing the SVG tear off objects. See
+        https://bugs.webkit.org/show_bug.cgi?id=191237.
+
+        We need to add a layout test to ensure that no code change will break
+        this scenario in the future.
+
+        * svg/animations/smil-multiple-animate-list-expected.svg: Added.
+        * svg/animations/smil-multiple-animate-list.svg: Added.
+
 2019-04-02  Shawn Roberts  <sroberts@apple.com>
 
         imported/w3c/web-platform-tests/mst-content-hint/MediaStreamTrack-contentHint.html is a flaky crash
diff --git a/LayoutTests/svg/animations/smil-multiple-animate-list-expected.svg b/LayoutTests/svg/animations/smil-multiple-animate-list-expected.svg
new file mode 100644 (file)
index 0000000..279725f
--- /dev/null
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <text dominant-baseline="hanging" x="20" y="140" font-size="44px">
+        Foo
+    </text>
+    <rect x="200" y="110" width="100" height="100" fill="green"/>
+    <rect x="450" y="110" width="100" height="100" fill="green"/>
+</svg>
\ No newline at end of file
diff --git a/LayoutTests/svg/animations/smil-multiple-animate-list.svg b/LayoutTests/svg/animations/smil-multiple-animate-list.svg
new file mode 100644 (file)
index 0000000..841ced4
--- /dev/null
@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <text dominant-baseline="hanging" x="20" y="40" font-size="44px">
+        Foo
+        <animate id="down1" attributeName="y" fill="freeze" begin="indefinite" dur="20ms" to="140"/>
+        <animate id="up1" attributeName="y" fill="freeze" begin="indefinite" dur="20ms" to="40"/>
+    </text>
+    <line x1="200" y1="60" x2="300" y2="60" stroke="green" stroke-width="100">
+        <animate id="down2" attributeName="y1" fill="freeze" begin="indefinite" dur="20ms" to="160"/>
+        <animate id="up2" attributeName="y1" fill="freeze" begin="indefinite" dur="20ms" to="60"/>
+
+        <animate id="down3" attributeName="y2" fill="freeze" begin="indefinite" dur="20ms" to="160"/>
+        <animate id="up3" attributeName="y2" fill="freeze" begin="indefinite" dur="20ms" to="60"/>
+    </line>
+    <marker id="Rectangle" viewBox="0 0 100 100" refX="100" refY="50" markerWidth="100" markerHeight="100" orient="0deg">
+        <rect width="100" height="100" fill="green"/>
+        <animate id="down4" attributeName="orient" fill="freeze" begin="indefinite" dur="20ms" from="0deg" to="180deg"/>
+        <animate id="up4" attributeName="orient" fill="freeze" begin="indefinite" dur="20ms" from="180deg" to="0deg"/>
+    </marker>
+    <line x1="400" y1="160" x2="450" y2="160" stroke-width="1" stroke="white"  marker-end="url(#Rectangle)"/>
+    <script type="text/javascript">
+    <![CDATA[
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        var groups = [
+            { down: "down1", up: "up1" },
+            { down: "down2", up: "up2" },
+            { down: "down3", up: "up3" },
+            { down: "down4", up: "up4" },
+        ];
+
+        var downCount = 0;
+        var upCount = 0;
+
+        for (let group of groups) {
+            let down = document.getElementById(group.down);
+            let up = document.getElementById(group.up);
+
+            down.addEventListener("endEvent", () => {
+                if (++downCount <= groups.length)
+                    toggle(up);
+
+                if (window.testRunner) {
+                    if (downCount == groups.length * 2)
+                        testRunner.notifyDone();
+                }
+            });
+
+            up.addEventListener("endEvent", () => {
+                if (++upCount <= groups.length)
+                    toggle(down);
+            });
+
+            down.beginElement();
+        }
+
+        function toggle(newElement) {
+            newElement.beginElement();
+        }
+    ]]>
+    </script>
+</svg>