Add a screenshot test to ensure that we don't inherit svg-only CSS properties (#1092)

We want to inherit CSS properties that apply to both text and SVG
but we don't want to inherit styles that affect SVG without affecting text.

This patch adds a screenshot test to verify this.

test/screenshotter/ss_data.js

@@ -12,7 +12,9 @@ const fs = require("fs");
 const jsyaml = require("js-yaml");
 const querystring = require("querystring");
 
-const queryKeys = ["tex", "pre", "post", "display", "noThrow", "errorColor"];
+const queryKeys = [
+    "tex", "pre", "post", "display", "noThrow", "errorColor", "styles",
+];
 let dict = fs.readFileSync(require.resolve("./ss_data.yaml"));
 dict = jsyaml.safeLoad(dict);
 for (const key in dict) {

test/screenshotter/ss_data.yaml

@@ -5,6 +5,8 @@
 # - pre: some HTML to insert before the KaTeX content
 # - post: some HTML to insert after the KaTeX content
 # - display: set this to 1 in order to use display style
+# - styles: an optional value for the HTML style="" attribute
+#     of the <span> element that contains the KaTeX output
 #
 # Note that YAML will treat a value starting in { as a flow mapping.
 # To avoid that, either enclose the value in '…' or use a block scalar style,
@@ -273,6 +275,14 @@ SupSubHorizSpacing: |
 SupSubLeftAlignReset: |
     \omega^8_{888} \quad \frac{1}{\hat{\omega}^{8}_{888}} \quad \displaystyle\sum_{\omega^{8}_{888}}
 SupSubOffsets: \displaystyle \int_{2+3}x f^{2+3}+3\lim_{2+3+4+5}f
+SvgReset:
+    # This math uses a lot of SVG glyphs
+    tex: '\underbrace{\sqrt{\vec{x}} + \sqrt{\vec{\color{#f00}y}}}'
+    # Some of these styles should affect both svg and text. We want
+    # those to be inherited. But some of the styles only affect svg
+    # and the point of this test is to verify that the svg-only
+    # styles (like fill-opacity) are not inherited
+    styles: 'display:block; width:500px;border:solid yellow 5px;padding:50px;background:#ccc;color:green;font-size:92px;transform:translate(100px,250px)rotate(-45deg);fill-opacity:0;stroke-width:40;stroke:blue;'
 Symbols1: |
     \maltese\degree\pounds\$
     \text{\maltese\degree\pounds\textdollar}

test/screenshotter/test.html

@@ -54,6 +54,7 @@
             macros["\\" + match[1]] = decodeURIComponent(match[2]);
         }
 
+        mathNode.setAttribute("style", query["styles"] || "");
         katex.render(query["tex"], mathNode, settings);
         document.getElementById("pre").innerHTML = query["pre"] || "";
         document.getElementById("post").innerHTML = query["post"] || "";