Clarify when token elements should fall back to non-MathML layout

[fred-wang]

cc @bfgeek @eerii

From the spec:

https://w3c.github.io/mathml-core/#layout-of-operators

If the content of the element is not made of a single character c then fall back to the layout algorithm of 3.2.1.1 Layout of .

https://w3c.github.io/mathml-core/#layout-of-mtext

If the element contains only text content without forced line break or soft wrap opportunity then, the anonymous child node generated for that text is laid out as defined in the relevant CSS specification and [...] Otherwise, the mtext element is laid out as a block box [...]

https://w3c.github.io/mathml-core/#css-styling

The float property does not create floating of elements whose parent's computed display value is block math or inline math, and does not take them out-of-flow.

I think the idea is to only do the special MathML handling when we have some text content or some single character for mo, but the conditions are not really clear. Here are some cases to consider where browsers behave inconsistently and are not really following the spec:

<ul style="font-size: 32pt">
  <li>Non-empty span:
    <math><mrow><mo><span>(</span></mo><mfrac><mfrac><mn>1</mn><mn>2</mn></mfrac><mfrac><mn>3</mn><mn>4</mn></mfrac></mfrac></mrow></math>
  </li>

  <li>Empty span:
    <math><mrow><mo>(<span></span></mo><mfrac><mfrac><mn>1</mn><mn>2</mn></mfrac><mfrac><mn>3</mn><mn>4</mn></mfrac></mfrac></mrow></math>
  </li>

  <li>Multiple text nodes:
  <math><mrow><mo id="mo2"></mo><mfrac><mfrac><mn>1</mn><mn>2</mn></mfrac><mfrac><mn>3</mn><mn>4</mn></mfrac></mfrac></mrow></math>
  <script>
    mo2.appendChild(document.createTextNode("("));
    mo2.appendChild(document.createTextNode("")); // empty
  </script>
  </li>

  <li>Absolutely positioned child:
    <math><mrow><mo>(<div style="position: absolute"></div></mo><mfrac><mfrac><mn>1</mn><mn>2</mn></mfrac><mfrac><mn>3</mn><mn>4</mn></mfrac></mfrac></mrow></math>
  </li>

  <li>Floating child:
    <math><mrow><mo>(<div style="float: left"></div></mo><mfrac><mfrac><mn>1</mn><mn>2</mn></mfrac><mfrac><mn>3</mn><mn>4</mn></mfrac></mfrac></mrow></math>
  </li>

  <li>Line break:
    <math><mfrac><mtext style="width: 1px">+<!-- -->+</mtext><mn>3456</mn></mfrac></math>
  </li>
</ul>