text-indent does not affect the selected file label for file inputs

https://bugs.webkit.org/show_bug.cgi?id=253463 rdar://105223868 Reviewed by Alan Baradlay. Sites, such as daum.net, use `text-indent` with a large negative value to hide the contents (button and selected file label) of file inputs. However, since the selected file label is not implemented as it's own element, and is simply custom painted text inside the input element, it does not follow `text-indent`. This results in the button being moved, but not the text. Consequently, the text remains in the same position regardless of `text-indent`. In the longer term, this issue should be fixed by making the selected file label a real element in the file input's shadow subtree. However, as that is a larger architectural change, the issue is addressed by honoring `text-indent` when performing the custom text painting. * LayoutTests/fast/forms/file/file-input-text-indent-expected.html: Added. * LayoutTests/fast/forms/file/file-input-text-indent.html: Added. * Source/WebCore/rendering/RenderFileUploadControl.cpp: (WebCore::RenderFileUploadControl::paintControl): Note that even after this fix, there is still an interoperability issue with file inputs in WebKit. Specifically, file inputs in WebKit do not specify `overflow: hidden`, while others engines do. This means that the button and selected file label can be painted outside of the element's box when using `text-indent`. However, while new to the label, this issue already exists for the button. This interoperability issue should be addressed separately, as it does not directly affect the known compatibility scenario. Additionally it is non-trivial to fix, as `overflow: hidden` would clip the button element inside file inputs in their default configuration. The issue is tracked in webkit.org/b/267299. Canonical link: https://commits.webkit.org/272837@main
WebKit · Jan 10, 2024 · 9ea2d32 · 9ea2d32
1 parent 3817125
commit 9ea2d32
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/LayoutTests/fast/forms/file/file-input-text-indent-expected.html b/LayoutTests/fast/forms/file/file-input-text-indent-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="margin: 20px;">
+<input type="file" style="margin-inline-start: 20px;">
+<br>
+<input type="file" style="margin-inline-start: -20px;">
+<br>
+<div style="writing-mode: vertical-rl; margin-top: 20px">
+<input type="file" style="margin-inline-start: 20px;">
+<br>
+<input type="file" style="margin-inline-start: -20px;">
+</div>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/file/file-input-text-indent.html b/LayoutTests/fast/forms/file/file-input-text-indent.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="margin: 20px;">
+<input type="file" style="text-indent: 20px;">
+<br>
+<input type="file" style="text-indent: -20px;">
+<br>
+<div style="writing-mode: vertical-rl; margin-top: 20px">
+<input type="file" style="text-indent: 20px;">
+<br>
+<input type="file" style="text-indent: -20px;">
+</div>
+</body>
+</html>
diff --git a/Source/WebCore/rendering/RenderFileUploadControl.cpp b/Source/WebCore/rendering/RenderFileUploadControl.cpp
@@ -162,6 +162,11 @@ void RenderFileUploadControl::paintControl(PaintInfo& paintInfo, const LayoutPoi
 #endif
         // Determine where the filename should be placed
         LayoutUnit contentLogicalLeft = logicalPaintOffset.x() + logicalLeftOffsetForContent();
+        if (style().isLeftToRightDirection())
+            contentLogicalLeft += textIndentOffset();
+        else
+            contentLogicalLeft -= textIndentOffset();
+
         HTMLInputElement* button = uploadButton();
         if (!button)
             return;