diff options
Diffstat (limited to 'testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html')
-rw-r--r-- | testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html new file mode 100644 index 0000000000..eabb6f46c7 --- /dev/null +++ b/testing/web-platform/tests/mathml/relations/css-styling/padding-border-margin/margin-001.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>margin</title> +<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> +<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="/mathml/support/feature-detection.js"></script> +<script src="/mathml/support/box-comparison.js"></script> +<script> + var epsilon = 1; + + setup({ explicit_done: true }); + window.addEventListener("load", runTests); + + 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, 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"). + 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(); + } +</script> +</head> +<body> + <div id="log"></div> + <p> + <math> + <mrow> + <mrow id="mrow-margin" + 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 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> + <mrow id="mrow-margin-shorthand" + style="margin: 20px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> + <p> + <math> + <mrow> + <mrow id="mrow-margin-logical" + 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 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> + <mrow id="mrow-margin-logical-shorthand" + style="margin-inline: 20px; + margin-block: 30px;"> + <mspace width="50px" height="50px"></mspace> + </mrow> + </mrow> + </math> + </p> +</body> +</html> |