<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mpadded</title>
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#adjust-space-around-content-mpadded">
<meta name="assert" content="Verify metrics of mpadded element with voffset and lspace">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
  setup({ explicit_done: true });
  window.addEventListener("load", runTests);

  function runTests() {
      const contentWidth = 10;
      const contentDepth = 15;
      const contentHeight = 20;
      const epsilon = 1;

      test(function() {
          Array.from(document.getElementsByClassName("shrink-wrap")).forEach(container => {
              assert_approx_equals(container.getBoundingClientRect().width, contentWidth, epsilon);
          });
      }, "lspace/voffset shifts don't affect mpadded preferred width");

      function GetShifts(mpadded) {
          let mpadded_box = mpadded.getBoundingClientRect();
          let mspace_box = mpadded.firstElementChild.getBoundingClientRect();
          return { lspace: mspace_box.left - mpadded_box.left,
                   voffset: mpadded_box.top - mspace_box.top };
      }

      let mpaddeds = document.getElementById("static_tests").getElementsByTagName("mpadded");
      test(function() {
          let baseline = document.getElementById("baseline").getBoundingClientRect().bottom;
          Array.from(mpaddeds).forEach(e => {
              let mpadded = e.getBoundingClientRect();
              assert_approx_equals(mpadded.width, contentWidth, epsilon);
              assert_approx_equals(baseline - mpadded.top, contentHeight, epsilon);
              assert_approx_equals(mpadded.bottom - baseline, contentDepth, epsilon);

          });
      }, "lspace/voffset shifts don't affect mpadded size");


      test(function() {
          let shifts = GetShifts(mpaddeds[0]);
          assert_approx_equals(shifts.lspace, 5, epsilon, "positive lspace");
          assert_approx_equals(shifts.voffset, 0, epsilon);

          shifts = GetShifts(mpaddeds[1]);
          assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace is clmaped to zero");
          assert_approx_equals(shifts.voffset, 0, epsilon);

          shifts = GetShifts(mpaddeds[2]);
          assert_approx_equals(shifts.lspace, 0, epsilon, "positive lspace percentage");
          assert_approx_equals(shifts.voffset, 0, epsilon);

          shifts = GetShifts(mpaddeds[3]);
          assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace percentage");
          assert_approx_equals(shifts.voffset, 0, epsilon);

          shifts = GetShifts(mpaddeds[4]);
          assert_approx_equals(shifts.lspace, 0, epsilon);
          assert_approx_equals(shifts.voffset, 10, epsilon, "positive voffset");

          shifts = GetShifts(mpaddeds[5]);
          assert_approx_equals(shifts.lspace, 0, epsilon);
          assert_approx_equals(shifts.voffset, -10, epsilon, "negative voffset");

          shifts = GetShifts(mpaddeds[6]);
          assert_approx_equals(shifts.lspace, 0, epsilon);
          assert_approx_equals(shifts.voffset, 0, epsilon, "positive voffset percentage");

          shifts = GetShifts(mpaddeds[7]);
          assert_approx_equals(shifts.lspace, 0, epsilon);
          assert_approx_equals(shifts.voffset, 0, epsilon, "negative voffset percentage");

          shifts = GetShifts(mpaddeds[8]);
          assert_approx_equals(shifts.lspace, 5, epsilon);
          assert_approx_equals(shifts.voffset, 10, epsilon);

          shifts = GetShifts(mpaddeds[9]);
          assert_approx_equals(shifts.lspace, 5, epsilon);
          assert_approx_equals(shifts.voffset, -10, epsilon);
      }, "content is shifted by the specified lspace/voffset");

      mpaddeds = document.getElementById("static_tests_rtl").getElementsByTagName("mpadded");
      test(function() {
          let shifts = GetShifts(mpaddeds[0]);
          assert_approx_equals(shifts.lspace, -5, epsilon, "positive lspace");
          assert_approx_equals(shifts.voffset, 0, epsilon);

          shifts = GetShifts(mpaddeds[1]);
          assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace is clmaped to zero");
          assert_approx_equals(shifts.voffset, 0, epsilon);

          shifts = GetShifts(mpaddeds[2]);
          assert_approx_equals(shifts.lspace, 0, epsilon);
          assert_approx_equals(shifts.voffset, 10, epsilon, "positive voffset");

          shifts = GetShifts(mpaddeds[3]);
          assert_approx_equals(shifts.lspace, 0, epsilon);
          assert_approx_equals(shifts.voffset, -10, epsilon, "negative voffset");

          shifts = GetShifts(mpaddeds[4]);
          assert_approx_equals(shifts.lspace, -5, epsilon);
          assert_approx_equals(shifts.voffset, 10, epsilon);

          shifts = GetShifts(mpaddeds[5]);
          assert_approx_equals(shifts.lspace, -5, epsilon);
          assert_approx_equals(shifts.voffset, -10, epsilon);
      }, "content is shifted by the specified lspace/voffset (RTL)");

      mpaddeds = document.getElementById("dynamic_tests").getElementsByTagName("mpadded");
      test(function() {
          mpaddeds[0].setAttribute("lspace", "5px")
          let shifts = GetShifts(mpaddeds[0]);
          assert_approx_equals(shifts.lspace, 5, epsilon, "attach lspace");
          assert_approx_equals(shifts.voffset, 0, epsilon);

          mpaddeds[1].setAttribute("voffset", "10px")
          shifts = GetShifts(mpaddeds[1]);
          assert_approx_equals(shifts.lspace, 0, epsilon);
          assert_approx_equals(shifts.voffset, 10, epsilon, "attach voffset");

          mpaddeds[2].removeAttribute("lspace")
          shifts = GetShifts(mpaddeds[2]);
          assert_approx_equals(shifts.lspace, 0, epsilon, "remove lspace");
          assert_approx_equals(shifts.voffset, 10, epsilon);

          mpaddeds[3].removeAttribute("voffset")
          shifts = GetShifts(mpaddeds[3]);
          assert_approx_equals(shifts.lspace, 5, epsilon);
          assert_approx_equals(shifts.voffset, 0, epsilon, "remove voffset");

          mpaddeds[4].setAttribute("lspace", "15px")
          shifts = GetShifts(mpaddeds[4]);
          assert_approx_equals(shifts.lspace, 15, epsilon, "modify lspace");
          assert_approx_equals(shifts.voffset, 10, epsilon);

          mpaddeds[5].setAttribute("voffset", "-10px")
          shifts = GetShifts(mpaddeds[5]);
          assert_approx_equals(shifts.lspace, 5, epsilon);
          assert_approx_equals(shifts.voffset, -10, epsilon, "modify voffset");
      }, "dynamic changes of lspace/voffset");

    done();
  }
</script>
<style>
div.shrink-wrap {
  background: yellow;
  display: inline-block;
  margin-top: 5px;
  padding-top: 5px;
}
</style>
</head>
<body>
  <div id="log"></div>
  <div id="static_tests">
    <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
    <math>
      <mpadded lspace="5px"  style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="5%"  style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="-5%"  style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded voffset="10%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded voffset="-10%" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
    </math>
  </div>
  <div id="static_tests_rtl">
    <math dir="rtl">
      <mpadded lspace="5px"  style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
    </math>
  </div>
  <div id="dynamic_tests">
    <math>
      <mpadded style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
    </math>
  </div>
  <div>
    <div class="shrink-wrap">
      <math>
        <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      </math>
    </div>
    <div class="shrink-wrap">
      <math>
        <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      </math>
    </div>
    <div class="shrink-wrap">
      <math>
        <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      </math>
    </div>
    <div class="shrink-wrap">
      <math>
        <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      </math>
    </div>
    <div class="shrink-wrap">
      <math>
        <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      </math>
    </div>
    <div class="shrink-wrap">
      <math>
        <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
      </math>
    </div>
  </div>
</body>
</html>