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
mozilla · Feb 1, 2024 · a1f90b2 · a1f90b2
1 parent 2073f9c
commit a1f90b2
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 77 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/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/layout/reftests/mathml/dir-5.html → ...rkup/direction/direction-overall-003.html b/layout/reftests/mathml/dir-5.html → ...rkup/direction/direction-overall-003.html
@@ -1,6 +1,24 @@
 <!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 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
@@ -15,16 +33,16 @@
     <!-- 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: 40px; height: 200px;
+      <div style="position: absolute; width: 70px; height: 200px;
                   left: 0px; background: red;"></div>
-      <div style="position: absolute; width: 40px; height: 200px;
-                  left: 40px; background: green;"></div>
-      <div style="position: absolute; width: 40px; height: 200px;
-                  left: 80px; background: magenta;"></div>
-      <div style="position: absolute; width: 40px; height: 200px;
-                  left: 120px; background: blue;"></div>
-      <div style="position: absolute; width: 40px; height: 200px;
-                  left: 160px; background: yellow;"></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
@@ -61,15 +79,15 @@
       <div style="position: absolute; width: 10px; height: 200px;
                   left: -5px; background: black;"></div>
       <div style="position: absolute; width: 10px; height: 200px;
-                  left: 35px; background: black;"></div>
+                  left: 65px; background: black;"></div>
       <div style="position: absolute; width: 10px; height: 200px;
-                  left: 75px; background: black;"></div>
+                  left: 135px; background: black;"></div>
       <div style="position: absolute; width: 10px; height: 200px;
-                  left: 115px; background: black;"></div>
+                  left: 205px; background: black;"></div>
       <div style="position: absolute; width: 10px; height: 200px;
-                  left: 155px; background: black;"></div>
+                  left: 275px; background: black;"></div>
       <div style="position: absolute; width: 10px; height: 200px;
-                  left: 195px; background: black;"></div>
+                  left: 345px; background: black;"></div>
     </div>
 
   </body>