2019-08-28  Rob Buis  <rbuis@igalia.com>

        Implement MathMLIDL / HTMLOrForeignElement

        https://bugs.webkit.org/show_bug.cgi?id=200470

        Reviewed by NOBODY (OOPS!).

        Tests: imported/w3c/web-platform-tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative.html

               imported/w3c/web-platform-tests/mathml/relations/html5-tree/css-inline-style-interface.tentative.html

               imported/w3c/web-platform-tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html

               imported/w3c/web-platform-tests/mathml/relations/html5-tree/math-global-event-handlers.tentative.html

        * CMakeLists.txt:

        * DerivedSources-input.xcfilelist:

        * DerivedSources-output.xcfilelist:

        * DerivedSources.make:

        * Sources.txt:

        * WebCore.xcodeproj/project.pbxproj:

        * bindings/js/JSElementCustom.cpp:

        (WebCore::createNewElementWrapper):  Expose MathML JS.

        * bindings/js/JSNodeCustom.cpp:

        (WebCore::createWrapperInline):  Expose MathML JS.

        * dom/StaticRange.h: Unified build fix.

        * html/HTMLElement.idl:

        * html/HTMLOrForeignElement.idl: Added.

        * mathml/MathMLElement.cpp:

        (WebCore::MathMLElement::parseAttribute):

        * mathml/MathMLElement.idl: Added.

        * mathml/MathMLMathElement.idl: Added.

        * mathml/mathtags.in:

        * svg/SVGElement.idl:

    html/HTMLOrForeignElement.idl

    mathml/MathMLElement.idl

    mathml/MathMLMathElement.idl

$(PROJECT_DIR)/html/HTMLOrForeignElement.idl

$(PROJECT_DIR)/mathml/MathMLElement.idl

$(PROJECT_DIR)/mathml/MathMLMathElement.idl

