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/spaces/mspace-width-height-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Space</title>
<meta name="assert" content="Verify mspace metrics for different values of height, depth and width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
var epsilon = 1;
setup({ explicit_done: true });
window.addEventListener("load", runTests);
function getMetrics(aId) {
let baseline = document.getElementById("baseline").getBoundingClientRect();
let mspace = document.getElementById(aId).getBoundingClientRect();
return {
width: mspace.width,
height: mspace.height,
line_ascent: (baseline.top + baseline.bottom)/2 - mspace.top
};
}
function runTests() {
test(function() {
let metrics = getMetrics("widthAttributePlusWidthProperty");
assert_approx_equals(metrics.width, 200, epsilon,
"mspace width overridden by inline style");
assert_approx_equals(metrics.height, 200, epsilon,
"mspace height as specified by height attribute");
assert_approx_equals(metrics.line_ascent, 200, epsilon,
"mspace line-ascent as specified by height attribute");
}, "width attribute + width property");
test(function() {
let metrics = getMetrics("heightAndDepthAttributesPlusHeightProperty");
assert_approx_equals(metrics.width, 200, epsilon,
"mspace width as specified by attribute");
assert_approx_equals(metrics.height, 200, epsilon,
"mspace height overridden by inline style");
assert_approx_equals(metrics.line_ascent, 100, epsilon,
"mspace line-ascent as specified by height attribute");
}, "height/depth attributes + height property");
test(function() {
let metrics = getMetrics("heightAttributePlusHeightProperty");
assert_approx_equals(metrics.width, 200, epsilon,
"mspace width as specified by attribute");
assert_approx_equals(metrics.height, 200, epsilon,
"mspace height overridden by inline style");
assert_approx_equals(metrics.line_ascent, 300, epsilon,
"mspace line-ascent as specified by height attribute");
}, "height attribute + height property");
test(function() {
let metrics = getMetrics("depthAttributePlusHeightProperty");
assert_approx_equals(metrics.width, 200, epsilon,
"mspace width as specified by attribute");
assert_approx_equals(metrics.height, 200, epsilon,
"mspace height overridden by inline style");
assert_approx_equals(metrics.line_ascent, 0, epsilon,
"mspace line-ascent defaults to 0");
}, "depth attribute + height property");
done();
}
</script>
</head>
<body>
<div id="log"></div>
<math>
<!-- Reference baseline -->
<mspace id="baseline" style="background: black"
width="10px" height="100px" depth="100px"/>
<!-- width="500px" is a presentational hint
setting the element's width property to the corresponding value,
overridden by the inline style width: 200px.
height="200px" sets the height/line-ascent to 200px. -->
<mspace id="widthAttributePlusWidthProperty"
width="500px" height="200px"
style="width: 200px; background: green"/>
<!-- height="100px" + depth="200px" are used as a presentational hint
setting the element's height property to calc(100px + 200px),
overridden by inline style height: 200px.
height="100px" sets the line-ascent to 100px. -->
<mspace id="heightAndDepthAttributesPlusHeightProperty"
width="200px" height="100px" depth="200px"
style="height: 200px; background: blue"/>
<!-- height="300px" is used as a presentational hint
setting the element's height property to the corresponding value,
overridden by inline style height: 200px.
height="300px" sets the line-ascent to 300px. -->
<mspace id="heightAttributePlusHeightProperty"
width="200px" height="300px"
style="height: 200px; background: magenta"/>
<!-- depth="300px" is used as a presentational hint
setting the element's height property to the corresponding value,
overridden by inline style height: 200px.
The line-ascent defaults to 0. -->
<mspace id="depthAttributePlusHeightProperty"
width="200px" depth="300px"
style="height: 200px; background: yellow"/>
</math>
</body>
</html>