Somehow manage to fix the sizing bugs

Summary:
Remove a single `vertical-align: top`, and somewhow it now works. May
the gods of CSS have mercy on us. Also added some tests.

Test Plan:
 - See that the huxley tests don't have any changes
 - See that the new huxley screenshots look reasonable
 - Run the normal tests and see that they work

Reviewers: alpert

Reviewed By: alpert

Differential Revision: http://phabricator.khanacademy.org/D7494

.gitignore

@@ -1,3 +1,4 @@
 build
 node_modules
 last.png
+diff.png

buildTree.js

@@ -130,6 +130,7 @@ var groupTypes = {
         }
 
         var supsub;
+        var fixIE = makeSpan(["fix-ie"], []);
 
         if (!group.value.sup) {
             v = Math.max(v, fontMetrics.metrics.sub1,
@@ -140,7 +141,7 @@ var groupTypes = {
             subwrap.depth = subwrap.depth + v;
             subwrap.height = 0;
 
-            supsub = makeSpan(["msupsub"], [subwrap]);
+            supsub = makeSpan(["msupsub"], [subwrap, fixIE]);
         } else if (!group.value.sub) {
             u = Math.max(u, p,
                 sup.depth + 0.25 * fontMetrics.metrics.xHeight);
@@ -150,7 +151,7 @@ var groupTypes = {
             supwrap.height = supwrap.height + u;
             supwrap.depth = 0;
 
-            supsub = makeSpan(["msupsub"], [supwrap]);
+            supsub = makeSpan(["msupsub"], [supwrap, fixIE]);
         } else {
             u = Math.max(u, p,
                 sup.depth + 0.25 * fontMetrics.metrics.xHeight);
@@ -176,7 +177,7 @@ var groupTypes = {
             subwrap.height = 0;
             subwrap.depth = subwrap.depth + v;
 
-            supsub = makeSpan(["msupsub"], [supwrap, subwrap]);
+            supsub = makeSpan(["msupsub"], [supwrap, subwrap, fixIE]);
         }
 
         return makeSpan([getTypeOfGroup(group.value.base)], [base, supsub]);
@@ -244,7 +245,9 @@ var groupTypes = {
         denomrow.height = 0;
         denomrow.depth = denomrow.depth + v;
 
-        var frac = makeSpan([], [numerrow, mid, denomrow]);
+        var fixIE = makeSpan(["fix-ie"], []);
+
+        var frac = makeSpan([], [numerrow, mid, denomrow, fixIE]);
 
         frac.height *= fstyle.sizeMultiplier / options.style.sizeMultiplier;
         frac.depth *= fstyle.sizeMultiplier / options.style.sizeMultiplier;
@@ -379,11 +382,6 @@ var buildGroup = function(group, options, prev) {
             var multiplier = options.style.sizeMultiplier /
                     options.parentStyle.sizeMultiplier;
 
-            if (multiplier > 1) {
-                throw new ParseError(
-                    "Error: Can't go from small to large style");
-            }
-
             groupNode.height *= multiplier;
             groupNode.depth *= multiplier;
         }
@@ -392,11 +390,6 @@ var buildGroup = function(group, options, prev) {
             var multiplier = sizingMultiplier[options.size] /
                     sizingMultiplier[options.parentSize];
 
-            if (multiplier > 1) {
-                throw new ParseError(
-                    "Error: Can't go from small to large size");
-            }
-
             if (options.depth > 1) {
                 throw new ParseError(
                     "Error: Can't use sizing outside of the root node");

static/katex.less

@@ -163,7 +163,6 @@ big parens
 
     .baseline-align-hack-outer() {
         display: inline-block;
-        vertical-align: top;
     }
 
     .baseline-align-hack-middle() {
@@ -184,7 +183,8 @@ big parens
         margin-left: 0.05em;
 
         .msup,
-        .msub {
+        .msub,
+        .fix-ie {
             .baseline-align-hack-middle;
             position: relative;
 
@@ -192,6 +192,10 @@ big parens
                 .baseline-align-hack-inner;
             }
         }
+
+        .fix-ie {
+            display: inline-block;
+        }
     }
 
     .mfrac {
@@ -199,7 +203,8 @@ big parens
 
         .mfracnum,
         .mfracmid,
-        .mfracden {
+        .mfracden,
+        .fix-ie {
             .baseline-align-hack-middle;
             position: relative;
             text-align: center;
@@ -209,6 +214,10 @@ big parens
             }
         }
 
+        .fix-ie {
+            display: inline-block;
+        }
+
         .mfracmid > span {
             width: 100%;
 

test/huxley/Huxleyfile

@@ -1,32 +1,38 @@
 [BasicTest]
-url=http://localhost:7936/test/huxley/test.html#a
+url=http://localhost:7936/test/huxley/test.html?m=a
 
 [FractionTest]
-url=http://localhost:7936/test/huxley/test.html#\dfrac{a}{b}\frac{a}{b}\tfrac{a}{b}
+url=http://localhost:7936/test/huxley/test.html?m=\dfrac{a}{b}\frac{a}{b}\tfrac{a}{b}
 
 [NestedFractions]
-url=http://localhost:7936/test/huxley/test.html#\dfrac{\frac{a}{b}}{\frac{c}{d}}\dfrac{\dfrac{a}{b}}{\dfrac{c}{d}}\frac{\frac{a}{b}}{\frac{c}{d}}
+url=http://localhost:7936/test/huxley/test.html?m=\dfrac{\frac{a}{b}}{\frac{c}{d}}\dfrac{\dfrac{a}{b}}{\dfrac{c}{d}}\frac{\frac{a}{b}}{\frac{c}{d}}
 
 [Exponents]
-url=http://localhost:7936/test/huxley/test.html#a^{a^a_a}_{a^a_a}
+url=http://localhost:7936/test/huxley/test.html?m=a^{a^a_a}_{a^a_a}
 
 [Colors]
-url=http://localhost:7936/test/huxley/test.html#\blue{a}\green{b}\red{c}
+url=http://localhost:7936/test/huxley/test.html?m=\blue{a}\green{b}\red{c}
 
 [GreekLetters]
-url=http://localhost:7936/test/huxley/test.html#\alpha\beta\gamma\omega
+url=http://localhost:7936/test/huxley/test.html?m=\alpha\beta\gamma\omega
 
 [Baseline]
-url=http://localhost:7936/test/huxley/test.html#a+b-c\cdot d/e
+url=http://localhost:7936/test/huxley/test.html?m=a+b-c\cdot d/e
 
 [Spacing]
-url=http://localhost:7936/test/huxley/test.html#[-1][1-1]1=1(=1)\lvert a\rvert
+url=http://localhost:7936/test/huxley/test.html?m=[-1][1-1]1%%3D1(%%3D1)\lvert a\rvert
 
 [Functions]
-url=http://localhost:7936/test/huxley/test.html#\sin\cos\tan\ln\log
+url=http://localhost:7936/test/huxley/test.html?m=\sin\cos\tan\ln\log
 
 [Lap]
-url=http://localhost:7936/test/huxley/test.html#ab\llap{f}cd\rlap{g}h
+url=http://localhost:7936/test/huxley/test.html?m=ab\llap{f}cd\rlap{g}h
+
+[Sizing]
+url=http://localhost:7936/test/huxley/test.html?m=\Huge{x}\LARGE{y}\normalsize{z}\scriptsize{w}
+
+[SizingBaseline]
+url=http://localhost:7936/test/huxley/test.html?m=\tiny{a+b}a+b\Huge{a+b}&pre=x&post=M
 
 [KaTeX]
-url=http://localhost:7936/test/huxley/test.html#\KaTeX
+url=http://localhost:7936/test/huxley/test.html?m=\KaTeX

test/huxley/Sizing.huxley/record.json

@@ -0,0 +1 @@
+{"py/object": "huxley.run.Test", "screen_size": {"py/tuple": [1024, 768]}, "steps": [{"py/object": "huxley.steps.ScreenshotTestStep", "index": 0, "offset_time": 0}]}

test/huxley/SizingBaseline.huxley/record.json

@@ -0,0 +1 @@
+{"py/object": "huxley.run.Test", "screen_size": {"py/tuple": [1024, 768]}, "steps": [{"py/object": "huxley.steps.ScreenshotTestStep", "index": 0, "offset_time": 0}]}

test/huxley/test.html

@@ -6,17 +6,27 @@
     <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
     <link href="/katex.less.css" rel="stylesheet" type="text/css">
     <style type="text/css">
-      #math {
+      #math, #pre, #post {
         font-size: 4em;
       }
     </style>
   </head>
   <body>
-    <div id="math"></div>
+    <span id="pre"></span>
+    <span id="math"></span>
+    <span id="post"></span>
     <script type="text/javascript">
-      var hash = window.location.hash.slice(1);
+      var query = {};
+      var queryVars = window.location.search.slice(1).split("&");
+      console.log(queryVars);
+      for (var i = 0; i < queryVars.length; i++) {
+        var split = queryVars[i].split("=");
+        query[split[0]] = decodeURIComponent(split[1]);
+      }
       var mathNode = document.getElementById("math");
-      katex.process(hash, mathNode);
+      katex.process(query["m"], mathNode);
+      document.getElementById("pre").innerHTML = query["pre"] || "";
+      document.getElementById("post").innerHTML = query["post"] || "";
     </script>
   </body>
 </html>

test/katex-tests.js

@@ -423,3 +423,27 @@ describe("A frac parser", function() {
         expect(tfracParse.value.denom).toBeDefined();
     });
 });
+
+describe("A sizing parser", function() {
+    var sizeExpression = "\\Huge{x}\\small{x}";
+    var nestedSizeExpression = "\\Huge{\\small{x}}";
+
+    it("should not fail", function() {
+        expect(function() {
+            parseTree(sizeExpression);
+        }).not.toThrow();
+    });
+
+    it("should produce a sizing node", function() {
+        var parse = parseTree(sizeExpression)[0];
+
+        expect(parse.type).toMatch("sizing");
+        expect(parse.value).toBeDefined();
+    });
+
+    it("should not parse a nested size expression", function() {
+        expect(function() {
+            parseExpression(nestedSizeExpression);
+        }).toThrow();
+    });
+});