<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Embellished operators - tree change and relayout (reference)</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
  math, math * {
      font: 25px/1 Ahem;
  }
  mn {
      color: black;
  }
  mo {
      color: blue;
  }
</style>
</head>
<body>
  <p>There should be the five 1em squares on the same line, with colors
    black, orange, blue, orange, black:</p>
  <math display="block">
    <mrow style="background: yellow">
      <mn>1</mn>
      <mrow style="background: orange">
        <mrow id="change_to_non_embellished_operator">
          <mrow>
            <mo lspace="1em" rspace="1em">X</mo>
          </mrow>
          <mn></mn>
        </mrow>
      </mrow>
      <mn>2</mn>
    </mrow>
  </math>

  <p>There should be the five 1em squares on the same line, with colors
    black, yellow, blue, yellow, black:</p>
  <math display="block">
    <mrow style="background: yellow">
      <mn>3</mn>
      <mrow style="background: orange">
        <mrow id="change_to_embellished_operator">
          <mrow>
            <mo lspace="1em" rspace="1em">X</mo>
          </mrow>
        </mrow>
      </mrow>
      <mn>4</mn>
    </mrow>
  </math>

  <p>There should be the five 1em squares on the same line, with colors
    black, orange, blue, orange, black:</p>
  <math display="block">
    <mrow style="background: yellow">
      <mn>5</mn>
      <mrow style="background: orange">
        <mrow>
          <mrow>
            <mo lspace="1em" rspace="1em">X</mo>
          </mrow>
        </mrow>
          <mrow id="change_to_not_space_like">
            <mspace></mspace>
            <mtext></mtext>
            <mn></mn>
          </mrow>
      </mrow>
      <mn>6</mn>
    </mrow>
  </math>

  <p>There should be the five 1em squares on the same line, with colors
    black, yellow, blue, yellow, black:</p>
  <math display="block">
    <mrow style="background: yellow">
      <mn>7</mn>
      <mrow style="background: orange">
        <mrow>
          <mrow>
            <mo lspace="1em" rspace="1em">X</mo>
          </mrow>
          <mrow id="change_to_space_like">
            <mspace></mspace>
            <mtext></mtext>
          </mrow>
        </mrow>
      </mrow>
      <mn>8</mn>
    </mrow>
  </math>

</body>
</html>
