1696721 - Ruby elements with padding have incorrect layout

Status: RESOLVED FIXED

(Core :: Layout: Ruby, defect, P3)

Description

[toasted.nutbread]

Attachment: ruby-padding-bug.html

Ruby elements with padding contained within a display:inline-block element have incorrect layout.

An example is provided to demonstrate the issue. Collapsing the whitespace will change the layout to not wrap, but the elements will be incorrectly cut off.
Expected: no word wrapping.
Actual: text1 and text2 are wrapped onto different lines.

.item {
    display: inline-block;
    background-color: #ff9999;
}
.item:nth-child(2n) {
    background-color: #9999ff;
}
.item>ruby {
    padding-right: 1em;
}

<span class="item">
    <ruby>text1</ruby>
    <span>text2</span>
</span>

Side note: when more complex HTML is used which has this pattern, the inspect element feature will cause the elements to jump around as they are hovered. I can get an example of that if necessary, but it likely stems from this issue.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Xidorn Quan [:xidorn] UTC+11]

I think I know what's going on here... will take a closer look this weekend.

Comment 3

[Xidorn Quan [:xidorn] UTC+11]

Attachment: Bug 1696721 part 1 - Fix incorrect span sizing on ruby with border / padding. r?dholbert

This issue is revealled by the test for this bug in a later part, so it's also covered by that test.

Comment 4

[Xidorn Quan [:xidorn] UTC+11]

Attachment: Bug 1696721 part 2 - Refactor DoIntrinsicInlineISize to make it accept a function for handling children. r?dholbert

While nsInlineFrame and nsFirstLetterFrame are going to continue sharing the same code, nsRubyFrame will use the refactored version to compute its intrinsic sizes.

This way we can also eliminate the need for checking the intrinsic type inside the function.

Depends on D109226

Comment 5

[Xidorn Quan [:xidorn] UTC+11]

Attachment: Bug 1696721 part 3 - Fix intrinsic isize calculation for ruby frame. r?dholbert

Depends on D109227

Comment 6

[Xidorn Quan [:xidorn] UTC+11]

https://treeherder.mozilla.org/jobs?repo=try&revision=3315876616eb555896b9a005e404be22911c758e

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/43ae915dc91a
part 1 - Fix incorrect span sizing on ruby with border / padding. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/00afc8414972
part 2 - Refactor DoIntrinsicInlineISize to make it accept a function for handling children. r=dholbert
https://hg.mozilla.org/integration/autoland/rev/1245e772d2de
part 3 - Fix intrinsic isize calculation for ruby frame. r=dholbert

Comment 8

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/28184 for changes under testing/web-platform/tests

Comment 9

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/43ae915dc91a
https://hg.mozilla.org/mozilla-central/rev/00afc8414972
https://hg.mozilla.org/mozilla-central/rev/1245e772d2de

Comment 10

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot