Source/WebCore:
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 19 Sep 2019 20:52:30 +0000 (20:52 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 19 Sep 2019 20:52:30 +0000 (20:52 +0000)
[SVG2]: Add auto behavior for rx and ry to the SVG <ellipse> and<rect> elements
https://bugs.webkit.org/show_bug.cgi?id=199843

Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2019-09-19
Reviewed by Simon Fraser, Nikolas Zimmermann.

The specification is: https://www.w3.org/TR/SVG2/geometry.html#RxProperty.

Change the initial value of rx and ry to be "auto". Change the parser to
parse LengthOrAuto for these properties. Handle the case if one of them
is missing.

Tests: svg/custom/ellipse-radius-auto-dynamic.svg
       svg/custom/ellipse-radius-auto-initial.svg
       svg/custom/ellipse-radius-length-initial.svg
       svg/custom/rect-radius-auto-dynamic.svg
       svg/custom/rect-radius-auto-initial.svg
       svg/custom/rect-radius-length-initial.svg

* css/CSSProperties.json:
* css/parser/CSSPropertyParser.cpp:
(WebCore::consumeRxOrRy):
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::initialRadius):
* rendering/style/SVGRenderStyleDefs.cpp:
(WebCore::StyleLayoutData::StyleLayoutData):
* rendering/svg/RenderSVGEllipse.cpp:
(WebCore::RenderSVGEllipse::calculateRadiiAndCenter):

LayoutTests:
[SVG2]: Add auto behavior for rx and ry to the SVG <ellipse> and <rect> elements
https://bugs.webkit.org/show_bug.cgi?id=199843

Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2019-09-19
Reviewed by Simon Fraser, Nikolas Zimmermann.

Add tests which exercise the initial setting for rx and ry: length, 'auto'.
Add tests to dynamically change the values of these properties from length
to 'auto'.

Skip the tests with dynamic changes till webkit.org/b/201918 is fixed.

* TestExpectations:
* svg/css/parse-length-expected.txt:
* svg/css/parse-length.html:
* svg/custom/ellipse-radius-auto-dynamic-expected.svg: Added.
* svg/custom/ellipse-radius-auto-dynamic.svg: Added.
* svg/custom/ellipse-radius-auto-initial-expected.svg: Added.
* svg/custom/ellipse-radius-auto-initial.svg: Added.
* svg/custom/ellipse-radius-length-initial-expected.svg: Added.
* svg/custom/ellipse-radius-length-initial.svg: Added.
* svg/custom/rect-radius-auto-dynamic-expected.svg: Added.
* svg/custom/rect-radius-auto-dynamic.svg: Added.
* svg/custom/rect-radius-auto-initial-expected.svg: Added.
* svg/custom/rect-radius-auto-initial.svg: Added.
* svg/custom/rect-radius-length-initial-expected.svg: Added.
* svg/custom/rect-radius-length-initial.svg: Added.

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

