mathml/relations/css-styling/scriptlevel-001.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Automatic scriptlevel</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
<link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
<link rel="stylesheet" href="/fonts/ahem.css">
<meta name="assert" content="Verify automatic scriptlevel changes">
<style>
  #container, math {
      /* Ahem font does not have a MATH table so the font-size scale factor
         is always 0.71^{computed - inherited math script level} */
      font: 100px/1 Ahem;
  }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/mathml-fragments.js"></script>
<script>
  setup({ explicit_done: true });
  window.addEventListener("load", runTests);
  function fontSize(element) {
      return parseFloat((/(.+)px/).exec(window.getComputedStyle(element).getPropertyValue("font-size"))[1]);
  }
  function runTests() {
      var container = document.getElementById("container");
      var epsilon = .1
      var fontSizeAtScriptLevelZero = fontSize(container);

      test(function() {
          var element = document.getElementById("mfrac_displaystyle");
          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "numerator");
          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "denominator");
      }, "automatic scriptlevel on mfrac (displaystyle=true)");

     test(function() {
          var element = document.getElementById("mfrac_notdisplaystyle");
          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero * .71, epsilon, "numerator");
          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "denominator");
      }, "automatic scriptlevel on mfrac (displaystyle=false)");

      test(function() {
          var element = document.getElementsByTagName("mroot")[0];
          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71 * .71, epsilon, "index");
      }, "automatic scriptlevel on mroot");

      ["msub", "msup", "msubsup", "munder", "mover", "munderover", "mmultiscripts"].forEach(tag => {
          test(function() {
              var element = document.getElementsByTagName(tag)[0];
              for (var i = 0; i < element.children.length; i++)
                  assert_approx_equals(fontSize(element.children[i]), i > 0 ? fontSizeAtScriptLevelZero * .71 : fontSizeAtScriptLevelZero, epsilon, `child ${i}`);
          }, `automatic scriptlevel on ${tag}`);
      });

      test(function() {
          var element = document.querySelector("munder[accentunder='true']");
          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under");
      }, `automatic scriptlevel on munder (accentunder=true)`);

      test(function() {
          var element = document.querySelector("mover[accent='true']");
          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "over");
      }, `automatic scriptlevel on mover (accent=true)`);

      test(function() {
          var element = document.querySelector("munderover[accentunder='true']");
          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under");
          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over");
      }, `automatic scriptlevel on munderover (accentunder=true)`);

      test(function() {
          var element = document.querySelector("munderover[accent='true']");
          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under");
          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over");
      }, `automatic scriptlevel on munderover (accent=true)`);

      test(function() {
          var element = document.getElementById("munderover-dynamic-case-insensitive")
          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under");
          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over");

          element.removeAttribute("accent");
          element.setAttribute("accentunder", "TrUe");
          assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base");
          assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under");
          assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over");
       }, "checking dynamic/case-insensitive accent/accentunder");

      done();
  }
</script>
</head>
<body>
  <div id="log"></div>
  <div id="container">
    <p>
      <math displaystyle="true">
        <mfrac id="mfrac_displaystyle">
          <mn>0</mn>
          <mn>1</mn>
        </mfrac>
      </math>

      <math displaystyle="false">
        <mfrac id="mfrac_notdisplaystyle">
          <mn>0</mn>
          <mn>1</mn>
        </mfrac>
      </math>
    </p>
    <p>
      <math>
        <mroot>
          <mn>0</mn>
          <mn>1</mn>
        </mroot>
      </math>
    </p>
    <p>
      <math>
        <msub>
          <mn>0</mn>
          <mn>1</mn>
        </msub>
      </math>
      <math>
        <msup>
          <mn>0</mn>
          <mn>1</mn>
        </msup>
      </math>
      <math>
        <msubsup>
          <mn>0</mn>
          <mn>1</mn>
          <mn>2</mn>
        </msubsup>
      </math>
      <math>
        <munder>
          <mn>0</mn>
          <mn>1</mn>
        </munder>
      </math>
      <math>
        <mover>
          <mn>0</mn>
          <mn>1</mn>
        </mover>
      </math>
      <math>
        <munderover>
          <mn>0</mn>
          <mn>1</mn>
          <mn>2</mn>
        </munderover>
      </math>
      <math>
        <mmultiscripts>
          <mn>0</mn>
          <mn>1</mn>
          <mn>2</mn>
          <mn>3</mn>
          <mn>4</mn>
          <mprescripts/>
          <mn>6</mn>
          <mn>7</mn>
          <mn>8</mn>
          <mn>9</mn>
        </mmultiscripts>
      </math>
    </p>
    <p>
      <math>
        <munder accentunder="true">
          <mn>0</mn>
          <mn>1</mn>
        </munder>
      </math>
      <math>
        <mover accent="true">
          <mn>0</mn>
          <mn>1</mn>
        </mover>
      </math>
      <math>
        <munderover accent="true">
          <mn>0</mn>
          <mn>1</mn>
          <mn>2</mn>
        </munderover>
      </math>
      <math>
        <munderover accentunder="true">
          <mn>0</mn>
          <mn>1</mn>
          <mn>2</mn>
        </munderover>
      </math>
    </p>
    <p>
      <math>
        <munderover id="munderover-dynamic-case-insensitive" accent="TrUe">
          <mn>0</mn>
          <mn>1</mn>
          <mn>2</mn>
        </munderover>
      </math>
    </p>
  </div>
</body>
</html>