| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <head> |
| <meta charset="utf-8"> |
| <title>color</title> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling"> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> |
| <link rel="match" href="color-005-ref.html"/> |
| <meta name="assert" content="Verify that the color is used for normal, stretchy and large operators."> |
| <style> |
| math { |
| font: 20px/1 Ahem; |
| } |
| @font-face { |
| font-family: operators; |
| src: url("/fonts/math/operators.woff"); |
| } |
| mo { |
| font-family: operators; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test passes if you see a green square.</p> |
| <div id="square" style="background: green; color: red; width: 200px; height: 200px; padding: 1px;"> |
| <math> |
| <!-- unstretched operators --> |
| <mo style="color: green">⥯</mo> |
| <mo style="color: green">+</mo> |
| <mo style="color: green">-</mo> |
| </math> |
| <math displaystyle="true"> |
| <!-- large operator --> |
| <mo largeop="true" style="color: green">⥯</mo> |
| </math> |
| <math> |
| <mrow> |
| <!-- stretchy, small size --> |
| <mspace height="2em"/> |
| <mo style="color: green">⥯</mo> |
| </mrow> |
| </math> |
| <math> |
| <mrow> |
| <!-- stretchy, large size --> |
| <mspace height="4em"/> |
| <mo style="color: green">⥯</mo> |
| </mrow> |
| </math> |
| <div id="dynamic"> |
| <math> |
| <!-- unstretched operators --> |
| <mo stretchy="false">⥯</mo> |
| <mo>+</mo> |
| <mo>-</mo> |
| </math> |
| <math displaystyle="true"> |
| <!-- large operator --> |
| <mo largeop="true">⥯</mo> |
| </math> |
| <math> |
| <mrow> |
| <!-- stretchy, small size --> |
| <mspace height="2em"/> |
| <mo>⥯</mo> |
| </mrow> |
| </math> |
| <math> |
| <mrow> |
| <!-- stretchy, large size --> |
| <mspace height="4em"/> |
| <mo>⥯</mo> |
| </mrow> |
| </math> |
| </div> |
| </div> |
| <script> |
| window.addEventListener("load", () => document.fonts.ready.then(() => { |
| document.getElementById("dynamic").style.color = "green"; |
| document.documentElement.classList.remove("reftest-wait"); |
| })); |
| </script> |
| <script src="/mathml/support/feature-detection.js"></script> |
| <script>MathMLFeatureDetection.ensure_for_match_reftest("has_operator_spacing");</script> |
| </body> |
| </html> |