From f322877ab571973e14cadbf8e2adf325a84e5a7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang?= Date: Mon, 30 Sep 2024 12:23:07 +0000 Subject: [PATCH] Support CSS width/height properties on MathML elements. 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] https://github.com/w3c/mathml-core/issues/76 [3] https://github.com/w3c/mathml-core/issues/77 [4] https://github.com/w3c/mathml-core/issues/259 [5] https://github.com/w3c/mathml-core/issues/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 `` 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 --- .../css-styling/width-height-001.html | 32 +- .../css-styling/width-height-004.html | 63 +- .../css-styling/width-height-005.html | 541 ++++++++++++++++++ .../css-styling/width-height-006.html | 406 +++++++++++++ 4 files changed, 1040 insertions(+), 2 deletions(-) create mode 100644 mathml/relations/css-styling/width-height-005.html create mode 100644 mathml/relations/css-styling/width-height-006.html diff --git a/mathml/relations/css-styling/width-height-001.html b/mathml/relations/css-styling/width-height-001.html index 2deedc3f0b84d4..57cbc1b0ab2788 100644 --- a/mathml/relations/css-styling/width-height-001.html +++ b/mathml/relations/css-styling/width-height-001.html @@ -4,7 +4,7 @@ width, height, inline-size and block-size - + @@ -30,6 +30,7 @@ document.body.insertAdjacentHTML("beforeend", `
${MathMLFragments[tag]}
`); let div = document.body.lastElementChild; let element = FragmentHelper.element(div.firstElementChild); + FragmentHelper.forceNonEmptyDescendants(element); test(function() { assert_true(MathMLFeatureDetection[`has_${tag}`](), `${tag} is supported`); @@ -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", `
${MathMLFragments[tag]}
`); + 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. } diff --git a/mathml/relations/css-styling/width-height-004.html b/mathml/relations/css-styling/width-height-004.html index 10ece249ca0b51..e26ebe9682328b 100644 --- a/mathml/relations/css-styling/width-height-004.html +++ b/mathml/relations/css-styling/width-height-004.html @@ -20,7 +20,6 @@ } [data-name] { width: 7em; - height: 3em; border: 1px solid blue; } @@ -64,6 +63,18 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + +
@@ -79,6 +90,18 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + +
@@ -94,6 +117,18 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + +
@@ -109,6 +144,18 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + +
@@ -126,6 +173,20 @@ X + + + XXXXXXXXXXXX + XXXXXXXXXXXX + XXXXXXXXXXXX + + + + + XXXXXXXXXXXX + XXXXXXXXXXXX + XXXXXXXXXXXX + +
diff --git a/mathml/relations/css-styling/width-height-005.html b/mathml/relations/css-styling/width-height-005.html new file mode 100644 index 00000000000000..a6ea8d82deb904 --- /dev/null +++ b/mathml/relations/css-styling/width-height-005.html @@ -0,0 +1,541 @@ + + + + +content position with width/height + + + + + + + + + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + + + + + X + X + + + + + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + X + X + + + + + X + X + X + + X + X + + + + + X + X + X + + X + X + + +
+ +
+ + + X + X + X + + X + X + + + + + X + X + X + + X + X + + + + + X + X + X + + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ +
+ + + X + X + X + + + + + X + X + X + + + + + X + X + X + + +
+ + + diff --git a/mathml/relations/css-styling/width-height-006.html b/mathml/relations/css-styling/width-height-006.html new file mode 100644 index 00000000000000..d5427051974a0d --- /dev/null +++ b/mathml/relations/css-styling/width-height-006.html @@ -0,0 +1,406 @@ + + + + +content position with width/height + + + + + + + + + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + + + + + + X + X + + + + + + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + X + + X + X + + + + + + X + X + X + + X + X + + + + + + X + X + X + + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ +
+ + + + X + X + X + + + + + + X + X + X + + + + + + X + X + X + + +
+ + +