text-overflow: ellipsis doesn't work on input buttons despite overflow being visually clipped
Categories
(Core :: Layout: Form Controls, defect, P3)
Tracking
()
Tracking | Status | |
---|---|---|
firefox123 | --- | fixed |
People
(Reporter: samuel, Assigned: emilio)
References
Details
Attachments
(4 files, 2 obsolete files)
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:
-
Create a <input type="button"> (submit or reset also works the same way)
-
Set text-overflow: ellipsis and constrain the width of the button to, for example, 200px (style="text-overflow: ellipsis; width: 200px;").
-
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.
Setting "overflow: hidden" or "overflow: clip" are possible workarounds.
Comment 2•2 years ago
|
||
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.
Same bug in Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1383144
Updated•2 years ago
|
Note that the screenshot in attachment 9302844 [details] is with the workaround of "overflow: hidden" applied.
Assignee | ||
Comment 6•5 months ago
|
||
Assignee | ||
Comment 7•5 months ago
|
||
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}
.
Assignee | ||
Comment 8•5 months ago
|
||
Err, nevermind, it does work with overflow: clip
.
Assignee | ||
Comment 9•5 months ago
|
||
Assignee | ||
Updated•5 months ago
|
Assignee | ||
Comment 10•5 months ago
|
||
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.
Assignee | ||
Updated•5 months ago
|
Assignee | ||
Comment 11•5 months ago
|
||
This implements the proposal in:
https://github.com/whatwg/html/issues/9976
Will wait till that is settled to land this.
Updated•5 months ago
|
Updated•4 months ago
|
Assignee | ||
Updated•4 months ago
|
Assignee | ||
Comment 12•4 months ago
|
||
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
Assignee | ||
Updated•4 months ago
|
Comment 13•4 months ago
|
||
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•4 months ago
|
||
Pushed by emilio@crisal.io: https://hg.mozilla.org/integration/autoland/rev/1fb09caf9d62 Make <input type=button> magic clip not magic. r=jwatt,zcorpan
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/43768 for changes under testing/web-platform/tests
Comment 16•4 months ago
|
||
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
Upstream PR was closed without merging
Updated•4 months ago
|
Assignee | ||
Updated•4 months ago
|
Comment 18•4 months ago
|
||
Pushed by emilio@crisal.io: https://hg.mozilla.org/integration/autoland/rev/6a14f6032898 Make <input type=button> magic clip not magic. r=jwatt,zcorpan
Comment 19•4 months ago
|
||
Pushed by emilio@crisal.io: https://hg.mozilla.org/integration/autoland/rev/557afe23615f Add a missing include to fix non-unified builds.
Comment 20•4 months ago
|
||
Pushed by ctuns@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/5d3495a225cd Annotate a test that now passes on Linux
Comment 21•4 months ago
|
||
Pushed by emilio@crisal.io: 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•4 months ago
|
||
bugherder |
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
Upstream PR merged by moz-wptsync-bot
Updated•1 month ago
|
Description
•