Skip to content

Commit

Permalink
[mathml] Use embellished operator properties for underover gaps
Browse files Browse the repository at this point in the history 
The MathML Core spec [1] [2] contains the following cases for
underover layout:
1. The base is an embellished operator with the largeop property.
2. The base is an embellished operator with the stretchy property
   and stretch axis inline.

Currently, the underover algorithm only checks if the base is
an <mo> element. This CL modifies to instead check whether it is
an embellished operators and if that's the case retrieve these
properties from the core operator.

New WPT tests are added to cover the changes from this CL:
- underover-parameters-and-embellished-operator-1.html is a copy
  of underover-parameters-and-operator-1.html with <mo>
  embellished with an <mrow>. It checks (1) above.
- underover-parameters-and-embellished-operator-2.html is a copy
  of underover-parameters-and-operator-2.html with <mo>
  embellished with an <mrow>. It checks (2) above.

[1] https://w3c.github.io/mathml-core/#base-with-underscript
[2] https://w3c.github.io/mathml-core/#base-with-overscript

Bug: 6606, 1124298
Change-Id: I2f30ed19cceacb7e2fbd70f83e2e81af9b0537c8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3071438
Commit-Queue: Frédéric Wang <fwang@igalia.com>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#915528}
  • Loading branch information
@fred-wang @chromium-wpt-export-bot
fred-wang authored and chromium-wpt-export-bot committed Aug 26, 2021
1 parent 00829b4 commit e65064d
Show file tree
Hide file tree
Showing 2 changed files with 302 additions and 0 deletions.
151 changes: 151 additions & 0 deletions mathml/presentation-markup/scripts/underover-parameters-and-embellished-operator-1.html
View file
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Underscripts and Overscripts parameters (embellished operators)</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
<meta name="assert" content="Elements munder, mover, munderover (with an embelished operator base) correctly use the limit parameters from the MATH table.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/fonts.js"></script>
<style>
math, mspace, mo {
font-size: 10px;
}
@font-face {
font-family: lowerlimitbaselinedropmin3000;
src: url("/fonts/math/limits-lowerlimitbaselinedropmin3000.woff");
}
@font-face {
font-family: lowerlimitgapmin11000;
src: url("/fonts/math/limits-lowerlimitgapmin11000.woff");
}
@font-face {
font-family: upperlimitbaselinerisemin5000;
src: url("/fonts/math/limits-upperlimitbaselinerisemin5000.woff");
}
@font-face {
font-family: upperlimitgapmin7000;
src: url("/fonts/math/limits-upperlimitgapmin7000.woff");
}
</style>
<script>
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
var epsilon = 1;

function getBox(aId) {
return document.getElementById(aId).getBoundingClientRect();
}

setup({ explicit_done: true });
window.addEventListener("load", () => { loadAllFonts().then(runTests); });

function runTests() {
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());

var v = 3000 * emToPx;
assert_approx_equals(getBox("under00011").top - getBox("ref0001").bottom,
v, epsilon, "munder: under shift");
assert_approx_equals(getBox("under00012").top - getBox("ref0001").bottom,
v, epsilon, "munderover: under shift");
}, "LowerLimitBaselineDropMin");

test(function() {
assert_true(MathMLFeatureDetection.has_mspace());

var v = 11000 * emToPx;
assert_approx_equals(getBox("under00021").top - getBox("ref0002").bottom,
v, epsilon, "munder: under gap");
assert_approx_equals(getBox("under00022").top - getBox("ref0002").bottom,
v, epsilon, "munderover: under gap");
}, "LowerLimitGapMin");

test(function() {
assert_true(MathMLFeatureDetection.has_mspace());

var v = 5000 * emToPx;
assert_approx_equals(getBox("ref0003").top - getBox("over00031").bottom,
v, epsilon, "mover: over shift");
assert_approx_equals(getBox("ref0003").top - getBox("over00032").bottom,
v, epsilon, "munderover: over shift");
}, "UpperLimitBaselineRiseMin");

