summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms/input
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/forms/input')
-rw-r--r--layout/reftests/forms/input/checkbox/checked-native-notref.html2
-rw-r--r--layout/reftests/forms/input/checkbox/checked-native.html2
-rw-r--r--layout/reftests/forms/input/checkbox/checked-notref.html2
-rw-r--r--layout/reftests/forms/input/checkbox/checked.html2
-rw-r--r--layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html31
-rw-r--r--layout/reftests/forms/input/checkbox/gtk-theme-width-height.html30
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html1
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-checked.html1
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html1
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-native-checked.html1
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html1
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html1
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html7
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-selector.html7
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html1
-rw-r--r--layout/reftests/forms/input/checkbox/indeterminate-unchecked.html1
-rw-r--r--layout/reftests/forms/input/checkbox/label-dynamic-ref.html27
-rw-r--r--layout/reftests/forms/input/checkbox/label-dynamic.html37
-rw-r--r--layout/reftests/forms/input/checkbox/radio-stretched-ref.html11
-rw-r--r--layout/reftests/forms/input/checkbox/radio-stretched.html11
-rw-r--r--layout/reftests/forms/input/checkbox/reftest-stylo.list18
-rw-r--r--layout/reftests/forms/input/checkbox/reftest.list14
-rw-r--r--layout/reftests/forms/input/color/block-invalidate-1-ref.html6
-rw-r--r--layout/reftests/forms/input/color/block-invalidate-1.html14
-rw-r--r--layout/reftests/forms/input/color/block-invalidate-2-ref.html9
-rw-r--r--layout/reftests/forms/input/color/block-invalidate-2.html19
-rw-r--r--layout/reftests/forms/input/color/custom-style-1-ref.html19
-rw-r--r--layout/reftests/forms/input/color/custom-style-1.html14
-rw-r--r--layout/reftests/forms/input/color/custom-style-2-ref.html20
-rw-r--r--layout/reftests/forms/input/color/custom-style-2.html16
-rw-r--r--layout/reftests/forms/input/color/input-color-1-ref.html33
-rw-r--r--layout/reftests/forms/input/color/input-color-1.html9
-rw-r--r--layout/reftests/forms/input/color/margin-padding-1-ref.html88
-rw-r--r--layout/reftests/forms/input/color/margin-padding-1.html39
-rw-r--r--layout/reftests/forms/input/color/reference-style.css16
-rw-r--r--layout/reftests/forms/input/color/reftest-stylo.list20
-rw-r--r--layout/reftests/forms/input/color/reftest.list14
-rw-r--r--layout/reftests/forms/input/color/transformations-1-ref.html78
-rw-r--r--layout/reftests/forms/input/color/transformations-1.html35
-rw-r--r--layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html6
-rw-r--r--layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html16
-rw-r--r--layout/reftests/forms/input/datetime/reftest.list13
-rw-r--r--layout/reftests/forms/input/datetime/time-basic.html6
-rw-r--r--layout/reftests/forms/input/datetime/time-border.html6
-rw-r--r--layout/reftests/forms/input/datetime/time-large-font.html6
-rw-r--r--layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html6
-rw-r--r--layout/reftests/forms/input/datetime/time-simple-unthemed.html6
-rw-r--r--layout/reftests/forms/input/datetime/time-width-height.html6
-rw-r--r--layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html15
-rw-r--r--layout/reftests/forms/input/email/1.html7
-rw-r--r--layout/reftests/forms/input/email/2.html18
-rw-r--r--layout/reftests/forms/input/email/3.html19
-rw-r--r--layout/reftests/forms/input/email/ref.html6
-rw-r--r--layout/reftests/forms/input/email/reftest-stylo.list4
-rw-r--r--layout/reftests/forms/input/email/reftest.list3
-rw-r--r--layout/reftests/forms/input/file/background-ref.xul16
-rw-r--r--layout/reftests/forms/input/file/background.html11
-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/reftest-stylo.list20
-rw-r--r--layout/reftests/forms/input/file/reftest.list7
-rw-r--r--layout/reftests/forms/input/file/rtl-ref.xul17
-rw-r--r--layout/reftests/forms/input/file/rtl.html8
-rw-r--r--layout/reftests/forms/input/file/simple-ref.xul14
-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.xul25
-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
-rw-r--r--layout/reftests/forms/input/hidden/border.html14
-rw-r--r--layout/reftests/forms/input/hidden/reftest-stylo.list2
-rw-r--r--layout/reftests/forms/input/hidden/reftest.list1
-rw-r--r--layout/reftests/forms/input/number/focus-handling-ref.html26
-rw-r--r--layout/reftests/forms/input/number/focus-handling.html32
-rw-r--r--layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html16
-rw-r--r--layout/reftests/forms/input/number/not-other-type-unthemed-1.html6
-rw-r--r--layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html6
-rw-r--r--layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html6
-rw-r--r--layout/reftests/forms/input/number/number-auto-width-1-ref.html8
-rw-r--r--layout/reftests/forms/input/number/number-auto-width-1.html8
-rw-r--r--layout/reftests/forms/input/number/number-disabled-ref.html9
-rw-r--r--layout/reftests/forms/input/number/number-disabled.html9
-rw-r--r--layout/reftests/forms/input/number/number-max-height-1-ref.html17
-rw-r--r--layout/reftests/forms/input/number/number-max-height-1.html27
-rw-r--r--layout/reftests/forms/input/number/number-max-height-2-ref.html17
-rw-r--r--layout/reftests/forms/input/number/number-max-height-2.html27
-rw-r--r--layout/reftests/forms/input/number/number-min-height-1-ref.html17
-rw-r--r--layout/reftests/forms/input/number/number-min-height-1.html26
-rw-r--r--layout/reftests/forms/input/number/number-min-height-2-ref.html17
-rw-r--r--layout/reftests/forms/input/number/number-min-height-2.html26
-rw-r--r--layout/reftests/forms/input/number/number-placeholder-ref.html17
-rw-r--r--layout/reftests/forms/input/number/number-placeholder.html24
-rw-r--r--layout/reftests/forms/input/number/number-pseudo-elements-ref.html6
-rw-r--r--layout/reftests/forms/input/number/number-pseudo-elements.html20
-rw-r--r--layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html17
-rw-r--r--layout/reftests/forms/input/number/number-reframe-anon-text-field.html44
-rw-r--r--layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html6
-rw-r--r--layout/reftests/forms/input/number/number-same-as-text-unthemed.html6
-rw-r--r--layout/reftests/forms/input/number/number-selected-ref.html18
-rw-r--r--layout/reftests/forms/input/number/number-selected.html18
-rw-r--r--layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html6
-rw-r--r--layout/reftests/forms/input/number/number-significant-fractional-digits.html17
-rw-r--r--layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html8
-rw-r--r--layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html8
-rw-r--r--layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html8
-rw-r--r--layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html8
-rw-r--r--layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html8
-rw-r--r--layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html8
-rw-r--r--layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html8
-rw-r--r--layout/reftests/forms/input/number/number-similar-to-text-unthemed.html8
-rw-r--r--layout/reftests/forms/input/number/pseudo-classes.html37
-rw-r--r--layout/reftests/forms/input/number/reftest-stylo.list65
-rw-r--r--layout/reftests/forms/input/number/reftest.list54
-rw-r--r--layout/reftests/forms/input/number/show-value-ref.html26
-rw-r--r--layout/reftests/forms/input/number/show-value.html42
-rw-r--r--layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html15
-rw-r--r--layout/reftests/forms/input/percentage/padding-ref.html21
-rw-r--r--layout/reftests/forms/input/percentage/padding.html21
-rw-r--r--layout/reftests/forms/input/percentage/reftest-stylo.list2
-rw-r--r--layout/reftests/forms/input/percentage/reftest.list1
-rw-r--r--layout/reftests/forms/input/radio/checked-native-notref.html2
-rw-r--r--layout/reftests/forms/input/radio/checked-native.html2
-rw-r--r--layout/reftests/forms/input/radio/checked-notref.html2
-rw-r--r--layout/reftests/forms/input/radio/checked.html2
-rw-r--r--layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html31
-rw-r--r--layout/reftests/forms/input/radio/gtk-theme-width-height.html30
-rw-r--r--layout/reftests/forms/input/radio/label-dynamic-ref.html38
-rw-r--r--layout/reftests/forms/input/radio/label-dynamic.html46
-rw-r--r--layout/reftests/forms/input/radio/reftest-stylo.list10
-rw-r--r--layout/reftests/forms/input/radio/reftest.list8
-rw-r--r--layout/reftests/forms/input/range/100pct-common-ref.html6
-rw-r--r--layout/reftests/forms/input/range/75pct-common-ref.html6
-rw-r--r--layout/reftests/forms/input/range/75pct-unthemed-common-ref.html6
-rw-r--r--layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html6
-rw-r--r--layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html7
-rw-r--r--layout/reftests/forms/input/range/direction-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/range/direction-unthemed-1.html7
-rw-r--r--layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html16
-rw-r--r--layout/reftests/forms/input/range/max-prop.html20
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-1-ref.html36
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-1.html30
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-2-ref.html35
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-2.html40
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-3-ref.html35
-rw-r--r--layout/reftests/forms/input/range/moz-range-progress-3.html40
-rw-r--r--layout/reftests/forms/input/range/not-other-type-unthemed-1.html6
-rw-r--r--layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html6
-rw-r--r--layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html6
-rw-r--r--layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html6
-rw-r--r--layout/reftests/forms/input/range/range-orient-block.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-horizontal-rtl.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-inline.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-vertical-rtl.html3
-rw-r--r--layout/reftests/forms/input/range/range-orient-vertical.html3
-rw-r--r--layout/reftests/forms/input/range/range-vlr-orient-block.html3
-rw-r--r--layout/reftests/forms/input/range/range-vlr-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/input/range/range-vlr-orient-inline.html3
-rw-r--r--layout/reftests/forms/input/range/range-vlr-orient-vertical.html3
-rw-r--r--layout/reftests/forms/input/range/range-vlr.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl-orient-block.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl-orient-inline.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl-orient-vertical.html3
-rw-r--r--layout/reftests/forms/input/range/range-vrl.html3
-rw-r--r--layout/reftests/forms/input/range/reftest-stylo.list54
-rw-r--r--layout/reftests/forms/input/range/reftest.list49
-rw-r--r--layout/reftests/forms/input/range/reset-value-ref.html14
-rw-r--r--layout/reftests/forms/input/range/reset-value.html14
-rw-r--r--layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html9
-rw-r--r--layout/reftests/forms/input/range/stepDown-unthemed.html16
-rw-r--r--layout/reftests/forms/input/range/stepDown.html16
-rw-r--r--layout/reftests/forms/input/range/stepUp-unthemed.html16
-rw-r--r--layout/reftests/forms/input/range/stepUp.html16
-rw-r--r--layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html6
-rw-r--r--layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html15
-rw-r--r--layout/reftests/forms/input/range/value-prop-unthemed.html17
-rw-r--r--layout/reftests/forms/input/range/value-prop.html17
-rw-r--r--layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html17
-rw-r--r--layout/reftests/forms/input/range/valueAsNumber-prop.html17
-rw-r--r--layout/reftests/forms/input/reftest-stylo.list14
-rw-r--r--layout/reftests/forms/input/reftest.list14
-rw-r--r--layout/reftests/forms/input/search/1.html7
-rw-r--r--layout/reftests/forms/input/search/2.html18
-rw-r--r--layout/reftests/forms/input/search/3.html19
-rw-r--r--layout/reftests/forms/input/search/ref.html6
-rw-r--r--layout/reftests/forms/input/search/reftest-stylo.list4
-rw-r--r--layout/reftests/forms/input/search/reftest.list3
-rw-r--r--layout/reftests/forms/input/tel/1.html7
-rw-r--r--layout/reftests/forms/input/tel/2.html18
-rw-r--r--layout/reftests/forms/input/tel/3.html19
-rw-r--r--layout/reftests/forms/input/tel/ref.html6
-rw-r--r--layout/reftests/forms/input/tel/reftest-stylo.list4
-rw-r--r--layout/reftests/forms/input/tel/reftest.list3
-rw-r--r--layout/reftests/forms/input/text/baseline-1-ref.html21
-rw-r--r--layout/reftests/forms/input/text/baseline-1.html31
-rw-r--r--layout/reftests/forms/input/text/bounds-1-ref.html11
-rw-r--r--layout/reftests/forms/input/text/bounds-1.html22
-rw-r--r--layout/reftests/forms/input/text/centering-1-ref.xul28
-rw-r--r--layout/reftests/forms/input/text/centering-1.xul39
-rw-r--r--layout/reftests/forms/input/text/dynamic-height-1-ref.xul9
-rw-r--r--layout/reftests/forms/input/text/dynamic-height-1.xul23
-rw-r--r--layout/reftests/forms/input/text/intrinsic-size-ref.html12
-rw-r--r--layout/reftests/forms/input/text/intrinsic-size.html12
-rw-r--r--layout/reftests/forms/input/text/line-height-0.5.html7
-rw-r--r--layout/reftests/forms/input/text/line-height-1.0.html7
-rw-r--r--layout/reftests/forms/input/text/line-height-1.5.html7
-rw-r--r--layout/reftests/forms/input/text/reftest-stylo.list16
-rw-r--r--layout/reftests/forms/input/text/reftest.list10
-rw-r--r--layout/reftests/forms/input/text/select-ref.html18
-rw-r--r--layout/reftests/forms/input/text/select.html21
-rw-r--r--layout/reftests/forms/input/text/size-1-ref.html3
-rw-r--r--layout/reftests/forms/input/text/size-1.html3
-rw-r--r--layout/reftests/forms/input/text/size-2-ref.html5
-rw-r--r--layout/reftests/forms/input/text/size-2.html5
-rw-r--r--layout/reftests/forms/input/url/1.html7
-rw-r--r--layout/reftests/forms/input/url/2.html18
-rw-r--r--layout/reftests/forms/input/url/3.html19
-rw-r--r--layout/reftests/forms/input/url/ref.html6
-rw-r--r--layout/reftests/forms/input/url/reftest-stylo.list4
-rw-r--r--layout/reftests/forms/input/url/reftest.list3
227 files changed, 3260 insertions, 0 deletions
diff --git a/layout/reftests/forms/input/checkbox/checked-native-notref.html b/layout/reftests/forms/input/checkbox/checked-native-notref.html
new file mode 100644
index 000000000..921482afc
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checked-native-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox">
diff --git a/layout/reftests/forms/input/checkbox/checked-native.html b/layout/reftests/forms/input/checkbox/checked-native.html
new file mode 100644
index 000000000..50faa46d2
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checked-native.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox" checked>
diff --git a/layout/reftests/forms/input/checkbox/checked-notref.html b/layout/reftests/forms/input/checkbox/checked-notref.html
new file mode 100644
index 000000000..8e5b55cfb
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checked-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox" style="-moz-appearance:none">
diff --git a/layout/reftests/forms/input/checkbox/checked.html b/layout/reftests/forms/input/checkbox/checked.html
new file mode 100644
index 000000000..b7d651135
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checked.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox" style="-moz-appearance:none" checked>
diff --git a/layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html b/layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html
new file mode 100644
index 000000000..380f52286
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 932506</title>
+ <style>
+
+input { outline:1px solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="overflow:hidden; width:160px;">
+ <div style="float:left; width:799px; border:1px solid blue;">
+ <input type="checkbox" checked style="width:400px; visibility:hidden;">
+ <input type="checkbox" checked style="width:400px; height:100px; visibility:hidden;">
+ </div>
+</div>
+
+
+<input type="checkbox" checked style="width:400px;"><br>
+<input type="checkbox" checked style="height:100px;"><br>
+<input type="checkbox" checked style=""><br>
+
+<input type="checkbox" checked style="width:400px;"><br>
+<input type="checkbox" checked style="height:100px;"><br>
+<input type="checkbox" checked style=""><br>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/gtk-theme-width-height.html b/layout/reftests/forms/input/checkbox/gtk-theme-width-height.html
new file mode 100644
index 000000000..456864e95
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/gtk-theme-width-height.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 932506</title>
+ <style>
+
+input { outline:1px solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="overflow:hidden; width:160px;">
+ <div style="float:left; width:799px; border:1px solid blue;">
+ <input type="checkbox" checked style="width:400px; outline:none;">
+ <input type="checkbox" checked style="width:400px; height:100px; outline:none;">
+ </div>
+</div>
+
+<input type="checkbox" checked style="width:400px; height:1px;"><br>
+<input type="checkbox" checked style="width:1px; height:100px;"><br>
+<input type="checkbox" checked style="width:1px; height:1px;"><br>
+
+<input type="checkbox" checked style="width:400px; height:0;"><br>
+<input type="checkbox" checked style="width:0; height:100px;"><br>
+<input type="checkbox" checked style="width:0; height:0;"><br>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
new file mode 100644
index 000000000..37ea17655
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
@@ -0,0 +1 @@
+<input type="checkbox" checked style="-moz-appearance: none;">
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-checked.html b/layout/reftests/forms/input/checkbox/indeterminate-checked.html
new file mode 100644
index 000000000..7cecf09a0
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-checked.html
@@ -0,0 +1 @@
+<input type="checkbox" id="s" checked style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html
new file mode 100644
index 000000000..cf16667cb
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html
@@ -0,0 +1 @@
+<input type="checkbox" checked>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-checked.html b/layout/reftests/forms/input/checkbox/indeterminate-native-checked.html
new file mode 100644
index 000000000..91097098c
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-native-checked.html
@@ -0,0 +1 @@
+<input type="checkbox" id="s" checked><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html
new file mode 100644
index 000000000..74c06d253
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html
@@ -0,0 +1 @@
+<input type="checkbox">
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html
new file mode 100644
index 000000000..11832f477
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html
@@ -0,0 +1 @@
+<input type="checkbox" id="s"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html b/layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html
new file mode 100644
index 000000000..02266912a
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html
@@ -0,0 +1,7 @@
+<style>
+#s {
+ margin: 50px;
+}
+</style>
+
+<input type="checkbox" id="s"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-selector.html b/layout/reftests/forms/input/checkbox/indeterminate-selector.html
new file mode 100644
index 000000000..eb23819f9
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-selector.html
@@ -0,0 +1,7 @@
+<style>
+#s:indeterminate {
+ margin: 50px;
+}
+</style>
+
+<input type="checkbox" id="s"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
new file mode 100644
index 000000000..1055cbef1
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
@@ -0,0 +1 @@
+<input type="checkbox" style="-moz-appearance: none;">
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html b/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
new file mode 100644
index 000000000..56a8d0955
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
@@ -0,0 +1 @@
+<input type="checkbox" id="s" style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/label-dynamic-ref.html b/layout/reftests/forms/input/checkbox/label-dynamic-ref.html
new file mode 100644
index 000000000..3dbdc48d4
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/label-dynamic-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+
+#c3, #c4 {
+ display: none;
+}
+
+label[for="c1"],
+label[for="c3"] {
+ background-color: yellow;
+}
+
+</style>
+
+</head>
+
+<body>
+
+<div><input type="checkbox" name="test" id="c1" checked><label for="c1">check #c1</label></div>
+<div><input type="checkbox" name="test" id="c2"><label for="c2">check #c2</label></div>
+<div><input type="checkbox" name="test" id="c3" checked><label for="c3">check #c3</label></div>
+<div><input type="checkbox" name="test" id="c4"><label for="c4">check #c4</label></div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/label-dynamic.html b/layout/reftests/forms/input/checkbox/label-dynamic.html
new file mode 100644
index 000000000..cbbce6817
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/label-dynamic.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+
+#c3, #c4 {
+ display: none;
+}
+
+input:checked + label {
+ background-color: yellow;
+}
+
+</style>
+
+<script type="text/javascript">
+
+function toggleAllCheckboxes()
+{
+ for (var i = 1; i <= 4; ++i) {
+ var cb = document.getElementById('c'+i);
+ cb.checked = !cb.checked;
+ }
+}
+
+</script>
+</head>
+
+<body onload="toggleAllCheckboxes();">
+
+<div><input type="checkbox" name="test" id="c1"><label for="c1">check #c1</label></div>
+<div><input type="checkbox" name="test" id="c2" checked><label for="c2">check #c2</label></div>
+<div><input type="checkbox" name="test" id="c3"><label for="c3">check #c3</label></div>
+<div><input type="checkbox" name="test" id="c4" checked><label for="c4">check #c4</label></div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/radio-stretched-ref.html b/layout/reftests/forms/input/checkbox/radio-stretched-ref.html
new file mode 100644
index 000000000..2f2532c0b
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/radio-stretched-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<form>
+ <input type="checkbox"/>
+ <input type="radio"/>
+</form>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/radio-stretched.html b/layout/reftests/forms/input/checkbox/radio-stretched.html
new file mode 100644
index 000000000..159a2cc92
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/radio-stretched.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<form>
+ <input type="checkbox" style="width: auto;">
+ <input type="radio" style="width: auto;">
+</form>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/reftest-stylo.list b/layout/reftests/forms/input/checkbox/reftest-stylo.list
new file mode 100644
index 000000000..11fe7d778
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/reftest-stylo.list
@@ -0,0 +1,18 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== label-dynamic.html label-dynamic.html
+skip-if(B2G||Mulet) fails-if(Android) == radio-stretched.html radio-stretched.html
+# test for bug 464589
+# Initial mulet triage: parity with B2G/B2G Desktop
+== checked.html checked.html
+== checked-native.html checked-native.html
+== checked.html checked.html
+== checked-notref.html checked-notref.html
+== checked-native.html checked-native.html
+== checked-native-notref.html checked-native-notref.html
+== indeterminate-checked.html indeterminate-checked.html
+== indeterminate-unchecked.html indeterminate-unchecked.html
+== indeterminate-native-checked.html indeterminate-native-checked.html
+== indeterminate-native-unchecked.html indeterminate-native-unchecked.html
+== indeterminate-selector.html indeterminate-selector.html
+skip-if(!gtkWidget||Mulet) == gtk-theme-width-height.html gtk-theme-width-height.html
+# bug 1141511: Disable some gtkWidget-dependant reftests on Mulet
diff --git a/layout/reftests/forms/input/checkbox/reftest.list b/layout/reftests/forms/input/checkbox/reftest.list
new file mode 100644
index 000000000..cc485e969
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/reftest.list
@@ -0,0 +1,14 @@
+== label-dynamic.html label-dynamic-ref.html
+fails-if(Android) == radio-stretched.html radio-stretched-ref.html # test for bug 464589
+!= checked.html checked-notref.html
+!= checked-native.html checked-native-notref.html
+!= checked.html about:blank
+!= checked-notref.html about:blank
+!= checked-native.html about:blank
+!= checked-native-notref.html about:blank
+!= indeterminate-checked.html indeterminate-checked-notref.html
+!= indeterminate-unchecked.html indeterminate-unchecked-notref.html
+!= indeterminate-native-checked.html indeterminate-native-checked-notref.html
+!= indeterminate-native-unchecked.html indeterminate-native-unchecked-notref.html
+== indeterminate-selector.html indeterminate-selector-ref.html
+skip-if(!gtkWidget) == gtk-theme-width-height.html gtk-theme-width-height-ref.html
diff --git a/layout/reftests/forms/input/color/block-invalidate-1-ref.html b/layout/reftests/forms/input/color/block-invalidate-1-ref.html
new file mode 100644
index 000000000..027c1e2b5
--- /dev/null
+++ b/layout/reftests/forms/input/color/block-invalidate-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="color" value="#00ff00" />
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/block-invalidate-1.html b/layout/reftests/forms/input/color/block-invalidate-1.html
new file mode 100644
index 000000000..fb79067ad
--- /dev/null
+++ b/layout/reftests/forms/input/color/block-invalidate-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+ <script>
+ function runTest() {
+ var p = document.getElementsByTagName('input')[0];
+ p.value = '#00ff00';
+ document.documentElement.className = '';
+ }
+ window.addEventListener("MozReftestInvalidate", runTest, false);
+ </script>
+ <body>
+ <input type="color" />
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/block-invalidate-2-ref.html b/layout/reftests/forms/input/color/block-invalidate-2-ref.html
new file mode 100644
index 000000000..9def78fad
--- /dev/null
+++ b/layout/reftests/forms/input/color/block-invalidate-2-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <p>Test for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977038">977038</a></p>
+ <form>
+ <input type="color" value="#00ff00" />
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/block-invalidate-2.html b/layout/reftests/forms/input/color/block-invalidate-2.html
new file mode 100644
index 000000000..efc2acb84
--- /dev/null
+++ b/layout/reftests/forms/input/color/block-invalidate-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+ <script>
+ function runTest() {
+ var p = document.getElementsByTagName('input')[0];
+ p.value = '#0000ff'
+ p.defaultValue = '#00ff00';
+ p.form.reset();
+ document.documentElement.className = '';
+ }
+ window.addEventListener("MozReftestInvalidate", runTest, false);
+ </script>
+ <body>
+ <p>Test for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977038">977038</a></p>
+ <form>
+ <input type="color" />
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/custom-style-1-ref.html b/layout/reftests/forms/input/color/custom-style-1-ref.html
new file mode 100644
index 000000000..fa550d83b
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='reference-style.css'>
+ <style>
+ button.input-color {
+ -moz-appearance: button;
+ }
+ div.input-color-swatch {
+ margin-top: 3px;
+ margin-bottom: 3px;
+ }
+ </style>
+ <body>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+
+ </body>
diff --git a/layout/reftests/forms/input/color/custom-style-1.html b/layout/reftests/forms/input/color/custom-style-1.html
new file mode 100644
index 000000000..4aea98b14
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <style>
+ input[type="color"] {
+ -moz-appearance: button;
+ }
+ input[type="color"]::-moz-color-swatch {
+ margin-top: 3px;
+ margin-bottom: 3px;
+ }
+ </style>
+ <body>
+ <input type="color" />
+ </body>
diff --git a/layout/reftests/forms/input/color/custom-style-2-ref.html b/layout/reftests/forms/input/color/custom-style-2-ref.html
new file mode 100644
index 000000000..802af966e
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test for bug 943966</title>
+ <link rel='stylesheet' type='text/css' href='reference-style.css'>
+ <style>
+ button.input-color {
+ height: 15px;
+ width: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=943966">Mozilla Bug 943966</a>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/custom-style-2.html b/layout/reftests/forms/input/color/custom-style-2.html
new file mode 100644
index 000000000..209594b32
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test for bug 943966</title>
+ <style>
+ input[type="color"].tiny {
+ height: 15px;
+ width: 20px;
+ }
+ </style>
+ </head>
+ <body>
+ <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=943966">Mozilla Bug 943966</a>
+ <input class="tiny" type="color" />
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/input-color-1-ref.html b/layout/reftests/forms/input/color/input-color-1-ref.html
new file mode 100644
index 000000000..99087c53c
--- /dev/null
+++ b/layout/reftests/forms/input/color/input-color-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel='stylesheet' type='text/css' href='reference-style.css'>
+ <style>
+ body > button:nth-child(1) > .input-color-swatch { background-color: #000000; }
+ body > button:nth-child(2) > .input-color-swatch { background-color: #000000; }
+ body > button:nth-child(3) > .input-color-swatch { background-color: #00ff00; }
+ body > button:nth-child(4) > .input-color-swatch { background-color: #123456; }
+ </style>
+ </head>
+ <body>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/input-color-1.html b/layout/reftests/forms/input/color/input-color-1.html
new file mode 100644
index 000000000..a351df18f
--- /dev/null
+++ b/layout/reftests/forms/input/color/input-color-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="color" />
+ <input type="color" value="#000000" />
+ <input type="color" value="#00ff00" />
+ <input type="color" value="#123456" />
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/margin-padding-1-ref.html b/layout/reftests/forms/input/color/margin-padding-1-ref.html
new file mode 100644
index 000000000..e32ee72ca
--- /dev/null
+++ b/layout/reftests/forms/input/color/margin-padding-1-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='reference-style.css'>
+ <style>
+ body > button:nth-child(1) { margin: 10px; padding: 0px; }
+ body > button:nth-child(2) { margin: 0px; padding: 10px; }
+ body > button:nth-child(3) { margin: 10px; padding: 10px; }
+ body > button:nth-child(4) { margin: 5px; padding: 5px; }
+ body > button:nth-child(5) { margin: 50px; padding: 50px; }
+ body > button:nth-child(6) { margin: 100px; padding: 100px; }
+ body > button:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > button:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > button:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > button:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > button:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > button:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > button:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > button:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > button:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > button:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/margin-padding-1.html b/layout/reftests/forms/input/color/margin-padding-1.html
new file mode 100644
index 000000000..e394d5d29
--- /dev/null
+++ b/layout/reftests/forms/input/color/margin-padding-1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+ <style>
+ input[type=color]:nth-child(1) { margin: 10px; padding: 0px; }
+ input[type=color]:nth-child(2) { margin: 0px; padding: 10px; }
+ input[type=color]:nth-child(3) { margin: 10px; padding: 10px; }
+ input[type=color]:nth-child(4) { margin: 5px; padding: 5px; }
+ input[type=color]:nth-child(5) { margin: 50px; padding: 50px; }
+ input[type=color]:nth-child(6) { margin: 100px; padding: 100px; }
+ input[type=color]:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ input[type=color]:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ input[type=color]:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ input[type=color]:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ input[type=color]:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ input[type=color]:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ input[type=color]:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ input[type=color]:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ input[type=color]:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ input[type=color]:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/reference-style.css b/layout/reftests/forms/input/color/reference-style.css
new file mode 100644
index 000000000..188b12c31
--- /dev/null
+++ b/layout/reftests/forms/input/color/reference-style.css
@@ -0,0 +1,16 @@
+div.input-color-swatch {
+ /* This should match the styling for ::-moz-color-swatch in forms.css. */
+ width: 100%;
+ height: 100%;
+ min-width: 3px;
+ min-height: 3px;
+ box-sizing: border-box;
+ border: 1px solid grey;
+ display: block;
+ background-color:#000000; /* default color for input type color */
+}
+
+button.input-color {
+ width: 64px;
+ height: 23px;
+}
diff --git a/layout/reftests/forms/input/color/reftest-stylo.list b/layout/reftests/forms/input/color/reftest-stylo.list
new file mode 100644
index 000000000..a1e01b480
--- /dev/null
+++ b/layout/reftests/forms/input/color/reftest-stylo.list
@@ -0,0 +1,20 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Simple test. Should fail on platforms where input type color isn't activated
+# yet. Missing platforms are B2G (bug 875751), Android (bug 875750).
+fails-if(B2G||Mulet||Android) == input-color-1.html input-color-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+default-preferences pref(dom.forms.color,true)
+
+# Despite the "default-preferences" line above, B2G and Android are still
+# excluded from some style in forms.css, which makes the following tests fail.
+fails-if(B2G||Mulet||Android) == margin-padding-1.html margin-padding-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== block-invalidate-1.html block-invalidate-1.html
+== block-invalidate-2.html block-invalidate-2.html
+fuzzy-if(gtkWidget,8,33) fuzzy-if(skiaContent,8,35) fails-if(B2G||Mulet||Android) == transformations-1.html transformations-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) == custom-style-1.html custom-style-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) == custom-style-2.html custom-style-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
diff --git a/layout/reftests/forms/input/color/reftest.list b/layout/reftests/forms/input/color/reftest.list
new file mode 100644
index 000000000..148cb4bad
--- /dev/null
+++ b/layout/reftests/forms/input/color/reftest.list
@@ -0,0 +1,14 @@
+# Simple test. Should fail on platforms where input type color isn't activated
+# yet. The missing platform is Android (bug 875750).
+fails-if(Android) == input-color-1.html input-color-1-ref.html
+
+default-preferences pref(dom.forms.color,true)
+
+# Despite the "default-preferences" line above, Android is still
+# excluded from some style in forms.css, which makes the following tests fail.
+fails-if(Android) == margin-padding-1.html margin-padding-1-ref.html
+== block-invalidate-1.html block-invalidate-1-ref.html
+== block-invalidate-2.html block-invalidate-2-ref.html
+fuzzy-if(gtkWidget,8,33) fuzzy-if(skiaContent,8,35) fails-if(Android) == transformations-1.html transformations-1-ref.html
+fails-if(Android) == custom-style-1.html custom-style-1-ref.html
+fails-if(Android) == custom-style-2.html custom-style-2-ref.html
diff --git a/layout/reftests/forms/input/color/transformations-1-ref.html b/layout/reftests/forms/input/color/transformations-1-ref.html
new file mode 100644
index 000000000..fba5093f7
--- /dev/null
+++ b/layout/reftests/forms/input/color/transformations-1-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='reference-style.css'>
+ <style>
+ body > button:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ body > button:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+ body > button:nth-child(3) { -moz-transform: rotate(30deg); }
+ body > button:nth-child(4) { -moz-transform: scale(2, 4); }
+ body > button:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+ body > button:nth-child(6) { -moz-transform: scale(1, 0.4); }
+ body > button:nth-child(7) { -moz-transform: scale(0.1, 1); }
+ body > button:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+ body > button:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+ body > button:nth-child(10) { -moz-transform: translate(10px, 30px); }
+ body > button:nth-child(11) { -moz-transform: translate(30px, 10px); }
+ body > button:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+ body > button:nth-child(13) { -moz-transform: translate(30px, -10px); }
+ body > button:nth-child(14) { -moz-transform: scale(0, 0); }
+ </style>
+ <body>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ <button class="input-color">
+ <div class="input-color-swatch">
+ </div>
+ </button>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/color/transformations-1.html b/layout/reftests/forms/input/color/transformations-1.html
new file mode 100644
index 000000000..67bb4b3c9
--- /dev/null
+++ b/layout/reftests/forms/input/color/transformations-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <style>
+ input[type=color]:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ input[type=color]:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+ input[type=color]:nth-child(3) { -moz-transform: rotate(30deg); }
+ input[type=color]:nth-child(4) { -moz-transform: scale(2, 4); }
+ input[type=color]:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+ input[type=color]:nth-child(6) { -moz-transform: scale(1, 0.4); }
+ input[type=color]:nth-child(7) { -moz-transform: scale(0.1, 1); }
+ input[type=color]:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+ input[type=color]:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+ input[type=color]:nth-child(10) { -moz-transform: translate(10px, 30px); }
+ input[type=color]:nth-child(11) { -moz-transform: translate(30px, 10px); }
+ input[type=color]:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+ input[type=color]:nth-child(13) { -moz-transform: translate(30px, -10px); }
+ input[type=color]:nth-child(14) { -moz-transform: scale(0, 0); }
+ </style>
+ <body>
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ <input type=color />
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="checkbox" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html
new file mode 100644
index 000000000..31b804602
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when switching to another type, the input element should look
+ like that type (not like an input time element) -->
+ <script type="text/javascript">
+ function setToCheckbox()
+ {
+ document.getElementById("i").type = "checkbox";
+ document.documentElement.className = "";
+ }
+ document.addEventListener("MozReftestInvalidate", setToCheckbox);
+ </script>
+ <body>
+ <input type="time" id="i" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/reftest.list b/layout/reftests/forms/input/datetime/reftest.list
new file mode 100644
index 000000000..0ce2002bd
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/reftest.list
@@ -0,0 +1,13 @@
+default-preferences pref(dom.forms.datetime,true)
+
+# not valid on Android/B2G where type=time looks like type=text
+skip-if(Android||B2G||Mulet) != time-simple-unthemed.html time-simple-unthemed-ref.html
+skip-if(Android||B2G||Mulet) != time-large-font.html time-basic.html
+skip-if(Android||B2G||Mulet) != time-width-height.html time-basic.html
+skip-if(Android||B2G||Mulet) != time-border.html time-basic.html
+# only valid on Android/B2G where type=number looks the same as type=text
+skip-if(!Android&&!B2G&&!Mulet) == time-simple-unthemed.html time-simple-unthemed-ref.html
+
+# type change
+skip-if(Android||B2G||Mulet) == to-time-from-other-type-unthemed.html time-simple-unthemed.html
+skip-if(Android||B2G||Mulet) == from-time-to-other-type-unthemed.html from-time-to-other-type-unthemed-ref.html
diff --git a/layout/reftests/forms/input/datetime/time-basic.html b/layout/reftests/forms/input/datetime/time-basic.html
new file mode 100644
index 000000000..c161b17c2
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-basic.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" value="12:30">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-border.html b/layout/reftests/forms/input/datetime/time-border.html
new file mode 100644
index 000000000..09ffd01d2
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-border.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" value="12:30" style="border:10px solid blue">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-large-font.html b/layout/reftests/forms/input/datetime/time-large-font.html
new file mode 100644
index 000000000..c2f5e956d
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-large-font.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" value="12:30" style="font-size: 32px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html b/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html
new file mode 100644
index 000000000..24dccffea
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-simple-unthemed.html b/layout/reftests/forms/input/datetime/time-simple-unthemed.html
new file mode 100644
index 000000000..023456723
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-simple-unthemed.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-width-height.html b/layout/reftests/forms/input/datetime/time-width-height.html
new file mode 100644
index 000000000..a6de5cdb4
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-width-height.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" style="width:200px; height:50px">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html b/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html
new file mode 100644
index 000000000..1ae398f4c
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: input element changed to time state doesn't look like checkbox state -->
+ <script type="text/javascript">
+ function setToTime()
+ {
+ document.getElementById("i").type = "time";
+ document.documentElement.className = "";
+ }
+ document.addEventListener("MozReftestInvalidate", setToTime);
+ </script>
+ <body>
+ <input type="checkbox" id="i" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/email/1.html b/layout/reftests/forms/input/email/1.html
new file mode 100644
index 000000000..c2591d068
--- /dev/null
+++ b/layout/reftests/forms/input/email/1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: input element in email state looks like in text state -->
+ <body>
+ <input type="email">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/email/2.html b/layout/reftests/forms/input/email/2.html
new file mode 100644
index 000000000..ab1bf2e6b
--- /dev/null
+++ b/layout/reftests/forms/input/email/2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: input element in email state looks like in text state -->
+ <script type="text/javascript">
+ function setToEmail()
+ {
+ document.getElementById('i').type = 'email';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setToEmail(); disableReftestWait();">
+ <input type='checkbox' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/email/3.html b/layout/reftests/forms/input/email/3.html
new file mode 100644
index 000000000..a9fe4400d
--- /dev/null
+++ b/layout/reftests/forms/input/email/3.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when switching to another type, the input element should not look
+ like an input email element -->
+ <script type="text/javascript">
+ function setToCheckbox()
+ {
+ document.getElementById('i').type='checkbox';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setToCheckbox(); disableReftestWait();">
+ <input type='email' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/email/ref.html b/layout/reftests/forms/input/email/ref.html
new file mode 100644
index 000000000..07e5eee7e
--- /dev/null
+++ b/layout/reftests/forms/input/email/ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/email/reftest-stylo.list b/layout/reftests/forms/input/email/reftest-stylo.list
new file mode 100644
index 000000000..021c5f861
--- /dev/null
+++ b/layout/reftests/forms/input/email/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== 1.html 1.html
+== 2.html 2.html
+== 3.html 3.html
diff --git a/layout/reftests/forms/input/email/reftest.list b/layout/reftests/forms/input/email/reftest.list
new file mode 100644
index 000000000..dcca7a3cd
--- /dev/null
+++ b/layout/reftests/forms/input/email/reftest.list
@@ -0,0 +1,3 @@
+== 1.html ref.html
+== 2.html ref.html
+!= 3.html ref.html
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>
+
diff --git a/layout/reftests/forms/input/hidden/border.html b/layout/reftests/forms/input/hidden/border.html
new file mode 100644
index 000000000..ce7dcb2ca
--- /dev/null
+++ b/layout/reftests/forms/input/hidden/border.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+<style type="text/css">
+input {
+ display: block;
+ border: 1px solid #000;
+}
+</style>
+</head>
+<body>
+<input type="hidden">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/hidden/reftest-stylo.list b/layout/reftests/forms/input/hidden/reftest-stylo.list
new file mode 100644
index 000000000..db274e45f
--- /dev/null
+++ b/layout/reftests/forms/input/hidden/reftest-stylo.list
@@ -0,0 +1,2 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== border.html border.html
diff --git a/layout/reftests/forms/input/hidden/reftest.list b/layout/reftests/forms/input/hidden/reftest.list
new file mode 100644
index 000000000..64fa2bda5
--- /dev/null
+++ b/layout/reftests/forms/input/hidden/reftest.list
@@ -0,0 +1 @@
+== border.html about:blank
diff --git a/layout/reftests/forms/input/number/focus-handling-ref.html b/layout/reftests/forms/input/number/focus-handling-ref.html
new file mode 100644
index 000000000..e07f83f99
--- /dev/null
+++ b/layout/reftests/forms/input/number/focus-handling-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- In this case we're using reftest-wait to make sure the test doesn't
+ get snapshotted before it's been focused. We're not testing
+ invalidation so we don't need to listen for MozReftestInvalidate.
+ -->
+ <head>
+ <meta charset="utf-8">
+ <script>
+
+function end() {
+ setTimeout(function() {
+ document.documentElement.className = "";
+ }, 0);
+}
+
+ </script>
+ </head>
+ <body>
+ <input style="-moz-appearance:none;"><br>
+ <input autofocus onfocus="end();"
+ style="-moz-appearance:none;">
+ <!-- div to cover spin box area for type=number to type=text comparison -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/focus-handling.html b/layout/reftests/forms/input/number/focus-handling.html
new file mode 100644
index 000000000..b54f83a56
--- /dev/null
+++ b/layout/reftests/forms/input/number/focus-handling.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- In this case we're using reftest-wait to make sure the test doesn't
+ get snapshotted before it's been focused. We're not testing
+ invalidation so we don't need to listen for MozReftestInvalidate.
+ -->
+ <head>
+ <meta charset="utf-8">
+ <script>
+
+function begin() {
+ document.getElementsByTagName('input')[1].focus();
+}
+
+function end() {
+ setTimeout(function() {
+ document.documentElement.className = "";
+ }, 0);
+}
+
+ </script>
+ </head>
+ <body>
+ <input type='number' autofocus onfocus="begin();"
+ style="-moz-appearance:none;"><br>
+ <input type='number' onfocus="end();"
+ style="-moz-appearance:none;">
+ <!-- div to cover spin box area for type=number to type=text comparison -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="checkbox" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
new file mode 100644
index 000000000..561b39bec
--- /dev/null
+++ b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when switching to another type, the input element should look
+ like that type (not like an input number element) -->
+ <script type="text/javascript">
+ function setToCheckbox()
+ {
+ document.getElementById('i').type='checkbox';
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setToCheckbox);
+ </script>
+ <body>
+ <input type='number' id='i' style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html
new file mode 100644
index 000000000..7f0d427b4
--- /dev/null
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" value="1" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
new file mode 100644
index 000000000..7c5a4dcac
--- /dev/null
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" value="1" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="checkbox" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-auto-width-1-ref.html b/layout/reftests/forms/input/number/number-auto-width-1-ref.html
new file mode 100644
index 000000000..50b7b7e04
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-auto-width-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" style="-moz-appearance:none; width:auto;">
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-auto-width-1.html b/layout/reftests/forms/input/number/number-auto-width-1.html
new file mode 100644
index 000000000..5c9cc0abe
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-auto-width-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" style="-moz-appearance:none; width:auto;">
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-disabled-ref.html b/layout/reftests/forms/input/number/number-disabled-ref.html
new file mode 100644
index 000000000..f3c9d4d56
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-disabled-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" disabled
+ style="-moz-appearance: none"><!-- Workaround for bug 1223198 -->
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-disabled.html b/layout/reftests/forms/input/number/number-disabled.html
new file mode 100644
index 000000000..b4acb20a7
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-disabled.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" disabled
+ style="-moz-appearance: none"><!-- Workaround for bug 1223198 -->
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-1-ref.html b/layout/reftests/forms/input/number/number-max-height-1-ref.html
new file mode 100644
index 000000000..5f17a6242
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+div {
+ border: 3px solid black;
+ width: 308px;
+ height: 108px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-1.html b/layout/reftests/forms/input/number/number-max-height-1.html
new file mode 100644
index 000000000..bf671a0f9
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+input {
+ border: 3px solid black;
+ padding: 4px;
+ width: 300px;
+ height: 300px;
+ max-height: 100px;
+ box-sizing: content-box;
+ /* hide the spin buttons: */
+ -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+ /* get rid of background gradient for Firefox OS */
+ background-color: transparent ! important;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type="number">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-2-ref.html b/layout/reftests/forms/input/number/number-max-height-2-ref.html
new file mode 100644
index 000000000..8b654e7f9
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+div {
+ border: 3px solid black;
+ width: 294px;
+ height: 94px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-2.html b/layout/reftests/forms/input/number/number-max-height-2.html
new file mode 100644
index 000000000..ff118ea23
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+input {
+ border: 3px solid black;
+ padding: 4px;
+ width: 300px;
+ height: 300px;
+ max-height: 100px;
+ box-sizing: border-box;
+ /* hide the spin buttons: */
+ -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+ /* get rid of background gradient for Firefox OS */
+ background-color: transparent ! important;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type="number">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-1-ref.html b/layout/reftests/forms/input/number/number-min-height-1-ref.html
new file mode 100644
index 000000000..5f17a6242
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+div {
+ border: 3px solid black;
+ width: 308px;
+ height: 108px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-1.html b/layout/reftests/forms/input/number/number-min-height-1.html
new file mode 100644
index 000000000..75923b98b
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+input {
+ border: 3px solid black;
+ padding: 4px;
+ width: 300px;
+ min-height: 100px;
+ box-sizing: content-box;
+ /* hide the spin buttons: */
+ -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+ /* get rid of background gradient for Firefox OS */
+ background-color: transparent ! important;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type="number">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-2-ref.html b/layout/reftests/forms/input/number/number-min-height-2-ref.html
new file mode 100644
index 000000000..8b654e7f9
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+div {
+ border: 3px solid black;
+ width: 294px;
+ height: 94px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-2.html b/layout/reftests/forms/input/number/number-min-height-2.html
new file mode 100644
index 000000000..9f69e1eae
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+input {
+ border: 3px solid black;
+ padding: 4px;
+ width: 300px;
+ min-height: 100px;
+ box-sizing: border-box;
+ /* hide the spin buttons: */
+ -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+ /* get rid of background gradient for Firefox OS */
+ background-color: transparent ! important;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type="number">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-placeholder-ref.html b/layout/reftests/forms/input/number/number-placeholder-ref.html
new file mode 100644
index 000000000..607627243
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-placeholder-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+input {
+ width: 15em;
+ color: blue;
+ font-style: italic;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type="number" value="123">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-placeholder.html b/layout/reftests/forms/input/number/number-placeholder.html
new file mode 100644
index 000000000..5018255ca
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-placeholder.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+input {
+ width: 15em;
+}
+
+input[type=number]::placeholder {
+ color: blue;
+ opacity: 1.0;
+}
+
+input[type=number]::-moz-placeholder {
+ font-style: italic;
+ opacity: 1.0;
+}
+ </style>
+ </head>
+ <body>
+ <input type="number" placeholder="123">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-pseudo-elements-ref.html b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html
new file mode 100644
index 000000000..263aeff1f
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-pseudo-elements.html b/layout/reftests/forms/input/number/number-pseudo-elements.html
new file mode 100644
index 000000000..33cf40fcf
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-pseudo-elements.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+/* None of these selectors should match from content */
+input[type=number]::-moz-number-wrapper,
+input[type=number]::-moz-number-text,
+input[type=number]::-moz-number-spin-box,
+input[type=number]::-moz-number-spin-up,
+input[type=number]::-moz-number-spin-down {
+ background-color: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type="number" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html b/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html
new file mode 100644
index 000000000..aa58e491e
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+input {
+ font-size: 30pt;
+ background-color: lightblue;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type="number">
+ </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/number-reframe-anon-text-field.html b/layout/reftests/forms/input/number/number-reframe-anon-text-field.html
new file mode 100644
index 000000000..8120b67d6
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-reframe-anon-text-field.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <style>
+
+input {
+ font-size: 30pt;
+ background-color: lightblue;
+}
+
+ </style>
+ <script>
+
+document.addEventListener("DOMContentLoaded", function() {
+ document.body.style.backgroundImage = "none";
+}, false);
+
+function PostRebuildAllStyleDataEvent() {
+ // trigger http://mxr.mozilla.org/mozilla-central/source/layout/base/RestyleManager.cpp?rev=a8b06549f680#1490
+ var m = document.createElementNS("http://www.w3.org/1998/Math/MathML", "math");
+ document.head.appendChild(m);
+ document.head.removeChild(m);
+}
+
+function reframe() {
+ PostRebuildAllStyleDataEvent();
+ document.documentElement.className = "";
+}
+
+document.addEventListener("MozReftestInvalidate", function() {
+ // Calling reframe now would be too early to reproduce the bug that we're
+ // testing for. Note that in the event that we start faling this test this
+ // timeout may make the failure seem intermittent when in fact we would
+ // always fail if it was longer.
+ setTimeout(reframe, 500);
+}, false);
+
+ </script>
+ </head>
+ <body>
+ <input type="number">
+ </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html b/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html
new file mode 100644
index 000000000..ceaa14d85
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" style="-moz-appearance:none; width:200px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-same-as-text-unthemed.html b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html
new file mode 100644
index 000000000..fddcc33eb
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" style="-moz-appearance:none; width:200px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-selected-ref.html b/layout/reftests/forms/input/number/number-selected-ref.html
new file mode 100644
index 000000000..10fea8f47
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-selected-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <script>
+
+document.addEventListener("MozReftestInvalidate", function() {
+ document.getElementById("i").select();
+ document.documentElement.className = "";
+}, false);
+
+ </script>
+ </head>
+ <body>
+ <input id="i" type="text" value="123">
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-selected.html b/layout/reftests/forms/input/number/number-selected.html
new file mode 100644
index 000000000..614b12718
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-selected.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <script>
+
+document.addEventListener("MozReftestInvalidate", function() {
+ document.getElementById("i").select();
+ document.documentElement.className = "";
+}, false);
+
+ </script>
+ </head>
+ <body>
+ <input id="i" type="number" value="123">
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html b/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html
new file mode 100644
index 000000000..d57683025
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" value="1.00100000000001" style="width:100%;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-significant-fractional-digits.html b/layout/reftests/forms/input/number/number-significant-fractional-digits.html
new file mode 100644
index 000000000..bb1654428
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-significant-fractional-digits.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <script>
+
+document.addEventListener("MozReftestInvalidate", function() {
+ document.getElementById("i").stepUp();
+ document.documentElement.className = "";
+}, false);
+
+ </script>
+ </head>
+ <body>
+ <input id="i" type="number" value="1.001" step="0.00000000000001"
+ style="width:100%;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
new file mode 100644
index 000000000..abb0b240d
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" style="-moz-appearance:none; width:200px;">
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
new file mode 100644
index 000000000..79644edc8
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body style="direction: rtl">
+ <input type="text" style="-moz-appearance:none; width:200px;" value="1">
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
new file mode 100644
index 000000000..36ffc0629
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body style="direction: rtl">
+ <input type="number" style="-moz-appearance:none; width:200px;" value="1">
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
new file mode 100644
index 000000000..6deed4891
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-lr;">
+ <body>
+ <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+ <!-- div to cover spin box area -->
+ <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
new file mode 100644
index 000000000..7a7883062
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-lr;">
+ <body>
+ <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+ <!-- div to cover spin box area -->
+ <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
new file mode 100644
index 000000000..73a537387
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-rl;">
+ <body>
+ <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+ <!-- div to cover spin box area -->
+ <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
new file mode 100644
index 000000000..3bc3a388a
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-rl;">
+ <body>
+ <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+ <!-- div to cover spin box area -->
+ <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
new file mode 100644
index 000000000..f8c2ce65d
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" style="-moz-appearance:none; width:200px;">
+ <!-- div to cover spin box area -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/pseudo-classes.html b/layout/reftests/forms/input/number/pseudo-classes.html
new file mode 100644
index 000000000..a0c62f721
--- /dev/null
+++ b/layout/reftests/forms/input/number/pseudo-classes.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Test pseudo-classes on number controls</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1250315">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#rw-pseudos">
+ <link rel="match" href="about:blank">
+ <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+#t1:-moz-read-only { display:none; }
+#t1:-moz-read-write { display:block; }
+
+#t2:-moz-read-write { display:none; }
+#t2:-moz-read-only { display:block; }
+
+#t3:disabled { display:none; }
+#t3:enabled { display:block; }
+
+#t4:enabled { display:none; }
+#t4:disabled { display:block; }
+
+ </style>
+</head>
+<body>
+
+<input id=t1 type=number readonly>
+<input id=t2 type=number>
+<input id=t3 type=number disabled>
+<input id=t4 type=number>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/number/reftest-stylo.list b/layout/reftests/forms/input/number/reftest-stylo.list
new file mode 100644
index 000000000..8a10476d7
--- /dev/null
+++ b/layout/reftests/forms/input/number/reftest-stylo.list
@@ -0,0 +1,65 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences pref(dom.forms.number,true)
+
+# sanity checks:
+# not valid on Android/B2G where type=number looks like type=text
+skip skip-if(Android||B2G||Mulet) == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip skip-if(Android||B2G||Mulet) == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+# only valid on Android/B2G where type=number looks the same as type=text
+skip-if(!Android&&!B2G&&!Mulet) == number-same-as-text-unthemed.html number-same-as-text-unthemed.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# should look the same as type=text, except for the spin box
+skip == number-similar-to-text-unthemed.html number-similar-to-text-unthemed.html
+skip == number-similar-to-text-unthemed-rtl.html number-similar-to-text-unthemed-rtl.html
+skip == number-similar-to-text-unthemed-vertical-lr.html number-similar-to-text-unthemed-vertical-lr.html
+skip == number-similar-to-text-unthemed-vertical-rl.html number-similar-to-text-unthemed-vertical-rl.html
+
+# dynamic type changes:
+fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),64,4) fuzzy-if(cocoaWidget,63,4) fuzzy-if(skiaContent,2,5) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1.html
+# skip fuzzy-if(skiaContent,2,5) == from-number-to-other-type-unthemed-1.html from-number-to-other-type-unthemed-1.html
+
+# dynamic value changes:
+# skip fuzzy-if(skiaContent,2,13) == show-value.html show-value.html
+
+# disabled
+skip == number-disabled.html number-disabled.html
+
+# auto width:
+skip == number-auto-width-1.html number-auto-width-1.html
+
+# min-height/max-height tests:
+skip skip-if(B2G||Mulet||Android) == number-min-height-1.html number-min-height-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip skip-if(B2G||Mulet||Android) == number-min-height-2.html number-min-height-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip skip-if(B2G||Mulet||Android) == number-max-height-1.html number-max-height-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip skip-if(B2G||Mulet||Android) == number-max-height-2.html number-max-height-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# number of significant fractional digits:
+skip == number-significant-fractional-digits.html number-significant-fractional-digits.html
+
+# focus
+# autofocus is disabled on B2G
+# https://bugzilla.mozilla.org/show_bug.cgi?id=965763
+# skip skip-if(B2G||Mulet) fuzzy-if(skiaContent,2,5) needs-focus == focus-handling.html focus-handling.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# select
+skip == number-selected.html number-selected.html
+
+# pseudo-elements not usable from content:
+skip == number-pseudo-elements.html number-pseudo-elements.html
+
+skip == number-placeholder.html number-placeholder.html
+
+# check that if the anonymous text control is reframed, we reframe the whole
+# number control (the fuzzy is for the top-right and bottom-left of the border
+# bevel which gets slightly different antialiasing after invalidation):
+skip == number-reframe-anon-text-field.html number-reframe-anon-text-field.html
+
+skip == pseudo-classes.html pseudo-classes.html
diff --git a/layout/reftests/forms/input/number/reftest.list b/layout/reftests/forms/input/number/reftest.list
new file mode 100644
index 000000000..ecf05ce15
--- /dev/null
+++ b/layout/reftests/forms/input/number/reftest.list
@@ -0,0 +1,54 @@
+default-preferences pref(dom.forms.number,true)
+
+# sanity checks:
+# not valid on Android where type=number looks like type=text
+skip-if(Android) != not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html
+skip-if(Android) != not-other-type-unthemed-1.html not-other-type-unthemed-1b-notref.html
+# only valid on Android where type=number looks the same as type=text
+skip-if(!Android) == number-same-as-text-unthemed.html number-same-as-text-unthemed-ref.html
+
+# should look the same as type=text, except for the spin box
+== number-similar-to-text-unthemed.html number-similar-to-text-unthemed-ref.html
+== number-similar-to-text-unthemed-rtl.html number-similar-to-text-unthemed-rtl-ref.html
+== number-similar-to-text-unthemed-vertical-lr.html number-similar-to-text-unthemed-vertical-lr-ref.html
+== number-similar-to-text-unthemed-vertical-rl.html number-similar-to-text-unthemed-vertical-rl-ref.html
+
+# dynamic type changes:
+fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),64,4) fuzzy-if(cocoaWidget,63,4) fuzzy-if(skiaContent,2,5) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1-ref.html
+fuzzy-if(skiaContent,2,5) == from-number-to-other-type-unthemed-1.html from-number-to-other-type-unthemed-1-ref.html
+
+# dynamic value changes:
+fuzzy-if(skiaContent,2,13) == show-value.html show-value-ref.html
+
+# disabled
+== number-disabled.html number-disabled-ref.html
+
+# auto width:
+== number-auto-width-1.html number-auto-width-1-ref.html
+
+# min-height/max-height tests:
+skip-if(Android) == number-min-height-1.html number-min-height-1-ref.html
+skip-if(Android) == number-min-height-2.html number-min-height-2-ref.html
+skip-if(Android) == number-max-height-1.html number-max-height-1-ref.html
+skip-if(Android) == number-max-height-2.html number-max-height-2-ref.html
+
+# number of significant fractional digits:
+== number-significant-fractional-digits.html number-significant-fractional-digits-ref.html
+
+# focus
+fuzzy-if(skiaContent,2,5) needs-focus == focus-handling.html focus-handling-ref.html
+
+# select
+== number-selected.html number-selected-ref.html
+
+# pseudo-elements not usable from content:
+== number-pseudo-elements.html number-pseudo-elements-ref.html
+
+== number-placeholder.html number-placeholder-ref.html
+
+# check that if the anonymous text control is reframed, we reframe the whole
+# number control (the fuzzy is for the top-right and bottom-left of the border
+# bevel which gets slightly different antialiasing after invalidation):
+fuzzy(128,4) == number-reframe-anon-text-field.html number-reframe-anon-text-field-ref.html
+
+== pseudo-classes.html about:blank
diff --git a/layout/reftests/forms/input/number/show-value-ref.html b/layout/reftests/forms/input/number/show-value-ref.html
new file mode 100644
index 000000000..c3d2c5564
--- /dev/null
+++ b/layout/reftests/forms/input/number/show-value-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <style>
+
+input {
+ -moz-appearance: none;
+}
+
+ </style>
+ </head>
+ <body>
+ <input value='142'><br>
+ <input value='142'><br>
+ <input value='142'><br>
+ <input value='142'><br>
+ <input value='142'><br>
+ <form>
+ <input value='142'>
+ </form>
+ <!-- div to cover spin box area for type=number to type=text comparison -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:400px; top:0px; left:100px;">
+ </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/show-value.html b/layout/reftests/forms/input/number/show-value.html
new file mode 100644
index 000000000..5aae9922e
--- /dev/null
+++ b/layout/reftests/forms/input/number/show-value.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+ <head>
+ <meta charset="utf-8">
+ <style>
+
+input {
+ -moz-appearance: none;
+}
+
+ </style>
+ <script>
+// Using "142" as the magic number as "1" in a monospace font should not have
+// stray leading or trailing antialised pixels that get clipped unexpectedly.
+
+function run() {
+ var numbers = document.getElementsByTagName('input');
+ numbers[2].style.display = 'inline-block'; // none -> inline-block
+ numbers[3].setAttribute('value', '142');
+ numbers[4].value = '142';
+ numbers[5].varue = '1337'; // deliberately misspelt - should not set value
+ document.forms[0].reset(); // numbers[5] value should be 42 again.
+ document.documentElement.className = '';
+}
+
+document.addEventListener("MozReftestInvalidate", run);
+
+ </script>
+ </head>
+ <body onload="run();">
+ <input type='number' value='142'><br>
+ <input value='142' type='number'><br>
+ <input type='number' value='142' style="display: none;"><br>
+ <input type='number' value='1337'><br>
+ <input type='number' value='1337'><br>
+ <form>
+ <input type='number' value='142'>
+ </form>
+ <!-- div to cover spin box area for type=number to type=text comparison -->
+ <div style="display:block; position:absolute; background-color:black; width:200px; height:400px; top:0px; left:100px;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
new file mode 100644
index 000000000..263aeff1f
--- /dev/null
+++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
new file mode 100644
index 000000000..b0beffa56
--- /dev/null
+++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: input element changed to number state doesn't look like checkbox state -->
+ <script type="text/javascript">
+ function setToNumber()
+ {
+ document.getElementById('i').type='number';
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setToNumber);
+ </script>
+ <body>
+ <input type='checkbox' id='i' style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/percentage/padding-ref.html b/layout/reftests/forms/input/percentage/padding-ref.html
new file mode 100644
index 000000000..31dac1b36
--- /dev/null
+++ b/layout/reftests/forms/input/percentage/padding-ref.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+ <head>
+ <style>
+ .container {
+ width: 400px;
+ background: #ddd;
+ }
+ .text-input {
+ width: 200px; /* 50% */
+ padding: 40px; /* 10% */
+ background: #fff;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <input type="text" class="text-input" />
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/percentage/padding.html b/layout/reftests/forms/input/percentage/padding.html
new file mode 100644
index 000000000..7b792595b
--- /dev/null
+++ b/layout/reftests/forms/input/percentage/padding.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+ <head>
+ <style>
+ .container {
+ width: 400px;
+ background: #ddd;
+ }
+ .text-input {
+ width: 50%; /* 200px */
+ padding: 10%; /* 40px */
+ background: #fff;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <input type="text" class="text-input" />
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/percentage/reftest-stylo.list b/layout/reftests/forms/input/percentage/reftest-stylo.list
new file mode 100644
index 000000000..6f9069ce2
--- /dev/null
+++ b/layout/reftests/forms/input/percentage/reftest-stylo.list
@@ -0,0 +1,2 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== padding.html padding.html
diff --git a/layout/reftests/forms/input/percentage/reftest.list b/layout/reftests/forms/input/percentage/reftest.list
new file mode 100644
index 000000000..5d9f72902
--- /dev/null
+++ b/layout/reftests/forms/input/percentage/reftest.list
@@ -0,0 +1 @@
+== padding.html padding-ref.html
diff --git a/layout/reftests/forms/input/radio/checked-native-notref.html b/layout/reftests/forms/input/radio/checked-native-notref.html
new file mode 100644
index 000000000..c9483ac05
--- /dev/null
+++ b/layout/reftests/forms/input/radio/checked-native-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio">
diff --git a/layout/reftests/forms/input/radio/checked-native.html b/layout/reftests/forms/input/radio/checked-native.html
new file mode 100644
index 000000000..7e7673afd
--- /dev/null
+++ b/layout/reftests/forms/input/radio/checked-native.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio" checked>
diff --git a/layout/reftests/forms/input/radio/checked-notref.html b/layout/reftests/forms/input/radio/checked-notref.html
new file mode 100644
index 000000000..e30a1ef39
--- /dev/null
+++ b/layout/reftests/forms/input/radio/checked-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio" style="-moz-appearance:none">
diff --git a/layout/reftests/forms/input/radio/checked.html b/layout/reftests/forms/input/radio/checked.html
new file mode 100644
index 000000000..37aed5826
--- /dev/null
+++ b/layout/reftests/forms/input/radio/checked.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio" style="-moz-appearance:none" checked>
diff --git a/layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html b/layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html
new file mode 100644
index 000000000..65b31236c
--- /dev/null
+++ b/layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 932506</title>
+ <style>
+
+input { outline:1px solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="overflow:hidden; width:160px;">
+ <div style="float:left; width:799px; border:1px solid blue;">
+ <input type="radio" checked style="width:400px; visibility:hidden;">
+ <input type="radio" checked style="width:400px; height:100px; visibility:hidden;">
+ </div>
+</div>
+
+
+<input type="radio" checked style="width:400px;"><br>
+<input type="radio" checked style="height:100px;"><br>
+<input type="radio" checked style=""><br>
+
+<input type="radio" checked style="width:400px;"><br>
+<input type="radio" checked style="height:100px;"><br>
+<input type="radio" checked style=""><br>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/radio/gtk-theme-width-height.html b/layout/reftests/forms/input/radio/gtk-theme-width-height.html
new file mode 100644
index 000000000..3c336f2c8
--- /dev/null
+++ b/layout/reftests/forms/input/radio/gtk-theme-width-height.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 932506</title>
+ <style>
+
+input { outline:1px solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="overflow:hidden; width:160px;">
+ <div style="float:left; width:799px; border:1px solid blue;">
+ <input type="radio" checked style="width:400px; outline:none;">
+ <input type="radio" checked style="width:400px; height:100px; outline:none;">
+ </div>
+</div>
+
+<input type="radio" checked style="width:400px; height:1px;"><br>
+<input type="radio" checked style="width:1px; height:100px;"><br>
+<input type="radio" checked style="width:1px; height:1px;"><br>
+
+<input type="radio" checked style="width:400px; height:0;"><br>
+<input type="radio" checked style="width:0; height:100px;"><br>
+<input type="radio" checked style="width:0; height:0;"><br>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/radio/label-dynamic-ref.html b/layout/reftests/forms/input/radio/label-dynamic-ref.html
new file mode 100644
index 000000000..5b0501bb8
--- /dev/null
+++ b/layout/reftests/forms/input/radio/label-dynamic-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+
+.hideradios input {
+ display: none;
+}
+
+label[for="a2"],
+label[for="b2"] {
+ background-color: yellow;
+}
+
+</style>
+
+</head>
+
+<body>
+
+<div>
+<div><input type="radio" name="a" id="a1"><label for="a1">radio #a1</label></div>
+<div><input type="radio" name="a" id="a2" checked><label for="a2">radio #a2</label></div>
+<div><input type="radio" name="a" id="a3"><label for="a3">radio #a3</label></div>
+<div><input type="radio" name="a" id="a4"><label for="a4">radio #a4</label></div>
+<div><input type="radio" name="a" id="a5"><label for="a5">radio #a5</label></div>
+</div>
+
+<div class="hideradios">
+<div><input type="radio" name="b" id="b1"><label for="b1">radio #b1</label></div>
+<div><input type="radio" name="b" id="b2" checked><label for="b2">radio #b2</label></div>
+<div><input type="radio" name="b" id="b3"><label for="b3">radio #b3</label></div>
+<div><input type="radio" name="b" id="b4"><label for="b4">radio #b4</label></div>
+<div><input type="radio" name="b" id="b5"><label for="b5">radio #b5</label></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/radio/label-dynamic.html b/layout/reftests/forms/input/radio/label-dynamic.html
new file mode 100644
index 000000000..143a0fb6d
--- /dev/null
+++ b/layout/reftests/forms/input/radio/label-dynamic.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+
+.hideradios input {
+ display: none;
+}
+
+input:checked + label {
+ background-color: yellow;
+}
+
+</style>
+
+<script type="text/javascript">
+
+function chooseSecondItems()
+{
+ document.getElementById("a2").checked = true;
+ document.getElementById("b2").checked = true;
+}
+
+</script>
+</head>
+
+<body onload="chooseSecondItems();">
+
+<div>
+<div><input type="radio" name="a" id="a1"><label for="a1">radio #a1</label></div>
+<div><input type="radio" name="a" id="a2"><label for="a2">radio #a2</label></div>
+<div><input type="radio" name="a" id="a3"><label for="a3">radio #a3</label></div>
+<div><input type="radio" name="a" id="a4" checked><label for="a4">radio #a4</label></div>
+<div><input type="radio" name="a" id="a5"><label for="a5">radio #a5</label></div>
+</div>
+
+<div class="hideradios">
+<div><input type="radio" name="b" id="b1"><label for="b1">radio #b1</label></div>
+<div><input type="radio" name="b" id="b2"><label for="b2">radio #b2</label></div>
+<div><input type="radio" name="b" id="b3"><label for="b3">radio #b3</label></div>
+<div><input type="radio" name="b" id="b4" checked><label for="b4">radio #b4</label></div>
+<div><input type="radio" name="b" id="b5"><label for="b5">radio #b5</label></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/radio/reftest-stylo.list b/layout/reftests/forms/input/radio/reftest-stylo.list
new file mode 100644
index 000000000..7f7adc33b
--- /dev/null
+++ b/layout/reftests/forms/input/radio/reftest-stylo.list
@@ -0,0 +1,10 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== label-dynamic.html label-dynamic.html
+== checked.html checked.html
+== checked-native.html checked-native.html
+== checked.html checked.html
+== checked-notref.html checked-notref.html
+== checked-native.html checked-native.html
+== checked-native-notref.html checked-native-notref.html
+skip-if(!gtkWidget||Mulet) == gtk-theme-width-height.html gtk-theme-width-height.html
+# bug 1141511: Disable some gtkWidget-dependant reftests on Mulet
diff --git a/layout/reftests/forms/input/radio/reftest.list b/layout/reftests/forms/input/radio/reftest.list
new file mode 100644
index 000000000..1aaec422d
--- /dev/null
+++ b/layout/reftests/forms/input/radio/reftest.list
@@ -0,0 +1,8 @@
+== label-dynamic.html label-dynamic-ref.html
+!= checked.html checked-notref.html
+!= checked-native.html checked-native-notref.html
+!= checked.html about:blank
+!= checked-notref.html about:blank
+!= checked-native.html about:blank
+!= checked-native-notref.html about:blank
+skip-if(!gtkWidget) == gtk-theme-width-height.html gtk-theme-width-height-ref.html
diff --git a/layout/reftests/forms/input/range/100pct-common-ref.html b/layout/reftests/forms/input/range/100pct-common-ref.html
new file mode 100644
index 000000000..ef65c9297
--- /dev/null
+++ b/layout/reftests/forms/input/range/100pct-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type=range value=100 max=100>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/75pct-common-ref.html b/layout/reftests/forms/input/range/75pct-common-ref.html
new file mode 100644
index 000000000..929887d65
--- /dev/null
+++ b/layout/reftests/forms/input/range/75pct-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type=range value=75>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
new file mode 100644
index 000000000..a4b73e23a
--- /dev/null
+++ b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type=range value=75 style="-moz-appearance:none">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
new file mode 100644
index 000000000..3103fc721
--- /dev/null
+++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="range" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
new file mode 100644
index 000000000..d9514542f
--- /dev/null
+++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: that range with value=70 is different to the default value=50. -->
+ <body>
+ <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/direction-unthemed-1-ref.html b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html
new file mode 100644
index 000000000..f2758db17
--- /dev/null
+++ b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type='range' value=30 style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/direction-unthemed-1.html b/layout/reftests/forms/input/range/direction-unthemed-1.html
new file mode 100644
index 000000000..162d55504
--- /dev/null
+++ b/layout/reftests/forms/input/range/direction-unthemed-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: that direction:rtl behaves correctly -->
+ <body>
+ <input type='range' value=70 style="-moz-appearance:none; direction:rtl;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="checkbox" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
new file mode 100644
index 000000000..0e1fffaf1
--- /dev/null
+++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when switching to another type, the input element should look
+ like that type (not like an input range element) -->
+ <script type="text/javascript">
+ function setToCheckbox()
+ {
+ document.getElementById('i').type='checkbox';
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setToCheckbox);
+ </script>
+ <body>
+ <input type='range' id='i' style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/max-prop.html b/layout/reftests/forms/input/range/max-prop.html
new file mode 100644
index 000000000..18a018330
--- /dev/null
+++ b/layout/reftests/forms/input/range/max-prop.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'max' IDL property, the thumb of the range
+ should be moved to the appropriate position. This test also
+ sets the max to less than the current value which checks that the
+ rendering code handles repositioning correctly in the case that
+ sanitization of the value is needed for a non-value change. -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').max = "10";
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' max=100>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-1-ref.html b/layout/reftests/forms/input/range/moz-range-progress-1-ref.html
new file mode 100644
index 000000000..73af6dcb0
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+div {
+ margin: 0;
+ padding: 0;
+}
+
+.range {
+ display: inline-block;
+ position: relative;
+ width: 200px;
+ height: 20px;
+ background-color: blue;
+}
+
+.range-progress {
+ display: inline-block;
+ position: absolute;
+ top: 5px;
+ width: 50px;
+ height: 10px;
+ background-color: lime;
+}
+
+ </style>
+ </head>
+ <body>
+ <div class="range">
+ <div class="range-progress"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-1.html b/layout/reftests/forms/input/range/moz-range-progress-1.html
new file mode 100644
index 000000000..8adc10112
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-progress {
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-track,
+input[type=range]::-moz-range-thumb {
+ visibility: hidden;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=25>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-2-ref.html b/layout/reftests/forms/input/range/moz-range-progress-2-ref.html
new file mode 100644
index 000000000..fd914edfd
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-2-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+ border: 0;
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border: 0;
+ border-radius: 0;
+ background-image: none;
+ background-color: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=0>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-2.html b/layout/reftests/forms/input/range/moz-range-progress-2.html
new file mode 100644
index 000000000..ffe43266c
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+ border: 0;
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-progress {
+ height: 10px;
+ background-color: red;
+}
+
+input[type=range]::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border: 0;
+ border-radius: 0;
+ background-image: none;
+ background-color: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=0>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-3-ref.html b/layout/reftests/forms/input/range/moz-range-progress-3-ref.html
new file mode 100644
index 000000000..623f60810
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-3-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+ border: 0;
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border: 0;
+ border-radius: 0;
+ background-image: none;
+ background-color: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=100>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-3.html b/layout/reftests/forms/input/range/moz-range-progress-3.html
new file mode 100644
index 000000000..365c62c99
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-3.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test ::-moz-range-progress</title>
+ <style>
+
+input[type=range] {
+ width: 200px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+ background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+ border: 0;
+ height: 10px;
+ background-color: red;
+}
+
+input[type=range]::-moz-range-progress {
+ height: 10px;
+ background-color: lime;
+}
+
+input[type=range]::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border: 0;
+ border-radius: 0;
+ background-image: none;
+ background-color: yellow;
+}
+
+ </style>
+ </head>
+ <body>
+ <input type=range value=100>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html
new file mode 100644
index 000000000..3103fc721
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="range" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
new file mode 100644
index 000000000..24dccffea
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
new file mode 100644
index 000000000..8bf48f7e9
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" value="50" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="checkbox" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/range-orient-block.html b/layout/reftests/forms/input/range/range-orient-block.html
new file mode 100644
index 000000000..df4a3e250
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=block max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html b/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html
new file mode 100644
index 000000000..01fe1f75c
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=horizontal max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/input/range/range-orient-horizontal.html b/layout/reftests/forms/input/range/range-orient-horizontal.html
new file mode 100644
index 000000000..be7bb4b0b
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=horizontal max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-orient-inline.html b/layout/reftests/forms/input/range/range-orient-inline.html
new file mode 100644
index 000000000..ef1012bd4
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-orient-vertical-rtl.html b/layout/reftests/forms/input/range/range-orient-vertical-rtl.html
new file mode 100644
index 000000000..205e7de02
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=vertical max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/input/range/range-orient-vertical.html b/layout/reftests/forms/input/range/range-orient-vertical.html
new file mode 100644
index 000000000..321822f2b
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-block.html b/layout/reftests/forms/input/range/range-vlr-orient-block.html
new file mode 100644
index 000000000..b2d009bd8
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=block max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html b/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html
new file mode 100644
index 000000000..406eb646e
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=horizontal max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-inline.html b/layout/reftests/forms/input/range/range-vlr-orient-inline.html
new file mode 100644
index 000000000..c505ad8af
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-vertical.html b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html
new file mode 100644
index 000000000..c6ad0c16b
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr.html b/layout/reftests/forms/input/range/range-vlr.html
new file mode 100644
index 000000000..38fde6556
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-block.html b/layout/reftests/forms/input/range/range-vrl-orient-block.html
new file mode 100644
index 000000000..07edd1258
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=block max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html b/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html
new file mode 100644
index 000000000..66637c652
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=horizontal max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-inline.html b/layout/reftests/forms/input/range/range-vrl-orient-inline.html
new file mode 100644
index 000000000..035c56b07
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-vertical.html b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html
new file mode 100644
index 000000000..1f5a73201
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl.html b/layout/reftests/forms/input/range/range-vrl.html
new file mode 100644
index 000000000..e1ac59cc6
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" max=100 value=70>
diff --git a/layout/reftests/forms/input/range/reftest-stylo.list b/layout/reftests/forms/input/range/reftest-stylo.list
new file mode 100644
index 000000000..776a29fb2
--- /dev/null
+++ b/layout/reftests/forms/input/range/reftest-stylo.list
@@ -0,0 +1,54 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+
+# sanity checks:
+skip == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+skip == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+skip == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+
+# dynamic type changes:
+fuzzy-if(skiaContent,1,40) == to-range-from-other-type-unthemed-1.html to-range-from-other-type-unthemed-1.html
+== from-range-to-other-type-unthemed-1.html from-range-to-other-type-unthemed-1.html
+
+# for different values:
+== different-fraction-of-range-unthemed-1.html different-fraction-of-range-unthemed-1.html
+== same-fraction-of-range-unthemed-1.html same-fraction-of-range-unthemed-1.html
+
+# dynamic value changes:
+fails fuzzy-if(skiaContent,1,40) == value-prop-unthemed.html value-prop-unthemed.html
+== value-prop.html value-prop.html
+fails fuzzy-if(skiaContent,1,40) == valueAsNumber-prop-unthemed.html valueAsNumber-prop-unthemed.html
+== valueAsNumber-prop.html valueAsNumber-prop.html
+fails fuzzy-if(B2G,2,1) fuzzy-if(skiaContent,1,40) == stepDown-unthemed.html stepDown-unthemed.html
+fuzzy-if(B2G,2,1) == stepDown.html stepDown.html
+fails fuzzy-if(skiaContent,1,40) == stepUp-unthemed.html stepUp-unthemed.html
+== stepUp.html stepUp.html
+fuzzy-if(B2G,2,1) == max-prop.html max-prop.html
+skip == reset-value.html reset-value.html
+
+# 'direction' property:
+== direction-unthemed-1.html direction-unthemed-1.html
+
+# ::-moz-range-progress pseudo-element:
+fails-if(B2G||Mulet||Android) == moz-range-progress-1.html moz-range-progress-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== moz-range-progress-2.html moz-range-progress-2.html
+== moz-range-progress-3.html moz-range-progress-3.html
+
+# Tests for block and inline orientation in combination with writing-mode
+# XXX Remove default-preferences setting here after bug 1138384 makes
+# it the default for all channels
+
+== range-orient-horizontal.html range-orient-horizontal.html
+== range-orient-horizontal.html range-orient-horizontal.html
+== range-orient-block.html range-orient-block.html
+== range-orient-inline.html range-orient-inline.html
+== range-vlr.html range-vlr.html
+== range-vlr-orient-block.html range-vlr-orient-block.html
+== range-vlr-orient-inline.html range-vlr-orient-inline.html
+== range-vlr-orient-horizontal.html range-vlr-orient-horizontal.html
+== range-vlr-orient-vertical.html range-vlr-orient-vertical.html
+== range-vrl.html range-vrl.html
+== range-vrl-orient-block.html range-vrl-orient-block.html
+== range-vrl-orient-inline.html range-vrl-orient-inline.html
+== range-vrl-orient-horizontal.html range-vrl-orient-horizontal.html
+== range-vrl-orient-vertical.html range-vrl-orient-vertical.html
diff --git a/layout/reftests/forms/input/range/reftest.list b/layout/reftests/forms/input/range/reftest.list
new file mode 100644
index 000000000..8c2c231a3
--- /dev/null
+++ b/layout/reftests/forms/input/range/reftest.list
@@ -0,0 +1,49 @@
+
+# sanity checks:
+!= not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html
+!= not-other-type-unthemed-1.html not-other-type-unthemed-1b-notref.html
+!= not-other-type-unthemed-1.html not-other-type-unthemed-1c-notref.html
+
+# dynamic type changes:
+fuzzy-if(skiaContent,1,40) == to-range-from-other-type-unthemed-1.html to-range-from-other-type-unthemed-1-ref.html
+== from-range-to-other-type-unthemed-1.html from-range-to-other-type-unthemed-1-ref.html
+
+# for different values:
+!= different-fraction-of-range-unthemed-1.html different-fraction-of-range-unthemed-1-notref.html
+== same-fraction-of-range-unthemed-1.html same-fraction-of-range-unthemed-1-ref.html
+
+# dynamic value changes:
+fuzzy-if(skiaContent,1,40) == value-prop-unthemed.html 75pct-unthemed-common-ref.html
+== value-prop.html 75pct-common-ref.html
+fuzzy-if(skiaContent,1,40) == valueAsNumber-prop-unthemed.html 75pct-unthemed-common-ref.html
+== valueAsNumber-prop.html 75pct-common-ref.html
+fuzzy-if(skiaContent,1,40) == stepDown-unthemed.html 75pct-unthemed-common-ref.html
+== stepDown.html 75pct-common-ref.html
+fuzzy-if(skiaContent,1,40) == stepUp-unthemed.html 75pct-unthemed-common-ref.html
+== stepUp.html 75pct-common-ref.html
+== max-prop.html 100pct-common-ref.html
+== reset-value.html reset-value-ref.html
+
+# 'direction' property:
+== direction-unthemed-1.html direction-unthemed-1-ref.html
+
+# ::-moz-range-progress pseudo-element:
+fails-if(Android) == moz-range-progress-1.html moz-range-progress-1-ref.html
+== moz-range-progress-2.html moz-range-progress-2-ref.html
+== moz-range-progress-3.html moz-range-progress-3-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= range-orient-horizontal.html range-orient-vertical.html
+!= range-orient-horizontal.html range-orient-horizontal-rtl.html
+== range-orient-block.html range-orient-vertical.html
+== range-orient-inline.html range-orient-horizontal.html
+== range-vlr.html range-orient-vertical.html
+== range-vlr-orient-block.html range-orient-horizontal.html
+== range-vlr-orient-inline.html range-orient-vertical.html
+== range-vlr-orient-horizontal.html range-orient-horizontal.html
+== range-vlr-orient-vertical.html range-orient-vertical.html
+== range-vrl.html range-orient-vertical-rtl.html
+== range-vrl-orient-block.html range-orient-horizontal-rtl.html
+== range-vrl-orient-inline.html range-orient-vertical-rtl.html
+== range-vrl-orient-horizontal.html range-orient-horizontal-rtl.html
+== range-vrl-orient-vertical.html range-orient-vertical-rtl.html
diff --git a/layout/reftests/forms/input/range/reset-value-ref.html b/layout/reftests/forms/input/range/reset-value-ref.html
new file mode 100644
index 000000000..74675c2d7
--- /dev/null
+++ b/layout/reftests/forms/input/range/reset-value-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-us">
+ <head>
+ <title>1080352</title>
+ </head>
+ <body>
+ <form id="form">
+ <input id='inputRange' type='range' step='10' min='0' max='50' value='20'><br>
+ <input id='inputNumber' type='number' step='10' min='0' max='500' value='30'><br>
+
+ <input type='reset'><br>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/reset-value.html b/layout/reftests/forms/input/range/reset-value.html
new file mode 100644
index 000000000..2ccb36765
--- /dev/null
+++ b/layout/reftests/forms/input/range/reset-value.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-us">
+ <head>
+ <title>1080352</title>
+ </head>
+ <body onload="inputRange.value=40;inputNumber.value=40; form.reset()">
+ <form id="form">
+ <input id='inputRange' type='range' step='10' min='0' max='50' value='20'><br>
+ <input id='inputNumber' type='number' step='10' min='0' max='500' value='30'><br>
+
+ <input type='reset'><br>
+ </form>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
new file mode 100644
index 000000000..6aefd17bc
--- /dev/null
+++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="range" value=70 style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
new file mode 100644
index 000000000..3c9f0e7ce
--- /dev/null
+++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: that range with value=90,min=90,max=120 looks the same as range
+ with value=70 (also tests that it doesn't look like type=text, since the
+ text displayed would be different in the type=text case). -->
+ <body>
+ <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepDown-unthemed.html b/layout/reftests/forms/input/range/stepDown-unthemed.html
new file mode 100644
index 000000000..6d4d6708a
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepDown-unthemed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').stepDown();
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ </script>
+ <body>
+ <input type=range id='i' value=100 step=25 style='-moz-appearance:none'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepDown.html b/layout/reftests/forms/input/range/stepDown.html
new file mode 100644
index 000000000..e482af490
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepDown.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').stepDown();
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ </script>
+ <body>
+ <input type=range id='i' value=100 step=25>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepUp-unthemed.html b/layout/reftests/forms/input/range/stepUp-unthemed.html
new file mode 100644
index 000000000..1e4198cc6
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepUp-unthemed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').stepUp();
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepUp.html b/layout/reftests/forms/input/range/stepUp.html
new file mode 100644
index 000000000..139e6c797
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepUp.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').stepUp();
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
new file mode 100644
index 000000000..3103fc721
--- /dev/null
+++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="range" style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
new file mode 100644
index 000000000..86ff0c521
--- /dev/null
+++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: input element changed to range state doesn't look like checkbox state -->
+ <script type="text/javascript">
+ function setToRange()
+ {
+ document.getElementById('i').type='range';
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setToRange);
+ </script>
+ <body>
+ <input type='checkbox' id='i' style="-moz-appearance:none;">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/value-prop-unthemed.html b/layout/reftests/forms/input/range/value-prop-unthemed.html
new file mode 100644
index 000000000..46387af2e
--- /dev/null
+++ b/layout/reftests/forms/input/range/value-prop-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').value = "75";
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/value-prop.html b/layout/reftests/forms/input/range/value-prop.html
new file mode 100644
index 000000000..66be83704
--- /dev/null
+++ b/layout/reftests/forms/input/range/value-prop.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').value = "75";
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
new file mode 100644
index 000000000..a2a6eb6cc
--- /dev/null
+++ b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').valueAsNumber = 75;
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/range/valueAsNumber-prop.html b/layout/reftests/forms/input/range/valueAsNumber-prop.html
new file mode 100644
index 000000000..c00fe8bf4
--- /dev/null
+++ b/layout/reftests/forms/input/range/valueAsNumber-prop.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when changing the 'value' IDL property, the thumb of the range
+ should be moved to the appropriate position -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('i').valueAsNumber = 75;
+ document.documentElement.className = '';
+ }
+ document.addEventListener("MozReftestInvalidate", setValue);
+ setTimeout(setValue, 2000); // useful when not running under reftest suite
+ </script>
+ <body>
+ <input type=range id='i' value=50 step=25>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/reftest-stylo.list b/layout/reftests/forms/input/reftest-stylo.list
new file mode 100644
index 000000000..c3ab90d2c
--- /dev/null
+++ b/layout/reftests/forms/input/reftest-stylo.list
@@ -0,0 +1,14 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+include checkbox/reftest-stylo.list
+include email/reftest-stylo.list
+include tel/reftest-stylo.list
+include search/reftest-stylo.list
+include url/reftest-stylo.list
+include number/reftest-stylo.list
+include file/reftest-stylo.list
+include radio/reftest-stylo.list
+include range/reftest-stylo.list
+include text/reftest-stylo.list
+include percentage/reftest-stylo.list
+include hidden/reftest-stylo.list
+include color/reftest-stylo.list
diff --git a/layout/reftests/forms/input/reftest.list b/layout/reftests/forms/input/reftest.list
new file mode 100644
index 000000000..7de1175ef
--- /dev/null
+++ b/layout/reftests/forms/input/reftest.list
@@ -0,0 +1,14 @@
+include checkbox/reftest.list
+include email/reftest.list
+include tel/reftest.list
+include search/reftest.list
+include url/reftest.list
+include number/reftest.list
+include file/reftest.list
+include radio/reftest.list
+include range/reftest.list
+include text/reftest.list
+include percentage/reftest.list
+include hidden/reftest.list
+include color/reftest.list
+include datetime/reftest.list
diff --git a/layout/reftests/forms/input/search/1.html b/layout/reftests/forms/input/search/1.html
new file mode 100644
index 000000000..93bdd26b0
--- /dev/null
+++ b/layout/reftests/forms/input/search/1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: input element in search state looks like in text state -->
+ <body>
+ <input type="search">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/search/2.html b/layout/reftests/forms/input/search/2.html
new file mode 100644
index 000000000..9c1f4151a
--- /dev/null
+++ b/layout/reftests/forms/input/search/2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: input element in search state looks like in text state -->
+ <script type="text/javascript">
+ function setToSearch()
+ {
+ document.getElementById('i').type = 'search';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setToSearch(); disableReftestWait();">
+ <input type='checkbox' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/search/3.html b/layout/reftests/forms/input/search/3.html
new file mode 100644
index 000000000..2e4ce9c8b
--- /dev/null
+++ b/layout/reftests/forms/input/search/3.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when switching to another type, the input element should not look
+ like an input search element -->
+ <script type="text/javascript">
+ function setToCheckbox()
+ {
+ document.getElementById('i').type = 'checkbox';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setToCheckbox(); disableReftestWait();">
+ <input type='search' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/search/ref.html b/layout/reftests/forms/input/search/ref.html
new file mode 100644
index 000000000..07e5eee7e
--- /dev/null
+++ b/layout/reftests/forms/input/search/ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/search/reftest-stylo.list b/layout/reftests/forms/input/search/reftest-stylo.list
new file mode 100644
index 000000000..021c5f861
--- /dev/null
+++ b/layout/reftests/forms/input/search/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== 1.html 1.html
+== 2.html 2.html
+== 3.html 3.html
diff --git a/layout/reftests/forms/input/search/reftest.list b/layout/reftests/forms/input/search/reftest.list
new file mode 100644
index 000000000..dcca7a3cd
--- /dev/null
+++ b/layout/reftests/forms/input/search/reftest.list
@@ -0,0 +1,3 @@
+== 1.html ref.html
+== 2.html ref.html
+!= 3.html ref.html
diff --git a/layout/reftests/forms/input/tel/1.html b/layout/reftests/forms/input/tel/1.html
new file mode 100644
index 000000000..4a034de07
--- /dev/null
+++ b/layout/reftests/forms/input/tel/1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: input element in telephone state looks like in text state -->
+ <body>
+ <input type="tel">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/tel/2.html b/layout/reftests/forms/input/tel/2.html
new file mode 100644
index 000000000..47b530bfe
--- /dev/null
+++ b/layout/reftests/forms/input/tel/2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: input element in telephone state looks like in text state -->
+ <script type="text/javascript">
+ function setToTel()
+ {
+ document.getElementById('i').type='tel';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setToTel(); disableReftestWait();">
+ <input type='checkbox' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/tel/3.html b/layout/reftests/forms/input/tel/3.html
new file mode 100644
index 000000000..c1348e6f7
--- /dev/null
+++ b/layout/reftests/forms/input/tel/3.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when switching to another type, the input element should not look
+ like an input tel element -->
+ <script type="text/javascript">
+ function setToCheckbox()
+ {
+ document.getElementById('i').type='checkbox';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setToCheckbox(); disableReftestWait();">
+ <input type='tel' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/tel/ref.html b/layout/reftests/forms/input/tel/ref.html
new file mode 100644
index 000000000..07e5eee7e
--- /dev/null
+++ b/layout/reftests/forms/input/tel/ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/tel/reftest-stylo.list b/layout/reftests/forms/input/tel/reftest-stylo.list
new file mode 100644
index 000000000..021c5f861
--- /dev/null
+++ b/layout/reftests/forms/input/tel/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== 1.html 1.html
+== 2.html 2.html
+== 3.html 3.html
diff --git a/layout/reftests/forms/input/tel/reftest.list b/layout/reftests/forms/input/tel/reftest.list
new file mode 100644
index 000000000..dcca7a3cd
--- /dev/null
+++ b/layout/reftests/forms/input/tel/reftest.list
@@ -0,0 +1,3 @@
+== 1.html ref.html
+== 2.html ref.html
+!= 3.html ref.html
diff --git a/layout/reftests/forms/input/text/baseline-1-ref.html b/layout/reftests/forms/input/text/baseline-1-ref.html
new file mode 100644
index 000000000..427911eb0
--- /dev/null
+++ b/layout/reftests/forms/input/text/baseline-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title>Text baseline positioning reference</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <style type="text/css">
+ @font-face {
+ font-family: "MarkA";
+ src: url(../fonts/markA.ttf);
+ }
+ input {
+ font-family: "MarkA", sans-serif;
+ font-size: 32px;
+ }
+ </style>
+</head>
+<body>
+ <input size="2" value="AAAAAAAA">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/baseline-1.html b/layout/reftests/forms/input/text/baseline-1.html
new file mode 100644
index 000000000..59e92018b
--- /dev/null
+++ b/layout/reftests/forms/input/text/baseline-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title>Text baseline positioning test</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <!--
+ The primary font MarkA has a small line height. The fallback font
+ (used for the character '1') will probably have a maximum ascent
+ greater than the ascent plus half leading of MarkA, but this
+ should not adversly affect the positioning of characters from the
+ primary font. Currently the maximum ascent of the fallback font
+ has no effect on the position, but if a future implementation
+ considers the fallback font in the position, this test may need to
+ be modified to accommodate.
+ -->
+ <style type="text/css">
+ @font-face {
+ font-family: "MarkA";
+ src: url(../fonts/markA.ttf);
+ }
+ input {
+ font-family: "MarkA", sans-serif;
+ font-size: 32px;
+ }
+ </style>
+</head>
+<body>
+ <input size="2" value="AAAAAAAA1">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/bounds-1-ref.html b/layout/reftests/forms/input/text/bounds-1-ref.html
new file mode 100644
index 000000000..14d39ba72
--- /dev/null
+++ b/layout/reftests/forms/input/text/bounds-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Reference for bug 806583 test</title>
+ <style>
+ body { background: blue }
+ </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/bounds-1.html b/layout/reftests/forms/input/text/bounds-1.html
new file mode 100644
index 000000000..4af490dce
--- /dev/null
+++ b/layout/reftests/forms/input/text/bounds-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Test for bug 806583</title>
+ <style>
+ body, div { background: blue }
+ div { position: fixed; }
+ </style>
+</head>
+<body>
+ <input id="input">
+ <div id="cover"/>
+ <script>
+var rect = document.getElementById("input").getBoundingClientRect();
+var cover = document.getElementById("cover");
+cover.style.left = rect.left + "px";
+cover.style.top = rect.top + "px";
+cover.style.width = rect.width + "px";
+cover.style.height = rect.height + "px";
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/centering-1-ref.xul b/layout/reftests/forms/input/text/centering-1-ref.xul
new file mode 100644
index 000000000..f1bf3e49c
--- /dev/null
+++ b/layout/reftests/forms/input/text/centering-1-ref.xul
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<window title="Text input text centering reference"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <html:style type="text/css">
+ @font-face {
+ font-family: "Ahem";
+ src: url(../fonts/Ahem.ttf);
+ }
+ hbox {
+ height: 128px;
+ background-color: white;
+ }
+ input {
+ height: 64px;
+ background-color: white;
+ border: none;
+ margin: 0px;
+ padding: 0px;
+ font-family: "Ahem", sans-serif;
+ font-size: 32px;
+ }
+ </html:style>
+
+ <hbox align="center">
+ <html:input value="Ahem"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/centering-1.xul b/layout/reftests/forms/input/text/centering-1.xul
new file mode 100644
index 000000000..dc72bda55
--- /dev/null
+++ b/layout/reftests/forms/input/text/centering-1.xul
@@ -0,0 +1,39 @@
+<?xml version="1.0"?>
+<window title="Text input text centering test"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <!--
+
+ There is no spec that says where text within an html text input element
+ should be placed, but some sort of centering reduces the likelihood or
+ extent of clipping.
+
+ This test uses a font where every character used has an ascent and
+ descent equal to typographical ascent of the font. This makes it
+ unlikely that using a different concept of centering will change the
+ results of this test.
+
+ -->
+ <html:style type="text/css">
+ @font-face {
+ font-family: "Ahem";
+ src: url(../fonts/Ahem.ttf);
+ }
+ hbox {
+ height: 128px;
+ background-color: white;
+ }
+ input {
+ background-color: white;
+ border: none;
+ margin: 0px;
+ padding: 0px;
+ font-family: "Ahem", sans-serif;
+ font-size: 32px;
+ }
+ </html:style>
+
+ <hbox align="stretch">
+ <html:input value="Ahem"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/dynamic-height-1-ref.xul b/layout/reftests/forms/input/text/dynamic-height-1-ref.xul
new file mode 100644
index 000000000..7b82803e0
--- /dev/null
+++ b/layout/reftests/forms/input/text/dynamic-height-1-ref.xul
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <hbox align="stretch">
+ <box style="height: 5em"/>
+ <html:input value="YO"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/dynamic-height-1.xul b/layout/reftests/forms/input/text/dynamic-height-1.xul
new file mode 100644
index 000000000..f95469f19
--- /dev/null
+++ b/layout/reftests/forms/input/text/dynamic-height-1.xul
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ onload="onLoad();">
+ <script type="application/javascript">
+<![CDATA[
+ function onLoad()
+ {
+ var adjust = document.getElementById("adjust");
+ flush();
+ adjust.style.height = "5em";
+ }
+
+ function flush() { document.documentElement.getBoundingClientRect(); }
+
+]]>
+ </script>
+ <hbox align="stretch">
+ <box id="adjust"/>
+ <html:input id="input" value="YO"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/intrinsic-size-ref.html b/layout/reftests/forms/input/text/intrinsic-size-ref.html
new file mode 100644
index 000000000..2735336e3
--- /dev/null
+++ b/layout/reftests/forms/input/text/intrinsic-size-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Intrinsic Size Test Reference</title>
+ <style>input, textarea { border-radius:0; background:none; border:none; }</style>
+ </head>
+ <body>
+ <div>
+ <span style="border:2px solid black; padding-left:200px"><input style="background-color:transparent; border:none; font-family:monospace"/></span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/text/intrinsic-size.html b/layout/reftests/forms/input/text/intrinsic-size.html
new file mode 100644
index 000000000..ef5c3da83
--- /dev/null
+++ b/layout/reftests/forms/input/text/intrinsic-size.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Intrinsic Size Test</title>
+ <style>input, textarea { border-radius:0; background:none; border:none; }</style>
+ </head>
+ <body>
+ <div>
+ <span style="border:2px solid black"><input style="background-color:transparent; border:none; font-family:monospace; padding-left:201px"/></span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/text/line-height-0.5.html b/layout/reftests/forms/input/text/line-height-0.5.html
new file mode 100644
index 000000000..e60a5f3a8
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 0.5 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/line-height-1.0.html b/layout/reftests/forms/input/text/line-height-1.0.html
new file mode 100644
index 000000000..52a0fde6c
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.0 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/line-height-1.5.html b/layout/reftests/forms/input/text/line-height-1.5.html
new file mode 100644
index 000000000..4363b09a2
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.5 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/reftest-stylo.list b/layout/reftests/forms/input/text/reftest-stylo.list
new file mode 100644
index 000000000..86f890acd
--- /dev/null
+++ b/layout/reftests/forms/input/text/reftest-stylo.list
@@ -0,0 +1,16 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== bounds-1.html bounds-1.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,121,84) == size-1.html size-1.html
+skip-if(B2G||Mulet) == size-2.html size-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+HTTP(..) == baseline-1.html baseline-1.html
+skip-if((B2G&&browserIsRemote)||Mulet) HTTP(..) == centering-1.xul centering-1.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if((B2G&&browserIsRemote)||Mulet) == dynamic-height-1.xul dynamic-height-1.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(skiaContent,1,500) needs-focus == select.html select.html
+== intrinsic-size.html intrinsic-size.html
+== line-height-0.5.html line-height-0.5.html
+== line-height-1.5.html line-height-1.5.html
diff --git a/layout/reftests/forms/input/text/reftest.list b/layout/reftests/forms/input/text/reftest.list
new file mode 100644
index 000000000..7f75af36a
--- /dev/null
+++ b/layout/reftests/forms/input/text/reftest.list
@@ -0,0 +1,10 @@
+== bounds-1.html bounds-1-ref.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,140,111) == size-1.html size-1-ref.html
+== size-2.html size-2-ref.html
+HTTP(..) == baseline-1.html baseline-1-ref.html
+HTTP(..) == centering-1.xul centering-1-ref.xul
+== dynamic-height-1.xul dynamic-height-1-ref.xul
+fuzzy-if(skiaContent,1,500) needs-focus == select.html select-ref.html
+== intrinsic-size.html intrinsic-size-ref.html
+== line-height-0.5.html line-height-1.0.html
+!= line-height-1.5.html line-height-1.0.html
diff --git a/layout/reftests/forms/input/text/select-ref.html b/layout/reftests/forms/input/text/select-ref.html
new file mode 100644
index 000000000..added237c
--- /dev/null
+++ b/layout/reftests/forms/input/text/select-ref.html
@@ -0,0 +1,18 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function finishTest() {
+ document.documentElement.removeAttribute("class");
+ }
+ function runTest() {
+ var field = document.getElementById('field');
+ field.focus();
+ field.select();
+ setTimeout(finishTest, 0);
+ }
+ </script>
+ </head>
+ <body onload="runTest()">
+ <input id="field" type="text" value="1234">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/text/select.html b/layout/reftests/forms/input/text/select.html
new file mode 100644
index 000000000..eba0c3824
--- /dev/null
+++ b/layout/reftests/forms/input/text/select.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+ <head>
+ <script type="text/javascript">
+ function finishTest() {
+ document.documentElement.removeAttribute("class");
+ }
+ function runTest() {
+ var field = document.getElementById('field');
+ field.focus();
+ field.disabled = true;
+ field.setSelectionRange(0, 4);
+ field.disabled = false;
+ field.select();
+ setTimeout(finishTest, 0);
+ }
+ </script>
+ </head>
+ <body onload="runTest()">
+ <input id="field" type="text" value="1234">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/text/size-1-ref.html b/layout/reftests/forms/input/text/size-1-ref.html
new file mode 100644
index 000000000..c9a480358
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-1-ref.html
@@ -0,0 +1,3 @@
+<html lang="en">
+ <input size="4" value="1234" style="font-family: monospace">
+</html>
diff --git a/layout/reftests/forms/input/text/size-1.html b/layout/reftests/forms/input/text/size-1.html
new file mode 100644
index 000000000..e0390261d
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-1.html
@@ -0,0 +1,3 @@
+<html lang="en">
+ <input size="4" value="1234|6" style="font-family: monospace">
+</html>
diff --git a/layout/reftests/forms/input/text/size-2-ref.html b/layout/reftests/forms/input/text/size-2-ref.html
new file mode 100644
index 000000000..94512260b
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-2-ref.html
@@ -0,0 +1,5 @@
+<html lang="en">
+<body style="background-color:white;">
+ <input size="40" value="1234" style="background-color:white; color:black; font-family: monospace; border: none">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/size-2.html b/layout/reftests/forms/input/text/size-2.html
new file mode 100644
index 000000000..7353238f7
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-2.html
@@ -0,0 +1,5 @@
+<html lang="en">
+<body style="background-color:white;">
+ <input size="4" value="1234" style="background-color:white; color:black; font-family: monospace; border: none">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/url/1.html b/layout/reftests/forms/input/url/1.html
new file mode 100644
index 000000000..a2ce658b4
--- /dev/null
+++ b/layout/reftests/forms/input/url/1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: input element in url state looks like in text state -->
+ <body>
+ <input type="url">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/url/2.html b/layout/reftests/forms/input/url/2.html
new file mode 100644
index 000000000..58302d278
--- /dev/null
+++ b/layout/reftests/forms/input/url/2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: input element in url state looks like in text state -->
+ <script type="text/javascript">
+ function setToURL()
+ {
+ document.getElementById('i').type = 'url';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setToURL(); disableReftestWait();">
+ <input type='checkbox' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/url/3.html b/layout/reftests/forms/input/url/3.html
new file mode 100644
index 000000000..b9f13924a
--- /dev/null
+++ b/layout/reftests/forms/input/url/3.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when switching to another type, the input element should not look
+ like an input url element -->
+ <script type="text/javascript">
+ function setToCheckbox()
+ {
+ document.getElementById('i').type='checkbox';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setToCheckbox(); disableReftestWait();">
+ <input type='url' id='i'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/url/ref.html b/layout/reftests/forms/input/url/ref.html
new file mode 100644
index 000000000..07e5eee7e
--- /dev/null
+++ b/layout/reftests/forms/input/url/ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/url/reftest-stylo.list b/layout/reftests/forms/input/url/reftest-stylo.list
new file mode 100644
index 000000000..021c5f861
--- /dev/null
+++ b/layout/reftests/forms/input/url/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== 1.html 1.html
+== 2.html 2.html
+== 3.html 3.html
diff --git a/layout/reftests/forms/input/url/reftest.list b/layout/reftests/forms/input/url/reftest.list
new file mode 100644
index 000000000..dcca7a3cd
--- /dev/null
+++ b/layout/reftests/forms/input/url/reftest.list
@@ -0,0 +1,3 @@
+== 1.html ref.html
+== 2.html ref.html
+!= 3.html ref.html