[mathml] Implement italic correction

Bug: 1125136, 6606 Change-Id: I2995b0fad1e1c8e96cc08818d50927d28cb54f4c
web-platform-tests · Oct 22, 2020 · b90f93d · b90f93d
1 parent fc7a52d
commit b90f93d
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 0 deletions.
diff --git a/mathml/presentation-markup/operators/largeop-hit-testing.html b/mathml/presentation-markup/operators/largeop-hit-testing.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Test hit testing on large operators</title>
+<meta name="assert" content="Verify that hit testing works on large operators.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/mathml/support/feature-detection.js"></script>
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
+  }
+  mo  {
+    font-family: TestFont;
+    font-size: 16px;
+  }
+</style>
+<script>
+  function getBox(aId) {
+    return document.getElementById(aId).getBoundingClientRect();
+  }
+
+  setup({ explicit_done: true });
+  window.addEventListener("load", () => { document.fonts.ready.then(runTests); });
+
+  function runTests() {
+
+    test(function() {
+      assert_true(MathMLFeatureDetection.has_operator_spacing());
+
+      let bbox = getBox("largeop");
+      let hit = document.getElementById("largeop");
+      let reference = getBox("reference");
+      assert_true(bbox.height > reference.height, "height of large op is bigger than the equivalent normal operator");
+      assert_equals(hit, document.elementFromPoint(bbox.left + 1, bbox.top + 1), "hit testing top-left corner of large op works");
+      assert_equals(hit, document.elementFromPoint(bbox.right - 1, bbox.bottom - 1), "hit testing bottom-right corner of large op works");
+    }, "Large op hit testing");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <math>
+    <mtable>
+      <mtr>
+        <mtd>
+          <mstyle displaystyle="false">
+            <mo id="reference">&#x2AFF;</mo>
+          </mstyle>
+        </mtd>
+        <mtd>
+          <mstyle displaystyle="true">
+            <mo id="largeop">&#x2AFF;</mo>
+          </mstyle>
+        </mtd>
+      </mtr>
+    </mtable>
+  </math>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html b/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on largeop (reference)</title>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  </div>
+    <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+      <div style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px;">
+        <div style="width: 300px; height: 1500px; background: cyan;"></div>
+      </div>
+    </div>
+</body>
+</html>
diff --git a/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html b/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Padding/border/margin on largeop</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-algorithms">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#the-math-style-property">
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#layout-of-operators">
+<link rel="match" href="padding-border-margin-002-ref.html"/>
+<meta name="assert" content="Verify visual rendering of padding/border/margin on a displaystyle mo element with the largeop property.">
+<style>
+  @font-face {
+    font-family: TestFont;
+    src: url("/fonts/math/largeop-displayoperatorminheight5000.woff");
+  }
+  math  {
+    /* Largeop variant for U+2AFF has width 100px
+       and height 300 * 5000 / 1000 = 1500px */
+    font-family: TestFont;
+    font-size: 300px;
+  }
+</style>
+<body>
+  <p>This test passes if you see a cyan rectangle of width 300px and
+    height 1500px, surrounded by a 10px blue padding, surrounded by a 10px
+    blue/yellow dashed border, itself
+    surrounded by a 10px pink margin.</p>
+  <div style="background: pink; position: absolute; left: 10px; top: 4em;">
+    <math displaystyle="true">
+      <mo largeop="true" lspace="0" rspace="0" style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">&#x2AFF;</mo>
+    </math>
+  </div>
+</body>
+</html>