[SVG2] fill-opacity, stroke-opacity, stop-opacity and flood-opacity doe not support...
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 29 Oct 2019 10:27:35 +0000 (10:27 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 29 Oct 2019 10:27:35 +0000 (10:27 +0000)
https://bugs.webkit.org/show_bug.cgi?id=201731

Source/WebCore:

Patch by Dirk Schulze <krit@webkit.org> on 2019-10-29
Reviewed by Simon Fraser.

The CSS properties opacity, fill-opacity, stroke-opacity, stop-opacity, flood-opacity support
percentage in addition to number values.
Add percentage support.

Tests: fast/css/parsing-opacity.html
       fast/svg/parsing-fill-opacity.html
       fast/svg/parsing-flood-opacity.html
       fast/svg/parsing-stop-opacity.html
       fast/svg/parsing-stroke-opacity.html

* css/CSSProperties.json: opacity needs to use Opacity converter now.
* css/StyleBuilderConverter.h:
(WebCore::StyleBuilderConverter::convertOpacity): Clamp values to [0,1]
* css/parser/CSSPropertyParser.cpp:
(WebCore::CSSPropertyParser::parseSingleValue): Parse percentage values.

LayoutTests:

Test number and percentage values for opacity, fill-opacity, stroke-opacity, stop-opacity, flood-opacity.

Patch by Dirk Schulze <krit@webkit.org> on 2019-10-29
Reviewed by Simon Fraser.

* fast/css/parsing-opacity-expected.txt: Added.
* fast/css/parsing-opacity.html: Added.
* fast/svg/parsing-fill-opacity-expected.txt: Added.
* fast/svg/parsing-fill-opacity.html: Added.
* fast/svg/parsing-flood-opacity-expected.txt: Added.
* fast/svg/parsing-flood-opacity.html: Added.
* fast/svg/parsing-stop-opacity-expected.txt: Added.
* fast/svg/parsing-stop-opacity.html: Added.
* fast/svg/parsing-stroke-opacity-expected.txt: Added.
* fast/svg/parsing-stroke-opacity.html: Added.

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

25 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/parsing-opacity-expected.txt [new file with mode: 0644]
LayoutTests/fast/css/parsing-opacity.html [new file with mode: 0644]
LayoutTests/fast/svg/parsing-fill-opacity-expected.txt [new file with mode: 0644]
LayoutTests/fast/svg/parsing-fill-opacity.html [new file with mode: 0644]
LayoutTests/fast/svg/parsing-flood-opacity-expected.txt [new file with mode: 0644]
LayoutTests/fast/svg/parsing-flood-opacity.html [new file with mode: 0644]
LayoutTests/fast/svg/parsing-stop-opacity-expected.txt [new file with mode: 0644]
LayoutTests/fast/svg/parsing-stop-opacity.html [new file with mode: 0644]
LayoutTests/fast/svg/parsing-stroke-opacity-expected.txt [new file with mode: 0644]
LayoutTests/fast/svg/parsing-stroke-opacity.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/imported/w3c/web-platform-tests/svg/import/painting-fill-05-b-manual-expected.txt
LayoutTests/platform/ios-simulator/imported/w3c/web-platform-tests/svg/import/painting-stroke-08-t-manual-expected.txt
LayoutTests/platform/ios/svg/W3C-SVG-1.1/painting-fill-05-b-expected.txt
LayoutTests/platform/mac/imported/w3c/web-platform-tests/svg/import/painting-fill-05-b-manual-expected.txt
LayoutTests/platform/mac/imported/w3c/web-platform-tests/svg/import/painting-stroke-08-t-manual-expected.txt
LayoutTests/platform/mac/svg/W3C-SVG-1.1/painting-fill-05-b-expected.txt
LayoutTests/platform/win/svg/W3C-SVG-1.1/painting-fill-05-b-expected.txt
LayoutTests/svg/css/parse-calc-length-expected.txt
LayoutTests/svg/css/parse-calc-length.html
LayoutTests/svg/custom/invalid-css.svg
Source/WebCore/ChangeLog
Source/WebCore/css/CSSProperties.json
Source/WebCore/css/StyleBuilderConverter.h
Source/WebCore/css/parser/CSSPropertyParser.cpp

index 7c820b0..3dff166 100644 (file)
@@ -1,3 +1,23 @@
+2019-10-29  Dirk Schulze  <krit@webkit.org>
+
+        [SVG2] fill-opacity, stroke-opacity, stop-opacity and flood-opacity doe not support percentage
+        https://bugs.webkit.org/show_bug.cgi?id=201731
+
+        Test number and percentage values for opacity, fill-opacity, stroke-opacity, stop-opacity, flood-opacity.
+
+        Reviewed by Simon Fraser.
+
+        * fast/css/parsing-opacity-expected.txt: Added.
+        * fast/css/parsing-opacity.html: Added.
+        * fast/svg/parsing-fill-opacity-expected.txt: Added.
+        * fast/svg/parsing-fill-opacity.html: Added.
+        * fast/svg/parsing-flood-opacity-expected.txt: Added.
+        * fast/svg/parsing-flood-opacity.html: Added.
+        * fast/svg/parsing-stop-opacity-expected.txt: Added.
+        * fast/svg/parsing-stop-opacity.html: Added.
+        * fast/svg/parsing-stroke-opacity-expected.txt: Added.
+        * fast/svg/parsing-stroke-opacity.html: Added.
+
 2019-10-28  Kate Cheney  <katherine_cheney@apple.com>
 
         http/tests/resourceLoadStatistics/capped-lifetime-for-cookie-set-in-js-w* are flaky timeouts
diff --git a/LayoutTests/fast/css/parsing-opacity-expected.txt b/LayoutTests/fast/css/parsing-opacity-expected.txt
new file mode 100644 (file)
index 0000000..b1abc91
--- /dev/null
@@ -0,0 +1,35 @@
+Test parsing and computed style of opacity
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS innerStyle("opacity", "0") is "0"
+PASS innerStyle("opacity", "0.5") is "0.5"
+PASS innerStyle("opacity", "1") is "1"
+PASS innerStyle("opacity", "1000") is "1000"
+PASS innerStyle("opacity", "-400") is "-400"
+PASS innerStyle("opacity", "20%") is "20%"
+PASS innerStyle("opacity", "-600%") is "-600%"
+PASS innerStyle("opacity", "700%") is "700%"
+PASS innerStyle("opacity", "2.5e-1") is "0.25"
+PASS innerStyle("opacity", "2.5e1%") is "25%"
+PASS innerStyle("opacity", "100.25%") is "100.25%"
+PASS computedStyle("opacity", "0") is "0"
+PASS computedStyle("opacity", "0.5") is "0.5"
+PASS computedStyle("opacity", "1") is "1"
+PASS computedStyle("opacity", "1000") is "1"
+PASS computedStyle("opacity", "-400") is "0"
+PASS computedStyle("opacity", "25%") is "0.25"
+PASS computedStyle("opacity", "-600%") is "0"
+PASS computedStyle("opacity", "700%") is "1"
+PASS computedStyle("opacity", "2.5e-1") is "0.25"
+PASS computedStyle("opacity", "2.5e1%") is "0.25"
+PASS computedStyle("opacity", "100.25%") is "1"
+PASS innerStyle("opacity", "2px") is ""
+PASS innerStyle("opacity", "auto") is ""
+PASS innerStyle("opacity", "none") is ""
+PASS innerStyle("opacity", "'str'") is ""
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/css/parsing-opacity.html b/LayoutTests/fast/css/parsing-opacity.html
new file mode 100644 (file)
index 0000000..1ebce2d
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<style>
+* { font-size: 16px; }
+div { font-size: 8px; }
+</style>
+<body>
+<script src="../../resources/js-test-pre.js"></script>
+<script>
+description('Test parsing and computed style of opacity');
+
+function computedStyle(property, value) {
+    var div = document.createElement("div");
+    document.body.appendChild(div);
+    div.style.setProperty(property, value);
+    var computedValue = getComputedStyle(div).getPropertyValue(property);
+    document.body.removeChild(div);
+    return computedValue;
+}
+
+function innerStyle(property, value) {
+    var div = document.createElement("div");
+    div.style.setProperty(property, value);
+    return div.style.getPropertyValue(property);
+}
+
+function testComputed(property, value, expected) {
+    shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
+}
+
+function testInner(property, value, expected) {
+    if (expected === null)
+        expected = "";
+    shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
+}
+
+function negativeTest(property, value) {
+    testInner(property, value, null);
+    // FIXME: Computed style not yet implemented.
+    // testComputed(property, value, 'none');
+}
+
+testInner("opacity", "0", "0");
+testInner("opacity", "0.5", "0.5");
+testInner("opacity", "1", "1");
+testInner("opacity", "1000", "1000");
+testInner("opacity", "-400", "-400");
+testInner("opacity", "20%", "20%");
+testInner("opacity", "-600%", "-600%");
+testInner("opacity", "700%", "700%");
+testInner("opacity", "2.5e-1", "0.25");
+testInner("opacity", "2.5e1%", "25%");
+testInner("opacity", "100.25%", "100.25%");
+testComputed("opacity", "0", "0");
+testComputed("opacity", "0.5", "0.5");
+testComputed("opacity", "1", "1");
+testComputed("opacity", "1000", "1");
+testComputed("opacity", "-400", "0");
+testComputed("opacity", "25%", "0.25");
+testComputed("opacity", "-600%", "0");
+testComputed("opacity", "700%", "1");
+testComputed("opacity", "2.5e-1", "0.25");
+testComputed("opacity", "2.5e1%", "0.25");
+testComputed("opacity", "100.25%", "1");
+negativeTest("opacity", "2px");
+negativeTest("opacity", "auto");
+negativeTest("opacity", "none");
+negativeTest("opacity", "'str'");
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/svg/parsing-fill-opacity-expected.txt b/LayoutTests/fast/svg/parsing-fill-opacity-expected.txt
new file mode 100644 (file)
index 0000000..56d8c1b
--- /dev/null
@@ -0,0 +1,35 @@
+Test parsing and computed style of fill-opacity
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS innerStyle("fill-opacity", "0") is "0"
+PASS innerStyle("fill-opacity", "0.5") is "0.5"
+PASS innerStyle("fill-opacity", "1") is "1"
+PASS innerStyle("fill-opacity", "1000") is "1000"
+PASS innerStyle("fill-opacity", "-400") is "-400"
+PASS innerStyle("fill-opacity", "20%") is "20%"
+PASS innerStyle("fill-opacity", "-600%") is "-600%"
+PASS innerStyle("fill-opacity", "700%") is "700%"
+PASS innerStyle("fill-opacity", "2.5e-1") is "0.25"
+PASS innerStyle("fill-opacity", "2.5e1%") is "25%"
+PASS innerStyle("fill-opacity", "100.25%") is "100.25%"
+PASS computedStyle("fill-opacity", "0") is "0"
+PASS computedStyle("fill-opacity", "0.5") is "0.5"
+PASS computedStyle("fill-opacity", "1") is "1"
+PASS computedStyle("fill-opacity", "1000") is "1"
+PASS computedStyle("fill-opacity", "-400") is "0"
+PASS computedStyle("fill-opacity", "25%") is "0.25"
+PASS computedStyle("fill-opacity", "-600%") is "0"
+PASS computedStyle("fill-opacity", "700%") is "1"
+PASS computedStyle("fill-opacity", "2.5e-1") is "0.25"
+PASS computedStyle("fill-opacity", "2.5e1%") is "0.25"
+PASS computedStyle("fill-opacity", "100.25%") is "1"
+PASS innerStyle("fill-opacity", "2px") is ""
+PASS innerStyle("fill-opacity", "auto") is ""
+PASS innerStyle("fill-opacity", "none") is ""
+PASS innerStyle("fill-opacity", "'str'") is ""
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/svg/parsing-fill-opacity.html b/LayoutTests/fast/svg/parsing-fill-opacity.html
new file mode 100644 (file)
index 0000000..d71081d
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<style>
+* { font-size: 16px; }
+div { font-size: 8px; }
+</style>
+<body>
+<script src="../../resources/js-test-pre.js"></script>
+<script>
+description('Test parsing and computed style of fill-opacity');
+
+function computedStyle(property, value) {
+    var div = document.createElement("div");
+    document.body.appendChild(div);
+    div.style.setProperty(property, value);
+    var computedValue = getComputedStyle(div).getPropertyValue(property);
+    document.body.removeChild(div);
+    return computedValue;
+}
+
+function innerStyle(property, value) {
+    var div = document.createElement("div");
+    div.style.setProperty(property, value);
+    return div.style.getPropertyValue(property);
+}
+
+function testComputed(property, value, expected) {
+    shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
+}
+
+function testInner(property, value, expected) {
+    if (expected === null)
+        expected = "";
+    shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
+}
+
+function negativeTest(property, value) {
+    testInner(property, value, null);
+    // FIXME: Computed style not yet implemented.
+    // testComputed(property, value, 'none');
+}
+
+testInner("fill-opacity", "0", "0");
+testInner("fill-opacity", "0.5", "0.5");
+testInner("fill-opacity", "1", "1");
+testInner("fill-opacity", "1000", "1000");
+testInner("fill-opacity", "-400", "-400");
+testInner("fill-opacity", "20%", "20%");
+testInner("fill-opacity", "-600%", "-600%");
+testInner("fill-opacity", "700%", "700%");
+testInner("fill-opacity", "2.5e-1", "0.25");
+testInner("fill-opacity", "2.5e1%", "25%");
+testInner("fill-opacity", "100.25%", "100.25%");
+testComputed("fill-opacity", "0", "0");
+testComputed("fill-opacity", "0.5", "0.5");
+testComputed("fill-opacity", "1", "1");
+testComputed("fill-opacity", "1000", "1");
+testComputed("fill-opacity", "-400", "0");
+testComputed("fill-opacity", "25%", "0.25");
+testComputed("fill-opacity", "-600%", "0");
+testComputed("fill-opacity", "700%", "1");
+testComputed("fill-opacity", "2.5e-1", "0.25");
+testComputed("fill-opacity", "2.5e1%", "0.25");
+testComputed("fill-opacity", "100.25%", "1");
+negativeTest("fill-opacity", "2px");
+negativeTest("fill-opacity", "auto");
+negativeTest("fill-opacity", "none");
+negativeTest("fill-opacity", "'str'");
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/svg/parsing-flood-opacity-expected.txt b/LayoutTests/fast/svg/parsing-flood-opacity-expected.txt
new file mode 100644 (file)
index 0000000..fe40432
--- /dev/null
@@ -0,0 +1,35 @@
+Test parsing and computed style of flood-opacity
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS innerStyle("flood-opacity", "0") is "0"
+PASS innerStyle("flood-opacity", "0.5") is "0.5"
+PASS innerStyle("flood-opacity", "1") is "1"
+PASS innerStyle("flood-opacity", "1000") is "1000"
+PASS innerStyle("flood-opacity", "-400") is "-400"
+PASS innerStyle("flood-opacity", "20%") is "20%"
+PASS innerStyle("flood-opacity", "-600%") is "-600%"
+PASS innerStyle("flood-opacity", "700%") is "700%"
+PASS innerStyle("flood-opacity", "2.5e-1") is "0.25"
+PASS innerStyle("flood-opacity", "2.5e1%") is "25%"
+PASS innerStyle("flood-opacity", "100.25%") is "100.25%"
+PASS computedStyle("flood-opacity", "0") is "0"
+PASS computedStyle("flood-opacity", "0.5") is "0.5"
+PASS computedStyle("flood-opacity", "1") is "1"
+PASS computedStyle("flood-opacity", "1000") is "1"
+PASS computedStyle("flood-opacity", "-400") is "0"
+PASS computedStyle("flood-opacity", "25%") is "0.25"
+PASS computedStyle("flood-opacity", "-600%") is "0"
+PASS computedStyle("flood-opacity", "700%") is "1"
+PASS computedStyle("flood-opacity", "2.5e-1") is "0.25"
+PASS computedStyle("flood-opacity", "2.5e1%") is "0.25"
+PASS computedStyle("flood-opacity", "100.25%") is "1"
+PASS innerStyle("flood-opacity", "2px") is ""
+PASS innerStyle("flood-opacity", "auto") is ""
+PASS innerStyle("flood-opacity", "none") is ""
+PASS innerStyle("flood-opacity", "'str'") is ""
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/svg/parsing-flood-opacity.html b/LayoutTests/fast/svg/parsing-flood-opacity.html
new file mode 100644 (file)
index 0000000..41bb93c
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<style>
+* { font-size: 16px; }
+div { font-size: 8px; }
+</style>
+<body>
+<script src="../../resources/js-test-pre.js"></script>
+<script>
+description('Test parsing and computed style of flood-opacity');
+
+function computedStyle(property, value) {
+    var div = document.createElement("div");
+    document.body.appendChild(div);
+    div.style.setProperty(property, value);
+    var computedValue = getComputedStyle(div).getPropertyValue(property);
+    document.body.removeChild(div);
+    return computedValue;
+}
+
+function innerStyle(property, value) {
+    var div = document.createElement("div");
+    div.style.setProperty(property, value);
+    return div.style.getPropertyValue(property);
+}
+
+function testComputed(property, value, expected) {
+    shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
+}
+
+function testInner(property, value, expected) {
+    if (expected === null)
+        expected = "";
+    shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
+}
+
+function negativeTest(property, value) {
+    testInner(property, value, null);
+    // FIXME: Computed style not yet implemented.
+    // testComputed(property, value, 'none');
+}
+
+testInner("flood-opacity", "0", "0");
+testInner("flood-opacity", "0.5", "0.5");
+testInner("flood-opacity", "1", "1");
+testInner("flood-opacity", "1000", "1000");
+testInner("flood-opacity", "-400", "-400");
+testInner("flood-opacity", "20%", "20%");
+testInner("flood-opacity", "-600%", "-600%");
+testInner("flood-opacity", "700%", "700%");
+testInner("flood-opacity", "2.5e-1", "0.25");
+testInner("flood-opacity", "2.5e1%", "25%");
+testInner("flood-opacity", "100.25%", "100.25%");
+testComputed("flood-opacity", "0", "0");
+testComputed("flood-opacity", "0.5", "0.5");
+testComputed("flood-opacity", "1", "1");
+testComputed("flood-opacity", "1000", "1");
+testComputed("flood-opacity", "-400", "0");
+testComputed("flood-opacity", "25%", "0.25");
+testComputed("flood-opacity", "-600%", "0");
+testComputed("flood-opacity", "700%", "1");
+testComputed("flood-opacity", "2.5e-1", "0.25");
+testComputed("flood-opacity", "2.5e1%", "0.25");
+testComputed("flood-opacity", "100.25%", "1");
+negativeTest("flood-opacity", "2px");
+negativeTest("flood-opacity", "auto");
+negativeTest("flood-opacity", "none");
+negativeTest("flood-opacity", "'str'");
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/svg/parsing-stop-opacity-expected.txt b/LayoutTests/fast/svg/parsing-stop-opacity-expected.txt
new file mode 100644 (file)
index 0000000..d87f364
--- /dev/null
@@ -0,0 +1,35 @@
+Test parsing and computed style of stop-opacity
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS innerStyle("stop-opacity", "0") is "0"
+PASS innerStyle("stop-opacity", "0.5") is "0.5"
+PASS innerStyle("stop-opacity", "1") is "1"
+PASS innerStyle("stop-opacity", "1000") is "1000"
+PASS innerStyle("stop-opacity", "-400") is "-400"
+PASS innerStyle("stop-opacity", "20%") is "20%"
+PASS innerStyle("stop-opacity", "-600%") is "-600%"
+PASS innerStyle("stop-opacity", "700%") is "700%"
+PASS innerStyle("stop-opacity", "2.5e-1") is "0.25"
+PASS innerStyle("stop-opacity", "2.5e1%") is "25%"
+PASS innerStyle("stop-opacity", "100.25%") is "100.25%"
+PASS computedStyle("stop-opacity", "0") is "0"
+PASS computedStyle("stop-opacity", "0.5") is "0.5"
+PASS computedStyle("stop-opacity", "1") is "1"
+PASS computedStyle("stop-opacity", "1000") is "1"
+PASS computedStyle("stop-opacity", "-400") is "0"
+PASS computedStyle("stop-opacity", "25%") is "0.25"
+PASS computedStyle("stop-opacity", "-600%") is "0"
+PASS computedStyle("stop-opacity", "700%") is "1"
+PASS computedStyle("stop-opacity", "2.5e-1") is "0.25"
+PASS computedStyle("stop-opacity", "2.5e1%") is "0.25"
+PASS computedStyle("stop-opacity", "100.25%") is "1"
+PASS innerStyle("stop-opacity", "2px") is ""
+PASS innerStyle("stop-opacity", "auto") is ""
+PASS innerStyle("stop-opacity", "none") is ""
+PASS innerStyle("stop-opacity", "'str'") is ""
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/svg/parsing-stop-opacity.html b/LayoutTests/fast/svg/parsing-stop-opacity.html
new file mode 100644 (file)
index 0000000..a163dcd
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<style>
+* { font-size: 16px; }
+div { font-size: 8px; }
+</style>
+<body>
+<script src="../../resources/js-test-pre.js"></script>
+<script>
+description('Test parsing and computed style of stop-opacity');
+
+function computedStyle(property, value) {
+    var div = document.createElement("div");
+    document.body.appendChild(div);
+    div.style.setProperty(property, value);
+    var computedValue = getComputedStyle(div).getPropertyValue(property);
+    document.body.removeChild(div);
+    return computedValue;
+}
+
+function innerStyle(property, value) {
+    var div = document.createElement("div");
+    div.style.setProperty(property, value);
+    return div.style.getPropertyValue(property);
+}
+
+function testComputed(property, value, expected) {
+    shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
+}
+
+function testInner(property, value, expected) {
+    if (expected === null)
+        expected = "";
+    shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
+}
+
+function negativeTest(property, value) {
+    testInner(property, value, null);
+    // FIXME: Computed style not yet implemented.
+    // testComputed(property, value, 'none');
+}
+
+testInner("stop-opacity", "0", "0");
+testInner("stop-opacity", "0.5", "0.5");
+testInner("stop-opacity", "1", "1");
+testInner("stop-opacity", "1000", "1000");
+testInner("stop-opacity", "-400", "-400");
+testInner("stop-opacity", "20%", "20%");
+testInner("stop-opacity", "-600%", "-600%");
+testInner("stop-opacity", "700%", "700%");
+testInner("stop-opacity", "2.5e-1", "0.25");
+testInner("stop-opacity", "2.5e1%", "25%");
+testInner("stop-opacity", "100.25%", "100.25%");
+testComputed("stop-opacity", "0", "0");
+testComputed("stop-opacity", "0.5", "0.5");
+testComputed("stop-opacity", "1", "1");
+testComputed("stop-opacity", "1000", "1");
+testComputed("stop-opacity", "-400", "0");
+testComputed("stop-opacity", "25%", "0.25");
+testComputed("stop-opacity", "-600%", "0");
+testComputed("stop-opacity", "700%", "1");
+testComputed("stop-opacity", "2.5e-1", "0.25");
+testComputed("stop-opacity", "2.5e1%", "0.25");
+testComputed("stop-opacity", "100.25%", "1");
+negativeTest("stop-opacity", "2px");
+negativeTest("stop-opacity", "auto");
+negativeTest("stop-opacity", "none");
+negativeTest("stop-opacity", "'str'");
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/svg/parsing-stroke-opacity-expected.txt b/LayoutTests/fast/svg/parsing-stroke-opacity-expected.txt
new file mode 100644 (file)
index 0000000..8ae17bb
--- /dev/null
@@ -0,0 +1,35 @@
+Test parsing and computed style of stroke-opacity
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS innerStyle("stroke-opacity", "0") is "0"
+PASS innerStyle("stroke-opacity", "0.5") is "0.5"
+PASS innerStyle("stroke-opacity", "1") is "1"
+PASS innerStyle("stroke-opacity", "1000") is "1000"
+PASS innerStyle("stroke-opacity", "-400") is "-400"
+PASS innerStyle("stroke-opacity", "20%") is "20%"
+PASS innerStyle("stroke-opacity", "-600%") is "-600%"
+PASS innerStyle("stroke-opacity", "700%") is "700%"
+PASS innerStyle("stroke-opacity", "2.5e-1") is "0.25"
+PASS innerStyle("stroke-opacity", "2.5e1%") is "25%"
+PASS innerStyle("stroke-opacity", "100.25%") is "100.25%"
+PASS computedStyle("stroke-opacity", "0") is "0"
+PASS computedStyle("stroke-opacity", "0.5") is "0.5"
+PASS computedStyle("stroke-opacity", "1") is "1"
+PASS computedStyle("stroke-opacity", "1000") is "1"
+PASS computedStyle("stroke-opacity", "-400") is "0"
+PASS computedStyle("stroke-opacity", "25%") is "0.25"
+PASS computedStyle("stroke-opacity", "-600%") is "0"
+PASS computedStyle("stroke-opacity", "700%") is "1"
+PASS computedStyle("stroke-opacity", "2.5e-1") is "0.25"
+PASS computedStyle("stroke-opacity", "2.5e1%") is "0.25"
+PASS computedStyle("stroke-opacity", "100.25%") is "1"
+PASS innerStyle("stroke-opacity", "2px") is ""
+PASS innerStyle("stroke-opacity", "auto") is ""
+PASS innerStyle("stroke-opacity", "none") is ""
+PASS innerStyle("stroke-opacity", "'str'") is ""
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/svg/parsing-stroke-opacity.html b/LayoutTests/fast/svg/parsing-stroke-opacity.html
new file mode 100644 (file)
index 0000000..78db74a
--- /dev/null
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<style>
+* { font-size: 16px; }
+div { font-size: 8px; }
+</style>
+<body>
+<script src="../../resources/js-test-pre.js"></script>
+<script>
+description('Test parsing and computed style of stroke-opacity');
+
+function computedStyle(property, value) {
+    var div = document.createElement("div");
+    document.body.appendChild(div);
+    div.style.setProperty(property, value);
+    var computedValue = getComputedStyle(div).getPropertyValue(property);
+    document.body.removeChild(div);
+    return computedValue;
+}
+
+function innerStyle(property, value) {
+    var div = document.createElement("div");
+    div.style.setProperty(property, value);
+    return div.style.getPropertyValue(property);
+}
+
+function testComputed(property, value, expected) {
+    shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
+}
+
+function testInner(property, value, expected) {
+    if (expected === null)
+        expected = "";
+    shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
+}
+
+function negativeTest(property, value) {
+    testInner(property, value, null);
+    // FIXME: Computed style not yet implemented.
+    // testComputed(property, value, 'none');
+}
+
+testInner("stroke-opacity", "0", "0");
+testInner("stroke-opacity", "0.5", "0.5");
+testInner("stroke-opacity", "1", "1");
+testInner("stroke-opacity", "1000", "1000");
+testInner("stroke-opacity", "-400", "-400");
+testInner("stroke-opacity", "20%", "20%");
+testInner("stroke-opacity", "-600%", "-600%");
+testInner("stroke-opacity", "700%", "700%");
+testInner("stroke-opacity", "2.5e-1", "0.25");
+testInner("stroke-opacity", "2.5e1%", "25%");
+testInner("stroke-opacity", "100.25%", "100.25%");
+testComputed("stroke-opacity", "0", "0");
+testComputed("stroke-opacity", "0.5", "0.5");
+testComputed("stroke-opacity", "1", "1");
+testComputed("stroke-opacity", "1000", "1");
+testComputed("stroke-opacity", "-400", "0");
+testComputed("stroke-opacity", "25%", "0.25");
+testComputed("stroke-opacity", "-600%", "0");
+testComputed("stroke-opacity", "700%", "1");
+testComputed("stroke-opacity", "2.5e-1", "0.25");
+testComputed("stroke-opacity", "2.5e1%", "0.25");
+testComputed("stroke-opacity", "100.25%", "1");
+negativeTest("stroke-opacity", "2px");
+negativeTest("stroke-opacity", "auto");
+negativeTest("stroke-opacity", "none");
+negativeTest("stroke-opacity", "'str'");
+
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
index 6b08fb2..9fa8a25 100644 (file)
@@ -10,12 +10,12 @@ layer at (0,0) size 800x600
       RenderSVGRect {rect} at (182,182) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.60]}] [x=110.00] [y=110.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (232,232) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.80]}] [x=140.00] [y=140.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (282,282) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=170.00] [y=170.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (332,32) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-100.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (382,82) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-10.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (432,132) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-0.10]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (482,182) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=1.10]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (532,232) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=10.00]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (582,282) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=100.00]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (332,32) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (382,82) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (432,132) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (482,182) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (532,232) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (582,282) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
     RenderSVGContainer {g} at (16,516) size 385x64
       RenderSVGText {text} at (10,310) size 231x38 contains 1 chunk(s)
         RenderSVGInlineText {#text} at (0,0) size 231x38
index 710a8f4..0038cb3 100644 (file)
@@ -16,16 +16,16 @@ layer at (0,0) size 800x600
         RenderSVGEllipse {circle} at (635,439) size 30x29 [fill={[type=SOLID] [color=#66FF33]}] [cx=200.00] [cy=160.00] [r=5.00]
         RenderSVGEllipse {circle} at (635,495) size 30x30 [fill={[type=SOLID] [color=#66FF33]}] [cx=200.00] [cy=180.00] [r=5.00]
         RenderSVGEllipse {circle} at (635,552) size 30x29 [fill={[type=SOLID] [color=#66FF33]}] [cx=200.00] [cy=200.00] [r=5.00]
-        RenderSVGPath {path} at (140,42) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=-1.00] [stroke width=10.00]}] [data="M 20 20 L 200 20"]
-        RenderSVGPath {path} at (140,99) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=-0.10] [stroke width=10.00]}] [data="M 20 40 L 200 40"]
+        RenderSVGPath {path} at (140,42) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.00] [stroke width=10.00]}] [data="M 20 20 L 200 20"]
+        RenderSVGPath {path} at (140,99) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.00] [stroke width=10.00]}] [data="M 20 40 L 200 40"]
         RenderSVGPath {path} at (140,155) size 510x30 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.00] [stroke width=10.00]}] [data="M 20 60 L 200 60"]
         RenderSVGPath {path} at (140,212) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.20] [stroke width=10.00]}] [data="M 20 80 L 200 80"]
         RenderSVGPath {path} at (140,269) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.40] [stroke width=10.00]}] [data="M 20 100 L 200 100"]
         RenderSVGPath {path} at (140,325) size 510x30 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.60] [stroke width=10.00]}] [data="M 20 120 L 200 120"]
         RenderSVGPath {path} at (140,382) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.80] [stroke width=10.00]}] [data="M 20 140 L 200 140"]
         RenderSVGPath {path} at (140,439) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [stroke width=10.00]}] [data="M 20 160 L 200 160"]
