Fix \Large roots (#1485)

* Fix roots

* Update screenshots

* Added a test in a craven gambit to get a green check mark

* Adjust small radicals

* Fix lint error

* Update screenshots

src/Options.js

@@ -179,6 +179,30 @@ class Options {
         }
     }
 
+    /**
+     * Remove the effect of sizing changes such as \Huge.
+     * Keep the effect of the current style, such as \scriptstyle.
+     */
+    havingBaseSizing(): Options {
+        let size;
+        switch (this.style.id) {
+            case 4:
+            case 5:
+                size = 3;  // normalsize in scriptstyle
+                break;
+            case 6:
+            case 7:
+                size = 1;  // normalsize in scriptscriptstyle
+                break;
+            default:
+                size = 6;  // normalsize in textstyle or displaystyle
+        }
+        return this.extend({
+            style: this.style.text(),
+            size: size,
+        });
+    }
+
     /**
      * Create a new options object with the given color.
      */

src/delimiter.js

@@ -415,12 +415,18 @@ const makeSqrtImage = function(
     ruleWidth: number,
     advanceWidth: number,
 } {
-    const delim =
-        traverseSequence("\\surd", height, stackLargeDelimiterSequence, options);
+    // Define a newOptions that removes the effect of size changes such as \Huge.
+    // We don't pick different a height surd for \Huge. For it, we scale up.
+    const newOptions = options.havingBaseSizing();
+
+    // Pick the desired surd glyph from a sequence of surds.
+    const delim = traverseSequence("\\surd", height * newOptions.sizeMultiplier,
+        stackLargeDelimiterSequence, newOptions);
+
+    let sizeMultiplier = newOptions.sizeMultiplier;  // default
 
     // Create a span containing an SVG image of a sqrt symbol.
     let span;
-    let sizeMultiplier = options.sizeMultiplier;  // default
     let spanHeight = 0;
     let texHeight = 0;
     let viewBoxHeight = 0;
@@ -435,13 +441,16 @@ const makeSqrtImage = function(
     if (delim.type === "small") {
         // Get an SVG that is derived from glyph U+221A in font KaTeX-Main.
         viewBoxHeight = 1000 + vbPad;  // 1000 unit glyph height.
-        const newOptions = options.havingBaseStyle(delim.style);
-        sizeMultiplier = newOptions.sizeMultiplier / options.sizeMultiplier;
-        spanHeight = (1.0 + emPad) * sizeMultiplier;
-        texHeight = 1.00 * sizeMultiplier;
+        if (height < 1.0) {
+            sizeMultiplier = 1.0;   // mimic a \textfont radical
+        } else if (height < 1.4) {
+            sizeMultiplier = 0.7;   // mimic a \scriptfont radical
+        }
+        spanHeight = (1.0 + emPad) / sizeMultiplier;
+        texHeight = 1.00 / sizeMultiplier;
         span = sqrtSvg("sqrtMain", spanHeight, viewBoxHeight, options);
         span.style.minWidth = "0.853em";
-        advanceWidth = 0.833 * sizeMultiplier;  // from the font.
+        advanceWidth = 0.833 / sizeMultiplier;  // from the font.
 
     } else if (delim.type === "large") {
         // These SVGs come from fonts: KaTeX_Size1, _Size2, etc.
@@ -450,17 +459,17 @@ const makeSqrtImage = function(
         spanHeight = (sizeToMaxHeight[delim.size] + emPad) / sizeMultiplier;
         span = sqrtSvg("sqrtSize" + delim.size, spanHeight, viewBoxHeight, options);
         span.style.minWidth = "1.02em";
-        advanceWidth = 1.0 / sizeMultiplier;  // from the font.
+        advanceWidth = 1.0 / sizeMultiplier; // 1.0 from the font.
 
     } else {
         // Tall sqrt. In TeX, this would be stacked using multiple glyphs.
         // We'll use a single SVG to accomplish the same thing.
-        spanHeight = height / sizeMultiplier + emPad;
-        texHeight = height / sizeMultiplier;
+        spanHeight = height + emPad;
+        texHeight = height;
         viewBoxHeight = Math.floor(1000 * height) + vbPad;
         span = sqrtSvg("sqrtTall", spanHeight, viewBoxHeight, options);
         span.style.minWidth = "0.742em";
-        advanceWidth = 1.056 / sizeMultiplier;
+        advanceWidth = 1.056;
     }
 
     span.height = texHeight;

src/functions/sqrt.js

@@ -56,7 +56,7 @@ defineFunction({
         let lineClearance = theta + phi / 4;
 
         const minDelimiterHeight = (inner.height + inner.depth +
-            lineClearance + theta) * options.sizeMultiplier;
+            lineClearance + theta);
 
         // Create a sqrt SVG of the required minimum size
         const {span: img, ruleWidth, advanceWidth} =

test/katex-spec.js

@@ -1279,6 +1279,10 @@ describe("A sqrt parser", function() {
 
         expect(parse.type).toEqual("sqrt");
     });
+
+    it("should build sized square roots", function() {
+        expect("\\Large\\sqrt[3]{x}").toBuild();
+    });
 });
 
 describe("A TeX-compliant parser", function() {

test/screenshotter/ss_data.yaml

@@ -312,7 +312,10 @@ Sqrt: |
     \sqrt{\sqrt{\sqrt{x}}}_{\sqrt{\sqrt{x}}}^{\sqrt{\sqrt{\sqrt{x}}}
     ^{\sqrt{\sqrt{\sqrt{x}}}}}
 SqrtRoot: |
-    1+\sqrt[3]{2}+\sqrt[1923^234]{2^{2^{2^{2^{2^{2^{2^{2^{2^{2^{2^2}}}}}}}}}}}
+    \begin{array}{l}
+        1+\sqrt[3]{2}+\sqrt[1923^234]{2^{2^{2^{2^{2^{2^{2^{2^{2^{2^{2^2}}}}}}}}}}} \\
+        \Huge \sqrt[3]{M} + x^{\sqrt[3] a}
+    \end{array}
 StackRel: a \stackrel{?}{=} b \stackrel{\text{def}}{=} c
 StretchyAccent: |
     \begin{array}{l}