[mathml] Map global MathML attributes to CSS

The following mappings are performed:
dir => direction
mathbackground => background-color
mathcolor => color
mathsize => font-size

See https://mathml-refresh.github.io/mathml-core/#global-attributes

Note that the mapping of display, displaystyle, mathvariant and
scriptlevel will be added later.

Bug: 6606
Change-Id: I1b00c2981071dc1127570a5f7351f8b8e2b89357
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1908533
Commit-Queue: Rob Buis <rbuis@igalia.com>
Reviewed-by: Frédéric Wang <fwang@igalia.com>
Reviewed-by: Kentaro Hara <haraken@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714469}

third_party/blink/renderer/core/mathml/mathml_attribute_names.json5

@@ -9,5 +9,8 @@
   data: [
     "definitionURL",
     "encoding",
+    "mathbackground",
+    "mathcolor",
+    "mathsize",
   ],
 }

third_party/blink/renderer/core/mathml/mathml_element.cc

@@ -5,6 +5,8 @@
 #include "third_party/blink/renderer/core/mathml/mathml_element.h"
 
 #include "third_party/blink/renderer/bindings/core/v8/script_event_listener.h"
+#include "third_party/blink/renderer/core/css/css_property_name.h"
+#include "third_party/blink/renderer/core/css_value_keywords.h"
 #include "third_party/blink/renderer/core/html/html_element.h"
 
 namespace blink {
@@ -16,6 +18,57 @@ MathMLElement::MathMLElement(const QualifiedName& tagName,
 
 MathMLElement::~MathMLElement() {}
 
+static inline bool IsValidDirAttribute(const AtomicString& value) {
+  return DeprecatedEqualIgnoringCase(value, "ltr") ||
+         DeprecatedEqualIgnoringCase(value, "rtl");
+}
+
+// Keywords from MathML3 and CSS font-size are skipped.
+static inline bool IsDisallowedMathSizeAttribute(const AtomicString& value) {
+  return DeprecatedEqualIgnoringCase(value, "medium") ||
+         value.EndsWith("large", kTextCaseASCIIInsensitive) ||
+         value.EndsWith("small", kTextCaseASCIIInsensitive) ||
+         DeprecatedEqualIgnoringCase(value, "smaller") ||
+         DeprecatedEqualIgnoringCase(value, "larger");
+}
+
+bool MathMLElement::IsPresentationAttribute(const QualifiedName& name) const {
+  // TODO(crbug.com/1023292, crbug.com/1023296): add support for display,
+  // displaystyle and scriptlevel.
+  if (name == html_names::kDirAttr || name == mathml_names::kMathsizeAttr ||
+      name == mathml_names::kMathcolorAttr ||
+      name == mathml_names::kMathbackgroundAttr)
+    return true;
+  return Element::IsPresentationAttribute(name);
+}
+
+void MathMLElement::CollectStyleForPresentationAttribute(
+    const QualifiedName& name,
+    const AtomicString& value,
+    MutableCSSPropertyValueSet* style) {
+  // TODO(crbug.com/1023292, crbug.com/1023296): add support for display,
+  // displaystyle and scriptlevel.
+  if (name == html_names::kDirAttr) {
+    if (IsValidDirAttribute(value)) {
+      AddPropertyToPresentationAttributeStyle(style, CSSPropertyID::kDirection,
+                                              value);
+    }
+  } else if (name == mathml_names::kMathsizeAttr) {
+    if (!IsDisallowedMathSizeAttribute(value)) {
+      AddPropertyToPresentationAttributeStyle(style, CSSPropertyID::kFontSize,
+                                              value);
+    }
+  } else if (name == mathml_names::kMathbackgroundAttr) {
+    AddPropertyToPresentationAttributeStyle(
+        style, CSSPropertyID::kBackgroundColor, value);
+  } else if (name == mathml_names::kMathcolorAttr) {
+    AddPropertyToPresentationAttributeStyle(style, CSSPropertyID::kColor,
+                                            value);
+  } else {
+    Element::CollectStyleForPresentationAttribute(name, value, style);
+  }
+}
+
 void MathMLElement::ParseAttribute(const AttributeModificationParams& param) {
   const AtomicString& event_name =
       HTMLElement::EventNameForAttributeName(param.name);

third_party/blink/renderer/core/mathml/mathml_element.h

@@ -26,6 +26,11 @@ class CORE_EXPORT MathMLElement : public Element {
   }
 
  private:
+  bool IsPresentationAttribute(const QualifiedName&) const final;
+  void CollectStyleForPresentationAttribute(const QualifiedName&,
+                                            const AtomicString&,
+                                            MutableCSSPropertyValueSet*) final;
+
   void ParseAttribute(const AttributeModificationParams&) final;
 
   bool IsMathMLElement() const =

third_party/blink/web_tests/TestExpectations

@@ -1480,12 +1480,7 @@ crbug.com/875235 virtual/layout_ng_fieldset/fast/forms/fieldset/legend-small-aft
 # ====== MathMLCore-only tests from here ======
 
 crbug.com/6606 external/wpt/mathml/presentation-markup/direction/direction-006.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/presentation-markup/direction/direction-007.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/presentation-markup/direction/direction-008.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/presentation-markup/direction/direction-009.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/presentation-markup/direction/direction-010.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/presentation-markup/direction/direction-overall.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/presentation-markup/direction/direction-token.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/presentation-markup/direction/direction.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/presentation-markup/fractions/frac-1.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/presentation-markup/fractions/frac-bar-001.html [ Failure ]
@@ -1566,7 +1561,6 @@ crbug.com/6606 external/wpt/mathml/presentation-markup/spaces/space-like-004.htm
 crbug.com/6606 external/wpt/mathml/presentation-markup/tables/table-001.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/presentation-markup/tables/table-002.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/presentation-markup/tables/table-axis-height.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/attribute-mapping-001.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/attribute-mapping-002.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/color-002.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/color-003.html [ Failure ]
@@ -1579,21 +1573,11 @@ crbug.com/6606 external/wpt/mathml/relations/css-styling/displaystyle-014.html [
 crbug.com/6606 external/wpt/mathml/relations/css-styling/displaystyle-015.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/displaystyle-1.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/displaystyle-2.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/dynamic-dir-1.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/ignored-properties-001.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/lengths-1.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/lengths-2.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/mathbackground-001.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/mathbackground-002.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/mathbackground-003.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/mathbackground-004.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/mathcolor-001.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/mathcolor-002.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/mathcolor-003.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/mathcolor-004.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/mathsize-attribute-css-keywords.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/mathsize-attribute-legacy-values.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/css-styling/mathsize-attribute.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/mathvariant-auto.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/mathvariant-bold-fraktur.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/mathvariant-bold-italic.html [ Failure ]
@@ -1627,7 +1611,6 @@ crbug.com/6606 external/wpt/mathml/relations/css-styling/visibility-004.html [ F
 crbug.com/6606 external/wpt/mathml/relations/css-styling/width-height-001.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/writing-mode/writing-mode-001.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/writing-mode/writing-mode-002.html [ Failure ]
-crbug.com/6606 external/wpt/mathml/relations/html5-tree/color-attributes-1.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/html5-tree/display-1.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/html5-tree/display-2.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/html5-tree/href-click-1.html [ Failure ]

third_party/blink/web_tests/external/wpt/mathml/relations/css-styling/attribute-mapping-001-expected.txt

+This is a testharness.js-based test.
+Found 160 tests; 158 PASS, 2 FAIL, 0 TIMEOUT, 0 NOTRUN.
+PASS dir on the math element is mapped to CSS direction
+PASS mathcolor on the math element is mapped to CSS color
+PASS mathbackground on the math element is mapped to CSS background-color
+PASS mathsize on the math element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the math element are not mapped to CSS
+PASS dir on the annotation element is mapped to CSS direction
+PASS mathcolor on the annotation element is mapped to CSS color
+PASS mathbackground on the annotation element is mapped to CSS background-color
+PASS mathsize on the annotation element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the annotation element are not mapped to CSS
+PASS dir on the annotation-xml element is mapped to CSS direction
+PASS mathcolor on the annotation-xml element is mapped to CSS color
+PASS mathbackground on the annotation-xml element is mapped to CSS background-color
+PASS mathsize on the annotation-xml element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the annotation-xml element are not mapped to CSS
+PASS dir on the maction element is mapped to CSS direction
+PASS mathcolor on the maction element is mapped to CSS color
+PASS mathbackground on the maction element is mapped to CSS background-color
+PASS mathsize on the maction element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the maction element are not mapped to CSS
+PASS dir on the menclose element is mapped to CSS direction
+PASS mathcolor on the menclose element is mapped to CSS color
+PASS mathbackground on the menclose element is mapped to CSS background-color
+PASS mathsize on the menclose element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the menclose element are not mapped to CSS
+PASS dir on the merror element is mapped to CSS direction
+FAIL mathcolor on the merror element is mapped to CSS color assert_equals: no attribute expected "rgb(255, 0, 0)" but got "rgb(0, 0, 255)"
+FAIL mathbackground on the merror element is mapped to CSS background-color assert_equals: no attribute expected "rgb(255, 255, 224)" but got "rgba(0, 0, 0, 0)"
+PASS mathsize on the merror element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the merror element are not mapped to CSS
+PASS dir on the mfrac element is mapped to CSS direction
+PASS mathcolor on the mfrac element is mapped to CSS color
+PASS mathbackground on the mfrac element is mapped to CSS background-color
+PASS mathsize on the mfrac element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mfrac element are not mapped to CSS
+PASS dir on the mi element is mapped to CSS direction
+PASS mathcolor on the mi element is mapped to CSS color
+PASS mathbackground on the mi element is mapped to CSS background-color
+PASS mathsize on the mi element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mi element are not mapped to CSS
+PASS dir on the mmultiscripts element is mapped to CSS direction
+PASS mathcolor on the mmultiscripts element is mapped to CSS color
+PASS mathbackground on the mmultiscripts element is mapped to CSS background-color
+PASS mathsize on the mmultiscripts element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mmultiscripts element are not mapped to CSS
+PASS dir on the mn element is mapped to CSS direction
+PASS mathcolor on the mn element is mapped to CSS color
+PASS mathbackground on the mn element is mapped to CSS background-color
+PASS mathsize on the mn element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mn element are not mapped to CSS
+PASS dir on the mo element is mapped to CSS direction
+PASS mathcolor on the mo element is mapped to CSS color
+PASS mathbackground on the mo element is mapped to CSS background-color
+PASS mathsize on the mo element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mo element are not mapped to CSS
+PASS dir on the mover element is mapped to CSS direction
+PASS mathcolor on the mover element is mapped to CSS color
+PASS mathbackground on the mover element is mapped to CSS background-color
+PASS mathsize on the mover element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mover element are not mapped to CSS
+PASS dir on the mpadded element is mapped to CSS direction
+PASS mathcolor on the mpadded element is mapped to CSS color
+PASS mathbackground on the mpadded element is mapped to CSS background-color
+PASS mathsize on the mpadded element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mpadded element are not mapped to CSS
+PASS dir on the mphantom element is mapped to CSS direction
+PASS mathcolor on the mphantom element is mapped to CSS color
+PASS mathbackground on the mphantom element is mapped to CSS background-color
+PASS mathsize on the mphantom element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mphantom element are not mapped to CSS
+PASS dir on the mprescripts element is mapped to CSS direction
+PASS mathcolor on the mprescripts element is mapped to CSS color
+PASS mathbackground on the mprescripts element is mapped to CSS background-color
+PASS mathsize on the mprescripts element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mprescripts element are not mapped to CSS
+PASS dir on the mroot element is mapped to CSS direction
+PASS mathcolor on the mroot element is mapped to CSS color
+PASS mathbackground on the mroot element is mapped to CSS background-color
+PASS mathsize on the mroot element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mroot element are not mapped to CSS
+PASS dir on the mrow element is mapped to CSS direction
+PASS mathcolor on the mrow element is mapped to CSS color
+PASS mathbackground on the mrow element is mapped to CSS background-color
+PASS mathsize on the mrow element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mrow element are not mapped to CSS
+PASS dir on the ms element is mapped to CSS direction
+PASS mathcolor on the ms element is mapped to CSS color
+PASS mathbackground on the ms element is mapped to CSS background-color
+PASS mathsize on the ms element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the ms element are not mapped to CSS
+PASS dir on the mspace element is mapped to CSS direction
+PASS mathcolor on the mspace element is mapped to CSS color
+PASS mathbackground on the mspace element is mapped to CSS background-color
+PASS mathsize on the mspace element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mspace element are not mapped to CSS
+PASS dir on the msqrt element is mapped to CSS direction
+PASS mathcolor on the msqrt element is mapped to CSS color
+PASS mathbackground on the msqrt element is mapped to CSS background-color
+PASS mathsize on the msqrt element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the msqrt element are not mapped to CSS
+PASS dir on the mstyle element is mapped to CSS direction
+PASS mathcolor on the mstyle element is mapped to CSS color
+PASS mathbackground on the mstyle element is mapped to CSS background-color
+PASS mathsize on the mstyle element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mstyle element are not mapped to CSS
+PASS dir on the msub element is mapped to CSS direction
+PASS mathcolor on the msub element is mapped to CSS color
+PASS mathbackground on the msub element is mapped to CSS background-color
+PASS mathsize on the msub element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the msub element are not mapped to CSS
+PASS dir on the msubsup element is mapped to CSS direction
+PASS mathcolor on the msubsup element is mapped to CSS color
+PASS mathbackground on the msubsup element is mapped to CSS background-color
+PASS mathsize on the msubsup element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the msubsup element are not mapped to CSS
+PASS dir on the msup element is mapped to CSS direction
+PASS mathcolor on the msup element is mapped to CSS color
+PASS mathbackground on the msup element is mapped to CSS background-color
+PASS mathsize on the msup element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the msup element are not mapped to CSS
+PASS dir on the mtable element is mapped to CSS direction
+PASS mathcolor on the mtable element is mapped to CSS color
+PASS mathbackground on the mtable element is mapped to CSS background-color
+PASS mathsize on the mtable element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mtable element are not mapped to CSS
+PASS dir on the mtd element is mapped to CSS direction
+PASS mathcolor on the mtd element is mapped to CSS color
+PASS mathbackground on the mtd element is mapped to CSS background-color
+PASS mathsize on the mtd element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mtd element are not mapped to CSS
+PASS dir on the mtext element is mapped to CSS direction
+PASS mathcolor on the mtext element is mapped to CSS color
+PASS mathbackground on the mtext element is mapped to CSS background-color
+PASS mathsize on the mtext element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mtext element are not mapped to CSS
+PASS dir on the mtr element is mapped to CSS direction
+PASS mathcolor on the mtr element is mapped to CSS color
+PASS mathbackground on the mtr element is mapped to CSS background-color
+PASS mathsize on the mtr element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the mtr element are not mapped to CSS
+PASS dir on the munder element is mapped to CSS direction
+PASS mathcolor on the munder element is mapped to CSS color
+PASS mathbackground on the munder element is mapped to CSS background-color
+PASS mathsize on the munder element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the munder element are not mapped to CSS
+PASS dir on the munderover element is mapped to CSS direction
+PASS mathcolor on the munderover element is mapped to CSS color
+PASS mathbackground on the munderover element is mapped to CSS background-color
+PASS mathsize on the munderover element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the munderover element are not mapped to CSS
+PASS dir on the none element is mapped to CSS direction
+PASS mathcolor on the none element is mapped to CSS color
+PASS mathbackground on the none element is mapped to CSS background-color
+PASS mathsize on the none element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the none element are not mapped to CSS
+PASS dir on the semantics element is mapped to CSS direction
+PASS mathcolor on the semantics element is mapped to CSS color
+PASS mathbackground on the semantics element is mapped to CSS background-color
+PASS mathsize on the semantics element is mapped to CSS font-size
+PASS deprecated MathML3 attributes on the semantics element are not mapped to CSS
+Harness: the test ran to completion.
+