<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Legacy mstyle attributes</title>
<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle">
<link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle">
<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
<link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac">
<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
<link rel="help" href="https://w3c.github.io/mathml-core/#string-literal-ms">
<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.menclose">
<meta name="assert" content="Legacy mstyle attributes are ignored">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/layout-comparison.js"></script>
<script type="text/javascript">
  setup({ explicit_done: true });
  window.addEventListener("load", runTests);
  function runTests()
  {
      Array.from(document.getElementsByClassName("TestContainer")).forEach(container => {
          const tag = container.id;
          test(function() {
              assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
              const epsilon = 1;
              const math = container.getElementsByTagName("math");
              compareLayout(math[0], math[1], epsilon);
          }, `Legacy mstyle attributes do not apply to ${tag}`);
      });
      done();
  }
</script>
</head>
<body>
  <div id="log"></div>
  <!-- Note: mpadded attributes are not tested since MathML3 did not allow to
       set them from mstyle. Also, it is not clear whether munderover's
       accent/accentunder could be applied from mstyle, given that the former
       clashes with mo@accent. Other legacy mstyle attributes not in MathML
       Core or without visual effect are not tested.
    -->
  <p class="TestContainer" id="mspace">
    <math>
      <mstyle width="50px" height="50px" depth="50px">
        <mspace style="background: lightblue"></mspace>
      </mstyle>
    </math>
    <math>
      <mstyle>
        <mspace style="background: lightblue"></mspace>
      </mstyle>
    </math>
  </p>
  <p class="TestContainer" id="mfrac">
    <math>
      <mstyle linethickness="50px">
        <mfrac>
          <mn>1</mn>
          <mn>2</mn>
        </mfrac>
      </mstyle>
    </math>
    <math>
      <mstyle>
        <mfrac>
          <mn>1</mn>
          <mn>2</mn>
        </mfrac>
      </mstyle>
    </math>
  </p>
  <p class="TestContainer" id="mo">
    <math displaystyle="true">
      <mstyle lspace="50px" rspace="50px">
        <mn>1</mn>
        <mo>A</mo>
        <mn>2</mn>
      </mstyle>
      <mstyle movablelimits="false" largeop="false">
        <munder>
          <mo>∑</mo>
          <mn>3</mn>
        </munder>
      </mstyle>
      <mstyle accent="false">
        <mover>
          <mn>4</mn>
          <mo>⇀</mo>
        </mover>
      </mstyle>
      <mstyle stretchy="false" symmetric="false" maxsize="20px">
        <mrow>
          <mo>|</mo>
          <mspace height="100px"></mspace>
        </mrow>
      </mstyle>
      <mstyle minsize="100px">
        <mrow>
          <mo>|</mo>
          <mn>4</mn>
        </mrow>
      </mstyle>
    </math>
    <math displaystyle="true">
      <mstyle>
        <mn>1</mn>
        <mo>A</mo>
        <mn>2</mn>
      </mstyle>
      <mstyle>
        <munder>
          <mo>∑</mo>
          <mn>3</mn>
        </munder>
      </mstyle>
      <mstyle>
        <mover>
          <mn>4</mn>
          <mo>⇀</mo>
        </mover>
      </mstyle>
      <mstyle>
        <mrow>
          <mo>|</mo>
          <mspace height="100px"></mspace>
        </mrow>
      </mstyle>
      <mstyle>
        <mrow>
          <mo>|</mo>
          <mn>4</mn>
        </mrow>
      </mstyle>
    </math>
  </p>
  <!-- notation attribute is from MathML3's menclose element -->
  <p class="TestContainer" id="menclose">
    <math>
      <mstyle notation="box">
        <mn>1</mn>
      </mstyle>
    </math>
    <math>
      <mstyle>
        <mn>1</mn>
      </mstyle>
    </math>
  </p>
  <p class="TestContainer" id="ms">
    <math>
      <mstyle lquote="AAAA" rquote="BBBB">
        <ms>1</ms>
      </mstyle>
    </math>
    <math>
      <mstyle>
        <ms>1</ms>
      </mstyle>
    </math>
  </p>
</body>
</html>
