Bug 857536 - Cleanup the CSS properties applied on <input type='file'> from forms.css. r=bz
authorMounir Lamouri <mounir.lamouri@gmail.com>
Thu, 04 Apr 2013 10:39:29 +0100
changeset 127638 2a6c83f2499ecc008b5bd9fd44de6e88691c9905
parent 127637 7bc2f7391b4f1bedab8b5247b0d2f6a13ac3100d
child 127639 c96c8b020a27e0ca6476ab582e8d5a45e8eb5dfe
push id24509
push userryanvm@gmail.com
push dateFri, 05 Apr 2013 00:57:47 +0000
treeherdermozilla-central@55f9e3e3dae7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz
bugs857536
milestone23.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 857536 - Cleanup the CSS properties applied on <input type='file'> from forms.css. r=bz
layout/reftests/forms/input/file/input-file-background-ref.xul
layout/reftests/forms/input/file/input-file-background.html
layout/reftests/forms/input/file/input-file-rtl-ref.xul
layout/reftests/forms/input/file/reftest.list
layout/reftests/forms/input/file/style.css
layout/style/forms.css
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&#8230;</html:button><label value="No file selected."/>
+    </html:div>
+    <html:br/>
+    <html:div class='file'>
+      <html:button>Browse&#8230;</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&#8230;</html:button><label value="No file selected."/>
       </html:div>
     </html:div>
     <html:div dir='rtl'>
       <html:div class='file' dir='rtl'>
         <html:button>Browse&#8230;</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
@@ -412,26 +412,27 @@ input[type="range"]:-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.
    */