$(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/JSHTMLOrForeignElement.cpp

$(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/JSHTMLOrForeignElement.h

$(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/JSMathMLElement.cpp

$(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/JSMathMLElement.h

$(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/JSMathMLMathElement.cpp

$(BUILT_PRODUCTS_DIR)/DerivedSources/WebCore/JSMathMLMathElement.h

    $(WebCore)/mathml \

    $(WebCore)/html/HTMLOrForeignElement.idl \

    $(WebCore)/mathml/MathMLElement.idl \

    $(WebCore)/mathml/MathMLMathElement.idl \

    $(WebCore)/mathml \

JSMathMLElementWrapperFactory.cpp

JSSVGElementWrapperFactory.cpp

JSHTMLOrForeignElement.cpp

JSMathMLElement.cpp

JSMathMLMathElement.cpp

		AA11C04B23169689009D9831 /* MathMLMathElement.idl */ = {isa = PBXFileReference; lastKnownFileType = text; path = MathMLMathElement.idl; sourceTree = "<group>"; };

		AA11C04D2316973D009D9831 /* JSMathMLMathElement.cpp */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; path = JSMathMLMathElement.cpp; sourceTree = "<group>"; };

		AA11C04E23169782009D9831 /* JSMathMLMathElement.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = JSMathMLMathElement.h; sourceTree = "<group>"; };

		AA61BB5223167473002FE25A /* JSMathMLElementWrapperFactory.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; name = JSMathMLElementWrapperFactory.cpp; path = DerivedSources/WebCore/JSMathMLElementWrapperFactory.cpp; sourceTree = BUILT_PRODUCTS_DIR; };

		AA61BB5423167474002FE25A /* JSMathMLElementWrapperFactory.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = JSMathMLElementWrapperFactory.h; path = DerivedSources/WebCore/JSMathMLElementWrapperFactory.h; sourceTree = BUILT_PRODUCTS_DIR; };

		AACC83D42316568700EB6BF5 /* MathMLElement.idl */ = {isa = PBXFileReference; lastKnownFileType = text; path = MathMLElement.idl; sourceTree = "<group>"; };

		AACC83D62316569E00EB6BF5 /* HTMLOrForeignElement.idl */ = {isa = PBXFileReference; lastKnownFileType = text; path = HTMLOrForeignElement.idl; sourceTree = "<group>"; };

		AACC83D72316576A00EB6BF5 /* JSHTMLOrForeignElement.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = JSHTMLOrForeignElement.h; sourceTree = "<group>"; };

		AACC83D82316576B00EB6BF5 /* JSHTMLOrForeignElement.cpp */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; path = JSHTMLOrForeignElement.cpp; sourceTree = "<group>"; };

		AACC83DA231657EC00EB6BF5 /* JSMathMLElement.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = JSMathMLElement.h; sourceTree = "<group>"; };

		AACC83DB2316583200EB6BF5 /* JSMathMLElement.cpp */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; path = JSMathMLElement.cpp; sourceTree = "<group>"; };

				AACC83D92316578600EB6BF5 /* MATHML */,

				AA61BB5223167473002FE25A /* JSMathMLElementWrapperFactory.cpp */,

				AA61BB5423167474002FE25A /* JSMathMLElementWrapperFactory.h */,

				AACC83D62316569E00EB6BF5 /* HTMLOrForeignElement.idl */,

				AACC83D82316576B00EB6BF5 /* JSHTMLOrForeignElement.cpp */,

				AACC83D72316576A00EB6BF5 /* JSHTMLOrForeignElement.h */,

		AACC83D92316578600EB6BF5 /* MATHML */ = {

			isa = PBXGroup;

			children = (

				AACC83DB2316583200EB6BF5 /* JSMathMLElement.cpp */,

				AACC83DA231657EC00EB6BF5 /* JSMathMLElement.h */,

				AA11C04D2316973D009D9831 /* JSMathMLMathElement.cpp */,

				AA11C04E23169782009D9831 /* JSMathMLMathElement.h */,

			);

			name = MATHML;

			sourceTree = "<group>";

		};

				AACC83D42316568700EB6BF5 /* MathMLElement.idl */,

				AA11C04B23169689009D9831 /* MathMLMathElement.idl */,

#include "JSMathMLElementWrapperFactory.h"

#include "MathMLElement.h"

    if (is<MathMLElement>(element))

        return createJSMathMLWrapper(globalObject, static_reference_cast<MathMLElement>(WTFMove(element)));

#include "JSMathMLElementWrapperFactory.h"

#include "MathMLElement.h"

            else if (is<MathMLElement>(node))

                wrapper = createJSMathMLWrapper(globalObject, static_reference_cast<MathMLElement>(WTFMove(node)));

#include "ExceptionOr.h"

HTMLElement implements HTMLOrForeignElement;

/*

 * Copyright (C) 2019 Igalia S.L. All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without

 * modification, are permitted provided that the following conditions

 * are met:

 * 1. Redistributions of source code must retain the above copyright

 *    notice, this list of conditions and the following disclaimer.

 * 2. Redistributions in binary form must reproduce the above copyright

 *    notice, this list of conditions and the following disclaimer in the

 *    documentation and/or other materials provided with the distribution.

 *

 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY

 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE

 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR

 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,

 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR

 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY

 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

 */

// https://html.spec.whatwg.org/multipage/dom.html#htmlorsvgelement

// https://github.com/whatwg/html/issues/4702

[

    NoInterfaceObject,

] interface HTMLOrForeignElement {

  readonly attribute DOMStringMap dataset; // FIXME: Should be [SameObject].

  [CEReactions, ImplementedAs=tabIndexForBindings] attribute long tabIndex;

  void focus();

  void blur();

};

#include "HTMLElement.h"

#include "HTMLNames.h"

/*

 * Copyright (C) 2019 Igalia S.L. All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without

 * modification, are permitted provided that the following conditions

 * are met:

 * 1. Redistributions of source code must retain the above copyright

 *    notice, this list of conditions and the following disclaimer.

 * 2. Redistributions in binary form must reproduce the above copyright

 *    notice, this list of conditions and the following disclaimer in the

 *    documentation and/or other materials provided with the distribution.

 *

 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY

 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE

 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR

 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,

 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR

 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY

 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

 */

[

    JSGenerateToNativeObject,

] interface MathMLElement : Element { };

MathMLElement implements ElementCSSInlineStyle;

MathMLElement implements GlobalEventHandlers;

MathMLElement implements DocumentAndElementEventHandlers;

MathMLElement implements HTMLOrForeignElement;

/*

 * Copyright (C) 2019 Igalia S.L. All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without

 * modification, are permitted provided that the following conditions

 * are met:

 * 1. Redistributions of source code must retain the above copyright

 *    notice, this list of conditions and the following disclaimer.

 * 2. Redistributions in binary form must reproduce the above copyright

 *    notice, this list of conditions and the following disclaimer in the

 *    documentation and/or other materials provided with the distribution.

 *

 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY

 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE

 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR

 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,

 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR

 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY

 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

 */

interface MathMLMathElement : MathMLElement { };

fallbackJSInterfaceName="MathMLElement"

SVGElement implements HTMLOrForeignElement;

2019-08-28  Rob Buis  <rbuis@igalia.com>

        Implement MathMLIDL / HTMLOrForeignElement

        https://bugs.webkit.org/show_bug.cgi?id=200470

        Reviewed by NOBODY (OOPS!).

        Adjust test expectations to new HTMLOrForeignElement interface.

        * js/dom/dom-static-property-for-in-iteration-expected.txt:

        * platform/mac-wk2/js/dom/dom-static-property-for-in-iteration-expected.txt:

        * platform/mac/inspector/model/remote-object-dom-expected.txt:

2019-08-28  Rob Buis  <rbuis@igalia.com>

        Implement MathMLIDL / HTMLOrForeignElement

        https://bugs.webkit.org/show_bug.cgi?id=200470

        Reviewed by NOBODY (OOPS!).

        Add tests for functionality exposed by HTMLOrForeignElement.

        * web-platform-tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative-expected.txt: Added.

        * web-platform-tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative.html: Added.

        * web-platform-tests/mathml/relations/html5-tree/css-inline-style-interface.tentative-expected.txt: Added.

        * web-platform-tests/mathml/relations/html5-tree/css-inline-style-interface.tentative.html: Added.

        * web-platform-tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative-expected.txt: Added.

        * web-platform-tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html: Added.

        * web-platform-tests/mathml/relations/html5-tree/math-global-event-handlers.tentative-expected.txt: Added.

        * web-platform-tests/mathml/relations/html5-tree/math-global-event-handlers.tentative.html: Added.

        * web-platform-tests/mathml/relations/html5-tree/w3c-import.log:

        * web-platform-tests/mathml/support/attribute-values.js: Added.

        (AttributeValueTransforms.lowercase):

        (AttributeValueTransforms.uppercase):

        (AttributeValueTransforms.alternate_case):

        (TransformAttributeValues):

        * web-platform-tests/mathml/support/box-comparison.js: Added.

        (spaceBetween):

        (measureSpaceAround):

        (compareSpaceWithAndWithoutStyle):

        (compareSizeWithAndWithoutStyle):

        * web-platform-tests/mathml/support/feature-detection.js: Added.

        (MathMLFeatureDetection.has_mspace):

        (MathMLFeatureDetection.has_operator_spacing):

        (MathMLFeatureDetection.has_mfrac):

        (MathMLFeatureDetection.has_msqrt):

        (MathMLFeatureDetection.has_menclose):

        (MathMLFeatureDetection.has_dir):

        (MathMLFeatureDetection.ensure_for_match_reftest):

        * web-platform-tests/mathml/support/layout-comparison.js: Added.

        (getWritingMode):

        (compareSize):

        (participateToParentLayout):

        (childrenParticipatingToLayout):

        (compareLayout):

        * web-platform-tests/mathml/support/mathml-fragments.js: Added.

        (FragmentHelper.createElement):

        (FragmentHelper.isValidChildOfMrow):

        (FragmentHelper.isEmpty):

        (FragmentHelper.element):

        (FragmentHelper.appendChild):

        (FragmentHelper.forceNonEmptyElement):

        * web-platform-tests/mathml/support/w3c-import.log: Added.

PASS math.addEventListener for copy 

FAIL oncopy: the content attribute must be compiled into a function as the corresponding property assert_true: Calling the handler must run the code expected true got undefined

PASS math.addEventListener for cut 

FAIL oncut: the content attribute must be compiled into a function as the corresponding property assert_true: Calling the handler must run the code expected true got undefined

PASS math.addEventListener for paste 

FAIL onpaste: the content attribute must be compiled into a function as the corresponding property assert_true: Calling the handler must run the code expected true got undefined

E

<!DOCTYPE html>

<title>DocumentAndElementEventHandlers / clipboard events for MathML</title>

<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"/>

<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#documentandelementeventhandlers"/>

<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-copy"/>

<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-cut"/>

<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-paste"/>

<meta

  name="assert"

  content="MathMLElements incorporate a functional DocumentAndElementEventHandlers interface"

/>

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

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

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

<math

  oncopy="document.copyHappened = true"

  oncut="document.cutHappened = true"

  onpaste="document.pasteHappened = true"

>

  <mi>E</mi>

</math>

<script>

  const EVENTS = ["copy", "cut", "paste"];

  const el = document.querySelector("math");

  function addEventListenerTest(name) {

    async_test(test => {

      el.addEventListener(

        name,

        test.step_func_done(e => {

          assert_true(

            true,

            "MathML Elements should be able to receive ${name} events"

          );

        })

      );

      const event = new ClipboardEvent(name, {

        bubbles: true,

        cancellable: true

      });

      el.dispatchEvent(event);

    }, `math.addEventListener for ${name}`);

  }

  function evaluatedHandlerTest(name) {

    const handlerName = "on" + name;

    test(() => {

      const compiledHandler = el[handlerName];

      assert_equals(

        typeof compiledHandler,

        "function",

        `The ${handlerName} property must be a function`

      );

      compiledHandler();

      assert_true(

        window[name + "Happened"],

        "Calling the handler must run the code"

      );

    }, `${handlerName}: the content attribute must be compiled into a function as the corresponding property`);

  }

  EVENTS.forEach(name => {

    addEventListenerTest(name);

    evaluatedHandlerTest(name);

  });

</script>

This tests the presence and functionality of features of the `ElementCSSInlineStyle` interface for MathMLElements 

PASS The <math> element style property should be present and be functional. 

PASS The annotation's style property should be present and be functional. 

PASS The annotation-xml's style property should be present and be functional. 

PASS The maction's style property should be present and be functional. 

PASS The menclose's style property should be present and be functional. 

PASS The merror's style property should be present and be functional. 

PASS The mfrac's style property should be present and be functional. 

PASS The mi's style property should be present and be functional. 

PASS The mmultiscripts's style property should be present and be functional. 

PASS The mn's style property should be present and be functional. 

PASS The mo's style property should be present and be functional. 

PASS The mover's style property should be present and be functional. 

PASS The mpadded's style property should be present and be functional. 

PASS The mphantom's style property should be present and be functional. 

PASS The mprescripts's style property should be present and be functional. 

PASS The mroot's style property should be present and be functional. 

PASS The mrow's style property should be present and be functional. 

PASS The ms's style property should be present and be functional. 

PASS The mspace's style property should be present and be functional. 

PASS The msqrt's style property should be present and be functional. 

PASS The mstyle's style property should be present and be functional. 

PASS The msub's style property should be present and be functional. 

PASS The msubsup's style property should be present and be functional. 

PASS The msup's style property should be present and be functional. 

PASS The mtable's style property should be present and be functional. 

PASS The mtd's style property should be present and be functional. 

PASS The mtext's style property should be present and be functional. 

PASS The mtr's style property should be present and be functional. 

PASS The munder's style property should be present and be functional. 

PASS The munderover's style property should be present and be functional. 

PASS The none's style property should be present and be functional. 

PASS The semantics's style property should be present and be functional. 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>MathML 'ElementCSSInlineStyle` Mixin Tests</title>

    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"/>

    <style>

      math * {

        background-color: red;

      }

    </style>

    <meta

      name="assert"

      content="MathMLElements incorporate a functional ElementCSSInlineStyle interface"

    />

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

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

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

  </head>

  <body>

    <span

      >This tests the presence and functionality of features of the

      `ElementCSSInlineStyle` interface for MathMLElements</span

    >

    <math></math>

    <script>

      let mathEl = document.querySelector("math");

      test(function() {

        mathEl.style.backgroundColor = "lime";

        assert_equals(

          getComputedStyle(mathEl).backgroundColor,

          "rgb(0, 255, 0)",

          "The applied background should be green."

        );

      }, `The <math> element style property should be present and be functional.`);

      Object.keys(MathMLFragments).forEach(elName => {

        mathEl.innerHTML = MathMLFragments[elName];

        test(function() {

          let el = FragmentHelper.element(mathEl);

          el.style.backgroundColor = "blue";

          assert_equals(

            getComputedStyle(el).backgroundColor,

            "rgb(0, 0, 255)",

            "The applied background should be blue."

          );

        }, `The ${elName}'s style property should be present and be functional.`);

      });

    </script>

  </body>

