Bug 857536 - Cleanup the CSS properties applied on <input type='file'> from forms.css. r=bz a=akeybl
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/file/input-file-background-ref.xul
@@ -0,0 +1,19 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <vbox>
+ <html:style>
+ window {
+ background-color: blue;
+ }
+ </html:style>
+ <html:div class='file'>
+ <html:button>Browse…</html:button><label value="No file selected."/>
+ </html:div>
+ <html:br/>
+ <html:div class='file'>
+ <html:button>Browse…</html:button><label value="No files selected."/>
+ </html:div>
+ </vbox>
+</window>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/file/input-file-background.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <style>
+ body {
+ background-color: blue;
+ }
+ </style>
+ <body>
+ <input type='file'>
+ <br>
+ <input type='file' multiple>
+ </body>
+</html>
--- a/layout/reftests/forms/input/file/input-file-rtl-ref.xul
+++ b/layout/reftests/forms/input/file/input-file-rtl-ref.xul
@@ -1,15 +1,15 @@
<?xml version="1.0"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<vbox>
<html:div dir='rtl'>
- <html:div class='file'>
+ <html:div class='file' dir='rtl'>
<html:button>Browse…</html:button><label value="No file selected."/>
</html:div>
</html:div>
<html:div dir='rtl'>
<html:div class='file' dir='rtl'>
<html:button>Browse…</html:button><label value="No files selected."/>
</html:div>
</html:div>
--- a/layout/reftests/forms/input/file/reftest.list
+++ b/layout/reftests/forms/input/file/reftest.list
@@ -1,3 +1,4 @@
fuzzy-if(OSX==10.6,8,128) == input-file-simple.html input-file-simple-ref.xul
fuzzy-if(OSX==10.6,8,114) == input-file-rtl.html input-file-rtl-ref.xul
fuzzy-if(OSX==10.6,8,128) == input-file-size.html input-file-simple-ref.xul
+fuzzy-if(OSX==10.6,8,128) == input-file-background.html input-file-background-ref.xul
--- a/layout/reftests/forms/input/file/style.css
+++ b/layout/reftests/forms/input/file/style.css
@@ -1,51 +1,60 @@
vbox {
margin: 8px;
}
.file {
display: inline;
- -moz-appearance: none;
- padding: 0;
- border: 2px inset ThreeDFace;
- border-style: none;
- background-color: -moz-Field;
-
+ /* Copy of input properties that apply of forms.css below this */
color: -moz-FieldText;
font: -moz-field;
text-rendering: optimizeLegibility;
line-height: normal !important;
text-align: start;
text-transform: none;
word-spacing: normal;
letter-spacing: normal;
- cursor: text;
text-indent: 0;
-moz-user-select: text;
text-shadow: none;
+
+ /* Copy of the type=file part of forms.css below this */
+ -moz-appearance: none;
+ white-space: nowrap;
+ cursor: default;
+ -moz-binding: none;
+
+ border: none;
+ background-color: none;
+
+ padding: 0 !important;
}
.file > label {
display: inline-block;
+
+ /* Copy from forms.css below this */
width: 12em;
-moz-padding-start: 5px;
- border-color: inherit;
- background-color: inherit;
color: inherit;
font-size: inherit;
letter-spacing: inherit;
+
+ direction: ltr !important;
}
-.file > label.rtl {
+.file[dir='rtl'] > label {
+ /* Copy from forms.css below this */
+ -moz-padding-start: 0px;
+ padding-right: 5px;
text-align: right;
- -moz-padding-start: 0px;
- padding-right: 1px;
}
.file > button {
+ /* Copy from forms.css below this */
height: inherit;
font-size: inherit;
letter-spacing: inherit;
cursor: inherit;
}
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -411,26 +411,27 @@ input[type="image"]:-moz-focusring {
/* file selector */
input[type="file"] {
-moz-appearance: none;
white-space: nowrap;
cursor: default;
-moz-binding: none;
+ border: none;
+ background-color: transparent;
+
+ /* TODO: check why. */
padding: 0 !important;
- border-style: none !important;
}
input[type="file"] > xul|label {
width: 12em;
-moz-padding-start: 5px;
- border-color: inherit;
- background-color: inherit;
color: inherit;
font-size: inherit;
letter-spacing: inherit;
/*
* Force the text to have LTR directionality. Otherwise filenames containing
* RTL characters will be reordered with chaotic results.
*/