22 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/svg/css/parse-length-expected.txt
LayoutTests/svg/css/parse-length.html
LayoutTests/svg/custom/ellipse-radius-auto-dynamic-expected.svg [new file with mode: 0644]
LayoutTests/svg/custom/ellipse-radius-auto-dynamic.svg [new file with mode: 0644]
LayoutTests/svg/custom/ellipse-radius-auto-initial-expected.svg [new file with mode: 0644]
LayoutTests/svg/custom/ellipse-radius-auto-initial.svg [new file with mode: 0644]
LayoutTests/svg/custom/ellipse-radius-length-initial-expected.svg [new file with mode: 0644]
LayoutTests/svg/custom/ellipse-radius-length-initial.svg [new file with mode: 0644]
LayoutTests/svg/custom/rect-radius-auto-dynamic-expected.svg [new file with mode: 0644]
LayoutTests/svg/custom/rect-radius-auto-dynamic.svg [new file with mode: 0644]
LayoutTests/svg/custom/rect-radius-auto-initial-expected.svg [new file with mode: 0644]
LayoutTests/svg/custom/rect-radius-auto-initial.svg [new file with mode: 0644]
LayoutTests/svg/custom/rect-radius-length-initial-expected.svg [new file with mode: 0644]
LayoutTests/svg/custom/rect-radius-length-initial.svg [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/CSSProperties.json
Source/WebCore/css/parser/CSSPropertyParser.cpp
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/SVGRenderStyleDefs.cpp
Source/WebCore/rendering/svg/RenderSVGEllipse.cpp

index e9efd5d..2183720 100644 (file)
@@ -1,3 +1,32 @@
+2019-09-19  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        [SVG2]: Add auto behavior for rx and ry to the SVG <ellipse> and <rect> elements
+        https://bugs.webkit.org/show_bug.cgi?id=199843
+
+        Reviewed by Simon Fraser, Nikolas Zimmermann.
+
+        Add tests which exercise the initial setting for rx and ry: length, 'auto'.
+        Add tests to dynamically change the values of these properties from length
+        to 'auto'.
+
+        Skip the tests with dynamic changes till webkit.org/b/201918 is fixed.
+
+        * TestExpectations:
+        * svg/css/parse-length-expected.txt:
+        * svg/css/parse-length.html:
+        * svg/custom/ellipse-radius-auto-dynamic-expected.svg: Added.
+        * svg/custom/ellipse-radius-auto-dynamic.svg: Added.
+        * svg/custom/ellipse-radius-auto-initial-expected.svg: Added.
+        * svg/custom/ellipse-radius-auto-initial.svg: Added.
+        * svg/custom/ellipse-radius-length-initial-expected.svg: Added.
+        * svg/custom/ellipse-radius-length-initial.svg: Added.
+        * svg/custom/rect-radius-auto-dynamic-expected.svg: Added.
+        * svg/custom/rect-radius-auto-dynamic.svg: Added.
+        * svg/custom/rect-radius-auto-initial-expected.svg: Added.
+        * svg/custom/rect-radius-auto-initial.svg: Added.
+        * svg/custom/rect-radius-length-initial-expected.svg: Added.
+        * svg/custom/rect-radius-length-initial.svg: Added.
+
 2019-09-19  Peng Liu  <peng.liu6@apple.com>
 
         HTMLVideoElement with a broken poster image will take square dimension
index d2cb8b5..7fc03d3 100644 (file)
@@ -2428,6 +2428,8 @@ webkit.org/b/24690 platform/mac/plugins/pluginDocumentView-deallocated-dataSourc
 webkit.org/b/17392 svg/batik/text/textBiDi.svg [ Skip ]
 webkit.org/b/11662 svg/custom/js-font-test.svg [ Skip ]
 webkit.org/b/63186 svg/zoom/page/zoom-svg-through-object-with-text.xhtml [ Skip ]
+webkit.org/b/201918 svg/custom/ellipse-radius-auto-dynamic.svg [ Skip ]
+webkit.org/b/201918 svg/custom/rect-radius-auto-dynamic.svg [ Skip ]
 
 # Test disabled in r37513 for causing next test to hang
 animations/font-size-using-ems.html [ Skip ]
index 48bda25..38a99a3 100644 (file)
@@ -112,16 +112,16 @@ PASS computedStyle("r", "100   px") is "0px"
 PASS computedStyle("r", "100px;") is "0px"
 PASS computedStyle("r", "100px !important") is "0px"
 PASS computedStyle("r", "{ 100px }") is "0px"
-PASS computedStyle("rx", "auto") is "0px"
-PASS computedStyle("rx", "100   px") is "0px"
-PASS computedStyle("rx", "100px;") is "0px"
-PASS computedStyle("rx", "100px !important") is "0px"
-PASS computedStyle("rx", "{ 100px }") is "0px"
-PASS computedStyle("ry", "auto") is "0px"
-PASS computedStyle("ry", "100   px") is "0px"
-PASS computedStyle("ry", "100px;") is "0px"
-PASS computedStyle("ry", "100px !important") is "0px"
-PASS computedStyle("ry", "{ 100px }") is "0px"
+PASS computedStyle("rx", "auto") is "auto"
+PASS computedStyle("rx", "100   px") is "auto"
+PASS computedStyle("rx", "100px;") is "auto"
+PASS computedStyle("rx", "100px !important") is "auto"
+PASS computedStyle("rx", "{ 100px }") is "auto"
+PASS computedStyle("ry", "auto") is "auto"
+PASS computedStyle("ry", "100   px") is "auto"
+PASS computedStyle("ry", "100px;") is "auto"
+PASS computedStyle("ry", "100px !important") is "auto"
+PASS computedStyle("ry", "{ 100px }") is "auto"
 PASS computedStyle("width", "100   px") is "auto"
 PASS computedStyle("width", "100px;") is "auto"
 PASS computedStyle("width", "100px !important") is "auto"
index c77a39d..39404a8 100644 (file)
@@ -129,18 +129,18 @@ negativeTestZero("r", "100px !important");
 negativeTestZero("r", "{ 100px }");
 
 // Negative tests for 'rx'.
-negativeTestZero("rx", "auto", "auto");
-negativeTestZero("rx", "100   px");
-negativeTestZero("rx", "100px;");
-negativeTestZero("rx", "100px !important");
-negativeTestZero("rx", "{ 100px }");
+negativeTest("rx", "auto", "auto");
+negativeTest("rx", "100   px", "auto");
+negativeTest("rx", "100px;", "auto");
+negativeTest("rx", "100px !important", "auto");
+negativeTest("rx", "{ 100px }", "auto");
 
 // Negative tests for 'ry'.
-negativeTestZero("ry", "auto");
-negativeTestZero("ry", "100   px");
-negativeTestZero("ry", "100px;");
-negativeTestZero("ry", "100px !important");
-negativeTestZero("ry", "{ 100px }");
+negativeTest("ry", "auto", "auto");
+negativeTest("ry", "100   px", "auto");
+negativeTest("ry", "100px;", "auto");
+negativeTest("ry", "100px !important", "auto");
+negativeTest("ry", "{ 100px }", "auto");
 
 // Negative tests for 'width'.
 negativeTest("width", "100   px");
diff --git a/LayoutTests/svg/custom/ellipse-radius-auto-dynamic-expected.svg b/LayoutTests/svg/custom/ellipse-radius-auto-dynamic-expected.svg
new file mode 100644 (file)
index 0000000..2afcf25
--- /dev/null
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g id="ellipses">
+        <ellipse cx="40" cy="60" rx="20" ry="20" fill="green"/>
+        <ellipse cx="90" cy="60" rx="30" ry="30" fill="green"/>
+        <ellipse cx="160" cy="60" rx="40" ry="40" fill="green"/>
+        <ellipse cx="250" cy="60" rx="50" ry="50" fill="green"/>
+    </g>
+    <use y="100" href="#ellipses"/>
+</svg>
diff --git a/LayoutTests/svg/custom/ellipse-radius-auto-dynamic.svg b/LayoutTests/svg/custom/ellipse-radius-auto-dynamic.svg
new file mode 100644 (file)
index 0000000..17d88d8
--- /dev/null
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <ellipse id="ellipse-1" cx="40" cy="60" rx="20" ry="0" fill="green"/>
+    <ellipse id="ellipse-2" cx="90" cy="60" ry="30" rx="0" fill="green"/>
+
+    <ellipse id="ellipse-3" cx="160" cy="60" rx="20" ry="0" fill="green">
+        <animate attributeType="XML" attributeName="rx" from="20" to="40" dur="1s" fill="freeze"/>
+    </ellipse>
+
+    <ellipse id="ellipse-4" cx="250" cy="60" ry="20" rx="0" fill="green">
+        <animate attributeType="XML" attributeName="ry" from="20" to="50" dur="1s" fill="freeze"/>
+    </ellipse>
+
+    <use y="100" href="#ellipse-1"/>
+    <use y="100" href="#ellipse-2"/>
+    <use y="100" href="#ellipse-3"/>
+    <use y="100" href="#ellipse-4"/>
+
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        window.addEventListener('load', (event) => {
+            let ellipse1 = document.getElementById('ellipse-1');
+            let ellipse2 = document.getElementById('ellipse-2');
+            let ellipse3 = document.getElementById('ellipse-3');
+            let ellipse4 = document.getElementById('ellipse-4');
+
+            ellipse1.style['ry'] = 'auto';
+            ellipse2.style['rx'] = 'auto';
+            ellipse3.style['ry'] = 'auto';
+            ellipse4.style['rx'] = 'auto';
+
+            document.documentElement.setCurrentTime(5);
+            if (window.testRunner)
+                testRunner.notifyDone();
+        });
+    </script>
+</svg>
diff --git a/LayoutTests/svg/custom/ellipse-radius-auto-initial-expected.svg b/LayoutTests/svg/custom/ellipse-radius-auto-initial-expected.svg
new file mode 100644 (file)
index 0000000..2afcf25
--- /dev/null
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g id="ellipses">
+        <ellipse cx="40" cy="60" rx="20" ry="20" fill="green"/>
+        <ellipse cx="90" cy="60" rx="30" ry="30" fill="green"/>
+        <ellipse cx="160" cy="60" rx="40" ry="40" fill="green"/>
+        <ellipse cx="250" cy="60" rx="50" ry="50" fill="green"/>
+    </g>
+    <use y="100" href="#ellipses"/>
+</svg>
diff --git a/LayoutTests/svg/custom/ellipse-radius-auto-initial.svg b/LayoutTests/svg/custom/ellipse-radius-auto-initial.svg
new file mode 100644 (file)
index 0000000..1b88eba
--- /dev/null
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <ellipse id="ellipse-1" cx="40" cy="60" rx="20" fill="green"/>
+    <ellipse id="ellipse-2" cx="90" cy="60" ry="30" fill="green"/>
+
+    <ellipse id="ellipse-3" cx="160" cy="60" rx="20" fill="green">
+        <animate attributeType="XML" attributeName="rx" from="20" to="40" dur="1s" fill="freeze"/>
+    </ellipse>
+
+    <ellipse id="ellipse-4" cx="250" cy="60" ry="20" fill="green">
+        <animate attributeType="XML" attributeName="ry" from="20" to="50" dur="1s" fill="freeze"/>
+    </ellipse>
+
+    <use y="100" href="#ellipse-1"/>
+    <use y="100" href="#ellipse-2"/>
+    <use y="100" href="#ellipse-3"/>
+    <use y="100" href="#ellipse-4"/>
+
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        window.addEventListener('load', (event) => {
+            document.documentElement.setCurrentTime(5);
+            if (window.testRunner)
+                testRunner.notifyDone();
+        });
+    </script>
+</svg>
diff --git a/LayoutTests/svg/custom/ellipse-radius-length-initial-expected.svg b/LayoutTests/svg/custom/ellipse-radius-length-initial-expected.svg
new file mode 100644 (file)
index 0000000..2afcf25
--- /dev/null
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g id="ellipses">
+        <ellipse cx="40" cy="60" rx="20" ry="20" fill="green"/>
+        <ellipse cx="90" cy="60" rx="30" ry="30" fill="green"/>
+        <ellipse cx="160" cy="60" rx="40" ry="40" fill="green"/>
+        <ellipse cx="250" cy="60" rx="50" ry="50" fill="green"/>
+    </g>
+    <use y="100" href="#ellipses"/>
+</svg>
diff --git a/LayoutTests/svg/custom/ellipse-radius-length-initial.svg b/LayoutTests/svg/custom/ellipse-radius-length-initial.svg
new file mode 100644 (file)
index 0000000..7de91a9
--- /dev/null
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #ellipse-1 { ry: 20px; }
+        #ellipse-2 { rx: 30px; }
+        #ellipse-3 { ry: 40px; }
+        #ellipse-4 { rx: 50px; }
+    </style>
+    <ellipse id="ellipse-1" cx="40" cy="60" rx="20" fill="green"/>
+    <ellipse id="ellipse-2" cx="90" cy="60" ry="30" fill="green"/>
+
+    <ellipse id="ellipse-3" cx="160" cy="60" rx="20" fill="green">
+        <animate attributeType="XML" attributeName="rx" from="20" to="40" dur="1s" fill="freeze"/>
+    </ellipse>
+
+    <ellipse id="ellipse-4" cx="250" cy="60" ry="20" fill="green">
+        <animate attributeType="XML" attributeName="ry" from="20" to="50" dur="1s" fill="freeze"/>
+    </ellipse>
+
+    <use y="100" href="#ellipse-1"/>
+    <use y="100" href="#ellipse-2"/>
+    <use y="100" href="#ellipse-3"/>
+    <use y="100" href="#ellipse-4"/>
+
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        window.addEventListener('load', (event) => {
+            document.documentElement.setCurrentTime(5);
+            if (window.testRunner)
+                testRunner.notifyDone();
+        });
+    </script>
+</svg>
diff --git a/LayoutTests/svg/custom/rect-radius-auto-dynamic-expected.svg b/LayoutTests/svg/custom/rect-radius-auto-dynamic-expected.svg
new file mode 100644 (file)
index 0000000..1bb188d
--- /dev/null
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g id="rects">
+        <rect x="20" y="40" width="40" height="40" rx="20" fill="green"/>
+        <rect x="60" y="30" width="60" height="60" ry="30" fill="green"/>
+        <rect x="120" y="20" width="80" height="80" ry="40" fill="green"/>
+        <rect x="200" y="10" width="100" height="100" rx="50" fill="green"/>
+    </g>
+    <use y="100" href="#rects"/>
+</svg>
diff --git a/LayoutTests/svg/custom/rect-radius-auto-dynamic.svg b/LayoutTests/svg/custom/rect-radius-auto-dynamic.svg
new file mode 100644 (file)
index 0000000..3354744
--- /dev/null
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <rect id="rect-1" x="20" y="40" width="40" height="40" rx="20" ry="1" fill="green"/>
+    <rect id="rect-2" x="60" y="30" width="60" height="60" ry="30" rx="1" fill="green"/>
+
+    <rect id="rect-3" x="120" y="20" width="80" height="80" rx="20" ry="1" fill="green">
+        <animate attributeType="XML" attributeName="rx" from="20" to="40" dur="1s" fill="freeze"/>
+    </rect>
+
+    <rect id="rect-4" x="200" y="10" width="100" height="100" ry="20" rx="1" fill="green">
+        <animate attributeType="XML" attributeName="ry" from="20" to="50" dur="1s" fill="freeze"/>
+    </rect>
+
+    <use y="100" href="#rect-1"/>
+    <use y="100" href="#rect-2"/>
+    <use y="100" href="#rect-3"/>
+    <use y="100" href="#rect-4"/>
+
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        window.addEventListener('load', (event) => {
+            let rect1 = document.getElementById('rect-1');
+            let rect2 = document.getElementById('rect-2');
+            let rect3 = document.getElementById('rect-3');
+            let rect4 = document.getElementById('rect-4');
+
+            rect1.style['ry'] = 'auto';
+            rect2.style['rx'] = 'auto';
+            rect3.style['ry'] = 'auto';
+            rect4.style['rx'] = 'auto';
+
+            document.documentElement.setCurrentTime(5);
+            if (window.testRunner)
+                testRunner.notifyDone();
+        });
+    </script>
+</svg>
diff --git a/LayoutTests/svg/custom/rect-radius-auto-initial-expected.svg b/LayoutTests/svg/custom/rect-radius-auto-initial-expected.svg
new file mode 100644 (file)
index 0000000..1bb188d
--- /dev/null
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g id="rects">
+        <rect x="20" y="40" width="40" height="40" rx="20" fill="green"/>
+        <rect x="60" y="30" width="60" height="60" ry="30" fill="green"/>
+        <rect x="120" y="20" width="80" height="80" ry="40" fill="green"/>
+        <rect x="200" y="10" width="100" height="100" rx="50" fill="green"/>
+    </g>
+    <use y="100" href="#rects"/>
+</svg>
diff --git a/LayoutTests/svg/custom/rect-radius-auto-initial.svg b/LayoutTests/svg/custom/rect-radius-auto-initial.svg
new file mode 100644 (file)
index 0000000..2dd2d9e
--- /dev/null
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <rect id="rect-1" x="20" y="40" width="40" height="40" rx="20" fill="green"/>
+    <rect id="rect-2" x="60" y="30" width="60" height="60" ry="30" fill="green"/>
+
+    <rect id="rect-3" x="120" y="20" width="80" height="80" rx="20" fill="green">
+        <animate attributeType="XML" attributeName="rx" from="20" to="40" dur="1s" fill="freeze"/>
+    </rect>
+
+    <rect id="rect-4" x="200" y="10" width="100" height="100" ry="20" fill="green">
+        <animate attributeType="XML" attributeName="ry" from="20" to="50" dur="1s" fill="freeze"/>
+    </rect>
+
+    <use y="100" href="#rect-1"/>
+    <use y="100" href="#rect-2"/>
+    <use y="100" href="#rect-3"/>
+    <use y="100" href="#rect-4"/>
+
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        window.addEventListener('load', (event) => {
+            document.documentElement.setCurrentTime(5);
+            if (window.testRunner)
+                testRunner.notifyDone();
+        });
+    </script>
+</svg>
diff --git a/LayoutTests/svg/custom/rect-radius-length-initial-expected.svg b/LayoutTests/svg/custom/rect-radius-length-initial-expected.svg
new file mode 100644 (file)
index 0000000..1bb188d
--- /dev/null
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g id="rects">
+        <rect x="20" y="40" width="40" height="40" rx="20" fill="green"/>
+        <rect x="60" y="30" width="60" height="60" ry="30" fill="green"/>
+        <rect x="120" y="20" width="80" height="80" ry="40" fill="green"/>
+        <rect x="200" y="10" width="100" height="100" rx="50" fill="green"/>
+    </g>
+    <use y="100" href="#rects"/>
+</svg>
diff --git a/LayoutTests/svg/custom/rect-radius-length-initial.svg b/LayoutTests/svg/custom/rect-radius-length-initial.svg
new file mode 100644 (file)
index 0000000..3da6d2e
--- /dev/null
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #rect-1 { ry: 20px; }
+        #rect-2 { rx: 30px; }
+        #rect-3 { ry: 40px; }
+        #rect-4 { rx: 50px; }
+    </style>
+    <rect id="rect-1" x="20" y="40" width="40" height="40" rx="20" fill="green"/>
+    <rect id="rect-2" x="60" y="30" width="60" height="60" ry="30" fill="green"/>
+
+    <rect id="rect-3" x="120" y="20" width="80" height="80" rx="20" fill="green">
+        <animate attributeType="XML" attributeName="rx" from="20" to="40" dur="1s" fill="freeze"/>
+    </rect>
+
+    <rect id="rect-4" x="200" y="10" width="100" height="100" ry="20" fill="green">
+        <animate attributeType="XML" attributeName="ry" from="20" to="50" dur="1s" fill="freeze"/>
+    </rect>
+
+    <use y="100" href="#rect-1"/>
+    <use y="100" href="#rect-2"/>
+    <use y="100" href="#rect-3"/>
+    <use y="100" href="#rect-4"/>
+
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        window.addEventListener('load', (event) => {
+            document.documentElement.setCurrentTime(5);
+            if (window.testRunner)
+                testRunner.notifyDone();
+        });
+    </script>
+</svg>
index 73a7bdb..778337d 100644 (file)
@@ -1,3 +1,33 @@
+2019-09-19  Said Abou-Hallawa  <sabouhallawa@apple.com>
+
+        [SVG2]: Add auto behavior for rx and ry to the SVG <ellipse> and<rect> elements
+        https://bugs.webkit.org/show_bug.cgi?id=199843
+
+        Reviewed by Simon Fraser, Nikolas Zimmermann.
+
+        The specification is: https://www.w3.org/TR/SVG2/geometry.html#RxProperty.
+
+        Change the initial value of rx and ry to be "auto". Change the parser to
+        parse LengthOrAuto for these properties. Handle the case if one of them
+        is missing.
+
+        Tests: svg/custom/ellipse-radius-auto-dynamic.svg
+               svg/custom/ellipse-radius-auto-initial.svg
+               svg/custom/ellipse-radius-length-initial.svg
+               svg/custom/rect-radius-auto-dynamic.svg
+               svg/custom/rect-radius-auto-initial.svg
+               svg/custom/rect-radius-length-initial.svg
+
+        * css/CSSProperties.json:
+        * css/parser/CSSPropertyParser.cpp:
+        (WebCore::consumeRxOrRy):
+        * rendering/style/RenderStyle.h:
+        (WebCore::RenderStyle::initialRadius):
+        * rendering/style/SVGRenderStyleDefs.cpp:
+        (WebCore::StyleLayoutData::StyleLayoutData):
+        * rendering/svg/RenderSVGEllipse.cpp:
+        (WebCore::RenderSVGEllipse::calculateRadiiAndCenter):
+
 2019-09-19  Peng Liu  <peng.liu6@apple.com>
 
         HTMLVideoElement with a broken poster image will take square dimension
index bcf161c..aac2fb9 100644 (file)
         },
         "rx": {
             "codegen-properties": {
-                "initial": "initialZeroLength",
-                "converter": "Length"
+                "initial": "initialRadius",
+                "converter": "LengthOrAuto"
             },
             "specification": {
                 "category": "svg",
         },
         "ry": {
             "codegen-properties": {
-                "initial": "initialZeroLength",
-                "converter": "Length"
+                "initial": "initialRadius",
+                "converter": "LengthOrAuto"
             },
             "specification": {
                 "category": "svg",
index 708ec77..d32f6b0 100644 (file)
@@ -2142,10 +2142,8 @@ static RefPtr<CSSPrimitiveValue> consumeBaselineShift(CSSParserTokenRange& range
 
 static RefPtr<CSSPrimitiveValue> consumeRxOrRy(CSSParserTokenRange& range)
 {
-    // FIXME-NEWPARSER: We don't support auto values when mapping, so for now turn this
-    // off until we can figure out if we're even supposed to support it.
-    // if (range.peek().id() == CSSValueAuto)
-    //     return consumeIdent(range);
+    if (range.peek().id() == CSSValueAuto)
+        return consumeIdent(range);
     return consumeLengthOrPercent(range, SVGAttributeMode, ValueRangeAll, UnitlessQuirk::Forbid);
 }
 
index c361207..cbf2536 100644 (file)
@@ -1489,6 +1489,7 @@ public:
     static Length initialMinSize() { return Length(); }
     static Length initialMaxSize() { return Length(Undefined); }
     static Length initialOffset() { return Length(); }
+    static Length initialRadius() { return Length(); }
     static Length initialMargin() { return Length(Fixed); }
     static Length initialPadding() { return Length(Fixed); }
     static Length initialTextIndent() { return Length(Fixed); }
index 6e37cf8..581b07c 100644 (file)
@@ -270,8 +270,8 @@ StyleLayoutData::StyleLayoutData()
     : cx(RenderStyle::initialZeroLength())
     , cy(RenderStyle::initialZeroLength())
     , r(RenderStyle::initialZeroLength())
-    , rx(RenderStyle::initialZeroLength())
-    , ry(RenderStyle::initialZeroLength())
+    , rx(RenderStyle::initialRadius())
+    , ry(RenderStyle::initialRadius())
     , x(RenderStyle::initialZeroLength())
     , y(RenderStyle::initialZeroLength())
 {
index 177c395..dee612e 100644 (file)
@@ -88,9 +88,18 @@ void RenderSVGEllipse::calculateRadiiAndCenter()
     }
 
     ASSERT(is<SVGEllipseElement>(graphicsElement()));
+
+    Length rx = style().svgStyle().rx();
+    if (rx.isAuto())
+        rx = style().svgStyle().ry();
+    
+    Length ry = style().svgStyle().ry();
+    if (ry.isAuto())
+        ry = style().svgStyle().rx();
+
     m_radii = FloatSize(
-        lengthContext.valueForLength(style().svgStyle().rx(), SVGLengthMode::Width),
-        lengthContext.valueForLength(style().svgStyle().ry(), SVGLengthMode::Height));
+        lengthContext.valueForLength(rx, SVGLengthMode::Width),
+        lengthContext.valueForLength(ry, SVGLengthMode::Height));
 }
 
 void RenderSVGEllipse::fillShape(GraphicsContext& context) const