</html>

This tests the presence and functionality of features of `HTMLOrForeignElement` (currently `HTMLOrSVGElement`) 

E

PASS MathML elements should have a .dataset 

PASS The dataset property should be present and be functional. 

PASS MathML elements should have a tabIndex property 

PASS MathML elements should work with focus predictably 

PASS MathML elements should work with blur predictably 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>MathML 'HTMLOrForeignElement` Mixin Tests</title>

    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"/>

    <style>

      mi {

        background-color: red;

      }

      :focus {

        background-color: rgb(0, 255, 0);

      }

    </style>

    <meta

      name="assert"

      content="MathMLElements incorporate a functional HTMLOrForeignElement interface"

    />

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

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

  </head>

  <body tabindex="-1">

    <span tabindex="-1"

      >This tests the presence and functionality of features of

      `HTMLOrForeignElement` (currently `HTMLOrSVGElement`)</span

    >

    <math tabindex="-1">

      <mi>E</mi>

    </math>

  </body>

  <script>

    // spot check the functionality of several interfaces

    let el = document.querySelector("mi");

    let mathEl = document.querySelector("math");

    // this really belongs in

    // https://github.com/web-platform-tests/wpt/blob/master/html/dom/elements/global-attributes/dataset.html

    // it is here tentatively

    test(function() {

      var mathml = document.createElementNS(

        "http://www.w3.org/1998/Math/MathML",

        "math"

      );

      assert_true(mathml.dataset instanceof DOMStringMap);

    }, "MathML elements should have a .dataset");

    // exercise some basic tests on .dataset

    test(function() {

      assert_equals(

        Object.keys(el.dataset).toString(),

        "",

        "The .dataset property should be present"

      );

      el.setAttribute("data-one", "x");

      el.setAttribute("data-two", "y");

      assert_equals(

        el.dataset.one,

        "x",

        '.one should be "x" after setting the data-one attribute'

      );

      assert_equals(

        el.dataset.two,

        "y",

        '.one should be "y" after setting the data-two attribute'

      );

      el.dataset.one = "o";

      assert_equals(

        el.getAttribute("data-one"),

        "o",

        'the data-one attribute should reflect a change to dataset.one and contain "o"'

      );

    }, "The dataset property should be present and be functional.");

    test(function() {

      assert_equals(mathEl.tabIndex, -1);

    }, "MathML elements should have a tabIndex property");

    promise_test(function() {

      function focus() {

        mathEl.focus();

        return Promise.resolve();

      }

      return focus().then(() => {

        assert_equals(

          getComputedStyle(mathEl).backgroundColor,

          "rgb(0, 255, 0)",

          "MathML elements with tabindex=-1 should be programmatically focusable and apply :focus"

        );

      });

    }, "MathML elements should work with focus predictably");

    promise_test(function() {

      function blur() {

        mathEl.blur();

        return Promise.resolve();

      }

      return blur().then(() => {

        assert_equals(

          getComputedStyle(mathEl).backgroundColor,

          "rgba(0, 0, 0, 0)",

          "MathML elements with tabindex=-1 be programmatically blur() able"

        );

      });

    }, "MathML elements should work with blur predictably");

  </script>

</html>

PASS onabort: must be on the appropriate locations for GlobalEventHandlers 

PASS onabort: the default value must be null 

PASS onabort: the content attribute must be compiled into a function as the corresponding property 

PASS onabort: dispatching an Event at a <math> element must trigger element.onabort 

