1 files changed, 173 insertions, 0 deletions
diff --git a/layout/reftests/svg/as-image/svg-image-util.js b/layout/reftests/svg/as-image/svg-image-util.js
new file mode 100644
index 0000000000..ea84259238
--- /dev/null
+++ b/layout/reftests/svg/as-image/svg-image-util.js
@@ -0,0 +1,173 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Standard values to use for <img>/<embed> height & width, if requested.
+var HOST_NODE_HEIGHT = "20";
+var HOST_NODE_WIDTH =  "30";
+
+// All the possible values of "align"
+const ALIGN_VALS = ["none",
+                    "xMinYMin", "xMinYMid", "xMinYMax",
+                    "xMidYMin", "xMidYMid", "xMidYMax",
+                    "xMaxYMin", "xMaxYMid", "xMaxYMax"];
+
+// All the possible values of "meetOrSlice"
+const MEETORSLICE_VALS = [ "meet", "slice" ];
+
+/**
+ * Generates full data URI for an SVG document, with the given parameters
+ * on the SVG element.
+ *
+ * @param aViewboxArr         An array of four numbers, representing the
+ *                            viewBox attribute, or null for no viewBox.
+ * @param aWidth              The width attribute, or null for no width.
+ * @param aHeight             The height attribute, or null for no height.
+ * @param aAlign              The 'align' component of the
+ *                            preserveAspectRatio attribute, or null for none.
+ * @param aMeetOrSlice        The 'meetOrSlice' component of the
+ *                            preserveAspectRatio attribute, or null for
+ *                            none. (If non-null, implies non-null value for
+ *                            aAlign.)
+ * @param aViewParams         Parameters to use for the view element.
+ * @param aFragmentIdentifier The SVG fragment identifier.
+ */
+function generateSVGDataURI(aViewboxArr, aWidth, aHeight,
+                            aAlign, aMeetOrSlice,
+                            aViewParams, aFragmentIdentifier) {
+  // prefix
+  var datauri = "data:image/svg+xml,"
+  // Begin the SVG tag
+  datauri += "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20shape-rendering%3D%22crispEdges%22";
+
+  // Append the custom chunk from our params
+  // If we're working with views, the align customisation is applied there instead
+  datauri += generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
+                                       aViewParams ? null : aAlign,
+                                       aMeetOrSlice);
+
+  // Add 'font-size' just in case the client wants to use ems
+  datauri += "%20font-size%3D%22" + "10px" + "%22";
+
+  // Put closing right bracket on SVG tag
+  datauri += "%3E";
+
+  if (aViewParams) {
+    // Give the view the id of the fragment identifier
+    datauri += "%3Cview%20id%3D%22" + aFragmentIdentifier + "%22";
+
+    // Append the custom chunk from our view params
+    datauri += generateSVGAttrsForParams(aViewParams.viewBox, null, null,
+                                         aAlign, aViewParams.meetOrSlice);
+
+    datauri += "%2F%3E";
+  }
+
+  // Add the rest of the SVG document
+  datauri += "%3Crect%20x%3D%221%22%20y%3D%221%22%20height%3D%2218%22%20width%3D%2218%22%20stroke-width%3D%222%22%20stroke%3D%22black%22%20fill%3D%22yellow%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%20style%3D%22fill%3A%20blue%22%2F%3E%3C%2Fsvg%3E";
+
+  return datauri;
+}
+
+// Generates just the chunk of a data URI that's relevant to
+// the given params.
+function generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
+                                   aAlign, aMeetOrSlice) {
+  var str = "";
+  if (aViewboxArr) {
+    str += "%20viewBox%3D%22";
+    for (var i in aViewboxArr) {
+        str += aViewboxArr[i];
+        if (i != aViewboxArr.length - 1) {
+          str += "%20";
+        }
+    }
+    str += "%22";
+  }
+  if (aWidth) {
+    str += "%20width%3D%22"  + aWidth  + "%22";
+  }
+  if (aHeight) {
+    str += "%20height%3D%22" + aHeight + "%22";
+  }
+  if (aAlign) {
+    str += "%20preserveAspectRatio%3D%22" + aAlign;
+    if (aMeetOrSlice) {
+      str += "%20" + aMeetOrSlice;
+    }
+    str += "%22";
+  }
+
+  return str;
+}
+
+// Returns a newly-generated element with the given tagname, the given URI
+// for its |src| attribute, and the given width & height values.
+function generateHostNode(aHostNodeTagName, aUri,
+                          aHostNodeWidth, aHostNodeHeight) {
+  var elem = document.createElement(aHostNodeTagName);
+  elem.setAttribute("src", aUri);
+
+  if (aHostNodeWidth) {
+    elem.setAttribute("width", aHostNodeWidth);
+  }
+  if (aHostNodeHeight) {
+    elem.setAttribute("height", aHostNodeHeight);
+  }
+
+  return elem;
+}
+
+// THIS IS THE CHIEF HELPER FUNCTION TO BE CALLED BY CLIENTS
+function appendSVGArrayWithParams(aSVGParams, aHostNodeTagName) {
+  // These are width & height vals that will be used for the *host node*.
+  // (i.e. the <img> or <embed> node -- not the <svg> node)
+  var hostNodeWidthVals  = [ null, HOST_NODE_WIDTH  ];
+  var hostNodeHeightVals = [ null, HOST_NODE_HEIGHT ];
+
+  for (var i = 0; i < hostNodeWidthVals.length; i++) {
+    var hostNodeWidth = hostNodeWidthVals[i];
+    for (var j = 0; j < hostNodeHeightVals.length; j++) {
+      var hostNodeHeight = hostNodeHeightVals[j];
+      appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
+                                  hostNodeWidth, hostNodeHeight);
+    }
+  }
+}
+
+// Helper function for above, for a fixed [host-node-width][host-node-height]
+function appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
+                                     aHostNodeWidth, aHostNodeHeight) {
+  var rootNode = document.getElementsByTagName("body")[0];
+  for (var k = 0; k < ALIGN_VALS.length; k++) {
+    var alignVal = ALIGN_VALS[k];
+    if (!aSVGParams.meetOrSlice) {
+      alignVal = "none";
+    }
+
+    // Generate the Data URI
+    var uri = generateSVGDataURI(aSVGParams.viewBox,
+                                 aSVGParams.width, aSVGParams.height,
+                                 alignVal,
+                                 aSVGParams.meetOrSlice,
+                                 aSVGParams.view,
+                                 aSVGParams.fragmentIdentifier);
+
+    if (aSVGParams.fragmentIdentifier) {
+      uri += "#" + aSVGParams.fragmentIdentifier;
+    }
+
+    // Generate & append the host node element
+    var hostNode = generateHostNode(aHostNodeTagName, uri,
+                                    aHostNodeWidth, aHostNodeHeight);
+    rootNode.appendChild(hostNode);
+
+    // Cosmetic: Add a newline when we get halfway through the ALIGN_VALS
+    // and then again when we reach the end
+    if (k + 1 == ALIGN_VALS.length / 2 ||
+        k + 1 == ALIGN_VALS.length) {
+      rootNode.appendChild(document.createElement("br"));
+    }
+  }
+}