Add support for \phantom

Summary:
Using \phantom with non-phantom math in Perseus doesn't render to be the
same size because \phantom uses MathJax and the non-phantom math uses KaTeX.
Implementing \phantom in KaTeX should solve this alignment issue.

Test Plan:
[x] write (and run) unit tests
[x] create (and run) screenshotter tests

Reviewers: emily

Reviewed By: emily

Differential Revision: https://phabricator.khanacademy.org/D16720

test/katex-spec.js

@@ -569,7 +569,6 @@ describe("An over parser", function() {
 
 describe("A sizing parser", function() {
     var sizeExpression = "\\Huge{x}\\small{x}";
-    var nestedSizeExpression = "\\Huge{\\small{x}}";
 
     it("should not fail", function() {
         expect(sizeExpression).toParse();
@@ -1146,6 +1145,45 @@ describe("An accent builder", function() {
     });
 });
 
+describe("A phantom parser", function() {
+    it("should not fail", function() {
+        expect("\\phantom{x}").toParse();
+        expect("\\phantom{x^2}").toParse();
+        expect("\\phantom{x}^2").toParse();
+        expect("\\phantom x").toParse();
+    });
+
+    it("should build a phantom node", function() {
+        var parse = getParsed("\\phantom{x}")[0];
+
+        expect(parse.type).toMatch("phantom");
+        expect(parse.value.value).toBeDefined();
+    });
+});
+
+describe("A phantom builder", function() {
+    it("should not fail", function() {
+        expect("\\phantom{x}").toBuild();
+        expect("\\phantom{x^2}").toBuild();
+        expect("\\phantom{x}^2").toBuild();
+        expect("\\phantom x").toBuild();
+    });
+
+    it("should make the children transparent", function() {
+        var children = getBuilt("\\phantom{x+1}")[0].children;
+        expect(children[0].style.color).toBe("transparent");
+        expect(children[1].style.color).toBe("transparent");
+        expect(children[2].style.color).toBe("transparent");
+    });
+
+    it("should make all descendants transparent", function() {
+        var children = getBuilt("\\phantom{x+\\blue{1}}")[0].children;
+        expect(children[0].style.color).toBe("transparent");
+        expect(children[1].style.color).toBe("transparent");
+        expect(children[2].children[0].style.color).toBe("transparent");
+    });
+});
+
 describe("A parser error", function () {
     it("should report the position of an error", function () {
         try {
@@ -1218,4 +1256,9 @@ describe("A MathML builder", function() {
         var textop = getMathML("\\sin").children[0].children[0];
         expect(textop.children[0].type).toEqual("mi");
     });
+
+    it("should generate a <mphantom> node for \\phantom", function() {
+        var phantom = getMathML("\\phantom{x}").children[0].children[0];
+        expect(phantom.children[0].type).toEqual("mphantom");
+    });
 });

test/screenshotter/ss_data.json

@@ -21,6 +21,7 @@
     "NullDelimiterInteraction": "http://localhost:7936/test/screenshotter/test.html?m=a \\bigl. + 2 \\quad \\left. + a \\right)",
     "OpLimits": "http://localhost:7936/test/screenshotter/test.html?m={\\sin_2^2 \\lim_2^2 \\int_2^2 \\sum_2^2}{\\displaystyle \\lim_2^2 \\int_2^2 \\intop_2^2 \\sum_2^2}",
     "Overline": "http://localhost:7936/test/screenshotter/test.html?m=\\overline{x}\\overline{x}\\overline{x^{x^{x^x}}} \\blue{\\overline{y}}",
+    "Phantom": "http://localhost:7936/test/screenshotter/test.html?m=\\dfrac{1+\\phantom{x^{\\blue{2}}} = x}{1+x^{\\blue{2}} = x}",
     "PrimeSpacing": "http://localhost:7936/test/screenshotter/test.html?m=f'+f_2'+f^{f'}",
     "RlapBug": "http://localhost:7936/test/screenshotter/test.html?m=\\frac{\\rlap{x}}{2}",
     "Rule": "http://localhost:7936/test/screenshotter/test.html?m=\\rule{1em}{0.5em}\\rule{1ex}{2ex}\\rule{1em}{1ex}\\rule{1em}{0.431ex}",