Skip to content

Commit

Permalink
Support CSS width/height properties on MathML elements. (#48375)
Browse files Browse the repository at this point in the history 
This patch implements support for the width/height properties on
MathML elements [1]. The general algorithm from the spec is as
follows:

(1) The outcome of the math layout is a "math content box".
(2) The content box sets its size from computed width/height values. If
  auto, it's the one of the "math content box". This patch ignores
  percentage values for now [2] [3].
(3) math content box is shifted so that its inline-start and top edges
  aligns with the ones of the content box. There are exceptions
  elements like mfrac and munder/mover/munderover which instead
  horizontally center the math content box within the content box.
  For baseline adjustment, we follow what Chromium does, see [4].
(4) Padding+border are added around the content box. Note that we
  ignore the box-sizing property for now [5].

The patch essentially tweaks the various MathML layout algorithms to
perform steps (3) and (4) before the calls to
GetBorderPaddingForPlace and InflateReflowAndBoundingMetrics.

[1] https://w3c.github.io/mathml-core/#layout-algorithms
[2] w3c/mathml-core#76
[3] w3c/mathml-core#77
[4] w3c/mathml-core#259
[5] w3c/mathml-core#257

Below is more information about test coverage:

- width-height-001: Verify that width, height, inline-size and block-size
  properties sets the size of the content box. This test used to verify
  they are ignored, this patch fixes the `<meta name="assert">` tag.
  It also adds a test for the case the specified size is smaller than the
  content (we force non empty descendants to make sure this content is
  large enough) and to verify the width is used for the preferred width.

- width-height-002, width-height-003: These are reftests visually checking
  offsets of the math content box within a larger content box (specified
  by width/height) for the mtext, mrow, mpadded, mfrac, msqrt, mroot,
  in LTR/RTL modes. In particular they allow to verify some painted
  elements like fraction bar and radical symbols.

- width-height-004: This test more directly checks that the math content
  box is horizontally centered within a larger content box for munder,
  mover, munderover and mfrac. This patch extends the test to cover the
  case when the math content box is wider (i.e. overflowing outside the
  content box) and removes unnecessary specified height.

- width-height-005: New test for other layout algorithm that don't
  center the math content box, checking inline-start edges of children
  when a width is specified. We check both LTR/RTL modes and
  wider/narrower content boxes.

- width-height-006: Same but checking the top edges for larger/smaller
  height and verifying that baseline is perserved.

Differential Revision: https://phabricator.services.mozilla.com/D221436

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1916988
gecko-commit: dc848382811227e2f040f438794da638b8792f5b
gecko-reviewers: emilio

Co-authored-by: Frédéric Wang <fwang@igalia.com>
  • Loading branch information
@moz-wptsync-bot @fred-wang
moz-wptsync-bot and fred-wang authored Oct 1, 2024
1 parent bf3c9f7 commit ee06b94
Show file tree
Hide file tree
Showing 4 changed files with 1,040 additions and 2 deletions.
32 changes: 31 additions & 1 deletion mathml/relations/css-styling/width-height-001.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>width, height, inline-size and block-size</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
<meta name="assert" content="Verify that width, height, inline-size and block-size properties are ignored.">
<meta name="assert" content="Verify that width, height, inline-size and block-size properties set the size of the content box.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
Expand All @@ -30,6 +30,7 @@
document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><math><mrow>${MathMLFragments[tag]}</mrow></math></div>`);
let div = document.body.lastElementChild;
let element = FragmentHelper.element(div.firstElementChild);
FragmentHelper.forceNonEmptyDescendants(element);

test(function() {
assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
Expand All @@ -49,6 +50,35 @@
assert_approx_equals(box.height, 700, epsilon, "height");
}, `inline-size and block-size properties on ${tag}`);

// Test that if we specify a size smaller than the content, then
// it is used too. Note that we skip mtable, which follows CSS
// tables rules and behave differently in that case.
if (tag != "mtable") {
test(function() {
assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
var style = `width: 2px; height: 1px;`;
element.setAttribute("style", style);
let box = element.getBoundingClientRect();
assert_approx_equals(box.width, 2, epsilon, "width");
assert_approx_equals(box.height, 1, epsilon, "height");
}, `width and height properties on ${tag} (content overflowing)`);
}

div.style = "display: none;"; // Hide the div after measurement.

document.body.insertAdjacentHTML("beforeend", `<div style="position: absolute;"><div style="display: inline-block"><math><mrow>${MathMLFragments[tag]}</mrow></math></div></div>`);
let shrinkWrapDiv = document.body.lastElementChild.firstElementChild;
element = FragmentHelper.element(shrinkWrapDiv.firstElementChild);
FragmentHelper.forceNonEmptyDescendants(element);

test(function() {
assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`);
var style = `width: 300px;`;
element.setAttribute("style", style);
let box = shrinkWrapDiv.getBoundingClientRect();
assert_approx_equals(box.width, 300, epsilon);
}, `width property on ${tag} (preferred width)`);

div.style = "display: none;"; // Hide the div after measurement.
}

Expand Down
63 changes: 62 additions & 1 deletion mathml/relations/css-styling/width-height-004.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
}
[data-name] {
width: 7em;
height: 3em;
border: 1px solid blue;
}
</style>
Expand Down Expand Up @@ -64,6 +63,18 @@
<mtext>X</mtext>
</mfrac>
</math>
<math>
<mfrac data-name="mfrac (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</mfrac>
</math>
<math dir="rtl">
<mfrac data-name="RTL mfrac (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</mfrac>
</math>
</div>

<div class="test">
Expand All @@ -79,6 +90,18 @@
<mtext>X</mtext>
</mfrac>
</math>
<math>
<mfrac linethickness="0" data-name="mfrac without bar (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</mfrac>
</math>
<math dir="rtl">
<mfrac linethickness="0" data-name="RTL mfrac without bar (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</mfrac>
</math>
</div>

<div class="test">
Expand All @@ -94,6 +117,18 @@
<mtext>X</mtext>
</munder>
</math>
<math>
<munder data-name="munder (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</munder>
</math>
<math dir="rtl">
<munder data-name="RTL munder (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</munder>
</math>
</div>

<div class="test">
Expand All @@ -109,6 +144,18 @@
<mtext>X</mtext>
</mover>
</math>
<math>
<mover data-name="mover (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</mover>
</math>
<math dir="rtl">
<mover data-name="RTL mover (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</mover>
</math>
</div>

<div class="test">
Expand All @@ -126,6 +173,20 @@
<mtext>X</mtext>
</munderover>
</math>
<math>
<munderover data-name="munderover (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</munderover>
</math>
<math dir="rtl">
<munderover data-name="RTL munderover (horizontal overflow)">
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
<mtext>XXXXXXXXXXXX</mtext>
</munderover>
</math>
</div>

</body>
Expand Down
Loading

0 comments on commit ee06b94

Please sign in to comment.