Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 10 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /mathml/presentation-markup/mrow/no-spacing.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>No spacing in elements</title>
<meta name="assert" content="Spacing is not added around operators when an element does not use mrow layout. However, when the element is embellished, spacing of the core mo is added around it.">
<link rel="help" href="https://w3c.github.io/mathml-core/#prescripts-and-tensor-indices-mmultiscripts">
<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup">
<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/fonts.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<script type="text/javascript">
setup({ explicit_done: true });
window.addEventListener("load", () => { loadAllFonts().then(runTests); });
function runTests()
{
Array.from(document.getElementsByClassName("testedElement")).forEach((e) => {
test(function() {
assert_true(MathMLFeatureDetection.has_operator_spacing());
let box = e.getBoundingClientRect();
let spacing = 100;
assert_less_than_equal(box.width, spacing);
}, `Spacing inside <${e.tagName}>.`);
test(function() {
assert_true(MathMLFeatureDetection.has_operator_spacing());
let box = e.parentNode.getBoundingClientRect();
let spacing = 100;
if (e.classList.contains("embellished"))
assert_greater_than_equal(box.width, spacing * 2);
else
assert_less_than_equal(box.width, spacing);
}, `Spacing around <${e.tagName}>.`);
});
done();
}
</script>
<style>
.testedElement {
background: lightgreen;
}
math {
background: lightblue;
}
math, math * {
font: 25px/1 Ahem;
}
</style>
</head>
<body>
<div id="log"></div>
<p>
<math>
<mfrac class="testedElement embellished">
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
</mfrac>
</math>
</p>
<p>
<math>
<msub class="testedElement embellished">
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
</msub>
</math>
</p>
<p>
<math>
<msup class="testedElement embellished">
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
</msup>
</math>
</p>
<p>
<math>
<msubsup class="testedElement embellished">
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
</msubsup>
</math>
</p>
<p>
<math>
<mmultiscripts class="testedElement embellished">
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
<mprescripts/>
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
</mmultiscripts>
</math>
</p>
<p>
<math>
<munder class="testedElement embellished">
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
</munder>
</math>
</p>
<p>
<math>
<mover class="testedElement embellished">
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
</mover>
</math>
</p>
<p>
<math>
<munderover class="testedElement embellished">
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
<mo lspace="100px" rspace="100px">X</mo>
</munderover>
</math>
</p>
<p>
<math>
<mroot class="testedElement">
<mtext>X</mtext>
<mo lspace="100px" rspace="100px">X</mo>
</mroot>
</math>
</p>
</body>
</html>