test(function() {
assert_true(MathMLFeatureDetection.has_mspace());

var v = 7000 * emToPx;
assert_approx_equals(getBox("ref0004").top - getBox("over00041").bottom,
v, epsilon, "mover: over shift");
assert_approx_equals(getBox("ref0004").top - getBox("over00042").bottom,
v, epsilon, "munderover: over shift");
}, "UpperLimitGapMin");

done();
}
</script>
</head>
<body>
<div id="log"></div>
<p>
<math style="font-family: lowerlimitbaselinedropmin3000;">
<mspace id="ref0001" height="1em" width="3em" style="background: green"/>
<munder>
<mrow><mrow><mo movablelimits="false">&#x2211;</mo></mrow></mrow>
<mspace id="under00011" depth="1em" width="3em" style="background: blue"/>
</munder>
<munderover>
<mrow><mrow><mo movablelimits="false">&#x2211;</mo></mrow></mrow>
<mspace id="under00012" depth="1em" width="3em" style="background: blue"/>
<mspace height="1em" width="3em" style="background: black"/>
</munderover>
</math>
</p>
<hr/>
<p>
<math style="font-family: lowerlimitgapmin11000;">
<mspace id="ref0002" height="1em" width="3em" style="background: green"/>
<munder>
<mrow><mrow><mo movablelimits="false">&#x2211;</mo></mrow></mrow>
<mspace id="under00021" depth="1em" width="3em" style="background: blue"/>
</munder>
<munderover>
<mrow><mrow><mo movablelimits="false">&#x2211;</mo></mrow></mrow>
<mspace id="under00022" depth="1em" width="3em" style="background: blue"/>
<mspace height="1em" width="3em" style="background: black"/>
</munderover>
</math>
</p>
<hr/>
<p>
<math style="font-family: upperlimitbaselinerisemin5000;">
<mspace id="ref0003" height="1em" width="3em" style="background: green"/>
<mover>
<mrow><mrow><mo movablelimits="false">&#x2211;</mo></mrow></mrow>
<mspace id="over00031" height="1em" width="3em" style="background: blue"/>
</mover>
<munderover>
<mrow><mrow><mo movablelimits="false">&#x2211;</mo></mrow></mrow>
<mspace height="1em" width="3em" style="background: black"/>
<mspace id="over00032" height="1em" width="3em" style="background: blue"/>
</munderover>
</math>
</p>
<hr/>
<p>
<math style="font-family: upperlimitgapmin7000;">
<mspace id="ref0004" height="1em" width="3em" style="background: green"/>
<mover>
<mrow><mrow><mo movablelimits="false">&#x2211;</mo></mrow></mrow>
<mspace id="over00041" depth="1em" width="3em" style="background: blue"/>
</mover>
<munderover>
<mrow><mrow><mo movablelimits="false">&#x2211;</mo></mrow></mrow>
<mspace height="1em" width="3em" style="background: black"/>
<mspace id="over00042" depth="1em" width="3em" style="background: blue"/>
</munderover>
</math>
</p>
</body>
</html>
151 changes: 151 additions & 0 deletions mathml/presentation-markup/scripts/underover-parameters-and-embellished-operator-2.html
View file
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Underscripts and Overscripts parameters (embellished operators)</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover">
<meta name="assert" content="Elements munder, mover, munderover (with an embelished operator base) correctly use the stretch stack parameters from the MATH table.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/fonts.js"></script>
<style>
math, mspace, mo {
font-size: 10px;
}
@font-face {
font-family: bottomshiftdown3000;
src: url("/fonts/math/stretchstack-bottomshiftdown3000.woff");
}
@font-face {
font-family: gapbelowmin11000;
src: url("/fonts/math/stretchstack-gapbelowmin11000.woff");
}
@font-face {
font-family: topshiftup5000;
src: url("/fonts/math/stretchstack-topshiftup5000.woff");
}
@font-face {
font-family: gapabovemin7000;
src: url("/fonts/math/stretchstack-gapabovemin7000.woff");
}
</style>
<script>
var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
var epsilon = 1;

function getBox(aId) {
return document.getElementById(aId).getBoundingClientRect();
}

setup({ explicit_done: true });
window.addEventListener("load", () => { loadAllFonts().then(runTests); });

