1541102 - Negative right margin on child makes inline-block contents wrap (was: Rendering of inline-block element differs from Chrome and Safari)

Status: RESOLVED DUPLICATE of bug 1502610

(Core :: Layout: Block and Inline, defect)

Description

[Marcos Caceres [:marcosc]]

Attachment: index-1.html

Problem:

An inline-block element is rendering across across two lines.

Expected:
For the affected text to be on a single line.

Steps to reproduce.

1. open the attached index.html
2. scroll down to "Introduction"
3. In the green note, look for [payment-request].

Comment 1

[Marcos Caceres [:marcosc]]

Attachment: screenshot showing the problem.

Comment 2

[Marcos Caceres [:marcosc]]

Noting chrome and safari parity... the problem is that the base.css sets the a[href] to margin: 0 -1px 0; ... so, it seems like we are doing the right thing.

Comment 3

[Marcos Caceres [:marcosc]]

Reduced test case https://codepen.io/sidvishnoi/pen/BENGNR

Comment 4

[Emilio Cobos Álvarez [:emilio]]

I'm not quite sure if we're right or wrong here, would have to dig through the spec... Maybe Mats / David / Daniel know off-hand?

Comment 5

[Mats Palmgren (inactive)]

It looks like intrinsic size calculations are compatible,
but the line-breaking behavior in Chrome seems to use
the margin edge, not if there's any actual overflow.
Another example:
data:text/html,<div style="display: inline-block; width:50px; border:1px solid red"><span style="font: 20px Ahem; margin-right: -10px">X X</span>

That seems slightly inconsistent with how it handles:
data:text/html,<div style="display: inline-block; overflow-x:auto; height:100px"><span style="display: inline-block; width:100px; margin-right: -1px">x</span>
which triggers a scrollbar also in Chrome.

The css-text spec uses the term "overflow" in several places, e.g.:
https://drafts.csswg.org/css-text-3/#line-breaking
"UA must minimize the amount of content overflowing a line by wrapping the line ..."
but I couldn't find any details about what "overflowing"
means in this spec. "Scrollable overflow" seems like
a reasonable interpretation, which would make our layout
correct, but I don't know...

(BTW, I seem to recall I've seen an old bug on this
exact issue, I'll see if I can find it...)

Comment 6

[Mats Palmgren (inactive)]

Bug 871224 perhaps? (it doesn't feel like the one I remember though)

In any case, we should probably file a CSS spec issue about it
to have it clarified.

Comment 7

[Mats Palmgren (inactive)]

Ah, bug 1502610 is the one where we discussed this recently.
This looks like a dupe to me.