File upload control doesn't apply CSS vertical padding or border to file name
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 21 Feb 2013 09:00:07 +0000 (09:00 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 21 Feb 2013 09:00:07 +0000 (09:00 +0000)
https://bugs.webkit.org/show_bug.cgi?id=109011

Patch by Nils Barth <nbarth@google.com> on 2013-02-21
Reviewed by Hajime Morrita.

Source/WebCore:

Test: fast/forms/file/file-vertical-padding-border.html

* rendering/RenderFileUploadControl.cpp:
    Add borderTop() and paddingTop() when computing position.
(WebCore::RenderFileUploadControl::paintObject):

LayoutTests:

* fast/forms/file/file-vertical-padding-border.html: Added.
* fast/forms/file/file-vertical-padding-border-expected.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@143570 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/forms/file/file-vertical-padding-border-expected.html [new file with mode: 0644]
LayoutTests/fast/forms/file/file-vertical-padding-border.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFileUploadControl.cpp

index 63dc57e67300da521d86cae912263daf81c22f97..834211731ab298838c5b9fa3ac5c2cf26a350875 100644 (file)
@@ -1,3 +1,13 @@
+2013-02-21  Nils Barth  <nbarth@google.com>
+
+        File upload control doesn't apply CSS vertical padding or border to file name
+        https://bugs.webkit.org/show_bug.cgi?id=109011
+
+        Reviewed by Hajime Morrita.
+
+        * fast/forms/file/file-vertical-padding-border.html: Added.
+        * fast/forms/file/file-vertical-padding-border-expected.html: Added.
+
 2013-02-20  Vsevolod Vlasov  <vsevik@chromium.org>
 
         Web Inspector: TabbedEditorContainer and OpenResourceDialog should show uiSourceCode path and name instead of parsedURL
diff --git a/LayoutTests/fast/forms/file/file-vertical-padding-border-expected.html b/LayoutTests/fast/forms/file/file-vertical-padding-border-expected.html
new file mode 100644 (file)
index 0000000..4b5c9d1
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>File input alignment with CSS padding and border</title>
+<style type="text/css">
+    span, input {
+        display: inline-block;
+        vertical-align: top;
+        margin: 0px;
+    }
+    .pad-all { padding: 10px; }
+    .pad-top { padding-top: 10px; }
+    .bor-all { border: 10px solid DarkGray; }
+    .bor-top { border-top: 10px solid DarkGray; }
+    input::-webkit-file-upload-button {
+        /* Bug is about file name and padding, not button,
+         * and platform-specific button-rendering is flakey.
+         */
+        -webkit-appearance: none;
+    }
+</style>
+</head>
+<body>
+<p>Bug <a href="http://webkit.org/b/109011">109011</a>: File upload control doesn't apply CSS vertical padding or border to file name</p>
+<p>For this test to pass, the file name (or "No file chosen") should line up with the button text below, with CSS padding and borders overall or on the top, and in combinations thereof.</p>
+<span class="pad-all"><input type="file"/></span>
+<span class="pad-top"><input type="file"/></span>
+<br/>
+<span class="bor-all"><input type="file"/></span>
+<span class="bor-top"><input type="file"/></span>
+<br/>
+<span class="pad-all bor-all"><input type="file"/></span>
+<span class="pad-all bor-top"><input type="file"/></span>
+<br/>
+<span class="pad-top bor-all"><input type="file"/></span>
+<span class="pad-top bor-top"><input type="file"/></span>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/file/file-vertical-padding-border.html b/LayoutTests/fast/forms/file/file-vertical-padding-border.html
new file mode 100644 (file)
index 0000000..15a9bb0
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>File input alignment with CSS padding and border</title>
+<style type="text/css">
+    span, input {
+        display: inline-block;
+        vertical-align: top;
+        margin: 0px;
+    }
+    .pad-all { padding: 10px; }
+    .pad-top { padding-top: 10px; }
+    .bor-all { border: 10px solid DarkGray; }
+    .bor-top { border-top: 10px solid DarkGray; }
+    input::-webkit-file-upload-button {
+        /* Bug is about file name and padding, not button,
+         * and platform-specific button-rendering is flakey.
+         */
+        -webkit-appearance: none;
+    }
+</style>
+</head>
+<body>
+<p>Bug <a href="http://webkit.org/b/109011">109011</a>: File upload control doesn't apply CSS vertical padding or border to file name</p>
+<p>For this test to pass, the file name (or "No file chosen") should line up with the button text below, with CSS padding and borders overall or on the top, and in combinations thereof.</p>
+<span><input type="file" class="pad-all"/></span>
+<span><input type="file" class="pad-top"/></span>
+<br/>
+<span><input type="file" class="bor-all"/></span>
+<span><input type="file" class="bor-top"/></span>
+<br/>
+<span><input type="file" class="pad-all bor-all"/></span>
+<span><input type="file" class="pad-all bor-top"/></span>
+<br/>
+<span><input type="file" class="pad-top bor-all"/></span>
+<span><input type="file" class="pad-top bor-top"/></span>
+</body>
+</html>
index 4c6af1f0a08fab3f68ec47f7b3af71a246281c3f..300d16bdcea95fae982582ddd92d3e0678771c66 100644 (file)
@@ -1,3 +1,16 @@
+2013-02-21  Nils Barth  <nbarth@google.com>
+
+        File upload control doesn't apply CSS vertical padding or border to file name
+        https://bugs.webkit.org/show_bug.cgi?id=109011
+
+        Reviewed by Hajime Morrita.
+
+        Test: fast/forms/file/file-vertical-padding-border.html
+
+        * rendering/RenderFileUploadControl.cpp:
+            Add borderTop() and paddingTop() when computing position.
+        (WebCore::RenderFileUploadControl::paintObject):
+
 2013-02-20  Alexey Proskuryakov  <ap@apple.com>
 
         Stop hardcoding knowledge about blob protocol in ResourceHandle
index eb4542f4dd13871a2542547a4ab2ea8696a66315..437ced3d7d14b6ff4883bb7175a4fa0b7c732a42 100644 (file)
@@ -141,7 +141,7 @@ void RenderFileUploadControl::paintObject(PaintInfo& paintInfo, const LayoutPoin
         // We want to match the button's baseline
         // FIXME: Make this work with transforms.
         if (RenderButton* buttonRenderer = toRenderButton(button->renderer()))
-            textY = paintOffset.y() + buttonRenderer->baselinePosition(AlphabeticBaseline, true, HorizontalLine, PositionOnContainingLine);
+            textY = paintOffset.y() + borderTop() + paddingTop() + buttonRenderer->baselinePosition(AlphabeticBaseline, true, HorizontalLine, PositionOnContainingLine);
         else
             textY = baselinePosition(AlphabeticBaseline, true, HorizontalLine, PositionOnContainingLine);