<!DOCTYPE html>
<html>
  <head>
    <title>math-script-level</title>
    <meta charset="utf-8">
    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3746">
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-script-level-property">
    <meta name="assert" content="Check the resolved value of math-script-level">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
    <style>
      @font-face {
        font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40;
        src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown40.woff");
      }
      @font-face {
        font-family: scriptpercentscaledown0-scriptscriptpercentscaledown40;
        src: url("/fonts/math/scriptpercentscaledown0-scriptscriptpercentscaledown40.woff");
      }
      @font-face {
        font-family: scriptpercentscaledown80-scriptscriptpercentscaledown0;
        src: url("/fonts/math/scriptpercentscaledown80-scriptscriptpercentscaledown0.woff");
      }
      #scale80-40-scaledown, #scale80-40-scaleup {
          font-family: scriptpercentscaledown80-scriptscriptpercentscaledown40;
      }
      #scale0-40-scaledown, #scale0-40-scaleup {
          font-family: scriptpercentscaledown0-scriptscriptpercentscaledown40;
      }
      #scale80-0-scaledown, #scale80-0-scaleup {
          font-family: scriptpercentscaledown80-scriptscriptpercentscaledown0;
      }
      #default-scaledown, #default-scaleup {
          /* Ahem font does not have any MATH table, so uses default scale. */
          font-family: Ahem;
      }
      .big { font-size: 3000px; }
      .small { font-size: 150px; }
      .level-3 { font-size: math; math-depth: -3; }
      .level-1 { font-size: math; math-depth: -1; }
      .level0 { font-size: math; math-depth: 0; }
      .level1 { font-size: math; math-depth: 1; }
      .level2 { font-size: math; math-depth: 2; }
      .level3 { font-size: math; math-depth: 3; }
      .level5 { font-size: math; math-depth: 5; }
    </style>
    <script>
      const big = 3000;
      const small = 150;
      setup({ explicit_done: true });
      function fontSize(element) {
          return parseFloat((/(.+)px/).exec(getComputedStyle(element).
                                            getPropertyValue("font-size"))[1]);
      }
      function CheckFontSizes(id, sizes) {
          var container = document.getElementById(id);
          for (var level in sizes) {
              var divs = container.getElementsByClassName(`level${level}`);
              for (var i = 0; i < divs.length; i++) {
                  assert_approx_equals(fontSize(divs[i]), sizes[level], 1, `Wrong font-size (id=${id} ; level=${level} ; i=${i})`);
              }
          }
      }
      window.addEventListener("load", function() {
          document.fonts.ready.then(function() {
              test(function() {
                  CheckFontSizes("scale80-40-scaledown", {
                      "-3": big,
                      "-1": big * .71 * .71,
                      "0": big * .71 * .71 * .71,
                      "1": big * .71 * .71 * .71 * .8,
                      "2": big * .71 * .71 * .71 * .4,
                      "3": big * .71 * .71 * .71 * .4 * .71,
                      "5": big * .71 * .71 * .71 * .4 * .71 * .71 * .71
                  });
                  CheckFontSizes("scale80-40-scaleup", {
                      "5": small,
                      "3": small / (.71 * .71),
                      "2": small / (.71 * .71 * .71),
                      "1": small / (.71 * .71 * .71 * (.4 / .8)),
                      "0": small  / (.71 * .71 * .71 * .4),
                      "-1": small / (.71 * .71 * .71 * .4 * .71),
                      "-3": small / (.71 * .71 * .71 * .4 * .71 * .71 * .71)
                  });
              }, "scriptPercentScaleDown=80, scriptScriptPercentScaleDown=40");

              test(function() {
                  var scriptPercentScaleDown = .71;
                  CheckFontSizes("scale0-40-scaledown", {
                      "-3": big,
                      "-1": big * .71 * .71,
                      "0": big * .71 * .71 * .71,
                      "1": big * .71 * .71 * .71 * scriptPercentScaleDown,
                      "2": big * .71 * .71 * .71 * .4,
                      "3": big * .71 * .71 * .71 * .4 * .71,
                      "5": big * .71 * .71 * .71 * .4 * .71 * .71 * .71
                  });
                  CheckFontSizes("scale0-40-scaleup", {
                      "5": small,
                      "3": small / (.71 * .71),
                      "2": small / (.71 * .71 * .71),
                      "1": small / (.71 * .71 * .71 * (.4 / scriptPercentScaleDown)),
                      "0": small  / (.71 * .71 * .71 * .4),
                      "-1": small / (.71 * .71 * .71 * .4 * .71),
                      "-3": small / (.71 * .71 * .71 * .4 * .71 * .71 * .71)
                  });
              }, "scriptPercentScaleDown=0, scriptScriptPercentScaleDown=40");

              test(function() {
                  var scriptScriptPercentScaleDown = 0.5041;
                  CheckFontSizes("scale80-0-scaledown", {
                      "-3": big,
                      "-1": big * .71 * .71,
                      "0": big * .71 * .71 * .71,
                      "1": big * .71 * .71 * .71 * .8,
                      "2": big * .71 * .71 * .71 * scriptScriptPercentScaleDown,
                      "3": big * .71 * .71 * .71 * scriptScriptPercentScaleDown * .71,
                      "5": big * .71 * .71 * .71 * scriptScriptPercentScaleDown * .71 * .71 * .71
                  });
                  CheckFontSizes("scale80-0-scaleup", {
                      "5": small,
                      "3": small / (.71 * .71),
                      "2": small / (.71 * .71 * .71),
                      "1": small / (.71 * .71 * .71 * (scriptScriptPercentScaleDown / .8)),
                      "0": small  / (.71 * .71 * .71 * scriptScriptPercentScaleDown),
                      "-1": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown * .71),
                      "-3": small / (.71 * .71 * .71 * scriptScriptPercentScaleDown * .71 * .71 * .71)
                  });
              }, "scriptPercentScaleDown=80, scriptScriptPercentScaleDown=0");

              test(function() {
                  CheckFontSizes("default-scaledown", {
                      "-3": big,
                      "-1": big * .71 * .71,
                      "0": big * .71 * .71 * .71,
                      "1": big * .71 * .71 * .71 * .71,
                      "2": big * .71 * .71 * .71 * .71 * .71,
                      "3": big * .71 * .71 * .71 * .71 * .71 * .71,
                      "5": big * .71 * .71 * .71 * .71 * .71 * .71 * .71 * .71
                  });
                  CheckFontSizes("default-scaleup", {
                      "5": small,
                      "3": small / (.71 * .71),
                      "2": small / (.71 * .71 * .71),
                      "1": small / (.71 * .71 * .71 * .71),
                      "0": small  / (.71 * .71 * .71 * .71 * .71),
                      "-1": small / (.71 * .71 * .71 * .71 * .71 * .71),
                      "-3": small / (.71 * .71 * .71 * .71 * .71 * .71 * .71 * .71)
                  });
              }, "No MATH table");

              done();
          });
      });
    </script>
  </head>
  <body>
    <div id="log"></div>

    <div class="level-3" id="scale80-40-scaledown">
      <div class="big">
        <div class="level5"><!-- -3 to 5 --></div>
        <div class="level3"><!-- -3 to 3 --></div>
        <div class="level2"><!-- -3 to 2 --></div>
        <div class="level1"><!-- -3 to 1 --></div>
        <div class="level0"><!-- -3 to 0 --></div>
        <div class="level-1"><!-- -3 to -1 -->
          <div class="level5"><!-- -1 to 5 --></div>
          <div class="level3"><!-- -1 to 3 --></div>
          <div class="level2"><!-- -1 to 2 --></div>
          <div class="level1"><!-- -1 to 1 --></div>
          <div class="level0"><!-- -1 to 0 -->
            <div class="level5"><!-- 0 to 5 --></div>
            <div class="level3"><!-- 0 to 3 --></div>
            <div class="level2"><!-- 0 to 2 --></div>
            <div class="level1"><!-- 0 to 1 -->
              <div class="level5"><!-- 1 to 5 --></div>
              <div class="level3"><!-- 1 to 3 --></div>
              <div class="level2"><!-- 1 to 2 -->
                <div class="level5"><!-- 2 to 5 --></div>
                <div class="level3"><!-- 2 to 3 -->
                  <div class="level5"><!-- 3 to 5 --></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="level5" id="scale80-40-scaleup">
      <div class="small">
        <div class="level-3"><!-- 5 to -3 --></div>
        <div class="level-1"><!-- 5 to -1 --></div>
        <div class="level0"><!-- 5 to 0 --></div>
        <div class="level1"><!-- 5 to 1 --></div>
        <div class="level2"><!-- 5 to 2 --></div>
        <div class="level3"><!-- 5 to 3 -->
          <div class="level-3"><!-- 3 to -3 --></div>
          <div class="level-1"><!-- 3 to -1 --></div>
          <div class="level0"><!-- 3 to 0 --></div>
          <div class="level1"><!-- 3 to 1 --></div>
          <div class="level2"><!-- 3 to 2 -->
            <div class="level-3"><!-- 2 to -3 --></div>
            <div class="level-1"><!-- 2 to -1 --></div>
            <div class="level0"><!-- 2 to 0 --></div>
            <div class="level1"><!-- 2 to 1 -->
              <div class="level-3"><!-- 1 to -3 --></div>
              <div class="level-1"><!-- 1 to -1 --></div>
              <div class="level0"><!-- 1 to 0 -->
                <div class="level-3"><!-- 0 to -3 --></div>
                <div class="level-1"><!-- 0 to -1 -->
                  <div class="level-3"><!-- -1 to -3 --></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="level-3" id="scale0-40-scaledown">
      <div class="big">
        <div class="level5"><!-- -3 to 5 --></div>
        <div class="level3"><!-- -3 to 3 --></div>
        <div class="level2"><!-- -3 to 2 --></div>
        <div class="level1"><!-- -3 to 1 --></div>
        <div class="level0"><!-- -3 to 0 --></div>
        <div class="level-1"><!-- -3 to -1 -->
          <div class="level5"><!-- -1 to 5 --></div>
          <div class="level3"><!-- -1 to 3 --></div>
          <div class="level2"><!-- -1 to 2 --></div>
          <div class="level1"><!-- -1 to 1 --></div>
          <div class="level0"><!-- -1 to 0 -->
            <div class="level5"><!-- 0 to 5 --></div>
            <div class="level3"><!-- 0 to 3 --></div>
            <div class="level2"><!-- 0 to 2 --></div>
            <div class="level1"><!-- 0 to 1 -->
              <div class="level5"><!-- 1 to 5 --></div>
              <div class="level3"><!-- 1 to 3 --></div>
              <div class="level2"><!-- 1 to 2 -->
                <div class="level5"><!-- 2 to 5 --></div>
                <div class="level3"><!-- 2 to 3 -->
                  <div class="level5"><!-- 3 to 5 --></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="level5" id="scale0-40-scaleup">
      <div class="small">
        <div class="level-3"><!-- 5 to -3 --></div>
        <div class="level-1"><!-- 5 to -1 --></div>
        <div class="level0"><!-- 5 to 0 --></div>
        <div class="level1"><!-- 5 to 1 --></div>
        <div class="level2"><!-- 5 to 2 --></div>
        <div class="level3"><!-- 5 to 3 -->
          <div class="level-3"><!-- 3 to -3 --></div>
          <div class="level-1"><!-- 3 to -1 --></div>
          <div class="level0"><!-- 3 to 0 --></div>
          <div class="level1"><!-- 3 to 1 --></div>
          <div class="level2"><!-- 3 to 2 -->
            <div class="level-3"><!-- 2 to -3 --></div>
            <div class="level-1"><!-- 2 to -1 --></div>
            <div class="level0"><!-- 2 to 0 --></div>
            <div class="level1"><!-- 2 to 1 -->
              <div class="level-3"><!-- 1 to -3 --></div>
              <div class="level-1"><!-- 1 to -1 --></div>
              <div class="level0"><!-- 1 to 0 -->
                <div class="level-3"><!-- 0 to -3 --></div>
                <div class="level-1"><!-- 0 to -1 -->
                  <div class="level-3"><!-- -1 to -3 --></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="level-3" id="scale80-0-scaledown">
      <div class="big">
        <div class="level5"><!-- -3 to 5 --></div>
        <div class="level3"><!-- -3 to 3 --></div>
        <div class="level2"><!-- -3 to 2 --></div>
        <div class="level1"><!-- -3 to 1 --></div>
        <div class="level0"><!-- -3 to 0 --></div>
        <div class="level-1"><!-- -3 to -1 -->
          <div class="level5"><!-- -1 to 5 --></div>
          <div class="level3"><!-- -1 to 3 --></div>
          <div class="level2"><!-- -1 to 2 --></div>
          <div class="level1"><!-- -1 to 1 --></div>
          <div class="level0"><!-- -1 to 0 -->
            <div class="level5"><!-- 0 to 5 --></div>
            <div class="level3"><!-- 0 to 3 --></div>
            <div class="level2"><!-- 0 to 2 --></div>
            <div class="level1"><!-- 0 to 1 -->
              <div class="level5"><!-- 1 to 5 --></div>
              <div class="level3"><!-- 1 to 3 --></div>
              <div class="level2"><!-- 1 to 2 -->
                <div class="level5"><!-- 2 to 5 --></div>
                <div class="level3"><!-- 2 to 3 -->
                  <div class="level5"><!-- 3 to 5 --></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="level5" id="scale80-0-scaleup">
      <div class="small">
        <div class="level-3"><!-- 5 to -3 --></div>
        <div class="level-1"><!-- 5 to -1 --></div>
        <div class="level0"><!-- 5 to 0 --></div>
        <div class="level1"><!-- 5 to 1 --></div>
        <div class="level2"><!-- 5 to 2 --></div>
        <div class="level3"><!-- 5 to 3 -->
          <div class="level-3"><!-- 3 to -3 --></div>
          <div class="level-1"><!-- 3 to -1 --></div>
          <div class="level0"><!-- 3 to 0 --></div>
          <div class="level1"><!-- 3 to 1 --></div>
          <div class="level2"><!-- 3 to 2 -->
            <div class="level-3"><!-- 2 to -3 --></div>
            <div class="level-1"><!-- 2 to -1 --></div>
            <div class="level0"><!-- 2 to 0 --></div>
            <div class="level1"><!-- 2 to 1 -->
              <div class="level-3"><!-- 1 to -3 --></div>
              <div class="level-1"><!-- 1 to -1 --></div>
              <div class="level0"><!-- 1 to 0 -->
                <div class="level-3"><!-- 0 to -3 --></div>
                <div class="level-1"><!-- 0 to -1 -->
                  <div class="level-3"><!-- -1 to -3 --></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="level-3" id="default-scaledown">
      <div class="big">
        <div class="level5"><!-- -3 to 5 --></div>
        <div class="level3"><!-- -3 to 3 --></div>
        <div class="level2"><!-- -3 to 2 --></div>
        <div class="level1"><!-- -3 to 1 --></div>
        <div class="level0"><!-- -3 to 0 --></div>
        <div class="level-1"><!-- -3 to -1 -->
          <div class="level5"><!-- -1 to 5 --></div>
          <div class="level3"><!-- -1 to 3 --></div>
          <div class="level2"><!-- -1 to 2 --></div>
          <div class="level1"><!-- -1 to 1 --></div>
          <div class="level0"><!-- -1 to 0 -->
            <div class="level5"><!-- 0 to 5 --></div>
            <div class="level3"><!-- 0 to 3 --></div>
            <div class="level2"><!-- 0 to 2 --></div>
            <div class="level1"><!-- 0 to 1 -->
              <div class="level5"><!-- 1 to 5 --></div>
              <div class="level3"><!-- 1 to 3 --></div>
              <div class="level2"><!-- 1 to 2 -->
                <div class="level5"><!-- 2 to 5 --></div>
                <div class="level3"><!-- 2 to 3 -->
                  <div class="level5"><!-- 3 to 5 --></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="level5" id="default-scaleup">
      <div class="small">
        <div class="level-3"><!-- 5 to -3 --></div>
        <div class="level-1"><!-- 5 to -1 --></div>
        <div class="level0"><!-- 5 to 0 --></div>
        <div class="level1"><!-- 5 to 1 --></div>
        <div class="level2"><!-- 5 to 2 --></div>
        <div class="level3"><!-- 5 to 3 -->
          <div class="level-3"><!-- 3 to -3 --></div>
          <div class="level-1"><!-- 3 to -1 --></div>
          <div class="level0"><!-- 3 to 0 --></div>
          <div class="level1"><!-- 3 to 1 --></div>
          <div class="level2"><!-- 3 to 2 -->
            <div class="level-3"><!-- 2 to -3 --></div>
            <div class="level-1"><!-- 2 to -1 --></div>
            <div class="level0"><!-- 2 to 0 --></div>
            <div class="level1"><!-- 2 to 1 -->
              <div class="level-3"><!-- 1 to -3 --></div>
              <div class="level-1"><!-- 1 to -1 --></div>
              <div class="level0"><!-- 1 to 0 -->
                <div class="level-3"><!-- 0 to -3 --></div>
                <div class="level-1"><!-- 0 to -1 -->
                  <div class="level-3"><!-- -1 to -3 --></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>
