Skip to content

Commit a1bdc5b

Browse files
fred-wangfred-wang
authoredMay 27, 2020
Update style for merror and add a basic test for the default rendering. (#23794)
* Update style for merror and add a basic test for the default rendering. w3c/mathml#70 * fix bad markup
1 parent eccee3e commit a1bdc5b

File tree

3 files changed

+60
-16
lines changed

3 files changed

+60
-16
lines changed
 

‎mathml/presentation-markup/mrow/merror-001.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Test the merror element</title>
6+
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#error-message-merror">
7+
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#user-agent-stylesheet">
8+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
9+
<meta name="assert" content="Verify default merror style and size.">
10+
<script src="/resources/testharness.js"></script>
11+
<script src="/resources/testharnessreport.js"></script>
12+
<style>
13+
math {
14+
font: 25px/1 Ahem;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="log"></div>
20+
<div>
21+
<math>
22+
<mrow id="reference"><mtext>AN ERROR</mtext></mrow>
23+
<merror id="merror"><mtext>AN ERROR</mtext></merror>
24+
</math>
25+
</div>
26+
<script>
27+
test(function () {
28+
var style = window.getComputedStyle(document.getElementById("merror"));
29+
assert_equals(style.borderWidth, "1px");
30+
assert_equals(style.borderColor, "rgb(255, 0, 0)");
31+
assert_equals(style.borderStyle, "solid");
32+
assert_equals(style.backgroundColor, "rgb(255, 255, 224)");
33+
}, "Default CSS properties on merror");
34+
35+
test(function () {
36+
var merrorBox = document.getElementById("merror").getBoundingClientRect();
37+
var referenceBox = document.getElementById("reference").getBoundingClientRect();
38+
assert_equals(merrorBox.width, referenceBox.width + 2);
39+
assert_equals(merrorBox.height, referenceBox.height + 2);
40+
}, "Bounding box is the same as mrow + 1px border");
41+
</script>
42+
</body>
43+
</html>

‎mathml/relations/css-styling/attribute-mapping-001.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,7 @@
4242

4343
test(function() {
4444
assert_equals(style.getPropertyValue("color"),
45-
tag === "merror" ?
46-
"rgb(255, 0, 0)" : "rgb(0, 0, 255)",
45+
"rgb(0, 0, 255)",
4746
"no attribute");
4847
element.setAttribute("mathcolor", "black");
4948
assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 0)", "attribute specified");

‎mathml/relations/css-styling/padding-border-margin/border-002.html

+16-14
Original file line numberDiff line numberDiff line change
@@ -35,28 +35,30 @@
3535
continue;
3636
}
3737

38+
var default_border = tag === "merror" ? 1 : 0;
39+
3840
test(function() {
3941
assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
4042
var s = compareSpaceWithAndWithoutStyle(tag, style);
41-
assert_approx_equals(s.left_delta, 30, epsilon, "left border");
42-
assert_approx_equals(s.right_delta, 40, epsilon, "right border");
43-
assert_approx_equals(s.top_delta, 50, epsilon, "top border");
44-
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom border");
45-
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
46-
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
47-
assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "element preferred width");
43+
assert_approx_equals(s.left_delta + default_border, 30, epsilon, "left border");
44+
assert_approx_equals(s.right_delta + default_border, 40, epsilon, "right border");
45+
assert_approx_equals(s.top_delta + default_border, 50, epsilon, "top border");
46+
assert_approx_equals(s.bottom_delta + default_border, 60, epsilon, "bottom border");
47+
assert_approx_equals(s.element_width_delta + 2 * default_border, 30 + 40, epsilon, "element width");
48+
assert_approx_equals(s.element_height_delta + 2 * default_border, 50 + 60, epsilon, "element height");
49+
assert_approx_equals(s.preferred_width_delta + 2 * default_border, 30 + 40, epsilon, "element preferred width");
4850
}, `Border properties on ${tag}`);
4951

5052
test(function() {
5153
assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
5254
var s = compareSpaceWithAndWithoutStyle(tag, style, null, "rtl");
53-
assert_approx_equals(s.left_delta, 30, epsilon, "left border");
54-
assert_approx_equals(s.right_delta, 40, epsilon, "right border");
55-
assert_approx_equals(s.top_delta, 50, epsilon, "top border");
56-
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom border");
57-
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
58-
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
59-
assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "element preferred width");
55+
assert_approx_equals(s.left_delta + default_border, 30, epsilon, "left border");
56+
assert_approx_equals(s.right_delta + default_border, 40, epsilon, "right border");
57+
assert_approx_equals(s.top_delta + default_border, 50, epsilon, "top border");
58+
assert_approx_equals(s.bottom_delta + default_border, 60, epsilon, "bottom border");
59+
assert_approx_equals(s.element_width_delta + 2 * default_border, 30 + 40, epsilon, "element width");
60+
assert_approx_equals(s.element_height_delta + 2 * default_border, 50 + 60, epsilon, "element height");
61+
assert_approx_equals(s.preferred_width_delta + 2 * default_border, 30 + 40, epsilon, "element preferred width");
6062
}, `Border properties on ${tag} (rtl)`);
6163
}
6264

0 commit comments

Comments
 (0)
Please sign in to comment.