[svg2] Make 'cx', 'cy' and 'r' presentation attributes

LayoutTests/svg/css/parse-length.html

Index: LayoutTests/svg/css/parse-length.html
diff --git a/LayoutTests/svg/css/parse-length.html b/LayoutTests/svg/css/parse-length.html
index f7044b9f57a3b2d0f1313667a17736fa1e3c1268..ed2d1c5d395c895d27c98578fbca57b325f68568 100644
--- a/LayoutTests/svg/css/parse-length.html
+++ b/LayoutTests/svg/css/parse-length.html
@@ -11,90 +11,114 @@ div { font-size: 8px; }
 <script>
 description("Test that 'length' presentation attribute values are parsed with CSS presentation rules.");
 
-function computedStyle(property, value) {
-    var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-    document.getElementById('svg').appendChild(rect);
-    rect.setAttribute(property, value);
-    var computedValue = getComputedStyle(rect).getPropertyValue(property);
-    document.getElementById('svg').removeChild(rect);
+function computedStyle(elementname, property, value) {
+    var elm = document.createElementNS('http://www.w3.org/2000/svg', elementname);
+    document.getElementById('svg').appendChild(elm);
+    elm.setAttribute(property, value);
+    var computedValue = getComputedStyle(elm).getPropertyValue(property);
+    document.getElementById('svg').removeChild(elm);
     return computedValue;
 }
 
-function testComputed(property, value, expected) {
-    shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
+function testComputed(elementname, property, value, expected) {
+    shouldBeEqualToString('computedStyle("' + elementname + '", "' + property + '", "' + value + '")', expected);
 }
 
-function negativeTest(property, value) {
-    testComputed(property, value, "auto");
+function negativeTest(elementname, property, value) {
+    testComputed(elementname, property, value, "auto");
 }
 
-function negativeTestZero(property, value) {
-    testComputed(property, value, "0px");
+function negativeTestZero(elementname, property, value) {
+    testComputed(elementname, property, value, "0px");
 }
 
-// Test 'x'.
-testComputed("x", "  100", "100px");
-testComputed("x", "100   ", "100px");
-testComputed("x", "100px", "100px");
-testComputed("x", "1em", "16px");
-// testComputed("x", "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
-testComputed("x", "20%", "20%");
-testComputed("x", "-200px", "-200px");
+var xyelements = [ "mask", "svg", "rect", "image", "foreignObject" ];
+for (var i = 0; i < xyelements.length; i++) {

[fs, 2015/03/09 12:34:33]

for (var elmName of xyElements) {

? (same below)

[Erik Dahlström (inactive), 2015/03/09 13:59:02]

Done.

+	var elm = xyelements[i];

[fs, 2015/03/09 12:34:33]

Tabs vs. spaces.

[Erik Dahlström (inactive), 2015/03/09 13:59:02]

Done.

+	// Test 'x'.
+	testComputed(elm, "x", "  100", "100px");
+	testComputed(elm, "x", "100   ", "100px");
+	testComputed(elm, "x", "100px", "100px");
+	testComputed(elm, "x", "1em", "16px");
+	// testComputed(elm, "x", "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
+	testComputed(elm, "x", "20%", "20%");
+	testComputed(elm, "x", "-200px", "-200px");
 
-// Test 'y'.
-testComputed("y", "  100", "100px");
-testComputed("y", "100   ", "100px");
-testComputed("y", "100px", "100px");
-testComputed("y", "1em", "16px");
-// testComputed("y", "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
-testComputed("y", "20%", "20%");
-testComputed("y", "-200px", "-200px");
+	// Test 'y'.
+	testComputed(elm, "y", "  100", "100px");
+	testComputed(elm, "y", "100   ", "100px");
+	testComputed(elm, "y", "100px", "100px");
+	testComputed(elm, "y", "1em", "16px");
+	// testComputed(elm, "y", "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
+	testComputed(elm, "y", "20%", "20%");
+	testComputed(elm, "y", "-200px", "-200px");
 
-// Negative tests for 'x'.
-negativeTestZero("x", "auto", "auto");
-negativeTestZero("x", "100   px");
-negativeTestZero("x", "100px;");
-negativeTestZero("x", "100px !important");
-negativeTestZero("x", "{ 100px }");
+	// Negative tests for 'x'.
+	negativeTestZero(elm, "x", "auto", "auto");
+	negativeTestZero(elm, "x", "100   px");
+	negativeTestZero(elm, "x", "100px;");
+	negativeTestZero(elm, "x", "100px !important");
+	negativeTestZero(elm, "x", "{ 100px }");
 
-// Negative tests for 'y'.
-negativeTestZero("y", "auto");
-negativeTestZero("y", "100   px");
-negativeTestZero("y", "100px;");
-negativeTestZero("y", "100px !important");
-negativeTestZero("y", "{ 100px }");
+	// Negative tests for 'y'.
+	negativeTestZero(elm, "y", "auto");
+	negativeTestZero(elm, "y", "100   px");
+	negativeTestZero(elm, "y", "100px;");
+	negativeTestZero(elm, "y", "100px !important");
+	negativeTestZero(elm, "y", "{ 100px }");
+}
+
+var rxryelements = [ "rect", "ellipse" ];
+for (var i = 0; i < rxryelements.length; i++) {
+	var elm = rxryelements[i];
+	// Test 'rx'.
+	testComputed(elm, "rx", "  100", "100px");
+	testComputed(elm, "rx", "100   ", "100px");
+	testComputed(elm, "rx", "100px", "100px");
+	testComputed(elm, "rx", "1em", "16px");
+	// testComputed(elm, "rx", "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
+	testComputed(elm, "rx", "20%", "20%");
+	testComputed(elm, "rx", "-200px", "-200px");
 
-// Test 'rx'.
-testComputed("rx", "  100", "100px");
-testComputed("rx", "100   ", "100px");
-testComputed("rx", "100px", "100px");
-testComputed("rx", "1em", "16px");
-// testComputed("rx", "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
-testComputed("rx", "20%", "20%");
-testComputed("rx", "-200px", "-200px");
+	// Test 'ry'.
+	testComputed(elm, "ry", "  100", "100px");
+	testComputed(elm, "ry", "100   ", "100px");
+	testComputed(elm, "ry", "100px", "100px");
+	testComputed(elm, "ry", "1em", "16px");
+	// testComputed(elm, "ry", "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
+	testComputed(elm, "ry", "20%", "20%");
+	testComputed(elm, "ry", "-200px", "-200px");
 
-// Test 'ry'.
-testComputed("ry", "  100", "100px");
-testComputed("ry", "100   ", "100px");
-testComputed("ry", "100px", "100px");
-testComputed("ry", "1em", "16px");
-// testComputed("ry", "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
-testComputed("ry", "20%", "20%");
-testComputed("ry", "-200px", "-200px");
+	// Negative tests for 'rx'.
+	negativeTestZero(elm, "rx", "auto", "auto");
+	negativeTestZero(elm, "rx", "100   px");
+	negativeTestZero(elm, "rx", "100px;");
+	negativeTestZero(elm, "rx", "100px !important");
+	negativeTestZero(elm, "rx", "{ 100px }");
+
+	// Negative tests for 'ry'.
+	negativeTestZero(elm, "ry", "auto");
+	negativeTestZero(elm, "ry", "100   px");
+	negativeTestZero(elm, "ry", "100px;");
+	negativeTestZero(elm, "ry", "100px !important");
+	negativeTestZero(elm, "ry", "{ 100px }");
+}
 
-// Negative tests for 'rx'.
-negativeTestZero("rx", "auto", "auto");
-negativeTestZero("rx", "100   px");
-negativeTestZero("rx", "100px;");
-negativeTestZero("rx", "100px !important");
-negativeTestZero("rx", "{ 100px }");
+// Test 'r'.
+testComputed("circle", "r", "  100", "100px");

[fs, 2015/03/09 12:34:33]

Since we're pretty much repeating the same set of values, and only varying the
<element, attribute> tuple, maybe it'd be possible to make a function
testAttributeOnElement(elementName, attributeName) (or something) and just call
that with the proper parameters? (Should make it more obvious that we're testing
the same thing for all the "combinations")

[Erik Dahlström (inactive), 2015/03/09 13:59:02]

Done.

+testComputed("circle", "r", "100   ", "100px");
+testComputed("circle", "r", "100px", "100px");
+testComputed("circle", "r", "1em", "16px");
+// testComputed("circle", "r", "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
+testComputed("circle", "r", "20%", "20%");
+testComputed("circle", "r", "-200px", "-200px");
 
-// Negative tests for 'ry'.
-negativeTestZero("ry", "auto");
-negativeTestZero("ry", "100   px");
-negativeTestZero("ry", "100px;");
-negativeTestZero("ry", "100px !important");
-negativeTestZero("ry", "{ 100px }");
+// Negative tests for 'r'.
+negativeTestZero("circle", "r", "auto", "auto");
+negativeTestZero("circle", "r", "100   px");
+negativeTestZero("circle", "r", "100px;");
+negativeTestZero("circle", "r", "100px !important");
+negativeTestZero("circle", "r", "{ 100px }");
 </script>
 </body>
 </html>