Bug 857536 - Cleanup the CSS properties applied on <input type='file'> from forms.css. r=bz a=akeybl
authorMounir Lamouri <mounir.lamouri@gmail.com>
Tue, 28 May 2013 13:21:38 +0100
changeset 137687 c70ddab527a3dd45e9caa91cda40e3ee8c033e0a
parent 137686 d7ba42f5cef43316ac31d9dc63a58e795f580ed4
child 137688 1065d71fd46b675f5115c47ac41388006ebd8b66
push id2500
push usermlamouri@mozilla.com
push dateTue, 28 May 2013 12:26:44 +0000
treeherdermozilla-beta@681cb8fbd527 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz, akeybl
bugs857536
milestone22.0
Bug 857536 - Cleanup the CSS properties applied on <input type='file'> from forms.css. r=bz a=akeybl
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
@@ -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.
    */