Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-18 03:45:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 097043b336e46876e281ddec3bb014fe9c480128

Browse source
This commit is contained in:
WPT Sync Bot 2019-08-03 10:25:42 +00:00
parent ecd32570c0
commit b68253eac0
405 changed files with 9164 additions and 3050 deletions
Download patch file Download diff file Expand all files Collapse all files

122
tests/wpt/web-platform-tests/mathml/relations/css-styling/displaystyle-1.html
View file

@ -19,6 +19,7 @@
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/attribute-values.js"></script>
<script>
setup({ explicit_done: true });
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
@ -36,60 +37,67 @@
});
function runTests() {
test(function() {
verify_displaystyle("math_default", false, "default");
verify_displaystyle("math_inline", false, "explicit display inline");
verify_displaystyle("math_block", true, "explicit display block");
verify_displaystyle("math_false", false, "explicit displaystyle false");
verify_displaystyle("math_true", true, "explicit displaystyle true");
verify_displaystyle("math_block_false", false, "explicit display block and displaystyle false");
verify_displaystyle("math_block_true", true, "explicit display block and displaystyle true");
}, "math element");
test(function() {
verify_displaystyle("mstyle_false", false, "explicit displaystyle false");
verify_displaystyle("mstyle_true", true, "explicit displaystyle true");
}, "mstyle element");
test(function() {
verify_displaystyle("mtable_default", false, "default");
verify_displaystyle("mtable_false", false, "explicit displaystyle false");
verify_displaystyle("mtable_true", true, "explicit displaystyle true");
}, "mtable element");
test(function() {
verify_displaystyle("mfrac_sibling", true, "sibling");
verify_displaystyle("mfrac_numerator", false, "numerator");
verify_displaystyle("mfrac_denominator", false, "denominator");
}, "mfrac element");
test(function() {
verify_displaystyle("mroot_base", true, "base");
verify_displaystyle("mroot_index", false, "index");
}, "mroot element");
test(function() {
verify_displaystyle("msub_base", true, "base");
verify_displaystyle("msub_subscript", false, "subscript");
}, "msub element");
test(function() {
verify_displaystyle("msup_base", true, "base");
verify_displaystyle("msup_supscript", false, "supscript");
}, "msup element");
test(function() {
verify_displaystyle("msubsup_base", true, "base");
verify_displaystyle("msubsup_subscript", false, "subscript");
verify_displaystyle("msubsup_supscript", false, "supscript");
}, "msubsup element");
test(function() {
verify_displaystyle("munder_base", true, "base");
verify_displaystyle("munder_underscript", false, "underscript");
}, "munder element");
test(function() {
verify_displaystyle("mover_base", true, "base");
verify_displaystyle("mover_overscript", false, "overscript");
}, "mover element");
test(function() {
verify_displaystyle("munderover_base", true, "base");
verify_displaystyle("munderover_underscript", false, "underscript");
verify_displaystyle("munderover_overscript", false, "overscript");
}, "munderover element");
done();
for (transform in AttributeValueTransforms) {
TransformAttributeValues(transform, ["display", "displaystyle"]);
test(function() {
verify_displaystyle("math_default", false, "default");
verify_displaystyle("math_false", false, "explicit displaystyle false");
verify_displaystyle("math_true", true, "explicit displaystyle true");
}, `math element (${transform})`);
test(function() {
verify_displaystyle("math_inline", false, "explicit display inline");
verify_displaystyle("math_block", true, "explicit display block");
verify_displaystyle("math_block_false", false, "explicit display block and displaystyle false");
verify_displaystyle("math_block_true", true, "explicit display block and displaystyle true");
verify_displaystyle("math_inline_false", false, "explicit display inline and displaystyle false");
verify_displaystyle("math_inline_true", true, "explicit display inline and displaystyle true");
}, `math element (explicit display, ${transform})`);
test(function() {
verify_displaystyle("mstyle_false", false, "explicit displaystyle false");
verify_displaystyle("mstyle_true", true, "explicit displaystyle true");
}, `mstyle element (${transform})`);
test(function() {
verify_displaystyle("mtable_default", false, "default");
verify_displaystyle("mtable_false", false, "explicit displaystyle false");
verify_displaystyle("mtable_true", true, "explicit displaystyle true");
}, `mtable element (${transform})`);
test(function() {
verify_displaystyle("mfrac_sibling", true, "sibling");
verify_displaystyle("mfrac_numerator", false, "numerator");
verify_displaystyle("mfrac_denominator", false, "denominator");
}, `mfrac element (${transform})`);
test(function() {
verify_displaystyle("mroot_base", true, "base");
verify_displaystyle("mroot_index", false, "index");
}, `mroot element (${transform})`);
test(function() {
verify_displaystyle("msub_base", true, "base");
verify_displaystyle("msub_subscript", false, "subscript");
}, `msub element (${transform})`);
test(function() {
verify_displaystyle("msup_base", true, "base");
verify_displaystyle("msup_supscript", false, "supscript");
}, `msup element (${transform})`);
test(function() {
verify_displaystyle("msubsup_base", true, "base");
verify_displaystyle("msubsup_subscript", false, "subscript");
verify_displaystyle("msubsup_supscript", false, "supscript");
}, `msubsup element (${transform})`);
test(function() {
verify_displaystyle("munder_base", true, "base");
verify_displaystyle("munder_underscript", false, "underscript");
}, `munder element (${transform})`);
test(function() {
verify_displaystyle("mover_base", true, "base");
verify_displaystyle("mover_overscript", false, "overscript");
}, `mover element (${transform})`);
test(function() {
verify_displaystyle("munderover_base", true, "base");
verify_displaystyle("munderover_underscript", false, "underscript");
verify_displaystyle("munderover_overscript", false, "overscript");
}, `munderover element (${transform})`);
}
done();
}
</script>
</head>
@ -106,6 +114,12 @@
<math display="block" displaystyle="true">
<mo id="math_block_true">&#x2AFF;</mo>
</math>
<math display="inline" displaystyle="false">
<mo id="math_inline_false">&#x2AFF;</mo>
</math>
<math display="inline" displaystyle="true">
<mo id="math_inline_true">&#x2AFF;</mo>
</math>
<math><mstyle displaystyle="false"><mo id="mstyle_false">&#x2AFF;</mo></mstyle></math>
<math><mstyle displaystyle="true"><mo id="mstyle_true">&#x2AFF;</mo></mstyle></math>
<math displaystyle="true"><mtable><mtr><mtd><mo id="mtable_default">&#x2AFF;</mo></mtd></mtr></mtable></math>

82
tests/wpt/web-platform-tests/mathml/relations/css-styling/displaystyle-2.html
View file

@ -19,6 +19,7 @@
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/attribute-values.js"></script>
<script>
setup({ explicit_done: true });
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
@ -36,45 +37,48 @@
});
function runTests() {
test(function() {
verify_displaystyle("cell_false", false, "cell with displaystyle false");
verify_displaystyle("cell_true", true, "cell with displaystyle true");
}, "mtable element");
test(function() {
verify_displaystyle("mfrac_numerator", true, "numerator");
verify_displaystyle("mfrac_denominator", true, "denominator");
}, "mfrac element");
test(function() {
verify_displaystyle("mroot_base", false, "base");
verify_displaystyle("mroot_index", true, "index");
}, "mroot element");
test(function() {
verify_displaystyle("msub_base", false, "base");
verify_displaystyle("msub_subscript", true, "subscript");
}, "msub element");
test(function() {
verify_displaystyle("msup_base", false, "base");
verify_displaystyle("msup_superscript", true, "superscript");
}, "msup element");
test(function() {
verify_displaystyle("msubsup_base", false, "base");
verify_displaystyle("msubsup_subscript", true, "subscript");
verify_displaystyle("msubsup_superscript", true, "superscript");
}, "msubsup element");
test(function() {
verify_displaystyle("munder_base", false, "base");
verify_displaystyle("munder_underscript", true, "underscript");
}, "munder element");
test(function() {
verify_displaystyle("mover_base", false, "base");
verify_displaystyle("mover_overscript", true, "overscript");
}, "mover element");
test(function() {
verify_displaystyle("munderover_base", false, "base");
verify_displaystyle("munderover_underscript", true, "underscript");
verify_displaystyle("munderover_overscript", true, "overscript");
}, "munderover element");
done();
for (transform in AttributeValueTransforms) {
TransformAttributeValues(transform, ["display", "displaystyle"]);
test(function() {
verify_displaystyle("cell_false", false, "cell with displaystyle false");
verify_displaystyle("cell_true", true, "cell with displaystyle true");
}, `mtable element (${transform})`);
test(function() {
verify_displaystyle("mfrac_numerator", true, "numerator");
verify_displaystyle("mfrac_denominator", true, "denominator");
}, `mfrac element (${transform})`);
test(function() {
verify_displaystyle("mroot_base", false, "base");
verify_displaystyle("mroot_index", true, "index");
}, `mroot element (${transform})`);
test(function() {
verify_displaystyle("msub_base", false, "base");
verify_displaystyle("msub_subscript", true, "subscript");
}, `msub element (${transform})`);
test(function() {
verify_displaystyle("msup_base", false, "base");
verify_displaystyle("msup_superscript", true, "superscript");
}, `msup element (${transform})`);
test(function() {
verify_displaystyle("msubsup_base", false, "base");
verify_displaystyle("msubsup_subscript", true, "subscript");
verify_displaystyle("msubsup_superscript", true, "superscript");
}, `msubsup element (${transform})`);
test(function() {
verify_displaystyle("munder_base", false, "base");
verify_displaystyle("munder_underscript", true, "underscript");
}, `munder element (${transform})`);
test(function() {
verify_displaystyle("mover_base", false, "base");
verify_displaystyle("mover_overscript", true, "overscript");
}, `mover element (${transform})`);
test(function() {
verify_displaystyle("munderover_base", false, "base");
verify_displaystyle("munderover_underscript", true, "underscript");
verify_displaystyle("munderover_overscript", true, "overscript");
}, `munderover element (${transform})`);
}
done();
}
</script>
</head>