FAIL onauxclick: must be on the appropriate locations for GlobalEventHandlers assert_true: MathMLElement has an own property named "onauxclick" expected true got false

FAIL onauxclick: the default value must be null assert_equals: The default value of the property is null for a MathMLElement instance expected (object) null but got (undefined) undefined

FAIL onauxclick: the content attribute must be compiled into a function as the corresponding property assert_equals: The onauxclick property must be a function expected "function" but got "undefined"

PASS onauxclick: dispatching an Event at a <math> element must trigger element.onauxclick 

PASS onblur: must be on the appropriate locations for GlobalEventHandlers 

PASS onblur: the default value must be null 

PASS onblur: the content attribute must be compiled into a function as the corresponding property 

PASS onblur: dispatching an Event at a <math> element must trigger element.onblur 

FAIL oncancel: must be on the appropriate locations for GlobalEventHandlers assert_true: MathMLElement has an own property named "oncancel" expected true got false

FAIL oncancel: the default value must be null assert_equals: The default value of the property is null for a MathMLElement instance expected (object) null but got (undefined) undefined

FAIL oncancel: the content attribute must be compiled into a function as the corresponding property assert_equals: The oncancel property must be a function expected "function" but got "undefined"

PASS oncancel: dispatching an Event at a <math> element must trigger element.oncancel 

PASS oncanplay: must be on the appropriate locations for GlobalEventHandlers 

PASS oncanplay: the default value must be null 

PASS oncanplay: the content attribute must be compiled into a function as the corresponding property 

PASS oncanplay: dispatching an Event at a <math> element must trigger element.oncanplay 

PASS oncanplaythrough: must be on the appropriate locations for GlobalEventHandlers 

PASS oncanplaythrough: the default value must be null 

PASS oncanplaythrough: the content attribute must be compiled into a function as the corresponding property 

PASS oncanplaythrough: dispatching an Event at a <math> element must trigger element.oncanplaythrough 

PASS onchange: must be on the appropriate locations for GlobalEventHandlers 

PASS onchange: the default value must be null 

PASS onchange: the content attribute must be compiled into a function as the corresponding property 

PASS onchange: dispatching an Event at a <math> element must trigger element.onchange 

PASS onclick: must be on the appropriate locations for GlobalEventHandlers 

PASS onclick: the default value must be null 

PASS onclick: the content attribute must be compiled into a function as the corresponding property 

PASS onclick: dispatching an Event at a <math> element must trigger element.onclick 

FAIL onclose: must be on the appropriate locations for GlobalEventHandlers assert_true: MathMLElement has an own property named "onclose" expected true got false

FAIL onclose: the default value must be null assert_equals: The default value of the property is null for a MathMLElement instance expected (object) null but got (undefined) undefined

FAIL onclose: the content attribute must be compiled into a function as the corresponding property assert_equals: The onclose property must be a function expected "function" but got "undefined"

PASS onclose: dispatching an Event at a <math> element must trigger element.onclose 

PASS oncontextmenu: must be on the appropriate locations for GlobalEventHandlers 

PASS oncontextmenu: the default value must be null 

PASS oncontextmenu: the content attribute must be compiled into a function as the corresponding property 

PASS oncontextmenu: dispatching an Event at a <math> element must trigger element.oncontextmenu 

PASS oncuechange: must be on the appropriate locations for GlobalEventHandlers 

PASS oncuechange: the default value must be null 

FAIL oncuechange: the content attribute must be compiled into a function as the corresponding property assert_equals: The oncuechange property must be a function expected "function" but got "object"

PASS oncuechange: dispatching an Event at a <math> element must trigger element.oncuechange 

PASS ondblclick: must be on the appropriate locations for GlobalEventHandlers 

PASS ondblclick: the default value must be null 

PASS ondblclick: the content attribute must be compiled into a function as the corresponding property 

PASS ondblclick: dispatching an Event at a <math> element must trigger element.ondblclick 

PASS ondrag: must be on the appropriate locations for GlobalEventHandlers 

PASS ondrag: the default value must be null 

PASS ondrag: the content attribute must be compiled into a function as the corresponding property 

PASS ondrag: dispatching an Event at a <math> element must trigger element.ondrag 

PASS ondragend: must be on the appropriate locations for GlobalEventHandlers 

PASS ondragend: the default value must be null 

PASS ondragend: the content attribute must be compiled into a function as the corresponding property 

PASS ondragend: dispatching an Event at a <math> element must trigger element.ondragend 

PASS ondragenter: must be on the appropriate locations for GlobalEventHandlers 

PASS ondragenter: the default value must be null 

PASS ondragenter: the content attribute must be compiled into a function as the corresponding property 

PASS ondragenter: dispatching an Event at a <math> element must trigger element.ondragenter 

FAIL ondragexit: must be on the appropriate locations for GlobalEventHandlers assert_true: MathMLElement has an own property named "ondragexit" expected true got false

FAIL ondragexit: the default value must be null assert_equals: The default value of the property is null for a MathMLElement instance expected (object) null but got (undefined) undefined

FAIL ondragexit: the content attribute must be compiled into a function as the corresponding property assert_equals: The ondragexit property must be a function expected "function" but got "undefined"

PASS ondragexit: dispatching an Event at a <math> element must trigger element.ondragexit 

PASS ondragleave: must be on the appropriate locations for GlobalEventHandlers 

PASS ondragleave: the default value must be null 

PASS ondragleave: the content attribute must be compiled into a function as the corresponding property 

PASS ondragleave: dispatching an Event at a <math> element must trigger element.ondragleave 

PASS ondragover: must be on the appropriate locations for GlobalEventHandlers 

PASS ondragover: the default value must be null 

PASS ondragover: the content attribute must be compiled into a function as the corresponding property 

PASS ondragover: dispatching an Event at a <math> element must trigger element.ondragover 

PASS ondragstart: must be on the appropriate locations for GlobalEventHandlers 

PASS ondragstart: the default value must be null 

PASS ondragstart: the content attribute must be compiled into a function as the corresponding property 

PASS ondragstart: dispatching an Event at a <math> element must trigger element.ondragstart 

PASS ondrop: must be on the appropriate locations for GlobalEventHandlers 

PASS ondrop: the default value must be null 

PASS ondrop: the content attribute must be compiled into a function as the corresponding property 

PASS ondrop: dispatching an Event at a <math> element must trigger element.ondrop 

PASS ondurationchange: must be on the appropriate locations for GlobalEventHandlers 

PASS ondurationchange: the default value must be null 

PASS ondurationchange: the content attribute must be compiled into a function as the corresponding property 

PASS ondurationchange: dispatching an Event at a <math> element must trigger element.ondurationchange 

PASS onemptied: must be on the appropriate locations for GlobalEventHandlers 

PASS onemptied: the default value must be null 

PASS onemptied: the content attribute must be compiled into a function as the corresponding property 