-        RenderSVGPath {path} at (140,495) size 510x30 [stroke={[type=SOLID] [color=#0000FF] [opacity=1.10] [stroke width=10.00]}] [data="M 20 180 L 200 180"]
-        RenderSVGPath {path} at (140,552) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=2.00] [stroke width=10.00]}] [data="M 20 200 L 200 200"]
+        RenderSVGPath {path} at (140,495) size 510x30 [stroke={[type=SOLID] [color=#0000FF] [stroke width=10.00]}] [data="M 20 180 L 200 180"]
+        RenderSVGPath {path} at (140,552) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [stroke width=10.00]}] [data="M 20 200 L 200 200"]
     RenderSVGContainer {g} at (16,516) size 385x64
       RenderSVGText {text} at (10,310) size 231x38 contains 1 chunk(s)
         RenderSVGInlineText {#text} at (0,0) size 231x38
index 1c60099..1b09416 100644 (file)
@@ -9,12 +9,12 @@ layer at (0,0) size 480x360
       RenderSVGRect {rect} at (109,109) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.60]}] [x=110.00] [y=110.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (139,139) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.80]}] [x=140.00] [y=140.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (169,169) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=170.00] [y=170.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (199,19) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-100.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (229,49) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-10.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (259,79) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-0.10]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (289,109) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=1.10]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (319,139) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=10.00]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (349,169) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=100.00]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (199,19) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (229,49) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (259,79) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (289,109) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (319,139) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (349,169) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
     RenderSVGText {text} at (10,304) size 264x45 contains 1 chunk(s)
       RenderSVGInlineText {#text} at (0,0) size 264x45
         chunk 1 text run 1 at (10.00,340.00) startOffset 0 endOffset 16 width 263.34: "$Revision: 1.1 $"
index 1a7e255..8ef61a1 100644 (file)
@@ -10,12 +10,12 @@ layer at (0,0) size 800x600
       RenderSVGRect {rect} at (182,182) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.60]}] [x=110.00] [y=110.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (232,232) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.80]}] [x=140.00] [y=140.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (282,282) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=170.00] [y=170.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (332,32) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-100.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (382,82) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-10.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (432,132) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-0.10]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (482,182) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=1.10]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (532,232) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=10.00]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (582,282) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=100.00]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (332,32) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (382,82) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (432,132) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (482,182) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (532,232) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (582,282) size 103x103 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
     RenderSVGContainer {g} at (16,517) size 381x62
       RenderSVGText {text} at (10,310) size 229x38 contains 1 chunk(s)
         RenderSVGInlineText {#text} at (0,0) size 229x37
index e2521d1..083d029 100644 (file)
@@ -16,16 +16,16 @@ layer at (0,0) size 800x600
         RenderSVGEllipse {circle} at (635,439) size 30x29 [fill={[type=SOLID] [color=#66FF33]}] [cx=200.00] [cy=160.00] [r=5.00]
         RenderSVGEllipse {circle} at (635,495) size 30x30 [fill={[type=SOLID] [color=#66FF33]}] [cx=200.00] [cy=180.00] [r=5.00]
         RenderSVGEllipse {circle} at (635,552) size 30x29 [fill={[type=SOLID] [color=#66FF33]}] [cx=200.00] [cy=200.00] [r=5.00]
-        RenderSVGPath {path} at (140,42) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=-1.00] [stroke width=10.00]}] [data="M 20 20 L 200 20"]
-        RenderSVGPath {path} at (140,99) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=-0.10] [stroke width=10.00]}] [data="M 20 40 L 200 40"]
+        RenderSVGPath {path} at (140,42) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.00] [stroke width=10.00]}] [data="M 20 20 L 200 20"]
+        RenderSVGPath {path} at (140,99) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.00] [stroke width=10.00]}] [data="M 20 40 L 200 40"]
         RenderSVGPath {path} at (140,155) size 510x30 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.00] [stroke width=10.00]}] [data="M 20 60 L 200 60"]
         RenderSVGPath {path} at (140,212) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.20] [stroke width=10.00]}] [data="M 20 80 L 200 80"]
         RenderSVGPath {path} at (140,269) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.40] [stroke width=10.00]}] [data="M 20 100 L 200 100"]
         RenderSVGPath {path} at (140,325) size 510x30 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.60] [stroke width=10.00]}] [data="M 20 120 L 200 120"]
         RenderSVGPath {path} at (140,382) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=0.80] [stroke width=10.00]}] [data="M 20 140 L 200 140"]
         RenderSVGPath {path} at (140,439) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [stroke width=10.00]}] [data="M 20 160 L 200 160"]
