113 lines
4.9 KiB
HTML
113 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Space</title>
|
|
<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
|
|
<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>
|