PASS onemptied: dispatching an Event at a <math> element must trigger element.onemptied 

PASS onended: must be on the appropriate locations for GlobalEventHandlers 

PASS onended: the default value must be null 

PASS onended: the content attribute must be compiled into a function as the corresponding property 

PASS onended: dispatching an Event at a <math> element must trigger element.onended 

PASS onfocus: must be on the appropriate locations for GlobalEventHandlers 

PASS onfocus: the default value must be null 

PASS onfocus: the content attribute must be compiled into a function as the corresponding property 

PASS onfocus: dispatching an Event at a <math> element must trigger element.onfocus 

PASS oninput: must be on the appropriate locations for GlobalEventHandlers 

PASS oninput: the default value must be null 

PASS oninput: the content attribute must be compiled into a function as the corresponding property 

PASS oninput: dispatching an Event at a <math> element must trigger element.oninput 

PASS oninvalid: must be on the appropriate locations for GlobalEventHandlers 

PASS oninvalid: the default value must be null 

PASS oninvalid: the content attribute must be compiled into a function as the corresponding property 

PASS oninvalid: dispatching an Event at a <math> element must trigger element.oninvalid 

PASS onkeydown: must be on the appropriate locations for GlobalEventHandlers 

PASS onkeydown: the default value must be null 

PASS onkeydown: the content attribute must be compiled into a function as the corresponding property 

PASS onkeydown: dispatching an Event at a <math> element must trigger element.onkeydown 

PASS onkeypress: must be on the appropriate locations for GlobalEventHandlers 

PASS onkeypress: the default value must be null 

PASS onkeypress: the content attribute must be compiled into a function as the corresponding property 

PASS onkeypress: dispatching an Event at a <math> element must trigger element.onkeypress 

PASS onkeyup: must be on the appropriate locations for GlobalEventHandlers 

PASS onkeyup: the default value must be null 

PASS onkeyup: the content attribute must be compiled into a function as the corresponding property 

PASS onkeyup: dispatching an Event at a <math> element must trigger element.onkeyup 

PASS onload: must be on the appropriate locations for GlobalEventHandlers 

PASS onload: the default value must be null 

PASS onload: the content attribute must be compiled into a function as the corresponding property 

PASS onload: dispatching an Event at a <math> element must trigger element.onload 

PASS onloadeddata: must be on the appropriate locations for GlobalEventHandlers 

PASS onloadeddata: the default value must be null 

PASS onloadeddata: the content attribute must be compiled into a function as the corresponding property 

PASS onloadeddata: dispatching an Event at a <math> element must trigger element.onloadeddata 

PASS onloadedmetadata: must be on the appropriate locations for GlobalEventHandlers 

PASS onloadedmetadata: the default value must be null 

PASS onloadedmetadata: the content attribute must be compiled into a function as the corresponding property 

PASS onloadedmetadata: dispatching an Event at a <math> element must trigger element.onloadedmetadata 

FAIL onloadend: must be on the appropriate locations for GlobalEventHandlers assert_true: MathMLElement has an own property named "onloadend" expected true got false

FAIL onloadend: the default value must be null assert_equals: The default value of the property is null for a MathMLElement instance expected (object) null but got (undefined) undefined

FAIL onloadend: the content attribute must be compiled into a function as the corresponding property assert_equals: The onloadend property must be a function expected "function" but got "undefined"

PASS onloadend: dispatching an Event at a <math> element must trigger element.onloadend 

PASS onloadstart: must be on the appropriate locations for GlobalEventHandlers 

PASS onloadstart: the default value must be null 

PASS onloadstart: the content attribute must be compiled into a function as the corresponding property 

PASS onloadstart: dispatching an Event at a <math> element must trigger element.onloadstart 

PASS onmousedown: must be on the appropriate locations for GlobalEventHandlers 

PASS onmousedown: the default value must be null 

PASS onmousedown: the content attribute must be compiled into a function as the corresponding property 

PASS onmousedown: dispatching an Event at a <math> element must trigger element.onmousedown 

PASS onmouseenter: must be on the appropriate locations for GlobalEventHandlers 

PASS onmouseenter: the default value must be null 

PASS onmouseenter: the content attribute must be compiled into a function as the corresponding property 

PASS onmouseenter: dispatching an Event at a <math> element must trigger element.onmouseenter 

PASS onmouseleave: must be on the appropriate locations for GlobalEventHandlers 

PASS onmouseleave: the default value must be null 

PASS onmouseleave: the content attribute must be compiled into a function as the corresponding property 

PASS onmouseleave: dispatching an Event at a <math> element must trigger element.onmouseleave 

PASS onmousemove: must be on the appropriate locations for GlobalEventHandlers 

PASS onmousemove: the default value must be null 

PASS onmousemove: the content attribute must be compiled into a function as the corresponding property 

PASS onmousemove: dispatching an Event at a <math> element must trigger element.onmousemove 

PASS onmouseout: must be on the appropriate locations for GlobalEventHandlers 

PASS onmouseout: the default value must be null 

PASS onmouseout: the content attribute must be compiled into a function as the corresponding property 

PASS onmouseout: dispatching an Event at a <math> element must trigger element.onmouseout 

PASS onmouseover: must be on the appropriate locations for GlobalEventHandlers 

PASS onmouseover: the default value must be null 

PASS onmouseover: the content attribute must be compiled into a function as the corresponding property 

PASS onmouseover: dispatching an Event at a <math> element must trigger element.onmouseover 

PASS onmouseup: must be on the appropriate locations for GlobalEventHandlers 

PASS onmouseup: the default value must be null 

PASS onmouseup: the content attribute must be compiled into a function as the corresponding property 

PASS onmouseup: dispatching an Event at a <math> element must trigger element.onmouseup 

PASS onwheel: must be on the appropriate locations for GlobalEventHandlers 

PASS onwheel: the default value must be null 

PASS onwheel: the content attribute must be compiled into a function as the corresponding property 

PASS onwheel: dispatching an Event at a <math> element must trigger element.onwheel 

PASS onpause: must be on the appropriate locations for GlobalEventHandlers 

PASS onpause: the default value must be null 

PASS onpause: the content attribute must be compiled into a function as the corresponding property 

PASS onpause: dispatching an Event at a <math> element must trigger element.onpause 

PASS onplay: must be on the appropriate locations for GlobalEventHandlers 

PASS onplay: the default value must be null 

PASS onplay: the content attribute must be compiled into a function as the corresponding property 

PASS onplay: dispatching an Event at a <math> element must trigger element.onplay 

PASS onplaying: must be on the appropriate locations for GlobalEventHandlers 

PASS onplaying: the default value must be null 

PASS onplaying: the content attribute must be compiled into a function as the corresponding property 

PASS onplaying: dispatching an Event at a <math> element must trigger element.onplaying 

PASS onprogress: must be on the appropriate locations for GlobalEventHandlers 

PASS onprogress: the default value must be null 

