1 files changed, 86 insertions, 0 deletions
diff --git a/dom/svg/test/test_viewBox.html b/dom/svg/test/test_viewBox.html
new file mode 100644
index 0000000000..d09f5110ef
--- /dev/null
+++ b/dom/svg/test/test_viewBox.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1396642
+-->
+<head>
+  <title>Test for Bug 1396642</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1396642">Mozilla Bug 1396642</a>
+<p id="display"></p>
+<div id="content" style="display: none"></div>
+
+<div id="svg"></div>
+
+<pre id="test">
+<script class="testbody" type="application/javascript">
+SimpleTest.waitForExplicitFinish();
+
+function runTest() {
+  var testsElement = $("svg");
+
+  // Turn for instance `2.3` into `230` (px). Round to avoid floating point
+  // issues.
+  const scale = (number) => Math.round(100 * number);
+
+  const widths = [2, 2.3, 2.5, 2.8];
+  const heights = [3, 3.3, 3.5, 3.8];
+
+  for (const width of widths) {
+    for (const height of heights) {
+      const variations = [
+        {width, height},
+        {width: "auto", height},
+        {width, height: "auto"},
+        {width: "auto", height: "auto"},
+      ];
+
+      for (const variation of variations) {
+        const svgWrapperElement = document.createElement("div");
+        svgWrapperElement.style.width =
+          variation.width === "auto" && variation.height === "auto"
+            ? `${scale(width)}px`
+            : "auto";
+
+        const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svgElement.setAttribute("viewBox", `0 0 ${width} ${height}`);
+        svgElement.style.width =
+          typeof variation.width === "number"
+            ? `${scale(variation.width)}px`
+            : variation.width;
+        svgElement.style.height =
+          typeof variation.height === "number"
+            ? `${scale(variation.height)}px`
+            : variation.height;
+
+        svgWrapperElement.appendChild(svgElement);
+
+        testsElement.appendChild(svgWrapperElement);
+
+        const rect = svgElement.getBoundingClientRect();
+        const actual = {
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+        };
+        const expected = {
+          width: scale(width),
+          height: scale(height),
+        };
+
+        isfuzzy(expected.width, actual.width, 0.001, "checking width");
+        isfuzzy(expected.height, actual.height, 0.001, "checking height");
+      }
+    }
+  }
+
+  SimpleTest.finish();
+}
+
+window.addEventListener("load", runTest);
+</script>
+</pre>
+</body>
+</html>