not-participating-to-parent-layout.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 45 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /mathml/relations/css-styling/not-participating-to-parent-layout.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Elements not participating to the layout of their parent</title>

<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">

<meta name="assert" content="Verify that display: none and out-of-flow positioned elements do not participate to layout of their parent.">

<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 (!FragmentHelper.isValidChildOfMrow(tag) ||

            FragmentHelper.isEmpty(tag))

            continue;

        ["display: none",

         "display: contents",

         "position: absolute",

         "position: fixed"

        ].forEach(style => {

            document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;">\

<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\

<div style="display: inline-block"><math>${MathMLFragments[tag]}</math></div>\

</div>`);

            var div = document.body.lastElementChild;

            var elementContainer = div.firstElementChild;

            var elementContainerWidth = elementContainer.getBoundingClientRect().width;

            var element = FragmentHelper.element(elementContainer);

            if (style === "display: contents" &&

                !element.classList.contains("mathml-container")) {

                // A "display: contents" MathML child is not participating to

                // parent layout because its computed style is "display: none".

                // If we cannot append a MathML child then skip that test.

                return;

            FragmentHelper.forceNonEmptyElement(element);

            var allowInvalid = true;

            var child = FragmentHelper.appendChild(element, allowInvalid);

            child.setAttribute("style", style);

            var referenceContainer = div.lastElementChild;

            var referenceContainerWidth = referenceContainer.getBoundingClientRect().width;

            var reference = FragmentHelper.element(referenceContainer);

            FragmentHelper.forceNonEmptyElement(reference);

            test(function() {

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

                assert_approx_equals(elementContainerWidth, referenceContainerWidth, epsilon);

            }, `${tag} preferred width calculation is not affected by children with "${style}" style`);

            test(function() {

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

                compareLayout(element, reference, epsilon);

            }, `${tag} layout is not affected by children with "${style}" style`);

            div.style = "display: none;"; // Hide the div after measurement.

});

    done();

</script>

</head>

<body>

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

</body>

</html>