mirror of
https://github.com/servo/servo.git
synced 2025-08-15 02:15:33 +01:00
Update web-platform-tests to revision cfada7e6cb379699fa94c7ed8fcb97082327e10c
This commit is contained in:
WPT Sync Bot
parent
87e7e3d429
commit
06b00da16b
179 changed files with 6103 additions and 1186 deletions
|
|
@ -31,24 +31,44 @@
|
|||
assert_equals(style.getPropertyValue("direction"), "ltr", "no attribute");
|
||||
element.setAttribute("dir", "rtl");
|
||||
assert_equals(style.getPropertyValue("direction"), "rtl", "attribute specified");
|
||||
element.setAttribute("dir", "RtL");
|
||||
assert_equals(style.getPropertyValue("direction"), "rtl", "case insensitive");
|
||||
}, `dir on the ${tag} element is mapped to CSS direction`)
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 255)", "no attribute");
|
||||
assert_equals(style.getPropertyValue("color"),
|
||||
tag === "merror" ?
|
||||
"rgb(255, 0, 0)" : "rgb(0, 0, 255)",
|
||||
"no attribute");
|
||||
element.setAttribute("mathcolor", "black");
|
||||
assert_equals(style.getPropertyValue("color"), "rgb(0, 0, 0)", "attribute specified");
|
||||
// The color names are case-insensitive.
|
||||
// See https://www.w3.org/TR/css-color-3/#html4
|
||||
element.setAttribute("mathcolor", "GrEeN");
|
||||
assert_equals(style.getPropertyValue("color"), "rgb(0, 128, 0)", "case insensitive");
|
||||
}, `mathcolor on the ${tag} element is mapped to CSS color`);
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgba(0, 0, 0, 0)", "no attribute");
|
||||
assert_equals(style.getPropertyValue("background-color"),
|
||||
tag === "merror" ?
|
||||
"rgb(255, 255, 224)" : "rgba(0, 0, 0, 0)",
|
||||
"no attribute");
|
||||
element.setAttribute("mathbackground", "lightblue");
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgb(173, 216, 230)", "attribute specified");
|
||||
// The color names are case-insensitive.
|
||||
// See https://www.w3.org/TR/css-color-3/#html4
|
||||
element.setAttribute("mathbackground", "YeLlOw");
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgb(255, 255, 0)", "case insensitive");
|
||||
}, `mathbackground on the ${tag} element is mapped to CSS background-color`);
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("font-size"), "50px", "no attribute");
|
||||
element.setAttribute("mathsize", "20px");
|
||||
assert_equals(style.getPropertyValue("font-size"), "20px", "attribute specified");
|
||||
// unit identifiers are ASCII case-insensitive.
|
||||
// https://www.w3.org/TR/css-values-3/#typedef-dimension
|
||||
element.setAttribute("mathsize", "30Px");
|
||||
assert_equals(style.getPropertyValue("font-size"), "30px", "case insensitive");
|
||||
}, `mathsize on the ${tag} element is mapped to CSS font-size`);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -22,9 +22,13 @@
|
|||
var style = window.getComputedStyle(element);
|
||||
|
||||
test(function() {
|
||||
assert_equals(style.getPropertyValue("text-transform"), "none", "no attribute");
|
||||
assert_equals(style.getPropertyValue("text-transform"),
|
||||
tag === "mi" ? "math-auto" : "none",
|
||||
"no attribute");
|
||||
element.setAttribute("mathvariant", "fraktur");
|
||||
assert_equals(style.getPropertyValue("text-transform"), "math-fraktur", "attribute specified");
|
||||
element.setAttribute("mathvariant", "DoUbLe-StRuCk");
|
||||
assert_equals(style.getPropertyValue("text-transform"), "math-double-struck", "case insensitive");
|
||||
}, `mathvariant on the ${tag} element is mapped to CSS text-transform`)
|
||||
|
||||
test(function() {
|
||||
|
|
@ -37,6 +41,8 @@
|
|||
assert_equals(style.getPropertyValue("math-style"), "inline", "no attribute");
|
||||
element.setAttribute("displaystyle", "true");
|
||||
assert_equals(style.getPropertyValue("math-style"), "display", "attribute specified");
|
||||
element.setAttribute("displaystyle", "TrUe");
|
||||
assert_equals(style.getPropertyValue("math-style"), "display", "case insensitive");
|
||||
}, `displaystyle on the ${tag} element is mapped to CSS math-style`);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -23,14 +23,11 @@
|
|||
setup({ explicit_done: true });
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 5;
|
||||
function verify_displaystyle(element, displaystyle, description) {
|
||||
if (typeof element === "string")
|
||||
element = document.getElementById(element);
|
||||
var elementSize = element.getBoundingClientRect().height;
|
||||
if (displaystyle)
|
||||
assert_approx_equals(elementSize, 5000 * emToPx, epsilon, description);
|
||||
else
|
||||
assert_approx_equals(elementSize, 1000 * emToPx, epsilon, description);
|
||||
function verify_displaystyle(elementId, displaystyle, description) {
|
||||
var expectedSize = (displaystyle ? 5000 : 1000) * emToPx;
|
||||
var elementSize = document.getElementById(elementId).
|
||||
getBoundingClientRect().height;
|
||||
assert_approx_equals(elementSize, expectedSize, epsilon, description);
|
||||
}
|
||||
|
||||
window.addEventListener("load", function() {
|
||||
|
|
@ -45,6 +42,8 @@
|
|||
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");
|
||||
|
|
@ -101,6 +100,12 @@
|
|||
<math display="block"><mo id="math_block">⫿</mo></math>
|
||||
<math displaystyle="false"><mo id="math_false">⫿</mo></math>
|
||||
<math displaystyle="true"><mo id="math_true">⫿</mo></math>
|
||||
<math display="block" displaystyle="false">
|
||||
<mo id="math_block_false">⫿</mo>
|
||||
</math>
|
||||
<math display="block" displaystyle="true">
|
||||
<mo id="math_block_true">⫿</mo>
|
||||
</math>
|
||||
<math><mstyle displaystyle="false"><mo id="mstyle_false">⫿</mo></mstyle></math>
|
||||
<math><mstyle displaystyle="true"><mo id="mstyle_true">⫿</mo></mstyle></math>
|
||||
<math displaystyle="true"><mtable><mtr><mtd><mo id="mtable_default">⫿</mo></mtd></mtr></mtable></math>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,206 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>displaystyle</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
|
||||
<meta name="assert" content="Verify interaction between automatic displaystyle and specified displaystyle on descendants.">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: TestFont;
|
||||
src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
|
||||
}
|
||||
math, math * {
|
||||
font-family: TestFont;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
|
||||
var epsilon = 5;
|
||||
function verify_displaystyle(elementId, displaystyle, description) {
|
||||
var expectedSize = (displaystyle ? 5000 : 1000) * emToPx;
|
||||
var elementSize = document.getElementById(elementId).
|
||||
getBoundingClientRect().height;
|
||||
assert_approx_equals(elementSize, expectedSize, epsilon, description);
|
||||
}
|
||||
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
|
||||
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();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<math displaystyle="true">
|
||||
<mtable>
|
||||
<mtr>
|
||||
<mtd>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="cell_false">⫿</mo>
|
||||
</mstyle>
|
||||
</mtd>
|
||||
<mtd>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="cell_true">⫿</mo>
|
||||
</mstyle>
|
||||
</mtd>
|
||||
</mtr>
|
||||
</mtable>
|
||||
</math>
|
||||
<math>
|
||||
<mfrac>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mfrac_numerator">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mfrac_denominator">⫿</mo>
|
||||
</mstyle>
|
||||
</mfrac>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<mroot>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="mroot_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mroot_index">⫿</mo>
|
||||
</mstyle>
|
||||
</mroot>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<msub>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="msub_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="msub_subscript">⫿</mo>
|
||||
</mstyle>
|
||||
</msub>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<msup>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="msup_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="msup_superscript">⫿</mo>
|
||||
</mstyle>
|
||||
</msup>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<msubsup>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="msubsup_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="msubsup_subscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="msubsup_superscript">⫿</mo>
|
||||
</mstyle>
|
||||
</msubsup>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<mmultiscripts>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="mmultiscripts_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mmultiscripts_subscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mmultiscripts_superscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mprescripts/>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mmultiscripts_presubscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mmultiscripts_presuperscript">⫿</mo>
|
||||
</mstyle>
|
||||
</mmultiscripts>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<munder>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="munder_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="munder_underscript">⫿</mo>
|
||||
</mstyle>
|
||||
</munder>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<mover>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="mover_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="mover_overscript">⫿</mo>
|
||||
</mstyle>
|
||||
</mover>
|
||||
</math>
|
||||
<math displaystyle="true">
|
||||
<munderover>
|
||||
<mstyle displaystyle="false">
|
||||
<mo id="munderover_base">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="munderover_underscript">⫿</mo>
|
||||
</mstyle>
|
||||
<mstyle displaystyle="true">
|
||||
<mo id="munderover_overscript">⫿</mo>
|
||||
</mstyle>
|
||||
</munderover>
|
||||
</math>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Legacy mathsize values</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see four "A" of equal size:</p>
|
||||
<math>
|
||||
<mtext>A</mtext>
|
||||
<mtext>A</mtext>
|
||||
<mtext>A</mtext>
|
||||
<mtext>A</mtext>
|
||||
</math>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Legacy mathsize values</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#css-styling">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#legacy-mathml-style-attributes">
|
||||
<meta name="assert" content="Verify that legacy values for mathsize have no effect.">
|
||||
<link rel="match" href="mathsize-attribute-legacy-values-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see four "A" of equal size:</p>
|
||||
<math>
|
||||
<mtext>A</mtext>
|
||||
<mtext mathsize="small">A</mtext>
|
||||
<mtext mathsize="medium">A</mtext>
|
||||
<mtext mathsize="big">A</mtext>
|
||||
</math>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,7 +7,8 @@
|
|||
<meta name="assert" content="Verify that border is taken into account.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/feature-detection.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -16,35 +17,83 @@
|
|||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-border")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Border properties on mrow");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-border-rtl")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Border properties on mrow (rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-border-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 20, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 20, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height");
|
||||
}, "Border properties on mrow (shorthand)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-border-logical")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-logical").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Border properties on mrow (logical)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-border-logical-rtl")
|
||||
assert_approx_equals(s.left, 30, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-logical-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Border properties on mrow (logical, rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-border-logical-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left border");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right border");
|
||||
assert_approx_equals(s.top, 30, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom, 30, epsilon, "bottom border");
|
||||
var b = document.getElementById("mrow-border-logical-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height");
|
||||
}, "Border properties on mrow (logical, shorthand)");
|
||||
|
||||
done();
|
||||
|
|
@ -66,6 +115,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-border-rtl"
|
||||
style="border-left: 20px solid transparent;
|
||||
border-right: 30px solid transparent;
|
||||
border-top: 40px solid transparent;
|
||||
border-bottom: 50px solid transparent;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
@ -89,6 +151,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-border-logical-rtl"
|
||||
style="border-inline-start: 20px solid transparent;
|
||||
border-inline-end: 30px solid transparent;
|
||||
border-block-start: 40px solid transparent;
|
||||
border-block-end: 50px solid transparent;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -22,12 +22,13 @@
|
|||
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() {
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 30 + 40, epsilon, "left/right border");
|
||||
assert_approx_equals(s.height_delta, 50 + 60, epsilon, "top/bottom border");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right border");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom border");
|
||||
}, `Border properties on ${tag}`);
|
||||
continue;
|
||||
}
|
||||
|
|
@ -38,7 +39,19 @@
|
|||
assert_approx_equals(s.right_delta, 40, epsilon, "right border");
|
||||
assert_approx_equals(s.top_delta, 50, epsilon, "top border");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom border");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
|
||||
}, `Border properties on ${tag}`);
|
||||
|
||||
test(function() {
|
||||
var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
|
||||
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");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom border");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
|
||||
}, `Border properties on ${tag} (rtl)`);
|
||||
}
|
||||
|
||||
done();
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
function spaceBetween(childBox, parentBox) {
|
||||
return {
|
||||
left: childBox.left - parentBox.left,
|
||||
right: parentBox.right - childBox.right,
|
||||
top: childBox.top - parentBox.top,
|
||||
bottom: parentBox.bottom - childBox.bottom
|
||||
};
|
||||
}
|
||||
|
||||
function measureSpaceAround(id) {
|
||||
var mrow = document.getElementById(id);
|
||||
var mrowBox = mrow.getBoundingClientRect();
|
||||
var parentBox = mrow.parentNode.getBoundingClientRect();
|
||||
var childBox = mrow.firstElementChild.getBoundingClientRect();
|
||||
return spaceBetween(childBox, parentBox);
|
||||
}
|
||||
|
||||
function compareSpaceWithAndWithoutStyle(tag, style) {
|
||||
if (!FragmentHelper.isValidChildOfMrow(tag) ||
|
||||
FragmentHelper.isEmpty(tag))
|
||||
throw `Invalid argument: ${tag}`;
|
||||
|
||||
document.body.insertAdjacentHTML("beforeend", `<div>\
|
||||
<math>${MathMLFragments[tag]}</math>\
|
||||
<math>${MathMLFragments[tag]}</math>\
|
||||
</div>`);
|
||||
var div = document.body.lastElementChild;
|
||||
|
||||
var styleMath = div.firstElementChild;
|
||||
var styleElement = FragmentHelper.element(styleMath);
|
||||
styleElement.setAttribute("style", style);
|
||||
var styleChild = FragmentHelper.forceNonEmptyElement(styleElement);
|
||||
var styleBox = styleMath.getBoundingClientRect();
|
||||
var styleChildBox = styleChild.getBoundingClientRect();
|
||||
var styleSpace = spaceBetween(styleChildBox, styleBox);
|
||||
|
||||
var noStyleMath = div.lastElementChild;
|
||||
var noStyleElement = FragmentHelper.element(noStyleMath);
|
||||
var noStyleChild = FragmentHelper.forceNonEmptyElement(noStyleElement);
|
||||
var noStyleBox = noStyleMath.getBoundingClientRect();
|
||||
var noStyleChildBox = noStyleChild.getBoundingClientRect();
|
||||
var noStyleSpace = spaceBetween(noStyleChildBox, noStyleBox);
|
||||
|
||||
div.style = "display: none;"; // Hide the div after measurement.
|
||||
|
||||
return {
|
||||
left_delta: styleSpace.left - noStyleSpace.left,
|
||||
right_delta: styleSpace.right - noStyleSpace.right,
|
||||
top_delta: styleSpace.top - noStyleSpace.top,
|
||||
bottom_delta: styleSpace.bottom - noStyleSpace.bottom
|
||||
};
|
||||
}
|
||||
|
||||
function compareSizeWithAndWithoutStyle(tag, style) {
|
||||
if (!FragmentHelper.isValidChildOfMrow(tag))
|
||||
throw `Invalid argument: ${tag}`;
|
||||
|
||||
document.body.insertAdjacentHTML("beforeend", `<div>\
|
||||
<math>${MathMLFragments[tag]}</math>\
|
||||
<math>${MathMLFragments[tag]}</math>\
|
||||
</div>`);
|
||||
var div = document.body.lastElementChild;
|
||||
|
||||
var styleMath = div.firstElementChild;
|
||||
var styleElement = FragmentHelper.element(styleMath);
|
||||
styleElement.setAttribute("style", style);
|
||||
var styleBox = styleMath.getBoundingClientRect();
|
||||
|
||||
var noStyleMath = div.lastElementChild;
|
||||
var noStyleElement = FragmentHelper.element(noStyleMath);
|
||||
var noStyleBox = noStyleMath.getBoundingClientRect();
|
||||
|
||||
div.style = "display: none;"; // Hide the div after measurement.
|
||||
|
||||
return {
|
||||
width_delta: styleBox.width - noStyleBox.width,
|
||||
height_delta: styleBox.height - noStyleBox.height
|
||||
};
|
||||
};
|
||||
|
|
@ -7,7 +7,8 @@
|
|||
<meta name="assert" content="Verify that margin is taken into account.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/feature-detection.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -16,35 +17,83 @@
|
|||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-margin")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 30, 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").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-margin-rtl")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 30, 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-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-margin-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right margin");
|
||||
assert_approx_equals(s.top, 20, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom, 20, epsilon, "bottom margin");
|
||||
var b = document.getElementById("mrow-margin-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (shorthand)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-margin-logical")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 30, 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").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (logical)");
|
||||
|
||||
test(function() {
|
||||
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.top, 40, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom margin");
|
||||
var b = document.getElementById("mrow-margin-logical-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (logical, rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-margin-logical-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left margin");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right margin");
|
||||
assert_approx_equals(s.top, 30, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom, 30, epsilon, "bottom margin");
|
||||
var b = document.getElementById("mrow-margin-logical-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 50, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 50, epsilon, "element height");
|
||||
}, "Margin properties on mrow (logical, shorthand)");
|
||||
|
||||
done();
|
||||
|
|
@ -66,6 +115,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-margin-rtl"
|
||||
style="margin-left: 20px;
|
||||
margin-right: 30px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 50px;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
@ -89,6 +151,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-margin-logical-rtl"
|
||||
style="margin-inline-start: 20px;
|
||||
margin-inline-end: 30px;
|
||||
margin-block-start: 40px;
|
||||
margin-block-end: 50px;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -22,12 +22,15 @@
|
|||
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() {
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 30 + 40, epsilon, "left/right margin");
|
||||
assert_approx_equals(s.height_delta, 50 + 60, epsilon, "top/bottom margin");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `Margin properties on ${tag}`);
|
||||
continue;
|
||||
}
|
||||
|
|
@ -38,7 +41,31 @@
|
|||
assert_approx_equals(s.right_delta, 40, epsilon, "right margin");
|
||||
assert_approx_equals(s.top_delta, 50, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `Margin properties on ${tag}`);
|
||||
|
||||
test(function() {
|
||||
var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
|
||||
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");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom margin");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `Margin properties on ${tag} (rtl)`);
|
||||
|
||||
test(function() {
|
||||
// Apply the same margin style on the parent mrow.
|
||||
// The margins are not collapsed so they should be added twice.
|
||||
var s = compareSpaceWithAndWithoutStyle(tag, style, style);
|
||||
assert_approx_equals(s.left_delta, 30 * 2, epsilon, "left margin");
|
||||
assert_approx_equals(s.right_delta, 40 * 2, epsilon, "right margin");
|
||||
assert_approx_equals(s.top_delta, 50 * 2, epsilon, "top margin");
|
||||
assert_approx_equals(s.bottom_delta, 60 * 2, epsilon, "bottom margin");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `Margin properties on ${tag} (no margin-collapsing)`);
|
||||
}
|
||||
|
||||
done();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
<meta name="assert" content="Verify that padding is taken into account.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/feature-detection.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -16,35 +17,83 @@
|
|||
|
||||
function runTests() {
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-padding")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Padding properties on mrow");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-padding-rtl")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Padding properties on mrow (rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-padding-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 20, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 20, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 20 + 50 + 20, epsilon, "element height");
|
||||
}, "Padding properties on mrow (shorthand)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-padding-logical")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 30, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-logical").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Padding properties on mrow (logical)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
assert_true(MathMLFeatureDetection.has_dir());
|
||||
var s = measureSpaceAround("mrow-padding-logical-rtl")
|
||||
assert_approx_equals(s.left, 30, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 40, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 50, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-logical-rtl").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 30, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 40 + 50 + 50, epsilon, "element height");
|
||||
}, "Padding properties on mrow (logical, rtl)");
|
||||
|
||||
test(function() {
|
||||
assert_true(MathMLFeatureDetection.has_mspace());
|
||||
var s = measureSpaceAround("mrow-padding-logical-shorthand")
|
||||
assert_approx_equals(s.left, 20, epsilon, "left padding");
|
||||
assert_approx_equals(s.right, 20, epsilon, "right padding");
|
||||
assert_approx_equals(s.top, 30, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom, 30, epsilon, "bottom padding");
|
||||
var b = document.getElementById("mrow-padding-logical-shorthand").
|
||||
getBoundingClientRect();
|
||||
assert_approx_equals(b.width, 20 + 50 + 20, epsilon, "element width");
|
||||
assert_approx_equals(b.height, 30 + 50 + 30, epsilon, "element height");
|
||||
}, "Padding properties on mrow (logical, shorthand)");
|
||||
|
||||
done();
|
||||
|
|
@ -66,6 +115,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-padding-rtl"
|
||||
style="padding-left: 20px;
|
||||
padding-right: 30px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 50px;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
@ -89,6 +151,19 @@
|
|||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math dir="rtl">
|
||||
<mrow>
|
||||
<mrow id="mrow-padding-logical-rtl"
|
||||
style="padding-inline-start: 20px;
|
||||
padding-inline-end: 30px;
|
||||
padding-block-start: 40px;
|
||||
padding-block-end: 50px;">
|
||||
<mspace width="50px" height="50px"></mspace>
|
||||
</mrow>
|
||||
</mrow>
|
||||
</math>
|
||||
</p>
|
||||
<p>
|
||||
<math>
|
||||
<mrow>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
|
|
@ -22,12 +22,13 @@
|
|||
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() {
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 30 + 40, epsilon, "left/right padding");
|
||||
assert_approx_equals(s.height_delta, 50 + 60, epsilon, "top/bottom padding");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "left/right padding");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "top/bottom padding");
|
||||
}, `Padding properties on ${tag}`);
|
||||
continue;
|
||||
}
|
||||
|
|
@ -38,7 +39,19 @@
|
|||
assert_approx_equals(s.right_delta, 40, epsilon, "right padding");
|
||||
assert_approx_equals(s.top_delta, 50, epsilon, "top padding");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
|
||||
}, `Padding properties on ${tag}`);
|
||||
|
||||
test(function() {
|
||||
var s = compareSpaceWithAndWithoutStyle(tag, styleRTL);
|
||||
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");
|
||||
assert_approx_equals(s.bottom_delta, 60, epsilon, "bottom padding");
|
||||
assert_approx_equals(s.element_width_delta, 30 + 40, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 50 + 60, epsilon, "element height");
|
||||
}, `Padding properties on ${tag} (rtl)`);
|
||||
}
|
||||
|
||||
done();
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>padding</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
|
||||
<meta name="assert" content="Verify that padding is taken into account.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="helper.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
|
||||
for (tag in MathMLFragments) {
|
||||
if (!FragmentHelper.isEmpty(tag))
|
||||
continue;
|
||||
|
||||
test(function() {
|
||||
var style = "padding-left: 10px; padding-right: 20px; padding-top: 15px; padding-bottom: 25px;";
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 10 + 20, epsilon, "padding left/right");
|
||||
assert_approx_equals(s.height_delta, 15 + 25, epsilon, "padding top/bottom");
|
||||
}, `Padding properties on ${tag}`);
|
||||
}
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Padding/border/margin</title>
|
||||
<body>
|
||||
<p>This test passes if you see a purple square of side 100px, surrounded by a
|
||||
10px blue padding, surrounded by a 10px blue/yellow dashed border, itself
|
||||
surrounded by a 10px pink margin.</p>
|
||||
</div>
|
||||
<div style="background: pink; position: absolute; left: 10px; top: 3em;">
|
||||
<div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
|
||||
<div style="width: 100px; height: 100px; background: purple;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Padding/border/margin</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-of-mrow">
|
||||
<link rel="match" href="padding-border-margin-001-ref.html"/>
|
||||
<meta name="assert" content="Verify visual rendering of padding/border/margin on the mrow element.">
|
||||
<body>
|
||||
<p>This test passes if you see a purple square of side 100px, surrounded by a
|
||||
10px blue padding, surrounded by a 10px blue/yellow dashed border, itself
|
||||
surrounded by a 10px pink margin.</p>
|
||||
<div style="background: pink; position: absolute; left: 10px; top: 3em;">
|
||||
<math>
|
||||
<mrow style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
|
||||
<mspace width="100px" height="100px" style="background: purple;"></mspace>
|
||||
</mrow>
|
||||
</math>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>width, height, inline-size and block-size</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
|
||||
<meta name="assert" content="Verify that width, height, inline-size and block-size properties are ignored.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/mathml/support/mathml-fragments.js"></script>
|
||||
<script src="/mathml/support/box-comparison.js"></script>
|
||||
<script>
|
||||
var epsilon = 1;
|
||||
|
||||
setup({ explicit_done: true });
|
||||
window.addEventListener("load", runTests);
|
||||
|
||||
function runTests() {
|
||||
|
||||
for (tag in MathMLFragments) {
|
||||
if (!FragmentHelper.isValidChildOfMrow(tag) || tag === "mtable")
|
||||
continue;
|
||||
|
||||
test(function() {
|
||||
var style = "width: 500px; height: 400px;";
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 0, epsilon, "width");
|
||||
assert_approx_equals(s.height_delta, 0, epsilon, "height");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `width and height properties on ${tag}`);
|
||||
|
||||
test(function() {
|
||||
var style = "inline-size: 500px; block-size: 400px;";
|
||||
var s = compareSizeWithAndWithoutStyle(tag, style);
|
||||
assert_approx_equals(s.width_delta, 0, epsilon, "width");
|
||||
assert_approx_equals(s.height_delta, 0, epsilon, "height");
|
||||
assert_approx_equals(s.element_width_delta, 0, epsilon, "element width");
|
||||
assert_approx_equals(s.element_height_delta, 0, epsilon, "element height");
|
||||
}, `inline-size and block-size properties on ${tag}`);
|
||||
}
|
||||
|
||||
done();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<!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");
|
||||
|
||||
["horizontal-tb_rtl",
|
||||
"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="direction: rtl;">
|
||||
<mrow id="horizontal-tb_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-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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!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.
|
||||
|
||||
["horizontal-tb_rtl",
|
||||
"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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue