summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms/input/file
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 14:29:10 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-28 14:29:10 +0000
commit2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
treeb80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/forms/input/file
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.zip
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/forms/input/file')
-rw-r--r--layout/reftests/forms/input/file/background-ref.xhtml16
-rw-r--r--layout/reftests/forms/input/file/background.html11
-rw-r--r--layout/reftests/forms/input/file/button-height-ref.html6
-rw-r--r--layout/reftests/forms/input/file/button-height.html6
-rw-r--r--layout/reftests/forms/input/file/color-inherit-ref.html6
-rw-r--r--layout/reftests/forms/input/file/color-inherit.html6
-rw-r--r--layout/reftests/forms/input/file/css-display-ref.html54
-rw-r--r--layout/reftests/forms/input/file/css-display.html64
-rw-r--r--layout/reftests/forms/input/file/css-overflow-ref.html39
-rw-r--r--layout/reftests/forms/input/file/css-overflow.html46
-rw-r--r--layout/reftests/forms/input/file/dynamic-max-width-ref.html20
-rw-r--r--layout/reftests/forms/input/file/dynamic-max-width.html34
-rw-r--r--layout/reftests/forms/input/file/label-min-inline-size-ref.html23
-rw-r--r--layout/reftests/forms/input/file/label-min-inline-size.html44
-rw-r--r--layout/reftests/forms/input/file/reftest.list12
-rw-r--r--layout/reftests/forms/input/file/rtl-ref.xhtml17
-rw-r--r--layout/reftests/forms/input/file/rtl.html8
-rw-r--r--layout/reftests/forms/input/file/simple-ref.xhtml14
-rw-r--r--layout/reftests/forms/input/file/simple.html8
-rw-r--r--layout/reftests/forms/input/file/size.html9
-rw-r--r--layout/reftests/forms/input/file/style-ref.xhtml25
-rw-r--r--layout/reftests/forms/input/file/style.css61
-rw-r--r--layout/reftests/forms/input/file/style.html16
-rw-r--r--layout/reftests/forms/input/file/width-clip-ref.html3
-rw-r--r--layout/reftests/forms/input/file/width-clip.html3
25 files changed, 551 insertions, 0 deletions
diff --git a/layout/reftests/forms/input/file/background-ref.xhtml b/layout/reftests/forms/input/file/background-ref.xhtml
new file mode 100644
index 0000000000..cf5b0c5e48
--- /dev/null
+++ b/layout/reftests/forms/input/file/background-ref.xhtml
@@ -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 0000000000..02af1d143d
--- /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/button-height-ref.html b/layout/reftests/forms/input/file/button-height-ref.html
new file mode 100644
index 0000000000..a80d261cf8
--- /dev/null
+++ b/layout/reftests/forms/input/file/button-height-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<style>
+ /* Android adds a border for some reason */
+ input { border: 0 }
+</style>
+<input type="file">
diff --git a/layout/reftests/forms/input/file/button-height.html b/layout/reftests/forms/input/file/button-height.html
new file mode 100644
index 0000000000..b1094ad783
--- /dev/null
+++ b/layout/reftests/forms/input/file/button-height.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<style>
+ /* Android adds a border for some reason */
+ input { border: 0 }
+</style>
+<input type="file" style="height: 400px">
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 0000000000..39cd471a56
--- /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 0000000000..8435329537
--- /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/css-display-ref.html b/layout/reftests/forms/input/file/css-display-ref.html
new file mode 100644
index 0000000000..875362bddf
--- /dev/null
+++ b/layout/reftests/forms/input/file/css-display-ref.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: File input with CSS display</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+input {
+ height: 3em;
+}
+.grid { display: block; }
+.flex { display: block; }
+.block { display: block; }
+.table { display: block; }
+.columns { display: block; }
+.n { -webkit-appearance:none; appearance:none; }
+</style>
+<body>
+ <input type="file" class="grid">
+ <input type="file" class="flex">
+ <input type="file" class="block">
+ <input type="file" class="table">
+ <input type="file" class="columns">
+
+ A<input type="file">
+ <input type="file" class="inline">
+ <input type="file" class="inline-grid">
+ <input type="file" class="inline-flex">
+ <input type="file" class="inline-block">
+ <input type="file" class="inline-table">
+ <input type="file" class="inline-columns">
+
+ A<input disabled type="file">
+ <input disabled type="file" class="inline">
+ <input disabled type="file" class="inline-grid">
+ <input disabled type="file" class="inline-flex">
+ <input disabled type="file" class="inline-block">
+ <input disabled type="file" class="inline-table">
+ <input disabled type="file" class="inline-columns">
+
+ A<input type="file" class="n">
+ <input type="file" class="n inline">
+ <input type="file" class="n inline-grid">
+ <input type="file" class="n inline-flex">
+ <input type="file" class="n inline-block">
+ <input type="file" class="n inline-table">
+ <input type="file" class="n inline-columns">
+
+ A<input disabled type="file" class="n">
+ <input disabled type="file" class="n inline">
+ <input disabled type="file" class="n inline-grid">
+ <input disabled type="file" class="n inline-flex">
+ <input disabled type="file" class="n inline-block">
+ <input disabled type="file" class="n inline-table">
+ <input disabled type="file" class="n inline-columns">
+</body>
diff --git a/layout/reftests/forms/input/file/css-display.html b/layout/reftests/forms/input/file/css-display.html
new file mode 100644
index 0000000000..aba7435015
--- /dev/null
+++ b/layout/reftests/forms/input/file/css-display.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test: File input with CSS display</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#widgets">
+<link rel="help" href="https://github.com/whatwg/html/issues/4082">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="css-overflow-ref.html">
+<style>
+input {
+ height: 3em;
+}
+.inline { display: inline }
+.inline-grid { display: inline-grid; grid: 500px/500px; align-items: end; }
+.inline-flex { display: inline-flex; flex-flow: column; align-items: end; }
+.inline-block { display: inline-block }
+.inline-table { display: inline-table }
+.inline-columns { display: inline-block; column-width: 500px; column-rule: 10px solid; }
+.grid { display: grid; grid: 500px/500px; align-items: end; }
+.flex { display: flex; flex-flow: column; align-items: end; }
+.block { display: block }
+.table { display: table }
+.columns { display: block; column-width: 500px; column-rule: 10px solid; }
+.n { -webkit-appearance:none; appearance:none; }
+</style>
+<body>
+ <input type="file" class="grid">
+ <input type="file" class="flex">
+ <input type="file" class="block">
+ <input type="file" class="table">
+ <input type="file" class="columns">
+
+ A<input type="file">
+ <input type="file" class="inline">
+ <input type="file" class="inline-grid">
+ <input type="file" class="inline-flex">
+ <input type="file" class="inline-block">
+ <input type="file" class="inline-table">
+ <input type="file" class="inline-columns">
+
+ A<input disabled type="file">
+ <input disabled type="file" class="inline">
+ <input disabled type="file" class="inline-grid">
+ <input disabled type="file" class="inline-flex">
+ <input disabled type="file" class="inline-block">
+ <input disabled type="file" class="inline-table">
+ <input disabled type="file" class="inline-columns">
+
+ A<input type="file" class="n">
+ <input type="file" class="n inline">
+ <input type="file" class="n inline-grid">
+ <input type="file" class="n inline-flex">
+ <input type="file" class="n inline-block">
+ <input type="file" class="n inline-table">
+ <input type="file" class="n inline-columns">
+
+ A<input disabled type="file" class="n">
+ <input disabled type="file" class="n inline">
+ <input disabled type="file" class="n inline-grid">
+ <input disabled type="file" class="n inline-flex">
+ <input disabled type="file" class="n inline-block">
+ <input disabled type="file" class="n inline-table">
+ <input disabled type="file" class="n inline-columns">
+</body>
diff --git a/layout/reftests/forms/input/file/css-overflow-ref.html b/layout/reftests/forms/input/file/css-overflow-ref.html
new file mode 100644
index 0000000000..a3f696fcf2
--- /dev/null
+++ b/layout/reftests/forms/input/file/css-overflow-ref.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: File input with CSS overflow</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+input {
+ display: inline-block;
+ width: 100px;
+ height: 30px;
+ font-size: 48px;
+ overflow: visible;
+}
+.n { -webkit-appearance:none; appearance:none; }
+</style>
+<body>
+ A<input type="file">
+ <input type="file" class="ov">
+ <input type="file" class="oh">
+ <input type="file" class="os">
+ <input type="file" class="oa">
+
+ A<input disabled type="file">
+ <input disabled type="file" class="ov">
+ <input disabled type="file" class="oh">
+ <input disabled type="file" class="os">
+ <input disabled type="file" class="oa">
+
+ A<input type="file" class="n">
+ <input type="file" class="n ov">
+ <input type="file" class="n oh">
+ <input type="file" class="n os">
+ <input type="file" class="n oa">
+
+ A<input disabled type="file" class="n">
+ <input disabled type="file" class="n ov">
+ <input disabled type="file" class="n oh">
+ <input disabled type="file" class="n os">
+ <input disabled type="file" class="n oa">
+</body>
diff --git a/layout/reftests/forms/input/file/css-overflow.html b/layout/reftests/forms/input/file/css-overflow.html
new file mode 100644
index 0000000000..dd3fb08bf5
--- /dev/null
+++ b/layout/reftests/forms/input/file/css-overflow.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test: File input with CSS overflow</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#widgets">
+<link rel="help" href="https://github.com/whatwg/html/issues/4082">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="css-overflow-ref.html">
+<style>
+input {
+ display: inline-block;
+ width: 100px;
+ height: 30px;
+ font-size: 48px;
+}
+.ov { overflow: visible; }
+.oh { overflow: hidden; }
+.os { overflow: scroll; }
+.oa { overflow: auto; }
+.n { -webkit-appearance:none; appearance:none; }
+</style>
+<body>
+ A<input type="file">
+ <input type="file" class="ov">
+ <input type="file" class="oh">
+ <input type="file" class="os">
+ <input type="file" class="oa">
+
+ A<input disabled type="file">
+ <input disabled type="file" class="ov">
+ <input disabled type="file" class="oh">
+ <input disabled type="file" class="os">
+ <input disabled type="file" class="oa">
+
+ A<input type="file" class="n">
+ <input type="file" class="n ov">
+ <input type="file" class="n oh">
+ <input type="file" class="n os">
+ <input type="file" class="n oa">
+
+ A<input disabled type="file" class="n">
+ <input disabled type="file" class="n ov">
+ <input disabled type="file" class="n oh">
+ <input disabled type="file" class="n os">
+ <input disabled type="file" class="n oa">
+</body>
diff --git a/layout/reftests/forms/input/file/dynamic-max-width-ref.html b/layout/reftests/forms/input/file/dynamic-max-width-ref.html
new file mode 100644
index 0000000000..1628c5fa30
--- /dev/null
+++ b/layout/reftests/forms/input/file/dynamic-max-width-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference for dynamic-max-width.html</title>
+</head>
+<body>
+
+<input type=file dir=rtl>
+
+<br>
+
+<input type=file>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/file/dynamic-max-width.html b/layout/reftests/forms/input/file/dynamic-max-width.html
new file mode 100644
index 0000000000..1cad23c169
--- /dev/null
+++ b/layout/reftests/forms/input/file/dynamic-max-width.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>CSS Test: file control with dynamic change to max-width</title>
+ <style type="text/css">
+
+ input { max-width: 10em; }
+
+ </style>
+ <script>
+ function tweak() {
+ [...document.querySelectorAll('input')].forEach(function(e) {
+ e.style.maxWidth = 'initial';
+ });
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak);
+ </script>
+</head>
+<body onload="test()">
+
+<input type=file dir=rtl>
+
+<br>
+
+<input type=file>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/file/label-min-inline-size-ref.html b/layout/reftests/forms/input/file/label-min-inline-size-ref.html
new file mode 100644
index 0000000000..6e8e1287c3
--- /dev/null
+++ b/layout/reftests/forms/input/file/label-min-inline-size-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1500530</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:black; font:48pt/1 Arial; padding:0; margin:0;
+}
+
+div { width: 100px; height: 20px; margin-top: -2px; background: lime; }
+
+ </style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/file/label-min-inline-size.html b/layout/reftests/forms/input/file/label-min-inline-size.html
new file mode 100644
index 0000000000..3c97476211
--- /dev/null
+++ b/layout/reftests/forms/input/file/label-min-inline-size.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1500530</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:48pt/1 Arial; padding:0; margin:0;
+}
+
+input {
+ font-family: Arial;
+ font-size: 48pt;
+ vertical-align: top;
+ background: lime;
+}
+div { text-indent: -24ch; margin-top: -2px; }
+
+mask {
+ position: absolute;
+ left: 100px; right: 0; top: 0; bottom: 0;
+ background: black;
+}
+
+mask2 {
+ position: absolute;
+ left: 0; right: 0; top: 18px; bottom: 0;
+ background: black;
+}
+
+ </style>
+</head>
+<body>
+
+<mask></mask>
+<mask2></mask2>
+<div><input type="file"></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/file/reftest.list b/layout/reftests/forms/input/file/reftest.list
new file mode 100644
index 0000000000..193017a364
--- /dev/null
+++ b/layout/reftests/forms/input/file/reftest.list
@@ -0,0 +1,12 @@
+fuzzy-if(gtkWidget||webrender,0-1,0-34) == simple.html chrome://reftest/content/forms/input/file/simple-ref.xhtml
+fuzzy-if(gtkWidget||webrender,0-1,0-17) == rtl.html chrome://reftest/content/forms/input/file/rtl-ref.xhtml
+fuzzy-if(gtkWidget||webrender,0-1,0-34) == size.html chrome://reftest/content/forms/input/file/simple-ref.xhtml
+fuzzy-if(gtkWidget||webrender,0-1,0-10) == background.html chrome://reftest/content/forms/input/file/background-ref.xhtml
+fuzzy-if(gtkWidget,0-1,0-10) == style.html chrome://reftest/content/forms/input/file/style-ref.xhtml
+!= width-clip.html width-clip-ref.html
+== color-inherit.html color-inherit-ref.html
+fuzzy-if(Android,0-2,0-2) fuzzy-if(OSX,0-34,0-134) fails-if(webrender&&!(cocoaWidget||geckoview)) == dynamic-max-width.html dynamic-max-width-ref.html # bug 1496542 for webrender.
+== label-min-inline-size.html label-min-inline-size-ref.html
+== css-overflow.html css-overflow-ref.html
+== css-display.html css-display-ref.html
+== button-height.html button-height-ref.html
diff --git a/layout/reftests/forms/input/file/rtl-ref.xhtml b/layout/reftests/forms/input/file/rtl-ref.xhtml
new file mode 100644
index 0000000000..eb61d45c74
--- /dev/null
+++ b/layout/reftests/forms/input/file/rtl-ref.xhtml
@@ -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 0000000000..81e841a124
--- /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.xhtml b/layout/reftests/forms/input/file/simple-ref.xhtml
new file mode 100644
index 0000000000..a9bc3cbd94
--- /dev/null
+++ b/layout/reftests/forms/input/file/simple-ref.xhtml
@@ -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 0000000000..03a2a7bde5
--- /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 0000000000..33606f935d
--- /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.xhtml b/layout/reftests/forms/input/file/style-ref.xhtml
new file mode 100644
index 0000000000..20af35b487
--- /dev/null
+++ b/layout/reftests/forms/input/file/style-ref.xhtml
@@ -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 0000000000..5a7c22b251
--- /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;
+ 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 0000000000..76fa4d971d
--- /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 0000000000..a6c746ac8d
--- /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 0000000000..d4acd7e27f
--- /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>
+