PASS onprogress: the content attribute must be compiled into a function as the corresponding property 

PASS onprogress: dispatching an Event at a <math> element must trigger element.onprogress 

PASS onratechange: must be on the appropriate locations for GlobalEventHandlers 

PASS onratechange: the default value must be null 

PASS onratechange: the content attribute must be compiled into a function as the corresponding property 

PASS onratechange: dispatching an Event at a <math> element must trigger element.onratechange 

PASS onreset: must be on the appropriate locations for GlobalEventHandlers 

PASS onreset: the default value must be null 

PASS onreset: the content attribute must be compiled into a function as the corresponding property 

PASS onreset: dispatching an Event at a <math> element must trigger element.onreset 

PASS onresize: must be on the appropriate locations for GlobalEventHandlers 

PASS onresize: the default value must be null 

PASS onresize: the content attribute must be compiled into a function as the corresponding property 

PASS onresize: dispatching an Event at a <math> element must trigger element.onresize 

PASS onscroll: must be on the appropriate locations for GlobalEventHandlers 

PASS onscroll: the default value must be null 

PASS onscroll: the content attribute must be compiled into a function as the corresponding property 

PASS onscroll: dispatching an Event at a <math> element must trigger element.onscroll 

FAIL onsecuritypolicyviolation: must be on the appropriate locations for GlobalEventHandlers assert_true: MathMLElement has an own property named "onsecuritypolicyviolation" expected true got false

FAIL onsecuritypolicyviolation: the default value must be null assert_equals: The default value of the property is null for a MathMLElement instance expected (object) null but got (undefined) undefined

FAIL onsecuritypolicyviolation: the content attribute must be compiled into a function as the corresponding property assert_equals: The onsecuritypolicyviolation property must be a function expected "function" but got "undefined"

PASS onsecuritypolicyviolation: dispatching an Event at a <math> element must trigger element.onsecuritypolicyviolation 

PASS onseeked: must be on the appropriate locations for GlobalEventHandlers 

PASS onseeked: the default value must be null 

PASS onseeked: the content attribute must be compiled into a function as the corresponding property 

PASS onseeked: dispatching an Event at a <math> element must trigger element.onseeked 

PASS onseeking: must be on the appropriate locations for GlobalEventHandlers 

PASS onseeking: the default value must be null 

PASS onseeking: the content attribute must be compiled into a function as the corresponding property 

PASS onseeking: dispatching an Event at a <math> element must trigger element.onseeking 

PASS onselect: must be on the appropriate locations for GlobalEventHandlers 

PASS onselect: the default value must be null 

PASS onselect: the content attribute must be compiled into a function as the corresponding property 

PASS onselect: dispatching an Event at a <math> element must trigger element.onselect 

PASS onstalled: must be on the appropriate locations for GlobalEventHandlers 

PASS onstalled: the default value must be null 

PASS onstalled: the content attribute must be compiled into a function as the corresponding property 

PASS onstalled: dispatching an Event at a <math> element must trigger element.onstalled 

PASS onsubmit: must be on the appropriate locations for GlobalEventHandlers 

PASS onsubmit: the default value must be null 

PASS onsubmit: the content attribute must be compiled into a function as the corresponding property 

PASS onsubmit: dispatching an Event at a <math> element must trigger element.onsubmit 

PASS onsuspend: must be on the appropriate locations for GlobalEventHandlers 

PASS onsuspend: the default value must be null 

PASS onsuspend: the content attribute must be compiled into a function as the corresponding property 

PASS onsuspend: dispatching an Event at a <math> element must trigger element.onsuspend 

PASS ontimeupdate: must be on the appropriate locations for GlobalEventHandlers 

PASS ontimeupdate: the default value must be null 

PASS ontimeupdate: the content attribute must be compiled into a function as the corresponding property 

PASS ontimeupdate: dispatching an Event at a <math> element must trigger element.ontimeupdate 

PASS ontoggle: must be on the appropriate locations for GlobalEventHandlers 

PASS ontoggle: the default value must be null 

PASS ontoggle: the content attribute must be compiled into a function as the corresponding property 

PASS ontoggle: dispatching an Event at a <math> element must trigger element.ontoggle 

PASS onvolumechange: must be on the appropriate locations for GlobalEventHandlers 

PASS onvolumechange: the default value must be null 

PASS onvolumechange: the content attribute must be compiled into a function as the corresponding property 

PASS onvolumechange: dispatching an Event at a <math> element must trigger element.onvolumechange 

PASS onwaiting: must be on the appropriate locations for GlobalEventHandlers 

PASS onwaiting: the default value must be null 

PASS onwaiting: the content attribute must be compiled into a function as the corresponding property 

PASS onwaiting: dispatching an Event at a <math> element must trigger element.onwaiting 

<!DOCTYPE html>

<title>MathMLElement GlobalEventHandlers</title>

<link rel="author" title="Brian Kardell" href="mailto:bkardell@igalia.com" />

<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"/>

<link rel="help" href="https://html.spec.whatwg.org/multipage/#event-handler-idl-attributes"/>

<link rel="help" href="https://html.spec.whatwg.org/multipage/#event-handler-content-attributes"/>

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

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

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

<script>

  "use strict";

  setup({ explicit_done: true });

  // basic pattern lifted from /html/webappapis/scripting/events/event-handler-all-global-events.html

  fetch("/interfaces/html.idl")

    .then(res => res.text())

    .then(htmlIDL => {

      const parsedHTMLIDL = WebIDL2.parse(htmlIDL);

      const globalEventHandlers = parsedHTMLIDL.find(

        idl => idl.name === "GlobalEventHandlers"

      );

      // onerror is too special

      const names = globalEventHandlers.members

        .map(member => member.name)

        .filter(name => name !== "onerror");

      for (const name of names) {

        const withoutOn = name.substring(2);

        test(() => {

          const location = MathMLElement.prototype;

          assert_true(

            location.hasOwnProperty(name),

            `${location.constructor.name} has an own property named "${name}"`

          );

          assert_false(

            name in Element.prototype,

            `Element.prototype must not contain a "${name}" property`

          );

        }, `${name}: must be on the appropriate locations for GlobalEventHandlers`);

        test(() => {

          const location = document.createElementNS(

            "http://www.w3.org/1998/Math/MathML",

            "math"

          );

          assert_equals(

            location[name],

            null,

            `The default value of the property is null for a ${

              location.constructor.name

            } instance`

          );

        }, `${name}: the default value must be null`);

        test(() => {

          const el = document.createElementNS(

            "http://www.w3.org/1998/Math/MathML",

            "math"

          );

          el.setAttribute(name, `window.${name}Happened = true;`);

          const compiledHandler = el[name];

          assert_equals(

            typeof compiledHandler,

            "function",

            `The ${name} property must be a function`

          );

          compiledHandler();

          assert_true(

            window[name + "Happened"],

            "Calling the handler must run the code"

          );

        }, `${name}: the content attribute must be compiled into a function as the corresponding property`);

        test(() => {

          const element = document.createElementNS(

            "http://www.w3.org/1998/Math/MathML",

            "math"

          );

          element[name] = e => {

            assert_equals(

              e.currentTarget,

              element,

              "The event must be fired at the <math> element"

            );

          };

          element.dispatchEvent(new Event(withoutOn));

        }, `${name}: dispatching an Event at a <math> element must trigger element.${name}`);

      }

      done();

    });

