author | Frédéric Wang <fwang@igalia.com> |
Mon, 22 Jun 2020 10:39:44 +0000 | |
changeset 536810 | 4cefe230e6ad102972839e3b3258989182aaeec8 |
parent 536809 | df7eebd9c55514db8655ec1535c0828f77174c98 |
child 536811 | 80fc16b1b57ff94527c3aaef1b76c06c2ec105f7 |
push id | 119680 |
push user | wptsync@mozilla.com |
push date | Tue, 23 Jun 2020 11:08:22 +0000 |
treeherder | autoland@7ca3d4bada73 [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | testonly |
bugs | 1645808, 24150 |
milestone | 79.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
|
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>