Bug 1645975 [wpt PR 24162] - Add test to check painting order of mrow-like elements., a=testonly
authorFrédéric Wang <fwang@igalia.com>
Mon, 22 Jun 2020 10:40:35 +0000
changeset 536803 6a3c2b9426284e3d01e8f37ac68785d731c68765
parent 536802 58822468074d856b11b59665e2f0a4214267c2f6
child 536804 c372cadf5bd5a89b42154c2a3a7eda5889d687d7
push id37533
push userdluca@mozilla.com
push dateTue, 23 Jun 2020 21:38:40 +0000
treeherdermozilla-central@d48aa0f0aa0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1645975, 24162
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 1645975 [wpt PR 24162] - Add test to check painting order of mrow-like elements., a=testonly Automatic update from web-platform-tests Add test to check painting order of mrow-like elements. (#24162) https://github.com/mathml-refresh/mathml/issues/52 -- wpt-commits: 307056c29ae77cbd65e4b994fc0383d8cd9b9ed3 wpt-pr: 24162
testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order-ref.html
testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order-ref.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>mrow painting order (reference)</title>
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      .container {
+          position: absolute;
+          left: 2em;
+          top: 10em;
+      }
+      math {
+          font: 50px/1 Ahem;
+      }
+      .hidden {
+          visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if there is no red and content is stacked such that</p>
+    <ul>
+      <li>foreground (dark colors) is above background (light colors)</li>
+      <li>yellow foreground is above green foreground which is itself above blue foreground</li>
+      <li>yellow background is above green background which is itself above blue background</li>
+    </ul>
+    <!-- Paint lightblue background -->
+    <div class="container">
+      <math>
+        <mrow>
+          <mrow style="background: lightblue"><mn class="hidden">XXÉ</mn></mrow>
+        </mrow>
+      </math>
+    </div>
+    <!-- Paint lightgreen background -->
+    <div class="container">
+      <math>
+        <mrow>
+          <mn class="hidden">XXÉX</mn>
+          <mrow style="background: lightgreen; margin-inline-start: -3em"><mn style="visibility: hidden">p&#xA0;XXÉ</mn></mrow>
+        </mrow>
+      </math>
+    </div>
+    <!-- Paint lightyellow background -->
+    <div class="container">
+      <math>
+        <mrow>
+          <mn class="hidden">XXÉX</mn>
+          <mn class="hidden" style="margin-inline-start: -3em">p&#xA0;XXÉX</mn>
+          <mrow style="background: lightyellow; margin-inline-start: -3em"><mn style="visibility: hidden">p&#xA0;X</mn></mrow>
+        </mrow>
+      </math>
+    </div>
+    <!-- Paint blue foreground -->
+    <div class="container">
+      <math>
+        <mrow>
+          <mn style="color: blue;">XXÉ</mn>
+        </mrow>
+      </math>
+    </div>
+    <!-- Paint green foreground -->
+    <div class="container">
+      <math>
+        <mrow>
+          <mn class="hidden">XXÉX</mn>
+          <mn style="color: green; margin-inline-start: -3em">p&#xA0;XXÉ</mn>
+        </mrow>
+      </math>
+    </div>
+    <!-- Paint yellow foreground -->
+    <div class="container">
+      <math>
+        <mrow>
+          <mn class="hidden">XXÉX</mn>
+          <mn class="hidden" style="margin-inline-start: -3em">p&#xA0;XXÉX</mn>
+          <mn style="color: yellow; margin-inline-start: -3em">p&#xA0;X</mn>
+        </mrow>
+      </math>
+    </div>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/mrow/mrow-painting-order.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>mrow painting order</title>
+    <link rel="help" href="https://www.w3.org/TR/MathML3/chapter3.html#presm.mfenced">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#stacking-contexts">
+    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#horizontally-group-sub-expressions-mrow">
+    <meta name="assert" content="Verify in which order the children paint">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <link rel="match" href="mrow-painting-order-ref.html">
+    <style>
+      .container {
+          position: absolute;
+          left: 2em;
+          top: 10em;
+      }
+      math {
+          font: 50px/1 Ahem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>This test passes if there is no red and content is stacked such that</p>
+    <ul>
+      <li>foreground (dark colors) is above background (light colors)</li>
+      <li>yellow foreground is above green foreground which is itself above blue foreground</li>
+      <li>yellow background is above green background which is itself above blue background</li>
+    </ul>
+    <div class="container">
+      <math>
+        <mrow>
+          <mn style="color: blue; background: lightblue">XXÉ</mn>
+          <mn style="color: red">X</mn>
+          <mn style="color: green; background: lightgreen; margin-inline-start: -3em">p&#xA0;XXÉ</mn>
+          <mn style="color: red">X</mn>
+          <mn style="color: yellow; background: lightyellow; margin-inline-start: -3em">p&#xA0;X</mn>
+        </mrow>
+      </math>
+    </div>
+  </body>
+</html>