-        RenderSVGPath {path} at (140,495) size 510x30 [stroke={[type=SOLID] [color=#0000FF] [opacity=1.10] [stroke width=10.00]}] [data="M 20 180 L 200 180"]
-        RenderSVGPath {path} at (140,552) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [opacity=2.00] [stroke width=10.00]}] [data="M 20 200 L 200 200"]
+        RenderSVGPath {path} at (140,495) size 510x30 [stroke={[type=SOLID] [color=#0000FF] [stroke width=10.00]}] [data="M 20 180 L 200 180"]
+        RenderSVGPath {path} at (140,552) size 510x29 [stroke={[type=SOLID] [color=#0000FF] [stroke width=10.00]}] [data="M 20 200 L 200 200"]
     RenderSVGContainer {g} at (16,517) size 381x62
       RenderSVGText {text} at (10,310) size 229x38 contains 1 chunk(s)
         RenderSVGInlineText {#text} at (0,0) size 229x37
index 6dd1143..438b7f2 100644 (file)
@@ -9,12 +9,12 @@ layer at (0,0) size 480x360
       RenderSVGRect {rect} at (109,109) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.60]}] [x=110.00] [y=110.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (139,139) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.80]}] [x=140.00] [y=140.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (169,169) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=170.00] [y=170.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (199,19) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-100.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (229,49) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-10.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (259,79) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-0.10]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (289,109) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=1.10]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (319,139) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=10.00]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (349,169) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=100.00]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (199,19) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (229,49) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (259,79) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (289,109) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (319,139) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (349,169) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
     RenderSVGText {text} at (10,304) size 264x46 contains 1 chunk(s)
       RenderSVGInlineText {#text} at (0,0) size 264x46
         chunk 1 text run 1 at (10.00,340.00) startOffset 0 endOffset 16 width 263.34: "$Revision: 1.1 $"
index 7bdc4c5..3fbe415 100644 (file)
@@ -9,12 +9,12 @@ layer at (0,0) size 480x360
       RenderSVGRect {rect} at (109,109) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.60]}] [x=110.00] [y=110.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (139,139) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.80]}] [x=140.00] [y=140.00] [width=60.00] [height=60.00]
       RenderSVGRect {rect} at (169,169) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=170.00] [y=170.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (199,19) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-100.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (229,49) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-10.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (259,79) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=-0.10]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (289,109) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=1.10]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (319,139) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=10.00]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
