[mathml] Support scriptlevel attribute

Implement scriptlevel attribute mapping to the math-depth CSS property
as described here [1].
Adapt attribute-mapping-002.html to expect strings rather than numbers.

[1] https://mathml-refresh.github.io/mathml-core/#dfn-scriptlevel

Bug: 6606
Change-Id: I9bd59bcca840762ee1278ec064e5b81d96dda91c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2474780
Commit-Queue: Rob Buis <rbuis@igalia.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Frédéric Wang <fwang@igalia.com>
Cr-Commit-Position: refs/heads/master@{#820720}

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

@@ -11,6 +11,8 @@
 #include "third_party/blink/renderer/core/dom/document.h"
 #include "third_party/blink/renderer/core/dom/node_computed_style.h"
 #include "third_party/blink/renderer/core/html/html_element.h"
+#include "third_party/blink/renderer/platform/wtf/text/character_visitor.h"
+#include "third_party/blink/renderer/platform/wtf/text/string_to_number.h"
 
 namespace blink {
 
@@ -40,12 +42,36 @@ bool MathMLElement::IsPresentationAttribute(const QualifiedName& name) const {
       name == mathml_names::kMathcolorAttr ||
       name == mathml_names::kMathbackgroundAttr ||
       name == mathml_names::kMathvariantAttr ||
+      name == mathml_names::kScriptlevelAttr ||
       name == mathml_names::kDisplayAttr ||
       name == mathml_names::kDisplaystyleAttr)
     return true;
   return Element::IsPresentationAttribute(name);
 }
 
+namespace {
+
+bool ParseScriptLevel(const AtomicString& attributeValue,
+                      unsigned& scriptLevel,
+                      bool& add) {
+  String value = attributeValue;
+  if (value.StartsWith("+") || value.StartsWith("-")) {
+    add = true;
+    value = value.Right(1);
+  }
+
+  return WTF::VisitCharacters(
+      value, [&](const auto* position, unsigned length) {
+        WTF::NumberParsingResult result;
+        WTF::NumberParsingOptions options(
+            WTF::NumberParsingOptions::kAcceptMinusZeroForUnsigned);
+        scriptLevel = CharactersToUInt(position, length, options, &result);
+        return result == WTF::NumberParsingResult::kSuccess;
+      });
+}
+
+}  // namespace
+
 void MathMLElement::CollectStyleForPresentationAttribute(
     const QualifiedName& name,
     const AtomicString& value,
@@ -66,6 +92,19 @@ void MathMLElement::CollectStyleForPresentationAttribute(
   } else if (name == mathml_names::kMathcolorAttr) {
     AddPropertyToPresentationAttributeStyle(style, CSSPropertyID::kColor,
                                             value);
+  } else if (name == mathml_names::kScriptlevelAttr) {
+    unsigned scriptLevel = 0;
+    bool add = false;
+    if (ParseScriptLevel(value, scriptLevel, add)) {
+      if (add) {
+        AddPropertyToPresentationAttributeStyle(
+            style, CSSPropertyID::kMathDepth, "add(" + value + ")");
+      } else {
+        AddPropertyToPresentationAttributeStyle(
+            style, CSSPropertyID::kMathDepth, scriptLevel,
+            CSSPrimitiveValue::UnitType::kNumber);
+      }
+    }
   } else if (name == mathml_names::kDisplayAttr &&
              HasTagName(mathml_names::kMathTag)) {
     if (EqualIgnoringASCIICase(value, "inline")) {

third_party/blink/web_tests/TestExpectations

@@ -1211,7 +1211,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-002.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/displaystyle-1.html [ Failure ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/ignored-properties-001.html [ Failure Timeout ]
 crbug.com/6606 external/wpt/mathml/relations/css-styling/mathvariant-bold-fraktur.html [ Failure ]

third_party/blink/web_tests/external/wpt/mathml/relations/css-styling/attribute-mapping-002.html

@@ -44,26 +44,52 @@
 
           test(function() {
               // none and mprescripts appear as scripts
-              assert_equals(style.getPropertyValue("math-depth"), tag === "none" || tag === "mprescripts" ? 1 : 0, "no attribute");
+              assert_equals(style.getPropertyValue("math-depth"), tag === "none" || tag === "mprescripts" ? "1" : "0", "no attribute");
 
               var absoluteScriptlevel = 2;
               element.setAttribute("scriptlevel", absoluteScriptlevel);
-              assert_equals(style.getPropertyValue("math-depth"), absoluteScriptlevel, "attribute specified (<U>)");
+              assert_equals(style.getPropertyValue("math-depth"), "" + absoluteScriptlevel, "attribute specified <U>");
 
               var positiveScriptlevelDelta = 1;
               element.setAttribute("scriptlevel", `+${positiveScriptlevelDelta}`);
-              assert_equals(style.getPropertyValue("math-depth"), positiveScriptlevelDelta, epsilon, "attribute specified (+<U>)");
+              assert_equals(style.getPropertyValue("math-depth"), "" + positiveScriptlevelDelta, "attribute specified +<U>");
 
               var negativeScriptlevelDelta = -3;
-      element.setAttribute("scriptlevel", negativeScriptlevelDelta);
-              assert_approx_equals(style.getPropertyValue("math-depth"), negativeScriptlevelDelta, "attribute specified (-<U>)");
+              element.setAttribute("scriptlevel", `${negativeScriptlevelDelta}`);
+              assert_equals(style.getPropertyValue("math-depth"), "" + negativeScriptlevelDelta, "attribute specified -<U>");
 
               element.setAttribute("scriptlevel", absoluteScriptlevel);
               element.setAttribute("mathsize", "42px");
-              assert_approx_equals(fontSize(style), 42, epsilon, "mathsize wins over scriptlevel");
+              assert_approx_equals(fontSize(style), 42, 1, "mathsize wins over scriptlevel");
 
           }, `scriptlevel on the ${tag} element is mapped to math-depth(...)`);
 
+          test(function() {
+              // none and mprescripts appear as scripts
+              let expected = 0;
+              element.setAttribute("scriptlevel", "" + expected);
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "no attribute");
+
+              element.setAttribute("scriptlevel", " +1");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", " + 1");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", "2.0");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", "-3\"");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", "200px");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+              element.setAttribute("scriptlevel", "add(2)");
+              assert_equals(style.getPropertyValue("math-depth"), "" + expected, "invalid scriptlevel value");
+
+          }, `invalid scriptlevel values on the ${tag} element are not mapped to math-depth(...)`);
+
           test(function() {
               assert_equals(style.getPropertyValue("math-style"), "compact", "no attribute");
               element.setAttribute("displaystyle", "true");