16 files changed, 230 insertions, 0 deletions
diff --git a/layout/reftests/forms/input/file/background-ref.xul b/layout/reftests/forms/input/file/background-ref.xul
new file mode 100644
index 000000000..cf5b0c5e4
--- /dev/null
+++ b/layout/reftests/forms/input/file/background-ref.xul
@@ -0,0 +1,16 @@
+<?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">
+  <html:style>
+    window {
+      background-color: blue;
+    }
+  </html:style>
+
+  <vbox>
+    <html:div class='file'>
+      <html:button>Browse&#8230;</html:button><label value="No file selected."/>
+    </html:div>
+  </vbox>
+</window>
diff --git a/layout/reftests/forms/input/file/background.html b/layout/reftests/forms/input/file/background.html
new file mode 100644
index 000000000..02af1d143
--- /dev/null
+++ b/layout/reftests/forms/input/file/background.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    body {
+      background-color: blue;
+    }
+  </style>
+  <body>
+    <input type='file'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/color-inherit-ref.html b/layout/reftests/forms/input/file/color-inherit-ref.html
new file mode 100644
index 000000000..39cd471a5
--- /dev/null
+++ b/layout/reftests/forms/input/file/color-inherit-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type='file' style='color: chartreuse;'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/color-inherit.html b/layout/reftests/forms/input/file/color-inherit.html
new file mode 100644
index 000000000..843532953
--- /dev/null
+++ b/layout/reftests/forms/input/file/color-inherit.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body style='color: chartreuse;'>
+    <input type='file'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/reftest-stylo.list b/layout/reftests/forms/input/file/reftest-stylo.list
new file mode 100644
index 000000000..44d8ce504
--- /dev/null
+++ b/layout/reftests/forms/input/file/reftest-stylo.list
@@ -0,0 +1,20 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# B2G failures: bug 855352.
+fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,152) skip-if((B2G&&browserIsRemote)||Mulet) == simple.html simple.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,76) skip-if((B2G&&browserIsRemote)||Mulet) == rtl.html rtl.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,152) skip-if((B2G&&browserIsRemote)||Mulet) == size.html size.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,76) skip-if((B2G&&browserIsRemote)||Mulet) == background.html background.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) skip-if((B2G&&browserIsRemote)||Mulet) == style.html style.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+== width-clip.html width-clip.html
+fails-if(B2G||Mulet||Android) == color-inherit.html color-inherit.html
+# Initial mulet triage: parity with B2G/B2G Desktop
diff --git a/layout/reftests/forms/input/file/reftest.list b/layout/reftests/forms/input/file/reftest.list
new file mode 100644
index 000000000..ecb509226
--- /dev/null
+++ b/layout/reftests/forms/input/file/reftest.list
@@ -0,0 +1,7 @@
+fails-if(Android) fuzzy-if(OSX==1006,8,152) == simple.html simple-ref.xul
+fails-if(Android) fuzzy-if(OSX==1006,8,76) == rtl.html rtl-ref.xul
+fails-if(Android) fuzzy-if(OSX==1006,8,152) == size.html simple-ref.xul
+fails-if(Android) fuzzy-if(OSX==1006,8,76) == background.html background-ref.xul
+fails-if(Android) == style.html style-ref.xul
+!= width-clip.html width-clip-ref.html
+fails-if(Android) == color-inherit.html color-inherit-ref.html
diff --git a/layout/reftests/forms/input/file/rtl-ref.xul b/layout/reftests/forms/input/file/rtl-ref.xul
new file mode 100644
index 000000000..eb61d45c7
--- /dev/null
+++ b/layout/reftests/forms/input/file/rtl-ref.xul
@@ -0,0 +1,17 @@
+<?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>
+      vbox {
+       margin-right: 8px;
+      }
+    </html:style>
+    <html:div dir='rtl'>
+      <html:div class='file' dir='rtl'>
+        <html:button>Browse&#8230;</html:button><label value="No file selected."/>
+      </html:div>
+    </html:div>
+  </vbox>
+</window>
diff --git a/layout/reftests/forms/input/file/rtl.html b/layout/reftests/forms/input/file/rtl.html
new file mode 100644
index 000000000..81e841a12
--- /dev/null
+++ b/layout/reftests/forms/input/file/rtl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div dir='rtl'>
+      <input type='file'>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/simple-ref.xul b/layout/reftests/forms/input/file/simple-ref.xul
new file mode 100644
index 000000000..a9bc3cbd9
--- /dev/null
+++ b/layout/reftests/forms/input/file/simple-ref.xul
@@ -0,0 +1,14 @@
+<?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 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>
diff --git a/layout/reftests/forms/input/file/simple.html b/layout/reftests/forms/input/file/simple.html
new file mode 100644
index 000000000..03a2a7bde
--- /dev/null
+++ b/layout/reftests/forms/input/file/simple.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type='file'>
+    <br>
+    <input type='file' multiple>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/size.html b/layout/reftests/forms/input/file/size.html
new file mode 100644
index 000000000..33606f935
--- /dev/null
+++ b/layout/reftests/forms/input/file/size.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<!-- size should have no impact on <input type='file'>. -->
+<html>
+  <body>
+    <input type='file' size='5'>
+    <br>
+    <input type='file' multiple size='30'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/style-ref.xul b/layout/reftests/forms/input/file/style-ref.xul
new file mode 100644
index 000000000..20af35b48
--- /dev/null
+++ b/layout/reftests/forms/input/file/style-ref.xul
@@ -0,0 +1,25 @@
+<?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">
+  <hbox>
+    <html:style>
+      .file {
+        background-color: blue;
+        border: 1px red solid;
+        width: 400px;
+        padding: 2px;
+        margin: 5px;
+        display: inline-block;
+      }
+
+      .file > label {
+        /* color only applies to the label */
+        color: white;
+      }
+    </html:style>
+    <html:div class='file'>
+      <html:button>Browse&#8230;</html:button><label value="No file selected."/>
+    </html:div>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/input/file/style.css b/layout/reftests/forms/input/file/style.css
new file mode 100644
index 000000000..18be345bb
--- /dev/null
+++ b/layout/reftests/forms/input/file/style.css
@@ -0,0 +1,61 @@
+vbox, hbox {
+  margin-top: 8px;
+  margin-left: 8px;
+  display: block;
+}
+
+.file {
+  /* Copy of input properties that apply of forms.css below this */
+  color: inherit;
+  font: -moz-field;
+  text-rendering: optimizeLegibility;
+  line-height: normal !important;
+  text-align: start;
+  text-transform: none;
+  word-spacing: normal;
+  letter-spacing: normal;
+  text-indent: 0;
+  -moz-user-select: text;
+  text-shadow: none;
+
+  /* Copy of the type=file part of forms.css below this */
+  display: inline; /* this one isn't really a copy... */
+  white-space: nowrap;
+  overflow:hidden;
+
+  -moz-appearance: none;
+  -moz-binding: none;
+  cursor: default;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+.file > label {
+  display: inline-block;
+
+  /* Copy from forms.css below this */
+  min-width: 12em;
+  padding-inline-start: 5px;
+
+  color: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+
+  direction: ltr !important;
+}
+
+.file[dir='rtl'] > label {
+  /* Copy from forms.css below this */
+  padding-inline-start: 0px;
+  padding-right: 5px;
+  text-align: right;
+}
+
+.file > button {
+  /* Copy from forms.css below this */
+  height: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  cursor: inherit;
+}
diff --git a/layout/reftests/forms/input/file/style.html b/layout/reftests/forms/input/file/style.html
new file mode 100644
index 000000000..76fa4d971
--- /dev/null
+++ b/layout/reftests/forms/input/file/style.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    input {
+      background-color: blue;
+      border: 1px red solid;
+      width: 400px;
+      color: white;
+      padding: 2px;
+      margin: 5px;
+    }
+  </style>
+  <body>
+    <input type='file'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/width-clip-ref.html b/layout/reftests/forms/input/file/width-clip-ref.html
new file mode 100644
index 000000000..a6c746ac8
--- /dev/null
+++ b/layout/reftests/forms/input/file/width-clip-ref.html
@@ -0,0 +1,3 @@
+<div style="width: 5px;"><input type="file"></div>
+<div style="width: 500px;"><input type="file"></div>
+
diff --git a/layout/reftests/forms/input/file/width-clip.html b/layout/reftests/forms/input/file/width-clip.html
new file mode 100644
index 000000000..d4acd7e27
--- /dev/null
+++ b/layout/reftests/forms/input/file/width-clip.html
@@ -0,0 +1,3 @@
+<div><input type="file" style="width: 5px"></div>
+<div><input type="file" style="width: 500px"></div>
+