From bb2b9f8a509f03307f4f062075af2c876a71d260 Mon Sep 17 00:00:00 2001
From: Eric Willigers <ericwilligers@chromium.org>
Date: Thu, 15 Nov 2018 21:18:13 +1100
Subject: [PATCH] SVG Geometry: computed value of properties

cx cy r rx ry x y computed values are lengths or percentages.
https://svgwg.org/svg2-draft/geometry.html
---
 css/support/computed-testcommon.js   |  6 ++++++
 svg/geometry/parsing/cx-computed.svg | 27 ++++++++++++++++++++++++++
 svg/geometry/parsing/cy-computed.svg | 27 ++++++++++++++++++++++++++
 svg/geometry/parsing/r-computed.svg  | 27 ++++++++++++++++++++++++++
 svg/geometry/parsing/rx-computed.svg | 29 ++++++++++++++++++++++++++++
 svg/geometry/parsing/ry-computed.svg | 29 ++++++++++++++++++++++++++++
 svg/geometry/parsing/x-computed.svg  | 27 ++++++++++++++++++++++++++
 svg/geometry/parsing/y-computed.svg  | 27 ++++++++++++++++++++++++++
 8 files changed, 199 insertions(+)
 create mode 100644 svg/geometry/parsing/cx-computed.svg
 create mode 100644 svg/geometry/parsing/cy-computed.svg
 create mode 100644 svg/geometry/parsing/r-computed.svg
 create mode 100644 svg/geometry/parsing/rx-computed.svg
 create mode 100644 svg/geometry/parsing/ry-computed.svg
 create mode 100644 svg/geometry/parsing/x-computed.svg
 create mode 100644 svg/geometry/parsing/y-computed.svg

diff --git a/css/support/computed-testcommon.js b/css/support/computed-testcommon.js
index 0999418e748162..2cc19c176fa414 100644
--- a/css/support/computed-testcommon.js
+++ b/css/support/computed-testcommon.js
@@ -13,10 +13,16 @@ function test_computed_value(property, specified, computed) {
   if (!computed)
     computed = specified;
   test(() => {
+    const target = document.getElementById('target');
     if (!getComputedStyle(target)[property])
       return;
     target.style[property] = '';
     target.style[property] = specified;
     assert_equals(getComputedStyle(target)[property], computed);
+    if (computed !== specified) {
+      target.style[property] = '';
+      target.style[property] = computed;
+      assert_equals(getComputedStyle(target)[property], computed, 'computed value should round-trip');
+    }
   }, "Property " + property + " value '" + specified + "' computes to '" + computed + "'");
 }
diff --git a/svg/geometry/parsing/cx-computed.svg b/svg/geometry/parsing/cx-computed.svg
new file mode 100644
index 00000000000000..5a408ba4d28f1a
--- /dev/null
+++ b/svg/geometry/parsing/cx-computed.svg
@@ -0,0 +1,27 @@
+<?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: getComputedValue().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", "40%");
+test_computed_value("cx", "calc(50% + 60x)");
+
+  ]]></script>
+</svg>
diff --git a/svg/geometry/parsing/cy-computed.svg b/svg/geometry/parsing/cy-computed.svg
new file mode 100644
index 00000000000000..97a41aed9c1621
--- /dev/null
+++ b/svg/geometry/parsing/cy-computed.svg
@@ -0,0 +1,27 @@
+<?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: getComputedValue().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", "40%");
+test_computed_value("cy", "calc(50% + 60x)");
+
+  ]]></script>
+</svg>
diff --git a/svg/geometry/parsing/r-computed.svg b/svg/geometry/parsing/r-computed.svg
new file mode 100644
index 00000000000000..fc8ea983ff00e8
--- /dev/null
+++ b/svg/geometry/parsing/r-computed.svg
@@ -0,0 +1,27 @@
+<?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: getComputedValue().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", "40%");
+test_computed_value("r", "calc(50% + 60x)");
+
+  ]]></script>
+</svg>
diff --git a/svg/geometry/parsing/rx-computed.svg b/svg/geometry/parsing/rx-computed.svg
new file mode 100644
index 00000000000000..7e4c42d29304a1
--- /dev/null
+++ b/svg/geometry/parsing/rx-computed.svg
@@ -0,0 +1,29 @@
+<?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: getComputedValue().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", "40%");
+test_computed_value("rx", "calc(50% + 60x)");
+
+  ]]></script>
+</svg>
diff --git a/svg/geometry/parsing/ry-computed.svg b/svg/geometry/parsing/ry-computed.svg
new file mode 100644
index 00000000000000..390d63dc7e5aa9
--- /dev/null
+++ b/svg/geometry/parsing/ry-computed.svg
@@ -0,0 +1,29 @@
+<?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: getComputedValue().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", "40%");
+test_computed_value("ry", "calc(50% + 60x)");
+
+  ]]></script>
+</svg>
diff --git a/svg/geometry/parsing/x-computed.svg b/svg/geometry/parsing/x-computed.svg
new file mode 100644
index 00000000000000..f7da0ed9564380
--- /dev/null
+++ b/svg/geometry/parsing/x-computed.svg
@@ -0,0 +1,27 @@
+<?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: getComputedValue().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", "40%");
+test_computed_value("x", "calc(50% + 60x)");
+
+  ]]></script>
+</svg>
diff --git a/svg/geometry/parsing/y-computed.svg b/svg/geometry/parsing/y-computed.svg
new file mode 100644
index 00000000000000..83ef887da671eb
--- /dev/null
+++ b/svg/geometry/parsing/y-computed.svg
@@ -0,0 +1,27 @@
+<?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: getComputedValue().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", "40%");
+test_computed_value("y", "calc(50% + 60x)");
+
+  ]]></script>
+</svg>