</script>

/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/html5-tree/clipboard-event-handlers.tentative.html

/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/html5-tree/css-inline-style-interface.tentative.html

/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html

/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/html5-tree/math-global-event-handlers.tentative.html

AttributeValueTransforms = {

    lowercase: function(value) { return value.toLowerCase(); },

    uppercase: function(value) { return value.toUpperCase(); },

    alternate_case: function(value) {

        var transformedValue = "";

        for (var i = 0; i < value.length; i++) {

            transformedValue += i % 2 ?

                value.charAt(i).toLowerCase() :

                value.charAt(i).toUpperCase();

        }

        return transformedValue;

    },

    // TODO: Should we perform this transform too?

    // https://github.com/mathml-refresh/mathml/issues/122

    // add_leading_and_trimming_whitespace: function(value) {

    //    var space = "\0020\0009\000A\000D";

    //    return `${space}${space}${value}${space}${space}`;

    // },

};

function TransformAttributeValues(transform, attributeNames) {

    if (typeof attributeNames === "string")

        attributeNames = [attributeNames];

    attributeNames.forEach(name => {

        Array.from(document.querySelectorAll(`[${name}]`)).forEach(element => {

            var value = element.getAttribute(name);

            var transformedValue = AttributeValueTransforms[transform](value);

            element.setAttribute(name, transformedValue);

        });

    });

}

function spaceBetween(childBox, parentBox) {

    return {

        left: childBox.left - parentBox.left,

        right: parentBox.right - childBox.right,

        top: childBox.top - parentBox.top,

        bottom: parentBox.bottom - childBox.bottom

    };

}

function measureSpaceAround(id) {

    var mrow = document.getElementById(id);

    var mrowBox = mrow.getBoundingClientRect();

    var parentBox = mrow.parentNode.getBoundingClientRect();

    var childBox = mrow.firstElementChild.getBoundingClientRect();

    return spaceBetween(childBox, parentBox);

}

