Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interaction between height and baseline alignment #259

Open
fred-wang opened this issue Sep 18, 2024 · 2 comments
Open

Interaction between height and baseline alignment #259

fred-wang opened this issue Sep 18, 2024 · 2 comments

Comments

@fred-wang
Copy link
Contributor

Follow-up of #75

I've worked on the Firefox implementation of width/height, tried to follow what MathML Core / Chromium do and I'm adding missing test coverage.

I just uploaded a testcase for various situations: https://bug1916988.bmoattachments.org/attachment.cgi?id=9425482

One behavior I'm not sure is what happens when we specify a CSS height that is smaller than the line-ascent. It seems Chrome sets the corresponding height and does not clamp the line-ascent, so baseline alignment with other siblings stay the same. I think that makes sense to me and that's what I'm implementing in Firefox, but we might need some extra text is the spec to clarify.

Related to that, when we specify a height for the "content box" that is different from the one of the "math content box", then MathML Core (and Chromium, in what I'm implementing in Firefox and in WPT tests I'm adding) says to align the top edges of these boxes. But maybe what is more natural is to tweak the line-ascent/line-descent evenly so that the baseline is unchanged.

moz-wptsync-bot pushed a commit to web-platform-tests/wpt that referenced this issue Sep 30, 2024
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
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Sep 30, 2024
… r=emilio

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
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Oct 1, 2024
… r=emilio

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

UltraBlame original commit: dc848382811227e2f040f438794da638b8792f5b
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Oct 1, 2024
… r=emilio

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

UltraBlame original commit: dc848382811227e2f040f438794da638b8792f5b
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Oct 1, 2024
… r=emilio

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

UltraBlame original commit: dc848382811227e2f040f438794da638b8792f5b
fred-wang added a commit to web-platform-tests/wpt that referenced this issue Oct 1, 2024
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 <[email protected]>
i3roly pushed a commit to i3roly/firefox-dynasty that referenced this issue Oct 2, 2024
… r=emilio

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
jamienicol pushed a commit to jamienicol/gecko that referenced this issue Oct 3, 2024
… r=emilio

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
@fred-wang
Copy link
Contributor Author

FWIW, I'm implementing Chromium's behavior in WebKit too.

fred-wang pushed a commit to fred-wang/WebKit that referenced this issue Oct 14, 2024
https://bugs.webkit.org/show_bug.cgi?id=281292

Reviewed by NOBODY (OOPS!).

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 other browsers do, 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
adjustPreferredLogicalWidthsForBorderAndPadding() and
adjustLayoutForBorderAndPadding(). In particular this might slightly
change current behavior for mrow-like layout. More tweaks might be
needed would be handled in follow-up patches.

[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
[6] web-platform-tests/wpt#48569

* LayoutTests/TestExpectations: width-height-003.html PASS. msqrt case for width-height-003.html still has small diff.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: We pass everything except preferred mo size because of how we handle lspace/rspace, see [6].
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-004-expected.txt: Remove new lines in txt expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.cpp:
(WebCore::RenderMathMLBlock::sizeAppliedToMathContent): New helper to retrieve the specified CSS width/height, if any.
(WebCore::RenderMathMLBlock::applySizeToMathContent): New helper to apply the specified CSS width/height to the math content box and return inline shift for further adjustments.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.h:
(WebCore::RenderMathMLBlock::isMathContentCentered const): New helper to indicate whether math content should be centered on the inline axis if a different size is specified by the user.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.cpp:
(WebCore::RenderMathMLFraction::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLFraction::layoutBlock): Apply specified sizes, adjust children position.
(WebCore::RenderMathMLFraction::paint): Comment about fraction bar painting.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.h: MathML Core says fraction content is centered.
* Source/WebCore/rendering/mathml/RenderMathMLMenclose.cpp:
(WebCore::RenderMathMLMenclose::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLMenclose::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLPadded.cpp:
(WebCore::RenderMathMLPadded::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLPadded::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp:
(WebCore::RenderMathMLRoot::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRoot::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRow.cpp:
(WebCore::RenderMathMLRow::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRow::layoutBlock): Apply specified sizes, adjust children position. This also removes previous setLogicalHeight() and updateLogicalHeight() calls.
* Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp:
(WebCore::RenderMathMLScripts::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLScripts::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLSpace.cpp:
(WebCore::RenderMathMLSpace::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLSpace::layoutBlock): Apply specified sizes. Minor refactoring to make sure border/padding are handled after.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.cpp:
(WebCore::RenderMathMLUnderOver::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLUnderOver::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.h: MathML Core says munder/mover/munderover content is centered.
fred-wang pushed a commit to fred-wang/WebKit that referenced this issue Oct 14, 2024
https://bugs.webkit.org/show_bug.cgi?id=281292

Reviewed by NOBODY (OOPS!).

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 other browsers do, 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
adjustPreferredLogicalWidthsForBorderAndPadding() and
adjustLayoutForBorderAndPadding(). In particular this might slightly
change current behavior for mrow-like layout. More tweaks might be
needed would be handled in follow-up patches.

[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
[6] web-platform-tests/wpt#48569

* LayoutTests/TestExpectations: width-height-003.html PASS. msqrt case for width-height-003.html still has small diff.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: We pass everything except preferred mo size because of how we handle lspace/rspace, see [6].
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-004-expected.txt: Remove new lines in txt expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Added. Use a platform-independent "everything PASS" expectation.
* LayoutTests/mathml/presentation/mspace-prefered-width-expected.html: This was initially added in 136708@main, tweak expectation now that we support width on mspace.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Update now that we support width/height on MathML elements.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.cpp:
(WebCore::RenderMathMLBlock::sizeAppliedToMathContent): New helper to retrieve the specified CSS width/height, if any.
(WebCore::RenderMathMLBlock::applySizeToMathContent): New helper to apply the specified CSS width/height to the math content box and return inline shift for further adjustments.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.h:
(WebCore::RenderMathMLBlock::isMathContentCentered const): New helper to indicate whether math content should be centered on the inline axis if a different size is specified by the user.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.cpp:
(WebCore::RenderMathMLFraction::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLFraction::layoutBlock): Apply specified sizes, adjust children position.
(WebCore::RenderMathMLFraction::paint): Comment about fraction bar painting.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.h: MathML Core says fraction content is centered.
* Source/WebCore/rendering/mathml/RenderMathMLMenclose.cpp:
(WebCore::RenderMathMLMenclose::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLMenclose::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLPadded.cpp:
(WebCore::RenderMathMLPadded::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLPadded::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp:
(WebCore::RenderMathMLRoot::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRoot::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRow.cpp:
(WebCore::RenderMathMLRow::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRow::layoutBlock): Apply specified sizes, adjust children position. This also removes previous setLogicalHeight() and updateLogicalHeight() calls.
* Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp:
(WebCore::RenderMathMLScripts::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLScripts::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLSpace.cpp:
(WebCore::RenderMathMLSpace::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLSpace::layoutBlock): Apply specified sizes. Minor refactoring to make sure border/padding are handled after.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.cpp:
(WebCore::RenderMathMLUnderOver::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLUnderOver::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.h: MathML Core says munder/mover/munderover content is centered.
fred-wang pushed a commit to fred-wang/WebKit that referenced this issue Oct 21, 2024
https://bugs.webkit.org/show_bug.cgi?id=281292

Reviewed by NOBODY (OOPS!).

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 other browsers do, 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
adjustPreferredLogicalWidthsForBorderAndPadding() and
adjustLayoutForBorderAndPadding(). In particular this might slightly
change current behavior for mrow-like layout. More tweaks might be
needed would be handled in follow-up patches.

[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
[6] web-platform-tests/wpt#48569

* LayoutTests/TestExpectations: width-height-003.html PASS. msqrt case for width-height-003.html still has small diff.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: We pass everything except preferred mo size because of how we handle lspace/rspace, see [6].
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-004-expected.txt: Remove new lines in txt expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Added. Use a platform-independent "everything PASS" expectation.
* LayoutTests/mathml/presentation/mspace-prefered-width-expected.html: This was initially added in 136708@main, tweak expectation now that we support width on mspace.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Update now that we support width/height on MathML elements.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.cpp:
(WebCore::RenderMathMLBlock::sizeAppliedToMathContent): New helper to retrieve the specified CSS width/height, if any.
(WebCore::RenderMathMLBlock::applySizeToMathContent): New helper to apply the specified CSS width/height to the math content box and return inline shift for further adjustments.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.h:
(WebCore::RenderMathMLBlock::isMathContentCentered const): New helper to indicate whether math content should be centered on the inline axis if a different size is specified by the user.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.cpp:
(WebCore::RenderMathMLFraction::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLFraction::layoutBlock): Apply specified sizes, adjust children position.
(WebCore::RenderMathMLFraction::paint): Comment about fraction bar painting.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.h: MathML Core says fraction content is centered.
* Source/WebCore/rendering/mathml/RenderMathMLMenclose.cpp:
(WebCore::RenderMathMLMenclose::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLMenclose::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLPadded.cpp:
(WebCore::RenderMathMLPadded::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLPadded::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp:
(WebCore::RenderMathMLRoot::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRoot::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRow.cpp:
(WebCore::RenderMathMLRow::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRow::layoutBlock): Apply specified sizes, adjust children position. This also removes previous setLogicalHeight() and updateLogicalHeight() calls.
* Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp:
(WebCore::RenderMathMLScripts::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLScripts::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLSpace.cpp:
(WebCore::RenderMathMLSpace::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLSpace::layoutBlock): Apply specified sizes. Minor refactoring to make sure border/padding are handled after.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.cpp:
(WebCore::RenderMathMLUnderOver::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLUnderOver::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.h: MathML Core says munder/mover/munderover content is centered.
fred-wang pushed a commit to fred-wang/WebKit that referenced this issue Oct 23, 2024
https://bugs.webkit.org/show_bug.cgi?id=281292

Reviewed by NOBODY (OOPS!).

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 other browsers do, 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
adjustPreferredLogicalWidthsForBorderAndPadding() and
adjustLayoutForBorderAndPadding(). In particular this might slightly
change current behavior for mrow-like layout. More tweaks might be
needed would be handled in follow-up patches.

[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
[6] web-platform-tests/wpt#48569

* LayoutTests/TestExpectations: width-height-003.html PASS. msqrt case for width-height-003.html still has small diff.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: We pass everything except preferred mo size because of how we handle lspace/rspace, see [6].
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-004-expected.txt: Remove new lines in txt expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Added. Use a platform-independent "everything PASS" expectation.
* LayoutTests/mathml/presentation/mspace-prefered-width-expected.html: This was initially added in 136708@main, tweak expectation now that we support width on mspace.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Update now that we support width/height on MathML elements.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.cpp:
(WebCore::RenderMathMLBlock::sizeAppliedToMathContent): New helper to retrieve the specified CSS width/height, if any.
(WebCore::RenderMathMLBlock::applySizeToMathContent): New helper to apply the specified CSS width/height to the math content box and return inline shift for further adjustments.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.h:
(WebCore::RenderMathMLBlock::isMathContentCentered const): New helper to indicate whether math content should be centered on the inline axis if a different size is specified by the user.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.cpp:
(WebCore::RenderMathMLFraction::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLFraction::layoutBlock): Apply specified sizes, adjust children position.
(WebCore::RenderMathMLFraction::paint): Comment about fraction bar painting.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.h: MathML Core says fraction content is centered.
* Source/WebCore/rendering/mathml/RenderMathMLMenclose.cpp:
(WebCore::RenderMathMLMenclose::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLMenclose::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLPadded.cpp:
(WebCore::RenderMathMLPadded::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLPadded::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp:
(WebCore::RenderMathMLRoot::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRoot::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRow.cpp:
(WebCore::RenderMathMLRow::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRow::layoutBlock): Apply specified sizes, adjust children position. This also removes previous setLogicalHeight() and updateLogicalHeight() calls.
* Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp:
(WebCore::RenderMathMLScripts::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLScripts::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLSpace.cpp:
(WebCore::RenderMathMLSpace::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLSpace::layoutBlock): Apply specified sizes. Minor refactoring to make sure border/padding are handled after.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.cpp:
(WebCore::RenderMathMLUnderOver::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLUnderOver::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.h: MathML Core says munder/mover/munderover content is centered.
@davidcarlisle
Copy link
Collaborator

@fred-wang

But maybe what is more natural is to tweak the line-ascent/line-descent evenly so that the baseline is unchanged.

The WG discussed this on the call 2024-10-28 and we think this baseline alignment does sound more natural.

fred-wang added a commit to fred-wang/WebKit that referenced this issue Oct 29, 2024
https://bugs.webkit.org/show_bug.cgi?id=281292

Reviewed by NOBODY (OOPS!).

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 other browsers do, 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
adjustPreferredLogicalWidthsForBorderAndPadding() and
adjustLayoutForBorderAndPadding(). In particular this might slightly
change current behavior for mrow-like layout. More tweaks might be
needed would be handled in follow-up patches.

[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
[6] web-platform-tests/wpt#48569

* LayoutTests/TestExpectations: width-height-003.html PASS. msqrt case for width-height-003.html still has small diff.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: We pass everything except preferred mo size because of how we handle lspace/rspace, see [6].
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-004-expected.txt: Remove new lines in txt expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Added. Use a platform-independent "everything PASS" expectation.
* LayoutTests/mathml/presentation/mspace-prefered-width-expected.html: This was initially added in 136708@main, tweak expectation now that we support width on mspace.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Update now that we support width/height on MathML elements.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.cpp:
(WebCore::RenderMathMLBlock::sizeAppliedToMathContent): New helper to retrieve the specified CSS width/height, if any.
(WebCore::RenderMathMLBlock::applySizeToMathContent): New helper to apply the specified CSS width/height to the math content box and return inline shift for further adjustments.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.h:
(WebCore::RenderMathMLBlock::isMathContentCentered const): New helper to indicate whether math content should be centered on the inline axis if a different size is specified by the user.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.cpp:
(WebCore::RenderMathMLFraction::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLFraction::layoutBlock): Apply specified sizes, adjust children position.
(WebCore::RenderMathMLFraction::paint): Comment about fraction bar painting.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.h: MathML Core says fraction content is centered.
* Source/WebCore/rendering/mathml/RenderMathMLMenclose.cpp:
(WebCore::RenderMathMLMenclose::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLMenclose::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLPadded.cpp:
(WebCore::RenderMathMLPadded::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLPadded::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp:
(WebCore::RenderMathMLRoot::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRoot::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRow.cpp:
(WebCore::RenderMathMLRow::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRow::layoutBlock): Apply specified sizes, adjust children position. This also removes previous setLogicalHeight() and updateLogicalHeight() calls.
* Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp:
(WebCore::RenderMathMLScripts::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLScripts::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLSpace.cpp:
(WebCore::RenderMathMLSpace::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLSpace::layoutBlock): Apply specified sizes. Minor refactoring to make sure border/padding are handled after.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.cpp:
(WebCore::RenderMathMLUnderOver::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLUnderOver::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.h: MathML Core says munder/mover/munderover content is centered.
webkit-commit-queue pushed a commit to fred-wang/WebKit that referenced this issue Oct 30, 2024
https://bugs.webkit.org/show_bug.cgi?id=281292

Reviewed by Rob Buis.

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 other browsers do, 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
adjustPreferredLogicalWidthsForBorderAndPadding() and
adjustLayoutForBorderAndPadding(). In particular this might slightly
change current behavior for mrow-like layout. More tweaks might be
needed would be handled in follow-up patches.

[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
[6] web-platform-tests/wpt#48569

* LayoutTests/TestExpectations: width-height-003.html PASS. msqrt case for width-height-003.html still has small diff.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: We pass everything except preferred mo size because of how we handle lspace/rspace, see [6].
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-004-expected.txt: Remove new lines in txt expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Use a platform-independent "everything PASS" expectation.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-001-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-005-expected.txt: Removed.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-006-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/mathml/presentation-markup/spaces/mspace-width-height-001-expected.txt: Added. Use a platform-independent "everything PASS" expectation.
* LayoutTests/mathml/presentation/mspace-prefered-width-expected.html: This was initially added in 136708@main, tweak expectation now that we support width on mspace.
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Update now that we support width/height on MathML elements.
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/mathml/relations/css-styling/display-2-expected.txt: Ditto.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.cpp:
(WebCore::RenderMathMLBlock::sizeAppliedToMathContent): New helper to retrieve the specified CSS width/height, if any.
(WebCore::RenderMathMLBlock::applySizeToMathContent): New helper to apply the specified CSS width/height to the math content box and return inline shift for further adjustments.
* Source/WebCore/rendering/mathml/RenderMathMLBlock.h:
(WebCore::RenderMathMLBlock::isMathContentCentered const): New helper to indicate whether math content should be centered on the inline axis if a different size is specified by the user.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.cpp:
(WebCore::RenderMathMLFraction::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLFraction::layoutBlock): Apply specified sizes, adjust children position.
(WebCore::RenderMathMLFraction::paint): Comment about fraction bar painting.
* Source/WebCore/rendering/mathml/RenderMathMLFraction.h: MathML Core says fraction content is centered.
* Source/WebCore/rendering/mathml/RenderMathMLMenclose.cpp:
(WebCore::RenderMathMLMenclose::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLMenclose::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLPadded.cpp:
(WebCore::RenderMathMLPadded::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLPadded::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRoot.cpp:
(WebCore::RenderMathMLRoot::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRoot::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLRow.cpp:
(WebCore::RenderMathMLRow::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLRow::layoutBlock): Apply specified sizes, adjust children position. This also removes previous setLogicalHeight() and updateLogicalHeight() calls.
* Source/WebCore/rendering/mathml/RenderMathMLScripts.cpp:
(WebCore::RenderMathMLScripts::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLScripts::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLSpace.cpp:
(WebCore::RenderMathMLSpace::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLSpace::layoutBlock): Apply specified sizes. Minor refactoring to make sure border/padding are handled after.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.cpp:
(WebCore::RenderMathMLUnderOver::computePreferredLogicalWidths): Account for specified sizes.
(WebCore::RenderMathMLUnderOver::layoutBlock): Apply specified sizes, adjust children position.
* Source/WebCore/rendering/mathml/RenderMathMLUnderOver.h: MathML Core says munder/mover/munderover content is centered.

Canonical link: https://commits.webkit.org/285892@main
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants