Bug 1876684 - Export MathML dir-* tests to WPT. r=emilio

- dir-3.html/dir-5.html: These are approximative verifications of overall RTL directionality using "covering rectangles". Export them with a a specific font in order to make them a bit more robust. For dir-5.html we use scripts-spaceafterscript3000.woff and adjust the rects accordingly but the test might change later depending on the outcome of w3c/mathml-core#217. - dir-4-ref.html: Removed (the test was removed in bug 1783995). Differential Revision: https://phabricator.services.mozilla.com/D199702 UltraBlame original commit: eb00222e557742d5a6c66534f38345ddf71deaa5
marco-c · Feb 8, 2024 · 2d61e7f · 2d61e7f
1 parent 6094748
commit 2d61e7f
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 138 deletions.
diff --git a/layout/reftests/mathml/dir-4-ref.html b/layout/reftests/mathml/dir-4-ref.html
diff --git a/layout/reftests/mathml/dir-5-ref.html b/layout/reftests/mathml/dir-5-ref.html
diff --git a/layout/reftests/mathml/dir-5.html b/layout/reftests/mathml/dir-5.html
diff --git a/layout/reftests/mathml/reftest.list b/layout/reftests/mathml/reftest.list
@@ -1,5 +1,3 @@
-random-if(gtkWidget) == dir-3.html dir-3-ref.html # bug 1309426
-== dir-5.html dir-5-ref.html
 random-if(smallScreen&&Android) fuzzy(0-255,0-200) fuzzy-if(geckoview,201-216,200-250) fuzzy-if(winWidget,114-255,245-361) fuzzy-if(OSX,79-153,240-250) == mirror-op-1.html mirror-op-1-ref.html
 != mirror-op-2.html mirror-op-2-ref.html
 != mirror-op-3.html mirror-op-3-ref.html

diff --git a/layout/reftests/mathml/dir-3-ref.html → .../direction/direction-overall-002-ref.html b/layout/reftests/mathml/dir-3-ref.html → .../direction/direction-overall-002-ref.html
@@ -3,8 +3,8 @@
   <head><title>Test dir=rtl</title></head>
   <body style="background: white;">
 
-    <div style="position: absolute; top: 5px; left: 5px;">
-      <div style="width: 30px; height: 500px; background: black;"></div>
+    <div style="position: absolute; top: 0px; left: 0px;">
+      <div style="width: 40px; height: 3000px; background: black;"></div>
     </div>
 
   </body>

diff --git a/layout/reftests/mathml/dir-3.html → ...rkup/direction/direction-overall-002.html b/layout/reftests/mathml/dir-3.html → ...rkup/direction/direction-overall-002.html
@@ -1,6 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <head><title>Test dir=rtl</title></head>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Verify dir attribute on various containers</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <meta name="assert" content="Verify dir attribute on various elements.">
+    <link rel="match" href="direction-overall-002-ref.html">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      math {
+          font: 25px/1 Ahem;
+      }
+    </style>
+  </head>
+
+  </head>
   <body style="background: white;">
 
     <!-- The visible part of the formulas below should be covered by the
@@ -97,8 +112,8 @@
       </math>
     </div>
 
-    <div style="position: absolute; top: 5px; left: 5px;">
-      <div style="width: 30px; height: 500px; background: black;"></div>
+    <div style="position: absolute; top: 0px; left: 0px;">
+      <div style="width: 40px; height: 3000px; background: black"></div>
     </div>
 
   </body>

diff --git a/...ng/web-platform/tests/mathml/presentation-markup/direction/direction-overall-003-ref.html b/...ng/web-platform/tests/mathml/presentation-markup/direction/direction-overall-003-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head><title>Test dir=rtl</title></head>
+  <body>
+
+    <div style="position: absolute;
+                top: 5px; left: 5px; width: 200px; height: 200px;">
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 0px; background: red;"></div>
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 70px; background: green;"></div>
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 140px; background: magenta;"></div>
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 210px; background: blue;"></div>
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 280px; background: yellow;"></div>-->
+    </div>
+
+
+    <div style="position: absolute;
+                top: 5px; left: 5px; width: 200px; height: 200px;">
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: -5px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 65px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 135px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 205px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 275px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 345px; background: black;"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-003.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-003.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Verify dir attribute on various containers</title>
+    <link rel="help" href="https://w3c.github.io/mathml-core/#attributes-common-to-html-and-mathml-elements">
+    <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+    <meta name="assert" content="Verify dir attribute on various mmultiscripts.">
+    <link rel="match" href="direction-overall-003-ref.html">
+    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+    <style>
+      math {
+          /* Ensure the space after script is 30px */
+          font: 10px spaceafterscript3000;
+      }
+      @font-face {
+          font-family: spaceafterscript3000;
+          src: url("/fonts/math/scripts-spaceafterscript3000.woff");
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- mmultiscripts. The formulas
+
+         1 3                 3 1
+          X  in dir=ltr  and  X  in dir=rtl
+         2 4                 4 2
+
+         do not match perfectly, so we use an alternative == reftest here
+         which is less strict. -->
+
+    <!-- five vertical bands: red, green, magenta, blue and yellow -->
+    <div style="position: absolute;
+                top: 5px; left: 5px; width: 200px; height: 200px;">
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 0px; background: red;"></div>
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 70px; background: green;"></div>
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 140px; background: magenta;"></div>
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 210px; background: blue;"></div>
+      <div style="position: absolute; width: 70px; height: 200px;
+                  left: 280px; background: yellow;"></div>-->
+    </div>
+
+    <!-- a mmultiscripts element whose children are squares of different
+         colors. In dir=rtl, the color of each square should match the one of
+         the band over which the square is positioned. Hence, this
+         mmultiscripts should not be visible. -->
+    <div style="position: absolute;
+                top: 5px; left: 5px; width: 200px; height: 200px;">
+      <math dir="rtl">
+        <mmultiscripts>
+          <mspace width="40px" height="40px" mathbackground="magenta"/>
+
+          <mspace width="40px" height="40px" mathbackground="green"/>
+          <mspace width="40px" height="40px" mathbackground="green"/>
+
+          <mspace width="40px" height="40px" mathbackground="red"/>
+          <mspace width="40px" height="40px" mathbackground="red"/>
+
+           <mprescripts/>
+
+          <mspace width="40px" height="40px" mathbackground="yellow"/>
+          <mspace width="40px" height="40px" mathbackground="yellow"/>
+
+          <mspace width="40px" height="40px" mathbackground="blue"/>
+          <mspace width="40px" height="40px" mathbackground="blue"/>
+        </mmultiscripts>
+      </math>
+    </div>
+
+    <!-- We add black vertical bands to cover spaces between the children of
+         mmultiscripts. -->
+    <div style="position: absolute;
+                top: 5px; left: 5px; width: 200px; height: 200px;">
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: -5px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 65px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 135px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 205px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 275px; background: black;"></div>
+      <div style="position: absolute; width: 10px; height: 200px;
+                  left: 345px; background: black;"></div>
+    </div>
+
+  </body>
+</html>