3
tests/wpt/web-platform-tests/mathml/relations/css-styling/padding-border-margin/border-002.html
View file

@ -22,7 +22,6 @@
continue;
var style = "border-left: 30px solid; border-right: 40px solid; border-top: 50px solid; border-bottom: 60px solid;";
var styleRTL = `direction: rtl; ${style}`;
if (FragmentHelper.isEmpty(tag)) {
test(function() {
@ -44,7 +43,7 @@
}, `Border properties on ${tag}`);
test(function() {
var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
var s = compareSpaceWithAndWithoutStyle(tag, style, null, "rtl");
assert_approx_equals(s.left_delta, 30, epsilon, "left border");
assert_approx_equals(s.right_delta, 40, epsilon, "right border");
assert_approx_equals(s.top_delta, 50, epsilon, "top border");

4
tests/wpt/web-platform-tests/mathml/relations/css-styling/padding-border-margin/margin-001.html
View file

@ -73,8 +73,8 @@
assert_true(MathMLFeatureDetection.has_mspace());
assert_true(MathMLFeatureDetection.has_dir());
var s = measureSpaceAround("mrow-margin-logical-rtl")
assert_approx_equals(s.left, 20, epsilon, "left margin");
assert_approx_equals(s.right, 30, epsilon, "right margin");
assert_approx_equals(s.left, 30, epsilon, "left margin");
assert_approx_equals(s.right, 20, epsilon, "right margin");
assert_approx_equals(s.top, 40, epsilon, "top margin");
assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
var b = document.getElementById("mrow-margin-logical-rtl").

3
tests/wpt/web-platform-tests/mathml/relations/css-styling/padding-border-margin/margin-002.html
View file

@ -22,7 +22,6 @@
continue;
var style = "margin-left: 30px; margin-right: 40px; margin-top: 50px; margin-bottom: 60px;";
var styleRTL = `direction: rtl; ${style}`;
if (FragmentHelper.isEmpty(tag)) {
test(function() {
@ -46,7 +45,7 @@
}, `Margin properties on ${tag}`);
test(function() {
var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
var s = compareSpaceWithAndWithoutStyle(tag, style, null, "rtl");
assert_approx_equals(s.left_delta, 30, epsilon, "left margin");
assert_approx_equals(s.right_delta, 40, epsilon, "right margin");
assert_approx_equals(s.top_delta, 50, epsilon, "top margin");

3
tests/wpt/web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-002.html
View file

@ -22,7 +22,6 @@
continue;
var style = "padding-left: 30px; padding-right: 40px; padding-top: 50px; padding-bottom: 60px;";
var styleRTL = `direction: rtl; ${style}`;
if (FragmentHelper.isEmpty(tag)) {
test(function() {
@ -44,7 +43,7 @@
}, `Padding properties on ${tag}`);
test(function() {
var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
var s = compareSpaceWithAndWithoutStyle(tag, style, "rtl");
assert_approx_equals(s.left_delta, 30, epsilon, "left padding");
assert_approx_equals(s.right_delta, 40, epsilon, "right padding");
assert_approx_equals(s.top_delta, 50, epsilon, "top padding");

54
tests/wpt/web-platform-tests/mathml/relations/css-styling/writing-mode/writing-mode-001.html
View file

@ -18,11 +18,7 @@
function runTests() {
var reference = document.getElementById("horizontal-tb_ltr");
["horizontal-tb_rtl",
"vertical-lr_ltr",
"vertical-lr_rtl",
"vertical-rl_ltr",
"vertical-rl_rtl"].forEach(id => {
["horizontal-tb_rtl"].forEach(id => {
var element = document.getElementById(id);
test(function() {
@ -69,53 +65,5 @@
</mrow>
</math>
</p>
<p>
<math style="writing-mode: vertical-lr;">
<mrow id="vertical-lr_ltr">
<mspace style="background: blue"
width="20px" height="30px" depth="40px"></mspace>
<mspace style="background: black"
width="50px" depth="60px"></mspace>
<mspace style="background: yellow"
width="70px" height="80px"></mspace>
</mrow>
</math>
</p>
<p>
<math style="writing-mode: vertical-lr; direction: rtl;">
<mrow id="vertical-lr_rtl">
<mspace style="background: blue"
width="20px" height="30px" depth="40px"></mspace>
<mspace style="background: black"
width="50px" depth="60px"></mspace>
<mspace style="background: yellow"
width="70px" height="80px"></mspace>
</mrow>
</math>
</p>
<p>
<math style="writing-mode: vertical-rl;">
<mrow id="vertical-rl_ltr">
<mspace style="background: blue"
width="20px" height="30px" depth="40px"></mspace>
<mspace style="background: black"
width="50px" depth="60px"></mspace>
<mspace style="background: yellow"
width="70px" height="80px"></mspace>
</mrow>
</math>
</p>
<p>
<math style="writing-mode: vertical-rl; direction: rtl;">
<mrow id="vertical-rl_rtl">
<mspace style="background: blue"
width="20px" height="30px" depth="40px"></mspace>
<mspace style="background: black"
width="50px" depth="60px"></mspace>
<mspace style="background: yellow"
width="70px" height="80px"></mspace>
</mrow>
</math>
</p>
</body>
</html>

111
tests/wpt/web-platform-tests/mathml/relations/css-styling/writing-mode/writing-mode-001.tentative.html Normal file
View file

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>writing mode</title>
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
<meta name="assert" content="Verify CSS writing mode (writing-mode and directionproperties) for mrow.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/layout-comparison.js"></script>
<script>
var epsilon = 1;
setup({ explicit_done: true });
window.addEventListener("load", runTests);
function runTests() {
var reference = document.getElementById("horizontal-tb_ltr");
// These tests are kept in a separate tentative.html file until it is
// clear how to handle vertical math layout.
// See https://github.com/mathml-refresh/mathml/issues/18
["vertical-lr_ltr",
"vertical-lr_rtl",
"vertical-rl_ltr",
"vertical-rl_rtl"].forEach(id => {
var element = document.getElementById(id);
test(function() {
var style = window.getComputedStyle(element);
var writingMode = id.split("_");
assert_equals(style.getPropertyValue("writing-mode"),
writingMode[0], "writing-mode");
assert_equals(style.getPropertyValue("direction"),
writingMode[1], "direction");
}, `Inheritance of CSS writing-mode and direction (id='${id}')`);
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
compareLayout(element, reference, epsilon);
}, `Layout of mrow (id='${id}')`);
});
done();
}
</script>
</head>
<body>
<div id="log"></div>
<p>
<math>
<mrow id="horizontal-tb_ltr">
<mspace style="background: blue"
width="20px" height="30px" depth="40px"></mspace>
<mspace style="background: black"
width="50px" depth="60px"></mspace>
<mspace style="background: yellow"
width="70px" height="80px"></mspace>
</mrow>
</math>
</p>
<p>
<math style="writing-mode: vertical-lr;">
<mrow id="vertical-lr_ltr">
<mspace style="background: blue"
width="20px" height="30px" depth="40px"></mspace>
<mspace style="background: black"
width="50px" depth="60px"></mspace>
<mspace style="background: yellow"
width="70px" height="80px"></mspace>
</mrow>
</math>
</p>
<p>
<math style="writing-mode: vertical-lr; direction: rtl;">
<mrow id="vertical-lr_rtl">
<mspace style="background: blue"
width="20px" height="30px" depth="40px"></mspace>
<mspace style="background: black"
width="50px" depth="60px"></mspace>
<mspace style="background: yellow"
width="70px" height="80px"></mspace>
</mrow>
</math>
</p>
<p>
<math style="writing-mode: vertical-rl;">
<mrow id="vertical-rl_ltr">
<mspace style="background: blue"
width="20px" height="30px" depth="40px"></mspace>
<mspace style="background: black"
width="50px" depth="60px"></mspace>
<mspace style="background: yellow"
width="70px" height="80px"></mspace>
</mrow>
</math>
</p>
<p>
<math style="writing-mode: vertical-rl; direction: rtl;">
<mrow id="vertical-rl_rtl">
<mspace style="background: blue"
width="20px" height="30px" depth="40px"></mspace>
<mspace style="background: black"
width="50px" depth="60px"></mspace>
<mspace style="background: yellow"
width="70px" height="80px"></mspace>
</mrow>
</math>
</p>
</body>
</html>

6
tests/wpt/web-platform-tests/mathml/relations/css-styling/writing-mode/writing-mode-002.html
View file

@ -21,11 +21,7 @@
if (tag == "annotation" || tag == "annotation-xml")
continue; // These tags have display: none.
["horizontal-tb_rtl",
"vertical-lr_ltr",
"vertical-lr_rtl",
"vertical-rl_ltr",
"vertical-rl_rtl"].forEach(id => {
["horizontal-tb_rtl"].forEach(id => {
var writingMode = id.split("_");
var writingModeString = `writing-mode: ${writingMode[0]}; direction: ${writingMode[1]};`;

88
tests/wpt/web-platform-tests/mathml/relations/css-styling/writing-mode/writing-mode-002.tentative.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>writing mode</title>
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
<meta name="assert" content="Verify CSS writing mode (writing-mode and direction properties) for mrow.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/layout-comparison.js"></script>
<script src="/mathml/support/mathml-fragments.js"></script>
<script>
var epsilon = 1;
setup({ explicit_done: true });
window.addEventListener("load", runTests);
function runTests() {
for (tag in MathMLFragments) {
if (tag == "annotation" || tag == "annotation-xml")
continue; // These tags have display: none.
// These tests are kept in a separate tentative.html file until it is
// clear how to handle vertical math layout.
// See https://github.com/mathml-refresh/mathml/issues/18
["vertical-lr_ltr",
"vertical-lr_rtl",
"vertical-rl_ltr",
"vertical-rl_rtl"].forEach(id => {
var writingMode = id.split("_");
var writingModeString = `writing-mode: ${writingMode[0]}; direction: ${writingMode[1]};`;
document.body.insertAdjacentHTML("beforeend", `<div>\
<math>${MathMLFragments[tag]}</math>\
<math>${MathMLFragments[tag]}</math>\
</div>`);
var div = document.body.lastElementChild;
var styleMath = div.firstElementChild;
styleMath.setAttribute("style", writingModeString);
var styleElement = FragmentHelper.element(styleMath);
var referenceMath = div.lastElementChild;
var referenceElement = FragmentHelper.element(referenceMath);
[styleMath, referenceMath].forEach(math => {
Array.from(math.getElementsByClassName("mathml-container")).forEach(container => {
container.insertAdjacentHTML("beforeend", "\
<mspace style='background: blue'\
width='20px' height='30px' depth='40px'></mspace>\
<mspace style='background: black'\
width='50px' depth='60px'></mspace>\
<mspace style='background: yellow'\
width='70px' height='80px'></mspace>");
});
Array.from(math.getElementsByClassName("foreign-container")).forEach(container => {
container.insertAdjacentHTML("beforeend", "\
<span style='display: inline-block; background: lightblue;\
inline-size: 20px; block-size: 30px;\
vertical-align: bottom;'></span>\
<span style='display: inline-block; background: pink;\
inline-size: 40px; block-size: 50px;\
vertical-align: bottom;'></span>");
});
});
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
var style = window.getComputedStyle(styleElement);
assert_equals(style.getPropertyValue("writing-mode"),
writingMode[0], "writing-mode");
assert_equals(style.getPropertyValue("direction"),
writingMode[1], "direction");
compareLayout(styleElement, referenceElement, epsilon);
}, `Layout of ${tag} (${writingModeString})`);
div.style = "display: none;"; // Hide the div after testing.
});
}
done();
}
</script>
</head>
<body>
<div id="log"></div>
</body>
</html>

83
tests/wpt/web-platform-tests/mathml/relations/html5-tree/display-1.html
View file

@ -9,52 +9,55 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/attribute-values.js"></script>
<script>
function getBox(aId) {
return document.getElementById(aId).getBoundingClientRect();
}
window.addEventListener("DOMContentLoaded", function() {
var content = getBox("content");
for (transform in AttributeValueTransforms) {
TransformAttributeValues(transform, ["display", "displaystyle"]);
var content = getBox("content");
var before_block = getBox("before_block");
var mspace_block = getBox("mspace_block");
var after_block = getBox("after_block");
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
assert_approx_equals(before_block.left, content.left, 1,
"content before must be left aligned");
assert_approx_equals((mspace_block.left + mspace_block.right) / 2,
(content.left + content.right) / 2,
1,
"math must be centered.");
assert_approx_equals(after_block.left, content.left, 1,
"content before must be left aligned");
assert_less_than_equal(before_block.bottom, mspace_block.top,
"new line before math");
assert_less_than_equal(mspace_block.bottom, after_block.top,
"new line after math");
}, "Test display math");
var before_block = getBox("before_block");
var mspace_block = getBox("mspace_block");
var after_block = getBox("after_block");
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
assert_approx_equals(before_block.left, content.left, 1,
"content before must be left aligned");
assert_approx_equals((mspace_block.left + mspace_block.right) / 2,
(content.left + content.right) / 2,
1,
"math must be centered.");
assert_approx_equals(after_block.left, content.left, 1,
"content before must be left aligned");
assert_less_than_equal(before_block.bottom, mspace_block.top,
"new line before math");
assert_less_than_equal(mspace_block.bottom, after_block.top,
"new line after math");
}, `Test display math ${transform}`);
var before_inline = getBox("before_inline");
var mspace_inline = getBox("mspace_inline");
var after_inline = getBox("after_inline");
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
assert_approx_equals((before_inline.top + before_inline.bottom) / 2,
(mspace_inline.top + mspace_inline.bottom) / 2,
1,
"content before must be horizontally aligned with math");
assert_approx_equals((after_inline.top + after_inline.bottom) / 2,
(mspace_inline.top + mspace_inline.bottom) / 2,
1,
"content after must be horizontally aligned with math");
assert_less_than_equal(before_inline.right, mspace_inline.left,
"content before must be on the left of math");
assert_less_than_equal(mspace_inline.right, after_inline.left,
"content after must be on the right of math");
}, "Test inline math");
done();
var before_inline = getBox("before_inline");
var mspace_inline = getBox("mspace_inline");
var after_inline = getBox("after_inline");
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
assert_approx_equals((before_inline.top + before_inline.bottom) / 2,
(mspace_inline.top + mspace_inline.bottom) / 2,
1,
"content before must be horizontally aligned with math");
assert_approx_equals((after_inline.top + after_inline.bottom) / 2,
(mspace_inline.top + mspace_inline.bottom) / 2,
1,
"content after must be horizontally aligned with math");
assert_less_than_equal(before_inline.right, mspace_inline.left,
"content before must be on the left of math");
assert_less_than_equal(mspace_inline.right, after_inline.left,
"content after must be on the right of math");
}, `Test inline math ${transform}`);
}
done();
});
</script>
<style>
@ -69,7 +72,7 @@
background: black;
}
mspace {
background: black;
background: blue;
}
</style>
</head>

59
tests/wpt/web-platform-tests/mathml/relations/html5-tree/integration-point-4.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MathML inside foreignObject</title>
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#html-and-svg">
<meta name="assert" content="Verify that MathML can be used inside a foreignObject element.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script>
setup({ explicit_done: true });
window.addEventListener("DOMContentLoaded", function() {
var scale = 2;
var epsilon = 1;
var mfrac = document.getElementById("mfrac");
var num = mfrac.firstElementChild.getBoundingClientRect();
var denom = mfrac.lastElementChild.getBoundingClientRect();
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());
// The values of width and height are inverted (because of the
// rotation) and multiplied by the scale factor.
assert_approx_equals(num.height, 30 * scale, epsilon, "numerator width");
assert_approx_equals(num.width, 40 * scale, epsilon, "numerator height");
assert_approx_equals(denom.height, 50 * scale, epsilon, "numerator width");
assert_approx_equals(denom.width, 60 * scale, epsilon, "numerator height");
}, "mspace layout in SVG foreignObject");
test(function() {
// The horizontal/vertical metrics are inverted (because of the
// rotation) and multiplied by the scale factor.
assert_true(MathMLFeatureDetection.has_mfrac());
assert_greater_than_equal(num.right - denom.left,
(40 + 60) * scale,
"numerator is on the right of denominator");
assert_approx_equals((num.top + num.bottom) / 2,
(denom.top + denom.bottom) / 2,
epsilon, "numerator and denominator are vertically aligned");
}, "mfrac layout in SVG foreignObject");
done();
});
</script>
</head>
<body>
<div id="log"></div>
<svg width="400px" height="400px">
<g transform="rotate(90, 200, 200) scale(2)">
<foreignObject width="400px" height="400px"
requiredExtensions="http://www.w3.org/1998/Math/MathML">
<math>
<mfrac id="mfrac">
<mspace width="30px" height="40px" style="background: cyan"></mspace>
<mspace width="50px" height="60px" style="background: yellow"></mspace>
</mfrac>
</math>
</foreignObject>
</g>
</svg>
</body>
</html>