function runTests() {
test(function() {
assert_true(MathMLFeatureDetection.has_mspace());

var v = 3000 * emToPx;
assert_approx_equals(getBox("under00011").top - getBox("ref0001").bottom,
v, epsilon, "munder: under shift");
assert_approx_equals(getBox("under00012").top - getBox("ref0001").bottom,
v, epsilon, "munderover: under shift");
}, "StretchStackBottomShiftDown");

test(function() {
assert_true(MathMLFeatureDetection.has_mspace());

var v = 11000 * emToPx;
assert_approx_equals(getBox("under00021").top - getBox("ref0002").bottom,
v, epsilon, "munder: under gap");
assert_approx_equals(getBox("under00022").top - getBox("ref0002").bottom,
v, epsilon, "munderover: under gap");
}, "StretchStackGapBelowMin");

test(function() {
assert_true(MathMLFeatureDetection.has_mspace());

var v = 5000 * emToPx;
assert_approx_equals(getBox("ref0003").top - getBox("over00031").bottom,
v, epsilon, "mover: over shift");
assert_approx_equals(getBox("ref0003").top - getBox("over00032").bottom,
v, epsilon, "munderover: over shift");
}, "StretchStackTopShiftUp");

test(function() {
assert_true(MathMLFeatureDetection.has_mspace());

var v = 7000 * emToPx;
assert_approx_equals(getBox("ref0004").top - getBox("over00041").bottom,
v, epsilon, "mover: over shift");
assert_approx_equals(getBox("ref0004").top - getBox("over00042").bottom,
v, epsilon, "munderover: over shift");
}, "StretchStackGapAboveMin");

done();
}
</script>
</head>
<body>
<div id="log"></div>
<p>
<math style="font-family: bottomshiftdown3000;">
<mspace id="ref0001" height="1em" width="3em" style="background: green"/>
<munder>
<mrow><mrow><mo>&#x2192;</mo></mrow></mrow>
<mspace id="under00011" depth="1em" width="3em" style="background: blue"/>
</munder>
<munderover>
<mrow><mrow><mo>&#x2192;</mo></mrow></mrow>
<mspace id="under00012" depth="1em" width="3em" style="background: blue"/>
<mspace height="1em" width="3em" style="background: black"/>
</munderover>
</math>
</p>
<hr/>
<p>
<math style="font-family: gapbelowmin11000;">
<mspace id="ref0002" height="1em" width="3em" style="background: green"/>
<munder>
<mrow><mrow><mo>&#x2192;</mo></mrow></mrow>
<mspace id="under00021" depth="1em" width="3em" style="background: blue"/>
</munder>
<munderover>
<mrow><mrow><mo>&#x2192;</mo></mrow></mrow>
<mspace id="under00022" depth="1em" width="3em" style="background: blue"/>
<mspace height="1em" width="3em" style="background: black"/>
</munderover>
</math>
</p>
<hr/>
<p>
<math style="font-family: topshiftup5000;">
<mspace id="ref0003" height="1em" width="3em" style="background: green"/>
<mover>
<mrow><mrow><mo>&#x2192;</mo></mrow></mrow>
<mspace id="over00031" height="1em" width="3em" style="background: blue"/>
</mover>
<munderover>
<mrow><mrow><mo>&#x2192;</mo></mrow></mrow>
<mspace height="1em" width="3em" style="background: black"/>
<mspace id="over00032" height="1em" width="3em" style="background: blue"/>
</munderover>
</math>
</p>
<hr/>
<p>
<math style="font-family: gapabovemin7000;">
<mspace id="ref0004" height="1em" width="3em" style="background: green"/>
<mover>
<mrow><mrow><mo>&#x2192;</mo></mrow></mrow>
<mspace id="over00041" depth="1em" width="3em" style="background: blue"/>
</mover>
<munderover>
<mrow><mrow><mo>&#x2192;</mo></mrow></mrow>
<mspace height="1em" width="3em" style="background: black"/>
<mspace id="over00042" depth="1em" width="3em" style="background: blue"/>
</munderover>
</math>
</p>
</body>
</html>

0 comments on commit e65064d

Please sign in to comment.