Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/svg/geometry
parent: Initial commit. (diff)
download: firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
47 files changed, 1358 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/geometry/inheritance.svg b/testing/web-platform/tests/svg/geometry/inheritance.svg
new file mode 100644
index 0000000000..760328ac31
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/inheritance.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>Inheritance of geometry properties</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+    <h:meta name="assert" content="None of the geometry properties inherit."/>
+    <h:meta name="assert" content="Properties have initial values according to spec."/>
+  </metadata>
+  <g id="container">
+      <g id="target"></g>
+  </g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/inheritance-testcommon.js"/>
+  <script><![CDATA[
+
+assert_not_inherited('cx', '0px', '-10px');
+assert_not_inherited('cy', '0px', '-10px');
+assert_not_inherited('r', '0px', '10px');
+assert_not_inherited('rx', 'auto', '10px');
+assert_not_inherited('ry', 'auto', '10px');
+assert_not_inherited('x', '0px', '-10px');
+assert_not_inherited('y', '0px', '-10px');
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/cx-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/cx-computed.svg
new file mode 100644
index 0000000000..c349a6b97c
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/cx-computed.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: getComputedStyle().cx</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CX"/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("cx", "-10px");
+test_computed_value("cx", "0.5em", "20px");
+test_computed_value("cx", "calc(10px + 0.5em)", "30px");
+test_computed_value("cx", "calc(10px - 0.5em)", "-10px");
+test_computed_value("cx", "40%");
+test_computed_value("cx", "calc(50% + 60px)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/cx-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/cx-invalid.svg
new file mode 100644
index 0000000000..4b1b90158f
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/cx-invalid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing cx with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CX"/>
+    <h:meta name="assert" content="cx supports only the grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("cx", "10");
+test_invalid_value("cx", "auto");
+test_invalid_value("cx", "10px 20px");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/cx-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/cx-valid.svg
new file mode 100644
index 0000000000..a96fee5655
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/cx-valid.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing cx with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CX"/>
+    <h:meta name="assert" content="cx supports the full grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("cx", "0", "0px");
+test_valid_value("cx", "-1px");
+test_valid_value("cx", "calc(2em + 3ex)");
+test_valid_value("cx", "4%");
+test_valid_value("cx", "5ch");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/cy-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/cy-computed.svg
new file mode 100644
index 0000000000..a37c99560b
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/cy-computed.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: getComputedStyle().cy</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CY"/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("cy", "-10px");
+test_computed_value("cy", "0.5em", "20px");
+test_computed_value("cy", "calc(10px + 0.5em)", "30px");
+test_computed_value("cy", "calc(10px - 0.5em)", "-10px");
+test_computed_value("cy", "40%");
+test_computed_value("cy", "calc(50% + 60px)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/cy-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/cy-invalid.svg
new file mode 100644
index 0000000000..528eed02ce
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/cy-invalid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing cy with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CY"/>
+    <h:meta name="assert" content="cy supports only the grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("cy", "10");
+test_invalid_value("cy", "auto");
+test_invalid_value("cy", "10px 20px");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/cy-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/cy-valid.svg
new file mode 100644
index 0000000000..022445662b
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/cy-valid.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing cy with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#CY"/>
+    <h:meta name="assert" content="cy supports the full grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("cy", "0", "0px");
+test_valid_value("cy", "-1px");
+test_valid_value("cy", "calc(2em + 3ex)");
+test_valid_value("cy", "4%");
+test_valid_value("cy", "5rem");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/height-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/height-computed.svg
new file mode 100644
index 0000000000..bcc1f9d0e1
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/height-computed.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>SVG Geometry Properties: getComputedStyle().height</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"/>
+    <h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/>
+  </metadata>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <svg width="200" height="100" id="test-content">
+    <rect/>
+    <rect width="100" height="200"/>
+    <rect width="42" style="height: auto"/>
+    <rect width="42" style="height: 20px"/>
+    <rect width="42" style="height: 40%"/>
+    <rect width="42" style="height: 80%; display: none"/>
+
+    <g><rect width="100" height="100"/></g>
+    <g width="100" height="42px"><rect width="100" height="100"/></g>
+    <g style="width: 10%; height: auto"><rect width="100" height="100"/></g>
+    <g style="width: auto; height: 20px"><rect width="100" height="100"/></g>
+    <g style="width: 20px; height: 10%"><rect width="100" height="100"/></g>
+
+    <image/>
+    <image width="42" height="200"/>
+    <image width="42" style="height: auto"/>
+    <image width="42" style="height: 230px"/>
+    <image width="42" style="height: 25%"/>
+    <image width="42" style="height: 25%; display: none"/>
+
+    <foreignObject>Some content</foreignObject>
+    <foreignObject height="200">Some content</foreignObject>
+    <foreignObject style="height: auto">Some content</foreignObject>
+    <foreignObject style="height: 75px">Some content</foreignObject>
+    <foreignObject style="height: 50%">Some content</foreignObject>
+    <foreignObject style="height: auto; display: none">Some content</foreignObject>
+
+    <svg/>
+    <svg height="200"/>
+    <svg style="height: auto"/>
+    <svg style="height: 200px"/>
+    <svg style="height: 50%"/>
+    <svg style="height: auto; display: none"/>
+
+    <text>Text1</text>
+    <text width="100px" height="42">Text2</text>
+    <text style="width: 30%; height: auto">Text3</text>
+    <text style="width: auto; height: 20px">Text3</text>
+    <text style="width: 20px; height: 30%">Text3</text>
+  </svg>
+  <script><![CDATA[
+[
+  // Cases where computed 'height' return the used value.
+  {
+    element: 'rect',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '200px', description: 'presentation attribute' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+      { value: '40px', description: 'inline style (percentage)' },
+      { value: '80%', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'image',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '200px', description: 'presentation attribute' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '230px', description: 'inline style (pixels)' },
+      { value: '25px', description: 'inline style (percentage)' },
+      { value: '25%', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'foreignObject',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '200px', description: 'presentation attribute' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '75px', description: 'inline style (pixels)' },
+      { value: '50px', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'svg',
+    expected: [
+      { value: '100px', description: 'initial' },
+      { value: '200px', description: 'presentation attribute' },
+      { value: '100px', description: 'inline style (auto)' },
+      { value: '200px', description: 'inline style (pixels)' },
+      { value: '50px', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style but "display: none"' },
+    ]
+  },
+
+  // Cases where computed 'height' return the computed value.
+  {
+    element: 'g',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'initial (with dummy attribute)' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+      { value: '10%', description: 'inline style (percentage)' },
+    ]
+  },
+  {
+    element: 'text',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'initial (with dummy attribute)' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+      { value: '30%', description: 'inline style (percentage)' },
+    ]
+  },
+].forEach(function(entry) {
+  let element_set = document.querySelectorAll('#test-content > ' + entry.element);
+  entry.expected.forEach(function(expected, index) {
+    test(function() {
+      let style = getComputedStyle(element_set[index]);
+      assert_equals(style.height, expected.value, expected.description);
+    }, document.title + ', <' + entry.element + '> ' + expected.description);
+  });
+});
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/r-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/r-computed.svg
new file mode 100644
index 0000000000..ac897cd91a
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/r-computed.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: getComputedStyle().r</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#R"/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("r", "10px");
+test_computed_value("r", "0.5em", "20px");
+test_computed_value("r", "calc(10px + 0.5em)", "30px");
+test_computed_value("r", "calc(10px - 0.5em)", "0px");
+test_computed_value("r", "40%");
+test_computed_value("r", "calc(50% + 60px)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/r-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/r-invalid.svg
new file mode 100644
index 0000000000..a14c52266c
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/r-invalid.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing r with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#R"/>
+    <h:meta name="assert" content="r supports only the grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("r", "10");
+test_invalid_value("r", "auto");
+test_invalid_value("r", "10px 20px");
+test_invalid_value("r", "-1px");
+test_invalid_value("r", "-10%");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/r-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/r-valid.svg
new file mode 100644
index 0000000000..70cd5503b7
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/r-valid.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing r with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#R"/>
+    <h:meta name="assert" content="r supports the full grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("r", "0", "0px");
+test_valid_value("r", "1px");
+test_valid_value("r", "calc(2em + 3ex)");
+test_valid_value("r", "4%");
+test_valid_value("r", "5vmin");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/rx-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/rx-computed.svg
new file mode 100644
index 0000000000..c07368b5f2
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/rx-computed.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: getComputedStyle().rx</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RX"/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("rx", "auto");
+
+test_computed_value("rx", "10px");
+test_computed_value("rx", "0.5em", "20px");
+test_computed_value("rx", "calc(10px + 0.5em)", "30px");
+test_computed_value("rx", "calc(10px - 0.5em)", "0px");
+test_computed_value("rx", "40%");
+test_computed_value("rx", "calc(50% + 60px)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/rx-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/rx-invalid.svg
new file mode 100644
index 0000000000..9ce0603bea
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/rx-invalid.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing rx with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RX"/>
+    <h:meta name="assert" content="rx supports only the grammar '&lt;length-percentage&gt; | auto'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("rx", "10");
+test_invalid_value("rx", "none");
+test_invalid_value("rx", "10px 20px");
+test_invalid_value("rx", "-1px");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/rx-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/rx-valid.svg
new file mode 100644
index 0000000000..9d156b3ccc
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/rx-valid.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing rx with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RX"/>
+    <h:meta name="assert" content="rx supports the full grammar '&lt;length-percentage&gt; | auto'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("rx", "auto");
+
+test_valid_value("rx", "0", "0px");
+test_valid_value("rx", "1px");
+test_valid_value("rx", "calc(2em + 3ex)");
+test_valid_value("rx", "4%");
+test_valid_value("rx", "5vw");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/ry-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/ry-computed.svg
new file mode 100644
index 0000000000..8e54bd219d
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/ry-computed.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: getComputedStyle().ry</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RY"/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("ry", "auto");
+
+test_computed_value("ry", "10px");
+test_computed_value("ry", "0.5em", "20px");
+test_computed_value("ry", "calc(10px + 0.5em)", "30px");
+test_computed_value("ry", "calc(10px - 0.5em)", "0px");
+test_computed_value("ry", "40%");
+test_computed_value("ry", "calc(50% + 60px)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/ry-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/ry-invalid.svg
new file mode 100644
index 0000000000..5938ae830d
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/ry-invalid.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing ry with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RY"/>
+    <h:meta name="assert" content="ry supports only the grammar '&lt;length-percentage&gt; | auto'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("ry", "10");
+test_invalid_value("ry", "none");
+test_invalid_value("ry", "10px 20px");
+test_invalid_value("ry", "-1px");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/ry-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/ry-valid.svg
new file mode 100644
index 0000000000..178c0c007d
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/ry-valid.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing ry with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#RY"/>
+    <h:meta name="assert" content="ry supports the full grammar '&lt;length-percentage&gt; | auto'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("ry", "auto");
+
+test_valid_value("ry", "0", "0px");
+test_valid_value("ry", "1px");
+test_valid_value("ry", "calc(2em + 3ex)");
+test_valid_value("ry", "4%");
+test_valid_value("ry", "5vh");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/sizing-properties-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/sizing-properties-computed.svg
new file mode 100644
index 0000000000..01713fbbe2
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/sizing-properties-computed.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="800px">
+  <title>SVG Geometry Properties: getComputedStyle().width</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"/>
+    <h:link rel="help" href="https://drafts.csswg.org/css-sizing-3/#preferred-size-properties"/>
+    <h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/>
+  </metadata>
+  <rect id="target"></rect>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("width", "10px");
+test_computed_value("width", "0.5em", "20px");
+test_computed_value("width", "calc(10px + 0.5em)", "30px");
+test_computed_value("width", "calc(10px - 0.5em)", "0px");
+test_computed_value("width", "40%", "320px");
+test_computed_value("width", "calc(50% + 1.5em)", "460px");
+
+test_computed_value("height", "10px");
+test_computed_value("height", "0.5em", "20px");
+test_computed_value("height", "calc(10px + 0.5em)", "30px");
+test_computed_value("height", "calc(10px - 0.5em)", "0px");
+test_computed_value("height", "40%", "320px");
+test_computed_value("height", "calc(50% + 1.5em)", "460px");
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style.width = 'calc(50% + 1.5em)';
+  target.style.display = 'none';
+  assert_equals(getComputedStyle(target).width, 'calc(50% + 60px)');
+  target.style.width = '';
+  target.style.display = '';
+}, "resolved value is computed value when display is none");
+
+test(() => {
+  const target = document.getElementById('target');
+  target.style.height = 'calc(50% + 1.5em)';
+  target.style.display = 'none';
+  assert_equals(getComputedStyle(target).height, 'calc(50% + 60px)');
+  target.style.height = '';
+  target.style.display = '';
+}, "resolved value is computed value when display is contents");
+
+  ]]></script>
+}
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/width-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/width-computed.svg
new file mode 100644
index 0000000000..1af3de1234
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/width-computed.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>SVG Geometry Properties: getComputedStyle().width</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"/>
+    <h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/>
+  </metadata>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <svg width="200" height="100" id="test-content">
+    <rect/>
+    <rect width="100" height="200"/>
+    <rect height="42" style="width: 40%"/>
+    <rect height="42" style="width: auto"/>
+    <rect height="42" style="width: 20px"/>
+    <rect height="42" style="width: 42%; display: none"/>
+
+    <g><rect width="100" height="100"/></g>
+    <g width="100" height="42px"><rect width="100" height="100"/></g>
+    <g style="width: 10%; height: auto"><rect width="100" height="100"/></g>
+    <g style="width: auto; height: 20px"><rect width="100" height="100"/></g>
+    <g style="width: 20px; height: 10%"><rect width="100" height="100"/></g>
+
+    <image/>
+    <image width="100"/>
+    <image height="42" style="width: 25%"/>
+    <image height="42" style="width: auto"/>
+    <image height="42" style="width: 230px"/>
+    <image height="42" style="width: 25%; display: none"/>
+
+    <foreignObject>Some content</foreignObject>
+    <foreignObject width="100">Some content</foreignObject>
+    <foreignObject style="width: 50%">Some content</foreignObject>
+    <foreignObject style="width: auto">Some content</foreignObject>
+    <foreignObject style="width: 75px">Some content</foreignObject>
+    <foreignObject style="width: auto; display: none">Some content</foreignObject>
+
+    <svg/>
+    <svg width="100"/>
+    <svg style="width: auto"/>
+    <svg style="width: 200px"/>
+    <svg style="width: 50%"/>
+    <svg style="width: auto; display: none"/>
+
+    <text>Text1</text>
+    <text width="100px" height="42">Text2</text>
+    <text style="width: 30%; height: auto">Text3</text>
+    <text style="width: auto; height: 20px">Text3</text>
+    <text style="width: 20px; height: 30%">Text3</text>
+  </svg>
+  <script><![CDATA[
+[
+  // Cases where computed 'width' return the used value.
+  {
+    element: 'rect',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '100px', description: 'presentation attribute' },
+      { value: '80px', description: 'inline style (percentage)' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+      { value: '42%', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'image',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '100px', description: 'presentation attribute' },
+      { value: '50px', description: 'inline style (percentage)' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '230px', description: 'inline style (pixels)' },
+      { value: '25%', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'foreignObject',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '100px', description: 'presentation attribute' },
+      { value: '100px', description: 'inline style (percentage)' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '75px', description: 'inline style (pixels)' },
+      { value: 'auto', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'svg',
+    expected: [
+      { value: '200px', description: 'initial' },
+      { value: '100px', description: 'presentation attribute' },
+      { value: '200px', description: 'inline style (auto)' },
+      { value: '200px', description: 'inline style (pixels)' },
+      { value: '100px', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style but "display: none"' },
+    ]
+  },
+
+  // Cases where computed 'width' return the computed value.
+  {
+    element: 'g',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'initial (with dummy attribute)' },
+      { value: '10%', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+    ]
+  },
+  {
+    element: 'text',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'initial (with dummy attribute)' },
+      { value: '30%', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+    ]
+  },
+].forEach(function(entry) {
+  let element_set = document.querySelectorAll('#test-content > ' + entry.element);
+  entry.expected.forEach(function(expected, index) {
+    test(function() {
+      let style = getComputedStyle(element_set[index]);
+      assert_equals(style.width, expected.value, expected.description);
+    }, document.title + ', <' + entry.element + '> ' + expected.description);
+  });
+});
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/x-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/x-computed.svg
new file mode 100644
index 0000000000..458c343814
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/x-computed.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: getComputedStyle().x</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#X"/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("x", "-10px");
+test_computed_value("x", "0.5em", "20px");
+test_computed_value("x", "calc(10px + 0.5em)", "30px");
+test_computed_value("x", "calc(10px - 0.5em)", "-10px");
+test_computed_value("x", "40%");
+test_computed_value("x", "calc(50% + 60px)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/x-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/x-invalid.svg
new file mode 100644
index 0000000000..31ad29524e
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/x-invalid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing x with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#X"/>
+    <h:meta name="assert" content="x supports only the grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("x", "10");
+test_invalid_value("x", "auto");
+test_invalid_value("x", "10px 20px");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/x-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/x-valid.svg
new file mode 100644
index 0000000000..2b06f26ac4
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/x-valid.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing x with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#X"/>
+    <h:meta name="assert" content="x supports the full grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("x", "0", "0px");
+test_valid_value("x", "-1px");
+test_valid_value("x", "calc(2em + 3ex)");
+test_valid_value("x", "4%");
+test_valid_value("x", "5cm");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/y-computed.svg b/testing/web-platform/tests/svg/geometry/parsing/y-computed.svg
new file mode 100644
index 0000000000..c3dc874215
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/y-computed.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: getComputedStyle().y</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Y"/>
+  </metadata>
+  <g id="target"></g>
+  <style>
+    #target {
+      font-size: 40px;
+    }
+  </style>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/computed-testcommon.js"/>
+  <script><![CDATA[
+
+test_computed_value("y", "-10px");
+test_computed_value("y", "0.5em", "20px");
+test_computed_value("y", "calc(10px + 0.5em)", "30px");
+test_computed_value("y", "calc(10px - 0.5em)", "-10px");
+test_computed_value("y", "40%");
+test_computed_value("y", "calc(50% + 60px)");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/y-invalid.svg b/testing/web-platform/tests/svg/geometry/parsing/y-invalid.svg
new file mode 100644
index 0000000000..d6ea944dbd
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/y-invalid.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing y with invalid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Y"/>
+    <h:meta name="assert" content="y supports only the grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_invalid_value("y", "10");
+test_invalid_value("y", "auto");
+test_invalid_value("y", "10px 20px");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/parsing/y-valid.svg b/testing/web-platform/tests/svg/geometry/parsing/y-valid.svg
new file mode 100644
index 0000000000..aad0e4e293
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/parsing/y-valid.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:h="http://www.w3.org/1999/xhtml"
+     width="800px" height="8000px">
+  <title>SVG Geometry Properties: parsing y with valid values</title>
+  <metadata>
+    <h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Y"/>
+    <h:meta name="assert" content="y supports the full grammar '&lt;length-percentage&gt;'."/>
+  </metadata>
+  <g id="target"></g>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <h:script src="/css/support/parsing-testcommon.js"/>
+  <script><![CDATA[
+
+test_valid_value("y", "0", "0px");
+test_valid_value("y", "-1px");
+test_valid_value("y", "calc(2em + 3ex)");
+test_valid_value("y", "4%");
+test_valid_value("y", "5mm");
+
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/circle-001.svg b/testing/web-platform/tests/svg/geometry/reftests/circle-001.svg
new file mode 100644
index 0000000000..2fbd70d5a6
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/circle-001.svg
@@ -0,0 +1,16 @@
+<svg width="340" height="140"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Circle coordinates and radius specified by properties</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="circle-ref.svg" />
+  <style>
+    circle {
+      cx: 204px;
+      cy: 56px;
+      r: 65px;
+      fill: blue;
+    }
+  </style>
+  <circle />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/circle-002.svg b/testing/web-platform/tests/svg/geometry/reftests/circle-002.svg
new file mode 100644
index 0000000000..7f98f56ad0
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/circle-002.svg
@@ -0,0 +1,16 @@
+<svg width="340" height="140" viewBox="60000 70000 3400 1400"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Circle coordinates and radius specified in user units</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="circle-ref.svg" />
+  <style>
+    circle {
+      cx: 62040px;
+      cy: 70560px;
+      r: 650px;
+      fill: blue;
+    }
+  </style>
+  <circle />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/circle-003.svg b/testing/web-platform/tests/svg/geometry/reftests/circle-003.svg
new file mode 100644
index 0000000000..74c32fb33c
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/circle-003.svg
@@ -0,0 +1,16 @@
+<svg width="340" height="140"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Circle coordinates and radius specified by percentage</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="circle-ref.svg" />
+  <style>
+    circle {
+      cx: 60%; /* 60% of width 340 */
+      cy: 40%; /* 40% of height 140 */
+      r: 25%; /* 25% of normalized diagonal 260 */
+      fill: blue;
+    }
+  </style>
+  <circle />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/circle-004.svg b/testing/web-platform/tests/svg/geometry/reftests/circle-004.svg
new file mode 100644
index 0000000000..36c9e0096f
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/circle-004.svg
@@ -0,0 +1,15 @@
+<svg width="340" height="140"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Circle coordinates and radius specified using calc</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="circle-ref.svg" />
+  <style>
+    circle {
+      fill: blue;
+      font-size: 40px;
+    }
+  </style>
+  <circle cx="calc(80px + 60% - 2em)" cy="calc(80px + 40% - 2em)"
+    r="calc(5 * 5%)" />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/circle-005.svg b/testing/web-platform/tests/svg/geometry/reftests/circle-005.svg
new file mode 100644
index 0000000000..2d1fbf92aa
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/circle-005.svg
@@ -0,0 +1,24 @@
+<svg width="340" height="140"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Circle coordinates and radius specified by properties</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1683652"/>
+  <html:link rel="match"  href="circle-ref.svg"/>
+  <style>
+    circle {
+      cx: 204px;
+      cy: 56px;
+      r: 5px;
+      fill: blue;
+    }
+  </style>
+  <circle />
+  <script><![CDATA[
+    let circle = document.querySelector("circle");
+    circle.parentNode.style.display = "none";
+    circle.getTotalLength();
+    circle.parentNode.style.display = "";
+    circle.style.r = "65px";
+  ]]></script>
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/circle-ref.svg b/testing/web-platform/tests/svg/geometry/reftests/circle-ref.svg
new file mode 100644
index 0000000000..36ccde7fce
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/circle-ref.svg
@@ -0,0 +1,4 @@
+<svg width="340" height="140"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="204" cy="56" r="65" fill="blue" />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/ellipse-001.svg b/testing/web-platform/tests/svg/geometry/reftests/ellipse-001.svg
new file mode 100644
index 0000000000..e6d394de20
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/ellipse-001.svg
@@ -0,0 +1,17 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Ellipse coordinates and radii specified by properties</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="ellipse-ref.svg" />
+  <style>
+    ellipse {
+      cx: 75px;
+      cy: 120px;
+      rx: 60px;
+      ry: 50px;
+      fill: blue;
+    }
+  </style>
+  <ellipse />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/ellipse-002.svg b/testing/web-platform/tests/svg/geometry/reftests/ellipse-002.svg
new file mode 100644
index 0000000000..081617288a
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/ellipse-002.svg
@@ -0,0 +1,17 @@
+<svg width="300" height="200" viewBox="6000 7000 600 400"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Ellipse coordinates and radii specified in user units</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="ellipse-ref.svg" />
+  <style>
+    ellipse {
+      cx: 6150px;
+      cy: 7240px;
+      rx: 120px;
+      ry: 100px;
+      fill: blue;
+    }
+  </style>
+  <ellipse />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/ellipse-003.svg b/testing/web-platform/tests/svg/geometry/reftests/ellipse-003.svg
new file mode 100644
index 0000000000..6b81eadf1b
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/ellipse-003.svg
@@ -0,0 +1,17 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Ellipse coordinates and radii specified by percentage</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="ellipse-ref.svg" />
+  <style>
+    ellipse {
+      cx: 25%;
+      cy: 60%;
+      rx: 20%;
+      ry: 25%;
+      fill: blue;
+    }
+  </style>
+  <ellipse />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/ellipse-004.svg b/testing/web-platform/tests/svg/geometry/reftests/ellipse-004.svg
new file mode 100644
index 0000000000..1c6b132cd6
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/ellipse-004.svg
@@ -0,0 +1,15 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Ellipse coordinates and radii specified using calc</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="ellipse-ref.svg" />
+  <style>
+    ellipse {
+      fill: blue;
+      font-size: 40px;
+    }
+  </style>
+  <ellipse cx="calc(80px + 25% - 2em)" cy="calc(80px + 60% - 2em)"
+    rx="calc(4 * 5%)" ry="calc(5 * 5%)" />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/ellipse-ref.svg b/testing/web-platform/tests/svg/geometry/reftests/ellipse-ref.svg
new file mode 100644
index 0000000000..57e6f4d5e8
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/ellipse-ref.svg
@@ -0,0 +1,4 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="75" cy="120" rx="60" ry="50" fill="blue" />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/percentage-attribute.svg b/testing/web-platform/tests/svg/geometry/reftests/percentage-attribute.svg
new file mode 100644
index 0000000000..44c386d517
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/percentage-attribute.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="svg-root"
+  width="310" height="170" viewBox="0, 0, 620, 340"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Percentages in shapes</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="percentage-ref.svg" />
+
+  <style>
+    svg {
+      fill: none;
+      stroke-width: 30px;
+    }
+  </style>
+
+  <circle cx="70%" cy="60%" r="50%" stroke="cyan" />
+  <ellipse cx="40%" cy="30%" rx="10%" ry="20%" stroke="green" />
+  <rect x="10%" y="20%" width="70%" height="60%" stroke="blue" />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/percentage-ref.svg b/testing/web-platform/tests/svg/geometry/reftests/percentage-ref.svg
new file mode 100644
index 0000000000..09fd10f287
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/percentage-ref.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="svg-root"
+  width="310" height="170" viewBox="0, 0, 620, 340"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+
+  <style>
+    svg {
+      fill: none;
+      stroke-width: 30px;
+    }
+  </style>
+
+  <circle cx="434" cy="204" r="250" stroke="cyan" />
+  <ellipse cx="248" cy="102" rx="62" ry="68" stroke="green" />
+  <rect x="62" y="68" width="434" height="204" stroke="blue" />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/percentage.svg b/testing/web-platform/tests/svg/geometry/reftests/percentage.svg
new file mode 100644
index 0000000000..c2ca49341c
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/percentage.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="svg-root"
+  width="310" height="170" viewBox="0, 0, 620, 340"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Percentages in shapes</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="percentage-ref.svg" />
+
+  <style>
+    svg {
+      fill: none;
+      stroke-width: 30px;
+    }
+    circle {
+      cx: 70%;
+      cy: 60%;
+      r: 50%;
+    }
+    ellipse {
+      cx: 40%;
+      cy: 30%;
+      rx: 10%;
+      ry: 20%;
+    }
+    rect {
+      x: 10%;
+      y: 20%;
+      width: 70%;
+      height: 60%;
+    }
+  </style>
+
+  <circle stroke="cyan" />
+  <ellipse stroke="green" />
+  <rect stroke="blue" />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/rect-001.svg b/testing/web-platform/tests/svg/geometry/reftests/rect-001.svg
new file mode 100644
index 0000000000..020e499dc2
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/rect-001.svg
@@ -0,0 +1,17 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Rectangle coordinates and sizes specified by properties</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="rect-ref.svg" />
+  <style>
+    rect {
+      x: 30px;
+      y: 60px;
+      width: 120px;
+      height: 100px;
+      fill: blue;
+    }
+  </style>
+  <rect />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/rect-002.svg b/testing/web-platform/tests/svg/geometry/reftests/rect-002.svg
new file mode 100644
index 0000000000..e9b27db7e6
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/rect-002.svg
@@ -0,0 +1,17 @@
+<svg width="300" height="200" viewBox="600 700 150 100"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Rectangle coordinates and sizes specified in user units</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="rect-ref.svg" />
+  <style>
+    rect {
+      x: 615px;
+      y: 730px;
+      width: 60px;
+      height: 50px;
+      fill: blue;
+    }
+  </style>
+  <rect />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/rect-003.svg b/testing/web-platform/tests/svg/geometry/reftests/rect-003.svg
new file mode 100644
index 0000000000..d3d7c5abb4
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/rect-003.svg
@@ -0,0 +1,17 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Rectangle coordinates and sizes specified by percentage</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="rect-ref.svg" />
+  <style>
+    rect {
+      x: 10%;
+      y: 30%;
+      width: 40%;
+      height: 50%;
+      fill: blue;
+    }
+  </style>
+  <rect />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/rect-004.svg b/testing/web-platform/tests/svg/geometry/reftests/rect-004.svg
new file mode 100644
index 0000000000..926b2a8e0a
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/rect-004.svg
@@ -0,0 +1,15 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Rectangle coordinates and sizes specified using calc</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="rect-ref.svg" />
+  <style>
+    rect {
+      fill: blue;
+      font-size: 40px;
+    }
+  </style>
+  <rect x="calc(80px + 10% - 2em)" y="calc(80px + 30% - 2em)"
+    width="calc(8 * 5%)" height="calc(10 * 5%)" />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/reftests/rect-ref.svg b/testing/web-platform/tests/svg/geometry/reftests/rect-ref.svg
new file mode 100644
index 0000000000..ddfd51eed1
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/reftests/rect-ref.svg
@@ -0,0 +1,4 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect x="30" y="60" width="120" height="100" fill="blue" />
+</svg>
diff --git a/testing/web-platform/tests/svg/geometry/svg-baseval-in-display-none.html b/testing/web-platform/tests/svg/geometry/svg-baseval-in-display-none.html
new file mode 100644
index 0000000000..fa52d1b4c3
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/svg-baseval-in-display-none.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<title>baseVal in symbol and other display:none</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedLength"/>
+<link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGAnimatedLength__baseVal"/>
+<svg width="0" height="0">
+  <svg width="600" height="400" font-size="5">
+    <symbol width="40em" height="20em">
+      <g font-size="10px">
+        <rect id="r1" x="5em" y="6em" width="20%" height="30%" />
+        <circle id="c1" cx="5em" cy="6em" r="10em" />
+      </g>
+    </symbol>
+    <g font-size="10px" style="display:none">
+      <rect id="r2" x="5em" y="6em" width="20%" height="30%" />
+      <circle id="c2" cx="5em" cy="6em" r="10em" />
+    </g>
+  </svg>
+</svg>
+<script>
+  let r1 = document.getElementById("r1"),
+      c1 = document.getElementById("c1"),
+      r2 = document.getElementById("r2"),
+      c2 = document.getElementById("c2");
+
+  const assertBaseVal = (length, expected, info) => {
+    assert_equals(length.baseVal.value, expected, info);
+  };
+
+  let tEm = async_test("With em");
+  let tEmDone = tEm.step_func_done(() => {
+    assertBaseVal(r1.x, 50, "r1.x");
+    assertBaseVal(r1.y, 60, "r1.y");
+    assertBaseVal(c1.cx, 50, "c1.cx");
+    assertBaseVal(c1.cy, 60, "c1.cy");
+    assertBaseVal(c1.r, 100, "c1.r");
+
+    assertBaseVal(r2.x, 50, "r2.x");
+    assertBaseVal(r2.y, 60, "r2.y");
+    assertBaseVal(c2.cx, 50, "c2.cx");
+    assertBaseVal(c2.cy, 60, "c2.cy");
+    assertBaseVal(c2.r, 100, "c2.r");
+  });
+
+  let tEmPercentage = async_test("With em and percentage");
+  let tEmPercentageDone = tEmPercentage.step_func_done(() => {
+    assertBaseVal(r1.width, 40, "r1.width");
+    assertBaseVal(r1.height, 30, "r1.height");
+
+    assertBaseVal(r2.width, 120, "r2.width");
+    assertBaseVal(r2.height, 120, "r2.height");
+  });
+
+  const main = () => {
+    window.requestAnimationFrame(() => {
+      tEmDone();
+      tEmPercentageDone();
+    });
+  };
+
+  if (document.readyState === "complete") {
+    main();
+  } else {
+    window.addEventListener("load", main);
+  }
+</script>
diff --git a/testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto-dynamic-image-change.html b/testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto-dynamic-image-change.html
new file mode 100644
index 0000000000..8d5e2e982e
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto-dynamic-image-change.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Test <svg:image>'s sizing with css size as auto, with dynamic image change</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#geometry-Sizing"/>
+<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-Placement"/>
+<svg height="0">
+  <image width="128" height="128" xlink:href="/images/green-256x256.png" style="width:auto; height:auto"/>
+</svg>
+<script>
+async_test(function(t) {
+  var image = document.querySelector('image');
+  window.onload = t.step_func(function() {
+    var rectBBox = image.getBBox();
+    assert_equals(rectBBox.width, 256);
+    assert_equals(rectBBox.height, 256);
+    image.setAttributeNS("http://www.w3.org/1999/xlink","href","data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'></svg>");
+    image.onload = t.step_func_done(function() {
+        var rectBBox = image.getBBox();
+        assert_equals(rectBBox.width, 64);
+        assert_equals(rectBBox.height, 64);
+    });
+  });
+});
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.html b/testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.html
new file mode 100644
index 0000000000..92fb7bc533
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<title>&lt;svg:image> 'auto' sizing</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#geometry-Sizing"/>
+<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-Placement"/>
+<svg height="0">
+  <image width="64" height="64" xlink:href="/images/green-256x256.png" />
+  <image width="128" height="64" xlink:href="/images/green-256x256.png" style="width:auto"/>
+  <image width="64" height="128" xlink:href="/images/green-256x256.png" style="height:auto"/>
+  <image width="128" height="64" xlink:href="/images/green-256x256.png" style="width:auto; height:auto"/>
+  <image width="50" height="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"/>
+  <image width="50" height="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto; height:auto'/>
+  <image width="50" height="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto;'/>
+  <image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto;'/>
+  <image height="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto;'/>
+  <image width="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='height:auto;'/>
+  <image width="200" height="200"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto; height:auto'/>
+  <image height="200"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto; height:auto'/>
+  <image width="200"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto; height:auto'/>
+  <image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto'/>
+</svg>
+<script>
+const expectedBoxes = [
+  { dimensions: [64, 64], description: "256x256 png image, attributes width='64' height='64'"},
+  { dimensions: [64, 64], description: "256x256 png image, attributes width='128' height='64' and CSS 'width:auto'"},
+  { dimensions: [64, 64], description: "256x256 png image, attributes width='64' height='128' and CSS 'height:auto'"},
+  { dimensions: [256, 256], description: "256x256 png image, attributes width='64' height='64' and CSS 'width:auto; height:auto'"},
+  { dimensions: [50, 50], description: "default sized svg image, attributes width='50' height='50'"},
+  { dimensions: [200, 100], description: "200x100 svg image, attributes width='50' height='50' and CSS 'width:auto; height:auto'"},
+  { dimensions: [100, 50], description: "200x100 svg image, attributes width='50' height='50' and CSS 'width:auto'"},
+  { dimensions: [200, 100], description: "200x100 svg image, without attributes width and height and CSS 'width:auto'"},
+  { dimensions: [100, 50], description: "200x100 svg image, attributes height='50' and 'width:auto'"},
+  { dimensions: [50, 25], description: "200x100 svg image, attributes width='50' and CSS height:auto"},
+  { dimensions: [300, 150], description: "default sized svg image, attributes width='200' height='200' and CSS 'width:auto; height:auto'"},
+  { dimensions: [300, 150], description: "default sized svg image, attributes height='200' and CSS 'width:auto; height:auto'"},
+  { dimensions: [300, 150], description: "default sized svg image, attributes width='200' and CSS 'width:auto; height:auto'"},
+  { dimensions: [300, 150], description: "default sized svg image, without attributes width and height, no css width/height specified"},
+  { dimensions: [60, 60], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+  { dimensions: [240, 60], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+  { dimensions: [60, 15], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [300, 75], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+  { dimensions: [60, 60], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+  { dimensions: [240, 60], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+  { dimensions: [60, 15], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [200, 50], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+  { dimensions: [60, 60], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+  { dimensions: [240, 60], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+  { dimensions: [60, 15], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [400, 100], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+  { dimensions: [60, 60], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+  { dimensions: [120, 60], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+  { dimensions: [60, 30], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [200, 100], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+  { dimensions: [60, 150], description: "default sized svg image, attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [300, 60], description: "default sized svg image, attributes width='60' height='60' and CSS 'width:auto'"},
+];
+
+const images = document.getElementsByTagName('image');
+for (var i = 0, length = images.length; i < length; ++i) {
+  async_test(t => {
+    const image = images[i];
+    const expected = expectedBoxes[i];
+    window.addEventListener('load', t.step_func_done(() => {
+      const [expectedWidth, expectedHeight] = expected.dimensions;
+      const bbox = image.getBBox();
+      assert_equals(bbox.width, expectedWidth, 'width');
+      assert_equals(bbox.height, expectedHeight, 'height');
+    }));
+  }, document.title + ' with ' + expectedBoxes[i].description);
+}
+</script>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/svg/geometry
parent	Initial commit. (diff)
download	firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip