Fix color support for stretchy, strikethrough, and fbox (#792)

Summary:
Stuff like `\red{\overbrace{AB}}` works now in addition to `\color{red}{\overbrace{AB}}`. Strikethrough now respects color. The Firefox in the screenshotter doesn't seem to support `background-image` + `mask`, but I manually tested that the latest Firefox does.

Test plan:
Ran `make`, then tested in latest Chrome and Firefox to ensure color support was working, then ran `make screenshots`.

src/stretchy.js

@@ -143,7 +143,7 @@ const svgSpan = function(group, options) {
         classArray.push("mask");             // Over-ride image.
         classArray.push(fileName + "-mask"); // Set mask-image.
         node = buildCommon.makeSpan(classArray, [], options);
-        node.style.backgroundColor = options.color;
+        node.style.backgroundColor = options.getColor();
     } else {
         classArray.push(fileName);             // Set image and span height.
         node = buildCommon.makeSpan(classArray, [], options);
@@ -161,10 +161,10 @@ const encloseSpan = function(inner, isCharBox, label, pad, options) {
 
     if (options.color) {
         if (label === "fbox") {
-            img.style.borderColor = options.color;
+            img.style.borderColor = options.getColor();
         } else {
             img.classes[2] = label + "-mask";
-            img.style.backgroundColor = options.color;
+            img.style.backgroundColor = options.getColor();
         }
     }
 

static/katex.less

@@ -853,9 +853,12 @@
         // This section won't be applied by some older browsers, so they will instead
         // render the black background-image defined above.
 
-      .mask {
-        background-image: none;
-      }
+        .mask,
+        .bcancel-mask,
+        .cancel-mask,
+        .xcancel-mask {
+            background-image: none;
+        }
     }
 
     @supports not ((mask-image:none) or (-webkit-mask:none)) {

test/screenshotter/ss_data.yaml

@@ -52,8 +52,8 @@ Cases: |
 Colors:
     tex: \blue{a}\textcolor{#0f0}{b}\textcolor{red}{c}
     nolatex: different syntax and different scope
-ColorSpacing: \textcolor{red}{\displaystyle \int x} + 1
 ColorImplicit: bl{ack\color{red}red\textcolor{green}{green}red\color{blue}blue}black
+ColorSpacing: \textcolor{red}{\displaystyle \int x} + 1
 DashesAndQuotes: \text{``a'' b---c -- d----`e'-{-}-f}--``x''
 DeepFontSizing:
     tex: |
@@ -203,6 +203,8 @@ StretchyAccent: |
         \overrightarrow{F} + \overrightarrow{AB} + \overrightarrow{F}^2 + \overrightarrow{F}_2 + \overrightarrow{F}_1^2 \\
         \overrightarrow{AB}^2+\frac{\overrightarrow{AB}}{\overrightarrow{AB}} + \sqrt{\overrightarrow{AB}} + \left\lvert\overrightarrow{AB}\right\rvert
     \end{array}
+StretchyAccentColor: |
+    \red{\overrightarrow{AB}} \quad \color{blue}{\overleftarrow{AB}} \quad \color{blue}{\green{\Overrightarrow{AB}}}
 StrikeThrough: |
     \begin{array}{l}
         \cancel x \quad \cancel{2B} + \bcancel 5 +\bcancel{5ay} \\
@@ -210,6 +212,11 @@ StrikeThrough: |
         \frac{x+\cancel B}{x+\cancel x} + \frac{x+\cancel y}{x} + \cancel{B}_1^2 + \cancel{B^2} \\
         \left\lvert\cancel{ac}\right\rvert
     \end{array}
+StrikeThroughColor: |
+    \begin{array}{l}
+        \red{\cancel x \quad \cancel{2B} + \bcancel 5 +\bcancel{5ay}} \\
+        \color{green}{\sout{5ab} + \sout{5ABC} + \xcancel{\oint_S{\vec E\cdot\hat n\,\mathrm d a}}}
+    \end{array}
 StyleSpacing: \scriptstyle ab\;cd
 StyleSwitching: a\cdot b\scriptstyle a\cdot ba\textstyle\cdot ba\scriptstyle\cdot b
 SupSubCharacterBox: a_2f_2{f}_2{aa}_2{af}_2\mathbf{y}_Ay_A