-      RenderSVGRect {rect} at (349,169) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=100.00]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (199,19) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=200.00] [y=20.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (229,49) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=230.00] [y=50.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (259,79) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF] [opacity=0.00]}] [x=260.00] [y=80.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (289,109) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=290.00] [y=110.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (319,139) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=320.00] [y=140.00] [width=60.00] [height=60.00]
+      RenderSVGRect {rect} at (349,169) size 62x62 [stroke={[type=SOLID] [color=#000000]}] [fill={[type=SOLID] [color=#0000FF]}] [x=350.00] [y=170.00] [width=60.00] [height=60.00]
     RenderSVGText {text} at (10,304) size 264x46 contains 1 chunk(s)
       RenderSVGInlineText {#text} at (0,0) size 264x46
         chunk 1 text run 1 at (10.00,340.00) startOffset 0 endOffset 16 width 264.00: "$Revision: 1.1 $"
index 0c1d9d6..11d3a58 100644 (file)
@@ -80,7 +80,7 @@ PASS computedStyle("width", "calc(100% - 100px)") is "calc(100% - 100px)"
 PASS computedStyle("x", "calc(100% - 100px)") is "calc(100% - 100px)"
 PASS computedStyle("y", "calc(100% - 100px)") is "calc(100% - 100px)"
 PASS computedStyle("stroke-miterlimit", "calc(500 - 400)") is "100"
-PASS computedStyle("flood-opacity", "calc(500 - 400)") is "100"
+PASS computedStyle("flood-opacity", "calc(0.75 - 0.25)") is "0.5"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 3cbc15d..3f86b9f 100644 (file)
@@ -94,7 +94,7 @@ testComputed("y", "calc(100% - 100px)", "calc(100% - 100px)");
 
 // Number value properties.
 testComputed("stroke-miterlimit", "calc(500 - 400)", "100");
-testComputed("flood-opacity", "calc(500 - 400)", "100");
+testComputed("flood-opacity", "calc(0.75 - 0.25)", "0.5");
 
 </script>
 <script src="../../resources/js-test-post.js"></script>
index 2373485..631a005 100644 (file)
@@ -16,7 +16,7 @@
             stroke-dasharray: 10 5 10 auto;
             clip-path: url(#clip1) auto;
             clip-rule: evenodd auto;
-            opacity: 0%; /* does not seem supported yet */
+            opacity: 'str';
             visibility: hidden auto;
         }
         #circle {
index 37f8190..5573684 100644 (file)
@@ -1,5 +1,28 @@
 2019-10-29  Dirk Schulze  <krit@webkit.org>
 
+        [SVG2] fill-opacity, stroke-opacity, stop-opacity and flood-opacity doe not support percentage
+        https://bugs.webkit.org/show_bug.cgi?id=201731
+
+        Reviewed by Simon Fraser.
+
+        The CSS properties opacity, fill-opacity, stroke-opacity, stop-opacity, flood-opacity support
+        percentage in addition to number values.
+        Add percentage support.
+
+        Tests: fast/css/parsing-opacity.html
+               fast/svg/parsing-fill-opacity.html
+               fast/svg/parsing-flood-opacity.html
+               fast/svg/parsing-stop-opacity.html
+               fast/svg/parsing-stroke-opacity.html
+
+        * css/CSSProperties.json: opacity needs to use Opacity converter now.
+        * css/StyleBuilderConverter.h:
+        (WebCore::StyleBuilderConverter::convertOpacity): Clamp values to [0,1]
+        * css/parser/CSSPropertyParser.cpp:
+        (WebCore::CSSPropertyParser::parseSingleValue): Parse percentage values.
+
+2019-10-29  Dirk Schulze  <krit@webkit.org>
+
         Add CSS Masking and SVG 2 to feature list
         https://bugs.webkit.org/show_bug.cgi?id=186155
 
index d79891b..92ebc0b 100644 (file)
         },
         "opacity": {
             "codegen-properties": {
+                "converter": "Opacity",
                 "aliases": [
                     "-webkit-opacity"
                 ]
index 82b46fe..089957d 100644 (file)
@@ -1456,7 +1456,7 @@ inline float StyleBuilderConverter::convertOpacity(StyleResolver&, const CSSValu
     float opacity = primitiveValue.floatValue();
     if (primitiveValue.isPercentage())
         opacity /= 100.0f;
-    return opacity;
+    return std::max(0.0f, std::min(1.0f, opacity));
 }
 
 inline String StyleBuilderConverter::convertSVGURIReference(StyleResolver& styleResolver, const CSSValue& value)
index b8e96fd..f5098e3 100644 (file)
@@ -4091,6 +4091,12 @@ RefPtr<CSSValue> CSSPropertyParser::parseSingleValue(CSSPropertyID property, CSS
     case CSSPropertyStopOpacity:
     case CSSPropertyFloodOpacity:
     case CSSPropertyOpacity:
+    {
+        RefPtr<CSSValue> parsedValue = consumeNumber(m_range, ValueRangeAll);
+        if (parsedValue)
+            return parsedValue;
+        return consumePercent(m_range, ValueRangeAll);
+    }
     case CSSPropertyWebkitBoxFlex:
         return consumeNumber(m_range, ValueRangeAll);
     case CSSPropertyBaselineShift: