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

src/Options.js

@@ -14,41 +14,82 @@
  * as the parentStyle and parentSize of the new options class, so parent
  * handling is taken care of automatically.
  */
-function Options(style, size, color, parentStyle, parentSize) {
-    this.style = style;
-    this.color = color;
-    this.size = size;
+function Options(data) {
+    this.style = data.style;
+    this.color = data.color;
+    this.size = data.size;
+    this.phantom = data.phantom;
 
-    if (parentStyle === undefined) {
-        parentStyle = style;
+    if (data.parentStyle === undefined) {
+        this.parentStyle = data.style;
+    } else {
+        this.parentStyle = data.parentStyle;
     }
-    this.parentStyle = parentStyle;
 
-    if (parentSize === undefined) {
-        parentSize = size;
+    if (data.parentSize === undefined) {
+        this.parentSize = data.size;
+    } else {
+        this.parentSize = data.parentSize;
     }
-    this.parentSize = parentSize;
 }
 
+/**
+ * Returns a new options object with the same properties as "this".  Properties
+ * from "extension" will be copied to the new options object.
+ */
+Options.prototype.extend = function(extension) {
+    var data = {
+        style: this.style,
+        size: this.size,
+        color: this.color,
+        parentStyle: this.style,
+        parentSize: this.size,
+        phantom: this.phantom
+    };
+
+    for (var key in extension) {
+        if (extension.hasOwnProperty(key)) {
+            data[key] = extension[key];
+        }
+    }
+
+    return new Options(data);
+};
+
 /**
  * Create a new options object with the given style.
  */
 Options.prototype.withStyle = function(style) {
-    return new Options(style, this.size, this.color, this.style, this.size);
+    return this.extend({
+        style: style
+    });
 };
 
 /**
  * Create a new options object with the given size.
  */
 Options.prototype.withSize = function(size) {
-    return new Options(this.style, size, this.color, this.style, this.size);
+    return this.extend({
+        size: size
+    });
 };
 
 /**
  * Create a new options object with the given color.
  */
 Options.prototype.withColor = function(color) {
-    return new Options(this.style, this.size, color, this.style, this.size);
+    return this.extend({
+        color: color
+    });
+};
+
+/**
+ * Create a new options object with "phantom" set to true.
+ */
+Options.prototype.withPhantom = function() {
+    return this.extend({
+        phantom: true
+    });
 };
 
 /**
@@ -56,8 +97,7 @@ Options.prototype.withColor = function(color) {
  * used so that parent style and size changes are handled correctly.
  */
 Options.prototype.reset = function() {
-    return new Options(
-        this.style, this.size, this.color, this.style, this.size);
+    return this.extend({});
 };
 
 /**
@@ -79,7 +119,11 @@ var colorMap = {
  * `colorMap`.
  */
 Options.prototype.getColor = function() {
-    return colorMap[this.color] || this.color;
+    if (this.phantom) {
+        return "transparent";
+    } else {
+        return colorMap[this.color] || this.color;
+    }
 };
 
 module.exports = Options;