Bug 1645808 [wpt PR 24150] - Add MathML test for various paint invalidation of radicals., a=testonly
authorFrédéric Wang <fwang@igalia.com>
Mon, 22 Jun 2020 10:39:44 +0000
changeset 536810 4cefe230e6ad102972839e3b3258989182aaeec8
parent 536809 df7eebd9c55514db8655ec1535c0828f77174c98
child 536811 80fc16b1b57ff94527c3aaef1b76c06c2ec105f7
push id119680
push userwptsync@mozilla.com
push dateTue, 23 Jun 2020 11:08:22 +0000
treeherderautoland@7ca3d4bada73 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1645808, 24150
milestone79.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1645808 [wpt PR 24150] - Add MathML test for various paint invalidation of radicals., a=testonly Automatic update from web-platform-tests Add MathML test for various paint invalidation of radicals. (#24150) -- wpt-commits: 90446389b82ae924cdef637bca2dd99ece41160c wpt-pr: 24150
testing/web-platform/tests/mathml/presentation-markup/radicals/dynamic-radical-paint-invalidation-001-ref.html
testing/web-platform/tests/mathml/presentation-markup/radicals/dynamic-radical-paint-invalidation-001.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/radicals/dynamic-radical-paint-invalidation-001-ref.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Dynamic radical: paint invalidation (expectation)</title>
+<style>
+  @font-face {
+    font-family: RadicalFont;
+    src: url("/fonts/math/radical-displaystyleverticalgap7000-rulethickness1000.woff");
+  }
+  math {
+      font-family: RadicalFont;
+      font-size: 10px;
+  }
+  #container > div {
+      height: 80px;
+      border-top: solid;
+  }
+  .withPaddingBorderAndMargin {
+      padding: 5px;
+      border: 5px solid yellow;
+      margin: 5px;
+  }
+</style>
+</head>
+<body>
+  <div id="container">
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt>
+          <mspace width="60px" height="10px" depth="10px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot>
+          <mspace width="60px" height="10px" depth="10px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt>
+          <mspace width="20px" height="20px" depth="10px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot>
+          <mspace width="20px" height="20px" depth="10px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt>
+          <mspace width="20px" height="10px" depth="40px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot>
+          <mspace width="20px" height="10px" depth="40px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt class="withPaddingBorderAndMargin">
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot class="withPaddingBorderAndMargin">
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/radicals/dynamic-radical-paint-invalidation-001.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Dynamic radical: paint invalidation</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#radicals-msqrt-mroot">
+<meta name="assert" content="">
+<link rel="match" href="dynamic-radical-paint-invalidation-001-ref.html">
+<style>
+  @font-face {
+    font-family: RadicalFont;
+    src: url("/fonts/math/radical-displaystyleverticalgap7000-rulethickness1000.woff");
+  }
+  @font-face {
+    font-family: RadicalFont2;
+    src: url("/fonts/math/radical-kernbeforedegree4000-rulethickness1000.woff");
+  }
+  math {
+      font-family: RadicalFont;
+      font-size: 10px;
+  }
+  #container > div {
+      height: 80px;
+      border-top: solid;
+  }
+  .withPaddingBorderAndMargin {
+      padding: 5px;
+      border: 5px solid yellow;
+      margin: 5px;
+  }
+</style>
+<script>
+  window.addEventListener("load", () => { document.fonts.ready.then(runTests); });
+  function runTests() {
+      // force initial layout so we're sure what we're testing against
+      document.documentElement.getBoundingClientRect();
+
+      var mroot = document.getElementsByTagName("mroot");
+      var msqrt = document.getElementsByTagName("msqrt");
+
+      // Modify base's width.
+      msqrt[0].firstElementChild.setAttribute("width", "60px")
+      mroot[0].firstElementChild.setAttribute("width", "60px")
+
+      // Modify base's ascent.
+      msqrt[1].firstElementChild.setAttribute("height", "20px")
+      mroot[1].firstElementChild.setAttribute("height", "20px")
+
+      // Modify base's descent.
+      msqrt[2].firstElementChild.setAttribute("depth", "40px")
+      mroot[2].firstElementChild.setAttribute("depth", "40px")
+
+      // Modify the radical's font family.
+      msqrt[3].parentNode.removeAttribute("style");
+      mroot[3].parentNode.removeAttribute("style");
+
+      // Modify radical's margin/border/padding
+      msqrt[4].setAttribute("class", "withPaddingBorderAndMargin");
+      mroot[4].setAttribute("class", "withPaddingBorderAndMargin");
+
+      document.documentElement.classList.remove('reftest-wait');
+  };
+</script>
+</head>
+<body>
+  <div id="container">
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math style="font-family: RadicalFont2">
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math style="font-family: RadicalFont2">
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <msqrt>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+        </msqrt>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+    <div>
+      <math>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+        <mroot>
+          <mspace width="20px" height="10px" depth="10px" style="background: blue"/>
+          <mspace width="20px" height="10px" depth="10px" style="background: lightblue"/>
+        </mroot>
+        <mspace width="20px" height="10px" depth="10px" style="background: gray"/>
+      </math>
+    </div>
+  </div>
+  <script src="/mathml/support/feature-detection.js"></script>
+  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+</body>
+</html>