margin-002.html - mozsearch

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /mathml/relations/css-styling/padding-border-margin/margin-002.html - WPT Dashboard Interop Dashboard

<!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.">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

  math {

    font: 25px/1 Ahem;

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/mathml/support/feature-detection.js"></script>

<script src="/mathml/support/mathml-fragments.js"></script>

<script src="/mathml/support/box-comparison.js"></script>

<script src="/mathml/support/fonts.js"></script>

<script>

  var epsilon = 2;

  setup({ explicit_done: true });

  window.addEventListener("load", () => { loadAllFonts().then(runTests); });

  function runTests() {

    for (tag in MathMLFragments) {

        if (!FragmentHelper.isValidChildOfMrow(tag))

            continue;

        var style = "margin-left: 30px; margin-right: 40px;  margin-top: 50px; margin-bottom: 60px;";

        if (FragmentHelper.isEmpty(tag)) {

            test(function() {

                assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);

                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");

                assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");

            }, `Margin properties on ${tag}`);

            continue;

        test(function() {

            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);

            var s = compareSpaceWithAndWithoutStyle(tag, style);

            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");

            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");

        }, `Margin properties on ${tag}`);

        test(function() {

            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);

            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");

            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");

            assert_approx_equals(s.preferred_width_delta, 30 + 40, epsilon, "preferred width");

        }, `Margin properties on ${tag} (rtl)`);

        test(function() {

            assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);

            // 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");

            assert_approx_equals(s.preferred_width_delta, (30 + 40) * 2, epsilon, "preferred width");

        }, `Margin properties on ${tag} (no margin-collapsing)`);

    done();

</script>

</head>

<body>

  <div id="log"></div>

</body>

</html>