feat: support MathML \big, \bigg, \Big, and \Bigg (#2332)

* Support MathML \big, \bigg, etc

* Add stretchy attribute

* Update mathml-spec.js.snap

Co-authored-by: ylemkimon <y@ylem.kim>

src/delimiter.js

@@ -782,6 +782,7 @@ const makeLeftRightDelim = function(
 export default {
     sqrtImage: makeSqrtImage,
     sizedDelim: makeSizedDelim,
+    sizeToMaxHeight: sizeToMaxHeight,
     customSizedDelim: makeCustomSizedDelim,
     leftRightDelim: makeLeftRightDelim,
 };

src/functions/delimsizing.js

@@ -124,6 +124,10 @@ defineFunction({
             node.setAttribute("fence", "false");
         }
 
+        node.setAttribute("stretchy", "true");
+        node.setAttribute("minsize", delimiter.sizeToMaxHeight[group.size] + "em");
+        node.setAttribute("maxsize", delimiter.sizeToMaxHeight[group.size] + "em");
+
         return node;
     },
 });

test/__snapshots__/mathml-spec.js.snap

@@ -556,6 +556,95 @@ exports[`A MathML builder should set href attribute for href appropriately 1`] =
 </math>
 `;
 
+exports[`A MathML builder should size delimiters correctly 1`] = `
+<math xmlns="http://www.w3.org/1998/Math/MathML">
+  <semantics>
+    <mrow>
+      <mo stretchy="false">
+        (
+      </mo>
+      <mi>
+        M
+      </mi>
+      <mo stretchy="false">
+        )
+      </mo>
+      <mo fence="false"
+          stretchy="true"
+          minsize="1.2em"
+          maxsize="1.2em"
+      >
+        (
+      </mo>
+      <mi>
+        M
+      </mi>
+      <mo fence="false"
+          stretchy="true"
+          minsize="1.2em"
+          maxsize="1.2em"
+      >
+        )
+      </mo>
+      <mo fence="false"
+          stretchy="true"
+          minsize="1.8em"
+          maxsize="1.8em"
+      >
+        (
+      </mo>
+      <mi>
+        M
+      </mi>
+      <mo fence="false"
+          stretchy="true"
+          minsize="1.8em"
+          maxsize="1.8em"
+      >
+        )
+      </mo>
+      <mo fence="false"
+          stretchy="true"
+          minsize="2.4em"
+          maxsize="2.4em"
+      >
+        (
+      </mo>
+      <mi>
+        M
+      </mi>
+      <mo fence="false"
+          stretchy="true"
+          minsize="2.4em"
+          maxsize="2.4em"
+      >
+        )
+      </mo>
+      <mo fence="false"
+          stretchy="true"
+          minsize="3em"
+          maxsize="3em"
+      >
+        (
+      </mo>
+      <mi>
+        M
+      </mi>
+      <mo fence="false"
+          stretchy="true"
+          minsize="3em"
+          maxsize="3em"
+      >
+        )
+      </mo>
+    </mrow>
+    <annotation encoding="application/x-tex">
+      (M) \\big(M\\big) \\Big(M\\Big) \\bigg(M\\bigg) \\Bigg(M\\Bigg)
+    </annotation>
+  </semantics>
+</math>
+`;
+
 exports[`A MathML builder should use <menclose> for colorbox 1`] = `
 <math xmlns="http://www.w3.org/1998/Math/MathML">
   <semantics>

test/mathml-spec.js

@@ -65,6 +65,11 @@ describe("A MathML builder", function() {
         expect(getMathML("\\raisebox{0.25em}{b}")).toMatchSnapshot();
     });
 
+    it('should size delimiters correctly', () => {
+        expect(getMathML("(M) \\big(M\\big) \\Big(M\\Big) \\bigg(M\\bigg)" +
+        " \\Bigg(M\\Bigg)")).toMatchSnapshot();
+    });
+
     it('should use <menclose> for colorbox', () => {
         expect(getMathML("\\colorbox{red}{b}")).toMatchSnapshot();
     });