Bug 253463

Summary: text-indent does not affect the selected file label for file inputs
Product: WebKit Reporter: Karl Dubost <karlcow>
Component: FormsAssignee: Aditya Keerthi <akeerthi>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, cdumez, twisniewski, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: macOS 13   
See Also: https://bugs.webkit.org/show_bug.cgi?id=254459
Attachments:
Description Flags
testcase for input with a shift
none
rendering in safari, firefox, chrome none

Description Karl Dubost 2023-03-06 14:04:21 PST
Created attachment 465322 [details]
testcase for input with a shift

One of the techniques used by people for hiding the default text of an input is to use `text-indent` with a large negative number to put it outside of the page.

    <input type="file"
           name="Filedata"
           style="text-indent:-50px; outline:1px solid red;margin-left:100px">

When no file is selected, browsers will show a variation of:

* "Choose File" button
* No file selected

When using `text-indent`

Firefox and Chrome:
1. indent both texts (button and no file selected)by pushing them to the left side.
2. hides every texts (button and no file selected) out of the input box


Safari:
1. indent only the button but let the no file selected in place
2. doesn't hide the button and the no file selected stays visible

It creates issues on the daum.net website in the cafe section for the upload button.

rdar://105223868
Comment 1 Karl Dubost 2023-03-06 14:05:04 PST
Created attachment 465323 [details]
rendering in safari, firefox, chrome
Comment 2 Karl Dubost 2023-03-06 14:31:36 PST
Animation to better see what is happening.
https://codepen.io/webcompat/pen/wvEqmKW
Comment 3 Aditya Keerthi 2024-01-09 15:11:10 PST
Pull request: https://github.com/WebKit/WebKit/pull/22554
Comment 4 EWS 2024-01-09 20:36:47 PST
Committed 272837@main (9ea2d325ad2d): <https://commits.webkit.org/272837@main>

Reviewed commits have been landed. Closing PR #22554 and removing active labels.
Comment 5 Aditya Keerthi 2024-01-09 20:49:43 PST
Remaining interop issue with overflow is tracked here: webkit.org/b/267299
Comment 6 Thomas Wisniewski [:twisniewski] 2024-03-11 13:23:15 PDT
Would it be possible to get web platform tests written up for these bugs?
Comment 7 Karl Dubost 2024-03-11 17:19:32 PDT
Thomas,
I created https://github.com/web-platform-tests/wpt/issues/45046