Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/mathml/presentation-markup/mpadded
parent: Initial commit. (diff)
download: firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
4 files changed, 642 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html
new file mode 100644
index 0000000000..6eebac1df9
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/legacy-orthogonal-pseudo-units.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Legacy mpadded pseudo-units relying on orthogonal metrics</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mpadded">
+<meta name="assert" content="Legacy pseudo-units depending on orthogonal metrics">
+<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>
+<style>
+  .testedElement {
+      background: red;
+  }
+</style>
+</head>
+<body>
+  <div id="log"></div>
+
+  <p>
+    <math>
+      <mpadded id="reference">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+
+  <p>
+    <!-- width cannot use vertical pseudo-units -->
+    <math>
+      <mpadded class="testedElement" width="200%height">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+    <math>
+      <mpadded class="testedElement" width="200%depth">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+
+  <p>
+    <!-- lspace cannot use vertical pseudo-units -->
+    <math>
+      <mpadded class="testedElement" lspace="200%height">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+    <math>
+      <mpadded class="testedElement" lspace="200%depth">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+  <p>
+    <!-- height cannot use horizontal pseudo-units -->
+    <math>
+      <mpadded class="testedElement" height="200%width">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+  <p>
+    <!-- depth cannot use horizontal pseudo-units -->
+    <math>
+      <mpadded class="testedElement" depth="200%width">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+  <p>
+    <!-- voffset cannot use horizontal pseudo-units -->
+    <math>
+      <mpadded class="testedElement" voffset="200%width">
+        <mspace width="10px" height="20px" depth="30px"
+                style="background: blue"/>
+      </mpadded>
+    </math>
+  </p>
+<script type="text/javascript">
+  Array.from(document.getElementsByClassName("testedElement")).forEach(mpadded => {
+      var reference = document.getElementById("reference");
+      const name = ["width", "depth", "height", "lspace", "voffset"].find(attr => mpadded.hasAttribute(attr));
+      const epsilon = 1;
+      test(function() {
+          assert_true(MathMLFeatureDetection.has_mspace());
+          compareLayout(mpadded, reference, epsilon);
+      }, `${mpadded.getAttribute(name)} is not allowed on ${name}`);
+  });
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-001.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-001.html
new file mode 100644
index 0000000000..e61dc5af72
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-001.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mpadded</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<meta name="assert" content="Verify metrics of empty mpadded element for different values of height, depth and width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  var epsilon = 1;
+  function getBox(aId) {
+    return document.getElementById(aId).getBoundingClientRect();
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+    test(function() {
+      var none = getBox("none");
+      assert_equals(none.width, 0, "zero width");
+      assert_approx_equals(getBox("baseline").bottom - none.top, 0, epsilon, "zero depth");
+      assert_approx_equals(none.bottom - getBox("baseline").bottom, 0, epsilon, "zero depth");
+    }, "mpadded (no attributes)");
+
+    test(function() {
+      for (var i = 0; i <= 2; i++) {
+        var mpadded = getBox("width" + i);
+        assert_approx_equals(mpadded.width, 25*(i+1), epsilon, "width " + i);
+        assert_approx_equals(getBox("baseline").bottom - mpadded.top, 0, epsilon, "height" + i);
+        assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i);
+      }
+    }, "Different widths");
+
+    test(function() {
+      for (var i = 0; i <= 2; i++) {
+        var mpadded = getBox("height" + i);
+        assert_equals(mpadded.width, 0, "width" + i);
+        assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(i+1), epsilon, "height" + i);
+        assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i);
+      }
+    }, "Different heights");
+
+    test(function() {
+      for (var i = 0; i <= 2; i++) {
+        var mpadded = getBox("depth" + i);
+        assert_equals(mpadded.width, 0, "width" + i);
+        assert_approx_equals(getBox("baseline").bottom - mpadded.top, 0, epsilon, "height" + i);
+        assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i);
+      }
+    }, "Different depths");
+
+    test(function() {
+      for (var i = 0; i <= 2; i++) {
+        var mpadded = getBox("mpadded" + i);
+        assert_approx_equals(mpadded.width, 25*(1+i%3), epsilon, "width" + i);
+        assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(1+(i+1)%3), epsilon, "height" + i);
+        assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i);
+      }
+    }, "Various combinations of height, depth and width.");
+
+    test(function() {
+      var container = document.getElementById("containerForPreferredWidth");
+      var mpadded = container.getElementsByTagName("mpadded")[0];
+      var containerWidth = container.getBoundingClientRect().width;
+      var mpaddedWidth = mpadded.getBoundingClientRect().width;
+      assert_approx_equals(containerWidth, mpaddedWidth, epsilon);
+    }, "Preferred width");
+
+    // Dynamically set attributes.
+    ["width", "height", "depth"].forEach(function (name, index) {
+        document.getElementById("dynamic-remove").removeAttribute(name);
+        let length = `${50 + index * 10}px`;
+        document.getElementById("dynamic-attach").setAttribute(name, length);
+        document.getElementById("dynamic-modify").setAttribute(name, length);
+    });
+    let baseline = getBox("baseline2").bottom;
+
+    test(function() {
+        let remove = getBox("dynamic-remove");
+        assert_approx_equals(remove.width, 0, epsilon);
+        assert_approx_equals(remove.height, 0, epsilon);
+        assert_approx_equals(remove.top, baseline, epsilon);
+    }, "dynamic attributes (remove)");
+
+    test(function() {
+        let attach = getBox("dynamic-attach");
+        assert_approx_equals(attach.width, 50, epsilon);
+        assert_approx_equals(attach.height, 60 + 70, epsilon);
+        assert_approx_equals(baseline - attach.top, 60, epsilon);
+    }, "dynamic attributes (attach)");
+
+    test(function() {
+        let modify = getBox("dynamic-modify");
+        assert_approx_equals(modify.width, 50, epsilon);
+        assert_approx_equals(modify.height, 60 + 70, epsilon);
+        assert_approx_equals(baseline - modify.top, 60, epsilon);
+    }, "dynamic attributes (modify)");
+
+    done();
+  }
+</script>
+<style>
+div.shrink-wrap {
+  background: yellow;
+  display: inline-block;
+  margin-top: 5px;
+  padding-top: 5px;
+}
+</style>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+    <math>
+      <mpadded id="none"/>
+      <mpadded id="width0" width="25px"/>
+      <mpadded id="width1" width="50px"/>
+      <mpadded id="width2" width="75px"/>
+      <mpadded id="height0" height="25px"/>
+      <mpadded id="height1" height="50px"/>
+      <mpadded id="height2" height="75px"/>
+      <mpadded id="depth0" depth="25px"/>
+      <mpadded id="depth1" depth="50px"/>
+      <mpadded id="depth2" depth="75px"/>
+      <mpadded id="mpadded0" width="25px" height="50px" depth="75px" style="background: green"/>
+      <mpadded id="mpadded1" width="50px" height="75px" depth="25px" style="background: blue"/>
+      <mpadded id="mpadded2" width="75px" height="25px" depth="50px" style="background: green"/>
+    </math>
+  </p>
+  <div>
+    <div id="containerForPreferredWidth" class="shrink-wrap">
+      <math><mpadded width="75px" height="25px" depth="50px" style="background: green"/></math>
+    </div>
+  </div>
+  <p>
+    <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+    <math>
+      <mpadded id="dynamic-attach" style="background: lightgreen"/>
+      <mpadded id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"/>
+      <mpadded id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"/>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-002.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-002.html
new file mode 100644
index 0000000000..93f2d594c7
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-002.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mpadded</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<meta name="assert" content="Verify metrics of nonempty mpadded element for different values of height, depth and width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  var epsilon = 1;
+  function getBox(aId) {
+    return document.getElementById(aId).getBoundingClientRect();
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", runTests);
+
+  function runTests() {
+      const contentWidth = 100;
+      const contentDepth = 125;
+      const contentHeight = 150;
+
+    test(function() {
+      var none = getBox("none");
+      assert_equals(none.width, contentWidth, "content width");
+      assert_approx_equals(getBox("baseline").bottom - none.top, contentHeight, epsilon, "content height");
+      assert_approx_equals(none.bottom - getBox("baseline").bottom, contentDepth, epsilon, "content height");
+    }, "mpadded with no attributes");
+
+    test(function() {
+      for (var i = 0; i <= 2; i++) {
+        var mpadded = getBox("width" + i);
+        assert_approx_equals(mpadded.width, 25*(i+1), epsilon, "width " + i);
+        assert_approx_equals(getBox("baseline").bottom - mpadded.top, contentHeight, epsilon, "height" + i);
+        assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth" + i);
+      }
+    }, "Different widths");
+
+    test(function() {
+      for (var i = 0; i <= 2; i++) {
+        var mpadded = getBox("height" + i);
+        assert_equals(mpadded.width, contentWidth, "width" + i);
+        assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(i+1), epsilon, "height" + i);
+        assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth" + i);
+      }
+    }, "Different heights");
+
+    test(function() {
+      var mpadded = getBox("percentages");
+      assert_equals(mpadded.width, contentWidth, "width");
+      assert_approx_equals(getBox("baseline").bottom - mpadded.top, contentHeight, epsilon, "height");
+      assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth");
+    }, "Percentage calculation for width, height and depth");
+
+    test(function() {
+      for (var i = 0; i <= 2; i++) {
+        var mpadded = getBox("depth" + i);
+        assert_equals(mpadded.width, contentWidth, "width" + i);
+        assert_approx_equals(getBox("baseline2").bottom - mpadded.top, contentHeight, epsilon, "height" + i);
+        assert_approx_equals(mpadded.bottom - getBox("baseline2").bottom, 25*(i+1), epsilon, "depth" + i);
+      }
+    }, "Different depths");
+
+    test(function() {
+      for (var i = 0; i <= 2; i++) {
+        var mpadded = getBox("mpadded" + i);
+        assert_approx_equals(mpadded.width, 25*(1+i%3), epsilon, "width" + i);
+        assert_approx_equals(getBox("baseline2").bottom - mpadded.top, 25*(1+(i+1)%3), epsilon, "height" + i);
+        assert_approx_equals(mpadded.bottom - getBox("baseline2").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i);
+      }
+    }, "Various combinations of height, depth and width.");
+
+    test(function() {
+      var container = document.getElementById("containerForPreferredWidth");
+      var mpadded = container.getElementsByTagName("mpadded")[0];
+      var containerWidth = container.getBoundingClientRect().width;
+      var mpaddedWidth = mpadded.getBoundingClientRect().width;
+      assert_approx_equals(containerWidth, mpaddedWidth, epsilon);
+    }, "Preferred width");
+
+    // Dynamically set attributes.
+    ["width", "height", "depth"].forEach(function (name, index) {
+        document.getElementById("dynamic-remove").removeAttribute(name);
+        let length = `${50 + index * 10}px`;
+        document.getElementById("dynamic-attach").setAttribute(name, length);
+        document.getElementById("dynamic-modify").setAttribute(name, length);
+    });
+    let baseline = getBox("baseline3").bottom;
+
+    test(function() {
+        let remove = getBox("dynamic-remove");
+        assert_approx_equals(remove.width, contentWidth, epsilon);
+        assert_approx_equals(remove.height, contentHeight + contentDepth, epsilon);
+        assert_approx_equals(baseline - remove.top, contentHeight, epsilon);
+    }, "dynamic attributes (remove)");
+
+    test(function() {
+        let attach = getBox("dynamic-attach");
+        assert_approx_equals(attach.width, 50, epsilon);
+        assert_approx_equals(attach.height, 60 + 70, epsilon);
+        assert_approx_equals(baseline - attach.top, 60, epsilon);
+    }, "dynamic attributes (attach)");
+
+    test(function() {
+        let modify = getBox("dynamic-modify");
+        assert_approx_equals(modify.width, 50, epsilon);
+        assert_approx_equals(modify.height, 60 + 70, epsilon);
+        assert_approx_equals(baseline - modify.top, 60, epsilon);
+    }, "dynamic attributes (modify)");
+
+    done();
+  }
+</script>
+<style>
+div.shrink-wrap {
+  background: yellow;
+  display: inline-block;
+  margin-top: 5px;
+  padding-top: 5px;
+}
+</style>
+</head>
+<body>
+  <div id="log"></div>
+  <p>
+    <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+    <math>
+      <mpadded id="none"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="width0" width="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="width1" width="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="width2" width="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="height0" height="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="height1" height="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="height2" height="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="percentages" width="50%" height="33%" depth="10%"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+    </math>
+  </p>
+  <p>
+    <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+    <math>
+      <mpadded id="depth0" depth="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="depth1" depth="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="depth2" depth="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="mpadded0" width="25px" height="50px" depth="75px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="mpadded1" width="50px" height="75px" depth="25px" style="background: blue"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="mpadded2" width="75px" height="25px" depth="50px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+    </math>
+  </p>
+  <div>
+    <div id="containerForPreferredWidth" class="shrink-wrap">
+      <math><mpadded width="75px" height="25px" depth="50px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded></math>
+    </div>
+  </div>
+  <p>
+    <span id="baseline3" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+    <math>
+      <mpadded id="dynamic-attach" style="background: lightgreen"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+      <mpadded id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+    </math>
+  </p>
+</body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-003.html b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-003.html
new file mode 100644
index 0000000000..e0c24307f4
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/mpadded/mpadded-003.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mpadded</title>
+<link rel="help" href="https://w3c.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>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/mathml/presentation-markup/mpadded
parent	Initial commit. (diff)
download	firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip