mrow-fallback-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /mathml/presentation-markup/mrow/mrow-fallback-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Test mrow fallback for some MathML elements (preferred logical widths)</title>

<link rel="help" href="https://w3c.github.io/mathml-core/#script-and-limit-schemata">

<meta name="assert" content="Verify that invalid markup fallbacks to mrow behaviour when computing preferred logical widths.">

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

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

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

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

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

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

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

<style>

  /* Revert style specified in the UA style sheet that changes box size. */

  mfrac { padding-inline: 0; }

</style>

<script>

  setup({ explicit_done: true });

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

  function wrapShrink(el) {

    let wrapper = document.createElement("div");

    let math = FragmentHelper.createElement("math");

    wrapper.style.display = "inline-block";

    math.appendChild(el);

    wrapper.appendChild(math);

    return wrapper;

  function runTests() {

    let container = document.getElementById("container");

    let invalidMarkup = generateInvalidMarkup();

    const epsilon = 1;

    for (let math of invalidMarkup.children) {

      let element = math.firstElementChild;

      let reference = element.nextElementSibling;

      let description = element.dataset.description;

      // generateInvalidMarkup() puts both the element and the reference in the same <math>.

      // To test preferred logical widths, we need to separate them out under different divs.

      let elementWrapper = wrapShrink(element);

      let referenceWrapper = wrapShrink(reference);

      container.append(elementWrapper, referenceWrapper);

      test(function() {

        assert_approx_equals(elementWrapper.getBoundingClientRect().width, referenceWrapper.getBoundingClientRect().width, epsilon);

      }, `Invalid <${element.tagName}> should fallback to mrow behaviour when computing preferred logical widths (${description})`);

    done();

</script>

</head>

<body>

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

  <div id="container"></div>

</body>

</html>