width-height-001.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 48 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /mathml/relations/css-styling/width-height-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>width, height, inline-size and block-size</title>

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

<meta name="assert" content="Verify that width, height, inline-size and block-size properties are ignored.">

<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>

<style>

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

  merror { border: 0; }

  mfrac { padding: 0; }

</style>

<script>

  var epsilon = 1;

  setup({ explicit_done: true });

  window.addEventListener("load", runTests);

  function runTests() {

    for (tag in MathMLFragments) {

        if (!FragmentHelper.isValidChildOfMrow(tag))

            continue;

        document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><math><mrow>${MathMLFragments[tag]}</mrow></math></div>`);

        let div = document.body.lastElementChild;

        let element = FragmentHelper.element(div.firstElementChild);

        test(function() {

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

            var style = `width: 500px; height: 400px;`;

            element.setAttribute("style", style);

            let box = element.getBoundingClientRect();

            assert_approx_equals(box.width, 500, epsilon, "width");

            assert_approx_equals(box.height, 400, epsilon, "height");

        }, `width and height properties on ${tag}`);

        test(function() {

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

            var style = `inline-size: 600px; block-size: 700px;`;

            element.setAttribute("style", style);

            let box = element.getBoundingClientRect();

            assert_approx_equals(box.width, 600, epsilon, "width");

            assert_approx_equals(box.height, 700, epsilon, "height");

        }, `inline-size and block-size properties on ${tag}`);

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

    done();

</script>

</head>

<body>

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

</body>

</html>