diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/mathml/presentation-markup/direction | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/mathml/presentation-markup/direction')
19 files changed, 901 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-006-ref.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-006-ref.html new file mode 100644 index 0000000000..39e6dabdfb --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-006-ref.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>RTL mtable and mtable with frame</title> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math, math * { + font: 25px Ahem; + } + </style> + </head> + <body> + + <p> + <math> + <mtable> + <mtr> + <mtd> + <mtext>É</mtext> + </mtd> + <mtd> + <mtext>p</mtext> + </mtd> + <mtd> + <mtext>X</mtext> + </mtd> + </mtr> + <mtr> + <mtd> + <mtext>pÉ</mtext> + </mtd> + <mtd> + <mtext>XÉ</mtext> + </mtd> + <mtd> + <mtext>Xp</mtext> + </mtd> + </mtr> + </mtable> + </math> + </p> + + <p> + <math> + <mtable frame="solid"> + <mtr> + <mtd> + <mtext>É</mtext> + </mtd> + <mtd> + <mtext>p</mtext> + </mtd> + <mtd> + <mtext>X</mtext> + </mtd> + </mtr> + <mtr> + <mtd> + <mtext>pÉ</mtext> + </mtd> + <mtd> + <mtext>XÉ</mtext> + </mtd> + <mtd> + <mtext>Xp</mtext> + </mtd> + </mtr> + </mtable> + </math> + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-006.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-006.html new file mode 100644 index 0000000000..76cdc41471 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-006.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>RTL mtable and mtable with frame</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"> + <link rel="help" href="https://w3c.github.io/mathml-core/#tabular-math"> + <meta name="assert" content="Verify RTL math table renders the same as the column mirrored."> + <link rel="match" href="direction-006-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math, math * { + font: 25px Ahem; + } + </style> + </head> + <body> + + <p> + <math dir="rtl"> + <mtable> + <mtr> + <mtd> + <mtext>X</mtext> + </mtd> + <mtd> + <mtext>p</mtext> + </mtd> + <mtd> + <mtext>É</mtext> + </mtd> + </mtr> + <mtr> + <mtd> + <mtext>Xp</mtext> + </mtd> + <mtd> + <mtext>XÉ</mtext> + </mtd> + <mtd> + <mtext>pÉ</mtext> + </mtd> + </mtr> + </mtable> + </math> + </p> + + <p> + <math dir="rtl"> + <mtable frame="solid"> + <mtr> + <mtd> + <mtext>X</mtext> + </mtd> + <mtd> + <mtext>p</mtext> + </mtd> + <mtd> + <mtext>É</mtext> + </mtd> + </mtr> + <mtr> + <mtd> + <mtext>Xp</mtext> + </mtd> + <mtd> + <mtext>XÉ</mtext> + </mtd> + <mtd> + <mtext>pÉ</mtext> + </mtd> + </mtr> + </mtable> + </math> + </p> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_dir");</script> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-007-ref.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-007-ref.html new file mode 100644 index 0000000000..5c77395f20 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-007-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>mo and embellished mrow/munderover (lspace=1em rspace=2em)</title> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math, math * { + font: 25px/1 Ahem; + } + </style> + </head> + <body> + + <p> + <math> + <mtext>p</mtext><mo lspace="2em" rspace="1em">X</mo><mtext>p</mtext> + </math> + </p> + + <p> + <math> + <mtext>p</mtext> + <mrow><mo lspace="2em" rspace="1em">X</mo></mrow> + <mtext>p</mtext> + </math> + </p> + + <p> + <math> + <mtext>p</mtext> + <munderover> + <mo lspace="2em" rspace="1em">X</mo> + <mtext>É</mtext> + <mtext>É</mtext> + </munderover> + <mtext>p</mtext> + </math> + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-007.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-007.html new file mode 100644 index 0000000000..3419467ae2 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-007.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>mo and embellished mrow/munderover (lspace=1em rspace=2em)</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"> + <link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators"> + <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> + <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> + <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> + <meta name="assert" content="Verify that the lspace/rspace on an mo or an embellished mrow/munderover element are switched in RTL mode"> + <link rel="match" href="direction-007-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math, math * { + font: 25px/1 Ahem; + } + </style> + </head> + <body> + + <p> + <math dir="rtl"> + <mtext>p</mtext><mo lspace="1em" rspace="2em">X</mo><mtext>p</mtext> + </math> + </p> + + <p> + <math dir="rtl"> + <mtext>p</mtext> + <mrow><mo lspace="1em" rspace="2em">X</mo></mrow> + <mtext>p</mtext> + </math> + </p> + + <p> + <math dir="rtl"> + <mtext>p</mtext> + <munderover> + <mo lspace="1em" rspace="2em">X</mo> + <mtext>É</mtext> + <mtext>É</mtext> + </munderover> + <mtext>p</mtext> + </math> + </p> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_dir");</script> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-008-ref.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-008-ref.html new file mode 100644 index 0000000000..492fa9539a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-008-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>embellished mfrac (lspace=1em rspace=2em)</title> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math, math * { + font: 25px/1 Ahem; + } + </style> + </head> + <body> + + <p> + <math> + <mtext>p</mtext> + <mfrac> + <mo lspace="2em" rspace="1em">X</mo> + <mtext>É</mtext> + </mfrac> + <mtext>p</mtext> + </math> + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-008.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-008.html new file mode 100644 index 0000000000..0be8137364 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-008.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>embellished mfrac (lspace=1em rspace=2em)</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"> + <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> + <link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators"> + <meta name="assert" content="Verify that the lspace/rspace on an embellished mfrac element are switched in RTL mode"> + <link rel="match" href="direction-008-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math, math * { + font: 25px/1 Ahem; + } + </style> + </head> + <body> + + <p> + <math dir="rtl"> + <mtext>p</mtext> + <mfrac> + <mo lspace="1em" rspace="2em">X</mo> + <mtext>É</mtext> + </mfrac> + <mtext>p</mtext> + </math> + </p> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_dir");</script> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-010-ref.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-010-ref.html new file mode 100644 index 0000000000..4f595ed49f --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-010-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>dir="rtl" VS direction: rtl on math/mrow/mstyle</title> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math { + font: 25px/1 Ahem; + } + </style> + </head> + <body> + + <p> + <math style="direction: rtl"> + <mtext>X</mtext> + <mtext>p</mtext> + <mtext>É</mtext> + </math> + </p> + + <p> + <math> + <mrow style="direction: rtl"> + <mtext>X</mtext> + <mtext>p</mtext> + <mtext>É</mtext> + </mrow> + </math> + </p> + + <p> + <math> + <mstyle mathcolor="blue" style="direction: rtl"> + <mtext>X</mtext> + <mtext>p</mtext> + <mtext>É</mtext> + </mstyle> + </math> + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-010.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-010.html new file mode 100644 index 0000000000..6e92dfda2a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-010.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>dir="rtl" VS direction: rtl on math/mrow/mstyle</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"> + <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> + <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> + <meta name="assert" content="Verify that math, mrow and mstyle with a dir=rtl attribute render the same as CSS direction right-to-left."> + <link rel="match" href="direction-010-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + math { + font: 25px/1 Ahem; + } + </style> + </head> + <body> + + <p> + <math dir="rtl"> + <mtext>X</mtext> + <mtext>p</mtext> + <mtext>É</mtext> + </math> + </p> + + <p> + <math> + <mrow dir="rtl"> + <mtext>X</mtext> + <mtext>p</mtext> + <mtext>É</mtext> + </mrow> + </math> + </p> + + <p> + <math> + <mstyle mathcolor="blue" dir="rtl"> + <mtext>X</mtext> + <mtext>p</mtext> + <mtext>É</mtext> + </mstyle> + </math> + </p> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_dir");</script> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-mpadded-ref.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-mpadded-ref.html new file mode 100644 index 0000000000..98208d6849 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-mpadded-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Verify dir attribute on mpadded (reference)</title> + </head> + <body> + <p> + mpadded lspace="25px" width="150px": + <math> + <mspace width="1px" height="25px" mathbackground="black"/> + <mpadded lspace="50px" width="150px"> + <mspace width="25px" height="25px" mathbackground="blue"/> + <mspace width="25px" height="25px" mathbackground="green"/> + <mspace width="25px" height="25px" mathbackground="red"/> + </mpadded> + <mspace width="1px" height="25px" mathbackground="black"/> + </math> + </p> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-mpadded.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-mpadded.html new file mode 100644 index 0000000000..772535171d --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-mpadded.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Verify dir attribute on mpadded</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"> + <link rel="help" href="https://w3c.github.io/mathml-core/#adjust-space-around-content-mpadded"> + <meta name="assert" content="Verify dir attribute on mpadded."> + <link rel="match" href="direction-mpadded-ref.html"> + </head> + <body> + <p> + mpadded lspace="25px" width="150px": + <math dir="rtl"> + <mspace width="1px" height="25px" mathbackground="black"/> + <mpadded lspace="25px" width="150px"> + <mspace width="25px" height="25px" mathbackground="red"/> + <mspace width="25px" height="25px" mathbackground="green"/> + <mspace width="25px" height="25px" mathbackground="blue"/> + </mpadded> + <mspace width="1px" height="25px" mathbackground="black"/> + </math> + </p> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-002-ref.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-002-ref.html new file mode 100644 index 0000000000..03ecf29944 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-002-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <head><title>Test dir=rtl</title></head> + <body style="background: white;"> + + <div style="position: absolute; top: 0px; left: 0px;"> + <div style="width: 40px; height: 3000px; background: black;"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-002.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-002.html new file mode 100644 index 0000000000..8840eaed56 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-002.html @@ -0,0 +1,120 @@ +<!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 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 + black rectangle when dir=rtl --> + + <div style="position: absolute; top: 5px; left: 5px;"> + <!-- msup --> + <math dir="rtl"> + <msup> + <mspace width="20px" height="20px"/> + <mspace width="20px" height="20px" mathbackground="red"/> + </msup> + </math><br/> + <!-- msub --> + <math dir="rtl"> + <msub> + <mspace width="20px" height="20px"/> + <mspace width="20px" height="20px" mathbackground="orange"/> + </msub> + </math><br/> + <!-- msubsup --> + <math dir="rtl"> + <msubsup> + <mspace width="20px" height="20px"/> + <mspace width="20px" height="20px" mathbackground="green"/> + <mspace width="20px" height="20px" mathbackground="blue"/> + </msubsup> + </math><br/> + <!-- mmultiscripts --> + <math dir="rtl"> + <mmultiscripts> + <mspace/> + <mspace width="20px" height="20px" mathbackground="cyan"/> + <mspace width="20px" height="20px" mathbackground="yellow"/> + <mprescripts/> + <mspace width="20px" height="20px"/> + <mspace width="20px" height="20px"/> + </mmultiscripts> + </math><br/> + <!-- munder (mo with movablelimits=true and displaystyle=false) --> + <math dir="rtl"> + <munder> + <mpadded width="20px"> + <mphantom> + <mo movablelimits="true" displaystyle="false">|</mo> + </mphantom> + </mpadded> + <mspace width="20px" height="20px" mathbackground="magenta"/> + </munder> + </math><br/> + <!-- mover (mo with movablelimits=true and displaystyle=false) --> + <math dir="rtl"> + <mover> + <mpadded width="20px"> + <mphantom> + <mo movablelimits="true" displaystyle="false">|</mo> + </mphantom> + </mpadded> + <mspace width="20px" height="20px" mathbackground="cyan"/> + </mover> + </math><br/> + <!-- munderover (mo with movablelimits=true and displaystyle=false) --> + <math dir="rtl"> + <munderover> + <mpadded width="20px"> + <mphantom> + <mo movablelimits="true" displaystyle="false">|</mo> + </mphantom> + </mpadded> + <mspace width="20px" height="20px" mathbackground="yellow"/> + <mspace width="20px" height="20px" mathbackground="grey"/> + </munderover> + </math><br/> + <!-- mroot --> + <math dir="rtl"> + <mstyle mathcolor="white"> + <mroot> + <mspace width="20px" height="20px" mathbackground="orange"/> + <mspace width="20px" height="20px"/> + </mroot> + </mstyle> + </math><br/> + <!-- msqrt --> + <math dir="rtl"> + <mstyle mathcolor="white"> + <msqrt> + <!-- Here, we assume that (width of radical + width of mspace) + is greater than the width of the black rectangle (i.e. + width of radical > 30 - 25 = 5px), so the test fails if the + radical is placed on the left. --> + <mspace width="25px" height="20px" mathbackground="grey"/> + </msqrt> + </mstyle> + </math> + </div> + + <div style="position: absolute; top: 0px; left: 0px;"> + <div style="width: 40px; height: 3000px; background: black"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-003-ref.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-003-ref.html new file mode 100644 index 0000000000..3ecbcd0a6f --- /dev/null +++ b/testing/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 new file mode 100644 index 0000000000..7acc0f65c1 --- /dev/null +++ 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> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-ref.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-ref.html new file mode 100644 index 0000000000..5ce6c5c42b --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Verify dir attribute on various containers</title> + </head> + <body> + <p> + math: + <math> + <mspace width="25px" height="25px" mathbackground="blue"/> + <mspace width="25px" height="25px" mathbackground="green"/> + <mspace width="25px" height="25px" mathbackground="red"/> + </math> + </p> + + <p> + mrow: + <math> + <mrow> + <mspace width="25px" height="25px" mathbackground="blue"/> + <mspace width="25px" height="25px" mathbackground="green"/> + <mspace width="25px" height="25px" mathbackground="red"/> + </mrow> + </math> + </p> + + <p> + mstyle: + <math> + <mstyle> + <mspace width="25px" height="25px" mathbackground="blue"/> + <mspace width="25px" height="25px" mathbackground="green"/> + <mspace width="25px" height="25px" mathbackground="red"/> + </mstyle> + </math> + </p> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall.html new file mode 100644 index 0000000000..6effb94c54 --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-overall.html @@ -0,0 +1,53 @@ +<!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"> + <link rel="help" href="https://w3c.github.io/mathml-core/#the-top-level-math-element"> + <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> + <link rel="help" href="https://w3c.github.io/mathml-core/#style-change-mstyle"> + <meta name="assert" content="Verify dir attribute on various containers."> + <link rel="match" href="direction-overall-ref.html"> + </head> + <body> + + <!-- Test dir="rtl" on <math>, <mrow> and <mstyle> elements. The rectangle + inside these elements should be displayed right-to-left. --> + + <p> + math: + <math dir="rtl"> + <mspace width="25px" height="25px" mathbackground="red"/> + <mspace width="25px" height="25px" mathbackground="green"/> + <mspace width="25px" height="25px" mathbackground="blue"/> + </math> + </p> + + <p> + mrow: + <math> + <mrow dir="rtl"> + <mspace width="25px" height="25px" mathbackground="red"/> + <mspace width="25px" height="25px" mathbackground="green"/> + <mspace width="25px" height="25px" mathbackground="blue"/> + </mrow> + </math> + </p> + + <p> + mstyle: + <math> + <mstyle dir="rtl"> + <mspace width="25px" height="25px" mathbackground="red"/> + <mspace width="25px" height="25px" mathbackground="green"/> + <mspace width="25px" height="25px" mathbackground="blue"/> + </mstyle> + </math> + </p> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script> + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-token-ref.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-token-ref.html new file mode 100644 index 0000000000..f1895b578a --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-token-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html dir="rtl"> + <head> + <meta charset="utf-8"/> + <title>Verify dir attribute on token elements</title> + </head> + <body> + + <p><math><mtext style="direction: rtl;">חוק \left חסר או חוק \right מיותר</mtext></math></p> + <p><math><ms style="direction: rtl;">חוק \left חסר או חוק \right מיותר</ms></math></p> + <p><math><mo style="direction: rtl;">חוק \left חסר או חוק \right מיותר</mo></math></p> + <p><math><mi style="direction: rtl;">חוק \left חסר או חוק \right מיותר</mi></math></p> + <p><math><mn style="direction: rtl;">חוק \left חסר או חוק \right מיותר</mn></math></p> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction-token.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-token.html new file mode 100644 index 0000000000..58319fbfac --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction-token.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html dir="rtl"> + <head> + <meta charset="utf-8"/> + <title>Verify dir attribute on token elements</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"> + <link rel="help" href="https://w3c.github.io/mathml-core/#token-elements"> + <meta name="assert" content="Verify dir attribute on various token elements."> + <link rel="match" href="direction-token-ref.html"> + </head> + <body> + + <!-- Test dir="rtl" on MathML token elements. The text contains RTL and + LTR characters, so the attribute is needed to specify the actual + direction. --> + + <p><math><mtext dir="rtl">חוק \left חסר או חוק \right מיותר</mtext></math></p> + <p><math><ms dir="rtl">חוק \left חסר או חוק \right מיותר</ms></math></p> + <p><math><mo dir="rtl">חוק \left חסר או חוק \right מיותר</mo></math></p> + <p><math><mi dir="rtl">חוק \left חסר או חוק \right מיותר</mi></math></p> + <p><math><mn dir="rtl">חוק \left חסר או חוק \right מיותר</mn></math></p> + + <script src="/mathml/support/feature-detection.js"></script> + <script>MathMLFeatureDetection.ensure_for_match_reftest("has_dir");</script> + + </body> +</html> diff --git a/testing/web-platform/tests/mathml/presentation-markup/direction/direction.html b/testing/web-platform/tests/mathml/presentation-markup/direction/direction.html new file mode 100644 index 0000000000..dfb1671e4c --- /dev/null +++ b/testing/web-platform/tests/mathml/presentation-markup/direction/direction.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html dir="rtl"> +<head> +<meta charset="utf-8"/> +<title>Verify computed direction</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/#the-top-level-math-element"> +<meta name="assert" content="Verify computed direction value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + function runTests() { + test(function() { + assert_equals(window.getComputedStyle(document.getElementById('x1')).direction, "ltr"); + assert_equals(window.getComputedStyle(document.getElementById('x2')).direction, "ltr"); + assert_equals(window.getComputedStyle(document.getElementById('x3')).direction, "ltr"); + assert_equals(window.getComputedStyle(document.getElementById('x4')).direction, "rtl"); + }, "Check direction"); + + done(); + } +</script> +</head> +<body> + <!-- Test the CSS direction and dir attribute on the <math> element. It + should be "ltr", except if an explicit dir="rtl" is used. --> + + <p>שורשי משוואה מודגשת זו <math id="x1"> <mrow> <msup> <mi>y</mi> <mn>3</mn> </msup> <mo>+</mo> <mi>p</mi> <mi>y</mi> <mo>+</mo> <mi>q</mi> <mo>=</mo> <mn>0</mn> </mrow> </math> מודגשים גם הם</p> + + <p>שורשי משוואה מודגשת זו <math id="x2" dir="ltr"> <mrow> <msup> <mi>y</mi> <mn>3</mn> </msup> <mo>+</mo> <mi>p</mi> <mi>y</mi> <mo>+</mo> <mi>q</mi> <mo>=</mo> <mn>0</mn> </mrow> </math> מודגשים גם הם</p> + + <p>שורשי משוואה מודגשת זו <math id="x3" dir="invalid"> <mrow> <msup> <mi>y</mi> <mn>3</mn> </msup> <mo>+</mo> <mi>p</mi> <mi>y</mi> <mo>+</mo> <mi>q</mi> <mo>=</mo> <mn>0</mn> </mrow> </math> מודגשים גם הם</p> + + <p>שורשי משוואה מודגשת זו <math id="x4" dir="rtl"> <mrow> <msup> <mi>y</mi> <mn>3</mn> </msup> <mo>+</mo> <mi>p</mi> <mi>y</mi> <mo>+</mo> <mi>q</mi> <mo>=</mo> <mn>0</mn> </mrow> </math> מודגשים גם הם</p> + +</body> +</html> |