diff options
Diffstat (limited to 'layout/reftests/forms/input/file')
25 files changed, 553 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..81d3576a09 --- /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…</html:button><html:label>No file selected.</html:label> + </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..2ad51b2f69 --- /dev/null +++ b/layout/reftests/forms/input/file/reftest.list @@ -0,0 +1,12 @@ +skip-if(ThreadSanitizer) fuzzy(0-1,0-34) == simple.html chrome://reftest/content/forms/input/file/simple-ref.xhtml +fuzzy(0-1,0-17) == rtl.html chrome://reftest/content/forms/input/file/rtl-ref.xhtml +fuzzy(0-1,0-34) == size.html chrome://reftest/content/forms/input/file/simple-ref.xhtml +fuzzy(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 +pref(widget.non-native-theme.webrender,true) fuzzy(0-1,0-5) fuzzy-if(OSX,0-46,0-134) == dynamic-max-width.html dynamic-max-width-ref.html # bug 1496542 for webrender, bug 1724582 for appleSilicon +== 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..6dbe977f46 --- /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…</html:button><html:label>No file selected.</html:label> + </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..a2a39ae7cd --- /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…</html:button><html:label>No file selected.</html:label> + </html:div> + <html:br/> + <html:div class='file'> + <html:button>Browse…</html:button><html:label>No files selected.</html:label> + </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..555c2bd498 --- /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…</html:button><html:label>No file selected.</html:label> + </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..1ab1730478 --- /dev/null +++ b/layout/reftests/forms/input/file/style.css @@ -0,0 +1,63 @@ +:root { color-scheme: light } + +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> + |