| <!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> |
