1800077 - text-overflow: ellipsis doesn't work on input buttons despite overflow being visually clipped

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

[Samuel]

Attachment: text_overflow_with_workaround.png

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Steps to reproduce:

1. Create a <input type="button"> (submit or reset also works the same way)

2. Set text-overflow: ellipsis and constrain the width of the button to, for example, 200px (style="text-overflow: ellipsis; width: 200px;").

3. Set the value of the button to something that makes the text longer than 200px (value="verylongtextverylongtextverylongtextverylongtext").

Actual results:

The text is clipped without ellipsis being shown.

Expected results:

Since the text is clipped, precisely like when “overflow: hidden” or “overflow: clip” is set, I expect “text-overflow: ellipsis” to work.

Comment 1

[Samuel]

Setting "overflow: hidden" or "overflow: clip" are possible workarounds.

Comment 2

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

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

Comment 3

[Samuel]

Same bug in Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1383144

Comment 4

[Samuel]

Note that the screenshot in attachment 9302844 [details] is with the workaround of "overflow: hidden" applied.

Comment 5

[Samuel]

Attachment: text_overflow_bug.png

Screenshot of the bug

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Attachment: Test-case

Comment 7

[Emilio Cobos Álvarez [:emilio]]

I'm not sure this is really a bug, text-overflow works only on scroll containers, and buttons aren't one unless you use overflow: {auto,hidden,scroll}.

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Err, nevermind, it does work with overflow: clip.

Comment 9

[Emilio Cobos Álvarez [:emilio]]

Attachment: test-case with both <input> and <button>

Comment 10

[Emilio Cobos Álvarez [:emilio]]

So this is because we unconditionally clip in here for <input>.

My preference would be to instead have input[type=button] { overflow: clip !important } on the UA stylesheet instead.

Comment 11

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1800077 - Make <input type=button> magic clip not magic. r=jwatt,zcorpan

This implements the proposal in:

https://github.com/whatwg/html/issues/9976

Will wait till that is settled to land this.

Comment 12

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1800077 - Make grid not look at overflow: visible explicitly to make stretching decisions. r=#layout,dholbert,tylin

The spec says scroll container, so overflow: visible and clip shouldn't
be different. Without this fix the other patch causes a failure in
grid-item-overflow-stretch-005.html.

As noted in the comments, we should probably not look at the computed
value but the box type instead, but that's probably worth fixing in a
separate bug.

Depends on D195419

Comment 13

[Phabricator Automation]

Comment on attachment 9369826 [details]
Bug 1800077 - Make grid not look at overflow: visible explicitly to make stretching decisions. r=#layout,dholbert,tylin

Revision D197052 was moved to bug 1871412. Setting attachment 9369826 [details] to obsolete.

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1fb09caf9d62
Make <input type=button> magic clip not magic. r=jwatt,zcorpan

Comment 15

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

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

Comment 16

[Cristian Tuns]

Backed out for causing build bustages in nsHTMLButtonControlFrame.cpp

• Backout link
• Push with failures
• Failure Log
• Failure line: /builds/worker/checkouts/gecko/layout/forms/nsHTMLButtonControlFrame.cpp(127,14): error: incomplete type 'nsLayoutUtils' named in nested name specifier

Comment 17

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

Upstream PR was closed without merging

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6a14f6032898
Make <input type=button> magic clip not magic. r=jwatt,zcorpan

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/557afe23615f
Add a missing include to fix non-unified builds.

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5d3495a225cd
Annotate a test that now passes on Linux

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/70f0875a4aa2
Tweak fuzzy annotation of input color text which is fuzzy by one more pixel now.

Comment 22

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/6a14f6032898
https://hg.mozilla.org/mozilla-central/rev/557afe23615f
https://hg.mozilla.org/mozilla-central/rev/5d3495a225cd
https://hg.mozilla.org/mozilla-central/rev/70f0875a4aa2

Comment 23

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

Upstream PR merged by moz-wptsync-bot