MathML: Split color-1 and visibility-1 into smaller tests. (#18105)
This makes easier to debug, allows finer control on failure expectations and
more accurate references to spec sections. Feature detections are also
performed for the individual fraction, radical and menclose tests
to avoid false negative results.
Add feature detection for root and menclose too.
diff --git a/mathml/relations/css-styling/color-1-ref.html b/mathml/relations/css-styling/color-001-ref.html
similarity index 100%
rename from mathml/relations/css-styling/color-1-ref.html
rename to mathml/relations/css-styling/color-001-ref.html
diff --git a/mathml/relations/css-styling/color-001.html b/mathml/relations/css-styling/color-001.html
new file mode 100644
index 0000000..bc4b177
--- /dev/null
+++ b/mathml/relations/css-styling/color-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
+<link rel="match" href="color-001-ref.html"/>
+<meta name="assert" content="Verify that the color is used for the text of token elements.">
+</head>
+<body>
+ <p>Test passes if you see a green square.</p>
+ <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+ <math><mi style="color: green">1</mi></math>
+ <math><mn style="color: green">2</mn></math>
+ <math><mo style="color: green">3</mo></math>
+ <math><mtext style="color: green">4</mtext></math>
+ <math><ms style="color: green">5</ms></math>
+ </div>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/color-1-ref.html b/mathml/relations/css-styling/color-002-ref.html
similarity index 100%
copy from mathml/relations/css-styling/color-1-ref.html
copy to mathml/relations/css-styling/color-002-ref.html
diff --git a/mathml/relations/css-styling/color-002.html b/mathml/relations/css-styling/color-002.html
new file mode 100644
index 0000000..1773338
--- /dev/null
+++ b/mathml/relations/css-styling/color-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fraction-with-nonzero-line-thickness">
+<link rel="match" href="color-002-ref.html"/>
+<meta name="assert" content="Verify that the color is used for text and fraction bar of the mfrac element.">
+</head>
+<body>
+ <p>Test passes if you see a green square.</p>
+ <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+ <math><mfrac style="color: green"><mn>1</mn><mn>2</mn></mfrac></math>
+ </div>
+ <script src="/mathml/support/feature-detection.js"></script>
+ <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/color-1-ref.html b/mathml/relations/css-styling/color-003-ref.html
similarity index 100%
copy from mathml/relations/css-styling/color-1-ref.html
copy to mathml/relations/css-styling/color-003-ref.html
diff --git a/mathml/relations/css-styling/color-003.html b/mathml/relations/css-styling/color-003.html
new file mode 100644
index 0000000..2422ffd
--- /dev/null
+++ b/mathml/relations/css-styling/color-003.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#radical-symbol">
+<link rel="match" href="color-003-ref.html"/>
+<meta name="assert" content="Verify that the color is used for text and radical symbol of the msqrt and mroot elements.">
+</head>
+<body>
+ <p>Test passes if you see a green square.</p>
+ <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+ <math><msqrt style="color: green"><mn>1</mn></msqrt></math>
+ <math><mroot style="color: green"><mn>2</mn><mn>2</mn></mroot></math>
+ </div>
+ <script src="/mathml/support/feature-detection.js"></script>
+ <script>MathMLFeatureDetection.ensure_for_match_reftest("has_msqrt");</script>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/color-1-ref.html b/mathml/relations/css-styling/color-004-ref.html
similarity index 100%
copy from mathml/relations/css-styling/color-1-ref.html
copy to mathml/relations/css-styling/color-004-ref.html
diff --git a/mathml/relations/css-styling/color-004.html b/mathml/relations/css-styling/color-004.html
new file mode 100644
index 0000000..65f6c44
--- /dev/null
+++ b/mathml/relations/css-styling/color-004.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>color</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#enclose-expression-inside-notation-menclose">
+<link rel="match" href="color-004-ref.html"/>
+<meta name="assert" content="Verify that the color is used for text and graphical elements of the menclose element.">
+</head>
+<body>
+ <p>Test passes if you see a green square.</p>
+ <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
+ <math><menclose notation="left" style="color: green"><mn>1</mn></menclose></math>
+ <math><menclose notation="right" style="color: green"><mn>2</mn></menclose></math>
+ <math><menclose notation="top" style="color: green"><mn>3</mn></menclose></math>
+ <math><menclose notation="bottom" style="color: green"><mn>4</mn></menclose></math>
+ <math><menclose notation="box" style="color: green"><mn>5</mn></menclose></math>
+ <math><menclose notation="roundedbox" style="color: green"><mn>6</mn></menclose></math>
+ <math><menclose notation="actuarial" style="color: green"><mn>7</mn></menclose></math>
+ <math><menclose notation="madruwb" style="color: green"><mn>8</mn></menclose></math>
+ <math><menclose notation="horizontalstrike" style="color: green"><mn>9</mn></menclose></math>
+ <math><menclose notation="verticalstrike" style="color: green"><mn>10</mn></menclose></math>
+ <math><menclose notation="updiagonalstrike" style="color: green"><mn>11</mn></menclose></math>
+ <math><menclose notation="downdiagonalstrike" style="color: green"><mn>12</mn></menclose></math>
+ <math><menclose notation="longdiv" style="color: green"><mn>13</mn></menclose></math>
+ <math><menclose notation="circle" style="color: green"><mn>14</mn></menclose></math>
+ </div>
+ <script src="/mathml/support/feature-detection.js"></script>
+ <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/color-1.html b/mathml/relations/css-styling/color-1.html
deleted file mode 100644
index 4d9d084..0000000
--- a/mathml/relations/css-styling/color-1.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>color</title>
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fraction-with-nonzero-line-thickness">
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#radical-symbol">
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#enclose-expression-inside-notation-menclose">
-<link rel="match" href="color-1-ref.html"/>
-<meta name="assert" content="Verify that the color is used for text and graphical elements.">
-</head>
-<body>
- <p>Test passes if you see a green square.</p>
- <div style="background: green; color: red; width: 200px; height: 200px; padding: 1px;">
- <math><mfrac style="color: green"><mn>1</mn><mn>2</mn></mfrac></math>
- <math><msqrt style="color: green"><mn>3</mn></msqrt></math>
- <math><mroot style="color: green"><mn>4</mn><mn>5</mn></mroot></math>
- <math><menclose notation="left" style="color: green"><mn>6</mn></menclose></math>
- <math><menclose notation="right" style="color: green"><mn>7</mn></menclose></math>
- <math><menclose notation="top" style="color: green"><mn>8</mn></menclose></math>
- <math><menclose notation="bottom" style="color: green"><mn>9</mn></menclose></math>
- <math><menclose notation="box" style="color: green"><mn>10</mn></menclose></math>
- <math><menclose notation="roundedbox" style="color: green"><mn>11</mn></menclose></math>
- <math><menclose notation="actuarial" style="color: green"><mn>12</mn></menclose></math>
- <math><menclose notation="madruwb" style="color: green"><mn>13</mn></menclose></math>
- <math><menclose notation="horizontalstrike" style="color: green"><mn>14</mn></menclose></math>
- <math><menclose notation="verticalstrike" style="color: green"><mn>15</mn></menclose></math>
- <math><menclose notation="updiagonalstrike" style="color: green"><mn>16</mn></menclose></math>
- <math><menclose notation="downdiagonalstrike" style="color: green"><mn>17</mn></menclose></math>
- <math><menclose notation="longdiv" style="color: green"><mn>18</mn></menclose></math>
- <math><menclose notation="circle" style="color: green"><mn>19</mn></menclose></math>
- <math><mi style="color: green">20</mi></math>
- <math><mn style="color: green">21</mn></math>
- <math><mo style="color: green">22</mo></math>
- <math><mtext style="color: green">23</mtext></math>
- <math><ms style="color: green">24</ms></math>
- </div>
-</body>
-</html>
diff --git a/mathml/relations/css-styling/visibility-1-ref.html b/mathml/relations/css-styling/visibility-001-ref.html
similarity index 100%
rename from mathml/relations/css-styling/visibility-1-ref.html
rename to mathml/relations/css-styling/visibility-001-ref.html
diff --git a/mathml/relations/css-styling/visibility-001.html b/mathml/relations/css-styling/visibility-001.html
new file mode 100644
index 0000000..f47bfad
--- /dev/null
+++ b/mathml/relations/css-styling/visibility-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
+<link rel="match" href="visibility-001-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text of token elements.">
+</head>
+<body>
+ <p>Test passes if you see a green square.</p>
+ <div style="background: green; color: red; width: 200px; height: 200px;">
+ <math><mi style="visibility: hidden">1</mi></math>
+ <math><mn style="visibility: hidden">2</mn></math>
+ <math><mo style="visibility: hidden">3</mo></math>
+ <math><mtext style="visibility: hidden">4</mtext></math>
+ <math><ms style="visibility: hidden">5</ms></math>
+ </div>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/visibility-1-ref.html b/mathml/relations/css-styling/visibility-002-ref.html
similarity index 100%
copy from mathml/relations/css-styling/visibility-1-ref.html
copy to mathml/relations/css-styling/visibility-002-ref.html
diff --git a/mathml/relations/css-styling/visibility-002.html b/mathml/relations/css-styling/visibility-002.html
new file mode 100644
index 0000000..f3afb79
--- /dev/null
+++ b/mathml/relations/css-styling/visibility-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fraction-with-nonzero-line-thickness">
+<link rel="match" href="visibility-002-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text and fraction bar of the mfrac element.">
+</head>
+<body>
+ <p>Test passes if you see a green square.</p>
+ <div style="background: green; color: red; width: 200px; height: 200px;">
+ <math><mfrac style="visibility: hidden"><mn>1</mn><mn>2</mn></mfrac></math>
+ </div>
+ <script src="/mathml/support/feature-detection.js"></script>
+ <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/visibility-1-ref.html b/mathml/relations/css-styling/visibility-003-ref.html
similarity index 100%
copy from mathml/relations/css-styling/visibility-1-ref.html
copy to mathml/relations/css-styling/visibility-003-ref.html
diff --git a/mathml/relations/css-styling/visibility-003.html b/mathml/relations/css-styling/visibility-003.html
new file mode 100644
index 0000000..cfeed64
--- /dev/null
+++ b/mathml/relations/css-styling/visibility-003.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#radical-symbol">
+<link rel="match" href="visibility-003-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text and radical symbol of the msqrt and mroot elements.">
+</head>
+<body>
+ <p>Test passes if you see a green square.</p>
+ <div style="background: green; color: red; width: 200px; height: 200px;">
+ <math><msqrt style="visibility: hidden"><mn>1</mn></msqrt></math>
+ <math><mroot style="visibility: hidden"><mn>2</mn><mn>3</mn></mroot></math>
+ </div>
+ <script src="/mathml/support/feature-detection.js"></script>
+ <script>MathMLFeatureDetection.ensure_for_match_reftest("has_msqrt");</script>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/visibility-1-ref.html b/mathml/relations/css-styling/visibility-004-ref.html
similarity index 100%
copy from mathml/relations/css-styling/visibility-1-ref.html
copy to mathml/relations/css-styling/visibility-004-ref.html
diff --git a/mathml/relations/css-styling/visibility-004.html b/mathml/relations/css-styling/visibility-004.html
new file mode 100644
index 0000000..8173b9c
--- /dev/null
+++ b/mathml/relations/css-styling/visibility-004.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>visibility</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#enclose-expression-inside-notation-menclose">
+<link rel="match" href="visibility-004-ref.html"/>
+<meta name="assert" content="Verify that visibility=hidden is used for the text and graphical elements of the menclose element.">
+</head>
+<body>
+ <p>Test passes if you see a green square.</p>
+ <div style="background: green; color: red; width: 200px; height: 200px;">
+ <math><menclose notation="left" style="visibility: hidden"><mn>1</mn></menclose></math>
+ <math><menclose notation="right" style="visibility: hidden"><mn>2</mn></menclose></math>
+ <math><menclose notation="top" style="visibility: hidden"><mn>3</mn></menclose></math>
+ <math><menclose notation="bottom" style="visibility: hidden"><mn>4</mn></menclose></math>
+ <math><menclose notation="box" style="visibility: hidden"><mn>5</mn></menclose></math>
+ <math><menclose notation="roundedbox" style="visibility: hidden"><mn>6</mn></menclose></math>
+ <math><menclose notation="actuarial" style="visibility: hidden"><mn>7</mn></menclose></math>
+ <math><menclose notation="madruwb" style="visibility: hidden"><mn>8</mn></menclose></math>
+ <math><menclose notation="horizontalstrike" style="visibility: hidden"><mn>9</mn></menclose></math>
+ <math><menclose notation="verticalstrike" style="visibility: hidden"><mn>10</mn></menclose></math>
+ <math><menclose notation="updiagonalstrike" style="visibility: hidden"><mn>11</mn></menclose></math>
+ <math><menclose notation="downdiagonalstrike" style="visibility: hidden"><mn>12</mn></menclose></math>
+ <math><menclose notation="longdiv" style="visibility: hidden"><mn>13</mn></menclose></math>
+ <math><menclose notation="circle" style="visibility: hidden"><mn>14</mn></menclose></math>
+ </div>
+ <script src="/mathml/support/feature-detection.js"></script>
+ <script>MathMLFeatureDetection.ensure_for_match_reftest("has_menclose");</script>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/visibility-1.html b/mathml/relations/css-styling/visibility-1.html
deleted file mode 100644
index 7083ef7..0000000
--- a/mathml/relations/css-styling/visibility-1.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>visibility</title>
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#text-mtext">
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fraction-with-nonzero-line-thickness">
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#radical-symbol">
-<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#enclose-expression-inside-notation-menclose">
-<link rel="match" href="visibility-1-ref.html"/>
-<meta name="assert" content="Verify that visibility=hidden is used for text and graphical elements.">
-</head>
-<body>
- <p>Test passes if you see a green square.</p>
- <div style="background: green; color: red; width: 200px; height: 200px;">
- <math><mfrac style="visibility: hidden"><mn>1</mn><mn>2</mn></mfrac></math>
- <math><msqrt style="visibility: hidden"><mn>3</mn></msqrt></math>
- <math><mroot style="visibility: hidden"><mn>4</mn><mn>5</mn></mroot></math>
- <math><menclose notation="left" style="visibility: hidden"><mn>6</mn></menclose></math>
- <math><menclose notation="right" style="visibility: hidden"><mn>7</mn></menclose></math>
- <math><menclose notation="top" style="visibility: hidden"><mn>8</mn></menclose></math>
- <math><menclose notation="bottom" style="visibility: hidden"><mn>9</mn></menclose></math>
- <math><menclose notation="box" style="visibility: hidden"><mn>10</mn></menclose></math>
- <math><menclose notation="roundedbox" style="visibility: hidden"><mn>11</mn></menclose></math>
- <math><menclose notation="actuarial" style="visibility: hidden"><mn>12</mn></menclose></math>
- <math><menclose notation="madruwb" style="visibility: hidden"><mn>13</mn></menclose></math>
- <math><menclose notation="horizontalstrike" style="visibility: hidden"><mn>14</mn></menclose></math>
- <math><menclose notation="verticalstrike" style="visibility: hidden"><mn>15</mn></menclose></math>
- <math><menclose notation="updiagonalstrike" style="visibility: hidden"><mn>16</mn></menclose></math>
- <math><menclose notation="downdiagonalstrike" style="visibility: hidden"><mn>17</mn></menclose></math>
- <math><menclose notation="longdiv" style="visibility: hidden"><mn>18</mn></menclose></math>
- <math><menclose notation="circle" style="visibility: hidden"><mn>19</mn></menclose></math>
- <math><mi style="visibility: hidden">20</mi></math>
- <math><mn style="visibility: hidden">21</mn></math>
- <math><mo style="visibility: hidden">22</mo></math>
- <math><mtext style="visibility: hidden">23</mtext></math>
- <math><ms style="visibility: hidden">24</ms></math>
- </div>
-</body>
-</html>
diff --git a/mathml/support/feature-detection.js b/mathml/support/feature-detection.js
index cf5caa1..50ca926 100644
--- a/mathml/support/feature-detection.js
+++ b/mathml/support/feature-detection.js
@@ -67,6 +67,58 @@
return this._has_mfrac;
},
+ has_msqrt: function() {
+ if (!this.hasOwnProperty("_has_msqrt")) {
+ document.body.insertAdjacentHTML("beforeend", "<math>\
+<mrow style='font-size: 20px !important'>\
+ <mtext>A</mtext>\
+</mrow>\
+<msqrt style='font-size: 20px !important'>\
+ <mtext>A</mtext>\
+</msqrt>\
+</math>");
+ var math = document.body.lastElementChild;
+ // The radical symbol will make msqrt wider than mrow, if the former is supported.
+ this._has_msqrt =
+ math.lastElementChild.getBoundingClientRect().width -
+ math.firstElementChild.getBoundingClientRect().width > 5;
+ document.body.removeChild(math);
+ }
+ return this._has_msqrt;
+ },
+
+ has_menclose: function() {
+ if (!this.hasOwnProperty("_has_menclose")) {
+ document.body.insertAdjacentHTML("beforeend", "<math>\
+<mrow style='font-size: 20px !important'>\
+ <mrow>\
+ <mrow>\
+ <mrow>\
+ <mtext>A</mtext>\
+ </mrow>\
+ </mrow>\
+ </mrow>\
+</mrow>\
+<menclose notation='box' style='font-size: 20px !important'>\
+ <menclose notation='box'>\
+ <menclose notation='box'>\
+ <menclose notation='box'>\
+ <mtext>A</mtext>\
+ </menclose>\
+ </menclose>\
+ </menclose>\
+</menclose>\
+</math>");
+ var math = document.body.lastElementChild;
+ // The boxes will make menclose wider than mrow, if the former is supported.
+ this._has_menclose =
+ math.lastElementChild.getBoundingClientRect().width -
+ math.firstElementChild.getBoundingClientRect().width > 5;
+ document.body.removeChild(math);
+ }
+ return this._has_menclose;
+ },
+
has_dir: function() {
if (!this.hasOwnProperty("_has_dir")) {
document.body.insertAdjacentHTML("beforeend", "<math style='direction: ltr !important;'>\
