<!DOCTYPE html>
<html class="reftest-wait">
  <head>
    <title>Dynamic ssty tests</title>
    <!-- See ssty-1-ref.html for an explanation of this font -->
    <style type="text/css" media="screen, print">
    @font-face {
      font-family: "sstyfont";
      src: url("ssty.woff");
    }
  </style>
  </head>
  <body>

  <math>
    <mstyle style="font-family: 'sstyfont';">
      <mfrac id="mfrac0">
        <mo>A</mo>
      </mfrac>
    </mstyle>
  </math>

  <p>

  <math>
    <mstyle style="font-family: 'sstyfont';">
      <mfrac>
        <mo>A</mo>
        <mo id="mo0"></mo>
      </mfrac>
    </mstyle>
  </math>

  <p>

  <math>
    <mstyle style="font-family: 'sstyfont';">
      <mfrac>
        <mo>A</mo>
        <mo id="mo1">A</mo>
      </mfrac>
    </mstyle>
  </math>

  <p>

  <math>
    <mstyle style="font-family: 'sstyfont';" id="mstyle0">
    </mstyle>
  </math>

  <p>

  <math>
    <mstyle id="mstyle1">
      <mfrac>
        <mfrac>
          <mo>A</mo>
          <mo>A</mo>
        </mfrac>
        <mfrac>
           <mo>A</mo>
           <mo>A</mo>
        </mfrac>
      </mfrac>
    </mstyle>
  </math>

  <p>

  <math>
    <mstyle id="mstyle2" style="font-family: 'sstyfont';">
      <mfrac>
        <mfrac>
          <mo>A</mo>
          <mo>A</mo>
        </mfrac>
        <mfrac>
           <mo>A</mo>
           <mo>A</mo>
        </mfrac>
      </mfrac>
    </mstyle>
  </math>

  <p>

  <math>
    <mstyle id="mstyle3" style="font-family: 'sstyfont';">
      <mfrac>
        <mfrac>
          <mo>A</mo>
          <mo>A</mo>
        </mfrac>
        <mfrac>
           <mo>A</mo>
           <mo>A</mo>
        </mfrac>
      </mfrac>
    </mstyle>
  </math>

  <p>

  <math>
    <mstyle style="font-family: 'sstyfont';">
      <mfrac>
        <mo>A</mo>
        <mrow>
          <mrow>
            <mrow id="mrow0">
            </mrow>
          </mrow>
        </mrow>
      </mfrac>
    </mstyle>
  </math>

 <p>

  <math>
    <mstyle id="mstyle4" style ="font-family: 'sstyfont'; font-feature-settings: 'ssty' 0">
      <mfrac>
        <mfrac>
          <mo>A</mo>
          <mo>A</mo>
        </mfrac>
        <mfrac>
           <mo>A</mo>
           <mo>A</mo>
        </mfrac>
      </mfrac>
    </mstyle>
  </math>

  <p>

  <math>
    <mstyle id="mstyle5" style ="font-family: 'sstyfont';">
      <mfrac>
        <mfrac>
          <mo>A</mo>
          <mo>A</mo>
        </mfrac>
        <mfrac>
           <mo>A</mo>
           <mo>A</mo>
        </mfrac>
      </mfrac>
    </mstyle>
  </math>

    <script>
      function doTest()
      {
        var mo = document.createElementNS("http://www.w3.org/1998/Math/MathML", "mo");
        mo.innerHTML = "A";
        // An added child gets ssty font feature
        document.getElementById("mfrac0").appendChild(mo);
        // A child with changed text gets ssty font feature
        document.getElementById("mo0").innerHTML = "A";
        // A relocated child loses ssty font feature setting
        document.getElementById("mstyle0").appendChild(document.getElementById("mo1"));
        // A change in style
        document.getElementById("mstyle1").setAttribute("style", "font-family: 'sstyfont';");
        // Changes in script size multiplier affect ssty setting
        document.getElementById("mstyle2").setAttribute("scriptsizemultiplier", "1.2");
        document.getElementById("mstyle3").setAttribute("scriptsizemultiplier", "0.8");

        // ssty gets added to descendants as well
        var mo1 = document.createElementNS("http://www.w3.org/1998/Math/MathML", "mo");
        mo1.innerHTML = "A";
        document.getElementById("mrow0").appendChild(mo1);
        // removing explicit ssty setting works
        document.getElementById("mstyle4").setAttribute(
          "style", "font-family: 'sstyfont';")
        // setting an explicit ssty font feature 
        document.getElementById("mstyle5").setAttribute(
          "style" , "font-family: 'sstyfont'; font-feature-settings: 'ssty' 0")

        document.documentElement.removeAttribute("class");
      }
      window.addEventListener("MozReftestInvalidate", doTest, false);
    </script>
  </body>
</html>