mathml/presentation/mo-stretch.html

<!DOCTYPE html>
<html>

<head>
    <title>&lt;mo&gt; Stretching Tests</title>
    
    <style>
    	td		{ border: solid }
    </style>
</head>

<body>

<math display="block">
  <mrow>
    <mrow>
      <mrow>
        <mi>f</mi>
        <mrow>
          <mo>(</mo>
          <mfrac>
            <mrow><mfrac><mi>a</mi><mi>b</mi></mfrac><mo>+</mo><mi>c</mi></mrow>
            <mrow><mfrac><mi>c</mi><mi>d</mi></mfrac><mo>+</mo><mi>e</mi></mrow>
          </mfrac>
          <mo>)</mo>
        </mrow>
      </mrow>
      <mo>+</mo>
      <mrow>
        <mi>g</mi>
        <mrow>
          <mo>[</mo>
          <msubsup>
            <mi>x</mi>
            <mrow><mfrac><mi>c</mi><mi>d</mi></mfrac><mo>+</mo><mi>e</mi></mrow>
            <mrow><mfrac><mi>a</mi><mi>b</mi></mfrac><mo>+</mo><mi>c</mi></mrow>
          </msubsup>
          <mo>]</mo>
        </mrow>
      </mrow>
    </mrow>
    <mo>+</mo>
    <mrow>
      <msubsup>
        <mo>&int;</mo>
        <mi>a</mi>
        <mi>b</mi>
      </msubsup>
      <mrow>
        <munderover><mo>&sum;</mo><mrow><mi>i</mi><mo>=</mo><mn>0</mn></mrow><mi>n</mi></munderover>
        <mi>i</mi>
      </mrow>
    </mrow>
  </mrow>
</math>

<p>Implied <code>mrow</code> with operator stretching:</p>
<math display="block">
  <msqrt>
    <mi>f</mi>
    <mo>(</mo>
    <mfrac> <mn>1</mn> <mi>y</mi> </mfrac>
    <mo>)</mo>
  </msqrt>
</math>

<p>Preferred logical widths and heights, with operator stretching:</p>
<table><td>a</table>
<table><td id="grow-td">x</table>
<script>
    window.addEventListener("load", function() {
        document.body.offsetTop;
        
        var e = document.createElement("div");
        e.innerHTML = "<math display='block' style='margin-bottom: 0'> <mrow>"+
        	"<mrow> <mo>{</mo> <mi>x</mi> <mo>}</mo> </mrow> <mo>+</mo>" +
        	"<mfenced> <mfrac> <mn>1</mn> <mi>y</mi> </mfrac> </mfenced> <mo>+</mo>" +
            "<mrow> <mo>[</mo> <mtable> <mtr><mtd><mn>1</mn></mtd></mtr> <mtr><mtd><mn>2</mn></mtd></mtr>" +
            	"<mtr><mtd><mn>3</mn></mtd></mtr> </mtable> <mo>]</mo> </mrow> </mrow> </math>";
        var td = document.getElementById("grow-td"), t = td.firstChild;
        td.insertBefore(e.firstChild, t);
        td.removeChild(t);
    }, false);
</script>

</body>

</html>