[mathml] Force writing-mode to horizontal-tb in UA sheet
Currently Blink forces writing-mode to horizontal-tb in the style
adjuster, but this does not work well with logical properties [1]. This
CL move the logic to the UA sheet, as it is currently done in the MathML
Core specification [2]. WPT tests are added to check that writing-mode
cannot be overridden on MathML elements and that an author-specified
writing-mode does not affect logical properties. Indentation errors for
the universal rules are also fixed.
[1] https://phabricator.services.mozilla.com/D48279#5004118
[2] https://w3c.github.io/mathml-core/#user-agent-stylesheet
Bug: 6606
Change-Id: I5a109a9161a572aab7d94edc561bd9445b1f0182
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4040125
Reviewed-by: Manuel Rego <rego@igalia.com>
Commit-Queue: Frédéric Wang <fwang@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1074558}
diff --git a/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html b/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html
new file mode 100644
index 0000000..f867cff
--- /dev/null
+++ b/mathml/relations/css-styling/writing-mode/force-horizontal-tb.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Forced writing-mode on MathML elements</title>
+<link rel="help" href="https://w3c.github.io/mathml-core/#user-agent-stylesheet">
+<meta name="assert" content="Test that writing-mode is forced to horizontal-tb on MathML elements.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<style>
+ /* selector defined in mathml-fragments.js */
+ .element {
+ writing-mode: vertical-lr;
+ }
+</style>
+</head>
+<body>
+ <div id="log"></div>
+ <div id="container">
+ <math class="element"></math>
+ </div>
+ <script>
+ test(function () {
+ var container = document.getElementById("container");
+ for (tag in MathMLFragments) {
+ container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+ }
+ let unknownElement = FragmentHelper.createElement("unknown");
+ unknownElement.setAttribute("class", "element");
+ container.appendChild(unknownElement);
+ Array.from(document.getElementsByClassName("element")).forEach(element => {
+ var tag = element.tagName;
+ var style = window.getComputedStyle(element);
+ assert_equals(style["writing-mode"], "horizontal-tb", `writing-mode on ${tag}`);
+ }, `writing-mode is forced to horizontal-tb on all MathML elements`);
+ });
+ </script>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html b/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html
new file mode 100644
index 0000000..6eae88e
--- /dev/null
+++ b/mathml/relations/css-styling/writing-mode/reset-and-logicial-property-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8"/>
+ <title>Reset writing-mode and logical property (reference)</title>
+ </head>
+ <body>
+ <p>Test passes if you see a green square.</p>
+ <math style="writing-mode: horizontal-tb;
+ padding-top: 200px;
+ background: green">
+ <mspace width="200px"/>
+ </math>
+ </body>
+</html>
diff --git a/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html b/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html
new file mode 100644
index 0000000..939cfc5
--- /dev/null
+++ b/mathml/relations/css-styling/writing-mode/reset-and-logicial-property.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8"/>
+ <title>Reset writing-mode and logical property</title>
+ <link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
+ <meta name="assert" content="Verify how forced writing-mode is taken into account for logicial properties.">
+ <link rel="match" href="reset-and-logicial-property-ref.html">
+ </head>
+ <body>
+ <p>Test passes if you see a green square.</p>
+ <math style="writing-mode: vertical-lr;
+ padding-block-start: 200px;
+ background: green">
+ <mspace width="200px"/>
+ </math>
+ <script src="/mathml/support/feature-detection.js"></script>
+ <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mspace");</script>
+ </body>
+</html>
