Only allow calc() combinations as per spec.

lilles · chromium-wpt-export-bot · commit 2e5ea4313ba7 · 2020-04-03T06:16:16.000-07:00
We allowed calc expressions combining numbers and lengths, numbers and percentages, and even a combination of numbers, percentages, and lengths. None of those are allowed per the CSS Values and Units spec, and it made it possible to combine user units, lengths, and percentages into the same calc() for certain SVG CSS properties and attributes. See also: w3c/csswg-drafts#4874 This improves SVG interop with Firefox. Firefox does not support calc() for numbers, though. Bug: 1061714 Change-Id: I9e5c492122242e51064310a40e28a233530e357c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2134251 Commit-Queue: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/master@{#756226}
diff --git a/svg/animations/svglength-additive-by-8.html b/svg/animations/svglength-additive-by-8.html
@@ -13,8 +13,8 @@
 <!-- an1: Change width from 10 to 50 in 4s -->
 <!-- an2: Change width from 10 to 100 in 4s starting at 5s -->
 <rect width="10" height="100" fill="green">
-    <animate id="an1" attributeType="XML" attributeName="width" fill="remove" by="calc(4% + 8)" begin="0s" dur="4s"/>
-        <animate id="an2" attributeType="XML" attributeName="width" additive="replace" fill="freeze" by="calc(10% + 10)" begin="5s" dur="4s"/>
+    <animate id="an1" attributeType="XML" attributeName="width" fill="remove" by="calc(4% + 8px)" begin="0s" dur="4s"/>
+        <animate id="an2" attributeType="XML" attributeName="width" additive="replace" fill="freeze" by="calc(10% + 10px)" begin="5s" dur="4s"/>
 </rect>
 
 </svg>
@@ -73,4 +73,4 @@
 
 window.animationStartsImmediately = true;
 
-</script>
+</script>
diff --git a/svg/painting/parsing/stroke-dasharray-invalid.svg b/svg/painting/parsing/stroke-dasharray-invalid.svg
@@ -17,6 +17,9 @@ test_invalid_value("stroke-dasharray", "auto");
 test_invalid_value("stroke-dasharray", "none 10px");
 test_invalid_value("stroke-dasharray", "20px / 30px");
 test_invalid_value("stroke-dasharray", "-40px");
+test_invalid_value("stroke-dasharray", "calc(2px + 3)");
+test_invalid_value("stroke-dasharray", "calc(10% + 5)");
+test_invalid_value("stroke-dasharray", "calc(40 + calc(3px + 6%))");
 
   ]]></script>
 </svg>
diff --git a/svg/painting/parsing/stroke-dasharray-valid.svg b/svg/painting/parsing/stroke-dasharray-valid.svg
@@ -23,6 +23,9 @@ test_valid_value("stroke-dasharray", "calc(2em + 3ex)");
 test_valid_value("stroke-dasharray", "10pt 20% 30pc 40in", "10pt, 20%, 30pc, 40in");
 test_valid_value("stroke-dasharray", "10vmin, 20vmax, 30em, 40ex");
 test_valid_value("stroke-dasharray", "0, 5", ["0, 5", "0px, 5px"]); // Edge/Safari serialize numbers as lengths.
+test_valid_value("stroke-dasharray", "calc(3)");
+test_valid_value("stroke-dasharray", "calc(2 + 1)", "calc(3)");
+test_valid_value("stroke-dasharray", "calc(2 + (7 - 5))", "calc(4)");
 
   ]]></script>
 </svg>
diff --git a/svg/painting/parsing/stroke-dashoffset-invalid.svg b/svg/painting/parsing/stroke-dashoffset-invalid.svg
@@ -17,6 +17,9 @@ test_invalid_value("stroke-dashoffset", "auto");
 test_invalid_value("stroke-dashoffset", "-10.px");
 test_invalid_value("stroke-dashoffset", "30deg");
 test_invalid_value("stroke-dashoffset", "40px 50%");
+test_invalid_value("stroke-dashoffset", "calc(2px + 3)");
+test_invalid_value("stroke-dashoffset", "calc(10% + 5)");
+test_invalid_value("stroke-dashoffset", "calc(40 + calc(3px + 6%))");
 
   ]]></script>
 </svg>
diff --git a/svg/painting/parsing/stroke-dashoffset-valid.svg b/svg/painting/parsing/stroke-dashoffset-valid.svg
@@ -19,6 +19,9 @@ test_valid_value("stroke-dashoffset", "-20%");
 test_valid_value("stroke-dashoffset", "30", "30px");
 test_valid_value("stroke-dashoffset", "40Q", "40q");
 test_valid_value("stroke-dashoffset", "calc(2em + 3ex)");
+test_valid_value("stroke-dashoffset", "calc(3)");
+test_valid_value("stroke-dashoffset", "calc(2 + 1)", "calc(3)");
+test_valid_value("stroke-dashoffset", "calc(2 + (7 - 5))", "calc(4)");
 
   ]]></script>
 </svg>
diff --git a/svg/painting/parsing/stroke-width-invalid.svg b/svg/painting/parsing/stroke-width-invalid.svg
@@ -17,6 +17,9 @@ test_invalid_value("stroke-width", "auto");
 test_invalid_value("stroke-width", "10px 20px");
 test_invalid_value("stroke-width", "-1px");
 test_invalid_value("stroke-width", "-10%");
+test_invalid_value("stroke-width", "calc(2px + 3)");
+test_invalid_value("stroke-width", "calc(10% + 5)");
+test_invalid_value("stroke-width", "calc(40 + calc(3px + 6%))");
 
   ]]></script>
 </svg>
diff --git a/svg/painting/parsing/stroke-width-valid.svg b/svg/painting/parsing/stroke-width-valid.svg
@@ -20,6 +20,9 @@ test_valid_value("stroke-width", "calc(2em + 3ex)");
 test_valid_value("stroke-width", "4%");
 test_valid_value("stroke-width", "5vmin");
 test_valid_value("stroke-width", "calc(50% + 60px)");
+test_valid_value("stroke-width", "calc(3)");
+test_valid_value("stroke-width", "calc(2 + 1)", "calc(3)");
+test_valid_value("stroke-width", "calc(2 + (7 - 5))", "calc(4)");
 
   ]]></script>
 </svg>