function compareSpaceWithAndWithoutStyle(tag, style, parentStyle, direction) {

    if (!FragmentHelper.isValidChildOfMrow(tag) ||

        FragmentHelper.isEmpty(tag))

        throw `Invalid argument: ${tag}`;

    if (!direction)

      direction = "ltr";

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

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

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

</div>`);

    var div = document.body.lastElementChild;

    var styleDiv = div.firstElementChild;

    var styleMath = styleDiv.firstElementChild;

    var styleParent = styleMath.firstElementChild;

    if (parentStyle)

        styleParent.setAttribute("style", parentStyle);

    var styleElement = FragmentHelper.element(styleMath);

    styleElement.setAttribute("style", style);

    var styleChild = FragmentHelper.forceNonEmptyElement(styleElement);

    var styleMathBox = styleMath.getBoundingClientRect();

    var styleElementBox = styleElement.getBoundingClientRect();

    var styleChildBox = styleChild.getBoundingClientRect();

    var styleSpace = spaceBetween(styleChildBox, styleMathBox);

    var noStyleDiv = div.lastElementChild;

    var noStyleMath = noStyleDiv.firstElementChild;

    var noStyleElement = FragmentHelper.element(noStyleMath);

    var noStyleChild = FragmentHelper.forceNonEmptyElement(noStyleElement);

    var noStyleMathBox = noStyleMath.getBoundingClientRect();

    var noStyleElementBox = noStyleElement.getBoundingClientRect();

    var noStyleChildBox = noStyleChild.getBoundingClientRect();

    var noStyleSpace = spaceBetween(noStyleChildBox, noStyleMathBox);

    var preferredWidthDelta =

        styleDiv.getBoundingClientRect().width -

        noStyleDiv.getBoundingClientRect().width;

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

    return {

        preferred_width_delta: preferredWidthDelta,

        left_delta: styleSpace.left - noStyleSpace.left,

        right_delta: styleSpace.right - noStyleSpace.right,

        top_delta: styleSpace.top - noStyleSpace.top,

        bottom_delta: styleSpace.bottom - noStyleSpace.bottom,

        element_width_delta: styleElementBox.width - noStyleElementBox.width,

        element_height_delta: styleElementBox.height - noStyleElementBox.height

    };

}

function compareSizeWithAndWithoutStyle(tag, style) {

    if (!FragmentHelper.isValidChildOfMrow(tag))

        throw `Invalid argument: ${tag}`;

    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 styleDiv = div.firstElementChild;

    var styleMath = styleDiv.firstElementChild;

    var styleElement = FragmentHelper.element(styleMath);

    styleElement.setAttribute("style", style);

    var styleMathBox = styleMath.getBoundingClientRect();

    var styleElementBox = styleElement.getBoundingClientRect();

    var noStyleDiv = div.lastElementChild;

    var noStyleMath = noStyleDiv.firstElementChild;

    var noStyleElement = FragmentHelper.element(noStyleMath);

    var noStyleMathBox = noStyleMath.getBoundingClientRect();

    var noStyleElementBox = noStyleElement.getBoundingClientRect();

    var preferredWidthDelta =

        styleDiv.getBoundingClientRect().width -

        noStyleDiv.getBoundingClientRect().width;

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

    return {

        preferred_width_delta: preferredWidthDelta,

        width_delta: styleMathBox.width - noStyleMathBox.width,

        height_delta: styleMathBox.height - noStyleMathBox.height,

        element_width_delta: styleElementBox.width - noStyleElementBox.width,

        element_height_delta: styleElementBox.height - noStyleElementBox.height

    };

};

// This is a helper for MathML feature detection.

// It is indented to be used to prevent false negative test results.

var MathMLFeatureDetection = {

    has_mspace: function() {

        // https://mathml-refresh.github.io/mathml-core/#space-mspace

        if (!this.hasOwnProperty("_has_mspace")) {

            document.body.insertAdjacentHTML("beforeend", "<math>\

<mspace></mspace>\

<mspace width='20px'></mspace>\

</math>");

            var math = document.body.lastElementChild;

            // The width attribute will add 20px per MathML and none if not supported.

            this._has_mspace =

                math.lastChild.getBoundingClientRect().width -

                math.firstChild.getBoundingClientRect().width > 10;

            document.body.removeChild(math);

        }

        return this._has_mspace;

    },

    has_operator_spacing: function() {

        // https://mathml-refresh.github.io/mathml-core/#dfn-lspace

        // https://mathml-refresh.github.io/mathml-core/#layout-of-mrow

        if (!this.hasOwnProperty("_has_operator_spacing")) {

            document.body.insertAdjacentHTML("beforeend", "<math>\

<mrow>\

  <mn>1</mn><mo lspace='0px' rspace='0px'>+</mo><mn>2</mn>\

</mrow>\

<mrow>\

  <mn>1</mn><mo lspace='8px' rspace='8px'>+</mo><mn>2</mn>\

</mrow>\

</math>");

            var math = document.body.lastElementChild;

            var mrow = math.getElementsByTagName("mrow");

            // lspace/rspace will add 16px per MathML and none if not supported.

            this._has_operator_spacing =

                mrow[1].getBoundingClientRect().width -

                mrow[0].getBoundingClientRect().width > 10;

            document.body.removeChild(math);

        }

        return this._has_operator_spacing;

    },

    has_mfrac: function() {

        if (!this.hasOwnProperty("_has_mfrac")) {

            // Use tall enough fraction to avoid side effect of min num/denum shifts.

            document.body.insertAdjacentHTML("beforeend", "<math>\

<mfrac>\

  <mspace height='50px' depth='50px'></mspace>\

  <mspace height='50px' depth='50px'></mspace>\

</mfrac>\

<mfrac>\

  <mspace height='60px' depth='60px'></mspace>\

  <mspace height='60px' depth='60px'></mspace>\

</mfrac>\

</math>");

            var math = document.body.lastElementChild;

            var mfrac = math.getElementsByTagName("mfrac");

            // height/depth will add 40px per MathML, 20px if mfrac does not stack its children and none if mspace is not supported.

            this._has_mfrac =

                mfrac[1].getBoundingClientRect().height -

                mfrac[0].getBoundingClientRect().height > 30;

            document.body.removeChild(math);

        }

        return this._has_mfrac;

    },

    has_msqrt: function() {

        if (!this.hasOwnProperty("_has_msqrt")) {

            document.body.insertAdjacentHTML("beforeend", "<math>\

<mrow style='font-size: 20px !important'>\

  <mtext>A</mtext>\

</mrow>\

<msqrt style='font-size: 20px !important'>\

  <mtext>A</mtext>\

</msqrt>\

</math>");

            var math = document.body.lastElementChild;

            // The radical symbol will make msqrt wider than mrow, if the former is supported.

            this._has_msqrt =

                math.lastElementChild.getBoundingClientRect().width -

                math.firstElementChild.getBoundingClientRect().width > 5;

            document.body.removeChild(math);

        }

        return this._has_msqrt;

    },

    has_menclose: function() {

        if (!this.hasOwnProperty("_has_menclose")) {

            document.body.insertAdjacentHTML("beforeend", "<math>\

<mrow style='font-size: 20px !important'>\

  <mrow>\

    <mrow>\

      <mrow>\

        <mtext>A</mtext>\

      </mrow>\

    </mrow>\

  </mrow>\

</mrow>\

<menclose notation='box' style='font-size: 20px !important'>\

  <menclose notation='box'>\

    <menclose notation='box'>\

      <menclose notation='box'>\

        <mtext>A</mtext>\

      </menclose>\

    </menclose>\

  </menclose>\

</menclose>\

</math>");

            var math = document.body.lastElementChild;

            // The boxes will make menclose wider than mrow, if the former is supported.

            this._has_menclose =

                math.lastElementChild.getBoundingClientRect().width -

                math.firstElementChild.getBoundingClientRect().width > 5;

            document.body.removeChild(math);

        }

        return this._has_menclose;

    },

    has_dir: function() {

        if (!this.hasOwnProperty("_has_dir")) {

            document.body.insertAdjacentHTML("beforeend", "<math style='direction: ltr !important;'>\

<mtext dir='rtl'></mtext>\

</math>");

            var math = document.body.lastElementChild;

            this._has_dir =

                window.getComputedStyle(math.firstElementChild).

                getPropertyValue('direction') === 'rtl';

            document.body.removeChild(math);

        }

        return this._has_dir;

    },

    ensure_for_match_reftest: function(has_function) {

        if (!document.querySelector("link[rel='match']"))

            throw "This function must only be used for match reftest";

        // Add a little red square at the top left corner if the feature is not supported in order to make match reftest fail.

        if (!this[has_function]()) {

            document.body.insertAdjacentHTML("beforeend", "\

<div style='width: 10px !important; height: 10px !important;\

            position: absolute !important;\

            left: 0 !important; top: 0 !important;\

            background: red !important; z-index: 1000 !important;'></div>");

        }

    }

};

function getWritingMode(element, reference) {

    var style = window.getComputedStyle(reference);

    if (style.getPropertyValue("writing-mode") !== "horizontal-tb" ||

        style.getPropertyValue("direction") !== "ltr")

        throw "Reference should have writing mode horizontal-tb and ltr";

    style = window.getComputedStyle(element);

    var param =  {

        rtl: style.getPropertyValue("direction") === "rtl",

        mode: style.getPropertyValue("writing-mode")

    };

    return param;

}

function compareSize(element, reference, epsilon) {

    var param = getWritingMode(element, reference);

    var elementBox = element.getBoundingClientRect();

    var referenceBox = reference.getBoundingClientRect();

    switch(param.mode) {

    case "horizontal-tb":

        assert_approx_equals(elementBox.width, referenceBox.width, epsilon,

                             "inline size");

        assert_approx_equals(elementBox.height, referenceBox.height, epsilon,

                             "block size");

        break;

    case "vertical-lr":

    case "vertical-rl":

        assert_approx_equals(elementBox.width, referenceBox.height, epsilon,

                             "inline size");

        assert_approx_equals(elementBox.height, referenceBox.width, epsilon,

                             "block size");

        break;

    default:

        throw "compareSize: Unrecognized writing-mode value";

    }

}

function participateToParentLayout(child) {

    var style = window.getComputedStyle(child);

    return style.getPropertyValue("display") !== "none" &&

        style.getPropertyValue("position") !== "absolute" &&

        style.getPropertyValue("position") !== "fixed";

}

function childrenParticipatingToLayout(element) {

    var children = [];

    Array.from(element.children).forEach(child => {

        if (participateToParentLayout(child))

            children.push(child);

    })

    return children;

}

function compareLayout(element, reference, epsilon) {

    // Compare sizes of elements and children.

    var param = getWritingMode(element, reference);

    compareSize(element, reference, epsilon);

    var elementBox = element.getBoundingClientRect();

    var referenceBox = reference.getBoundingClientRect();

    var elementChildren = childrenParticipatingToLayout(element);

    var referenceChildren = childrenParticipatingToLayout(reference);

    if (elementChildren.length != referenceChildren.length)

        throw "Reference should have the same number of children participating to layout."

    for (var i = 0; i < elementChildren.length; i++) {

        compareSize(elementChildren[i], referenceChildren[i], epsilon);