| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>border</title> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms"> |
| <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="/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-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(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="log"></div> |
| <p> |
| <math> |
| <mrow> |
| <mrow id="mrow-border" |
| 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 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> |
| <mrow id="mrow-border-shorthand" |
| style="border: 20px solid transparent;"> |
| <mspace width="50px" height="50px"></mspace> |
| </mrow> |
| </mrow> |
| </math> |
| </p> |
| <p> |
| <math> |
| <mrow> |
| <mrow id="mrow-border-logical" |
| 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 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> |
| <mrow id="mrow-border-logical-shorthand" |
| style="border-inline: 20px solid transparent; |
| border-block: 30px solid transparent;"> |
| <mspace width="50px" height="50px"></mspace> |
| </mrow> |
| </mrow> |
| </math> |
| </p> |
| </body> |
| </html> |