Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /mathml/presentation-markup/scripts/subsup-6-rtl.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mprescripts RTL</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup">
<meta name="assert" content="Position and size of mprescripts in mmultiscript element with dir=rtl.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/fonts.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
math, mspace {
font: 25px/1 Ahem;
}
</style>
<script>
/* This test verifies that mprescripts is correctly positioned in RTL
mmultiscripts. The right side of mprescripts should align with the
right side of the base, and it should be vertically centered. */
setup({ explicit_done: true });
window.addEventListener("load", () => { loadAllFonts().then(runTests); });
function runTests() {
Array.from(document.getElementsByTagName("mprescripts")).
forEach(prescript => {
let mmultiscripts = prescript.parentNode;
let name = mmultiscripts.getAttribute("data-name");
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
var e = 1;
let base_box = mmultiscripts.firstElementChild.getBoundingClientRect();
let prescript_box = prescript.getBoundingClientRect();
assert_approx_equals(prescript_box.right, base_box.right, e, `${name}, right`);
assert_approx_equals((prescript_box.top + prescript_box.bottom) / 2, (base_box.top + base_box.bottom) / 2, e, `${name}, vertical center`);
if (name == "rtl prescripts with padding/border/margin") {
assert_approx_equals(prescript_box.width, 2*(15 + 25), e, `${name}, width`);
assert_approx_equals(prescript_box.height, 2*(10 + 20), e, `${name}, height`);
} else {
assert_approx_equals(prescript_box.width, 0, e, `${name}, width`);
assert_approx_equals(prescript_box.height, 0, e, `${name}, height`);
}
}, `mprescripts RTL coordinates and sizes (${name})`);
});
done();
}
</script>
</head>
<body>
<div id="log"></div>
<p>
<math dir="rtl">
<mmultiscripts data-name="rtl 2 postscripts">
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mprescripts/>
</mmultiscripts>
</math>
</p>
<p>
<math dir="rtl">
<mmultiscripts data-name="rtl 2 prescripts">
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mprescripts/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
</mmultiscripts>
</math>
</p>
<p>
<math dir="rtl">
<mmultiscripts data-name="rtl 2 prescripts, 4 postscripts">
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mprescripts/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
</mmultiscripts>
</math>
</p>
<p>
<math dir="rtl">
<mmultiscripts data-name="rtl 4 prescripts, 2 postscripts">
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mprescripts/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
</mmultiscripts>
</math>
</p>
<p>
<math dir="rtl">
<mmultiscripts data-name="rtl prescripts with padding/border/margin">
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mprescripts style="background: blue;
padding-top: 10px; border-top: 20px solid green;
padding-bottom: 10px; border-bottom: 20px solid green;
padding-left: 15px; border-left: 25px solid green;
padding-right: 15px; border-right: 25px solid green;
margin-top: 50px;"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
<mspace width="30px" height="15px" depth="15px" style="background: black"/>
</mmultiscripts>
</math>
</p>
</body>
</html>