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