summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/forms')
-rw-r--r--layout/reftests/forms/button/1317351-ref.html21
-rw-r--r--layout/reftests/forms/button/1317351.html30
-rw-r--r--layout/reftests/forms/button/1349646-ref.html27
-rw-r--r--layout/reftests/forms/button/1349646.html27
-rw-r--r--layout/reftests/forms/button/appearance-revert-ref.html2
-rw-r--r--layout/reftests/forms/button/appearance-revert.html2
-rw-r--r--layout/reftests/forms/button/author-padding-notref.html2
-rw-r--r--layout/reftests/forms/button/author-padding.html3
-rw-r--r--layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html57
-rw-r--r--layout/reftests/forms/button/button-display-flex-fullsize-1.html51
-rw-r--r--layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html60
-rw-r--r--layout/reftests/forms/button/button-display-grid-fullsize-1.html56
-rw-r--r--layout/reftests/forms/button/button-empty-columns-ref.html2
-rw-r--r--layout/reftests/forms/button/button-empty-columns.html2
-rw-r--r--layout/reftests/forms/button/button-visibility-1-ref.html25
-rw-r--r--layout/reftests/forms/button/button-visibility-1.html26
-rw-r--r--layout/reftests/forms/button/disabled-1-ref.html16
-rw-r--r--layout/reftests/forms/button/disabled-1.html15
-rw-r--r--layout/reftests/forms/button/disabled-2-ref.html17
-rw-r--r--layout/reftests/forms/button/disabled-2.html17
-rw-r--r--layout/reftests/forms/button/disabled-3-notref.html9
-rw-r--r--layout/reftests/forms/button/disabled-3.html9
-rw-r--r--layout/reftests/forms/button/disabled-4-notref.html9
-rw-r--r--layout/reftests/forms/button/disabled-4.html9
-rw-r--r--layout/reftests/forms/button/disabled-5-notref.html9
-rw-r--r--layout/reftests/forms/button/disabled-5.html9
-rw-r--r--layout/reftests/forms/button/disabled-6-notref.html9
-rw-r--r--layout/reftests/forms/button/disabled-6.html9
-rw-r--r--layout/reftests/forms/button/display-grid-flex-columnset-ref.html60
-rw-r--r--layout/reftests/forms/button/display-grid-flex-columnset.html60
-rw-r--r--layout/reftests/forms/button/dynamic-text-indent-ref.html4
-rw-r--r--layout/reftests/forms/button/dynamic-text-indent.html12
-rw-r--r--layout/reftests/forms/button/first-letter-1-noref.html5
-rw-r--r--layout/reftests/forms/button/first-letter-1-ref.html7
-rw-r--r--layout/reftests/forms/button/first-letter-1.html6
-rw-r--r--layout/reftests/forms/button/focus-non-themed-ref.html10
-rw-r--r--layout/reftests/forms/button/focus-non-themed.html9
-rw-r--r--layout/reftests/forms/button/line-height-button-0.5.html7
-rw-r--r--layout/reftests/forms/button/line-height-button-1.0.html7
-rw-r--r--layout/reftests/forms/button/line-height-button-1.5.html7
-rw-r--r--layout/reftests/forms/button/line-height-input-0.5.html7
-rw-r--r--layout/reftests/forms/button/line-height-input-1.0.html7
-rw-r--r--layout/reftests/forms/button/line-height-input-1.5.html7
-rw-r--r--layout/reftests/forms/button/max-height-ref.html11
-rw-r--r--layout/reftests/forms/button/max-height.html11
-rw-r--r--layout/reftests/forms/button/min-height-ref.html17
-rw-r--r--layout/reftests/forms/button/min-height.html22
-rw-r--r--layout/reftests/forms/button/overflow-areas-1-ref.html48
-rw-r--r--layout/reftests/forms/button/overflow-areas-1.html51
-rw-r--r--layout/reftests/forms/button/percent-height-child-ref.html52
-rw-r--r--layout/reftests/forms/button/percent-height-child.html60
-rw-r--r--layout/reftests/forms/button/percent-width-child-ref.html53
-rw-r--r--layout/reftests/forms/button/percent-width-child.html59
-rw-r--r--layout/reftests/forms/button/reftest.list59
-rw-r--r--layout/reftests/forms/button/vertical-centering-ref.html23
-rw-r--r--layout/reftests/forms/button/vertical-centering.html33
-rw-r--r--layout/reftests/forms/button/width-auto-size-em-ltr-ref.html18
-rw-r--r--layout/reftests/forms/button/width-auto-size-em-ltr.html20
-rw-r--r--layout/reftests/forms/button/width-auto-size-em-rtl-ref.html19
-rw-r--r--layout/reftests/forms/button/width-auto-size-em-rtl.html21
-rw-r--r--layout/reftests/forms/button/width-auto-size-ltr-ref.html19
-rw-r--r--layout/reftests/forms/button/width-auto-size-ltr.html20
-rw-r--r--layout/reftests/forms/button/width-auto-size-rtl-ref.html20
-rw-r--r--layout/reftests/forms/button/width-auto-size-rtl.html21
-rw-r--r--layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html21
-rw-r--r--layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html22
-rw-r--r--layout/reftests/forms/button/width-exact-fit-ltr.html21
-rw-r--r--layout/reftests/forms/button/width-exact-fit-rtl.html22
-rw-r--r--layout/reftests/forms/display-block-baselines-1-ref.html91
-rw-r--r--layout/reftests/forms/display-block-baselines-1.html92
-rw-r--r--layout/reftests/forms/display-block-baselines-2-ref.html100
-rw-r--r--layout/reftests/forms/display-block-baselines-2.html100
-rw-r--r--layout/reftests/forms/display-block-baselines-3-ref.html76
-rw-r--r--layout/reftests/forms/display-block-baselines-3.html73
-rw-r--r--layout/reftests/forms/display-block-baselines-4-ref.html73
-rw-r--r--layout/reftests/forms/display-block-baselines-4.html74
-rw-r--r--layout/reftests/forms/display-block-baselines-5-ref.html72
-rw-r--r--layout/reftests/forms/display-block-baselines-5.html72
-rw-r--r--layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html79
-rw-r--r--layout/reftests/forms/fieldset/abs-pos-child-sizing.html64
-rw-r--r--layout/reftests/forms/fieldset/blue-1x1.pngbin0 -> 69 bytes
-rw-r--r--layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html24
-rw-r--r--layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html33
-rw-r--r--layout/reftests/forms/fieldset/dynamic-text-indent-ref.html2
-rw-r--r--layout/reftests/forms/fieldset/dynamic-text-indent.html12
-rw-r--r--layout/reftests/forms/fieldset/fieldset-border-image-1-ref.html13
-rw-r--r--layout/reftests/forms/fieldset/fieldset-border-image-1a.html13
-rw-r--r--layout/reftests/forms/fieldset/fieldset-border-image-1b.html13
-rw-r--r--layout/reftests/forms/fieldset/fieldset-border-image-2-ref.html14
-rw-r--r--layout/reftests/forms/fieldset/fieldset-border-image-2a.html14
-rw-r--r--layout/reftests/forms/fieldset/fieldset-border-image-2b.html14
-rw-r--r--layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html40
-rw-r--r--layout/reftests/forms/fieldset/fieldset-flexbox-001.html36
-rw-r--r--layout/reftests/forms/fieldset/fieldset-grid-001-ref.html33
-rw-r--r--layout/reftests/forms/fieldset/fieldset-grid-001.html29
-rw-r--r--layout/reftests/forms/fieldset/fieldset-height-resize-1-ref.html28
-rw-r--r--layout/reftests/forms/fieldset/fieldset-height-resize-1.html37
-rw-r--r--layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html21
-rw-r--r--layout/reftests/forms/fieldset/fieldset-hidden-1.html19
-rw-r--r--layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html8
-rw-r--r--layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html8
-rw-r--r--layout/reftests/forms/fieldset/fieldset-min-inline-size-1-ref.html4
-rw-r--r--layout/reftests/forms/fieldset/fieldset-min-inline-size-1.html4
-rw-r--r--layout/reftests/forms/fieldset/fieldset-min-width-1-ref.html4
-rw-r--r--layout/reftests/forms/fieldset/fieldset-min-width-1a.html4
-rw-r--r--layout/reftests/forms/fieldset/fieldset-min-width-1b.html6
-rw-r--r--layout/reftests/forms/fieldset/fieldset-min-width-2-ref.html2
-rw-r--r--layout/reftests/forms/fieldset/fieldset-min-width-2a.html4
-rw-r--r--layout/reftests/forms/fieldset/fieldset-min-width-2b.html6
-rw-r--r--layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html52
-rw-r--r--layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html52
-rw-r--r--layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html19
-rw-r--r--layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html19
-rw-r--r--layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html9
-rw-r--r--layout/reftests/forms/fieldset/fieldset-scroll-1.html8
-rw-r--r--layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html24
-rw-r--r--layout/reftests/forms/fieldset/fieldset-scrolled-1.html27
-rw-r--r--layout/reftests/forms/fieldset/legend-overlapping-right-border-1-ref.html15
-rw-r--r--layout/reftests/forms/fieldset/legend-overlapping-right-border-1.html14
-rw-r--r--layout/reftests/forms/fieldset/legend-rtl-ref.html5
-rw-r--r--layout/reftests/forms/fieldset/legend-rtl.html5
-rw-r--r--layout/reftests/forms/fieldset/overflow-hidden-ref.html175
-rw-r--r--layout/reftests/forms/fieldset/overflow-hidden.html125
-rw-r--r--layout/reftests/forms/fieldset/positioned-container-1-ref.html11
-rw-r--r--layout/reftests/forms/fieldset/positioned-container-1.html14
-rw-r--r--layout/reftests/forms/fieldset/reftest.list30
-rw-r--r--layout/reftests/forms/fieldset/relpos-legend-1-ref.html8
-rw-r--r--layout/reftests/forms/fieldset/relpos-legend-1.html8
-rw-r--r--layout/reftests/forms/fieldset/relpos-legend-2-ref.html8
-rw-r--r--layout/reftests/forms/fieldset/relpos-legend-2.html8
-rw-r--r--layout/reftests/forms/fieldset/relpos-legend-3-ref.html8
-rw-r--r--layout/reftests/forms/fieldset/relpos-legend-3.html8
-rw-r--r--layout/reftests/forms/fieldset/relpos-legend-4-ref.html8
-rw-r--r--layout/reftests/forms/fieldset/relpos-legend-4.html8
-rw-r--r--layout/reftests/forms/fieldset/sticky-legend-1-ref.html12
-rw-r--r--layout/reftests/forms/fieldset/sticky-legend-1.html12
-rw-r--r--layout/reftests/forms/input/checkbox/accent-color-accentcolor-ref.html2
-rw-r--r--layout/reftests/forms/input/checkbox/accent-color-accentcolor.html2
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-baseline-ref.html39
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-baseline.html45
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-clamp-01-ref.html13
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-clamp-01.html34
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-clamp-02-ref.html37
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-clamp-02.html38
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-minimum-size-notref.html2
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-minimum-size.html22
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-radio-auto-sized-ref.html24
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-radio-color-ref.html38
-rw-r--r--layout/reftests/forms/input/checkbox/checkbox-radio-color.html40
-rw-r--r--layout/reftests/forms/input/checkbox/checked-appearance-none.html2
-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/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.list20
-rw-r--r--layout/reftests/forms/input/checkbox/unchecked-appearance-none.html2
-rw-r--r--layout/reftests/forms/input/color/auto-height-1-ref.html5
-rw-r--r--layout/reftests/forms/input/color/auto-height-1.html3
-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.html16
-rw-r--r--layout/reftests/forms/input/color/custom-style-1.html11
-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.html112
-rw-r--r--layout/reftests/forms/input/color/margin-padding-1.html39
-rw-r--r--layout/reftests/forms/input/color/reference-style.css17
-rw-r--r--layout/reftests/forms/input/color/reftest.list9
-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/line-height-01-ref.html9
-rw-r--r--layout/reftests/forms/input/datetime/line-height-01.html10
-rw-r--r--layout/reftests/forms/input/datetime/line-height-02-ref.html8
-rw-r--r--layout/reftests/forms/input/datetime/line-height-02.html8
-rw-r--r--layout/reftests/forms/input/datetime/reftest.list25
-rw-r--r--layout/reftests/forms/input/datetime/reset-button-visibility-hidden-ref.html2
-rw-r--r--layout/reftests/forms/input/datetime/reset-button-visibility-hidden.html3
-rw-r--r--layout/reftests/forms/input/datetime/text-align-notref.html2
-rw-r--r--layout/reftests/forms/input/datetime/text-align.html2
-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-content-left-aligned-ref.html9
-rw-r--r--layout/reftests/forms/input/datetime/time-content-left-aligned.html9
-rw-r--r--layout/reftests/forms/input/datetime/time-large-font.html6
-rw-r--r--layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html9
-rw-r--r--layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html10
-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-small-height-ref.html18
-rw-r--r--layout/reftests/forms/input/datetime/time-small-height.html19
-rw-r--r--layout/reftests/forms/input/datetime/time-small-width-height-ref.html18
-rw-r--r--layout/reftests/forms/input/datetime/time-small-width-height.html19
-rw-r--r--layout/reftests/forms/input/datetime/time-small-width-ref.html19
-rw-r--r--layout/reftests/forms/input/datetime/time-small-width.html20
-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.list3
-rw-r--r--layout/reftests/forms/input/file/background-ref.xhtml16
-rw-r--r--layout/reftests/forms/input/file/background.html11
-rw-r--r--layout/reftests/forms/input/file/button-height-ref.html6
-rw-r--r--layout/reftests/forms/input/file/button-height.html6
-rw-r--r--layout/reftests/forms/input/file/color-inherit-ref.html6
-rw-r--r--layout/reftests/forms/input/file/color-inherit.html6
-rw-r--r--layout/reftests/forms/input/file/css-display-ref.html54
-rw-r--r--layout/reftests/forms/input/file/css-display.html64
-rw-r--r--layout/reftests/forms/input/file/css-overflow-ref.html39
-rw-r--r--layout/reftests/forms/input/file/css-overflow.html46
-rw-r--r--layout/reftests/forms/input/file/dynamic-max-width-ref.html20
-rw-r--r--layout/reftests/forms/input/file/dynamic-max-width.html34
-rw-r--r--layout/reftests/forms/input/file/label-min-inline-size-ref.html23
-rw-r--r--layout/reftests/forms/input/file/label-min-inline-size.html44
-rw-r--r--layout/reftests/forms/input/file/reftest.list12
-rw-r--r--layout/reftests/forms/input/file/rtl-ref.xhtml17
-rw-r--r--layout/reftests/forms/input/file/rtl.html8
-rw-r--r--layout/reftests/forms/input/file/simple-ref.xhtml14
-rw-r--r--layout/reftests/forms/input/file/simple.html8
-rw-r--r--layout/reftests/forms/input/file/size.html9
-rw-r--r--layout/reftests/forms/input/file/style-ref.xhtml25
-rw-r--r--layout/reftests/forms/input/file/style.css63
-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.list1
-rw-r--r--layout/reftests/forms/input/number/appearance-textfield-dynamic.html7
-rw-r--r--layout/reftests/forms/input/number/appearance-textfield.html2
-rw-r--r--layout/reftests/forms/input/number/caret-left-rtl-notref.html2
-rw-r--r--layout/reftests/forms/input/number/caret-left-rtl.html2
-rw-r--r--layout/reftests/forms/input/number/caret-right-notref.html2
-rw-r--r--layout/reftests/forms/input/number/caret-right-vertical-notref.html2
-rw-r--r--layout/reftests/forms/input/number/caret-right-vertical.html2
-rw-r--r--layout/reftests/forms/input/number/caret-right.html2
-rw-r--r--layout/reftests/forms/input/number/clipped-text-ref.html9
-rw-r--r--layout/reftests/forms/input/number/clipped-text.html9
-rw-r--r--layout/reftests/forms/input/number/flex-ref.html22
-rw-r--r--layout/reftests/forms/input/number/flex.html23
-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-localized-dynamic-asnumber.html5
-rw-r--r--layout/reftests/forms/input/number/number-localized-dynamic.html5
-rw-r--r--layout/reftests/forms/input/number/number-localized-notref.html2
-rw-r--r--layout/reftests/forms/input/number/number-localized.html2
-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.html18
-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.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/number-spinbox-disabled-notref.html9
-rw-r--r--layout/reftests/forms/input/number/number-spinbox-disabled.html9
-rw-r--r--layout/reftests/forms/input/number/number-style-inheritance-ref.html6
-rw-r--r--layout/reftests/forms/input/number/number-style-inheritance.html6
-rw-r--r--layout/reftests/forms/input/number/padding-001-notref.html10
-rw-r--r--layout/reftests/forms/input/number/padding-001-ref.html9
-rw-r--r--layout/reftests/forms/input/number/padding-001.html10
-rw-r--r--layout/reftests/forms/input/number/padding-002-ref.html8
-rw-r--r--layout/reftests/forms/input/number/padding-002.html8
-rw-r--r--layout/reftests/forms/input/number/pseudo-classes.html37
-rw-r--r--layout/reftests/forms/input/number/reftest.list74
-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/spinner-overflow-ref.html12
-rw-r--r--layout/reftests/forms/input/number/spinner-overflow-vertical-ref.html11
-rw-r--r--layout/reftests/forms/input/number/spinner-overflow-vertical.html10
-rw-r--r--layout/reftests/forms/input/number/spinner-overflow.html12
-rw-r--r--layout/reftests/forms/input/number/text.html2
-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.list1
-rw-r--r--layout/reftests/forms/input/radio/checked-appearance-none.html2
-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/label-dynamic-ref.html38
-rw-r--r--layout/reftests/forms/input/radio/label-dynamic.html46
-rw-r--r--layout/reftests/forms/input/radio/radio-clamp-01-ref.html12
-rw-r--r--layout/reftests/forms/input/radio/radio-clamp-01.html34
-rw-r--r--layout/reftests/forms/input/radio/radio-clamp-02-ref.html37
-rw-r--r--layout/reftests/forms/input/radio/radio-clamp-02.html38
-rw-r--r--layout/reftests/forms/input/radio/radio-minimum-size-notref.html2
-rw-r--r--layout/reftests/forms/input/radio/radio-minimum-size.html22
-rw-r--r--layout/reftests/forms/input/radio/reftest.list9
-rw-r--r--layout/reftests/forms/input/radio/unchecked-appearance-none.html2
-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/auto-size-ref.html59
-rw-r--r--layout/reftests/forms/input/range/auto-size.html50
-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-border-background-ref.html26
-rw-r--r--layout/reftests/forms/input/range/range-border-background.html26
-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-percent-intrinsic-size-2b-ref.html92
-rw-r--r--layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html99
-rw-r--r--layout/reftests/forms/input/range/range-track-bg-ref.html16
-rw-r--r--layout/reftests/forms/input/range/range-track-bg.html9
-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.list61
-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/track-default-rendering-ref.html25
-rw-r--r--layout/reftests/forms/input/range/track-default-rendering.html22
-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.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/appearance-textfield-dynamic.html7
-rw-r--r--layout/reftests/forms/input/search/appearance-textfield.html2
-rw-r--r--layout/reftests/forms/input/search/ref.html6
-rw-r--r--layout/reftests/forms/input/search/reftest.list8
-rw-r--r--layout/reftests/forms/input/search/search-basic.html2
-rw-r--r--layout/reftests/forms/input/search/search-with-value.html2
-rw-r--r--layout/reftests/forms/input/search/text-with-value.html2
-rw-r--r--layout/reftests/forms/input/search/text.html2
-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.list3
-rw-r--r--layout/reftests/forms/input/text/autofill-blank.html8
-rw-r--r--layout/reftests/forms/input/text/autofill-line-height.html9
-rw-r--r--layout/reftests/forms/input/text/autofill-prefilled-value.html9
-rw-r--r--layout/reftests/forms/input/text/autofill-preview-blank.html8
-rw-r--r--layout/reftests/forms/input/text/autofill-preview-line-height.html12
-rw-r--r--layout/reftests/forms/input/text/autofill-preview.html9
-rw-r--r--layout/reftests/forms/input/text/autofill.html9
-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.xhtml28
-rw-r--r--layout/reftests/forms/input/text/centering-1.xhtml39
-rw-r--r--layout/reftests/forms/input/text/dynamic-height-1-ref.xhtml9
-rw-r--r--layout/reftests/forms/input/text/dynamic-height-1.xhtml23
-rw-r--r--layout/reftests/forms/input/text/focus-on-anchor-ref.html2
-rw-r--r--layout/reftests/forms/input/text/focus-on-anchor.html2
-rw-r--r--layout/reftests/forms/input/text/height-small-font-notref.html2
-rw-r--r--layout/reftests/forms/input/text/height-small-font.html2
-rw-r--r--layout/reftests/forms/input/text/intrinsic-size-ref.html12
-rw-r--r--layout/reftests/forms/input/text/intrinsic-size.html16
-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-2.5.html7
-rw-r--r--layout/reftests/forms/input/text/pseudo-class-lock-ref.html2
-rw-r--r--layout/reftests/forms/input/text/pseudo-class-lock.html5
-rw-r--r--layout/reftests/forms/input/text/reftest.list25
-rw-r--r--layout/reftests/forms/input/text/select-overflow-ref.html18
-rw-r--r--layout/reftests/forms/input/text/select-overflow.html25
-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/shadow-rules-ref.html7
-rw-r--r--layout/reftests/forms/input/text/shadow-rules.html10
-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.list3
-rw-r--r--layout/reftests/forms/legend/1273433-ref.html51
-rw-r--r--layout/reftests/forms/legend/1273433.html51
-rw-r--r--layout/reftests/forms/legend/1339287-ref.html46
-rw-r--r--layout/reftests/forms/legend/1339287.html58
-rw-r--r--layout/reftests/forms/legend/legend-padding-1-ref.html43
-rw-r--r--layout/reftests/forms/legend/legend-padding-1.html42
-rw-r--r--layout/reftests/forms/legend/legend-padding-2-ref.html44
-rw-r--r--layout/reftests/forms/legend/legend-padding-2.html43
-rw-r--r--layout/reftests/forms/legend/legend-ref.html95
-rw-r--r--layout/reftests/forms/legend/legend.html87
-rw-r--r--layout/reftests/forms/legend/reftest.list5
-rw-r--r--layout/reftests/forms/legend/shadow-dom-ref.html29
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-ref.html105
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html45
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-rtl.html26
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html91
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html94
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html47
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-vertical.html47
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element.html52
-rw-r--r--layout/reftests/forms/meter/block-invalidate-ref.html10
-rw-r--r--layout/reftests/forms/meter/block-invalidate.html19
-rw-r--r--layout/reftests/forms/meter/default-style/default-style-dyn-ref.html38
-rw-r--r--layout/reftests/forms/meter/default-style/default-style-dyn.html34
-rw-r--r--layout/reftests/forms/meter/default-style/default-style-ref.html279
-rw-r--r--layout/reftests/forms/meter/default-style/default-style.html61
-rw-r--r--layout/reftests/forms/meter/default-style/reftest.list2
-rw-r--r--layout/reftests/forms/meter/default-style/style.css54
-rw-r--r--layout/reftests/forms/meter/in-cells-ref.html22
-rw-r--r--layout/reftests/forms/meter/in-cells.html21
-rw-r--r--layout/reftests/forms/meter/margin-padding-ref.html88
-rw-r--r--layout/reftests/forms/meter/margin-padding-rtl-ref.html88
-rw-r--r--layout/reftests/forms/meter/margin-padding-rtl.html40
-rw-r--r--layout/reftests/forms/meter/margin-padding-vertical-ref.html88
-rw-r--r--layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html88
-rw-r--r--layout/reftests/forms/meter/margin-padding-vertical-rtl.html43
-rw-r--r--layout/reftests/forms/meter/margin-padding-vertical.html43
-rw-r--r--layout/reftests/forms/meter/margin-padding.html40
-rw-r--r--layout/reftests/forms/meter/max-height-ref.html11
-rw-r--r--layout/reftests/forms/meter/max-height.html11
-rw-r--r--layout/reftests/forms/meter/meter-orient-block.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-horizontal-rtl.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-inline.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-vertical-rtl.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-vertical.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr-orient-block.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr-orient-inline.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr-orient-vertical.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl-orient-block.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl-orient-inline.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl-orient-vertical.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl.html3
-rw-r--r--layout/reftests/forms/meter/reftest.list44
-rw-r--r--layout/reftests/forms/meter/rounded-corner-clipping-ref.html21
-rw-r--r--layout/reftests/forms/meter/rounded-corner-clipping.html17
-rw-r--r--layout/reftests/forms/meter/style.css38
-rw-r--r--layout/reftests/forms/meter/transformations-ref.html78
-rw-r--r--layout/reftests/forms/meter/transformations.html36
-rw-r--r--layout/reftests/forms/meter/values-ref.html163
-rw-r--r--layout/reftests/forms/meter/values-rtl-ref.html163
-rw-r--r--layout/reftests/forms/meter/values-rtl.html42
-rw-r--r--layout/reftests/forms/meter/values-vertical-ref.html163
-rw-r--r--layout/reftests/forms/meter/values-vertical-rtl-ref.html163
-rw-r--r--layout/reftests/forms/meter/values-vertical-rtl.html47
-rw-r--r--layout/reftests/forms/meter/values-vertical.html47
-rw-r--r--layout/reftests/forms/meter/values.html42
-rw-r--r--layout/reftests/forms/output/output-1.html7
-rw-r--r--layout/reftests/forms/output/output-2.html7
-rw-r--r--layout/reftests/forms/output/output-3.html7
-rw-r--r--layout/reftests/forms/output/output-4.html7
-rw-r--r--layout/reftests/forms/output/output-5.html18
-rw-r--r--layout/reftests/forms/output/output-6.html18
-rw-r--r--layout/reftests/forms/output/output-7.html22
-rw-r--r--layout/reftests/forms/output/output-ref-2.html6
-rw-r--r--layout/reftests/forms/output/output-ref-3.html6
-rw-r--r--layout/reftests/forms/output/output-ref.html6
-rw-r--r--layout/reftests/forms/output/reftest.list7
-rw-r--r--layout/reftests/forms/overflow-ref.html19
-rw-r--r--layout/reftests/forms/overflow.html20
-rw-r--r--layout/reftests/forms/placeholder/placeholder-1-password.html8
-rw-r--r--layout/reftests/forms/placeholder/placeholder-1-text.html8
-rw-r--r--layout/reftests/forms/placeholder/placeholder-1-textarea.html8
-rw-r--r--layout/reftests/forms/placeholder/placeholder-10.html27
-rw-r--r--layout/reftests/forms/placeholder/placeholder-11.html8
-rw-r--r--layout/reftests/forms/placeholder/placeholder-12.html8
-rw-r--r--layout/reftests/forms/placeholder/placeholder-13.html18
-rw-r--r--layout/reftests/forms/placeholder/placeholder-14.html18
-rw-r--r--layout/reftests/forms/placeholder/placeholder-18.html22
-rw-r--r--layout/reftests/forms/placeholder/placeholder-2-textarea.html19
-rw-r--r--layout/reftests/forms/placeholder/placeholder-2.html19
-rw-r--r--layout/reftests/forms/placeholder/placeholder-20.html23
-rw-r--r--layout/reftests/forms/placeholder/placeholder-21.html22
-rw-r--r--layout/reftests/forms/placeholder/placeholder-22.html22
-rw-r--r--layout/reftests/forms/placeholder/placeholder-3.html7
-rw-r--r--layout/reftests/forms/placeholder/placeholder-4.html18
-rw-r--r--layout/reftests/forms/placeholder/placeholder-5.html19
-rw-r--r--layout/reftests/forms/placeholder/placeholder-6-textarea.html8
-rw-r--r--layout/reftests/forms/placeholder/placeholder-6.html8
-rw-r--r--layout/reftests/forms/placeholder/placeholder-7.html19
-rw-r--r--layout/reftests/forms/placeholder/placeholder-8.html23
-rw-r--r--layout/reftests/forms/placeholder/placeholder-9.html23
-rw-r--r--layout/reftests/forms/placeholder/placeholder-blank-ref.html16
-rw-r--r--layout/reftests/forms/placeholder/placeholder-focus-ref.html17
-rw-r--r--layout/reftests/forms/placeholder/placeholder-overflow-ref.html13
-rw-r--r--layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html13
-rw-r--r--layout/reftests/forms/placeholder/placeholder-overridden-ref.html6
-rw-r--r--layout/reftests/forms/placeholder/placeholder-rtl-ref.html9
-rw-r--r--layout/reftests/forms/placeholder/placeholder-rtl.html8
-rw-r--r--layout/reftests/forms/placeholder/placeholder-style.css10
-rw-r--r--layout/reftests/forms/placeholder/placeholder-visible-ref.html13
-rw-r--r--layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html13
-rw-r--r--layout/reftests/forms/placeholder/reftest.list36
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-ref.html105
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html45
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-rtl.html26
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html90
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html91
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html47
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-vertical.html47
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element.html51
-rw-r--r--layout/reftests/forms/progress/block-invalidate-ref.html10
-rw-r--r--layout/reftests/forms/progress/block-invalidate.html19
-rw-r--r--layout/reftests/forms/progress/in-cells-ref.html22
-rw-r--r--layout/reftests/forms/progress/in-cells.html21
-rw-r--r--layout/reftests/forms/progress/indeterminate-style-height-ref.html46
-rw-r--r--layout/reftests/forms/progress/indeterminate-style-height.html24
-rw-r--r--layout/reftests/forms/progress/indeterminate-style-width-ref.html37
-rw-r--r--layout/reftests/forms/progress/indeterminate-style-width.html19
-rw-r--r--layout/reftests/forms/progress/margin-padding-ref.html88
-rw-r--r--layout/reftests/forms/progress/margin-padding-rtl-ref.html88
-rw-r--r--layout/reftests/forms/progress/margin-padding-rtl.html40
-rw-r--r--layout/reftests/forms/progress/margin-padding-vertical-ref.html88
-rw-r--r--layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html88
-rw-r--r--layout/reftests/forms/progress/margin-padding-vertical-rtl.html43
-rw-r--r--layout/reftests/forms/progress/margin-padding-vertical.html43
-rw-r--r--layout/reftests/forms/progress/margin-padding.html40
-rw-r--r--layout/reftests/forms/progress/max-height-ref.html11
-rw-r--r--layout/reftests/forms/progress/max-height.html11
-rw-r--r--layout/reftests/forms/progress/progress-orient-block.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-horizontal-rtl.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-inline.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-vertical-rtl.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-vertical.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr-orient-block.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr-orient-inline.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr-orient-vertical.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl-orient-block.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl-orient-inline.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl-orient-vertical.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl.html3
-rw-r--r--layout/reftests/forms/progress/reftest.list42
-rw-r--r--layout/reftests/forms/progress/style.css37
-rw-r--r--layout/reftests/forms/progress/transformations-ref.html78
-rw-r--r--layout/reftests/forms/progress/transformations.html36
-rw-r--r--layout/reftests/forms/progress/values-ref.html58
-rw-r--r--layout/reftests/forms/progress/values-rtl-ref.html58
-rw-r--r--layout/reftests/forms/progress/values-rtl.html16
-rw-r--r--layout/reftests/forms/progress/values-vertical-ref.html58
-rw-r--r--layout/reftests/forms/progress/values-vertical-rtl-ref.html58
-rw-r--r--layout/reftests/forms/progress/values-vertical-rtl.html21
-rw-r--r--layout/reftests/forms/progress/values-vertical.html21
-rw-r--r--layout/reftests/forms/progress/values.html16
-rw-r--r--layout/reftests/forms/reftest.list40
-rw-r--r--layout/reftests/forms/select/1769580-ref.html12
-rw-r--r--layout/reftests/forms/select/1769580.html13
-rw-r--r--layout/reftests/forms/select/997709-2-ref.html4
-rw-r--r--layout/reftests/forms/select/997709-2.html4
-rw-r--r--layout/reftests/forms/select/arrow-color-notref.html4
-rw-r--r--layout/reftests/forms/select/arrow-color.html4
-rw-r--r--layout/reftests/forms/select/boguskids-ref.html13
-rw-r--r--layout/reftests/forms/select/boguskids.html18
-rw-r--r--layout/reftests/forms/select/dynamic-boguskids.html31
-rw-r--r--layout/reftests/forms/select/dynamic-text-indent-1-ref.html4
-rw-r--r--layout/reftests/forms/select/dynamic-text-indent-1.html14
-rw-r--r--layout/reftests/forms/select/dynamic-text-overflow-1-ref.html4
-rw-r--r--layout/reftests/forms/select/dynamic-text-overflow-1.html14
-rw-r--r--layout/reftests/forms/select/focusring-1-ref.html37
-rw-r--r--layout/reftests/forms/select/focusring-1.html41
-rw-r--r--layout/reftests/forms/select/focusring-2-ref.html22
-rw-r--r--layout/reftests/forms/select/focusring-2.html46
-rw-r--r--layout/reftests/forms/select/intrinsic-size-scrollbar.html2
-rw-r--r--layout/reftests/forms/select/listbox-checked-style-notref.html11
-rw-r--r--layout/reftests/forms/select/listbox-checked-style-ref.html11
-rw-r--r--layout/reftests/forms/select/listbox-checked-style.html11
-rw-r--r--layout/reftests/forms/select/listbox-focus-notref.html13
-rw-r--r--layout/reftests/forms/select/listbox-focus.html13
-rw-r--r--layout/reftests/forms/select/listbox-zero-row-initial-ref.html23
-rw-r--r--layout/reftests/forms/select/listbox-zero-row-initial.html14
-rw-r--r--layout/reftests/forms/select/multiple-ref.html12
-rw-r--r--layout/reftests/forms/select/multiple.html12
-rw-r--r--layout/reftests/forms/select/no-padding-ref.html2
-rw-r--r--layout/reftests/forms/select/no-padding.html2
-rw-r--r--layout/reftests/forms/select/option-children-ref.html5
-rw-r--r--layout/reftests/forms/select/option-children.html11
-rw-r--r--layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html112
-rw-r--r--layout/reftests/forms/select/out-of-bounds-selectedindex.html129
-rw-r--r--layout/reftests/forms/select/padding-button-placement-ref.html10
-rw-r--r--layout/reftests/forms/select/padding-button-placement.html15
-rw-r--r--layout/reftests/forms/select/reftest.list31
-rw-r--r--layout/reftests/forms/select/select-option-display-none-inline-size-ref.html18
-rw-r--r--layout/reftests/forms/select/select-option-display-none-inline-size.html23
-rw-r--r--layout/reftests/forms/select/select-scrollbar-width-ref.html2
-rw-r--r--layout/reftests/forms/select/select-scrollbar-width.html2
-rw-r--r--layout/reftests/forms/select/themed-select-padding-no-clip-ref.html37
-rw-r--r--layout/reftests/forms/select/themed-select-padding-no-clip.html26
-rw-r--r--layout/reftests/forms/select/vertical-centering-ref.html20
-rw-r--r--layout/reftests/forms/select/vertical-centering.html18
-rw-r--r--layout/reftests/forms/text-control-baseline-1-ref.html30
-rw-r--r--layout/reftests/forms/text-control-baseline-1.html37
-rw-r--r--layout/reftests/forms/textarea/appearance-background-change-ref.html8
-rw-r--r--layout/reftests/forms/textarea/appearance-background-change.html11
-rw-r--r--layout/reftests/forms/textarea/in-dynamic-rtl-doc.html18
-rw-r--r--layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html10
-rw-r--r--layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html10
-rw-r--r--layout/reftests/forms/textarea/ltr-scrollbar.html10
-rw-r--r--layout/reftests/forms/textarea/ltr.html10
-rw-r--r--layout/reftests/forms/textarea/no-resize.html10
-rw-r--r--layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html43
-rw-r--r--layout/reftests/forms/textarea/padding-scrollbar-placement.html44
-rw-r--r--layout/reftests/forms/textarea/padding-text-overflow-notref.html12
-rw-r--r--layout/reftests/forms/textarea/padding-text-overflow.html13
-rw-r--r--layout/reftests/forms/textarea/reftest.list18
-rw-r--r--layout/reftests/forms/textarea/resize-background-ref.html30
-rw-r--r--layout/reftests/forms/textarea/resize-background.html3
-rw-r--r--layout/reftests/forms/textarea/resize-ref.html3
-rw-r--r--layout/reftests/forms/textarea/resize-rtl-ref.html3
-rw-r--r--layout/reftests/forms/textarea/resize-rtl-vertical.html3
-rw-r--r--layout/reftests/forms/textarea/resize-rtl.html3
-rw-r--r--layout/reftests/forms/textarea/resize-vertical.html3
-rw-r--r--layout/reftests/forms/textarea/resize.html3
-rw-r--r--layout/reftests/forms/textarea/rtl-dynamic-attr.html18
-rw-r--r--layout/reftests/forms/textarea/rtl-dynamic-style.html18
-rw-r--r--layout/reftests/forms/textarea/rtl-scrollbar.html10
-rw-r--r--layout/reftests/forms/textarea/rtl.html10
-rw-r--r--layout/reftests/forms/textarea/various-cols-ref.html4
-rw-r--r--layout/reftests/forms/textarea/various-cols.html4
-rw-r--r--layout/reftests/forms/textbox/accesskey-1-dyn.xhtml42
-rw-r--r--layout/reftests/forms/textbox/accesskey-1-notref.xhtml35
-rw-r--r--layout/reftests/forms/textbox/accesskey-1.xhtml35
-rw-r--r--layout/reftests/forms/textbox/accesskey-2-ref.xhtml36
-rw-r--r--layout/reftests/forms/textbox/accesskey-2.xhtml36
-rw-r--r--layout/reftests/forms/textbox/accesskey-3-notref.xhtml36
-rw-r--r--layout/reftests/forms/textbox/accesskey-3-ref.xhtml36
-rw-r--r--layout/reftests/forms/textbox/accesskey-3.xhtml36
-rw-r--r--layout/reftests/forms/textbox/accesskey-4-notref.xhtml36
-rw-r--r--layout/reftests/forms/textbox/accesskey-4-ref.xhtml36
-rw-r--r--layout/reftests/forms/textbox/accesskey-4.xhtml36
-rw-r--r--layout/reftests/forms/textbox/align-baseline-1-ref.xhtml26
-rw-r--r--layout/reftests/forms/textbox/align-baseline-1.xhtml34
-rw-r--r--layout/reftests/forms/textbox/reftest.list11
-rw-r--r--layout/reftests/forms/textbox/setsize-ref.xhtml9
-rw-r--r--layout/reftests/forms/textbox/setsize.xhtml8
716 files changed, 15935 insertions, 0 deletions
diff --git a/layout/reftests/forms/button/1317351-ref.html b/layout/reftests/forms/button/1317351-ref.html
new file mode 100644
index 0000000000..3ad5be0a13
--- /dev/null
+++ b/layout/reftests/forms/button/1317351-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title></title>
+ <style type="text/css">
+
+html { padding: 100px }
+
+mask {
+ position: absolute;
+ top: 98px; left: 98px;
+ width: 300px;
+ height: 200px;
+ background: black;
+}
+ </style>
+</head>
+<body>
+<mask></mask>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/1317351.html b/layout/reftests/forms/button/1317351.html
new file mode 100644
index 0000000000..d0054024e8
--- /dev/null
+++ b/layout/reftests/forms/button/1317351.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title></title>
+ <style type="text/css">
+
+html { padding: 100px }
+
+input,button {
+ width: auto;
+ min-width: 50px;
+ writing-mode: vertical-rl;
+}
+
+mask {
+ position: absolute;
+ top: 98px; left: 98px;
+ width: 300px;
+ height: 200px;
+ background: black;
+}
+ </style>
+</head>
+<body>
+<input type="color">
+<button><div style="width:100%; height:100%"></div></button>
+
+<mask></mask>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/1349646-ref.html b/layout/reftests/forms/button/1349646-ref.html
new file mode 100644
index 0000000000..d36f19477a
--- /dev/null
+++ b/layout/reftests/forms/button/1349646-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+button {
+ padding: 0px;
+ border:none;
+ font-size: 64px;
+ background-color: green;
+}
+button::-moz-focus-inner {
+ padding-inline-start: 0px;
+ padding-inline-end: 0px;
+}
+button:-moz-focusring::-moz-focus-inner {
+ border: 4px solid;
+}
+</style>
+<div>
+ <button id="button1"><span>Menu1</span></button>
+</div>
+<script>
+window.onload = () => {
+ button1.focus();
+ document.documentElement.classList.remove('reftest-wait');
+}
+</script>
+</html>
diff --git a/layout/reftests/forms/button/1349646.html b/layout/reftests/forms/button/1349646.html
new file mode 100644
index 0000000000..a51c69a010
--- /dev/null
+++ b/layout/reftests/forms/button/1349646.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+button {
+ padding: 0px;
+ border:none;
+ font-size: 64px;
+ background-color: green;
+}
+button::-moz-focus-inner {
+ padding-inline-start: 20px;
+ padding-inline-end: 20px;
+}
+button:-moz-focusring::-moz-focus-inner {
+ border: 4px solid;
+}
+</style>
+<div>
+ <button id="button1"><span>Menu1</span></button>
+</div>
+<script>
+window.onload = () => {
+ button1.focus();
+ document.documentElement.classList.remove('reftest-wait');
+}
+</script>
+</html>
diff --git a/layout/reftests/forms/button/appearance-revert-ref.html b/layout/reftests/forms/button/appearance-revert-ref.html
new file mode 100644
index 0000000000..9e863880df
--- /dev/null
+++ b/layout/reftests/forms/button/appearance-revert-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<button>Foo</button>
diff --git a/layout/reftests/forms/button/appearance-revert.html b/layout/reftests/forms/button/appearance-revert.html
new file mode 100644
index 0000000000..06f1d045d2
--- /dev/null
+++ b/layout/reftests/forms/button/appearance-revert.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<button style="border: revert">Foo</button>
diff --git a/layout/reftests/forms/button/author-padding-notref.html b/layout/reftests/forms/button/author-padding-notref.html
new file mode 100644
index 0000000000..9e863880df
--- /dev/null
+++ b/layout/reftests/forms/button/author-padding-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<button>Foo</button>
diff --git a/layout/reftests/forms/button/author-padding.html b/layout/reftests/forms/button/author-padding.html
new file mode 100644
index 0000000000..9b924488c0
--- /dev/null
+++ b/layout/reftests/forms/button/author-padding.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<!-- This technically assumes that no theme would have 300px of padding by default, looks like a safe enough assumption -->
+<button style="padding: 300px">Foo</button>
diff --git a/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html b/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html
new file mode 100644
index 0000000000..2c45c375ab
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-flex-fullsize-1-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>Reference: Testing for full height flex container in a button.</title>
+ <meta charset="utf-8">
+ <style>
+ button {
+ vertical-align: top;
+ padding: 0;
+ border: solid 1px black;
+ background: lightblue;
+ width: 200px;
+ height: 200px;
+ }
+
+ .flex {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ }
+
+ .flex > * {
+ margin: 1px;
+ background: teal;
+ min-height: 10px;
+ min-width: 10px;
+ }
+
+ .vertical {
+ flex-direction: column;
+ }
+ </style>
+</head>
+<body>
+ <button>
+ <div class="flex">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </button>
+ <button>
+ <div class="flex vertical">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </button>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/button/button-display-flex-fullsize-1.html b/layout/reftests/forms/button/button-display-flex-fullsize-1.html
new file mode 100644
index 0000000000..f351fc66b3
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-flex-fullsize-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>CSS Test: Testing for full height flex container in a button.</title>
+ <meta charset="utf-8">
+ <style>
+ button {
+ vertical-align: top;
+ padding: 0;
+ border: solid 1px black;
+ background: lightblue;
+ width: 200px;
+ height: 200px;
+ }
+
+ .flex {
+ display: inline-flex;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+
+ .flex > * {
+ margin: 1px;
+ background: teal;
+ min-height: 10px;
+ min-width: 10px;
+ }
+
+ .vertical {
+ flex-direction: column;
+ }
+ </style>
+</head>
+<body>
+ <button class="flex">
+ <div></div>
+ <div></div>
+ <div></div>
+ </button>
+ <button class="flex vertical">
+ <div></div>
+ <div></div>
+ <div></div>
+ </button>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html b/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html
new file mode 100644
index 0000000000..1b3df75dff
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-grid-fullsize-1-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>Reference: Testing for full height grid container in a button.</title>
+ <meta charset="utf-8">
+ <style>
+ button {
+ vertical-align: top;
+ padding: 0;
+ border: solid 1px black;
+ background: lightblue;
+ width: 200px;
+ height: 200px;
+ }
+
+ .grid {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ grid-template-rows: auto;
+ justify-content: space-between;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ }
+
+ .grid > * {
+ margin: 1px;
+ background: teal;
+ min-height: 10px;
+ min-width: 10px;
+ }
+
+ .vertical {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ }
+ </style>
+</head>
+<body>
+ <button>
+ <div class="grid">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </button>
+ <button>
+ <div class="grid vertical">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </button>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/button/button-display-grid-fullsize-1.html b/layout/reftests/forms/button/button-display-grid-fullsize-1.html
new file mode 100644
index 0000000000..4998c213d2
--- /dev/null
+++ b/layout/reftests/forms/button/button-display-grid-fullsize-1.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0
+-->
+<html>
+<head>
+ <title>CSS Test: Testing for full height grid container in a button.</title>
+ <meta charset="utf-8">
+ <style>
+ button {
+ vertical-align: top;
+ padding: 0;
+ border: solid 1px black;
+ background: lightblue;
+ width: 200px;
+ height: 200px;
+ }
+
+ .grid {
+ display: inline-grid;
+ grid-template-columns: auto auto auto;
+ grid-template-rows: auto;
+ justify-content: space-between;
+ align-items: stretch;
+ }
+
+ .grid > * {
+ margin: 1px;
+ background: teal;
+ min-height: 10px;
+ min-width: 10px;
+ }
+
+ .vertical {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ }
+ </style>
+</head>
+<body>
+ <!-- 3 columns/1 row -->
+ <button class="grid">
+ <div></div>
+ <div></div>
+ <div></div>
+ </button>
+ <!-- 1 column/3 rows, using "fr" units to fill container -->
+ <button class="grid vertical">
+ <div></div>
+ <div></div>
+ <div></div>
+ </button>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/button/button-empty-columns-ref.html b/layout/reftests/forms/button/button-empty-columns-ref.html
new file mode 100644
index 0000000000..0016d8cc8c
--- /dev/null
+++ b/layout/reftests/forms/button/button-empty-columns-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<button style="width: 100px; height: 5px;"></button>
diff --git a/layout/reftests/forms/button/button-empty-columns.html b/layout/reftests/forms/button/button-empty-columns.html
new file mode 100644
index 0000000000..6154310810
--- /dev/null
+++ b/layout/reftests/forms/button/button-empty-columns.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<button style="columns: 2; width: 100px; height: 5px;"></button>
diff --git a/layout/reftests/forms/button/button-visibility-1-ref.html b/layout/reftests/forms/button/button-visibility-1-ref.html
new file mode 100644
index 0000000000..441b5151cf
--- /dev/null
+++ b/layout/reftests/forms/button/button-visibility-1-ref.html
@@ -0,0 +1,25 @@
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Test for bug 1732921</title>
+ <style>
+ .parent {
+ border: 0px;
+ background: none;
+ will-change: transform;
+ }
+
+ .child {
+ visibility: visible;
+ }
+ </style>
+</head>
+
+<body>
+ <button class="parent">
+ <span class="child">foo</span>
+ </button>
+</body>
+
+</html>
diff --git a/layout/reftests/forms/button/button-visibility-1.html b/layout/reftests/forms/button/button-visibility-1.html
new file mode 100644
index 0000000000..84faf2ca03
--- /dev/null
+++ b/layout/reftests/forms/button/button-visibility-1.html
@@ -0,0 +1,26 @@
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Test for bug 1732921</title>
+ <style>
+ .parent {
+ border: 0px;
+ background: none;
+ visibility: hidden;
+ will-change: transform;
+ }
+
+ .child {
+ visibility: visible;
+ }
+ </style>
+</head>
+
+<body>
+ <button class="parent">
+ <span class="child">foo</span>
+ </button>
+</body>
+
+</html>
diff --git a/layout/reftests/forms/button/disabled-1-ref.html b/layout/reftests/forms/button/disabled-1-ref.html
new file mode 100644
index 0000000000..c408ec16fb
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test button "disabled" text style</title>
+<style>
+ button {
+ color: GrayText;
+ border-width: 0;
+ background: transparent;
+ }
+</style>
+</head>
+<body>
+ <button>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-1.html b/layout/reftests/forms/button/disabled-1.html
new file mode 100644
index 0000000000..6bcba667bd
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test button "disabled" text style</title>
+<style>
+ button {
+ border-width: 0;
+ background: transparent;
+ }
+</style>
+</head>
+<body>
+ <button disabled>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-2-ref.html b/layout/reftests/forms/button/disabled-2-ref.html
new file mode 100644
index 0000000000..53958f76b7
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test all types of buttons look similar when disabled</title>
+</head>
+<body>
+ <button>Some text</button>
+ <button>Some text</button>
+ <button>Reset</button>
+ <button>Submit Query</button>
+ <br>
+ <button disabled>Some text</button>
+ <button disabled>Some text</button>
+ <button disabled>Reset</button>
+ <button disabled>Submit Query</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-2.html b/layout/reftests/forms/button/disabled-2.html
new file mode 100644
index 0000000000..a77287dfee
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test all types of buttons look similar when disabled</title>
+</head>
+<body>
+ <button>Some text</button>
+ <input type="button" value="Some text">
+ <input type="reset">
+ <input type="submit">
+ <br>
+ <button disabled>Some text</button>
+ <input disabled type="button" value="Some text">
+ <input disabled type="reset">
+ <input disabled type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-3-notref.html b/layout/reftests/forms/button/disabled-3-notref.html
new file mode 100644
index 0000000000..bd8b457746
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-3-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <button disabled>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-3.html b/layout/reftests/forms/button/disabled-3.html
new file mode 100644
index 0000000000..440d43b531
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-3.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <button>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-4-notref.html b/layout/reftests/forms/button/disabled-4-notref.html
new file mode 100644
index 0000000000..41fe9e6107
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-4-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input disabled type="button" value="Some text">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-4.html b/layout/reftests/forms/button/disabled-4.html
new file mode 100644
index 0000000000..38f71544a2
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-4.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input type="button" value="Some text">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-5-notref.html b/layout/reftests/forms/button/disabled-5-notref.html
new file mode 100644
index 0000000000..d944d04216
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-5-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input disabled type="reset">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-5.html b/layout/reftests/forms/button/disabled-5.html
new file mode 100644
index 0000000000..ded7c1905d
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-5.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input type="reset">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-6-notref.html b/layout/reftests/forms/button/disabled-6-notref.html
new file mode 100644
index 0000000000..c6f0abce66
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-6-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input disabled type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-6.html b/layout/reftests/forms/button/disabled-6.html
new file mode 100644
index 0000000000..2a1d9cfa7f
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-6.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+ <input type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/display-grid-flex-columnset-ref.html b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html
new file mode 100644
index 0000000000..c843a84b6a
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 984869</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+.grid, .igrid {
+ display: grid;
+ grid: 20px / 20px 20px;
+}
+.igrid { display:inline-grid; }
+
+.flex, .iflex {
+ display: flex;
+}
+.iflex { display:inline-flex; }
+
+.columnset, .block-columnset {
+ -ms-columns: 2;
+ -webkit-columns: 2;
+ columns: 2;
+}
+
+.block-columnset, .b { display: block; }
+
+a {
+ position: absolute;
+ right:0; bottom:0;
+ width:5px; height:5px;
+ background: lime;
+}
+.rel { position:relative; }
+
+button { vertical-align: bottom; }
+ </style>
+</head>
+<body>
+
+<button><wrap class="grid">x<span>y</span>z</wrap></button>
+<button><wrap class="iflex">x<span>y</span>z</wrap></button>
+<button><wrap class="b columnset">x<br><span>y</span>z</wrap></button>
+
+<button class="rel"><wrap class="grid">x<span>y</span>z<a></a></wrap></button>
+<button class="rel"><wrap class="iflex">x<span>y</span>z<a></a></wrap></button>
+<button class="rel"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button>
+
+<button class="b"><wrap class="grid">x<span>y</span>z</wrap></button>
+<button class="b"><wrap class="flex">x<span>y</span>z</wrap></button>
+<button class="b"><wrap class="b columnset">x<br><span>y</span>z</wrap></button>
+
+<button class="rel b"><wrap class="grid">x<span>y</span>z<a></a></wrap></button>
+<button class="rel b"><wrap class="flex">x<span>y</span>z<a></a></wrap></button>
+<button class="rel b"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/display-grid-flex-columnset.html b/layout/reftests/forms/button/display-grid-flex-columnset.html
new file mode 100644
index 0000000000..ffada3bced
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 984869</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+.grid, .igrid {
+ display: grid;
+ grid: 20px / 20px 20px;
+}
+.igrid { display:inline-grid; }
+
+.flex, .iflex {
+ display: flex;
+}
+.iflex { display:inline-flex; }
+
+.columnset {
+ -ms-columns: 2;
+ -webkit-columns: 2;
+ columns: 2;
+}
+
+.b { display: block; }
+
+a {
+ position: absolute;
+ right:0; bottom:0;
+ width:5px; height:5px;
+ background: lime;
+}
+.rel { position:relative; }
+
+button { vertical-align: bottom; }
+ </style>
+</head>
+<body>
+
+<button class="igrid">x<span>y</span>z</button>
+<button class="iflex">x<span>y</span>z</button>
+<button class="columnset">x<br><span>y</span>z</button>
+
+<button class="rel igrid">x<span>y</span>z<a></a></button>
+<button class="rel iflex">x<span>y</span>z<a></a></button>
+<button class="rel columnset">x<br><span>y</span>z<a></a></button>
+
+<button class="grid">x<span>y</span>z</button>
+<button class="flex">x<span>y</span>z</button>
+<button class="b columnset">x<br><span>y</span>z</button>
+
+<button class="rel grid">x<span>y</span>z<a></a></button>
+<button class="rel flex">x<span>y</span>z<a></a></button>
+<button class="rel b columnset">x<br><span>y</span>z<a></a></button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/dynamic-text-indent-ref.html b/layout/reftests/forms/button/dynamic-text-indent-ref.html
new file mode 100644
index 0000000000..1b1789cd3e
--- /dev/null
+++ b/layout/reftests/forms/button/dynamic-text-indent-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+ <button style="text-indent: 50px">Some text</button>
+</html>
diff --git a/layout/reftests/forms/button/dynamic-text-indent.html b/layout/reftests/forms/button/dynamic-text-indent.html
new file mode 100644
index 0000000000..9b0724ed51
--- /dev/null
+++ b/layout/reftests/forms/button/dynamic-text-indent.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <button>Some text</button>
+ <script>
+ onload = function() {
+ var obj = document.querySelector("button");
+ window.w = obj.getBoundingClientRect().width;
+ obj.style.textIndent = "50px";
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/forms/button/first-letter-1-noref.html b/layout/reftests/forms/button/first-letter-1-noref.html
new file mode 100644
index 0000000000..d59db575fa
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1-noref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<style>
+ body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/first-letter-1-ref.html b/layout/reftests/forms/button/first-letter-1-ref.html
new file mode 100644
index 0000000000..34ffa64f22
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+ button { display: block; }
+ button::first-letter { color: green; }
+ body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/first-letter-1.html b/layout/reftests/forms/button/first-letter-1.html
new file mode 100644
index 0000000000..3dbf1667fa
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<style>
+ button::first-letter { color: green; }
+ body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/focus-non-themed-ref.html b/layout/reftests/forms/button/focus-non-themed-ref.html
new file mode 100644
index 0000000000..8f5577671c
--- /dev/null
+++ b/layout/reftests/forms/button/focus-non-themed-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+ button {
+ outline: none;
+ -moz-appearance: none;
+ appearance: none;
+ }
+ button::-moz-focus-inner { border: 0 }
+</style>
+<button autofocus>Foo</button>
diff --git a/layout/reftests/forms/button/focus-non-themed.html b/layout/reftests/forms/button/focus-non-themed.html
new file mode 100644
index 0000000000..0fa28a9259
--- /dev/null
+++ b/layout/reftests/forms/button/focus-non-themed.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ button {
+ outline: none;
+ -moz-appearance: none;
+ appearance: none;
+ }
+</style>
+<button autofocus>Foo</button>
diff --git a/layout/reftests/forms/button/line-height-button-0.5.html b/layout/reftests/forms/button/line-height-button-0.5.html
new file mode 100644
index 0000000000..e3343d9e42
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 0.5 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-button-1.0.html b/layout/reftests/forms/button/line-height-button-1.0.html
new file mode 100644
index 0000000000..2685624dc0
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 1.0 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-button-1.5.html b/layout/reftests/forms/button/line-height-button-1.5.html
new file mode 100644
index 0000000000..f86839fc3c
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 1.5 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-input-0.5.html b/layout/reftests/forms/button/line-height-input-0.5.html
new file mode 100644
index 0000000000..e3b6dd9200
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 0.5 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/line-height-input-1.0.html b/layout/reftests/forms/button/line-height-input-1.0.html
new file mode 100644
index 0000000000..18f8b4646c
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.0 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/line-height-input-1.5.html b/layout/reftests/forms/button/line-height-input-1.5.html
new file mode 100644
index 0000000000..ea486d14ea
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.5 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/max-height-ref.html b/layout/reftests/forms/button/max-height-ref.html
new file mode 100644
index 0000000000..ea12a86681
--- /dev/null
+++ b/layout/reftests/forms/button/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ button {
+ height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/max-height.html b/layout/reftests/forms/button/max-height.html
new file mode 100644
index 0000000000..87ac8a979c
--- /dev/null
+++ b/layout/reftests/forms/button/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ button {
+ max-height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/min-height-ref.html b/layout/reftests/forms/button/min-height-ref.html
new file mode 100644
index 0000000000..5f0f2d654e
--- /dev/null
+++ b/layout/reftests/forms/button/min-height-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.btn1, .btn2 {
+ border: 5px solid green;
+ background-color: blue;
+ height: 50px;
+}
+</style>
+</head>
+<body>
+<input type='submit' class='btn1' value='' />
+<input type='submit' class='btn2' value='' />
+</body>
+</html>
diff --git a/layout/reftests/forms/button/min-height.html b/layout/reftests/forms/button/min-height.html
new file mode 100644
index 0000000000..cadffa78d5
--- /dev/null
+++ b/layout/reftests/forms/button/min-height.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.btn1, .btn2 {
+ border: 5px solid green;
+ background-color: blue;
+}
+.btn1 {
+ min-height: 50px;
+}
+.btn2 {
+ height: 50px;
+}
+</style>
+</head>
+<body>
+<input type='submit' class='btn1' value='' />
+<input type='submit' class='btn2' value='' />
+</body>
+</html>
diff --git a/layout/reftests/forms/button/overflow-areas-1-ref.html b/layout/reftests/forms/button/overflow-areas-1-ref.html
new file mode 100644
index 0000000000..a1eb505753
--- /dev/null
+++ b/layout/reftests/forms/button/overflow-areas-1-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+ <title>Reference case</title>
+ <style>
+ input, button {
+ border: 0; /* Combined, these mean the gray area is the */
+ background: lightgray; /* border-box size. */
+
+ outline: 2px solid black; /* The outlined area is the overflow area. */
+ width: 1px; /* (To attempt to trigger overflow) */
+
+ display: block; /* Put each button on its own line, w/ some margin, */
+ margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */
+
+ font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
+ }
+
+ .oh { overflow: hidden }
+ </style>
+</head>
+<body>
+ <!-- For the reference case, we just put "overflow:hidden" on everything. -->
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <!-- ...with one exception: button with (default) overflow:visible.
+ Such buttons *do* actually allow their contents to overflow. -->
+ <button>ActualButton</button>
+
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <button class="oh">ActualButton</button>
+
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <button class="oh">ActualButton</button>
+
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <button class="oh">ActualButton</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/overflow-areas-1.html b/layout/reftests/forms/button/overflow-areas-1.html
new file mode 100644
index 0000000000..b1a34dfe40
--- /dev/null
+++ b/layout/reftests/forms/button/overflow-areas-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+ - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- For buttons whose painting gets clipped to their border-box area,
+ we should *also* clip their overflow area (as exposed via 'outline').
+ This test exposes these areas so they can be visualized, and checks that
+ they match when we expect them to. -->
+<head>
+ <title>Testcase for bug 1261284</title>
+ <style>
+ input, button {
+ border: 0; /* Combined, these mean the gray area is the */
+ background: lightgray; /* border-box size. */
+
+ outline: 2px solid black; /* The outlined area is the overflow area. */
+ width: 1px; /* (To attempt to trigger overflow) */
+
+ display: block; /* Put each button on its own line, w/ some margin, */
+ margin-bottom: 5px; /* so that any overflow doesn't get stomped on. */
+
+ font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
+ }
+
+ .oh { overflow: hidden }
+ .oa { overflow: auto }
+ .os { overflow: scroll }
+ </style>
+</head>
+<body>
+ <input type="reset">
+ <input type="submit">
+ <input type="button" value="InputTypeButton">
+ <button>ActualButton</button>
+
+ <input class="oh" type="reset">
+ <input class="oh" type="submit">
+ <input class="oh" type="button" value="InputTypeButton">
+ <button class="oh">ActualButton</button>
+
+ <input class="oa" type="reset">
+ <input class="oa" type="submit">
+ <input class="oa" type="button" value="InputTypeButton">
+ <button class="oa">ActualButton</button>
+
+ <input class="os" type="reset">
+ <input class="os" type="submit">
+ <input class="os" type="button" value="InputTypeButton">
+ <button class="os">ActualButton</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-ref.html b/layout/reftests/forms/button/percent-height-child-ref.html
new file mode 100644
index 0000000000..b2b8109587
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+ display: inline-block;
+ width: 80px;
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ text-align: center;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+}
+
+div.p80 {
+ background: pink;
+}
+
+div.p100 {
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<div class="button" style="height: 100px">
+ <div class="p80" style="margin-top: 10px; height: 80px">abc</div>
+</div>
+
+<div class="button" style="height: 100px">
+ <div class="p100" style="height: 100px">abc</div>
+</div>
+
+<!--Button is using intrinsic height: -->
+<div class="button">
+ <div class="p80">abc</div>
+</div>
+
+<div class="button">
+ <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child.html b/layout/reftests/forms/button/percent-height-child.html
new file mode 100644
index 0000000000..c676715c23
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent heights on content inside of
+ a <button> element (resolving the percent against the <button>).
+ (In this testcase, the button has no focus-border/padding.) -->
+<html>
+<head>
+<style>
+button {
+ width: 80px;
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+ -moz-appearance: none;
+}
+button::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+
+div.p80 {
+ height: 80%;
+ background: pink;
+}
+
+div.p100 {
+ height: 100%;
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<button style="height: 100px">
+ <div class="p80">abc</div>
+</button>
+
+<button style="height: 100px">
+ <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic height: -->
+<button>
+ <div class="p80">abc</div>
+</button>
+
+<button>
+ <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-ref.html b/layout/reftests/forms/button/percent-width-child-ref.html
new file mode 100644
index 0000000000..dcc2289944
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+ display: inline-block;
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ text-align: center;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+}
+
+div.p80 {
+ width: 80%;
+ background: pink;
+}
+
+div.p100 {
+ width: 100%;
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<div class="button" style="width: 100px">
+ <div class="p80">abc</div>
+</div>
+
+<div class="button" style="width: 100px">
+ <div class="p100">abc</div>
+</div>
+
+<!--Button is using intrinsic width: -->
+<div class="button">
+ <div class="p80">abc</div>
+</div>
+
+<div class="button">
+ <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child.html b/layout/reftests/forms/button/percent-width-child.html
new file mode 100644
index 0000000000..fdd2b49236
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent widths on content inside of
+ a <button> element (resolving the percent against the <button>).
+ (In this testcase, the button has no focus-border/padding.) -->
+<html>
+<head>
+<style>
+button {
+ border: 0;
+ padding: 0;
+
+ font: 10px sans-serif;
+ vertical-align: top;
+
+ color: black;
+ background: gray;
+ -moz-appearance: none;
+}
+button::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+
+div.p80 {
+ width: 80%;
+ background: pink;
+}
+
+div.p100 {
+ width: 100%;
+ background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<button style="width: 100px">
+ <div class="p80">abc</div>
+</button>
+
+<button style="width: 100px">
+ <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic width: -->
+<button>
+ <div class="p80">abc</div>
+</button>
+
+<button>
+ <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/reftest.list b/layout/reftests/forms/button/reftest.list
new file mode 100644
index 0000000000..cfd67fc662
--- /dev/null
+++ b/layout/reftests/forms/button/reftest.list
@@ -0,0 +1,59 @@
+# Tests for grid and flex sizing in buttons
+== button-display-flex-fullsize-1.html button-display-flex-fullsize-1-ref.html
+== button-display-grid-fullsize-1.html button-display-grid-fullsize-1-ref.html
+
+== first-letter-1.html first-letter-1-ref.html
+!= first-letter-1.html first-letter-1-noref.html
+
+== max-height.html max-height-ref.html
+== min-height.html min-height-ref.html
+
+# Android is off ever-so-slightly on the points where the text
+# runs into the border on this text, so a little fuzz is needed.
+fuzzy-if(Android,0-1,0-16) == overflow-areas-1.html overflow-areas-1-ref.html
+
+# The buttons in these tests have some fancy shading applied to their corners
+# on Android, despite their "-moz-appearance: none; background: gray", so they
+# don't quite match the reference case's normal <div>. That's why they're fuzzy.
+fuzzy-if(Android,0-125,0-20) == percent-height-child.html percent-height-child-ref.html
+fuzzy-if(Android,0-125,0-20) == percent-width-child.html percent-width-child-ref.html
+
+== vertical-centering.html vertical-centering-ref.html
+
+!= line-height-button-0.5.html line-height-button-1.0.html
+!= line-height-button-1.5.html line-height-button-1.0.html
+!= line-height-input-0.5.html line-height-input-1.0.html
+!= line-height-input-1.5.html line-height-input-1.0.html
+
+# Looks like Android changes the text color, but to something slightly
+# different from ColorGray
+== disabled-1.html disabled-1-ref.html
+== disabled-2.html disabled-2-ref.html
+
+!= disabled-3.html disabled-3-notref.html
+!= disabled-4.html disabled-4-notref.html
+!= disabled-5.html disabled-5-notref.html
+!= disabled-6.html disabled-6-notref.html
+
+!= author-padding.html author-padding-notref.html
+
+== width-auto-size-em-ltr.html width-auto-size-em-ltr-ref.html
+== width-auto-size-ltr.html width-auto-size-ltr-ref.html
+== width-exact-fit-ltr.html width-auto-size-ltr-ref.html
+== width-auto-size-em-rtl.html width-auto-size-em-rtl-ref.html
+== width-auto-size-rtl.html width-auto-size-rtl-ref.html
+== width-exact-fit-rtl.html width-auto-size-rtl-ref.html
+== display-grid-flex-columnset.html display-grid-flex-columnset-ref.html
+== button-empty-columns.html button-empty-columns-ref.html
+== 1317351.html 1317351-ref.html
+
+== dynamic-text-indent.html dynamic-text-indent-ref.html
+
+fuzzy(0-5,0-1) == 1349646.html 1349646-ref.html
+
+== appearance-revert.html appearance-revert-ref.html
+
+needs-focus == focus-non-themed.html focus-non-themed-ref.html
+
+== button-visibility-1.html button-visibility-1-ref.html
+
diff --git a/layout/reftests/forms/button/vertical-centering-ref.html b/layout/reftests/forms/button/vertical-centering-ref.html
new file mode 100644
index 0000000000..aa6d763676
--- /dev/null
+++ b/layout/reftests/forms/button/vertical-centering-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+ height: 100px;
+ display: inline-block;
+ border: 0;
+ padding: 0;
+
+ font: 2em/100px sans-serif;
+ text-align: center;
+
+ background: transparent;
+ color: black;
+}
+</style>
+</head>
+<body>
+<div>button</div>
+<div>button</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/vertical-centering.html b/layout/reftests/forms/button/vertical-centering.html
new file mode 100644
index 0000000000..08ca385191
--- /dev/null
+++ b/layout/reftests/forms/button/vertical-centering.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+input, div {
+ height: 100px;
+ display: inline-block;
+ border: 0;
+ padding: 0;
+
+ font: 2em sans-serif;
+
+ background: transparent;
+ color: black;
+}
+input {
+ -moz-appearance: none;
+}
+input::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+div {
+ line-height: 100px;
+ text-align: center;
+}
+</style>
+</head>
+<body>
+<input type='button' value='button' />
+<div>button</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
new file mode 100644
index 0000000000..4a998c3435
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr.html b/layout/reftests/forms/button/width-auto-size-em-ltr.html
new file mode 100644
index 0000000000..3285c3e955
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 1em;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
new file mode 100644
index 0000000000..59f3ba424b
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl.html b/layout/reftests/forms/button/width-auto-size-em-rtl.html
new file mode 100644
index 0000000000..fb72ef97e9
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 1em;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
new file mode 100644
index 0000000000..48372131ea
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr.html b/layout/reftests/forms/button/width-auto-size-ltr.html
new file mode 100644
index 0000000000..c8f3f7d110
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-ltr.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
new file mode 100644
index 0000000000..f644a196f2
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl.html b/layout/reftests/forms/button/width-auto-size-rtl.html
new file mode 100644
index 0000000000..7ae3092f94
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
new file mode 100644
index 0000000000..762e443f81
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+ display: inline-block;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+ margin: 1px 0px; /* for implicit focuspadding, fully eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
new file mode 100644
index 0000000000..d4b028b48e
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 62px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-exact-fit-ltr.html b/layout/reftests/forms/button/width-exact-fit-ltr.html
new file mode 100644
index 0000000000..4978a57e4e
--- /dev/null
+++ b/layout/reftests/forms/button/width-exact-fit-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 62px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html
new file mode 100644
index 0000000000..d4b028b48e
--- /dev/null
+++ b/layout/reftests/forms/button/width-exact-fit-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+ -moz-appearance: none;
+ background: yellow;
+ border: 2px solid fuchsia;
+ padding: 2px;
+ font-size: 10px;
+ width: 62px;
+ border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+ display: inline-block; vertical-align: middle;
+ height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/display-block-baselines-1-ref.html b/layout/reftests/forms/display-block-baselines-1-ref.html
new file mode 100644
index 0000000000..d01c086b5d
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-1-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: Testcase #1 for bug 1330962</title>
+ <style type="text/css">
+@font-face {
+ src: url(../fonts/Ahem.ttf);
+ font-family: Ahem;
+}
+html,body {
+ color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+* { font:16px/1 Ahem; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+ </style>
+</head>
+<body>
+
+<div>
+ <div style="display:inline-grid">
+ A<img class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-grid">
+ A
+ <input type="image" class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <div style="display:inline-block"><input type="text" value="text"></div>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <div style="display:inline-block"><input type="text" value="text"></div>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <div style="display:inline-block"><input type="text"></div>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <div style="display:inline-block"><input class="no-theme" type="text" value="text"></div>
+ </div>
+ B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-1.html b/layout/reftests/forms/display-block-baselines-1.html
new file mode 100644
index 0000000000..96ebdad713
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-1.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #1 for bug 1330962</title>
+ <style type="text/css">
+@font-face {
+ src: url(../fonts/Ahem.ttf);
+ font-family: Ahem;
+}
+html,body {
+ color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+* { font:16px/1 Ahem; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+ </style>
+</head>
+<body>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <img class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input type="image" class="block" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAEElEQVQoz2NgGAWjYBTAAAADEAABaJFtwwAAAABJRU5ErkJggg%3D%3D">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input class="block" type="text" value="text">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input class="block scroll" type="text" value="text">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input class="block" type="text">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input class="block no-theme" type="text" value="text">
+ </div>
+ B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-2-ref.html b/layout/reftests/forms/display-block-baselines-2-ref.html
new file mode 100644
index 0000000000..441a927b49
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-2-ref.html
@@ -0,0 +1,100 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: Testcase #2 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+ color: black;
+ text-align: start;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+ </style>
+</head>
+<body>
+
+<div>
+ <div style="display:inline-block">
+ A<div>
+ <div style="display:inline-block"><input type="button" value="button"></div></div>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <div style="display:inline-block"><button>button</button></div>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <div style="display:inline-block"><input class="no-theme" type="button" value="button"></div>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <button class="no-theme">button-first<div style="font-size:10px">button-last</div></button>
+ </div>
+ B
+ <div class="no-theme" style="display:inline-block">button-first<div style="font-size:10px">button-last</div></div>
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <button class="no-theme" style="display:inline-grid">button-first<x style="font-size:10px">button-last</x></button>
+ </div>
+ B
+ <div class="no-theme" style="display:inline-grid">button-first<x style="font-size:10px">button-last</x></div>
+</div>
+
+<div>
+ <div style="display:inline-grid">
+ A
+ <input type="checkbox" class="block" checked>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-grid">
+ A
+ <input type="radio" class="block" checked>
+ </div>
+ B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-2.html b/layout/reftests/forms/display-block-baselines-2.html
new file mode 100644
index 0000000000..78253fe4c2
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-2.html
@@ -0,0 +1,100 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #2 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+ color: black;
+ text-align: start;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+ </style>
+</head>
+<body>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input class="block" type="button" value="button">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <button class="block">button</button>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input class="block no-theme" type="button" value="button">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <button class="block no-theme">button-first<div style="font-size:10px">button-last</div></button>
+ </div>
+ B
+ <button class="no-theme">button-first<div style="font-size:10px">button-last</div></button>
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <button class="grid no-theme">button-first<x style="font-size:10px">button-last</x></button>
+ </div>
+ B
+ <button class="no-theme" style="display:inline-grid">button-first<x style="font-size:10px">button-last</x></button>
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input type="checkbox" class="block" checked>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input type="radio" class="block" checked>
+ </div>
+ B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-3-ref.html b/layout/reftests/forms/display-block-baselines-3-ref.html
new file mode 100644
index 0000000000..8e32be544b
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-3-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: Testcase #3 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+.grid {
+ display: inline-grid;
+ baseline-source: last;
+}
+ </style>
+</head>
+<body>
+
+<div>
+ <div class="grid">
+ A
+ <textarea class="block">textarea</textarea>
+ </div>
+ B
+</div>
+
+<div>
+ <div class="grid">
+ A
+ <textarea class="block no-theme">textarea</textarea>
+ </div>
+ B
+</div>
+
+<div>
+ <div class="grid">
+ A
+ <textarea class="block no-theme no-scroll">textarea</textarea>
+ </div>
+ B
+</div>
+
+<div>
+ <div class="grid">
+ A<br>
+ <div style="display:inline-block"><fieldset style="display:inline">fieldset-first<br>fieldset-last</fieldset></div>
+ </div>
+ B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-3.html b/layout/reftests/forms/display-block-baselines-3.html
new file mode 100644
index 0000000000..9f3c2b1101
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-3.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #3 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+ </style>
+</head>
+<body>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <textarea class="block">textarea</textarea>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <textarea class="block no-theme">textarea</textarea>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <textarea class="block no-theme no-scroll">textarea</textarea>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <fieldset class="block">fieldset-first<br>fieldset-last</fieldset>
+ </div>
+ B
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-4-ref.html b/layout/reftests/forms/display-block-baselines-4-ref.html
new file mode 100644
index 0000000000..5015d50c42
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-4-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: Testcase #4 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+ </style>
+</head>
+<body>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <div style="display:inline-block"><fieldset style="display:inline"><legend>legend</legend>
+fieldset-first<br>fieldset-last</fieldset></div>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <fieldset style="display:inline-grid">grid-fieldset-first<x>grid-fieldset-last</x></fieldset>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <fieldset style="display:inline" class="no-theme">fieldset-first<br>fieldset-last</fieldset>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <fieldset style="display:inline" class="no-theme scroll">fieldset-first<br>fieldset-last</fieldset>
+ </div>
+ B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-4.html b/layout/reftests/forms/display-block-baselines-4.html
new file mode 100644
index 0000000000..1bfd344b0e
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-4.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #4 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+ </style>
+</head>
+<body>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <fieldset class="block"><legend>legend</legend>
+fieldset-first<br>fieldset-last</fieldset>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <fieldset class="grid"><x style="order:2">grid-fieldset-last</x>grid-fieldset-first</fieldset>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <fieldset class="block no-theme">fieldset-first<br>fieldset-last</fieldset>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <fieldset class="block no-theme scroll">fieldset-first<br>fieldset-last</fieldset>
+ </div>
+ B
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-5-ref.html b/layout/reftests/forms/display-block-baselines-5-ref.html
new file mode 100644
index 0000000000..0dce47f593
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-5-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: Testcase #5 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+ </style>
+</head>
+<body>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <input type="color">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <input type="color" class="no-theme">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <select><option>select</select>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A<br>
+ <select class="no-theme"><option>select</select>
+ </div>
+ B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/display-block-baselines-5.html b/layout/reftests/forms/display-block-baselines-5.html
new file mode 100644
index 0000000000..0359c8a6fb
--- /dev/null
+++ b/layout/reftests/forms/display-block-baselines-5.html
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #5 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+* { font:16px/1 monospace; }
+
+.block { display: block; }
+.grid { display: grid; }
+
+.no-theme {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ padding: 20px 0;
+ border: none;
+ background: white;
+}
+
+.scroll {
+ overflow-y: scroll;
+}
+
+.no-scroll {
+ overflow: visible;
+}
+
+ </style>
+</head>
+<body>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input type="color" class="block">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <input type="color" class="block no-theme">
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <select class="block"><option>select</select>
+ </div>
+ B
+</div>
+
+<div>
+ <div style="display:inline-block">
+ A
+ <select class="block no-theme"><option>select</select>
+ </div>
+ B
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html b/layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html
new file mode 100644
index 0000000000..405cfaf0a9
--- /dev/null
+++ b/layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 971653</title>
+ <style type="text/css">
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+div {
+ position: absolute;
+ background: rgba(0,255,0,0.5);
+ top:0; bottom:0;
+ left:0; right:0;
+ z-index: 0;
+}
+c {
+ display: block;
+ background: blue;
+ height:100%;
+}
+
+legend { height: 24px; }
+
+fieldset {
+ position: absolute;
+ border: 2px green solid;
+ width: 100px;
+ height: 100px;
+ margin-bottom:40px;
+}
+
+#t1,#t3 { padding: 3px 5px 7px 11px; }
+#t2,#t4 { padding: 0; }
+
+#t1 div, #t3 div {
+ /* same numbers as padding above */
+ left: -11px; right: -5px;
+ top: -3px; bottom:-7px;
+}
+
+#t2 { top: 120px; }
+#t3 { top: 240px; }
+#t4 { top: 360px; }
+
+x {
+ position: absolute;
+ width:100px;
+ height:100px;
+}
+#t1 x, #t2 x {
+ height:78px; /* compensate for legend */
+}
+ </style>
+</head>
+<body>
+
+
+<fieldset id="t1">
+ <legend>legend</legend>
+ <x><div></div><c></c></x>
+</fieldset>
+
+<fieldset id="t2">
+ <legend>legend</legend>
+ <x><div></div></x>
+</fieldset>
+
+<fieldset id="t3">
+ <x><div></div><c></c></x>
+</fieldset>
+
+<fieldset id="t4">
+ <x><div></div></x>
+</fieldset>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/abs-pos-child-sizing.html b/layout/reftests/forms/fieldset/abs-pos-child-sizing.html
new file mode 100644
index 0000000000..72d47deac9
--- /dev/null
+++ b/layout/reftests/forms/fieldset/abs-pos-child-sizing.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 971653</title>
+ <style type="text/css">
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+div {
+ position: absolute;
+ background: rgba(0,255,0,0.5);
+ top:0; bottom:0;
+ left:0; right:0;
+ z-index: 0;
+}
+c {
+ display: block;
+ background: blue;
+ height:100%;
+}
+
+legend { height: 24px; }
+
+fieldset {
+ position: absolute;
+ border: 2px green solid;
+ width: 100px;
+ height: 100px;
+ margin-bottom:40px;
+}
+
+#t1,#t3 { padding: 3px 5px 7px 11px; }
+#t2,#t4 { padding: 0; }
+
+#t2 { top: 120px; }
+#t3 { top: 240px; }
+#t4 { top: 360px; }
+ </style>
+</head>
+<body>
+
+
+<fieldset id="t1">
+ <legend>legend</legend>
+ <div></div><c></c>
+</fieldset>
+
+<fieldset id="t2">
+ <legend>legend</legend>
+ <div></div>
+</fieldset>
+
+<fieldset id="t3">
+ <div></div><c></c>
+</fieldset>
+
+<fieldset id="t4">
+ <div></div>
+</fieldset>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/blue-1x1.png b/layout/reftests/forms/fieldset/blue-1x1.png
new file mode 100644
index 0000000000..5da0137001
--- /dev/null
+++ b/layout/reftests/forms/fieldset/blue-1x1.png
Binary files differ
diff --git a/layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html
new file mode 100644
index 0000000000..4f2e7ba477
--- /dev/null
+++ b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+fieldset {
+ background:pink;
+ overflow:hidden;
+ height:100px;
+}
+legend::after { content:"legend"; }
+p {
+ background:lime;
+ height:20px;
+}
+</style>
+</head>
+<body>
+<fieldset id="f1"><legend></legend><p></p></fieldset>
+<br>
+<fieldset id="f2"><legend></legend><p></p></fieldset>
+<br>
+<fieldset id="f3"><legend></legend></fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html
new file mode 100644
index 0000000000..0870f06a00
--- /dev/null
+++ b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+<style>
+fieldset {
+ background:pink;
+ overflow:hidden;
+ height:100px;
+}
+legend::after { content:"legend"; }
+p {
+ background:lime;
+ height:20px;
+}
+</style>
+</head>
+<body>
+<fieldset id="f1"><p></p></fieldset>
+<br>
+<fieldset id="f2"><p></p></fieldset>
+<br>
+<fieldset id="f3"></fieldset>
+<script>
+function doTest() {
+ f1.appendChild(document.createElement('legend'));
+ f2.insertBefore(document.createElement('legend'), f2.firstChild);
+ f3.appendChild(document.createElement('legend'));
+ document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/dynamic-text-indent-ref.html b/layout/reftests/forms/fieldset/dynamic-text-indent-ref.html
new file mode 100644
index 0000000000..0bbc8c1497
--- /dev/null
+++ b/layout/reftests/forms/fieldset/dynamic-text-indent-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<fieldset style="border: none; text-indent: 100px">Text</fieldset>
diff --git a/layout/reftests/forms/fieldset/dynamic-text-indent.html b/layout/reftests/forms/fieldset/dynamic-text-indent.html
new file mode 100644
index 0000000000..eb7509c77a
--- /dev/null
+++ b/layout/reftests/forms/fieldset/dynamic-text-indent.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <fieldset style="border: none">Text</fieldset>
+ <script>
+ onload = function() {
+ var f = document.querySelector("fieldset");
+ window.w = f.offsetWidth;
+ f.style.textIndent = "100px";
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-border-image-1-ref.html b/layout/reftests/forms/fieldset/fieldset-border-image-1-ref.html
new file mode 100644
index 0000000000..b6e8dcc78c
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-border-image-1-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+ div {
+ padding: 0;
+ margin: 10px;
+ height: 100px;
+ width: 100px;
+ border: 10px solid;
+ border-image-source: url(blue-1x1.png);
+ border-image-outset: 10px;
+ }
+</style>
+<div></div>
diff --git a/layout/reftests/forms/fieldset/fieldset-border-image-1a.html b/layout/reftests/forms/fieldset/fieldset-border-image-1a.html
new file mode 100644
index 0000000000..6e106c37e1
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-border-image-1a.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+ fieldset {
+ padding: 0;
+ margin: 10px;
+ height: 100px;
+ width: 100px;
+ border: 10px solid;
+ border-image-source: url(blue-1x1.png);
+ border-image-outset: 10px;
+ }
+</style>
+<fieldset></fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-border-image-1b.html b/layout/reftests/forms/fieldset/fieldset-border-image-1b.html
new file mode 100644
index 0000000000..9d3b518892
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-border-image-1b.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+ fieldset {
+ padding: 0;
+ margin: 10px;
+ height: 100px;
+ width: 100px;
+ border: 10px solid;
+ border-image-source: url(blue-1x1.png);
+ border-image-outset: 10px;
+ }
+</style>
+<fieldset><legend></legend></fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-border-image-2-ref.html b/layout/reftests/forms/fieldset/fieldset-border-image-2-ref.html
new file mode 100644
index 0000000000..fbadfa1246
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-border-image-2-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<style>
+ div {
+ padding: 0;
+ margin: 10px;
+ height: 100px;
+ width: 100px;
+ border: 10px solid;
+ border-image-source: url(blue-1x1.png);
+ border-image-outset: 10px;
+ transform: scale(0.5);
+ }
+</style>
+<div></div>
diff --git a/layout/reftests/forms/fieldset/fieldset-border-image-2a.html b/layout/reftests/forms/fieldset/fieldset-border-image-2a.html
new file mode 100644
index 0000000000..39ae50f939
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-border-image-2a.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<style>
+ fieldset {
+ padding: 0;
+ margin: 10px;
+ height: 100px;
+ width: 100px;
+ border: 10px solid;
+ border-image-source: url(blue-1x1.png);
+ border-image-outset: 10px;
+ transform: scale(0.5);
+ }
+</style>
+<fieldset></fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-border-image-2b.html b/layout/reftests/forms/fieldset/fieldset-border-image-2b.html
new file mode 100644
index 0000000000..1368a019f6
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-border-image-2b.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<style>
+ fieldset {
+ padding: 0;
+ margin: 10px;
+ height: 100px;
+ width: 100px;
+ border: 10px solid;
+ border-image-source: url(blue-1x1.png);
+ border-image-outset: 10px;
+ transform: scale(0.5);
+ }
+</style>
+<fieldset><legend></legend></fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html b/layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html
new file mode 100644
index 0000000000..80b64f8f86
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<style>
+p { flex-grow: 1; }
+</style>
+<fieldset style="overflow:hidden; width:200px; height:200px;">
+ <legend>Legend</legend>
+<div style="display:flex;">
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+</div>
+</fieldset>
+<fieldset>
+ <legend>Legend</legend>
+<div style="display:flex;">
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+</div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-flexbox-001.html b/layout/reftests/forms/fieldset/fieldset-flexbox-001.html
new file mode 100644
index 0000000000..b78d28cf59
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-flexbox-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<style>
+p { flex-grow: 1; }
+</style>
+<fieldset style="display:flex; overflow:hidden; width:200px; height:200px;">
+ <legend>Legend</legend>
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+</fieldset>
+<fieldset style="display:flex;">
+ <legend>Legend</legend>
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-grid-001-ref.html b/layout/reftests/forms/fieldset/fieldset-grid-001-ref.html
new file mode 100644
index 0000000000..f99de22522
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-grid-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:hidden; width:200px; height:200px;">
+ <legend>Legend</legend>
+<div style="display:grid; grid-template-columns: repeat(4,50px); grid-auto-rows: 20px;">
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+</div>
+</fieldset>
+<fieldset>
+ <legend>Legend</legend>
+<div style="display:grid; grid-auto-columns: 50px; grid-auto-rows: 20px;">
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+</div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-grid-001.html b/layout/reftests/forms/fieldset/fieldset-grid-001.html
new file mode 100644
index 0000000000..37bfaa6be1
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-grid-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="display:grid; overflow:hidden; grid-template-columns: repeat(4,50px); grid-auto-rows: 20px; width:200px; height:200px;">
+ <legend>Legend</legend>
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+</fieldset>
+<fieldset style="display:grid; grid-auto-columns: 50px; grid-auto-rows: 20px;">
+ <legend>Legend</legend>
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+ <p>X
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-height-resize-1-ref.html b/layout/reftests/forms/fieldset/fieldset-height-resize-1-ref.html
new file mode 100644
index 0000000000..3a707d21aa
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-height-resize-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title>Testcase, bug 1576864</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <style>
+
+ fieldset {
+ background: aqua;
+ color: black;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ }
+
+ </style>
+
+</head>
+<body>
+
+<fieldset id="set" style="width:200px; height:200px;">
+ This should be in a square.
+</fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-height-resize-1.html b/layout/reftests/forms/fieldset/fieldset-height-resize-1.html
new file mode 100644
index 0000000000..89848b3931
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-height-resize-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title>Testcase, bug 1576864</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <style>
+
+ fieldset {
+ background: aqua;
+ color: black;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ }
+
+ </style>
+
+ <script>
+
+ window.onload=function(){
+ document.body.offsetHeight;
+ document.getElementById("set").style.height = "200px";
+ }
+
+ </script>
+
+</head>
+<body>
+
+<fieldset id="set" style="width:200px; height:40px;">
+ This should be in a square.
+</fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html b/layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html
new file mode 100644
index 0000000000..da53b994d0
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="width:200px; height:200px; padding:0">
+ <legend>Legend</legend>
+ <div style="overflow:hidden; height:100%;">
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ </div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-hidden-1.html b/layout/reftests/forms/fieldset/fieldset-hidden-1.html
new file mode 100644
index 0000000000..b1046ed726
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-hidden-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:hidden; width:200px; height:200px; padding:0">
+ <legend>Legend</legend>
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html
new file mode 100644
index 0000000000..ec0c49ffeb
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="width:0; padding:0;">
+ <div style="width:400px; height:200px;"></div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html
new file mode 100644
index 0000000000..3326dff9b1
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="padding:50px; float:left;">
+ <div style="width:300px; height:100px;"></div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-min-inline-size-1-ref.html b/layout/reftests/forms/fieldset/fieldset-min-inline-size-1-ref.html
new file mode 100644
index 0000000000..db7c36622c
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-min-inline-size-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<fieldset style="writing-mode: vertical-lr; inline-size: -moz-fit-content">
+ Longwordgoeshere
+</fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-min-inline-size-1.html b/layout/reftests/forms/fieldset/fieldset-min-inline-size-1.html
new file mode 100644
index 0000000000..d7bead1afd
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-min-inline-size-1.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<fieldset style="writing-mode: vertical-lr; inline-size: 0">
+ Longwordgoeshere
+</fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-min-width-1-ref.html b/layout/reftests/forms/fieldset/fieldset-min-width-1-ref.html
new file mode 100644
index 0000000000..4a134d380b
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-min-width-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<fieldset style="width: -moz-fit-content">
+ Longwordgoeshere
+</fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-min-width-1a.html b/layout/reftests/forms/fieldset/fieldset-min-width-1a.html
new file mode 100644
index 0000000000..0c11bb9d3d
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-min-width-1a.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<fieldset style="width: 0">
+ Longwordgoeshere
+</fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-min-width-1b.html b/layout/reftests/forms/fieldset/fieldset-min-width-1b.html
new file mode 100644
index 0000000000..569408c24b
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-min-width-1b.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body style="width: 0">
+ <fieldset style="width: 0">
+ Longwordgoeshere
+ </fieldset>
+</body>
diff --git a/layout/reftests/forms/fieldset/fieldset-min-width-2-ref.html b/layout/reftests/forms/fieldset/fieldset-min-width-2-ref.html
new file mode 100644
index 0000000000..d8ac552b57
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-min-width-2-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<fieldset style="width: -moz-fit-content">&ZeroWidthSpace;<!-- To give us the right height --></fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-min-width-2a.html b/layout/reftests/forms/fieldset/fieldset-min-width-2a.html
new file mode 100644
index 0000000000..21df3cc43c
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-min-width-2a.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<fieldset style="width: 0; min-width: 0">
+ <div style="visibility: hidden">Longwordgoeshere</div>
+</fieldset>
diff --git a/layout/reftests/forms/fieldset/fieldset-min-width-2b.html b/layout/reftests/forms/fieldset/fieldset-min-width-2b.html
new file mode 100644
index 0000000000..9b082726b4
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-min-width-2b.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body style="width: 0">
+ <fieldset style="min-width: 0">
+ <div style="visibility: hidden">Longwordgoeshere</div>
+ </fieldset>
+</body>
diff --git a/layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html
new file mode 100644
index 0000000000..9732c7feab
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 261037</title>
+ <style type="text/css">
+fieldset, div {
+ background:pink;
+ overflow:auto;
+ height:100px;
+ margin:0; padding:0; border:0;
+}
+p {
+ background:blue;
+ height:100px;
+ margin:0; padding:0;
+}
+.overflow {
+ height:110px;
+}
+.abs {
+ position:absolute;
+ width:100px;
+ top:250px;
+}
+p.abs {
+ top:0;left:0;
+}
+.b { border:10px solid black; }
+.p { padding: 7px 0; }
+.p p { height:114px; }
+ </style>
+</head>
+<body>
+
+<div><p></p></div>
+<br>
+<div><p class="overflow"></p></div>
+<br>
+<div class="abs"><p class="abs"></p></div>
+<br>
+<div class="abs" style="left:120px"><p class="abs overflow"></p></div>
+<br>
+<div class="abs b" style="left:240px"><p class="abs"></p></div>
+<br>
+<div class="abs b" style="left:370px"><p class="abs overflow"></p></div>
+<br>
+<div class="abs b p" style="left:510px"><p class="abs"></p></div>
+<br>
+<div class="abs b p" style="left:640px"><p class="abs overflow"></p></div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html
new file mode 100644
index 0000000000..d9cf97cf6e
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 261037</title>
+ <style type="text/css">
+fieldset, div {
+ background:pink;
+ overflow:auto;
+ height:100px;
+ margin:0; padding:0; border:0;
+}
+p {
+ background:blue;
+ height:100px;
+ margin:0; padding:0;
+}
+.overflow {
+ height:110px;
+}
+.abs {
+ position:absolute;
+ width:100px;
+ top:250px;
+}
+p.abs {
+ top:0;left:0;
+}
+.b { border:10px solid black; }
+.p { padding: 7px 0; }
+.p p { height:114px; }
+ </style>
+</head>
+<body>
+
+<fieldset><p></p></fieldset>
+<br>
+<fieldset><p class="overflow"></p></fieldset>
+<br>
+<fieldset class="abs"><p class="abs"></p></fieldset>
+<br>
+<fieldset class="abs" style="left:120px"><p class="abs overflow"></p></fieldset>
+<br>
+<fieldset class="abs b" style="left:240px"><p class="abs"></p></fieldset>
+<br>
+<fieldset class="abs b" style="left:370px"><p class="abs overflow"></p></fieldset>
+<br>
+<fieldset class="abs b p" style="left:510px"><p class="abs"></p></fieldset>
+<br>
+<fieldset class="abs b p" style="left:640px"><p class="abs overflow"></p></fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html
new file mode 100644
index 0000000000..bc926d00c9
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:700px; border:2px solid green; overflow:hidden">
+ <fieldset style="padding:140px; width:400px;">
+ <legend>Legend</legend>
+ TextTextTextTextTextText
+ </fieldset>
+ <fieldset style="padding:140px; display:inline;">
+ <legend>Legend</legend>
+ TextTextTextTextTextText
+ </fieldset>
+ <fieldset style="padding:140px; float:left;">
+ <legend>Legend</legend>
+ TextTextTextTextTextText
+ </fieldset>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html
new file mode 100644
index 0000000000..ab9a66ab15
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:700px; border:2px solid green; overflow:hidden">
+ <fieldset style="padding:20%; width:400px;">
+ <legend>Legend</legend>
+ TextTextTextTextTextText
+ </fieldset>
+ <fieldset style="padding:20%; display:inline;">
+ <legend>Legend</legend>
+ TextTextTextTextTextText
+ </fieldset>
+ <fieldset style="padding:20%; float:left;">
+ <legend>Legend</legend>
+ TextTextTextTextTextText
+ </fieldset>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html b/layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html
new file mode 100644
index 0000000000..e8a696bd1f
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="width:200px; height:200px; padding:0">
+ <legend>Legend</legend>
+ <div style="overflow:scroll; height:100%">
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-scroll-1.html b/layout/reftests/forms/fieldset/fieldset-scroll-1.html
new file mode 100644
index 0000000000..3f4d75daf0
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-scroll-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:scroll; width:200px; height:200px; padding:0">
+ <legend>Legend</legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html b/layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html
new file mode 100644
index 0000000000..dc9bcaf9ea
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="width:200px; height:200px; padding:0">
+ <legend style="overflow:hidden">Legend</legend>
+ <div id="d" style="overflow:hidden; height:100%;">
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ </div>
+</fieldset>
+<script>
+d.scrollTop = 20;
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-scrolled-1.html b/layout/reftests/forms/fieldset/fieldset-scrolled-1.html
new file mode 100644
index 0000000000..12aac6bddb
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-scrolled-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<fieldset id="f" style="overflow:hidden; width:200px; height:200px; padding:0">
+ <legend style="overflow:hidden">Legend</legend>
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+ <p>Hello Kitty
+</fieldset>
+<script>
+f.scrollTop = 0;
+function doTest() {
+ f.scrollTop = 20;
+ document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/legend-overlapping-right-border-1-ref.html b/layout/reftests/forms/fieldset/legend-overlapping-right-border-1-ref.html
new file mode 100644
index 0000000000..108df6d8ca
--- /dev/null
+++ b/layout/reftests/forms/fieldset/legend-overlapping-right-border-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+ fieldset {
+ min-width: 0;
+ width: 0;
+ }
+ legend {
+ width: 100px;
+ height: 20px;
+ background: white;
+ }
+</style>
+<fieldset>
+ <legend></legend>
+</fieldset>
diff --git a/layout/reftests/forms/fieldset/legend-overlapping-right-border-1.html b/layout/reftests/forms/fieldset/legend-overlapping-right-border-1.html
new file mode 100644
index 0000000000..1f47db372b
--- /dev/null
+++ b/layout/reftests/forms/fieldset/legend-overlapping-right-border-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<style>
+ fieldset {
+ min-width: 0;
+ width: 0;
+ }
+ legend {
+ width: 100px;
+ height: 20px;
+ }
+</style>
+<fieldset>
+ <legend></legend>
+</fieldset>
diff --git a/layout/reftests/forms/fieldset/legend-rtl-ref.html b/layout/reftests/forms/fieldset/legend-rtl-ref.html
new file mode 100644
index 0000000000..10fb1d1b26
--- /dev/null
+++ b/layout/reftests/forms/fieldset/legend-rtl-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+<fieldset><legend style="position:relative;left:20px;">Legend</legend></fieldset>
+<fieldset dir="rtl"><legend style="position:relative;right:20px;">Legend</legend></fieldset>
+</html>
diff --git a/layout/reftests/forms/fieldset/legend-rtl.html b/layout/reftests/forms/fieldset/legend-rtl.html
new file mode 100644
index 0000000000..7a4f114a01
--- /dev/null
+++ b/layout/reftests/forms/fieldset/legend-rtl.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+<fieldset><legend dir="rtl" style="position:relative;left:20px;">Legend</legend></fieldset>
+<fieldset dir="rtl"><legend dir="ltr" style="position:relative;right:20px;">Legend</legend></fieldset>
+</html>
diff --git a/layout/reftests/forms/fieldset/overflow-hidden-ref.html b/layout/reftests/forms/fieldset/overflow-hidden-ref.html
new file mode 100644
index 0000000000..0c00977f58
--- /dev/null
+++ b/layout/reftests/forms/fieldset/overflow-hidden-ref.html
@@ -0,0 +1,175 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 971933</title>
+ <style type="text/css">
+ html,body {
+ color:black; background-color:white; font-size:16px;
+ }
+#f0 div::before { content: "f0"; }
+#f1 div::before { content: "f1"; }
+#f2 div::before { content: "f2"; }
+#f3 div::before { content: "f3"; }
+#f4 div::before { content: "f4"; }
+#f5 div::before { content: "f5"; }
+#f6 div::before { content: "f6"; }
+#f7 div::before { content: "f7"; }
+#f8 div::before { content: "f8"; }
+#f9 div::before { content: "f9"; }
+
+legend { background:pink; height:30px; }
+div { background:yellow; height:100px; overflow:hidden; }
+fieldset {
+ border-width:0;
+ padding:0;
+ margin:0;
+ margin-top:6px;
+ outline:1px dotted black;
+ height:auto;
+ background:grey;
+
+ padding-bottom:0px;
+ padding-top:5px;
+ border:1px solid blue;
+ border-top-width:7px;
+}
+
+#f1 { }
+#f2 { border-top-width:0; }
+#f3 { border-width:0; }
+#f4 { border-bottom-width:0; }
+#f5 { border-width:0; padding:0; }
+#f6 { border-width:0; padding-bottom:0; }
+#f7 { border-width:0; padding-top:0; }
+#f8 { padding-top:0; }
+#f9 { padding-bottom:0; }
+#f0 { padding:0; }
+
+#c2 fieldset { height:29px; }
+
+#c3 fieldset { height:39px; }
+
+#c4 fieldset { height:29px; }
+#c4 legend { height: 20px; }
+
+#c5 legend { height:21px; }
+#c5 fieldset { border-top-width:31px; }
+
+.col { float:left; width:10ch; margin-left:6px; }
+
+#c1 div { height:3px; } #c1 #f6 div, #c1 #f9 div, #c1 #f0 div { height:0; }
+#c1 #f5 div { height:0px; }
+
+#c2 div { height:9px; }
+ #c2 #f1 { padding-bottom:3px; } #c2 #f1 div { height:9px;}
+ #c2 #f2 { padding-bottom:3px; } #c2 #f2 div { height:3px; }
+ #c2 #f3 { padding-bottom:3px; } #c2 #f3 div { height:3px; }
+ #c2 #f4 { padding-bottom:3px; }
+ #c2 #f5 div { height:0; }
+ #c2 #f6 div { height:0; }
+ #c2 #f7 { padding-bottom:3px; } #c2 #f7 div { height:3px; }
+ #c2 #f8 { padding-bottom:3px; } #c2 #f8 div { height:9px; }
+ #c2 #f9 div { height:6px; }
+ #c2 #f0 div { height:6px; }
+
+#c3 fieldset { padding-bottom:3px; }
+ #c3 #f1 div { height:19px; }
+ #c3 #f2 div { height:12px; }
+ #c3 #f3 div { height:12px; }
+ #c3 #f4 div { height:19px; }
+ #c3 #f5 { padding-bottom:0; } #c3 #f5 div { height:9px; }
+ #c3 #f6 { padding-bottom:0; } #c3 #f6 div { height:9px; }
+ #c3 #f7 div { height:12px; }
+ #c3 #f8 div { height:19px; }
+ #c3 #f9 { padding-bottom:0; } #c3 #f9 div { height:16px; }
+ #c3 #f0 { padding-bottom:0; } #c3 #f0 div { height:16px; }
+
+#c4 fieldset { padding-bottom:3px; }
+ #c4 #f1 div { height:19px; }
+ #c4 #f2 div { height:12px; }
+ #c4 #f3 div { height:12px; }
+ #c4 #f4 div { height:19px; }
+ #c4 #f5 { padding-bottom:0; } #c4 #f5 div { height:9px; }
+ #c4 #f6 { padding-bottom:0; } #c4 #f6 div { height:9px; }
+ #c4 #f7 div { height:12px; }
+ #c4 #f8 div { height:19px; }
+ #c4 #f9 { padding-bottom:0; } #c4 #f9 div { height:16px; }
+ #c4 #f0 { padding-bottom:0; } #c4 #f0 div { height:16px; }
+
+ #c5 #f1 div { height:18px; }
+ #c5 #f2 div { height:18px; }
+ #c5 #f3 div { height:18px; }
+ #c5 #f4 div { height:18px; }
+ #c5 #f5 div { height:15px; }
+ #c5 #f6 div { height:15px; }
+ #c5 #f7 div { height:18px; }
+ #c5 #f8 div { height:18px; }
+ #c5 #f9 div { height:15px; }
+ #c5 #f0 div { height:15px; }
+
+</style>
+</head>
+<body>
+<span id=c1 class=col>C1
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c2 class=col>C2
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c3 class=col>C3
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c4 class=col>C4
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c5 class=col>C5
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/overflow-hidden.html b/layout/reftests/forms/fieldset/overflow-hidden.html
new file mode 100644
index 0000000000..4801348036
--- /dev/null
+++ b/layout/reftests/forms/fieldset/overflow-hidden.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 971933</title>
+ <style type="text/css">
+ html,body {
+ color:black; background-color:white; font-size:16px;
+ }
+#f0 div::before { content: "f0"; }
+#f1 div::before { content: "f1"; }
+#f2 div::before { content: "f2"; }
+#f3 div::before { content: "f3"; }
+#f4 div::before { content: "f4"; }
+#f5 div::before { content: "f5"; }
+#f6 div::before { content: "f6"; }
+#f7 div::before { content: "f7"; }
+#f8 div::before { content: "f8"; }
+#f9 div::before { content: "f9"; }
+
+legend { background:pink; height:30px; }
+div { background:yellow; height:100px; }
+fieldset {
+ border-width:0;
+ padding:0;
+ margin:0;
+ margin-top:6px;
+ outline:1px dotted black;
+ height:15px;
+ overflow:hidden;
+ background:grey;
+
+ padding-bottom:3px;
+ padding-top:5px;
+ border:1px solid blue;
+ border-top-width:7px;
+}
+
+#f1 {}
+#f2 { border-top-width:0; }
+#f3 { border-width:0; }
+#f4 { border-bottom-width:0; }
+#f5 { border-width:0; padding:0; }
+#f6 { border-width:0; padding-bottom:0; }
+#f7 { border-width:0; padding-top:0; }
+#f8 { padding-top:0; }
+#f9 { padding-bottom:0; }
+#f0 { padding:0; }
+
+#c2 fieldset { height:29px; }
+
+#c3 fieldset { height:39px; }
+
+#c4 fieldset { height:29px; }
+#c4 legend { height: 20px; }
+
+#c5 legend { height:21px; }
+#c5 fieldset { border-top-width:31px; }
+
+.col { float:left; width:10ch; margin-left:6px; }
+</style>
+</head>
+<body>
+<span id=c1 class=col>C1
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c2 class=col>C2
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c3 class=col>C3
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c4 class=col>C4
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c5 class=col>C5
+ <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+ <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/positioned-container-1-ref.html b/layout/reftests/forms/fieldset/positioned-container-1-ref.html
new file mode 100644
index 0000000000..b7988f3791
--- /dev/null
+++ b/layout/reftests/forms/fieldset/positioned-container-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="position:relative; overflow:hidden; width:500px; height:500px;">
+ <legend>Legend</legend>
+ <div style="height:1000px;">
+ <div style="position:absolute; padding:2px; left:20px; top:20px; background:yellow;">Abs-pos</div>
+ </div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/positioned-container-1.html b/layout/reftests/forms/fieldset/positioned-container-1.html
new file mode 100644
index 0000000000..04e81ca6b5
--- /dev/null
+++ b/layout/reftests/forms/fieldset/positioned-container-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset id="f" style="position:relative; overflow:hidden; width:500px; height:500px;">
+ <legend>Legend</legend>
+ <div style="height:1000px;">
+ <div style="position:absolute; padding:2px; left:20px; top:50px; background:yellow;">Abs-pos</div>
+ </div>
+</fieldset>
+<script>
+f.scrollTop = 30;
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/reftest.list b/layout/reftests/forms/fieldset/reftest.list
new file mode 100644
index 0000000000..f99032a3ec
--- /dev/null
+++ b/layout/reftests/forms/fieldset/reftest.list
@@ -0,0 +1,30 @@
+fuzzy(0-2,0-13) == dynamic-legend-scroll-1.html dynamic-legend-scroll-1-ref.html
+== fieldset-hidden-1.html fieldset-hidden-1-ref.html
+== fieldset-intrinsic-width-1.html fieldset-intrinsic-width-1-ref.html
+== fieldset-percentage-padding-1.html fieldset-percentage-padding-1-ref.html
+== fieldset-scroll-1.html fieldset-scroll-1-ref.html
+== fieldset-scrolled-1.html fieldset-scrolled-1-ref.html
+== fieldset-overflow-auto-1.html fieldset-overflow-auto-1-ref.html
+fuzzy-if(!layersGPUAccelerated,0-142,0-276) == positioned-container-1.html positioned-container-1-ref.html
+== relpos-legend-1.html relpos-legend-1-ref.html
+== relpos-legend-2.html relpos-legend-2-ref.html
+== relpos-legend-3.html relpos-legend-3-ref.html
+== relpos-legend-4.html relpos-legend-4-ref.html
+fails-if(useDrawSnapshot) == sticky-legend-1.html sticky-legend-1-ref.html
+fuzzy(0-1,0-40768) == abs-pos-child-sizing.html abs-pos-child-sizing-ref.html
+fuzzy-if(geckoview&&emulator,0-4,0-7) random-if(winWidget&&swgl) == overflow-hidden.html overflow-hidden-ref.html
+== legend-rtl.html legend-rtl-ref.html
+== fieldset-grid-001.html fieldset-grid-001-ref.html
+== fieldset-flexbox-001.html fieldset-flexbox-001-ref.html
+== fieldset-min-width-1a.html fieldset-min-width-1-ref.html
+== fieldset-min-width-1b.html fieldset-min-width-1-ref.html
+== fieldset-min-width-2a.html fieldset-min-width-2-ref.html
+== fieldset-min-width-2b.html fieldset-min-width-2-ref.html
+== fieldset-min-inline-size-1.html fieldset-min-inline-size-1-ref.html
+== legend-overlapping-right-border-1.html legend-overlapping-right-border-1-ref.html
+== fieldset-border-image-1a.html fieldset-border-image-1-ref.html
+== fieldset-border-image-1b.html fieldset-border-image-1-ref.html
+== fieldset-border-image-2a.html fieldset-border-image-2-ref.html
+== fieldset-border-image-2b.html fieldset-border-image-2-ref.html
+== dynamic-text-indent.html dynamic-text-indent-ref.html
+== fieldset-height-resize-1.html fieldset-height-resize-1-ref.html
diff --git a/layout/reftests/forms/fieldset/relpos-legend-1-ref.html b/layout/reftests/forms/fieldset/relpos-legend-1-ref.html
new file mode 100644
index 0000000000..c916817ddb
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+ <legend><div style="position:relative; top:20px">Legend</div></legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-1.html b/layout/reftests/forms/fieldset/relpos-legend-1.html
new file mode 100644
index 0000000000..441dd92194
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+ <legend style="position:relative; top:20px">Legend</legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-2-ref.html b/layout/reftests/forms/fieldset/relpos-legend-2-ref.html
new file mode 100644
index 0000000000..4124b074bc
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-2-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+ <legend><span style="position:relative; top:20px">Legend</span></legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-2.html b/layout/reftests/forms/fieldset/relpos-legend-2.html
new file mode 100644
index 0000000000..f1be56e26b
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-2.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+ <legend style="display:inline; position:relative; top:20px">Legend</legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-3-ref.html b/layout/reftests/forms/fieldset/relpos-legend-3-ref.html
new file mode 100644
index 0000000000..2a8c64055a
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-3-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+ <legend><div style="position:relative; left:20px">Legend</div></legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-3.html b/layout/reftests/forms/fieldset/relpos-legend-3.html
new file mode 100644
index 0000000000..88db92986a
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-3.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+ <legend style="position:relative; left:20px">Legend</legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-4-ref.html b/layout/reftests/forms/fieldset/relpos-legend-4-ref.html
new file mode 100644
index 0000000000..05662164f8
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-4-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+ <legend><span style="position:relative; left:20px">Legend</span></legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-4.html b/layout/reftests/forms/fieldset/relpos-legend-4.html
new file mode 100644
index 0000000000..e836a8cb58
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-4.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+ <legend style="display:inline; position:relative; left:20px">Legend</legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/sticky-legend-1-ref.html b/layout/reftests/forms/fieldset/sticky-legend-1-ref.html
new file mode 100644
index 0000000000..6557d81258
--- /dev/null
+++ b/layout/reftests/forms/fieldset/sticky-legend-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:hidden; height:300px; border-style: solid;">
+ <legend style="position:fixed; top:0"><div style="width:200px; height:50px; background:yellow;"></div></legend>
+</fieldset>
+<div style="height:5000px;"></div>
+<script>
+window.scrollTo(0,100);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/sticky-legend-1.html b/layout/reftests/forms/fieldset/sticky-legend-1.html
new file mode 100644
index 0000000000..719c18eb8b
--- /dev/null
+++ b/layout/reftests/forms/fieldset/sticky-legend-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:hidden; height:300px; border-style: solid;">
+ <legend style="position:sticky; top:0;"><div style="width:200px; height:50px; background:yellow;"></div></legend>
+</fieldset>
+<div style="height:5000px;"></div>
+<script>
+window.scrollTo(0,100);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/accent-color-accentcolor-ref.html b/layout/reftests/forms/input/checkbox/accent-color-accentcolor-ref.html
new file mode 100644
index 0000000000..1a8ce5bd6f
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/accent-color-accentcolor-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=checkbox checked>
diff --git a/layout/reftests/forms/input/checkbox/accent-color-accentcolor.html b/layout/reftests/forms/input/checkbox/accent-color-accentcolor.html
new file mode 100644
index 0000000000..759708b249
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/accent-color-accentcolor.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=checkbox checked style="accent-color: AccentColor">
diff --git a/layout/reftests/forms/input/checkbox/checkbox-baseline-ref.html b/layout/reftests/forms/input/checkbox/checkbox-baseline-ref.html
new file mode 100644
index 0000000000..14af30f29a
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-baseline-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Reference: baseline of checkbox/radio</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322698">
+ <style>
+body { font: 16px/1 monospace; }
+
+div { border: 1px dashed blue; }
+
+x {
+ display:inline-block;
+ margin: 20px;
+ border: 25px solid black;
+ width:0;
+ height:0;
+}
+
+ </style>
+ </head>
+ <body>
+ <div><x style="border:unset; outline: 10px solid"></x>Block</div>
+ <div><x style="border:unset; outline: 1px solid"></x>Block</div>
+ <div><x></x>Block</div>
+ <div><x></x>Block</div>
+ <div><x></x>Block</div>
+ <div><x></x>Block</div>
+ <div><x style="border:0; margin:0; width:20px; height:20px; background:pink"></x>Block</div>
+ <div><x style="border:0; margin:0; width:20px; height:20px; background:black"></x>Block</div>
+ <div><x style="border:0; margin:0; width:20px; height:20px; background:pink"></x>Block</div>
+ <div><x style="border:0; margin:0; width:20px; height:20px; background:black"></x>Block</div>
+ <div style="font-size:72px"><x style="border-width:3px"></x>Block</div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/checkbox-baseline.html b/layout/reftests/forms/input/checkbox/checkbox-baseline.html
new file mode 100644
index 0000000000..c133d703a8
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-baseline.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Align Test: baseline of checkbox/radio</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322698">
+ <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-terms">
+ <link rel="match" href="checkbox-baseline-ref.html">
+ <style>
+body { font: 16px/1 monospace; }
+
+div { border: 1px dashed blue; }
+
+.none {
+ -moz-appearance: none; appearance: none;
+ -webkit-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ width:0px;
+ height:0px;
+}
+.intrinsic { width:unset; height:unset; }
+.border { border: 25px solid black; }
+input { margin: 20px; }
+
+ </style>
+ </head>
+ <body>
+ <div><input class="none intrinsic" type="checkbox" style="background:pink; outline:10px solid black">Block</div>
+ <div><input class="none intrinsic" type="radio" style="background:pink; outline:1px solid black">Block</div>
+ <div><input class="none intrinsic border" type="checkbox">Block</div>
+ <div><input class="none intrinsic border" type="radio">Block</div>
+ <div><input class="none border" type="checkbox">Block</div>
+ <div><input class="none border" type="radio">Block</div>
+ <div><input class="none" style="margin:0; width:20px; height:20px; background-color:pink" type="checkbox" checked>Block</div>
+ <div><input class="none" style="margin:0; width:20px; height:20px; background-color:black" type="checkbox">Block</div>
+ <div><input class="none" style="margin:0; width:20px; height:20px; background-color:pink" type="radio" checked>Block</div>
+ <div><input class="none" style="margin:0; width:20px; height:20px; background-color:black" type="radio">Block</div>
+ <div style="font-size:72px"><input class="none border" type="checkbox" style="border-width:3px">Block</div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/checkbox-clamp-01-ref.html b/layout/reftests/forms/input/checkbox/checkbox-clamp-01-ref.html
new file mode 100644
index 0000000000..10489b1546
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-clamp-01-ref.html
@@ -0,0 +1,13 @@
+<style>
+ div {
+ top: 50px;
+ line-height: 0px;
+ position: relative;
+ }
+</style>
+
+<div>
+ <input type="checkbox">
+ <input type="checkbox" checked>
+</div>
+
diff --git a/layout/reftests/forms/input/checkbox/checkbox-clamp-01.html b/layout/reftests/forms/input/checkbox/checkbox-clamp-01.html
new file mode 100644
index 0000000000..b88cba3baf
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-clamp-01.html
@@ -0,0 +1,34 @@
+<!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 clamping width/height of checkbox.</title>
+ <link rel="author" title="Louis Chang" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1400050">
+ <link rel="match" href="checkbox-clamp-ref.html">
+ </head>
+ <style>
+div {
+ position: relative;
+ line-height: 0px;
+}
+ </style>
+ <body>
+ <div>
+ <input type="checkbox">
+ <input type="checkbox" checked>
+ </div>
+ <script>
+ // If we grow the checkbox vertically, horizontal size shouldn't change,
+ // instead it should be centered vertically. We grow it by a hundred
+ // pixels, and the reference positions it manually at 50px, which is where
+ // it should end up.
+ for (let input of document.querySelectorAll("input")) {
+ input.style.height = (100 + input.getBoundingClientRect().height) + "px";
+ }
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/checkbox-clamp-02-ref.html b/layout/reftests/forms/input/checkbox/checkbox-clamp-02-ref.html
new file mode 100644
index 0000000000..c806075fb7
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-clamp-02-ref.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>Testcase for bug 1405986</title>
+ <style type="text/css">
+html,body {
+ color: black;
+ background-color: white;
+ font: 16px/1 monospace;
+ padding: 0;
+ margin: 0;
+}
+
+.grid {
+ display: inline-grid;
+ grid: 100px / 40px 40px;
+ border: 1px solid;
+ vertical-align: top;
+ justify-items: start;
+}
+
+input {
+ margin: 0;
+}
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <input type=checkbox style="align-self: center">
+ <input type=checkbox checked style="align-self: center">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/checkbox-clamp-02.html b/layout/reftests/forms/input/checkbox/checkbox-clamp-02.html
new file mode 100644
index 0000000000..bc764e6ead
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-clamp-02.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1405986</title>
+ <style type="text/css">
+html,body {
+ color: black;
+ background-color: white;
+ font: 16px/1 monospace;
+ padding: 0;
+ margin: 0;
+}
+
+.grid {
+ display: inline-grid;
+ grid: 100px / 40px 40px;
+ border: 1px solid;
+ vertical-align: top;
+ justify-items: start;
+}
+
+input {
+ margin: 0;
+}
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <input type=checkbox style="height: 100px">
+ <input type=checkbox checked style="height: 100px">
+ </div>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/input/checkbox/checkbox-minimum-size-notref.html b/layout/reftests/forms/input/checkbox/checkbox-minimum-size-notref.html
new file mode 100644
index 0000000000..bb32658de2
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-minimum-size-notref.html
@@ -0,0 +1,2 @@
+<input type="checkbox">
+<input type="checkbox" checked>
diff --git a/layout/reftests/forms/input/checkbox/checkbox-minimum-size.html b/layout/reftests/forms/input/checkbox/checkbox-minimum-size.html
new file mode 100644
index 0000000000..667a6dce2d
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-minimum-size.html
@@ -0,0 +1,22 @@
+<!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 minimum size of checkbox.</title>
+ <link rel="author" title="Louise Chang" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1404770">
+ <link rel="match" href="checkbox-minimum-size-ref.html">
+ <style type="text/css">
+input {
+ height: 0px;
+}
+ </style>
+ </head>
+ <body>
+ <input type="checkbox">
+ <input type="checkbox" checked>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/checkbox-radio-auto-sized-ref.html b/layout/reftests/forms/input/checkbox/checkbox-radio-auto-sized-ref.html
new file mode 100644
index 0000000000..d68a05c524
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-radio-auto-sized-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference for bug 1344395</title>
+ <style type="text/css">
+
+input {
+ width: 11px;
+ height: 11px;
+}
+
+ </style>
+</head>
+<body>
+
+<input type="checkbox">
+<input type="radio">
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/checkbox-radio-color-ref.html b/layout/reftests/forms/input/checkbox/checkbox-radio-color-ref.html
new file mode 100644
index 0000000000..bca16269d2
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-radio-color-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference for bug 1338293</title>
+ <style type="text/css">
+
+.none {
+ display:inline-block;
+ width:0; height:0; margin:0;
+}
+
+.b { border: 20px solid; }
+.o { outline: 20px solid; }
+
+ </style>
+</head>
+<body>
+
+<span class="none b" type="checkbox"></span>
+<span class="none o" type="checkbox"></span>
+
+<span class="none b" type="radio"></span>
+<span class="none o" type="radio"></span>
+
+<div style="color:green">
+<span class="none b" type="checkbox"></span>
+<span class="none o" type="checkbox"></span>
+
+<span class="none b" type="radio"></span>
+<span class="none o" type="radio"></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/checkbox-radio-color.html b/layout/reftests/forms/input/checkbox/checkbox-radio-color.html
new file mode 100644
index 0000000000..f157874da4
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checkbox-radio-color.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1338293</title>
+ <style type="text/css">
+
+.none {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ width:0; height:0; margin:0;
+}
+
+.b { border: 20px solid; }
+.o { outline: 20px solid; }
+
+ </style>
+</head>
+<body>
+
+<input class="none b" type="checkbox">
+<input class="none o" type="checkbox">
+
+<input class="none b" type="radio">
+<input class="none o" type="radio">
+
+<div style="color:green">
+<input class="none b" type="checkbox">
+<input class="none o" type="checkbox">
+
+<input class="none b" type="radio">
+<input class="none o" type="radio">
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/checked-appearance-none.html b/layout/reftests/forms/input/checkbox/checked-appearance-none.html
new file mode 100644
index 0000000000..b7d6511358
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checked-appearance-none.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox" style="-moz-appearance:none" checked>
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 0000000000..921482afcd
--- /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 0000000000..50faa46d2d
--- /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/indeterminate-checked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
new file mode 100644
index 0000000000..37ea176550
--- /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 0000000000..7cecf09a04
--- /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 0000000000..cf16667cbf
--- /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 0000000000..91097098ce
--- /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 0000000000..74c06d2536
--- /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 0000000000..11832f4779
--- /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 0000000000..02266912a3
--- /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 0000000000..eb23819f9d
--- /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 0000000000..1055cbef14
--- /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 0000000000..56a8d0955a
--- /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 0000000000..3dbdc48d46
--- /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 0000000000..cbbce68177
--- /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 0000000000..2f2532c0b4
--- /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 0000000000..159a2cc920
--- /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.list b/layout/reftests/forms/input/checkbox/reftest.list
new file mode 100644
index 0000000000..6cfa0d5d1f
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/reftest.list
@@ -0,0 +1,20 @@
+== label-dynamic.html label-dynamic-ref.html
+== radio-stretched.html radio-stretched-ref.html # test for bug 464589
+!= checked-native.html checked-native-notref.html
+== checked-appearance-none.html about:blank
+== unchecked-appearance-none.html about:blank
+!= checked-native.html about:blank
+!= checked-native-notref.html about:blank
+== indeterminate-checked.html about:blank
+== indeterminate-checked-notref.html about:blank
+== indeterminate-unchecked.html about:blank
+!= 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
+== checkbox-baseline.html checkbox-baseline-ref.html
+== checkbox-radio-color.html checkbox-radio-color-ref.html
+== checkbox-clamp-01.html checkbox-clamp-01-ref.html
+== checkbox-clamp-02.html checkbox-clamp-02-ref.html
+!= checkbox-minimum-size.html checkbox-minimum-size-notref.html
+
+pref(ui.accentcolor,"#3daee9") pref("ui.accentcolortext","white") == accent-color-accentcolor.html accent-color-accentcolor-ref.html
diff --git a/layout/reftests/forms/input/checkbox/unchecked-appearance-none.html b/layout/reftests/forms/input/checkbox/unchecked-appearance-none.html
new file mode 100644
index 0000000000..8e5b55cfb7
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/unchecked-appearance-none.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox" style="-moz-appearance:none">
diff --git a/layout/reftests/forms/input/color/auto-height-1-ref.html b/layout/reftests/forms/input/color/auto-height-1-ref.html
new file mode 100644
index 0000000000..32fb2e3b35
--- /dev/null
+++ b/layout/reftests/forms/input/color/auto-height-1-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<link rel="stylesheet" href="reference-style.css">
+<button class="input-color" style="height: auto">
+ <div class="input-color-swatch" style="height: 0"></div>
+</button>
diff --git a/layout/reftests/forms/input/color/auto-height-1.html b/layout/reftests/forms/input/color/auto-height-1.html
new file mode 100644
index 0000000000..71ad8c3126
--- /dev/null
+++ b/layout/reftests/forms/input/color/auto-height-1.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>min widget size is respected even with auto-height</title>
+<input type="color" style="height: auto">
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 0000000000..027c1e2b57
--- /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 0000000000..85cfda4a31
--- /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);
+ </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 0000000000..9def78fad1
--- /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 0000000000..754e81cafc
--- /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);
+ </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 0000000000..f9d66c187c
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='reference-style.css'>
+ <style>
+ 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 0000000000..47905cf3b6
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <style>
+ 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 0000000000..802af966e8
--- /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 0000000000..209594b32e
--- /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 0000000000..87887b0161
--- /dev/null
+++ b/layout/reftests/forms/input/color/input-color-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel='stylesheet' 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 0000000000..a351df18fc
--- /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 0000000000..9a500d4ced
--- /dev/null
+++ b/layout/reftests/forms/input/color/margin-padding-1-ref.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' 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; }
+
+ /* The non-native theme has different widget-supplied padding values
+ * for <input type="color"> and <button>, and so we must calculate
+ * the color swatch height explicitly. These are computed as the
+ * widget-supplied min-height (32px) minus padding+border (padding
+ * as set above, and the 2px of widget-supplied border), clamped to be
+ * non-negative.
+ */
+ body > button:nth-child(1) .input-color-swatch { height: 28px; }
+ body > button:nth-child(2) .input-color-swatch { height: 8px; }
+ body > button:nth-child(3) .input-color-swatch { height: 8px; }
+ body > button:nth-child(4) .input-color-swatch { height: 18px; }
+ body > button:nth-child(5) .input-color-swatch { height: 0px; }
+ body > button:nth-child(6) .input-color-swatch { height: 0px; }
+ body > button:nth-child(7) .input-color-swatch { height: 28px; }
+ body > button:nth-child(8) .input-color-swatch { height: 28px; }
+ body > button:nth-child(9) .input-color-swatch { height: 28px; }
+ body > button:nth-child(10) .input-color-swatch { height: 28px; }
+ body > button:nth-child(11) .input-color-swatch { height: 18px; }
+ body > button:nth-child(12) .input-color-swatch { height: 28px; }
+ body > button:nth-child(13) .input-color-swatch { height: 18px; }
+ body > button:nth-child(14) .input-color-swatch { height: 28px; }
+ body > button:nth-child(15) .input-color-swatch { height: 20px; }
+ body > button:nth-child(16) .input-color-swatch { height: 28px; }
+ </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 0000000000..e394d5d29b
--- /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 0000000000..347b1216df
--- /dev/null
+++ b/layout/reftests/forms/input/color/reference-style.css
@@ -0,0 +1,17 @@
+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: 32px;
+ padding: 4px; /* widget-supplied padding */
+}
diff --git a/layout/reftests/forms/input/color/reftest.list b/layout/reftests/forms/input/color/reftest.list
new file mode 100644
index 0000000000..5d3858afcb
--- /dev/null
+++ b/layout/reftests/forms/input/color/reftest.list
@@ -0,0 +1,9 @@
+== input-color-1.html input-color-1-ref.html
+
+fuzzy(0-1,0-2) == 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(0-8,0-124) == transformations-1.html transformations-1-ref.html
+== custom-style-1.html custom-style-1-ref.html
+== custom-style-2.html custom-style-2-ref.html
+== auto-height-1.html auto-height-1-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 0000000000..b275d0dd4b
--- /dev/null
+++ b/layout/reftests/forms/input/color/transformations-1-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='reference-style.css'>
+ <style>
+ body > button:nth-child(1) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ body > button:nth-child(2) { transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+ body > button:nth-child(3) { transform: rotate(30deg); }
+ body > button:nth-child(4) { transform: scale(2, 4); }
+ body > button:nth-child(5) { transform: scale(0.1, 0.4); }
+ body > button:nth-child(6) { transform: scale(1, 0.4); }
+ body > button:nth-child(7) { transform: scale(0.1, 1); }
+ body > button:nth-child(8) { transform: skew(30deg, -10deg); }
+ body > button:nth-child(9) { transform: skew(-30deg, 10deg); }
+ body > button:nth-child(10) { transform: translate(10px, 30px); }
+ body > button:nth-child(11) { transform: translate(30px, 10px); }
+ body > button:nth-child(12) { transform: translate(-10px, 30px); }
+ body > button:nth-child(13) { transform: translate(30px, -10px); }
+ body > button:nth-child(14) { 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 0000000000..ba70275232
--- /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) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ input[type=color]:nth-child(2) { transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+ input[type=color]:nth-child(3) { transform: rotate(30deg); }
+ input[type=color]:nth-child(4) { transform: scale(2, 4); }
+ input[type=color]:nth-child(5) { transform: scale(0.1, 0.4); }
+ input[type=color]:nth-child(6) { transform: scale(1, 0.4); }
+ input[type=color]:nth-child(7) { transform: scale(0.1, 1); }
+ input[type=color]:nth-child(8) { transform: skew(30deg, -10deg); }
+ input[type=color]:nth-child(9) { transform: skew(-30deg, 10deg); }
+ input[type=color]:nth-child(10) { transform: translate(10px, 30px); }
+ input[type=color]:nth-child(11) { transform: translate(30px, 10px); }
+ input[type=color]:nth-child(12) { transform: translate(-10px, 30px); }
+ input[type=color]:nth-child(13) { transform: translate(30px, -10px); }
+ input[type=color]:nth-child(14) { 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 0000000000..ffb5ffa58d
--- /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 0000000000..31b804602a
--- /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/line-height-01-ref.html b/layout/reftests/forms/input/datetime/line-height-01-ref.html
new file mode 100644
index 0000000000..a53220d46f
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/line-height-01-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ input {
+ box-sizing: border-box;
+ height: 34px;
+ }
+</style>
+<input type=date>
+<input type=time>
diff --git a/layout/reftests/forms/input/datetime/line-height-01.html b/layout/reftests/forms/input/datetime/line-height-01.html
new file mode 100644
index 0000000000..9cb9987888
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/line-height-01.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+ input {
+ box-sizing: border-box;
+ height: 34px;
+ line-height: 80px;
+ }
+</style>
+<input type=date>
+<input type=time>
diff --git a/layout/reftests/forms/input/datetime/line-height-02-ref.html b/layout/reftests/forms/input/datetime/line-height-02-ref.html
new file mode 100644
index 0000000000..87ed629493
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/line-height-02-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<style>
+ input {
+ height: 80px;
+ }
+</style>
+<input type=date>
+<input type=time>
diff --git a/layout/reftests/forms/input/datetime/line-height-02.html b/layout/reftests/forms/input/datetime/line-height-02.html
new file mode 100644
index 0000000000..e71044c857
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/line-height-02.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<style>
+ input {
+ line-height: 80px;
+ }
+</style>
+<input type=date>
+<input type=time>
diff --git a/layout/reftests/forms/input/datetime/reftest.list b/layout/reftests/forms/input/datetime/reftest.list
new file mode 100644
index 0000000000..f2ec5659bf
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/reftest.list
@@ -0,0 +1,25 @@
+!= time-simple-unthemed.html time-simple-unthemed-ref.html
+!= time-large-font.html time-basic.html
+!= time-width-height.html time-basic.html
+!= time-border.html time-basic.html
+
+# type change
+== to-time-from-other-type-unthemed.html time-simple-unthemed.html
+== from-time-to-other-type-unthemed.html from-time-to-other-type-unthemed-ref.html
+
+# content should not overflow on small width/height
+== time-small-width.html time-small-width-ref.html
+fuzzy(0-25,0-2) == time-small-height.html time-small-height-ref.html # Minor outline 1px shift
+== time-small-width-height.html time-small-width-height-ref.html
+
+# content (text) should be left aligned
+fuzzy-if(Android,0-4,0-8) == time-content-left-aligned.html time-content-left-aligned-ref.html
+
+# reset button should be right aligned
+skip-if(Android) fuzzy(0-24,0-4) == time-reset-button-right-aligned.html time-reset-button-right-aligned-ref.html # bug 1372062 for Android, antialiasing with WR disabled for the fuzz
+== reset-button-visibility-hidden.html reset-button-visibility-hidden-ref.html
+
+!= text-align.html text-align-notref.html
+
+== line-height-01.html line-height-01-ref.html
+== line-height-02.html line-height-02-ref.html
diff --git a/layout/reftests/forms/input/datetime/reset-button-visibility-hidden-ref.html b/layout/reftests/forms/input/datetime/reset-button-visibility-hidden-ref.html
new file mode 100644
index 0000000000..6abb665a39
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/reset-button-visibility-hidden-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<!-- intentionally blank -->
diff --git a/layout/reftests/forms/input/datetime/reset-button-visibility-hidden.html b/layout/reftests/forms/input/datetime/reset-button-visibility-hidden.html
new file mode 100644
index 0000000000..0c5ff37e44
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/reset-button-visibility-hidden.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<input type="date" value="2019-01-18" style="visibility: hidden">
+<input type="time" value="16:30" style="visibility: hidden">
diff --git a/layout/reftests/forms/input/datetime/text-align-notref.html b/layout/reftests/forms/input/datetime/text-align-notref.html
new file mode 100644
index 0000000000..e518b21d04
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/text-align-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="date" style="width: 30em">
diff --git a/layout/reftests/forms/input/datetime/text-align.html b/layout/reftests/forms/input/datetime/text-align.html
new file mode 100644
index 0000000000..9aea7d34d2
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/text-align.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="date" style="width:30em; text-align:center">
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 0000000000..c161b17c25
--- /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 0000000000..09ffd01d20
--- /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-content-left-aligned-ref.html b/layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html
new file mode 100644
index 0000000000..ad8be9adc1
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" style="width: 200px;">
+ <!-- div to cover the right area -->
+ <div style="display:block; position:absolute; background-color:black;
+ top:0px; left:40px; width:200px; height:100px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-content-left-aligned.html b/layout/reftests/forms/input/datetime/time-content-left-aligned.html
new file mode 100644
index 0000000000..aa910cddf9
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-content-left-aligned.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" style="width: 50px;">
+ <!-- div to cover the right area -->
+ <div style="display:block; position:absolute; background-color:black;
+ top:0px; left:40px; width:200px; height:100px;"></div>
+ </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 0000000000..c2f5e956df
--- /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-reset-button-right-aligned-ref.html b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html
new file mode 100644
index 0000000000..3d36f20680
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" value="10:00" style="float: right; color: white;">
+ <!-- div to cover the left area -->
+ <div style="display:block; position:absolute; background-color:black;
+ top:0px; right:30px; width:500px; height:100px;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html
new file mode 100644
index 0000000000..72d5cc140e
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="time" value="10:00" style="width: 150px; float: right;
+ color: white;">
+ <!-- div to cover the left area -->
+ <div style="display:block; position:absolute; background-color:black;
+ top:0px; right:30px; width:500px; height:100px;"></div>
+ </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 0000000000..24dccffeae
--- /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 0000000000..0234567233
--- /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-small-height-ref.html b/layout/reftests/forms/input/datetime/time-small-height-ref.html
new file mode 100644
index 0000000000..fcda93df9a
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-height-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 200px;
+ height: 5px;
+ outline: 1px dotted black;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-height.html b/layout/reftests/forms/input/datetime/time-small-height.html
new file mode 100644
index 0000000000..3044822fe8
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-height.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 200px;
+ height: 5px;
+ outline: 1px dotted black;
+ color: white;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input type="time">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width-height-ref.html b/layout/reftests/forms/input/datetime/time-small-width-height-ref.html
new file mode 100644
index 0000000000..0979243db0
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width-height-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 8px;
+ height: 8px;
+ outline: 1px dotted black;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width-height.html b/layout/reftests/forms/input/datetime/time-small-width-height.html
new file mode 100644
index 0000000000..a221b28195
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width-height.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 8px;
+ height: 8px;
+ outline: 1px dotted black;
+ color: white;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input type="time">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width-ref.html b/layout/reftests/forms/input/datetime/time-small-width-ref.html
new file mode 100644
index 0000000000..2379c70809
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 10px;
+ height: 1.5em;
+ outline: 1px dotted black;
+ background: white;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-small-width.html b/layout/reftests/forms/input/datetime/time-small-width.html
new file mode 100644
index 0000000000..f76f7fdfa9
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-small-width.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+input {
+ width: 10px;
+ height: 1.5em;
+ outline: 1px dotted black;
+ color: white;
+ background: white;
+ /* Disable baseline alignment, so that our y-position isn't influenced by the
+ * choice of font inside of input: */
+ vertical-align: top;
+}
+ </style>
+ </head>
+ <body>
+ <input type="time">
+ </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 0000000000..a6de5cdb47
--- /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 0000000000..1ae398f4c3
--- /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 0000000000..c2591d0687
--- /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 0000000000..ab1bf2e6bf
--- /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 0000000000..a9fe4400d9
--- /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 0000000000..07e5eee7e6
--- /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.list b/layout/reftests/forms/input/email/reftest.list
new file mode 100644
index 0000000000..dcca7a3cde
--- /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.xhtml b/layout/reftests/forms/input/file/background-ref.xhtml
new file mode 100644
index 0000000000..81d3576a09
--- /dev/null
+++ b/layout/reftests/forms/input/file/background-ref.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style>
+ window {
+ background-color: blue;
+ }
+ </html:style>
+
+ <vbox>
+ <html:div class='file'>
+ <html:button>Browse&#8230;</html:button><html:label>No file selected.</html:label>
+ </html:div>
+ </vbox>
+</window>
diff --git a/layout/reftests/forms/input/file/background.html b/layout/reftests/forms/input/file/background.html
new file mode 100644
index 0000000000..02af1d143d
--- /dev/null
+++ b/layout/reftests/forms/input/file/background.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ <style>
+ body {
+ background-color: blue;
+ }
+ </style>
+ <body>
+ <input type='file'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/file/button-height-ref.html b/layout/reftests/forms/input/file/button-height-ref.html
new file mode 100644
index 0000000000..a80d261cf8
--- /dev/null
+++ b/layout/reftests/forms/input/file/button-height-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<style>
+ /* Android adds a border for some reason */
+ input { border: 0 }
+</style>
+<input type="file">
diff --git a/layout/reftests/forms/input/file/button-height.html b/layout/reftests/forms/input/file/button-height.html
new file mode 100644
index 0000000000..b1094ad783
--- /dev/null
+++ b/layout/reftests/forms/input/file/button-height.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<style>
+ /* Android adds a border for some reason */
+ input { border: 0 }
+</style>
+<input type="file" style="height: 400px">
diff --git a/layout/reftests/forms/input/file/color-inherit-ref.html b/layout/reftests/forms/input/file/color-inherit-ref.html
new file mode 100644
index 0000000000..39cd471a56
--- /dev/null
+++ b/layout/reftests/forms/input/file/color-inherit-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type='file' style='color: chartreuse;'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/file/color-inherit.html b/layout/reftests/forms/input/file/color-inherit.html
new file mode 100644
index 0000000000..8435329537
--- /dev/null
+++ b/layout/reftests/forms/input/file/color-inherit.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body style='color: chartreuse;'>
+ <input type='file'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/file/css-display-ref.html b/layout/reftests/forms/input/file/css-display-ref.html
new file mode 100644
index 0000000000..875362bddf
--- /dev/null
+++ b/layout/reftests/forms/input/file/css-display-ref.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: File input with CSS display</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+input {
+ height: 3em;
+}
+.grid { display: block; }
+.flex { display: block; }
+.block { display: block; }
+.table { display: block; }
+.columns { display: block; }
+.n { -webkit-appearance:none; appearance:none; }
+</style>
+<body>
+ <input type="file" class="grid">
+ <input type="file" class="flex">
+ <input type="file" class="block">
+ <input type="file" class="table">
+ <input type="file" class="columns">
+
+ A<input type="file">
+ <input type="file" class="inline">
+ <input type="file" class="inline-grid">
+ <input type="file" class="inline-flex">
+ <input type="file" class="inline-block">
+ <input type="file" class="inline-table">
+ <input type="file" class="inline-columns">
+
+ A<input disabled type="file">
+ <input disabled type="file" class="inline">
+ <input disabled type="file" class="inline-grid">
+ <input disabled type="file" class="inline-flex">
+ <input disabled type="file" class="inline-block">
+ <input disabled type="file" class="inline-table">
+ <input disabled type="file" class="inline-columns">
+
+ A<input type="file" class="n">
+ <input type="file" class="n inline">
+ <input type="file" class="n inline-grid">
+ <input type="file" class="n inline-flex">
+ <input type="file" class="n inline-block">
+ <input type="file" class="n inline-table">
+ <input type="file" class="n inline-columns">
+
+ A<input disabled type="file" class="n">
+ <input disabled type="file" class="n inline">
+ <input disabled type="file" class="n inline-grid">
+ <input disabled type="file" class="n inline-flex">
+ <input disabled type="file" class="n inline-block">
+ <input disabled type="file" class="n inline-table">
+ <input disabled type="file" class="n inline-columns">
+</body>
diff --git a/layout/reftests/forms/input/file/css-display.html b/layout/reftests/forms/input/file/css-display.html
new file mode 100644
index 0000000000..aba7435015
--- /dev/null
+++ b/layout/reftests/forms/input/file/css-display.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test: File input with CSS display</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#widgets">
+<link rel="help" href="https://github.com/whatwg/html/issues/4082">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="css-overflow-ref.html">
+<style>
+input {
+ height: 3em;
+}
+.inline { display: inline }
+.inline-grid { display: inline-grid; grid: 500px/500px; align-items: end; }
+.inline-flex { display: inline-flex; flex-flow: column; align-items: end; }
+.inline-block { display: inline-block }
+.inline-table { display: inline-table }
+.inline-columns { display: inline-block; column-width: 500px; column-rule: 10px solid; }
+.grid { display: grid; grid: 500px/500px; align-items: end; }
+.flex { display: flex; flex-flow: column; align-items: end; }
+.block { display: block }
+.table { display: table }
+.columns { display: block; column-width: 500px; column-rule: 10px solid; }
+.n { -webkit-appearance:none; appearance:none; }
+</style>
+<body>
+ <input type="file" class="grid">
+ <input type="file" class="flex">
+ <input type="file" class="block">
+ <input type="file" class="table">
+ <input type="file" class="columns">
+
+ A<input type="file">
+ <input type="file" class="inline">
+ <input type="file" class="inline-grid">
+ <input type="file" class="inline-flex">
+ <input type="file" class="inline-block">
+ <input type="file" class="inline-table">
+ <input type="file" class="inline-columns">
+
+ A<input disabled type="file">
+ <input disabled type="file" class="inline">
+ <input disabled type="file" class="inline-grid">
+ <input disabled type="file" class="inline-flex">
+ <input disabled type="file" class="inline-block">
+ <input disabled type="file" class="inline-table">
+ <input disabled type="file" class="inline-columns">
+
+ A<input type="file" class="n">
+ <input type="file" class="n inline">
+ <input type="file" class="n inline-grid">
+ <input type="file" class="n inline-flex">
+ <input type="file" class="n inline-block">
+ <input type="file" class="n inline-table">
+ <input type="file" class="n inline-columns">
+
+ A<input disabled type="file" class="n">
+ <input disabled type="file" class="n inline">
+ <input disabled type="file" class="n inline-grid">
+ <input disabled type="file" class="n inline-flex">
+ <input disabled type="file" class="n inline-block">
+ <input disabled type="file" class="n inline-table">
+ <input disabled type="file" class="n inline-columns">
+</body>
diff --git a/layout/reftests/forms/input/file/css-overflow-ref.html b/layout/reftests/forms/input/file/css-overflow-ref.html
new file mode 100644
index 0000000000..a3f696fcf2
--- /dev/null
+++ b/layout/reftests/forms/input/file/css-overflow-ref.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: File input with CSS overflow</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+input {
+ display: inline-block;
+ width: 100px;
+ height: 30px;
+ font-size: 48px;
+ overflow: visible;
+}
+.n { -webkit-appearance:none; appearance:none; }
+</style>
+<body>
+ A<input type="file">
+ <input type="file" class="ov">
+ <input type="file" class="oh">
+ <input type="file" class="os">
+ <input type="file" class="oa">
+
+ A<input disabled type="file">
+ <input disabled type="file" class="ov">
+ <input disabled type="file" class="oh">
+ <input disabled type="file" class="os">
+ <input disabled type="file" class="oa">
+
+ A<input type="file" class="n">
+ <input type="file" class="n ov">
+ <input type="file" class="n oh">
+ <input type="file" class="n os">
+ <input type="file" class="n oa">
+
+ A<input disabled type="file" class="n">
+ <input disabled type="file" class="n ov">
+ <input disabled type="file" class="n oh">
+ <input disabled type="file" class="n os">
+ <input disabled type="file" class="n oa">
+</body>
diff --git a/layout/reftests/forms/input/file/css-overflow.html b/layout/reftests/forms/input/file/css-overflow.html
new file mode 100644
index 0000000000..dd3fb08bf5
--- /dev/null
+++ b/layout/reftests/forms/input/file/css-overflow.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test: File input with CSS overflow</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#widgets">
+<link rel="help" href="https://github.com/whatwg/html/issues/4082">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="css-overflow-ref.html">
+<style>
+input {
+ display: inline-block;
+ width: 100px;
+ height: 30px;
+ font-size: 48px;
+}
+.ov { overflow: visible; }
+.oh { overflow: hidden; }
+.os { overflow: scroll; }
+.oa { overflow: auto; }
+.n { -webkit-appearance:none; appearance:none; }
+</style>
+<body>
+ A<input type="file">
+ <input type="file" class="ov">
+ <input type="file" class="oh">
+ <input type="file" class="os">
+ <input type="file" class="oa">
+
+ A<input disabled type="file">
+ <input disabled type="file" class="ov">
+ <input disabled type="file" class="oh">
+ <input disabled type="file" class="os">
+ <input disabled type="file" class="oa">
+
+ A<input type="file" class="n">
+ <input type="file" class="n ov">
+ <input type="file" class="n oh">
+ <input type="file" class="n os">
+ <input type="file" class="n oa">
+
+ A<input disabled type="file" class="n">
+ <input disabled type="file" class="n ov">
+ <input disabled type="file" class="n oh">
+ <input disabled type="file" class="n os">
+ <input disabled type="file" class="n oa">
+</body>
diff --git a/layout/reftests/forms/input/file/dynamic-max-width-ref.html b/layout/reftests/forms/input/file/dynamic-max-width-ref.html
new file mode 100644
index 0000000000..1628c5fa30
--- /dev/null
+++ b/layout/reftests/forms/input/file/dynamic-max-width-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference for dynamic-max-width.html</title>
+</head>
+<body>
+
+<input type=file dir=rtl>
+
+<br>
+
+<input type=file>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/file/dynamic-max-width.html b/layout/reftests/forms/input/file/dynamic-max-width.html
new file mode 100644
index 0000000000..1cad23c169
--- /dev/null
+++ b/layout/reftests/forms/input/file/dynamic-max-width.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>CSS Test: file control with dynamic change to max-width</title>
+ <style type="text/css">
+
+ input { max-width: 10em; }
+
+ </style>
+ <script>
+ function tweak() {
+ [...document.querySelectorAll('input')].forEach(function(e) {
+ e.style.maxWidth = 'initial';
+ });
+ document.documentElement.removeAttribute("class");
+ }
+ window.addEventListener("MozReftestInvalidate", tweak);
+ </script>
+</head>
+<body onload="test()">
+
+<input type=file dir=rtl>
+
+<br>
+
+<input type=file>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/file/label-min-inline-size-ref.html b/layout/reftests/forms/input/file/label-min-inline-size-ref.html
new file mode 100644
index 0000000000..6e8e1287c3
--- /dev/null
+++ b/layout/reftests/forms/input/file/label-min-inline-size-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1500530</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:black; font:48pt/1 Arial; padding:0; margin:0;
+}
+
+div { width: 100px; height: 20px; margin-top: -2px; background: lime; }
+
+ </style>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/file/label-min-inline-size.html b/layout/reftests/forms/input/file/label-min-inline-size.html
new file mode 100644
index 0000000000..3c97476211
--- /dev/null
+++ b/layout/reftests/forms/input/file/label-min-inline-size.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1500530</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:48pt/1 Arial; padding:0; margin:0;
+}
+
+input {
+ font-family: Arial;
+ font-size: 48pt;
+ vertical-align: top;
+ background: lime;
+}
+div { text-indent: -24ch; margin-top: -2px; }
+
+mask {
+ position: absolute;
+ left: 100px; right: 0; top: 0; bottom: 0;
+ background: black;
+}
+
+mask2 {
+ position: absolute;
+ left: 0; right: 0; top: 18px; bottom: 0;
+ background: black;
+}
+
+ </style>
+</head>
+<body>
+
+<mask></mask>
+<mask2></mask2>
+<div><input type="file"></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/file/reftest.list b/layout/reftests/forms/input/file/reftest.list
new file mode 100644
index 0000000000..2ad51b2f69
--- /dev/null
+++ b/layout/reftests/forms/input/file/reftest.list
@@ -0,0 +1,12 @@
+skip-if(ThreadSanitizer) fuzzy(0-1,0-34) == simple.html chrome://reftest/content/forms/input/file/simple-ref.xhtml
+fuzzy(0-1,0-17) == rtl.html chrome://reftest/content/forms/input/file/rtl-ref.xhtml
+fuzzy(0-1,0-34) == size.html chrome://reftest/content/forms/input/file/simple-ref.xhtml
+fuzzy(0-1,0-10) == background.html chrome://reftest/content/forms/input/file/background-ref.xhtml
+fuzzy-if(gtkWidget,0-1,0-10) == style.html chrome://reftest/content/forms/input/file/style-ref.xhtml
+!= width-clip.html width-clip-ref.html
+== color-inherit.html color-inherit-ref.html
+pref(widget.non-native-theme.webrender,true) fuzzy(0-1,0-5) fuzzy-if(OSX,0-46,0-134) == dynamic-max-width.html dynamic-max-width-ref.html # bug 1496542 for webrender, bug 1724582 for appleSilicon
+== label-min-inline-size.html label-min-inline-size-ref.html
+== css-overflow.html css-overflow-ref.html
+== css-display.html css-display-ref.html
+== button-height.html button-height-ref.html
diff --git a/layout/reftests/forms/input/file/rtl-ref.xhtml b/layout/reftests/forms/input/file/rtl-ref.xhtml
new file mode 100644
index 0000000000..6dbe977f46
--- /dev/null
+++ b/layout/reftests/forms/input/file/rtl-ref.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <vbox>
+ <html:style>
+ vbox {
+ margin-right: 8px;
+ }
+ </html:style>
+ <html:div dir='rtl'>
+ <html:div class='file' dir='rtl'>
+ <html:button>Browse&#8230;</html:button><html:label>No file selected.</html:label>
+ </html:div>
+ </html:div>
+ </vbox>
+</window>
diff --git a/layout/reftests/forms/input/file/rtl.html b/layout/reftests/forms/input/file/rtl.html
new file mode 100644
index 0000000000..81e841a124
--- /dev/null
+++ b/layout/reftests/forms/input/file/rtl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <div dir='rtl'>
+ <input type='file'>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/file/simple-ref.xhtml b/layout/reftests/forms/input/file/simple-ref.xhtml
new file mode 100644
index 0000000000..a2a39ae7cd
--- /dev/null
+++ b/layout/reftests/forms/input/file/simple-ref.xhtml
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <vbox>
+ <html:div class='file'>
+ <html:button>Browse&#8230;</html:button><html:label>No file selected.</html:label>
+ </html:div>
+ <html:br/>
+ <html:div class='file'>
+ <html:button>Browse&#8230;</html:button><html:label>No files selected.</html:label>
+ </html:div>
+ </vbox>
+</window>
diff --git a/layout/reftests/forms/input/file/simple.html b/layout/reftests/forms/input/file/simple.html
new file mode 100644
index 0000000000..03a2a7bde5
--- /dev/null
+++ b/layout/reftests/forms/input/file/simple.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type='file'>
+ <br>
+ <input type='file' multiple>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/file/size.html b/layout/reftests/forms/input/file/size.html
new file mode 100644
index 0000000000..33606f935d
--- /dev/null
+++ b/layout/reftests/forms/input/file/size.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<!-- size should have no impact on <input type='file'>. -->
+<html>
+ <body>
+ <input type='file' size='5'>
+ <br>
+ <input type='file' multiple size='30'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/file/style-ref.xhtml b/layout/reftests/forms/input/file/style-ref.xhtml
new file mode 100644
index 0000000000..555c2bd498
--- /dev/null
+++ b/layout/reftests/forms/input/file/style-ref.xhtml
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <hbox>
+ <html:style>
+ .file {
+ background-color: blue;
+ border: 1px red solid;
+ width: 400px;
+ padding: 2px;
+ margin: 5px;
+ display: inline-block;
+ }
+
+ .file > label {
+ /* color only applies to the label */
+ color: white;
+ }
+ </html:style>
+ <html:div class='file'>
+ <html:button>Browse&#8230;</html:button><html:label>No file selected.</html:label>
+ </html:div>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/input/file/style.css b/layout/reftests/forms/input/file/style.css
new file mode 100644
index 0000000000..1ab1730478
--- /dev/null
+++ b/layout/reftests/forms/input/file/style.css
@@ -0,0 +1,63 @@
+:root { color-scheme: light }
+
+vbox, hbox {
+ margin-top: 8px;
+ margin-left: 8px;
+ display: block;
+}
+
+.file {
+ /* Copy of input properties that apply of forms.css below this */
+ color: inherit;
+ font: -moz-field;
+ text-rendering: optimizeLegibility;
+ line-height: normal !important;
+ text-align: start;
+ text-transform: none;
+ word-spacing: normal;
+ letter-spacing: normal;
+ text-indent: 0;
+ user-select: text;
+ text-shadow: none;
+
+ /* Copy of the type=file part of forms.css below this */
+ display: inline; /* this one isn't really a copy... */
+ white-space: nowrap;
+ overflow:hidden;
+
+ -moz-appearance: none;
+ -moz-binding: none;
+ cursor: default;
+ border: none;
+ background-color: transparent;
+ padding: 0;
+}
+
+.file > label {
+ display: inline-block;
+
+ /* Copy from forms.css below this */
+ min-width: 12em;
+ padding-inline-start: 5px;
+
+ color: inherit;
+ font-size: inherit;
+ letter-spacing: inherit;
+
+ direction: ltr !important;
+}
+
+.file[dir='rtl'] > label {
+ /* Copy from forms.css below this */
+ padding-inline-start: 0px;
+ padding-right: 5px;
+ text-align: right;
+}
+
+.file > button {
+ /* Copy from forms.css below this */
+ height: inherit;
+ font-size: inherit;
+ letter-spacing: inherit;
+ cursor: inherit;
+}
diff --git a/layout/reftests/forms/input/file/style.html b/layout/reftests/forms/input/file/style.html
new file mode 100644
index 0000000000..76fa4d971d
--- /dev/null
+++ b/layout/reftests/forms/input/file/style.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <style>
+ input {
+ background-color: blue;
+ border: 1px red solid;
+ width: 400px;
+ color: white;
+ padding: 2px;
+ margin: 5px;
+ }
+ </style>
+ <body>
+ <input type='file'>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/file/width-clip-ref.html b/layout/reftests/forms/input/file/width-clip-ref.html
new file mode 100644
index 0000000000..a6c746ac8d
--- /dev/null
+++ b/layout/reftests/forms/input/file/width-clip-ref.html
@@ -0,0 +1,3 @@
+<div style="width: 5px;"><input type="file"></div>
+<div style="width: 500px;"><input type="file"></div>
+
diff --git a/layout/reftests/forms/input/file/width-clip.html b/layout/reftests/forms/input/file/width-clip.html
new file mode 100644
index 0000000000..d4acd7e27f
--- /dev/null
+++ b/layout/reftests/forms/input/file/width-clip.html
@@ -0,0 +1,3 @@
+<div><input type="file" style="width: 5px"></div>
+<div><input type="file" style="width: 500px"></div>
+
diff --git a/layout/reftests/forms/input/hidden/border.html b/layout/reftests/forms/input/hidden/border.html
new file mode 100644
index 0000000000..ce7dcb2ca4
--- /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.list b/layout/reftests/forms/input/hidden/reftest.list
new file mode 100644
index 0000000000..64fa2bda56
--- /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/appearance-textfield-dynamic.html b/layout/reftests/forms/input/number/appearance-textfield-dynamic.html
new file mode 100644
index 0000000000..813add54e4
--- /dev/null
+++ b/layout/reftests/forms/input/number/appearance-textfield-dynamic.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<input type=number>
+<script>
+ let input = document.querySelector("input");
+ input.getBoundingClientRect();
+ input.style.appearance = "textfield";
+</script>
diff --git a/layout/reftests/forms/input/number/appearance-textfield.html b/layout/reftests/forms/input/number/appearance-textfield.html
new file mode 100644
index 0000000000..8ab3fdc67f
--- /dev/null
+++ b/layout/reftests/forms/input/number/appearance-textfield.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=number style="appearance: textfield">
diff --git a/layout/reftests/forms/input/number/caret-left-rtl-notref.html b/layout/reftests/forms/input/number/caret-left-rtl-notref.html
new file mode 100644
index 0000000000..8328bd9132
--- /dev/null
+++ b/layout/reftests/forms/input/number/caret-left-rtl-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input autofocus type=number style="text-align: left; direction: rtl; caret-color: transparent;">
diff --git a/layout/reftests/forms/input/number/caret-left-rtl.html b/layout/reftests/forms/input/number/caret-left-rtl.html
new file mode 100644
index 0000000000..d7619dc2bb
--- /dev/null
+++ b/layout/reftests/forms/input/number/caret-left-rtl.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input autofocus type=number style="text-align: left; direction: rtl;">
diff --git a/layout/reftests/forms/input/number/caret-right-notref.html b/layout/reftests/forms/input/number/caret-right-notref.html
new file mode 100644
index 0000000000..fabd558fb8
--- /dev/null
+++ b/layout/reftests/forms/input/number/caret-right-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input autofocus type=number style="text-align: right; caret-color: transparent">
diff --git a/layout/reftests/forms/input/number/caret-right-vertical-notref.html b/layout/reftests/forms/input/number/caret-right-vertical-notref.html
new file mode 100644
index 0000000000..d7d45a2c81
--- /dev/null
+++ b/layout/reftests/forms/input/number/caret-right-vertical-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input autofocus type=number style="text-align: right; direction: vertical-lr; caret-color: transparent;">
diff --git a/layout/reftests/forms/input/number/caret-right-vertical.html b/layout/reftests/forms/input/number/caret-right-vertical.html
new file mode 100644
index 0000000000..11e7ab9e40
--- /dev/null
+++ b/layout/reftests/forms/input/number/caret-right-vertical.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input autofocus type=number style="text-align: right; direction: vertical-lr;">
diff --git a/layout/reftests/forms/input/number/caret-right.html b/layout/reftests/forms/input/number/caret-right.html
new file mode 100644
index 0000000000..89b896af47
--- /dev/null
+++ b/layout/reftests/forms/input/number/caret-right.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input autofocus type=number style="text-align: right">
diff --git a/layout/reftests/forms/input/number/clipped-text-ref.html b/layout/reftests/forms/input/number/clipped-text-ref.html
new file mode 100644
index 0000000000..61157dfe41
--- /dev/null
+++ b/layout/reftests/forms/input/number/clipped-text-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ input {
+ -moz-appearance: textfield;
+ height: 30px;
+ font-size: 300px;
+ }
+</style>
+<input type=text value=1111>
diff --git a/layout/reftests/forms/input/number/clipped-text.html b/layout/reftests/forms/input/number/clipped-text.html
new file mode 100644
index 0000000000..0681c03988
--- /dev/null
+++ b/layout/reftests/forms/input/number/clipped-text.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ input {
+ -moz-appearance: textfield;
+ height: 30px;
+ font-size: 300px;
+ }
+</style>
+<input type=number value=1111>
diff --git a/layout/reftests/forms/input/number/flex-ref.html b/layout/reftests/forms/input/number/flex-ref.html
new file mode 100644
index 0000000000..4928292d61
--- /dev/null
+++ b/layout/reftests/forms/input/number/flex-ref.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<style>
+ label {
+ padding: 2px 4px;
+ display: flex;
+ flex-flow: column;
+ background: #ddd;
+ overflow: hidden;
+ min-height: 0;
+ min-width: 0;
+ width: 80px;
+ }
+ input {
+ flex: 1 1 auto;
+ margin: 4px;
+ min-height: 0;
+ min-width: 0;
+ }
+</style>
+<label>
+ <input type="text">
+</label>
diff --git a/layout/reftests/forms/input/number/flex.html b/layout/reftests/forms/input/number/flex.html
new file mode 100644
index 0000000000..c0a6c26642
--- /dev/null
+++ b/layout/reftests/forms/input/number/flex.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<style>
+ label {
+ padding: 2px 4px;
+ display: flex;
+ flex-flow: column;
+ background: #ddd;
+ overflow: hidden;
+ min-height: 0;
+ min-width: 0;
+ width: 80px;
+ }
+ input {
+ flex: 1 1 auto;
+ margin: 4px;
+ min-height: 0;
+ min-width: 0;
+ -moz-appearance: textfield;
+ }
+</style>
+<label>
+ <input type="number">
+</label>
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 0000000000..e07f83f993
--- /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 0000000000..7ed5068ddd
--- /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() {
+ setTimeout(function() {
+ document.getElementsByTagName('input')[1].focus();
+ }, 0);
+}
+
+function end() {
+ setTimeout(function() {
+ document.documentElement.className = "";
+ }, 0);
+}
+ </script>
+ </head>
+ <body>
+ <input type='number' autofocus onfocus="begin();"
+ style="appearance:none;"><br>
+ <input type='number' onfocus="end();"
+ style="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 0000000000..ffb5ffa58d
--- /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 0000000000..561b39bec3
--- /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 0000000000..7f0d427b41
--- /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 0000000000..7c5a4dcaca
--- /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 0000000000..ffb5ffa58d
--- /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 0000000000..50b7b7e04b
--- /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 0000000000..5c9cc0abed
--- /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 0000000000..f3c9d4d562
--- /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 0000000000..b4acb20a75
--- /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-localized-dynamic-asnumber.html b/layout/reftests/forms/input/number/number-localized-dynamic-asnumber.html
new file mode 100644
index 0000000000..f9665422c4
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-localized-dynamic-asnumber.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<input type=number step=0.01 lang=de>
+<script>
+ document.querySelector("input").valueAsNumber = 1.25;
+</script>
diff --git a/layout/reftests/forms/input/number/number-localized-dynamic.html b/layout/reftests/forms/input/number/number-localized-dynamic.html
new file mode 100644
index 0000000000..b2ed74fad4
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-localized-dynamic.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<input type=number step=0.01 lang=de>
+<script>
+ document.querySelector("input").value = 1.25;
+</script>
diff --git a/layout/reftests/forms/input/number/number-localized-notref.html b/layout/reftests/forms/input/number/number-localized-notref.html
new file mode 100644
index 0000000000..8eadc65e08
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-localized-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=number value=1.25 step=0.01>
diff --git a/layout/reftests/forms/input/number/number-localized.html b/layout/reftests/forms/input/number/number-localized.html
new file mode 100644
index 0000000000..b6a9d7bf23
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-localized.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=number value=1.25 step=0.01 lang=de>
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 0000000000..5f17a62425
--- /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 0000000000..bf671a0f9e
--- /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 0000000000..8b654e7f98
--- /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 0000000000..ff118ea238
--- /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 0000000000..5f17a62425
--- /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 0000000000..75923b98b1
--- /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 0000000000..8b654e7f98
--- /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 0000000000..9f69e1eaee
--- /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 0000000000..6076272436
--- /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 0000000000..5018255ca3
--- /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 0000000000..263aeff1f8
--- /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 0000000000..0e51f6c8d9
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-pseudo-elements.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+
+/* None of these selectors should match from content */
+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 0000000000..aa58e491ef
--- /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 0000000000..52945d6a63
--- /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";
+});
+
+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);
+});
+
+ </script>
+ </head>
+ <body>
+ <input type="number">
+ </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 0000000000..fddcc33eb0
--- /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 0000000000..3b9b33b23d
--- /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 = "";
+});
+
+ </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 0000000000..25ab24be4b
--- /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 = "";
+});
+
+ </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 0000000000..d576830254
--- /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 0000000000..5e8db0bc57
--- /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 = "";
+});
+
+ </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 0000000000..abb0b240dc
--- /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 0000000000..79644edc8b
--- /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 0000000000..36ffc06299
--- /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 0000000000..6deed48916
--- /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 0000000000..7a78830629
--- /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 0000000000..73a5373877
--- /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 0000000000..3bc3a388a1
--- /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 0000000000..f8c2ce65da
--- /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/number-spinbox-disabled-notref.html b/layout/reftests/forms/input/number/number-spinbox-disabled-notref.html
new file mode 100644
index 0000000000..216111431e
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-spinbox-disabled-notref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+input {
+ border: none;
+ background: white;
+ color: black;
+}
+</style>
+<input type=number>
diff --git a/layout/reftests/forms/input/number/number-spinbox-disabled.html b/layout/reftests/forms/input/number/number-spinbox-disabled.html
new file mode 100644
index 0000000000..03124d4ab2
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-spinbox-disabled.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+input {
+ border: none;
+ background: white;
+ color: black;
+}
+</style>
+<input type=number disabled>
diff --git a/layout/reftests/forms/input/number/number-style-inheritance-ref.html b/layout/reftests/forms/input/number/number-style-inheritance-ref.html
new file mode 100644
index 0000000000..ce3e272577
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-style-inheritance-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" style="width: 100px; text-decoration: underline; box-sizing: border-box;" value="1234">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-style-inheritance.html b/layout/reftests/forms/input/number/number-style-inheritance.html
new file mode 100644
index 0000000000..aeafc4ee2d
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-style-inheritance.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="number" style="width: 100px; -moz-appearance: textfield; text-decoration: underline; box-sizing: border-box;" value="1234">
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/number/padding-001-notref.html b/layout/reftests/forms/input/number/padding-001-notref.html
new file mode 100644
index 0000000000..de85ee169b
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-001-notref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+input {
+ box-sizing: border-box;
+ padding: 2em;
+ height: 1em;
+ -moz-appearance: textfield;
+}
+</style>
+<input type=number>
diff --git a/layout/reftests/forms/input/number/padding-001-ref.html b/layout/reftests/forms/input/number/padding-001-ref.html
new file mode 100644
index 0000000000..90c2f78ee2
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-001-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+input {
+ box-sizing: border-box;
+ padding: 2em;
+ height: 1em;
+}
+</style>
+<input type=text value=1111>
diff --git a/layout/reftests/forms/input/number/padding-001.html b/layout/reftests/forms/input/number/padding-001.html
new file mode 100644
index 0000000000..cc2f5c7094
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-001.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+input {
+ box-sizing: border-box;
+ padding: 2em;
+ height: 1em;
+ -moz-appearance: textfield;
+}
+</style>
+<input type=number value=1111>
diff --git a/layout/reftests/forms/input/number/padding-002-ref.html b/layout/reftests/forms/input/number/padding-002-ref.html
new file mode 100644
index 0000000000..0a42417770
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-002-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<style>
+input {
+ padding: 10px 0 0;
+ -moz-appearance: textfield;
+}
+</style>
+<input type=text value=1111>
diff --git a/layout/reftests/forms/input/number/padding-002.html b/layout/reftests/forms/input/number/padding-002.html
new file mode 100644
index 0000000000..5c94be0883
--- /dev/null
+++ b/layout/reftests/forms/input/number/padding-002.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<style>
+input {
+ padding: 10px 0 0;
+ -moz-appearance: textfield;
+}
+</style>
+<input type=number value=1111>
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 0000000000..71555581bc
--- /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:read-only { display:none; }
+#t1:read-write { display:block; }
+
+#t2:read-write { display:none; }
+#t2: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.list b/layout/reftests/forms/input/number/reftest.list
new file mode 100644
index 0000000000..0a50ef8113
--- /dev/null
+++ b/layout/reftests/forms/input/number/reftest.list
@@ -0,0 +1,74 @@
+# 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
+
+# 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(0-2,0-5) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1-ref.html
+fuzzy(0-2,0-5) == from-number-to-other-type-unthemed-1.html from-number-to-other-type-unthemed-1-ref.html
+
+# dynamic value changes:
+fuzzy(0-2,0-13) == show-value.html show-value-ref.html
+
+# disabled
+== number-disabled.html number-disabled-ref.html
+!= number-spinbox-disabled.html number-spinbox-disabled-notref.html
+
+# auto width:
+== number-auto-width-1.html number-auto-width-1-ref.html
+== flex.html flex-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:
+fuzzy(0-1,0-1) == number-significant-fractional-digits.html number-significant-fractional-digits-ref.html
+
+# focus
+fuzzy(0-2,0-5) needs-focus == focus-handling.html focus-handling-ref.html # Win: Antialiasing underinvalidation, looks like.
+== spinner-overflow.html spinner-overflow-ref.html
+== spinner-overflow-vertical.html spinner-overflow-vertical-ref.html
+
+# select
+fuzzy(0-1,0-1) == 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(0-128,0-4) == number-reframe-anon-text-field.html number-reframe-anon-text-field-ref.html
+
+== pseudo-classes.html about:blank
+
+# Style inheritance:
+== number-style-inheritance.html number-style-inheritance-ref.html
+
+# l10n
+!= number-localized.html number-localized-notref.html
+== number-localized-dynamic.html number-localized.html
+== number-localized-dynamic-asnumber.html number-localized.html
+
+== padding-001.html padding-001-ref.html
+!= padding-001.html padding-001-notref.html
+== padding-002.html padding-002-ref.html
+
+== appearance-textfield.html text.html
+== appearance-textfield-dynamic.html appearance-textfield.html
+
+fuzzy(0-14,0-4) == clipped-text.html clipped-text-ref.html
+
+fails-if(useDrawSnapshot) needs-focus != caret-right.html caret-right-notref.html
+fails-if(useDrawSnapshot) needs-focus != caret-left-rtl.html caret-left-rtl-notref.html
+fails-if(useDrawSnapshot) needs-focus != caret-right-vertical.html caret-right-vertical-notref.html
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 0000000000..c3d2c5564c
--- /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 0000000000..5aae9922e8
--- /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/spinner-overflow-ref.html b/layout/reftests/forms/input/number/spinner-overflow-ref.html
new file mode 100644
index 0000000000..3e7f1f3ee3
--- /dev/null
+++ b/layout/reftests/forms/input/number/spinner-overflow-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+ input {
+ appearance: none;
+ height: 5px;
+ outline: 2px solid black;
+ }
+</style>
+<input type="text">
+<!-- div to cover spin box area for type=number to type=text comparison -->
+<div style="position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
diff --git a/layout/reftests/forms/input/number/spinner-overflow-vertical-ref.html b/layout/reftests/forms/input/number/spinner-overflow-vertical-ref.html
new file mode 100644
index 0000000000..cf20a034d7
--- /dev/null
+++ b/layout/reftests/forms/input/number/spinner-overflow-vertical-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+ input {
+ appearance: none;
+ outline: 2px solid black;
+ overflow: clip;
+ }
+</style>
+<input type="number" style="writing-mode: vertical-lr">
+<input type="number" style="writing-mode: vertical-rl">
diff --git a/layout/reftests/forms/input/number/spinner-overflow-vertical.html b/layout/reftests/forms/input/number/spinner-overflow-vertical.html
new file mode 100644
index 0000000000..93a6c1f8cf
--- /dev/null
+++ b/layout/reftests/forms/input/number/spinner-overflow-vertical.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+ input {
+ appearance: none;
+ outline: 2px solid black;
+ }
+</style>
+<input type="number" style="writing-mode: vertical-lr">
+<input type="number" style="writing-mode: vertical-rl">
diff --git a/layout/reftests/forms/input/number/spinner-overflow.html b/layout/reftests/forms/input/number/spinner-overflow.html
new file mode 100644
index 0000000000..f73be677a3
--- /dev/null
+++ b/layout/reftests/forms/input/number/spinner-overflow.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+ input {
+ appearance: none;
+ height: 5px;
+ outline: 2px solid black;
+ }
+</style>
+<input type="number">
+<!-- div to cover spin box area for type=number to type=text comparison -->
+<div style="position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
diff --git a/layout/reftests/forms/input/number/text.html b/layout/reftests/forms/input/number/text.html
new file mode 100644
index 0000000000..a46c54a7b7
--- /dev/null
+++ b/layout/reftests/forms/input/number/text.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=text>
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 0000000000..263aeff1f8
--- /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 0000000000..b0beffa56c
--- /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 0000000000..31dac1b36a
--- /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 0000000000..7b792595b4
--- /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.list b/layout/reftests/forms/input/percentage/reftest.list
new file mode 100644
index 0000000000..5d9f729026
--- /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-appearance-none.html b/layout/reftests/forms/input/radio/checked-appearance-none.html
new file mode 100644
index 0000000000..37aed5826e
--- /dev/null
+++ b/layout/reftests/forms/input/radio/checked-appearance-none.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio" style="-moz-appearance:none" checked>
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 0000000000..c9483ac056
--- /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 0000000000..7e7673afd0
--- /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/label-dynamic-ref.html b/layout/reftests/forms/input/radio/label-dynamic-ref.html
new file mode 100644
index 0000000000..5b0501bb8a
--- /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 0000000000..143a0fb6dc
--- /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/radio-clamp-01-ref.html b/layout/reftests/forms/input/radio/radio-clamp-01-ref.html
new file mode 100644
index 0000000000..6104ce1adc
--- /dev/null
+++ b/layout/reftests/forms/input/radio/radio-clamp-01-ref.html
@@ -0,0 +1,12 @@
+<style>
+ div {
+ top: 50px;
+ line-height: 0px;
+ position: relative;
+ }
+</style>
+
+<div>
+ <input type="radio">
+ <input type="radio" checked>
+</div>
diff --git a/layout/reftests/forms/input/radio/radio-clamp-01.html b/layout/reftests/forms/input/radio/radio-clamp-01.html
new file mode 100644
index 0000000000..e4ca9cd05a
--- /dev/null
+++ b/layout/reftests/forms/input/radio/radio-clamp-01.html
@@ -0,0 +1,34 @@
+<!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 clamping width/height of radio.</title>
+ <link rel="author" title="Louis Chang" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1400050">
+ <link rel="match" href="radio-clamp-ref.html">
+ </head>
+ <style>
+div {
+ position: relative;
+ line-height: 0px;
+}
+ </style>
+ <body>
+ <div>
+ <input type="radio">
+ <input type="radio" checked>
+ <div>
+ <script>
+ // If we grow the radio vertically, horizontal size shouldn't change,
+ // instead it should be centered vertically. We grow it by a hundred
+ // pixels, and the reference positions it manually at 50px, which is where
+ // it should end up.
+ for (let input of document.querySelectorAll("input")) {
+ input.style.height = (100 + input.getBoundingClientRect().height) + "px";
+ }
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/radio/radio-clamp-02-ref.html b/layout/reftests/forms/input/radio/radio-clamp-02-ref.html
new file mode 100644
index 0000000000..2061a67420
--- /dev/null
+++ b/layout/reftests/forms/input/radio/radio-clamp-02-ref.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>Testcase for bug 1405986</title>
+ <style type="text/css">
+html,body {
+ color: black;
+ background-color: white;
+ font: 16px/1 monospace;
+ padding: 0;
+ margin: 0;
+}
+
+.grid {
+ display: inline-grid;
+ grid: 100px / 40px 40px;
+ border: 1px solid;
+ vertical-align: top;
+ justify-items: start;
+}
+
+input {
+ margin: 0;
+}
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <input type=radio style="align-self: center">
+ <input type=radio checked style="align-self: center">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/radio/radio-clamp-02.html b/layout/reftests/forms/input/radio/radio-clamp-02.html
new file mode 100644
index 0000000000..11ec57906b
--- /dev/null
+++ b/layout/reftests/forms/input/radio/radio-clamp-02.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1405986</title>
+ <style type="text/css">
+html,body {
+ color: black;
+ background-color: white;
+ font: 16px/1 monospace;
+ padding: 0;
+ margin: 0;
+}
+
+.grid {
+ display: inline-grid;
+ grid: 100px / 40px 40px;
+ border: 1px solid;
+ vertical-align: top;
+ justify-items: start;
+}
+
+input {
+ margin: 0;
+}
+ </style>
+</head>
+<body>
+ <div class="grid">
+ <input type=radio style="height: 100px">
+ <input type=radio checked style="height: 100px">
+ </div>
+</body>
+</html>
+
diff --git a/layout/reftests/forms/input/radio/radio-minimum-size-notref.html b/layout/reftests/forms/input/radio/radio-minimum-size-notref.html
new file mode 100644
index 0000000000..d4539020b0
--- /dev/null
+++ b/layout/reftests/forms/input/radio/radio-minimum-size-notref.html
@@ -0,0 +1,2 @@
+<input type="radio">
+<input type="radio" checked>
diff --git a/layout/reftests/forms/input/radio/radio-minimum-size.html b/layout/reftests/forms/input/radio/radio-minimum-size.html
new file mode 100644
index 0000000000..21bdb6b154
--- /dev/null
+++ b/layout/reftests/forms/input/radio/radio-minimum-size.html
@@ -0,0 +1,22 @@
+<!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 minimum size of radio.</title>
+ <link rel="author" title="Louis Chang" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1404770">
+ <link rel="match" href="radio-minimum-size-ref.html">
+ <style type="text/css">
+input {
+ height: 0px;
+}
+ </style>
+ </head>
+ <body>
+ <input type="radio">
+ <input type="radio" checked>
+ </body>
+</html>
diff --git a/layout/reftests/forms/input/radio/reftest.list b/layout/reftests/forms/input/radio/reftest.list
new file mode 100644
index 0000000000..6c80eaf447
--- /dev/null
+++ b/layout/reftests/forms/input/radio/reftest.list
@@ -0,0 +1,9 @@
+== label-dynamic.html label-dynamic-ref.html
+!= checked-native.html checked-native-notref.html
+== checked-appearance-none.html about:blank
+== unchecked-appearance-none.html about:blank
+!= checked-native.html about:blank
+!= checked-native-notref.html about:blank
+== radio-clamp-01.html radio-clamp-01-ref.html
+skip-if(OSX||winWidget||Android) == radio-clamp-02.html radio-clamp-02-ref.html
+!= radio-minimum-size.html radio-minimum-size-notref.html
diff --git a/layout/reftests/forms/input/radio/unchecked-appearance-none.html b/layout/reftests/forms/input/radio/unchecked-appearance-none.html
new file mode 100644
index 0000000000..e30a1ef396
--- /dev/null
+++ b/layout/reftests/forms/input/radio/unchecked-appearance-none.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio" style="-moz-appearance:none">
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 0000000000..ef65c9297f
--- /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 0000000000..929887d65a
--- /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 0000000000..a4b73e23ad
--- /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/auto-size-ref.html b/layout/reftests/forms/input/range/auto-size-ref.html
new file mode 100644
index 0000000000..b1a4854b78
--- /dev/null
+++ b/layout/reftests/forms/input/range/auto-size-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 -->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: Testcase #1 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+ display: grid;
+ grid: 40px / auto;
+ float: left;
+ place-items: center start;
+ border: 1px solid;
+}
+grid.c {
+ grid: auto / 40px;
+ place-items: start center;
+}
+
+.v { writing-mode: vertical-lr; }
+
+/* fixed cross-size for the INPUT */
+input {
+ height: 30px;
+}
+.c input {
+ height: auto;
+ width: 30px;
+}
+
+ </style>
+</head>
+<body>
+
+<grid class=c><input type=range class=v></grid>
+<grid class=c><input type=range class=v></grid>
+<grid class=c><input type=range class=v></grid>
+
+<grid class=c><input type=range orient=vertical></grid>
+<grid class=c><input type=range orient=vertical></grid>
+<grid class=c><input type=range orient=vertical></grid>
+
+<grid><input type=range></grid>
+<grid><input type=range></grid>
+<grid><input type=range></grid>
+
+<grid><input type=range orient=horizontal class=v></grid>
+<grid><input type=range orient=horizontal class=v></grid>
+<grid><input type=range orient=horizontal class=v></grid>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/range/auto-size.html b/layout/reftests/forms/input/range/auto-size.html
new file mode 100644
index 0000000000..a5945a8188
--- /dev/null
+++ b/layout/reftests/forms/input/range/auto-size.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 -->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #1 for bug 1330962</title>
+ <style type="text/css">
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+ display: grid;
+ grid: 40px / auto;
+ float: left;
+ place-items: center start;
+ border: 1px solid;
+}
+grid.c {
+ grid: auto / 40px;
+ place-items: start center;
+}
+
+.v { writing-mode: vertical-lr; }
+
+ </style>
+</head>
+<body>
+
+<grid class=c><input type=range class=v></grid>
+<grid class=c><input type=range class=v style="width:max-content"></grid>
+<grid class=c><input type=range class=v style="width:min-content"></grid>
+
+<grid class=c><input type=range orient=vertical></grid>
+<grid class=c><input type=range orient=vertical style="width:max-content"></grid>
+<grid class=c><input type=range orient=vertical style="width:min-content"></grid>
+
+<grid><input type=range></grid>
+<grid><input type=range style="height:max-content"></grid>
+<grid><input type=range style="height:min-content"></grid>
+
+<grid><input type=range orient=horizontal class=v></grid>
+<grid><input type=range orient=horizontal class=v style="width:max-content"></grid>
+<grid><input type=range orient=horizontal class=v style="width:min-content"></grid>
+
+</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 0000000000..3103fc7219
--- /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 0000000000..d9514542f5
--- /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 0000000000..f2758db17c
--- /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 0000000000..162d555043
--- /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 0000000000..ffb5ffa58d
--- /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 0000000000..0e1fffaf14
--- /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 0000000000..18a018330e
--- /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 0000000000..73af6dcb09
--- /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 0000000000..8adc101128
--- /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 0000000000..fd914edfd5
--- /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 0000000000..ffe43266ce
--- /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 0000000000..623f608101
--- /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 0000000000..365c62c99b
--- /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 0000000000..3103fc7219
--- /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 0000000000..24dccffeae
--- /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 0000000000..8bf48f7e98
--- /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 0000000000..ffb5ffa58d
--- /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-border-background-ref.html b/layout/reftests/forms/input/range/range-border-background-ref.html
new file mode 100644
index 0000000000..4f1f44c7a7
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-border-background-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+input { height: 2em; }
+</style>
+<div style="float:left">
+<input type=range><br>
+<span style="display:inline-block; background-color:rgba(0,255,0,0.3);"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top; background: none"></span><br>
+</div>
+
+<div style="float:left">
+<span><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br>
+</div>
+
+<div style="float:left">
+<input type=range><br>
+<span style="display:inline-block; background-color: -moz-Field; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==)"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top; background: none"></span><br>
+</div>
+
+<div style="float:left">
+<input type=range><br>
+<span style="display:inline-block; border:1px solid green"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br>
+</div>
diff --git a/layout/reftests/forms/input/range/range-border-background.html b/layout/reftests/forms/input/range/range-border-background.html
new file mode 100644
index 0000000000..bd4ea3419e
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-border-background.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<style>
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+input { height: 2em; }
+</style>
+<div style="float:left">
+<input type=range style="background-color:rgba(0,255,0,0.3)"><br>
+<input type=range style="-webkit-appearance:none; background-color:rgba(0,255,0,0.3); margin:0"><br>
+</div>
+
+<div style="float:left">
+<span style="background:red"><input type=range style="-webkit-appearance:none; margin:0; vertical-align:top"></span><br>
+</div>
+
+<div style="float:left">
+<input type=range style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==)"><br>
+<input type=range style="-webkit-appearance:none; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAE0lEQVQYlWNg+M/gTRQeVUhfhQBHR4DpEUeLigAAAABJRU5ErkJggg==); margin:0"><br>
+</div>
+
+<div style="float:left">
+<input type=range style="border:1px solid red"><br>
+<input type=range style="-webkit-appearance:none; border:1px solid green; margin:0"><br>
+</div>
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 0000000000..df4a3e250f
--- /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 0000000000..01fe1f75ca
--- /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 0000000000..be7bb4b0bb
--- /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 0000000000..ef1012bd4a
--- /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 0000000000..205e7de023
--- /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 0000000000..321822f2b8
--- /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-percent-intrinsic-size-2b-ref.html b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html
new file mode 100644
index 0000000000..9951b8f57d
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: INPUT type=range percent intrinsic block-size</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959">
+ <style>
+html,body {
+ color:black; background-color:white; font:16px/1 monospace;
+}
+
+input { margin: 2px; }
+
+input.b {
+ min-height: 0;
+ background: lime;
+}
+
+input.mb {
+ min-height: 0;
+ max-height: 100%;
+ background: lime;
+}
+
+.n {
+ -webkit-appearance: none;
+}
+
+div {
+ display: inline-block;
+ border:1px solid;
+}
+
+.grid {
+ display: inline-grid;
+ grid: auto / min-content;
+ place-items: start;
+}
+input[orient="vertical"] {
+ -webkit-appearance: slider-vertical;
+ -webkit-appearance: range;
+ appearance: auto;
+}
+
+</style></head><body>
+
+<div style="height:30px"><div>
+ <input type="range" class="b n" orient="vertical">
+</div></div>
+
+<div class="grid" style="grid: min-content / auto">
+ <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
+ <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
+</div>
+
+<div class="grid" style="grid: min-content / auto">
+ <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
+ <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
+</div>
+
+<div class="grid" style="grid: 30px / auto">
+ <input type="range" class="b" orient="vertical" style="height:15px">
+</div>
+
+<div class="grid" style="grid: 30px / auto">
+ <input type="range" class="b" orient="vertical" style="height:15px">
+</div>
+
+<br>
+<br>
+
+<div style="height:30px"><div>
+ <input type="range" class="mb n" orient="vertical">
+</div></div>
+
+<div class="grid" style="grid: min-content / auto">
+ <input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
+ <input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
+</div>
+
+<div class="grid" style="grid: 30px / auto">
+ <input type="range" class="b" orient="vertical" style="height:15px">
+</div>
+
+<div class="grid" style="grid: 30px / auto">
+ <input type="range" class="b" orient="vertical" style="height:15px">
+</div>
+
+</body></html>
diff --git a/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html
new file mode 100644
index 0000000000..d87d9e2e55
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html
@@ -0,0 +1,99 @@
+<!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: INPUT type=range percent intrinsic block-size</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513959">
+ <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#percentage-sizing">
+ <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero">
+ <link rel="match" href="range-percent-intrinsic-size-2b-ref.html">
+ <style>
+html,body {
+ color:black; background-color:white; font:16px/1 monospace;
+}
+
+input { margin: 2px; }
+
+input.b {
+ height: 50%;
+ min-height: -moz-min-content;
+ min-height: min-content;
+ background: lime;
+}
+
+input.mb {
+ max-height: 50%;
+ min-height: -moz-min-content;
+ min-height: min-content;
+ background: lime;
+}
+
+input.b.min-auto, input.mb.min-auto, {
+ min-height: auto;
+}
+
+.n {
+ -webkit-appearance: none;
+}
+
+div {
+ display: inline-block;
+ border:1px solid;
+}
+
+.grid {
+ display: inline-grid;
+ grid: auto / min-content;
+ place-items: start;
+}
+input[orient="vertical"] {
+ -webkit-appearance: slider-vertical;
+ -webkit-appearance: range;
+ appearance: auto;
+}
+
+</style></head><body>
+
+<div style="height:30px"><div>
+ <input type="range" class="b n" orient="vertical">
+</div></div>
+
+<div class="grid" style="grid: min-content / auto">
+ <input type="range" class="b n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(min-content,30px) / auto">
+ <input type="range" class="b n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(auto,30px) / auto">
+ <input type="range" class="b n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(auto,30px) / auto">
+ <input type="range" class="b n min-auto" orient="vertical">
+</div>
+
+<br>
+<br>
+
+<div style="height:30px"><div>
+ <input type="range" class="mb n" orient="vertical">
+</div></div>
+
+<div class="grid" style="grid: minmax(min-content,30px) / auto">
+ <input type="range" class="mb n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(auto,30px) / auto">
+ <input type="range" class="mb n" orient="vertical">
+</div>
+
+<div class="grid" style="grid: minmax(auto,30px) / auto">
+ <input type="range" class="mb n min-auto" orient="vertical">
+</div>
+
+</body></html>
diff --git a/layout/reftests/forms/input/range/range-track-bg-ref.html b/layout/reftests/forms/input/range/range-track-bg-ref.html
new file mode 100644
index 0000000000..e99d3d0bfd
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-track-bg-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<style>
+input[orient="horizontal"]::-moz-range-track {
+ background-color: green;
+ block-size: 0.2em;
+ inline-size: 100%;
+}
+input[orient="vertical"]::-moz-range-track {
+ background-color: green;
+ inline-size: 0.2em;
+ block-size: 100%;
+}
+</style>
+<input type="range" orient="horizontal">
+<input type="range" orient="vertical">
diff --git a/layout/reftests/forms/input/range/range-track-bg.html b/layout/reftests/forms/input/range/range-track-bg.html
new file mode 100644
index 0000000000..b0a08e2b74
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-track-bg.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<style>
+input::-moz-range-track {
+ background-color: green;
+}
+</style>
+<input type="range">
+<input type="range" orient="vertical">
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 0000000000..b2d009bd82
--- /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 0000000000..406eb646ec
--- /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 0000000000..0c26b41225
--- /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;direction:rtl" 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 0000000000..f7bf70ff3a
--- /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;direction:rtl" 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 0000000000..e3cc4b90fb
--- /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;direction:rtl" 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 0000000000..07edd12586
--- /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 0000000000..66637c6526
--- /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 0000000000..96ea874327
--- /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;direction:rtl" 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 0000000000..a5ede81c33
--- /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;direction:rtl" 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 0000000000..679170685e
--- /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;direction:rtl" max=100 value=70>
diff --git a/layout/reftests/forms/input/range/reftest.list b/layout/reftests/forms/input/range/reftest.list
new file mode 100644
index 0000000000..181097dc15
--- /dev/null
+++ b/layout/reftests/forms/input/range/reftest.list
@@ -0,0 +1,61 @@
+
+# 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(0-1,0-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(0-1,0-40) == value-prop-unthemed.html 75pct-unthemed-common-ref.html
+== value-prop.html 75pct-common-ref.html
+fuzzy(0-1,0-40) == valueAsNumber-prop-unthemed.html 75pct-unthemed-common-ref.html
+== valueAsNumber-prop.html 75pct-common-ref.html
+fuzzy(0-1,0-40) == stepDown-unthemed.html 75pct-unthemed-common-ref.html
+== stepDown.html 75pct-common-ref.html
+fuzzy(0-1,0-40) == stepUp-unthemed.html 75pct-unthemed-common-ref.html
+== stepUp.html 75pct-common-ref.html
+random-if(Android) == max-prop.html 100pct-common-ref.html # Snapping in different ways in debug and opt builds, bug 1621141
+fuzzy(0-1,0-4) == reset-value.html reset-value-ref.html
+
+# 'direction' property:
+== direction-unthemed-1.html direction-unthemed-1-ref.html
+
+# ::-moz-range-progress pseudo-element:
+== 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
+
+skip-if(Android) == range-border-background.html range-border-background-ref.html # Android doesn't have a native theme for -webkit-appearance:range
+
+# Other range-percent-intrinsic-size-*.html tests lives in
+# testing/web-platform/tests/css/css-sizing/. Vertical layout with
+# -webkit-appearance:none isn't supported in other UAs so this test
+# is an internal reftest for now.
+== range-percent-intrinsic-size-2b.html range-percent-intrinsic-size-2b-ref.html
+
+fails-if(Android) fuzzy(0-2,0-80) == auto-size.html auto-size-ref.html # Snapping, bug 1621141
+== range-track-bg.html range-track-bg-ref.html
+!= track-default-rendering.html track-default-rendering-ref.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 0000000000..74675c2d7a
--- /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 0000000000..2ccb367657
--- /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 0000000000..6aefd17bca
--- /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 0000000000..3c9f0e7ce3
--- /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 0000000000..6d4d6708a5
--- /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 0000000000..e482af4905
--- /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 0000000000..1e4198cc66
--- /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 0000000000..139e6c797c
--- /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 0000000000..3103fc7219
--- /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 0000000000..86ff0c5214
--- /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/track-default-rendering-ref.html b/layout/reftests/forms/input/range/track-default-rendering-ref.html
new file mode 100644
index 0000000000..d702d021c5
--- /dev/null
+++ b/layout/reftests/forms/input/range/track-default-rendering-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 -->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1583660</title>
+ <style>
+ input::-moz-range-thumb {
+ visibility:hidden;
+ }
+ input::-moz-range-track {
+ background: transparent;
+ }
+ </style>
+</head>
+<body>
+
+<input type=range>
+<input type=range orient=vertical>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/range/track-default-rendering.html b/layout/reftests/forms/input/range/track-default-rendering.html
new file mode 100644
index 0000000000..997b83d202
--- /dev/null
+++ b/layout/reftests/forms/input/range/track-default-rendering.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1524573 -->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1583660</title>
+ <style>
+ input::-moz-range-thumb {
+ visibility:hidden;
+ }
+ </style>
+</head>
+<body>
+
+<input type=range>
+<input type=range orient=vertical>
+
+</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 0000000000..46387af2ea
--- /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 0000000000..66be837045
--- /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 0000000000..a2a6eb6cce
--- /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 0000000000..c00fe8bf4c
--- /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.list b/layout/reftests/forms/input/reftest.list
new file mode 100644
index 0000000000..7de1175ef7
--- /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 0000000000..93bdd26b02
--- /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 0000000000..9c1f4151ab
--- /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 0000000000..2e4ce9c8b5
--- /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/appearance-textfield-dynamic.html b/layout/reftests/forms/input/search/appearance-textfield-dynamic.html
new file mode 100644
index 0000000000..db17afd707
--- /dev/null
+++ b/layout/reftests/forms/input/search/appearance-textfield-dynamic.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<input type=search>
+<script>
+ let input = document.querySelector("input");
+ input.getBoundingClientRect();
+ input.style.appearance = "textfield";
+</script>
diff --git a/layout/reftests/forms/input/search/appearance-textfield.html b/layout/reftests/forms/input/search/appearance-textfield.html
new file mode 100644
index 0000000000..24ce084dae
--- /dev/null
+++ b/layout/reftests/forms/input/search/appearance-textfield.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=search style="appearance: textfield">
diff --git a/layout/reftests/forms/input/search/ref.html b/layout/reftests/forms/input/search/ref.html
new file mode 100644
index 0000000000..07e5eee7e6
--- /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.list b/layout/reftests/forms/input/search/reftest.list
new file mode 100644
index 0000000000..9fd0a13c49
--- /dev/null
+++ b/layout/reftests/forms/input/search/reftest.list
@@ -0,0 +1,8 @@
+== 1.html ref.html
+== 2.html ref.html
+!= 3.html ref.html
+pref(layout.forms.input-type-search.enabled,true) == search-basic.html ref.html
+pref(layout.forms.input-type-search.enabled,true) != search-with-value.html text-with-value.html
+
+== appearance-textfield.html text.html
+== appearance-textfield-dynamic.html appearance-textfield.html
diff --git a/layout/reftests/forms/input/search/search-basic.html b/layout/reftests/forms/input/search/search-basic.html
new file mode 100644
index 0000000000..5ece132c4e
--- /dev/null
+++ b/layout/reftests/forms/input/search/search-basic.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=search>
diff --git a/layout/reftests/forms/input/search/search-with-value.html b/layout/reftests/forms/input/search/search-with-value.html
new file mode 100644
index 0000000000..e4b8fcb887
--- /dev/null
+++ b/layout/reftests/forms/input/search/search-with-value.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=search value=foo>
diff --git a/layout/reftests/forms/input/search/text-with-value.html b/layout/reftests/forms/input/search/text-with-value.html
new file mode 100644
index 0000000000..d98f117bd6
--- /dev/null
+++ b/layout/reftests/forms/input/search/text-with-value.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=text value=foo>
diff --git a/layout/reftests/forms/input/search/text.html b/layout/reftests/forms/input/search/text.html
new file mode 100644
index 0000000000..a46c54a7b7
--- /dev/null
+++ b/layout/reftests/forms/input/search/text.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=text>
diff --git a/layout/reftests/forms/input/tel/1.html b/layout/reftests/forms/input/tel/1.html
new file mode 100644
index 0000000000..4a034de078
--- /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 0000000000..47b530bfe5
--- /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 0000000000..c1348e6f7d
--- /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 0000000000..07e5eee7e6
--- /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.list b/layout/reftests/forms/input/tel/reftest.list
new file mode 100644
index 0000000000..dcca7a3cde
--- /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/autofill-blank.html b/layout/reftests/forms/input/text/autofill-blank.html
new file mode 100644
index 0000000000..966d314038
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-blank.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<input type=text>
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect();
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "autofill");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-line-height.html b/layout/reftests/forms/input/text/autofill-line-height.html
new file mode 100644
index 0000000000..7ef5970896
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-line-height.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ input { height: 4em; color: GrayText; font-family: system-ui }
+</style>
+<input value="Autofill">
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "autofill");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-prefilled-value.html b/layout/reftests/forms/input/text/autofill-prefilled-value.html
new file mode 100644
index 0000000000..42924ac531
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-prefilled-value.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<input type=text value="JOHN DOE">
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect(); // previewValue setter depends on the reframe posted by markAsAutofillField() having being processed...
+ input.previewValue = "Autofill";
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "-moz-autofill-preview");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-preview-blank.html b/layout/reftests/forms/input/text/autofill-preview-blank.html
new file mode 100644
index 0000000000..a235b7430f
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-preview-blank.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<input type=text>
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect();
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "-moz-autofill-preview");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-preview-line-height.html b/layout/reftests/forms/input/text/autofill-preview-line-height.html
new file mode 100644
index 0000000000..7ce1cadb2e
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-preview-line-height.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<style>
+ input { height: 4em; font-family: system-ui }
+</style>
+<input value="Autofill">
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect(); // previewValue setter depends on the reframe posted by markAsAutofillField() having being processed...
+ input.previewValue = "Autofill";
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "-moz-autofill-preview");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill-preview.html b/layout/reftests/forms/input/text/autofill-preview.html
new file mode 100644
index 0000000000..1382d29abd
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill-preview.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<input type=text>
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect(); // previewValue setter depends on the reframe posted by markAsAutofillField() having being processed...
+ input.previewValue = "Autofill";
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "-moz-autofill-preview");
+</script>
diff --git a/layout/reftests/forms/input/text/autofill.html b/layout/reftests/forms/input/text/autofill.html
new file mode 100644
index 0000000000..ccb2b15b1b
--- /dev/null
+++ b/layout/reftests/forms/input/text/autofill.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<input type=text>
+<script>
+ let input = SpecialPowers.wrap(document.querySelector("input"));
+ SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
+ input.getBoundingClientRect(); // previewValue setter depends on the reframe posted by markAsAutofillField() having being processed...
+ input.previewValue = "Autofill";
+ SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "autofill");
+</script>
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 0000000000..427911eb04
--- /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 0000000000..59e92018b1
--- /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 0000000000..14d39ba729
--- /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 0000000000..4af490dce6
--- /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.xhtml b/layout/reftests/forms/input/text/centering-1-ref.xhtml
new file mode 100644
index 0000000000..f1bf3e49cf
--- /dev/null
+++ b/layout/reftests/forms/input/text/centering-1-ref.xhtml
@@ -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.xhtml b/layout/reftests/forms/input/text/centering-1.xhtml
new file mode 100644
index 0000000000..dc72bda555
--- /dev/null
+++ b/layout/reftests/forms/input/text/centering-1.xhtml
@@ -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.xhtml b/layout/reftests/forms/input/text/dynamic-height-1-ref.xhtml
new file mode 100644
index 0000000000..93b9b4387a
--- /dev/null
+++ b/layout/reftests/forms/input/text/dynamic-height-1-ref.xhtml
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<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.xhtml b/layout/reftests/forms/input/text/dynamic-height-1.xhtml
new file mode 100644
index 0000000000..745aac3658
--- /dev/null
+++ b/layout/reftests/forms/input/text/dynamic-height-1.xhtml
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<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/focus-on-anchor-ref.html b/layout/reftests/forms/input/text/focus-on-anchor-ref.html
new file mode 100644
index 0000000000..84d46a9790
--- /dev/null
+++ b/layout/reftests/forms/input/text/focus-on-anchor-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input autofocus>
diff --git a/layout/reftests/forms/input/text/focus-on-anchor.html b/layout/reftests/forms/input/text/focus-on-anchor.html
new file mode 100644
index 0000000000..398e4ab60d
--- /dev/null
+++ b/layout/reftests/forms/input/text/focus-on-anchor.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input id="anchor">
diff --git a/layout/reftests/forms/input/text/height-small-font-notref.html b/layout/reftests/forms/input/text/height-small-font-notref.html
new file mode 100644
index 0000000000..bf43cdb1ea
--- /dev/null
+++ b/layout/reftests/forms/input/text/height-small-font-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input style="width: 100px; font-size: 10px">
diff --git a/layout/reftests/forms/input/text/height-small-font.html b/layout/reftests/forms/input/text/height-small-font.html
new file mode 100644
index 0000000000..d269aa540a
--- /dev/null
+++ b/layout/reftests/forms/input/text/height-small-font.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input style="width: 100px; font-size: 16px">
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 0000000000..2735336e3b
--- /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 0000000000..29eb66a77d
--- /dev/null
+++ b/layout/reftests/forms/input/text/intrinsic-size.html
@@ -0,0 +1,16 @@
+<!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;"/></span>
+ </div>
+ <script>
+ let input = document.querySelector("input");
+ input.style.paddingLeft = (200 + parseInt(getComputedStyle(input).paddingLeft, 10)) + "px";
+ </script>
+ </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 0000000000..e60a5f3a8c
--- /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 0000000000..52a0fde6c0
--- /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-2.5.html b/layout/reftests/forms/input/text/line-height-2.5.html
new file mode 100644
index 0000000000..d04be79e72
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-2.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 2.5 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/pseudo-class-lock-ref.html b/layout/reftests/forms/input/text/pseudo-class-lock-ref.html
new file mode 100644
index 0000000000..3811045777
--- /dev/null
+++ b/layout/reftests/forms/input/text/pseudo-class-lock-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=text disabled>
diff --git a/layout/reftests/forms/input/text/pseudo-class-lock.html b/layout/reftests/forms/input/text/pseudo-class-lock.html
new file mode 100644
index 0000000000..d9196ae3a2
--- /dev/null
+++ b/layout/reftests/forms/input/text/pseudo-class-lock.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<input type=text>
+<script>
+ SpecialPowers.wrap(window).InspectorUtils.addPseudoClassLock(document.querySelector("input"), ":disabled", true);
+</script>
diff --git a/layout/reftests/forms/input/text/reftest.list b/layout/reftests/forms/input/text/reftest.list
new file mode 100644
index 0000000000..b6217d46bc
--- /dev/null
+++ b/layout/reftests/forms/input/text/reftest.list
@@ -0,0 +1,25 @@
+== bounds-1.html bounds-1-ref.html
+fuzzy(0-65,0-3) == size-1.html size-1-ref.html
+fuzzy-if(winWidget,0-36,0-1) == size-2.html size-2-ref.html
+== baseline-1.html baseline-1-ref.html
+== chrome://reftest/content/forms/input/text/centering-1.xhtml chrome://reftest/content/forms/input/text/centering-1-ref.xhtml
+== chrome://reftest/content/forms/input/text/dynamic-height-1.xhtml chrome://reftest/content/forms/input/text/dynamic-height-1-ref.xhtml
+fuzzy(0-1,0-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-2.5.html line-height-1.0.html
+== shadow-rules.html shadow-rules-ref.html
+!= height-small-font.html height-small-font-notref.html
+
+# Autofill tests
+== autofill-blank.html autofill-preview-blank.html
+!= autofill.html autofill-blank.html
+!= autofill-preview.html autofill-preview-blank.html
+!= autofill.html autofill-preview.html
+== autofill-prefilled-value.html autofill-preview.html
+== autofill-preview-line-height.html autofill-line-height.html
+
+== pseudo-class-lock.html pseudo-class-lock-ref.html
+
+needs-focus == focus-on-anchor.html#anchor focus-on-anchor-ref.html
+needs-focus == select-overflow.html select-overflow-ref.html
diff --git a/layout/reftests/forms/input/text/select-overflow-ref.html b/layout/reftests/forms/input/text/select-overflow-ref.html
new file mode 100644
index 0000000000..f36028b59a
--- /dev/null
+++ b/layout/reftests/forms/input/text/select-overflow-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<script>
+function selectEnd() {
+ e = document.getElementById('e');
+ // Just get to the end
+ e.scrollLeft = e.scrollWidth;
+ window.requestAnimationFrame(() => {
+ document.documentElement.removeAttribute("class");
+ });
+}
+</script>
+<body onload="selectEnd();">
+<input
+ id="e"
+ style="padding: 100px; width: 200px;"
+ type="text"
+ value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaab">
diff --git a/layout/reftests/forms/input/text/select-overflow.html b/layout/reftests/forms/input/text/select-overflow.html
new file mode 100644
index 0000000000..abe2c62add
--- /dev/null
+++ b/layout/reftests/forms/input/text/select-overflow.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<script>
+function selectEnd() {
+ e = document.getElementById('e');
+ // Make sure we are at the beginning
+ e.scrollLeft = 0;
+ e.setSelectionRange(e.value.length, e.value.length);
+ // Focusing scrolls to where the cursor is
+ e.focus();
+ window.requestAnimationFrame(() => {
+ // Now take the cursor out of equation
+ e.blur();
+ window.requestAnimationFrame(() => {
+ document.documentElement.removeAttribute("class");
+ });
+ });
+}
+</script>
+<body onload="selectEnd();">
+<input
+ id="e"
+ style="padding: 100px; width: 200px;"
+ type="text"
+ value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaab">
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 0000000000..added237cf
--- /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 0000000000..eba0c38244
--- /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/shadow-rules-ref.html b/layout/reftests/forms/input/text/shadow-rules-ref.html
new file mode 100644
index 0000000000..edc6813db3
--- /dev/null
+++ b/layout/reftests/forms/input/text/shadow-rules-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<div id="host"></div>
+<script>
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <input type="text" value="Should not be red">
+ `;
+</script>
diff --git a/layout/reftests/forms/input/text/shadow-rules.html b/layout/reftests/forms/input/text/shadow-rules.html
new file mode 100644
index 0000000000..906472ea5a
--- /dev/null
+++ b/layout/reftests/forms/input/text/shadow-rules.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<div id="host"></div>
+<script>
+ host.attachShadow({ mode: "open" }).innerHTML = `
+ <style>
+ input > *|* { color: red !important; }
+ </style>
+ <input type="text" value="Should not be red">
+ `;
+</script>
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 0000000000..c9a4803585
--- /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 0000000000..e0390261d5
--- /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 0000000000..94512260b7
--- /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 0000000000..7353238f76
--- /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 0000000000..a2ce658b46
--- /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 0000000000..58302d278f
--- /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 0000000000..b9f13924a6
--- /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 0000000000..07e5eee7e6
--- /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.list b/layout/reftests/forms/input/url/reftest.list
new file mode 100644
index 0000000000..dcca7a3cde
--- /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
diff --git a/layout/reftests/forms/legend/1273433-ref.html b/layout/reftests/forms/legend/1273433-ref.html
new file mode 100644
index 0000000000..6c28a9f0c8
--- /dev/null
+++ b/layout/reftests/forms/legend/1273433-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1273433</title>
+ <style type="text/css">
+
+html,body {
+ color:black; background-color:white; font-size:12px; padding:0; margin:0;
+}
+
+fieldset { border: 1px solid black; }
+.v { writing-mode: vertical-lr; height:300px; float:left; }
+legend { width: 100px; border:1px solid blue; }
+.v legend, .rl legend { width: auto; height: 100px; }
+.rtl { direction:rtl; }
+.ltr { direction:ltr; }
+
+ </style>
+</head>
+<body>
+
+<fieldset align="left"><legend>(unset)</legend></fieldset>
+<fieldset><legend align="left">left</legend></fieldset>
+<fieldset class="rtl"><legend style="text-align:left">right</legend></fieldset>
+
+<fieldset><legend align="right" style="text-align:right">(unset)</legend><div class=rtl>RTL</div></fieldset>
+<fieldset><legend align="left" style="text-align:right">left</legend><div class=rtl>RTL</div></fieldset>
+<fieldset><legend align="right" style="text-align:right">right</legend><div class=rtl>RTL</div></fieldset>
+
+<fieldset><legend>left</legend><div class=rtl>RTL</div></fieldset>
+<fieldset><legend align="right" style="text-align:left">right</legend><div class=rtl>RTL</div></fieldset>
+
+<fieldset><legend align="left">bottom</legend></fieldset>
+<fieldset><legend align="left">top</legend></fieldset>
+
+<fieldset class="v"><legend align="left">(unset)</legend></fieldset>
+<fieldset class="v"><legend align="left">left</legend></fieldset>
+<fieldset class="v rtl"><legend style="text-align:left">right</legend></fieldset>
+
+<fieldset class="v"><legend align="right" style="text-align:right">(unset)</legend><div class=rtl>RTL</div></fieldset>
+<fieldset class="v"><legend align="left" style="text-align:right">left</legend><div class=rtl>RTL</div></fieldset>
+<fieldset class="v"><legend align="right" style="text-align:right">right</legend><div class=rtl>RTL</div></fieldset>
+
+<fieldset class="v"><legend>left</legend><div class=rtl>RTL</div></fieldset>
+<fieldset class="v"><legend align="right" style="text-align:left">right</legend><div class=rtl>RTL</div></fieldset>
+
+<fieldset class="v"><legend align="left">bottom</legend></fieldset>
+<fieldset class="v"><legend align="left">top</legend></fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/1273433.html b/layout/reftests/forms/legend/1273433.html
new file mode 100644
index 0000000000..beb1b09070
--- /dev/null
+++ b/layout/reftests/forms/legend/1273433.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1273433</title>
+ <style type="text/css">
+
+html,body {
+ color:black; background-color:white; font-size:12px; padding:0; margin:0;
+}
+
+fieldset { border: 1px solid black; }
+.v { writing-mode: vertical-lr; height:300px; float:left; }
+legend { width: 100px; border:1px solid blue; }
+.v legend, .rl legend { width: auto; height: 100px; }
+.rtl { direction:rtl; }
+.ltr { direction:ltr; }
+
+ </style>
+</head>
+<body>
+
+<fieldset><legend>(unset)</legend></fieldset>
+<fieldset><legend align="left">left</legend></fieldset>
+<fieldset><legend align="right">right</legend></fieldset>
+
+<fieldset class="rtl"><legend>(unset)</legend>RTL</fieldset>
+<fieldset class="rtl"><legend align="left">left</legend>RTL</fieldset>
+<fieldset class="rtl"><legend align="right">right</legend>RTL</fieldset>
+
+<fieldset class="rtl"><legend class="ltr" align="left">left</legend>RTL</fieldset>
+<fieldset class="rtl"><legend class="ltr" align="right">right</legend>RTL</fieldset>
+
+<fieldset><legend align="bottom">bottom</legend></fieldset>
+<fieldset><legend align="top">top</legend></fieldset>
+
+<fieldset class="v"><legend>(unset)</legend></fieldset>
+<fieldset class="v"><legend align="left">left</legend></fieldset>
+<fieldset class="v"><legend align="right">right</legend></fieldset>
+
+<fieldset class="v rtl"><legend>(unset)</legend>RTL</fieldset>
+<fieldset class="v rtl"><legend align="left">left</legend>RTL</fieldset>
+<fieldset class="v rtl"><legend align="right">right</legend>RTL</fieldset>
+
+<fieldset class="v rtl"><legend class="ltr" align="left">left</legend>RTL</fieldset>
+<fieldset class="v rtl"><legend class="ltr" align="right">right</legend>RTL</fieldset>
+
+<fieldset class="v"><legend align="bottom">bottom</legend></fieldset>
+<fieldset class="v"><legend align="top">top</legend></fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/1339287-ref.html b/layout/reftests/forms/legend/1339287-ref.html
new file mode 100644
index 0000000000..8dea047bbd
--- /dev/null
+++ b/layout/reftests/forms/legend/1339287-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1339287</title>
+ <style type="text/css">
+
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+fieldset { border:1px solid black; } /* solid border is less likely to cause AA issues */
+
+ </style>
+</head>
+<body>
+
+ <fieldset>
+ <legend style="display:inline-flex">
+ Headline Instructions
+ </legend>
+ </fieldset>
+
+ <fieldset>
+ <legend style="display:inline-grid">
+ Headline Instructions
+ </legend>
+ </fieldset>
+
+ <fieldset>
+ <legend style="display:flex">
+ Headline Instructions
+ </legend>
+ </fieldset>
+
+ <fieldset>
+ <legend style="display:grid">
+ Headline Instructions
+ </legend>
+ </fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/1339287.html b/layout/reftests/forms/legend/1339287.html
new file mode 100644
index 0000000000..482663f79f
--- /dev/null
+++ b/layout/reftests/forms/legend/1339287.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase for bug 1339287</title>
+ <style type="text/css">
+
+html,body {
+ color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+fieldset { border:1px solid black; } /* solid border is less likely to cause AA issues */
+
+ </style>
+</head>
+<body>
+
+ <fieldset>
+ <legend style="display:inline-flex">
+ Headline
+ <span>
+ Instructions
+ </span>
+ </legend>
+ </fieldset>
+
+ <fieldset>
+ <legend style="display:inline-grid">
+ Headline
+ <span>
+ Instructions
+ </span>
+ </legend>
+ </fieldset>
+
+ <fieldset>
+ <legend style="display:flex">
+ Headline
+ <span>
+ Instructions
+ </span>
+ </legend>
+ </fieldset>
+
+ <fieldset>
+ <legend style="display:grid">
+ Headline
+ <span>
+ Instructions
+ </span>
+ </legend>
+ </fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/legend-padding-1-ref.html b/layout/reftests/forms/legend/legend-padding-1-ref.html
new file mode 100644
index 0000000000..950d8d1833
--- /dev/null
+++ b/layout/reftests/forms/legend/legend-padding-1-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Reference for bug 1483499</title>
+ <style>
+ legend, .legendRef {
+ /* Here in the reference case, we explicitly specify padding, and we also
+ use a custom-styled div as the reference case for any legend element
+ that is not directly snapped into a fieldset border. */
+ background: yellow;
+ border: 1px solid brown;
+ padding: 0px 2px;
+ }
+ </style>
+</head>
+<body>
+<!-- Test: legend default styling shouldn't be affected
+ by presence of a display:contents wrapper: -->
+<fieldset>
+ <legend>DisplayContentsWrapper</legend>
+</fieldset>
+<br>
+
+<!-- Test: legend should get the same 2px of inline-axis padding, even
+ if it's not inside of a fieldset at all. -->
+<div class="legendRef">JustALegend</div>
+<br>
+
+<div class="legendRef">
+ <div class="legendRef">NestedLegend</div>
+</div>
+<br>
+
+<fieldset>
+ <legend>
+ <div class="legendRef">
+ <div class="legendRef">NestedLegendInFieldset</div>
+ </div>
+ </legend>
+</fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/legend-padding-1.html b/layout/reftests/forms/legend/legend-padding-1.html
new file mode 100644
index 0000000000..9535d3dd93
--- /dev/null
+++ b/layout/reftests/forms/legend/legend-padding-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Testcase for bug 1483499</title>
+ <style>
+ legend {
+ background: yellow;
+ border: 1px solid brown;
+ }
+ </style>
+</head>
+<body>
+<!-- Test: legend default styling shouldn't be affected
+ by presence of a display:contents wrapper: -->
+<fieldset>
+ <div style="display: contents">
+ <legend>DisplayContentsWrapper</legend>
+ </div>
+</fieldset>
+<br>
+
+<!-- Test: legend should get the same 2px of inline-axis padding, even
+ if it's not inside of a fieldset at all. -->
+<legend>JustALegend</legend>
+<br>
+
+<!-- ...and if it's nested, each nesting level will add 2px of padding. -->
+<legend>
+ <legend>NestedLegend</legend>
+</legend>
+<br>
+
+<fieldset>
+ <legend>
+ <legend>
+ <legend>NestedLegendInFieldset</legend>
+ </legend>
+ </legend>
+</fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/legend-padding-2-ref.html b/layout/reftests/forms/legend/legend-padding-2-ref.html
new file mode 100644
index 0000000000..4050ab7c26
--- /dev/null
+++ b/layout/reftests/forms/legend/legend-padding-2-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Reference for bug 1483499</title>
+ <style>
+ html { writing-mode: vertical-rl }
+ legend, .legendRef {
+ /* Here in the reference case, we explicitly specify padding, and we also
+ use a custom-styled div as the reference case for any legend element
+ that is not directly snapped into a fieldset border. */
+ background: yellow;
+ border: 1px solid brown;
+ padding: 2px 0px;
+ }
+ </style>
+</head>
+<body>
+<!-- Test: legend default styling shouldn't be affected
+ by presence of a display:contents wrapper: -->
+<fieldset>
+ <legend>DisplayContentsWrapper</legend>
+</fieldset>
+<br>
+
+<!-- Test: legend should get the same 2px of inline-axis padding, even
+ if it's not inside of a fieldset at all. -->
+<div class="legendRef">JustALegend</div>
+<br>
+
+<div class="legendRef">
+ <div class="legendRef">NestedLegend</div>
+</div>
+<br>
+
+<fieldset>
+ <legend>
+ <div class="legendRef">
+ <div class="legendRef">NestedLegendInFieldset</div>
+ </div>
+ </legend>
+</fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/legend-padding-2.html b/layout/reftests/forms/legend/legend-padding-2.html
new file mode 100644
index 0000000000..52f7bcafcf
--- /dev/null
+++ b/layout/reftests/forms/legend/legend-padding-2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Testcase for bug 1483499</title>
+ <style>
+ html { writing-mode: vertical-rl }
+ legend {
+ background: yellow;
+ border: 1px solid brown;
+ }
+ </style>
+</head>
+<body>
+<!-- Test: legend default styling shouldn't be affected
+ by presence of a display:contents wrapper: -->
+<fieldset>
+ <div style="display: contents">
+ <legend>DisplayContentsWrapper</legend>
+ </div>
+</fieldset>
+<br>
+
+<!-- Test: legend should get the same 2px of inline-axis padding, even
+ if it's not inside of a fieldset at all. -->
+<legend>JustALegend</legend>
+<br>
+
+<!-- ...and if it's nested, each nesting level will add 2px of padding. -->
+<legend>
+ <legend>NestedLegend</legend>
+</legend>
+<br>
+
+<fieldset>
+ <legend>
+ <legend>
+ <legend>NestedLegendInFieldset</legend>
+ </legend>
+ </legend>
+</fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/legend-ref.html b/layout/reftests/forms/legend/legend-ref.html
new file mode 100644
index 0000000000..3684841714
--- /dev/null
+++ b/layout/reftests/forms/legend/legend-ref.html
@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html><head>
+ <title>Reference case for bug 740743</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+fieldset { padding: 2px; }
+legend { padding: 0; }
+span {
+ background: lime;
+ display: block;
+ padding-left: 2px;
+ padding-right: 2px;
+}
+
+.s10 { width:10px; height:10px; }
+.h10 { height:10px; }
+.w50 { width:50px; }
+.hidden { overflow:hidden; }
+.scroll { overflow:scroll; }
+.auto { overflow:auto; }
+
+.o { text-overflow: ellipsis; }
+
+#inline span { display:inline; }
+#inline-block span { display:inline-block; }
+
+ </style>
+</head>
+<body>
+
+<fieldset><legend><span class="hidden s10"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="scroll s10">Legend Test</span></legend></fieldset>
+<fieldset><legend><span class="auto s10">Legend Test</span></legend></fieldset>
+<fieldset><legend><span class="hidden w50"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="scroll w50">Legend Test</span></legend></fieldset>
+<fieldset><legend><span class="auto w50"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="hidden">Legend Test</span></legend></fieldset>
+<fieldset><legend><span class="auto"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="auto"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="auto"><b>Legend Test</b></span></legend></fieldset>
+
+<fieldset><legend><span class="hidden w50 o"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="hidden w50 o">Test Legend</span></legend></fieldset>
+<fieldset><legend><span class="hidden o">Test Legend</span></legend></fieldset>
+<fieldset><legend><span class="auto w50 o"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend align="right"><span class="hidden w50 o">Test Legend</span></legend></fieldset>
+<fieldset><legend align="center"><span class="hidden w50 o">Test Legend</span></legend></fieldset>
+
+<div id="inline">
+<span class="hidden s10"><b>Legend Test</b></span>
+<span class="scroll s10">Legend Test</span>
+<span class="auto s10">Legend Test</span>
+<span class="hidden w50"><b>Legend Test</b></span>
+<span class="scroll w50">Legend Test</span>
+<span class="auto w50"><b>Legend Test</b></span>
+<span class="hidden">Legend Test</span>
+<span class="auto"><b>Legend Test</b></span>
+
+<span class="hidden w50 o"><b>Legend Test</b></span>
+<span class="hidden w50 o">Test Legend</span>
+<span class="hidden o">Test Legend</span>
+<span class="auto w50 o"><b>Legend Test</b></span>
+<span class="hidden w50 o">Test Legend</span>
+<span class="hidden w50 o">Test Legend</span>
+</div>
+
+<div id="inline-block">
+<span class="hidden s10"><b>Legend Test</b></span>
+<span class="scroll s10">Legend Test</span>
+<span class="auto s10">Legend Test</span>
+<span class="hidden w50"><b>Legend Test</b></span>
+<span class="scroll w50">Legend Test</span>
+<span class="auto w50"><b>Legend Test</b></span>
+<span class="hidden">Legend Test</span>
+<span class="auto"><b>Legend Test</b></span>
+<span class="auto"><b>Legend Test</b></span>
+
+<span class="hidden w50 o"><b>Legend Test</b></span>
+<span class="hidden w50 o">Test Legend</span>
+<span class="hidden o">Test Legend</span>
+<span class="auto w50 o"><b>Legend Test</b></span>
+<span class="hidden w50 o">Test Legend</span>
+<span class="hidden w50 o">Test Legend</span>
+</div>
+
+<span class="auto w50"><b>Legend Test</b></span>
+<span><b>Legend Test</b></span>
+<span><b>Legend Test</b></span>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/legend.html b/layout/reftests/forms/legend/legend.html
new file mode 100644
index 0000000000..9d05fbe6af
--- /dev/null
+++ b/layout/reftests/forms/legend/legend.html
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html><head>
+ <title>Testcase for bug 740743</title>
+ <style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+fieldset { padding: 2px; }
+legend { background: lime; }
+.s10 { width:10px; height:10px; }
+.h10 { height:10px; }
+.w50 { width:50px; }
+.hidden { overflow:hidden; }
+.scroll { overflow:scroll; }
+.auto { overflow:auto; }
+
+.o { text-overflow: ellipsis; }
+
+#inline legend { display:inline; }
+#inline-block legend { display:inline-block; }
+ </style>
+</head>
+<body>
+
+<fieldset><legend class="hidden s10"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="scroll s10">Legend Test</legend></fieldset>
+<fieldset><legend class="auto s10">Legend Test</legend></fieldset>
+<fieldset><legend class="hidden w50"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="scroll w50">Legend Test</legend></fieldset>
+<fieldset><legend class="auto w50"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="hidden">Legend Test</legend></fieldset>
+<fieldset><legend class="auto"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="auto" style="width:auto"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend style="width:auto"><b>Legend Test</b></legend></fieldset>
+
+<fieldset><legend class="hidden w50 o"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="hidden w50 o">Test Legend</legend></fieldset>
+<fieldset><legend class="hidden o">Test Legend</legend></fieldset>
+<fieldset><legend class="auto w50 o"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="hidden w50 o" align="right">Test Legend</legend></fieldset>
+<fieldset><legend class="hidden w50 o" align="center">Test Legend</legend></fieldset>
+
+<div id="inline">
+<legend class="hidden s10"><b>Legend Test</b></legend>
+<legend class="scroll s10">Legend Test</legend>
+<legend class="auto s10">Legend Test</legend>
+<legend class="hidden w50"><b>Legend Test</b></legend>
+<legend class="scroll w50">Legend Test</legend>
+<legend class="auto w50"><b>Legend Test</b></legend>
+<legend class="hidden">Legend Test</legend>
+<legend class="auto"><b>Legend Test</b></legend>
+
+<legend class="hidden w50 o"><b>Legend Test</b></legend>
+<legend class="hidden w50 o">Test Legend</legend>
+<legend class="hidden o">Test Legend</legend>
+<legend class="auto w50 o"><b>Legend Test</b></legend>
+<legend class="hidden w50 o" align="right">Test Legend</legend>
+<legend class="hidden w50 o" align="center">Test Legend</legend>
+</div>
+
+<div id="inline-block">
+<legend class="hidden s10"><b>Legend Test</b></legend>
+<legend class="scroll s10">Legend Test</legend>
+<legend class="auto s10">Legend Test</legend>
+<legend class="hidden w50"><b>Legend Test</b></legend>
+<legend class="scroll w50">Legend Test</legend>
+<legend class="auto w50"><b>Legend Test</b></legend>
+<legend class="hidden">Legend Test</legend>
+<legend class="auto"><b>Legend Test</b></legend>
+<legend class="auto" style="width:auto"><b>Legend Test</b></legend>
+
+<legend class="hidden w50 o"><b>Legend Test</b></legend>
+<legend class="hidden w50 o">Test Legend</legend>
+<legend class="hidden o">Test Legend</legend>
+<legend class="auto w50 o"><b>Legend Test</b></legend>
+<legend class="hidden w50 o" align="right">Test Legend</legend>
+<legend class="hidden w50 o" align="center">Test Legend</legend>
+</div>
+
+<legend class="auto w50"><b>Legend Test</b></legend>
+<legend class="auto" zstyle="width:auto"><b>Legend Test</b></legend>
+<legend style="width:auto"><b>Legend Test</b></legend>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/reftest.list b/layout/reftests/forms/legend/reftest.list
new file mode 100644
index 0000000000..4b96bf0576
--- /dev/null
+++ b/layout/reftests/forms/legend/reftest.list
@@ -0,0 +1,5 @@
+== legend.html legend-ref.html # Bug 1392106
+== legend-padding-1.html legend-padding-1-ref.html
+== legend-padding-2.html legend-padding-2-ref.html
+fuzzy-if(Android,0-255,0-41) == 1273433.html 1273433-ref.html
+fails == 1339287.html 1339287-ref.html # bug 1383868
diff --git a/layout/reftests/forms/legend/shadow-dom-ref.html b/layout/reftests/forms/legend/shadow-dom-ref.html
new file mode 100644
index 0000000000..472d33acfd
--- /dev/null
+++ b/layout/reftests/forms/legend/shadow-dom-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+ <head>
+ <title>Test LEGEND placed into FIELDSET shadow DOM</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140579">
+<style>
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+.inline { display:inline; }
+z,.b { color:blue; }
+</style>
+ </head>
+ <body>
+ <fieldset id="host1"><legend>1</legend>a c</fieldset>
+ <fieldset id="host2"><legend>2</legend>a c</fieldset>
+ <fieldset id="host3"><legend>3</legend>a c</fieldset>
+ <fieldset id="host4"><legend>4</legend>a c</fieldset>
+ <fieldset id="host5"><legend>5</legend>a c</fieldset>
+ <fieldset id="host6"><legend class="b">6</legend>a c</fieldset>
+ <fieldset id="host7"><legend>7</legend>a <legend class="inline">L</legend> B</fieldset>
+ <fieldset id="host8"><legend>a 8</legend>A <legend class="inline">L c</legend> B</fieldset>
+ <fieldset id="host9"><legend>a 9</legend>A <legend class="inline p0">a L2 c</legend><z>a<legend>L3</legend>c</z> B</fieldset>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-ref.html
new file mode 100644
index 0000000000..c9576fc40b
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-ref.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) > .meter-bar { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) > .meter-bar { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) > .meter-bar { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) > .meter-bar { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) > .meter-bar { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) > .meter-bar { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) > .meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) > .meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) > .meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) > .meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) > .meter-bar { margin: 200px; padding: 0px; }
+ body > div:nth-child(16) > .meter-bar { margin: 0px; padding: 200px; }
+ /* 15 - 18 should have 100% width, no need to specify. */
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html
new file mode 100644
index 0000000000..ba9b6c8f35
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(2) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(3) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(4) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ /* 15 - 18 should have 100% width, no need to specify. */
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-rtl.html b/layout/reftests/forms/meter/bar-pseudo-element-rtl.html
new file mode 100644
index 0000000000..22f5462dfd
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-rtl.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > meter:nth-child(1)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > meter:nth-child(2)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > meter:nth-child(3)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > meter:nth-child(4)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > meter:nth-child(5)::-moz-meter-bar { width: 1000px; }
+ body > meter:nth-child(6)::-moz-meter-bar { width: 10px; }
+ body > meter:nth-child(7)::-moz-meter-bar { width: 10%; }
+ body > meter:nth-child(8)::-moz-meter-bar { width: 200%; }
+ </style>
+ <body dir='rtl'>
+ <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <!-- Those will be used to change width. -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html
new file mode 100644
index 0000000000..ff5227a9d9
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ .meter-element { margin: 10px; }
+ body > div:nth-child(1) > .meter-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(2) > .meter-bar { width: calc(100% + 8px); }
+ body > div:nth-child(3) > .meter-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px);
+ width: calc(100% + 8px); }
+ body > div:nth-child(4) > .meter-bar { position: relative; top: 10px; height: calc(100% - 10px); }
+ body > div:nth-child(5) > .meter-bar { }
+ body > div:nth-child(6) > .meter-bar { height: calc(100% - 10px); }
+ body > div:nth-child(7) > .meter-bar { position: relative; left: 10px; }
+ body > div:nth-child(8) > .meter-bar { }
+ body > div:nth-child(9) > .meter-bar { width: calc(100% + 10px); }
+ body > div:nth-child(10) > .meter-bar { }
+ body > div:nth-child(11) > .meter-bar { width: calc(100% + 10px); }
+ /* 12 - 15 should have 100% width, no need to specify. */
+ body > div:nth-child(16) > .meter-bar { position: relative; top: 64px; left: 64px;
+ height: calc(100% + 32px + 16px);
+ width: calc(100% + 128px + 16px - 1em); }
+ </style>
+ <body>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html
new file mode 100644
index 0000000000..651747f99c
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ .meter-element { margin: 10px; }
+ body > div:nth-child(1) > .meter-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(2) > .meter-bar { position: relative; left: 8px;
+ width: calc(100% + 8px); }
+ body > div:nth-child(3) > .meter-bar { position: relative; top: 4px; left: 12px;
+ height: calc(100% - 8px);
+ width: calc(100% + 8px); }
+ body > div:nth-child(4) > .meter-bar { position: relative; top: 10px; height: calc(100% - 10px); }
+ body > div:nth-child(5) > .meter-bar { }
+ body > div:nth-child(6) > .meter-bar { height: calc(100% - 10px); }
+ body > div:nth-child(7) > .meter-bar { position: relative; left: 10px; }
+ body > div:nth-child(8) > .meter-bar { }
+ body > div:nth-child(9) > .meter-bar { position: relative; left: 10px;
+ width: calc(100% + 10px); }
+ body > div:nth-child(10) > .meter-bar { }
+ body > div:nth-child(11) > .meter-bar { position: relative; left: 10px;
+ width: calc(100% + 10px); }
+ /* 12 - 15 should have 100% width, no need to specify. */
+ body > div:nth-child(16) > .meter-bar { position: relative; top: 64px; left: 192px;
+ height: calc(100% + 64px - 1em);
+ width: calc(100% + 128px); }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html
new file mode 100644
index 0000000000..1a1752baf9
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ margin: 10px;
+ -moz-orient: vertical;
+ overflow: visible;
+ }
+ body > meter:nth-child(1)::-moz-meter-bar { margin: 4px; padding: 0px; }
+ body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 4px; }
+ body > meter:nth-child(3)::-moz-meter-bar { margin: 4px; padding: 4px; }
+ body > meter:nth-child(4)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > meter:nth-child(5)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > meter:nth-child(6)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > meter:nth-child(7)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > meter:nth-child(8)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > meter:nth-child(9)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > meter:nth-child(10)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > meter:nth-child(12)::-moz-meter-bar { height: 1000px; }
+ body > meter:nth-child(13)::-moz-meter-bar { height: 10px; }
+ body > meter:nth-child(14)::-moz-meter-bar { height: 10%; }
+ body > meter:nth-child(15)::-moz-meter-bar { height: 200%; }
+ body > meter:nth-child(16)::-moz-meter-bar { margin: 64px; padding: 64px; }
+ </style>
+ <body dir='rtl'>
+ <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <!-- Those will be used to change width. -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical.html
new file mode 100644
index 0000000000..509dbb78da
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ margin: 10px;
+ -moz-orient: vertical;
+ overflow: visible;
+ }
+ body > meter:nth-child(1)::-moz-meter-bar { margin: 4px; padding: 0px; }
+ body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 4px; }
+ body > meter:nth-child(3)::-moz-meter-bar { margin: 4px; padding: 4px; }
+ body > meter:nth-child(4)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > meter:nth-child(5)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > meter:nth-child(6)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > meter:nth-child(7)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > meter:nth-child(8)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > meter:nth-child(9)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > meter:nth-child(10)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > meter:nth-child(12)::-moz-meter-bar { height: 1000px; }
+ body > meter:nth-child(13)::-moz-meter-bar { height: 10px; }
+ body > meter:nth-child(14)::-moz-meter-bar { height: 10%; }
+ body > meter:nth-child(15)::-moz-meter-bar { height: 200%; }
+ body > meter:nth-child(16)::-moz-meter-bar { margin: 64px; padding: 64px; }
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <!-- Those will be used to change width. -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element.html b/layout/reftests/forms/meter/bar-pseudo-element.html
new file mode 100644
index 0000000000..9fb69bc185
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ /* override the default clipping of the meter bar from forms.css */
+ meter { overflow: visible; }
+ body > meter:nth-child(1)::-moz-meter-bar { margin: 10px; padding: 0px; }
+ body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 10px; }
+ body > meter:nth-child(3)::-moz-meter-bar { margin: 10px; padding: 10px; }
+ body > meter:nth-child(4)::-moz-meter-bar { margin: 5px; padding: 5px; }
+ body > meter:nth-child(5)::-moz-meter-bar { margin: 50px; padding: 50px; }
+ body > meter:nth-child(6)::-moz-meter-bar { margin: 100px; padding: 100px; }
+ body > meter:nth-child(7)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > meter:nth-child(8)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > meter:nth-child(9)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > meter:nth-child(10)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > meter:nth-child(12)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > meter:nth-child(13)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > meter:nth-child(14)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > meter:nth-child(15)::-moz-meter-bar { margin: 200px; padding: 0px; }
+ body > meter:nth-child(16)::-moz-meter-bar { margin: 0px; padding: 200px; }
+ body > meter:nth-child(17)::-moz-meter-bar { width: 1000px; }
+ body > meter:nth-child(18)::-moz-meter-bar { width: 10px; }
+ body > meter:nth-child(19)::-moz-meter-bar { width: 10%; }
+ body > meter:nth-child(20)::-moz-meter-bar { width: 200%; }
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <!-- Those will be used to change width. -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/block-invalidate-ref.html b/layout/reftests/forms/meter/block-invalidate-ref.html
new file mode 100644
index 0000000000..3208c43ef6
--- /dev/null
+++ b/layout/reftests/forms/meter/block-invalidate-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter { display: block; }
+ </style>
+ <body>
+ <meter value='0.5'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/block-invalidate.html b/layout/reftests/forms/meter/block-invalidate.html
new file mode 100644
index 0000000000..abc98f7f7a
--- /dev/null
+++ b/layout/reftests/forms/meter/block-invalidate.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter { display: block; }
+ </style>
+ <script>
+ function loadHandler() {
+ setTimeout(function() {
+ var p = document.getElementsByTagName('meter')[0];
+ p.value = '0.5';
+ document.documentElement.className = '';
+ }, 0);
+ }
+ </script>
+ <body onload="loadHandler();">
+ <meter value='0'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html b/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html
new file mode 100644
index 0000000000..03a1937fa5
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-sub-optimum { width: 10%; }
+ div:nth-child(2) > .meter-sub-sub-optimum { width: 10%; }
+ div:nth-child(3) > .meter-sub-optimum { width: 40%; }
+ div:nth-child(4) > .meter-optimum { width: 10%; }
+ div:nth-child(5) > .meter-optimum { width: 0%; }
+ div:nth-child(6) > .meter-sub-optimum { width: 20%; }
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style-dyn.html b/layout/reftests/forms/meter/default-style/default-style-dyn.html
new file mode 100644
index 0000000000..bed08d6511
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <meter id='m1' value="0.1" low="0" optimum="0.5" high="1" min="0" max="1"></meter>
+ <meter id='m2' value="0.1" low="0.3" optimum="0.7" high="1" min="0" max="1"></meter>
+ <meter id='m3' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+ <meter id='m4' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+ <meter id='m5' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+ <meter id='m6' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+
+ <script>
+
+ var m = document.getElementById('m1');
+ m.setAttribute("low",0.3);
+
+ m = document.getElementById('m2');
+ m.setAttribute("high",0.5);
+
+ m = document.getElementById('m3');
+ m.setAttribute("value",0.4);
+
+ m = document.getElementById('m4');
+ m.setAttribute("optimum",0.1);
+
+ m = document.getElementById('m5');
+ m.setAttribute("min",0.9);
+
+ m = document.getElementById('m6');
+ m.setAttribute("max",0.5);
+
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style-ref.html b/layout/reftests/forms/meter/default-style/default-style-ref.html
new file mode 100644
index 0000000000..7cba9ab962
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style-ref.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ /* optimum = 0.0 */
+ div:nth-child(1) > .meter-optimum { width: 0%; }
+ div:nth-child(2) > .meter-optimum { width: 10%; }
+ div:nth-child(3) > .meter-sub-optimum { width: 30%; }
+ div:nth-child(4) > .meter-sub-optimum { width: 50%; }
+ div:nth-child(5) > .meter-sub-optimum { width: 70%; }
+ div:nth-child(6) > .meter-sub-sub-optimum { width: 80%; }
+ div:nth-child(7) > .meter-sub-sub-optimum { width: 100%; }
+
+ /* optimum = 0.1 */
+ div:nth-child(8) > .meter-optimum { width: 0%; }
+ div:nth-child(9) > .meter-optimum { width: 10%; }
+ div:nth-child(10) > .meter-sub-optimum { width: 30%; }
+ div:nth-child(11) > .meter-sub-optimum { width: 50%; }
+ div:nth-child(12) > .meter-sub-optimum { width: 70%; }
+ div:nth-child(13) > .meter-sub-sub-optimum { width: 80%; }
+ div:nth-child(14) > .meter-sub-sub-optimum { width: 100%; }
+
+ /* optimum = 0.3 */
+ div:nth-child(15) > .meter-sub-optimum { width: 0%; }
+ div:nth-child(16) > .meter-sub-optimum { width: 10%; }
+ div:nth-child(17) > .meter-optimum { width: 30%; }
+ div:nth-child(18) > .meter-optimum { width: 50%; }
+ div:nth-child(19) > .meter-optimum { width: 70%; }
+ div:nth-child(20) > .meter-sub-optimum { width: 80%; }
+ div:nth-child(21) > .meter-sub-optimum { width: 100%; }
+
+ /* optimum = 0.5 */
+ div:nth-child(22) > .meter-sub-optimum { width: 0%; }
+ div:nth-child(23) > .meter-sub-optimum { width: 10%; }
+ div:nth-child(24) > .meter-optimum { width: 30%; }
+ div:nth-child(25) > .meter-optimum { width: 50%; }
+ div:nth-child(26) > .meter-optimum { width: 70%; }
+ div:nth-child(27) > .meter-sub-optimum { width: 80%; }
+ div:nth-child(28) > .meter-sub-optimum { width: 100%; }
+
+ /* optimum = 0.7 */
+ div:nth-child(29) > .meter-sub-optimum { width: 0%; }
+ div:nth-child(30) > .meter-sub-optimum { width: 10%; }
+ div:nth-child(31) > .meter-optimum { width: 30%; }
+ div:nth-child(32) > .meter-optimum { width: 50%; }
+ div:nth-child(33) > .meter-optimum { width: 70%; }
+ div:nth-child(34) > .meter-sub-optimum { width: 80%; }
+ div:nth-child(35) > .meter-sub-optimum { width: 100%; }
+
+ /* optimum = 0.8 */
+ div:nth-child(36) > .meter-sub-sub-optimum { width: 0%; }
+ div:nth-child(37) > .meter-sub-sub-optimum { width: 10%; }
+ div:nth-child(38) > .meter-sub-optimum { width: 30%; }
+ div:nth-child(39) > .meter-sub-optimum { width: 50%; }
+ div:nth-child(40) > .meter-sub-optimum { width: 70%; }
+ div:nth-child(41) > .meter-optimum { width: 80%; }
+ div:nth-child(42) > .meter-optimum { width: 100%; }
+
+ /* optimum = 1.0 */
+ div:nth-child(43) > .meter-sub-sub-optimum { width: 0%; }
+ div:nth-child(44) > .meter-sub-sub-optimum { width: 10%; }
+ div:nth-child(45) > .meter-sub-optimum { width: 30%; }
+ div:nth-child(46) > .meter-sub-optimum { width: 50%; }
+ div:nth-child(47) > .meter-sub-optimum { width: 70%; }
+ div:nth-child(48) > .meter-optimum { width: 80%; }
+ div:nth-child(49) > .meter-optimum { width: 100%; }
+ </style>
+ <body>
+ <!-- optimum = 0.0 -->
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.1 -->
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.3 -->
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.5 -->
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.7 -->
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.8 -->
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 1.0 -->
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style.html b/layout/reftests/forms/meter/default-style/default-style.html
new file mode 100644
index 0000000000..6c648c3355
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <meter value="0.0" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.0" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.1" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.3" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.5" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.7" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.8" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="1.0" high="0.7"></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/reftest.list b/layout/reftests/forms/meter/default-style/reftest.list
new file mode 100644
index 0000000000..a67d6712b6
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/reftest.list
@@ -0,0 +1,2 @@
+== default-style.html default-style-ref.html
+== default-style-dyn.html default-style-dyn-ref.html
diff --git a/layout/reftests/forms/meter/default-style/style.css b/layout/reftests/forms/meter/default-style/style.css
new file mode 100644
index 0000000000..2d42337e9a
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/style.css
@@ -0,0 +1,54 @@
+div.meter-element {
+ display: inline-block;
+ height: 1em;
+ width: 5em;
+ vertical-align: -0.2em;
+
+ background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
+}
+
+div.meter-optimum {
+ float: none ! important;
+
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ /* green. */
+ background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
+}
+
+div.meter-sub-optimum {
+ float: none ! important;
+
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ /* orange. */
+ background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
+}
+
+div.meter-sub-sub-optimum {
+ float: none ! important;
+
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ /* red. */
+ background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
+}
+
+meter, meter::-moz-meter-bar, div.meter-element, div.meter-optimum, div.meter-sub-optimum, div.meter-sub-sub-optimum {
+ -moz-appearance: none;
+}
diff --git a/layout/reftests/forms/meter/in-cells-ref.html b/layout/reftests/forms/meter/in-cells-ref.html
new file mode 100644
index 0000000000..aa81938a3d
--- /dev/null
+++ b/layout/reftests/forms/meter/in-cells-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter { width: 5em; height: 1em; }
+ meter.vertical { -moz-orient: vertical; width: 1em; height: 5em; }
+ </style>
+ <body>
+ <table>
+ <tr>
+ <td>foo</td>
+ <td><meter value='0.5'></meter></td>
+ <td>bar</td>
+ </tr>
+ <tr>
+ <td>foo</td>
+ <td><meter class='vertical' value='0.5'></meter></td>
+ <td>bar</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/in-cells.html b/layout/reftests/forms/meter/in-cells.html
new file mode 100644
index 0000000000..c62510433a
--- /dev/null
+++ b/layout/reftests/forms/meter/in-cells.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter.vertical { -moz-orient: vertical; }
+ </style>
+ <body>
+ <table>
+ <tr>
+ <td>foo</td>
+ <td><meter value='0.5'></meter></td>
+ <td>bar</td>
+ </tr>
+ <tr>
+ <td>foo</td>
+ <td><meter class='vertical' value='0.5'></meter></td>
+ <td>bar</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-ref.html b/layout/reftests/forms/meter/margin-padding-ref.html
new file mode 100644
index 0000000000..84fb9b3852
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-rtl-ref.html b/layout/reftests/forms/meter/margin-padding-rtl-ref.html
new file mode 100644
index 0000000000..579794cc9e
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-rtl.html b/layout/reftests/forms/meter/margin-padding-rtl.html
new file mode 100644
index 0000000000..d840582647
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-rtl.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter:nth-child(1) { margin: 10px; padding: 0px; }
+ meter:nth-child(2) { margin: 0px; padding: 10px; }
+ meter:nth-child(3) { margin: 10px; padding: 10px; }
+ meter:nth-child(4) { margin: 5px; padding: 5px; }
+ meter:nth-child(5) { margin: 50px; padding: 50px; }
+ meter:nth-child(6) { margin: 100px; padding: 100px; }
+ meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical-ref.html b/layout/reftests/forms/meter/margin-padding-vertical-ref.html
new file mode 100644
index 0000000000..e6de9fef13
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html b/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html
new file mode 100644
index 0000000000..6ecb2fcafd
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical-rtl.html b/layout/reftests/forms/meter/margin-padding-vertical-rtl.html
new file mode 100644
index 0000000000..55e922b07b
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical-rtl.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ -moz-orient: vertical;
+ }
+ meter:nth-child(1) { margin: 10px; padding: 0px; }
+ meter:nth-child(2) { margin: 0px; padding: 10px; }
+ meter:nth-child(3) { margin: 10px; padding: 10px; }
+ meter:nth-child(4) { margin: 5px; padding: 5px; }
+ meter:nth-child(5) { margin: 50px; padding: 50px; }
+ meter:nth-child(6) { margin: 100px; padding: 100px; }
+ meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical.html b/layout/reftests/forms/meter/margin-padding-vertical.html
new file mode 100644
index 0000000000..d25d45e286
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ -moz-orient: vertical;
+ }
+ meter:nth-child(1) { margin: 10px; padding: 0px; }
+ meter:nth-child(2) { margin: 0px; padding: 10px; }
+ meter:nth-child(3) { margin: 10px; padding: 10px; }
+ meter:nth-child(4) { margin: 5px; padding: 5px; }
+ meter:nth-child(5) { margin: 50px; padding: 50px; }
+ meter:nth-child(6) { margin: 100px; padding: 100px; }
+ meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding.html b/layout/reftests/forms/meter/margin-padding.html
new file mode 100644
index 0000000000..349813e1fd
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter:nth-child(1) { margin: 10px; padding: 0px; }
+ meter:nth-child(2) { margin: 0px; padding: 10px; }
+ meter:nth-child(3) { margin: 10px; padding: 10px; }
+ meter:nth-child(4) { margin: 5px; padding: 5px; }
+ meter:nth-child(5) { margin: 50px; padding: 50px; }
+ meter:nth-child(6) { margin: 100px; padding: 100px; }
+ meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/max-height-ref.html b/layout/reftests/forms/meter/max-height-ref.html
new file mode 100644
index 0000000000..be61638a7d
--- /dev/null
+++ b/layout/reftests/forms/meter/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ meter {
+ height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<meter>Some text</meter>
diff --git a/layout/reftests/forms/meter/max-height.html b/layout/reftests/forms/meter/max-height.html
new file mode 100644
index 0000000000..ae6115f855
--- /dev/null
+++ b/layout/reftests/forms/meter/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ meter {
+ max-height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<meter>Some text</meter>
diff --git a/layout/reftests/forms/meter/meter-orient-block.html b/layout/reftests/forms/meter/meter-orient-block.html
new file mode 100644
index 0000000000..8096473e76
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:block" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html b/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html
new file mode 100644
index 0000000000..29050d0219
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:horizontal" max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/meter/meter-orient-horizontal.html b/layout/reftests/forms/meter/meter-orient-horizontal.html
new file mode 100644
index 0000000000..762329c7f6
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:horizontal" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-orient-inline.html b/layout/reftests/forms/meter/meter-orient-inline.html
new file mode 100644
index 0000000000..a5ac5b52ba
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:inline" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-orient-vertical-rtl.html b/layout/reftests/forms/meter/meter-orient-vertical-rtl.html
new file mode 100644
index 0000000000..af83d45301
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:vertical" max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/meter/meter-orient-vertical.html b/layout/reftests/forms/meter/meter-orient-vertical.html
new file mode 100644
index 0000000000..0bcc363497
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:vertical" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-block.html b/layout/reftests/forms/meter/meter-vlr-orient-block.html
new file mode 100644
index 0000000000..500f1599d4
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html b/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html
new file mode 100644
index 0000000000..194f942d16
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-inline.html b/layout/reftests/forms/meter/meter-vlr-orient-inline.html
new file mode 100644
index 0000000000..d3ee42792b
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-vertical.html b/layout/reftests/forms/meter/meter-vlr-orient-vertical.html
new file mode 100644
index 0000000000..40e9c82344
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr.html b/layout/reftests/forms/meter/meter-vlr.html
new file mode 100644
index 0000000000..7edf4a6042
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-block.html b/layout/reftests/forms/meter/meter-vrl-orient-block.html
new file mode 100644
index 0000000000..6b136624c5
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html b/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html
new file mode 100644
index 0000000000..87f8c938dd
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-inline.html b/layout/reftests/forms/meter/meter-vrl-orient-inline.html
new file mode 100644
index 0000000000..294f823e19
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-vertical.html b/layout/reftests/forms/meter/meter-vrl-orient-vertical.html
new file mode 100644
index 0000000000..369465660c
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl.html b/layout/reftests/forms/meter/meter-vrl.html
new file mode 100644
index 0000000000..7c481b31e3
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl" max=100 value=70>
diff --git a/layout/reftests/forms/meter/reftest.list b/layout/reftests/forms/meter/reftest.list
new file mode 100644
index 0000000000..8da63340de
--- /dev/null
+++ b/layout/reftests/forms/meter/reftest.list
@@ -0,0 +1,44 @@
+fuzzy-if(Android,0-128,0-16) == values.html values-ref.html
+== values-rtl.html values-rtl-ref.html
+== margin-padding.html margin-padding-ref.html
+== margin-padding-rtl.html margin-padding-rtl-ref.html
+== bar-pseudo-element.html bar-pseudo-element-ref.html
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
+
+# vertical tests
+== values-vertical.html values-vertical-ref.html
+== values-vertical-rtl.html values-vertical-rtl-ref.html
+== margin-padding-vertical.html margin-padding-vertical-ref.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html
+== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <meter> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations-ref.html
+
+# default style
+include default-style/reftest.list
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate-ref.html
+== in-cells.html in-cells-ref.html
+== max-height.html max-height-ref.html
+== rounded-corner-clipping.html rounded-corner-clipping-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= meter-orient-vertical.html meter-orient-horizontal.html
+!= meter-orient-horizontal.html meter-orient-horizontal-rtl.html
+== meter-orient-block.html meter-orient-vertical.html
+== meter-orient-inline.html meter-orient-horizontal.html
+== meter-vlr.html meter-orient-vertical.html
+== meter-vlr-orient-block.html meter-orient-horizontal.html
+== meter-vlr-orient-inline.html meter-orient-vertical.html
+== meter-vlr-orient-horizontal.html meter-orient-horizontal.html
+== meter-vlr-orient-vertical.html meter-orient-vertical.html
+== meter-vrl.html meter-orient-vertical-rtl.html
+== meter-vrl-orient-block.html meter-orient-horizontal-rtl.html
+== meter-vrl-orient-inline.html meter-orient-vertical-rtl.html
+== meter-vrl-orient-horizontal.html meter-orient-horizontal-rtl.html
+== meter-vrl-orient-vertical.html meter-orient-vertical-rtl.html
diff --git a/layout/reftests/forms/meter/rounded-corner-clipping-ref.html b/layout/reftests/forms/meter/rounded-corner-clipping-ref.html
new file mode 100644
index 0000000000..f2e2beded3
--- /dev/null
+++ b/layout/reftests/forms/meter/rounded-corner-clipping-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+div {
+ width: 20em;
+ height: 5em;
+ border-radius: 2em;
+ border-style: solid;
+ border-width: .25em;
+ background: #eee;
+ overflow: clip;
+}
+span {
+ display: inline-block;
+ background: blue;
+ width: 8em;
+ height: 100%;
+}
+</style>
+
+<div><span></span></div>
diff --git a/layout/reftests/forms/meter/rounded-corner-clipping.html b/layout/reftests/forms/meter/rounded-corner-clipping.html
new file mode 100644
index 0000000000..d12a41f2cd
--- /dev/null
+++ b/layout/reftests/forms/meter/rounded-corner-clipping.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+meter {
+ width: 20em;
+ height: 5em;
+ border-radius: 2em;
+ border-style: solid;
+ border-width: .25em;
+ background: #eee;
+}
+::-moz-meter-bar {
+ background: blue;
+}
+</style>
+
+<meter min="0" max="100" value="40"></meter>
diff --git a/layout/reftests/forms/meter/style.css b/layout/reftests/forms/meter/style.css
new file mode 100644
index 0000000000..8370c5c33a
--- /dev/null
+++ b/layout/reftests/forms/meter/style.css
@@ -0,0 +1,38 @@
+div.meter-element {
+ display: inline-block;
+ height: 1em;
+ width: 5em;
+ vertical-align: -0.2em;
+
+ background-color: grey;
+}
+
+div.meter-element.vertical {
+ height: 5em;
+ width: 1em;
+}
+
+div.meter-bar {
+ float: none ! important;
+
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ background-color: green;
+}
+
+meter, meter::-moz-meter-bar, div.meter-element, div.meter-bar {
+ -moz-appearance: none;
+}
+
+meter {
+ background: grey;
+}
+
+meter::-moz-meter-bar {
+ background: green;
+}
diff --git a/layout/reftests/forms/meter/transformations-ref.html b/layout/reftests/forms/meter/transformations-ref.html
new file mode 100644
index 0000000000..4c1c95abb6
--- /dev/null
+++ b/layout/reftests/forms/meter/transformations-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ body > div:nth-child(2) { transform: matrix(1, 0, 0.6, 1, 15em, 0); }
+ body > div:nth-child(3) { transform: rotate(30deg); }
+ body > div:nth-child(4) { transform: scale(2, 4); }
+ body > div:nth-child(5) { transform: scale(0.1, 0.4); }
+ body > div:nth-child(6) { transform: scale(1, 0.4); }
+ body > div:nth-child(7) { transform: scale(0.1, 1); }
+ body > div:nth-child(8) { transform: skew(30deg, -10deg); }
+ body > div:nth-child(9) { transform: skew(-30deg, 10deg); }
+ body > div:nth-child(10) { transform: translate(10px, 30px); }
+ body > div:nth-child(11) { transform: translate(30px, 10px); }
+ body > div:nth-child(12) { transform: translate(-10px, 30px); }
+ body > div:nth-child(13) { transform: translate(30px, -10px); }
+ body > div:nth-child(14) { transform: scale(0, 0); }
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/transformations.html b/layout/reftests/forms/meter/transformations.html
new file mode 100644
index 0000000000..54f44cc28d
--- /dev/null
+++ b/layout/reftests/forms/meter/transformations.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter:nth-child(1) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ meter:nth-child(2) { transform: matrix(1, 0, 0.6, 1, 15em, 0); }
+ meter:nth-child(3) { transform: rotate(30deg); }
+ meter:nth-child(4) { transform: scale(2, 4); }
+ meter:nth-child(5) { transform: scale(0.1, 0.4); }
+ meter:nth-child(6) { transform: scale(1, 0.4); }
+ meter:nth-child(7) { transform: scale(0.1, 1); }
+ meter:nth-child(8) { transform: skew(30deg, -10deg); }
+ meter:nth-child(9) { transform: skew(-30deg, 10deg); }
+ meter:nth-child(10) { transform: translate(10px, 30px); }
+ meter:nth-child(11) { transform: translate(30px, 10px); }
+ meter:nth-child(12) { transform: translate(-10px, 30px); }
+ meter:nth-child(13) { transform: translate(30px, -10px); }
+ meter:nth-child(14) { transform: scale(0, 0); }
+ </style>
+ <body>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-ref.html b/layout/reftests/forms/meter/values-ref.html
new file mode 100644
index 0000000000..0e97da064b
--- /dev/null
+++ b/layout/reftests/forms/meter/values-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-bar { width: 100%; }
+ div:nth-child(2) > .meter-bar { width: 0%; }
+ div:nth-child(3) > .meter-bar { width: 10%; }
+ div:nth-child(4) > .meter-bar { width: 50%; }
+ div:nth-child(5) > .meter-bar { width: 0%; }
+ div:nth-child(6) > .meter-bar { width: 100%; }
+ div:nth-child(7) > .meter-bar { width: 42%; }
+ div:nth-child(8) > .meter-bar { width: 100%; }
+ div:nth-child(9) > .meter-bar { width: 100%; }
+ div:nth-child(10) > .meter-bar { width: 10%; }
+ div:nth-child(11) > .meter-bar { width: 37.5%; }
+ div:nth-child(12) > .meter-bar { width: 100%; }
+ div:nth-child(13) > .meter-bar { width: 100%; }
+ div:nth-child(14) > .meter-bar { width: 0%; }
+ div:nth-child(15) > .meter-bar { width: 55%; }
+ div:nth-child(16) > .meter-bar { width: 50%; }
+ div:nth-child(17) > .meter-bar { width: 20%; }
+ div:nth-child(18) > .meter-bar { width: 10%; }
+ div:nth-child(19) > .meter-bar { width: 10%; }
+ div:nth-child(20) > .meter-bar { width: 20%; }
+ div:nth-child(21) > .meter-bar { width: 37.5%; }
+ div:nth-child(22) > .meter-bar { width: 10%; }
+ div:nth-child(23) > .meter-bar { width: 10%; }
+ div:nth-child(24) > .meter-bar { width: 10%; }
+ div:nth-child(25) > .meter-bar { width: 50%; }
+ div:nth-child(26) > .meter-bar { width: 20%; }
+ div:nth-child(27) > .meter-bar { width: 90%; }
+ div:nth-child(28) > .meter-bar { width: 10%; }
+ div:nth-child(29) > .meter-bar { width: 10%; }
+ div:nth-child(30) > .meter-bar { width: 10%; }
+ div:nth-child(31) > .meter-bar { width: 10%; }
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-rtl-ref.html b/layout/reftests/forms/meter/values-rtl-ref.html
new file mode 100644
index 0000000000..ea47bf2567
--- /dev/null
+++ b/layout/reftests/forms/meter/values-rtl-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-bar { width: 100%; }
+ div:nth-child(2) > .meter-bar { width: 0%; }
+ div:nth-child(3) > .meter-bar { width: 10%; }
+ div:nth-child(4) > .meter-bar { width: 50%; }
+ div:nth-child(5) > .meter-bar { width: 0%; }
+ div:nth-child(6) > .meter-bar { width: 100%; }
+ div:nth-child(7) > .meter-bar { width: 42%; }
+ div:nth-child(8) > .meter-bar { width: 100%; }
+ div:nth-child(9) > .meter-bar { width: 100%; }
+ div:nth-child(10) > .meter-bar { width: 10%; }
+ div:nth-child(11) > .meter-bar { width: 37.5%; }
+ div:nth-child(12) > .meter-bar { width: 100%; }
+ div:nth-child(13) > .meter-bar { width: 100%; }
+ div:nth-child(14) > .meter-bar { width: 0%; }
+ div:nth-child(15) > .meter-bar { width: 55%; }
+ div:nth-child(16) > .meter-bar { width: 50%; }
+ div:nth-child(17) > .meter-bar { width: 20%; }
+ div:nth-child(18) > .meter-bar { width: 10%; }
+ div:nth-child(19) > .meter-bar { width: 10%; }
+ div:nth-child(20) > .meter-bar { width: 20%; }
+ div:nth-child(21) > .meter-bar { width: 37.5%; }
+ div:nth-child(22) > .meter-bar { width: 10%; }
+ div:nth-child(23) > .meter-bar { width: 10%; }
+ div:nth-child(24) > .meter-bar { width: 10%; }
+ div:nth-child(25) > .meter-bar { width: 50%; }
+ div:nth-child(26) > .meter-bar { width: 20%; }
+ div:nth-child(27) > .meter-bar { width: 90%; }
+ div:nth-child(28) > .meter-bar { width: 10%; }
+ div:nth-child(29) > .meter-bar { width: 10%; }
+ div:nth-child(30) > .meter-bar { width: 10%; }
+ div:nth-child(31) > .meter-bar { width: 10%; }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-rtl.html b/layout/reftests/forms/meter/values-rtl.html
new file mode 100644
index 0000000000..bd86ed3b1f
--- /dev/null
+++ b/layout/reftests/forms/meter/values-rtl.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body dir='rtl'>
+ <meter value="1.0"></meter>
+ <meter value="0.0"></meter>
+ <meter value="0.1"></meter>
+ <meter value="0.5"></meter>
+ <meter value="-1"></meter>
+ <meter value="50"></meter>
+ <!-- focus on max -->
+ <meter value="42" max="100"></meter>
+ <meter value="42" max="1"></meter>
+ <meter value="42" max="-1"></meter>
+ <meter value="0.1" max="1"></meter>
+ <!-- focus on min -->
+ <meter value="50" min="20" max="100"></meter>
+ <meter value="50" min="1" ></meter>
+ <meter value="0.1" min="2" ></meter>
+ <meter value="0.1" min="0.1"></meter>
+ <meter value="0.1" min="-1"></meter>
+ <!-- focus on low -->
+ <meter value="50" low="20" max="100"></meter>
+ <meter value="20" low="50" max="100"></meter>
+ <meter value="0.1" low="-1"></meter>
+ <meter value="0.1" low="0"></meter>
+ <!-- focus on high -->
+ <meter value="20" high="50" max="100"></meter>
+ <meter value="50" min="20" high="1" max="100"></meter>
+ <meter value="0.1" low="0.3" high="0.2"></meter>
+ <meter value="0.1" high="-1"></meter>
+ <meter value="0.1" high="2"></meter>
+ <!-- focus on optimum -->
+ <meter value="50" max="100" optimum="20"></meter>
+ <meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+ <meter value="0.1" optimum="50"></meter>
+ <meter value="0.1" optimum="-1"></meter>
+ <meter value="0.1" optimum="1"></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical-ref.html b/layout/reftests/forms/meter/values-vertical-ref.html
new file mode 100644
index 0000000000..4f2d7ac915
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(2) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(3) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(4) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(5) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(6) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(7) > .meter-bar { position: relative; top: 58%; height: 42%; }
+ div:nth-child(8) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(9) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(10) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(11) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+ div:nth-child(12) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(13) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(14) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(15) > .meter-bar { position: relative; top: 45%; height: 55%; }
+ div:nth-child(16) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(17) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(18) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(19) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(20) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(21) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+ div:nth-child(22) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(23) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(24) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(25) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(26) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(27) > .meter-bar { position: relative; top: 10%; height: 90%; }
+ div:nth-child(28) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(29) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(30) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(31) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ </style>
+ <body>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical-rtl-ref.html b/layout/reftests/forms/meter/values-vertical-rtl-ref.html
new file mode 100644
index 0000000000..f99dc4189f
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical-rtl-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(2) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(3) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(4) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(5) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(6) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(7) > .meter-bar { position: relative; top: 58%; height: 42%; }
+ div:nth-child(8) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(9) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(10) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(11) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+ div:nth-child(12) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(13) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(14) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(15) > .meter-bar { position: relative; top: 45%; height: 55%; }
+ div:nth-child(16) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(17) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(18) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(19) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(20) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(21) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+ div:nth-child(22) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(23) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(24) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(25) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(26) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(27) > .meter-bar { position: relative; top: 10%; height: 90%; }
+ div:nth-child(28) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(29) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(30) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(31) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical-rtl.html b/layout/reftests/forms/meter/values-vertical-rtl.html
new file mode 100644
index 0000000000..7884e697ea
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical-rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ -moz-orient: vertical;
+ }
+ </style>
+ <body dir='rtl'>
+ <meter value="1.0"></meter>
+ <meter value="0.0"></meter>
+ <meter value="0.1"></meter>
+ <meter value="0.5"></meter>
+ <meter value="-1"></meter>
+ <meter value="50"></meter>
+ <!-- focus on max -->
+ <meter value="42" max="100"></meter>
+ <meter value="42" max="1"></meter>
+ <meter value="42" max="-1"></meter>
+ <meter value="0.1" max="1"></meter>
+ <!-- focus on min -->
+ <meter value="50" min="20" max="100"></meter>
+ <meter value="50" min="1" ></meter>
+ <meter value="0.1" min="2" ></meter>
+ <meter value="0.1" min="0.1"></meter>
+ <meter value="0.1" min="-1"></meter>
+ <!-- focus on low -->
+ <meter value="50" low="20" max="100"></meter>
+ <meter value="20" low="50" max="100"></meter>
+ <meter value="0.1" low="-1"></meter>
+ <meter value="0.1" low="0"></meter>
+ <!-- focus on high -->
+ <meter value="20" high="50" max="100"></meter>
+ <meter value="50" min="20" high="1" max="100"></meter>
+ <meter value="0.1" low="0.3" high="0.2"></meter>
+ <meter value="0.1" high="-1"></meter>
+ <meter value="0.1" high="2"></meter>
+ <!-- focus on optimum -->
+ <meter value="50" max="100" optimum="20"></meter>
+ <meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+ <meter value="0.1" optimum="50"></meter>
+ <meter value="0.1" optimum="-1"></meter>
+ <meter value="0.1" optimum="1"></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical.html b/layout/reftests/forms/meter/values-vertical.html
new file mode 100644
index 0000000000..9e32d53d6e
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ -moz-orient: vertical;
+ }
+ </style>
+ <body>
+ <meter value="1.0"></meter>
+ <meter value="0.0"></meter>
+ <meter value="0.1"></meter>
+ <meter value="0.5"></meter>
+ <meter value="-1"></meter>
+ <meter value="50"></meter>
+ <!-- focus on max -->
+ <meter value="42" max="100"></meter>
+ <meter value="42" max="1"></meter>
+ <meter value="42" max="-1"></meter>
+ <meter value="0.1" max="1"></meter>
+ <!-- focus on min -->
+ <meter value="50" min="20" max="100"></meter>
+ <meter value="50" min="1" ></meter>
+ <meter value="0.1" min="2" ></meter>
+ <meter value="0.1" min="0.1"></meter>
+ <meter value="0.1" min="-1"></meter>
+ <!-- focus on low -->
+ <meter value="50" low="20" max="100"></meter>
+ <meter value="20" low="50" max="100"></meter>
+ <meter value="0.1" low="-1"></meter>
+ <meter value="0.1" low="0"></meter>
+ <!-- focus on high -->
+ <meter value="20" high="50" max="100"></meter>
+ <meter value="50" min="20" high="1" max="100"></meter>
+ <meter value="0.1" low="0.3" high="0.2"></meter>
+ <meter value="0.1" high="-1"></meter>
+ <meter value="0.1" high="2"></meter>
+ <!-- focus on optimum -->
+ <meter value="50" max="100" optimum="20"></meter>
+ <meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+ <meter value="0.1" optimum="50"></meter>
+ <meter value="0.1" optimum="-1"></meter>
+ <meter value="0.1" optimum="1"></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values.html b/layout/reftests/forms/meter/values.html
new file mode 100644
index 0000000000..16d7f794ce
--- /dev/null
+++ b/layout/reftests/forms/meter/values.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <meter value="1.0"></meter>
+ <meter value="0.0"></meter>
+ <meter value="0.1"></meter>
+ <meter value="0.5"></meter>
+ <meter value="-1"></meter>
+ <meter value="50"></meter>
+ <!-- focus on max -->
+ <meter value="42" max="100"></meter>
+ <meter value="42" max="1"></meter>
+ <meter value="42" max="-1"></meter>
+ <meter value="0.1" max="1"></meter>
+ <!-- focus on min -->
+ <meter value="50" min="20" max="100"></meter>
+ <meter value="50" min="1" ></meter>
+ <meter value="0.1" min="2" ></meter>
+ <meter value="0.1" min="0.1"></meter>
+ <meter value="0.1" min="-1"></meter>
+ <!-- focus on low -->
+ <meter value="50" low="20" max="100"></meter>
+ <meter value="20" low="50" max="100"></meter>
+ <meter value="0.1" low="-1"></meter>
+ <meter value="0.1" low="0"></meter>
+ <!-- focus on high -->
+ <meter value="20" high="50" max="100"></meter>
+ <meter value="50" min="20" high="1" max="100"></meter>
+ <meter value="0.1" low="0.3" high="0.2"></meter>
+ <meter value="0.1" high="-1"></meter>
+ <meter value="0.1" high="2"></meter>
+ <!-- focus on optimum -->
+ <meter value="50" max="100" optimum="20"></meter>
+ <meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+ <meter value="0.1" optimum="50"></meter>
+ <meter value="0.1" optimum="-1"></meter>
+ <meter value="0.1" optimum="1"></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-1.html b/layout/reftests/forms/output/output-1.html
new file mode 100644
index 0000000000..0fdb2ae8b9
--- /dev/null
+++ b/layout/reftests/forms/output/output-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: the output shouldn't show anything when there is no content -->
+ <body>
+ <output></output>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-2.html b/layout/reftests/forms/output/output-2.html
new file mode 100644
index 0000000000..882e805ba0
--- /dev/null
+++ b/layout/reftests/forms/output/output-2.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: the output should show the textContent -->
+ <body>
+ <output>foo</output>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-3.html b/layout/reftests/forms/output/output-3.html
new file mode 100644
index 0000000000..ecb17e9159
--- /dev/null
+++ b/layout/reftests/forms/output/output-3.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: the output should show its content -->
+ <body>
+ <output>foo<b>bar</b></output>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-4.html b/layout/reftests/forms/output/output-4.html
new file mode 100644
index 0000000000..b0ce800beb
--- /dev/null
+++ b/layout/reftests/forms/output/output-4.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: the output should show its content -->
+ <body>
+ <output>foo<input></output>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-5.html b/layout/reftests/forms/output/output-5.html
new file mode 100644
index 0000000000..16bcf357a6
--- /dev/null
+++ b/layout/reftests/forms/output/output-5.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: the output element should show its default value -->
+ <script type="text/javascript">
+ function setDefaultValue()
+ {
+ document.getElementById('o').defaultValue = "foo";
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setDefaultValue(); disableReftestWait();">
+ <output id="o"></output>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-6.html b/layout/reftests/forms/output/output-6.html
new file mode 100644
index 0000000000..b7e9ede758
--- /dev/null
+++ b/layout/reftests/forms/output/output-6.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: the output element should show its value -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('o').value = "foo";
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setValue(); disableReftestWait();">
+ <output id="o"></output>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-7.html b/layout/reftests/forms/output/output-7.html
new file mode 100644
index 0000000000..0ec10f3c31
--- /dev/null
+++ b/layout/reftests/forms/output/output-7.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: the output element should show its value -->
+ <script type="text/javascript">
+ function setDefaultValue()
+ {
+ document.getElementById('o').value = "bar";
+ }
+ function setValue()
+ {
+ document.getElementById('o').value = "foo";
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setDefaultValue(); setValue(); disableReftestWait();">
+ <output id="o"></output>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-ref-2.html b/layout/reftests/forms/output/output-ref-2.html
new file mode 100644
index 0000000000..ad78e10e56
--- /dev/null
+++ b/layout/reftests/forms/output/output-ref-2.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ foo<b>bar</b>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-ref-3.html b/layout/reftests/forms/output/output-ref-3.html
new file mode 100644
index 0000000000..cae43bf45b
--- /dev/null
+++ b/layout/reftests/forms/output/output-ref-3.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ foo<input>
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/output-ref.html b/layout/reftests/forms/output/output-ref.html
new file mode 100644
index 0000000000..01d12af234
--- /dev/null
+++ b/layout/reftests/forms/output/output-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ foo
+ </body>
+</html>
diff --git a/layout/reftests/forms/output/reftest.list b/layout/reftests/forms/output/reftest.list
new file mode 100644
index 0000000000..1bd798272e
--- /dev/null
+++ b/layout/reftests/forms/output/reftest.list
@@ -0,0 +1,7 @@
+== output-1.html about:blank
+== output-2.html output-ref.html
+== output-3.html output-ref-2.html
+== output-4.html output-ref-3.html
+== output-5.html output-ref.html
+== output-6.html output-ref.html
+== output-7.html output-ref.html
diff --git a/layout/reftests/forms/overflow-ref.html b/layout/reftests/forms/overflow-ref.html
new file mode 100644
index 0000000000..7888aa2cec
--- /dev/null
+++ b/layout/reftests/forms/overflow-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<!--
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1615026
+-->
+<title>Form controls don't paint outside of their layout bounds</title>
+<style>
+ span {
+ float: left;
+ margin: 10px;
+ }
+</style>
+<span><input type="text"></span>
+<span><input type="file"></span>
+<span><input type="number"></span>
+<span><input type="search"></span>
+<span><input type="checkbox"></span>
+<span><input type="radio"></span>
+<span><button></button></span>
+<span><select></select></span>
diff --git a/layout/reftests/forms/overflow.html b/layout/reftests/forms/overflow.html
new file mode 100644
index 0000000000..c3e72beacb
--- /dev/null
+++ b/layout/reftests/forms/overflow.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<!--
+ https://bugzilla.mozilla.org/show_bug.cgi?id=1615026
+-->
+<title>Form controls don't paint outside of their layout bounds</title>
+<style>
+ span {
+ float: left;
+ margin: 10px;
+ overflow: hidden;
+ }
+</style>
+<span><input type="text"></span>
+<span><input type="file"></span>
+<span><input type="number"></span>
+<span><input type="search"></span>
+<span><input type="checkbox"></span>
+<span><input type="radio"></span>
+<span><button></button></span>
+<span><select></select></span>
diff --git a/layout/reftests/forms/placeholder/placeholder-1-password.html b/layout/reftests/forms/placeholder/placeholder-1-password.html
new file mode 100644
index 0000000000..1c3d582f10
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-1-password.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: placeholder should be used by input password elements -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <body>
+ <input type="password" value="" placeholder="my placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-1-text.html b/layout/reftests/forms/placeholder/placeholder-1-text.html
new file mode 100644
index 0000000000..30df2f3484
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-1-text.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: placeholder should be used by input text elements -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <body>
+ <input type="text" value="" placeholder="my placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-1-textarea.html b/layout/reftests/forms/placeholder/placeholder-1-textarea.html
new file mode 100644
index 0000000000..89f990ce01
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-1-textarea.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: placeholder should be used by textarea elements -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <body>
+ <textarea placeholder="my placeholder"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-10.html b/layout/reftests/forms/placeholder/placeholder-10.html
new file mode 100644
index 0000000000..40a35669ec
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-10.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when unfocused, if value='', newest placeholder should be shown -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <script type="text/javascript">
+ function focusPlaceholder()
+ {
+ document.getElementById('p1').focus();
+ }
+ function setPlaceholder()
+ {
+ document.getElementById('p1').placeholder = 'my placeholder';
+ }
+ function unFocusPlaceholder()
+ {
+ document.getElementById('p1').blur();
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="focusPlaceholder();">
+ <input type="text" id="p1" value="" placeholder="old placeholder" onfocus="setPlaceholder(); unFocusPlaceholder(); disableReftestWait();">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-11.html b/layout/reftests/forms/placeholder/placeholder-11.html
new file mode 100644
index 0000000000..62c77351c8
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-11.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: placeholder shouldn't show new lines (&#10; version) -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <body>
+ <input type="text" value="" placeholder="my&#10; placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-12.html b/layout/reftests/forms/placeholder/placeholder-12.html
new file mode 100644
index 0000000000..7cfd00a0eb
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-12.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: placeholder shouldn't show new lines (&#13; version) -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <body>
+ <input type="text" value="" placeholder="my&#13; placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-13.html b/layout/reftests/forms/placeholder/placeholder-13.html
new file mode 100644
index 0000000000..19fc172937
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-13.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: placeholder shouldn't show new lines (\r version) -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <script type="text/javascript">
+ function setPlaceholder()
+ {
+ document.getElementById('p1').placeholder = 'my\r placeholder';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload="setPlaceholder(); disableReftestWait();">
+ <input type="text" id="p1" value="" placeholder="">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-14.html b/layout/reftests/forms/placeholder/placeholder-14.html
new file mode 100644
index 0000000000..ad99420eb1
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-14.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: placeholder shouldn't show new lines (\n version) -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <script type="text/javascript">
+ function setPlaceholder()
+ {
+ document.getElementById('p1').placeholder = 'my\n placeholder';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload="setPlaceholder(); disableReftestWait();">
+ <input type="text" id="p1" value="" placeholder="">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-18.html b/layout/reftests/forms/placeholder/placeholder-18.html
new file mode 100644
index 0000000000..159d5d7e27
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-18.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: placeholder should appear with dynamic DOM modifications -->
+ <script type="text/javascript">
+ function setPlaceholder()
+ {
+ var i = document.getElementById('p1');
+ i.focus();
+ i.blur();
+ i.value = "not empty";
+ i.value = "";
+ i.value = "my value";
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload="setPlaceholder(); disableReftestWait();">
+ <input type="text" id="p1" value="" placeholder="my placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-2-textarea.html b/layout/reftests/forms/placeholder/placeholder-2-textarea.html
new file mode 100644
index 0000000000..06678a3db9
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-2-textarea.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: placeholder has to be used if set via javascript -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <script type="text/javascript">
+ function setPlaceholder()
+ {
+ document.getElementById('p1').placeholder = "my placeholder";
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setPlaceholder(); disableReftestWait();">
+ <textarea id="p1" placeholder=""></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-2.html b/layout/reftests/forms/placeholder/placeholder-2.html
new file mode 100644
index 0000000000..36b883ab25
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: placeholder has to be used if set via javascript -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <script type="text/javascript">
+ function setPlaceholder()
+ {
+ document.getElementById('p1').placeholder = "my placeholder";
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setPlaceholder(); disableReftestWait();">
+ <input type="text" id="p1" value="" placeholder="">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-20.html b/layout/reftests/forms/placeholder/placeholder-20.html
new file mode 100644
index 0000000000..323cea849a
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-20.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <!-- Test: when focused, if value='', newest placeholder should be shown. -->
+ <script type="text/javascript">
+ function focusPlaceholder()
+ {
+ document.getElementById('p1').focus();
+ }
+ function setPlaceholder()
+ {
+ document.getElementById('p1').placeholder = 'my placeholder';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="focusPlaceholder();">
+ <input type="text" id="p1" value="" onfocus="setPlaceholder(); disableReftestWait();">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-21.html b/layout/reftests/forms/placeholder/placeholder-21.html
new file mode 100644
index 0000000000..483b0d49d6
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-21.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when focused, clearing placeholder attribute should work. -->
+ <script type="text/javascript">
+ function focusPlaceholder()
+ {
+ document.getElementById('p1').focus();
+ }
+ function setPlaceholder()
+ {
+ document.getElementById('p1').removeAttribute('placeholder');
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="focusPlaceholder();">
+ <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="setPlaceholder(); disableReftestWait();">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-22.html b/layout/reftests/forms/placeholder/placeholder-22.html
new file mode 100644
index 0000000000..7ae54e8e71
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-22.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: when focused, clearing placeholder attribute should work. -->
+ <script type="text/javascript">
+ function focusPlaceholder()
+ {
+ document.getElementById('p1').focus();
+ }
+ function setPlaceholder()
+ {
+ document.getElementById('p1').placeholder = '';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="focusPlaceholder();">
+ <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="setPlaceholder(); disableReftestWait();">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-3.html b/layout/reftests/forms/placeholder/placeholder-3.html
new file mode 100644
index 0000000000..b58f7ca72f
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-3.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test: value has to be shown when not null -->
+ <body>
+ <input type="text" value="my value" placeholder="my placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-4.html b/layout/reftests/forms/placeholder/placeholder-4.html
new file mode 100644
index 0000000000..bfcce20b8c
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-4.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: value has to be shown if set via javascript -->
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('p1').value = "my value";
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setValue(); disableReftestWait();">
+ <input type="text" id="p1" value="" placeholder="my placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-5.html b/layout/reftests/forms/placeholder/placeholder-5.html
new file mode 100644
index 0000000000..0f766d160a
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-5.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <!-- Test: placeholder has to be shown if value is reseted via javascript -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <script type="text/javascript">
+ function setValue()
+ {
+ document.getElementById('p1').value = "";
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="setValue(); disableReftestWait();">
+ <input type="text" id="p1" value="my value" placeholder="my placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-6-textarea.html b/layout/reftests/forms/placeholder/placeholder-6-textarea.html
new file mode 100644
index 0000000000..b56cb04789
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-6-textarea.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test placeholder behavior when textarea is too small -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <body>
+ <textarea cols="5" rows="3" placeholder="my placeholder"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-6.html b/layout/reftests/forms/placeholder/placeholder-6.html
new file mode 100644
index 0000000000..774aa35d4d
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-6.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <!-- Test placeholder behavior when input is too small -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <body>
+ <input type="text" size="5" value="" placeholder="my placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-7.html b/layout/reftests/forms/placeholder/placeholder-7.html
new file mode 100644
index 0000000000..19fc8eb745
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-7.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <!-- Test: when focused, element should show placeholder. -->
+ <script type="text/javascript">
+ function focusPlaceholder()
+ {
+ document.getElementById('p1').focus();
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="focusPlaceholder();">
+ <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="disableReftestWait();">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-8.html b/layout/reftests/forms/placeholder/placeholder-8.html
new file mode 100644
index 0000000000..9c1ac995aa
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-8.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <!-- Test: when focused, if value='', newest placeholder should be shown. -->
+ <script type="text/javascript">
+ function focusPlaceholder()
+ {
+ document.getElementById('p1').focus();
+ }
+ function setPlaceholder()
+ {
+ document.getElementById('p1').placeholder = 'my placeholder';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="focusPlaceholder();">
+ <input type="text" id="p1" value="" placeholder="old placeholder" onfocus="setPlaceholder(); disableReftestWait();">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-9.html b/layout/reftests/forms/placeholder/placeholder-9.html
new file mode 100644
index 0000000000..35155c0120
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-9.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <!-- Test: when focused, value reset should show placeholder. -->
+ <script type="text/javascript">
+ function focusPlaceholder()
+ {
+ document.getElementById('p1').focus();
+ }
+ function resetValue()
+ {
+ document.getElementById('p1').value = '';
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+
+ <body onload="focusPlaceholder();">
+ <input type="text" id="p1" value="my value" placeholder="my placeholder" onfocus="resetValue(); disableReftestWait();">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-blank-ref.html b/layout/reftests/forms/placeholder/placeholder-blank-ref.html
new file mode 100644
index 0000000000..115ffac79e
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-blank-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <script type="text/javascript">
+ function focusInput()
+ {
+ document.getElementById('t1').focus();
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload="focusInput();">
+ <input id='t1' type="text" onfocus="disableReftestWait();">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-focus-ref.html b/layout/reftests/forms/placeholder/placeholder-focus-ref.html
new file mode 100644
index 0000000000..fa8f292a47
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-focus-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <script type="text/javascript">
+ function focusInput()
+ {
+ document.getElementById('t1').focus();
+ }
+ function disableReftestWait()
+ {
+ document.documentElement.className = '';
+ }
+ </script>
+ <body onload="focusInput();">
+ <input id='t1' type="text" class="placeholder" value="my placeholder" onfocus="disableReftestWait();">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-overflow-ref.html b/layout/reftests/forms/placeholder/placeholder-overflow-ref.html
new file mode 100644
index 0000000000..9bceacd626
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-overflow-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <!--
+ This test 'emulate' the placeholder by setting a style
+ to the value of an input text.
+ This test may break if placeholder default style is changed.
+ -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+
+ <body>
+ <input type="text" class="placeholder" size="5" value="my placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html b/layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html
new file mode 100644
index 0000000000..559945a50f
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <!--
+ This test 'emulate' the placeholder by setting a style
+ to the value of a textarea.
+ This test may break if placeholder default style is changed.
+ -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+
+ <body>
+ <textarea class="placeholder" cols="5" rows="3">my placeholder</textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-overridden-ref.html b/layout/reftests/forms/placeholder/placeholder-overridden-ref.html
new file mode 100644
index 0000000000..11f756af67
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-overridden-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <input type="text" value="my value">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-rtl-ref.html b/layout/reftests/forms/placeholder/placeholder-rtl-ref.html
new file mode 100644
index 0000000000..91812d0cee
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-rtl-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html dir='rtl'>
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <body>
+ <input class='placeholder' value='foo'>
+ <textarea class='placeholder' >foo</textarea>
+ </body>
+</html>
+
diff --git a/layout/reftests/forms/placeholder/placeholder-rtl.html b/layout/reftests/forms/placeholder/placeholder-rtl.html
new file mode 100644
index 0000000000..5898ed55c7
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-rtl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html dir='rtl'>
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+ <body>
+ <input placeholder='foo'>
+ <textarea placeholder='foo'></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-style.css b/layout/reftests/forms/placeholder/placeholder-style.css
new file mode 100644
index 0000000000..0c5bb63333
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-style.css
@@ -0,0 +1,10 @@
+textarea.placeholder,
+input.placeholder,
+input::placeholder,
+textarea::placeholder {
+ /* Unfortunately, we can't style the <input> or <textarea> text so we can't
+ set it to opacity: 0.54; which means we have to revert the style to
+ something that doesn't include an opacity. */
+ color: GrayText;
+ opacity: 1.0;
+}
diff --git a/layout/reftests/forms/placeholder/placeholder-visible-ref.html b/layout/reftests/forms/placeholder/placeholder-visible-ref.html
new file mode 100644
index 0000000000..b05267457e
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-visible-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <!--
+ This test 'emulate' the placeholder by setting a style
+ to the value of an input text.
+ This test may break if placeholder default style is changed.
+ -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+
+ <body>
+ <input type="text" class="placeholder" value="my placeholder">
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html b/layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html
new file mode 100644
index 0000000000..b7bda6f80a
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <!--
+ This test 'emulate' the placeholder by setting a style
+ to the value of a textarea.
+ This test may break if placeholder default style is changed.
+ -->
+ <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+
+ <body>
+ <textarea class="placeholder">my placeholder</textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/reftest.list b/layout/reftests/forms/placeholder/reftest.list
new file mode 100644
index 0000000000..54ec3b06e0
--- /dev/null
+++ b/layout/reftests/forms/placeholder/reftest.list
@@ -0,0 +1,36 @@
+# Tests using placeholder-focus-ref.html as a reference are disabled because
+# we can't change the caret colour nor disable it and we can't change the
+# text colour without changing the caret which means that the tested page has
+# a black caret with a grey text and the reference has a grey caret with grey
+# text. The only thing that is doable is to make the caret grey in the tested
+# page but that would make the test moot because a failure wouldn't be seen.
+# A real way to fix this would be to be able to style the caret or to implement
+# ::value (bug 648643), depending of the ::value behaviour (it could change the
+# caret colour and the text colour or just the text colour).
+
+== placeholder-1-text.html placeholder-visible-ref.html
+== placeholder-1-password.html placeholder-visible-ref.html
+== placeholder-1-textarea.html placeholder-visible-textarea-ref.html
+== placeholder-2.html placeholder-visible-ref.html
+== placeholder-2-textarea.html placeholder-visible-textarea-ref.html
+== placeholder-3.html placeholder-overridden-ref.html
+== placeholder-4.html placeholder-overridden-ref.html
+== placeholder-5.html placeholder-visible-ref.html
+
+# This tests assumes that the overflowing placeholder won't eat the padding, which is just not true in some platforms...
+fuzzy-if(winWidget,0-160,0-10) fuzzy-if(Android,0-160,0-41) fuzzy-if(asyncPan&&!layersGPUAccelerated,0-146,0-317) == placeholder-6.html placeholder-overflow-ref.html
+
+skip-if(Android&&asyncPan) == placeholder-6-textarea.html placeholder-overflow-textarea-ref.html
+# needs-focus == placeholder-7.html placeholder-focus-ref.html
+# needs-focus == placeholder-8.html placeholder-focus-ref.html
+# needs-focus == placeholder-9.html placeholder-focus-ref.html
+needs-focus == placeholder-10.html placeholder-visible-ref.html
+== placeholder-11.html placeholder-visible-ref.html
+== placeholder-12.html placeholder-visible-ref.html
+== placeholder-13.html placeholder-visible-ref.html
+== placeholder-14.html placeholder-visible-ref.html
+== placeholder-18.html placeholder-overridden-ref.html
+# needs-focus == placeholder-20.html placeholder-focus-ref.html
+needs-focus == placeholder-21.html placeholder-blank-ref.html
+needs-focus == placeholder-22.html placeholder-blank-ref.html
+== placeholder-rtl.html placeholder-rtl-ref.html
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-ref.html
new file mode 100644
index 0000000000..9d8d96a41a
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-ref.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) > .progress-bar { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) > .progress-bar { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) > .progress-bar { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) > .progress-bar { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) > .progress-bar { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) > .progress-bar { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) > .progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) > .progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) > .progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) > .progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) > .progress-bar { margin: 200px; padding: 0px; }
+ body > div:nth-child(16) > .progress-bar { margin: 0px; padding: 200px; }
+ /* 15 - 18 should have 100% width, no need to specify. */
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
new file mode 100644
index 0000000000..c25a143dbf
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(2) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(3) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(4) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ /* 15 - 18 should have 100% width, no need to specify. */
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html
new file mode 100644
index 0000000000..711dc26ba4
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > progress:nth-child(1)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > progress:nth-child(2)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > progress:nth-child(3)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > progress:nth-child(4)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > progress:nth-child(5)::-moz-progress-bar { width: 1000px; }
+ body > progress:nth-child(6)::-moz-progress-bar { width: 10px; }
+ body > progress:nth-child(7)::-moz-progress-bar { width: 10%; }
+ body > progress:nth-child(8)::-moz-progress-bar { width: 200%; }
+ </style>
+ <body dir='rtl'>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <!-- Those will be used to change width. -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
new file mode 100644
index 0000000000..4f28e3aceb
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ .progress-element { margin: 10px; }
+ body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(2) > .progress-bar { }
+ body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: calc(100% - 10px); }
+ body > div:nth-child(5) > .progress-bar { }
+ body > div:nth-child(6) > .progress-bar { height: calc(100% - 10px); }
+ body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
+ body > div:nth-child(8) > .progress-bar { }
+ body > div:nth-child(9) > .progress-bar { }
+ body > div:nth-child(10) > .progress-bar { }
+ body > div:nth-child(11) > .progress-bar { }
+ /* 12 - 15 should have 100% width, no need to specify. */
+ body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px; left: 64px;
+ height: calc(100% - 32px);
+ width: calc(100% + 128px - 1em); }
+ </style>
+ <body>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <br><div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
new file mode 100644
index 0000000000..d69b8b1e57
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ .progress-element { margin: 10px; }
+ body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(2) > .progress-bar { }
+ body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: calc(100% - 10px); }
+ body > div:nth-child(5) > .progress-bar { }
+ body > div:nth-child(6) > .progress-bar { height: calc(100% - 10px); }
+ body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
+ body > div:nth-child(8) > .progress-bar { }
+ body > div:nth-child(9) > .progress-bar { }
+ body > div:nth-child(10) > .progress-bar { }
+ body > div:nth-child(11) > .progress-bar { }
+ /* 12 - 15 should have 100% width, no need to specify. */
+ body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px;
+ left: calc(100% + 128px + 32px );
+ height: calc(100% - 32px);
+ width: calc(100% + 128px - 1em); }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <br><div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
new file mode 100644
index 0000000000..7b8315c0f8
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ margin: 10px;
+ -moz-orient: vertical;
+ overflow: visible;
+ }
+ body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
+ body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
+ body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
+ body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
+ body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
+ body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
+ body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
+ body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
+ </style>
+ <body dir='rtl'>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <!-- Those will be used to change width. -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <br><progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html
new file mode 100644
index 0000000000..1988cb5184
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ margin: 10px;
+ -moz-orient: vertical;
+ overflow: visible;
+ }
+ body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
+ body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
+ body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
+ body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
+ body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
+ body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
+ body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
+ body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <!-- Those will be used to change width. -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <br><progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element.html b/layout/reftests/forms/progress/bar-pseudo-element.html
new file mode 100644
index 0000000000..edc8cd36ab
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress { overflow: visible; }
+ body > progress:nth-child(1)::-moz-progress-bar { margin: 10px; padding: 0px; }
+ body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 10px; }
+ body > progress:nth-child(3)::-moz-progress-bar { margin: 10px; padding: 10px; }
+ body > progress:nth-child(4)::-moz-progress-bar { margin: 5px; padding: 5px; }
+ body > progress:nth-child(5)::-moz-progress-bar { margin: 50px; padding: 50px; }
+ body > progress:nth-child(6)::-moz-progress-bar { margin: 100px; padding: 100px; }
+ body > progress:nth-child(7)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > progress:nth-child(8)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > progress:nth-child(9)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > progress:nth-child(10)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > progress:nth-child(12)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > progress:nth-child(13)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > progress:nth-child(14)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > progress:nth-child(15)::-moz-progress-bar { margin: 200px; padding: 0px; }
+ body > progress:nth-child(16)::-moz-progress-bar { margin: 0px; padding: 200px; }
+ body > progress:nth-child(17)::-moz-progress-bar { width: 1000px; }
+ body > progress:nth-child(18)::-moz-progress-bar { width: 10px; }
+ body > progress:nth-child(19)::-moz-progress-bar { width: 10%; }
+ body > progress:nth-child(20)::-moz-progress-bar { width: 200%; }
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <!-- Those will be used to change width. -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/block-invalidate-ref.html b/layout/reftests/forms/progress/block-invalidate-ref.html
new file mode 100644
index 0000000000..60f14f1349
--- /dev/null
+++ b/layout/reftests/forms/progress/block-invalidate-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ progress { display: block; }
+ </style>
+ <body>
+ <progress value='0.5'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/block-invalidate.html b/layout/reftests/forms/progress/block-invalidate.html
new file mode 100644
index 0000000000..47ba03bdac
--- /dev/null
+++ b/layout/reftests/forms/progress/block-invalidate.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress { display: block; }
+ </style>
+ <script>
+ function loadHandler() {
+ setTimeout(function() {
+ var p = document.getElementsByTagName('progress')[0];
+ p.value = '0.5';
+ document.documentElement.className = '';
+ }, 0);
+ }
+ </script>
+ <body onload="loadHandler();">
+ <progress value='0'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/in-cells-ref.html b/layout/reftests/forms/progress/in-cells-ref.html
new file mode 100644
index 0000000000..08917e43f4
--- /dev/null
+++ b/layout/reftests/forms/progress/in-cells-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ progress { width: 10em; height: 1em; }
+ progress.vertical { -moz-orient: vertical; width: 1em; height: 10em; }
+ </style>
+ <body>
+ <table>
+ <tr>
+ <td>foo</td>
+ <td><progress value='0.5'></progress></td>
+ <td>bar</td>
+ </tr>
+ <tr>
+ <td>foo</td>
+ <td><progress class='vertical' value='0.5'></progress></td>
+ <td>bar</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/in-cells.html b/layout/reftests/forms/progress/in-cells.html
new file mode 100644
index 0000000000..fc3614347a
--- /dev/null
+++ b/layout/reftests/forms/progress/in-cells.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress.vertical { -moz-orient: vertical; }
+ </style>
+ <body>
+ <table>
+ <tr>
+ <td>foo</td>
+ <td><progress value='0.5'></progress></td>
+ <td>bar</td>
+ </tr>
+ <tr>
+ <td>foo</td>
+ <td><progress class='vertical' value='0.5'></progress></td>
+ <td>bar</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/indeterminate-style-height-ref.html b/layout/reftests/forms/progress/indeterminate-style-height-ref.html
new file mode 100644
index 0000000000..2a9eafa315
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-height-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div.progress-element {
+ height: 12em;
+ width: 2em;
+ }
+ div.progress-bar {
+ height: 100%;
+ }
+ body > div:nth-child(1) > .progress-bar { position: relative;
+ top: calc(12em - 20px); height: 20px; }
+ body > div:nth-child(2) > .progress-bar { position: relative;
+ top: calc(12em - 0px); height: 0px; }
+ body > div:nth-child(3) > .progress-bar { position: relative;
+ top: calc(12em - 50%); height: 50%; }
+ body > div:nth-child(4) > .progress-bar { position: relative;
+ top: calc(12em - 1em); height: 1em; }
+ body > div:nth-child(5) > .progress-bar { position: relative;
+ top: calc(12em - 100%); height: 100%; }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/forms/progress/indeterminate-style-height.html b/layout/reftests/forms/progress/indeterminate-style-height.html
new file mode 100644
index 0000000000..ddefd0afaf
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-height.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ height: 12em;
+ width: 2em;
+ }
+ body > progress:nth-child(1)::-moz-progress-bar { height: 20px; }
+ body > progress:nth-child(2)::-moz-progress-bar { height: 0px; }
+ body > progress:nth-child(3)::-moz-progress-bar { height: 50%; }
+ body > progress:nth-child(4)::-moz-progress-bar { height: 1em; }
+ /* last one is for the default value: width=100%. */
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/indeterminate-style-width-ref.html b/layout/reftests/forms/progress/indeterminate-style-width-ref.html
new file mode 100644
index 0000000000..7f67f946e0
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-width-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div.progress-bar {
+ width:100%;
+ }
+ body > div:nth-child(1) > .progress-bar { width: 20px; }
+ body > div:nth-child(2) > .progress-bar { width: 0px; }
+ body > div:nth-child(3) > .progress-bar { width: 50%; }
+ body > div:nth-child(4) > .progress-bar { width: 1em; }
+ body > div:nth-child(5) > .progress-bar { width: 100%; }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/forms/progress/indeterminate-style-width.html b/layout/reftests/forms/progress/indeterminate-style-width.html
new file mode 100644
index 0000000000..f5db8ff666
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-width.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > progress:nth-child(1)::-moz-progress-bar { width: 20px; }
+ body > progress:nth-child(2)::-moz-progress-bar { width: 0px; }
+ body > progress:nth-child(3)::-moz-progress-bar { width: 50%; }
+ body > progress:nth-child(4)::-moz-progress-bar { width: 1em; }
+ /* last one is for the default value: width=100%. */
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-ref.html b/layout/reftests/forms/progress/margin-padding-ref.html
new file mode 100644
index 0000000000..5a64e6d2de
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-rtl-ref.html
new file mode 100644
index 0000000000..bef9c57276
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-rtl.html b/layout/reftests/forms/progress/margin-padding-rtl.html
new file mode 100644
index 0000000000..fc445c36c4
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-rtl.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress:nth-child(1) { margin: 10px; padding: 0px; }
+ progress:nth-child(2) { margin: 0px; padding: 10px; }
+ progress:nth-child(3) { margin: 10px; padding: 10px; }
+ progress:nth-child(4) { margin: 5px; padding: 5px; }
+ progress:nth-child(5) { margin: 50px; padding: 50px; }
+ progress:nth-child(6) { margin: 100px; padding: 100px; }
+ progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-ref.html
new file mode 100644
index 0000000000..2dea7af511
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
new file mode 100644
index 0000000000..4ded227feb
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html
new file mode 100644
index 0000000000..7be45b2c1c
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ }
+ progress:nth-child(1) { margin: 10px; padding: 0px; }
+ progress:nth-child(2) { margin: 0px; padding: 10px; }
+ progress:nth-child(3) { margin: 10px; padding: 10px; }
+ progress:nth-child(4) { margin: 5px; padding: 5px; }
+ progress:nth-child(5) { margin: 50px; padding: 50px; }
+ progress:nth-child(6) { margin: 100px; padding: 100px; }
+ progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical.html b/layout/reftests/forms/progress/margin-padding-vertical.html
new file mode 100644
index 0000000000..8e4d485659
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ }
+ progress:nth-child(1) { margin: 10px; padding: 0px; }
+ progress:nth-child(2) { margin: 0px; padding: 10px; }
+ progress:nth-child(3) { margin: 10px; padding: 10px; }
+ progress:nth-child(4) { margin: 5px; padding: 5px; }
+ progress:nth-child(5) { margin: 50px; padding: 50px; }
+ progress:nth-child(6) { margin: 100px; padding: 100px; }
+ progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding.html b/layout/reftests/forms/progress/margin-padding.html
new file mode 100644
index 0000000000..fe4f3d003c
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress:nth-child(1) { margin: 10px; padding: 0px; }
+ progress:nth-child(2) { margin: 0px; padding: 10px; }
+ progress:nth-child(3) { margin: 10px; padding: 10px; }
+ progress:nth-child(4) { margin: 5px; padding: 5px; }
+ progress:nth-child(5) { margin: 50px; padding: 50px; }
+ progress:nth-child(6) { margin: 100px; padding: 100px; }
+ progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/max-height-ref.html b/layout/reftests/forms/progress/max-height-ref.html
new file mode 100644
index 0000000000..872f9cc826
--- /dev/null
+++ b/layout/reftests/forms/progress/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ progress {
+ height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<progress>Some text</progress>
diff --git a/layout/reftests/forms/progress/max-height.html b/layout/reftests/forms/progress/max-height.html
new file mode 100644
index 0000000000..c9d545330a
--- /dev/null
+++ b/layout/reftests/forms/progress/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ progress {
+ max-height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<progress>Some text</progress>
diff --git a/layout/reftests/forms/progress/progress-orient-block.html b/layout/reftests/forms/progress/progress-orient-block.html
new file mode 100644
index 0000000000..e5f33c4979
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
new file mode 100644
index 0000000000..64d7157247
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:horizontal" max=100 value=0 dir=rtl>
diff --git a/layout/reftests/forms/progress/progress-orient-horizontal.html b/layout/reftests/forms/progress/progress-orient-horizontal.html
new file mode 100644
index 0000000000..e37e461702
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-inline.html b/layout/reftests/forms/progress/progress-orient-inline.html
new file mode 100644
index 0000000000..352537ae79
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-vertical-rtl.html b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html
new file mode 100644
index 0000000000..7fb4d81bed
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:vertical" max=100 value=0 dir=rtl>
diff --git a/layout/reftests/forms/progress/progress-orient-vertical.html b/layout/reftests/forms/progress/progress-orient-vertical.html
new file mode 100644
index 0000000000..6a64a5e8c8
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-block.html b/layout/reftests/forms/progress/progress-vlr-orient-block.html
new file mode 100644
index 0000000000..954bc9dd16
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
new file mode 100644
index 0000000000..9584f95d79
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-inline.html b/layout/reftests/forms/progress/progress-vlr-orient-inline.html
new file mode 100644
index 0000000000..9ec89960d8
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-vertical.html b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html
new file mode 100644
index 0000000000..625b543b46
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr.html b/layout/reftests/forms/progress/progress-vlr.html
new file mode 100644
index 0000000000..52f42aede5
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-block.html b/layout/reftests/forms/progress/progress-vrl-orient-block.html
new file mode 100644
index 0000000000..52df5dd298
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
new file mode 100644
index 0000000000..03ea99bb8d
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-inline.html b/layout/reftests/forms/progress/progress-vrl-orient-inline.html
new file mode 100644
index 0000000000..57ee166d09
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-vertical.html b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html
new file mode 100644
index 0000000000..becd4504e1
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl.html b/layout/reftests/forms/progress/progress-vrl.html
new file mode 100644
index 0000000000..a3f0b889fc
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl" max=100 value=0>
diff --git a/layout/reftests/forms/progress/reftest.list b/layout/reftests/forms/progress/reftest.list
new file mode 100644
index 0000000000..aa5f0c79d2
--- /dev/null
+++ b/layout/reftests/forms/progress/reftest.list
@@ -0,0 +1,42 @@
+== values.html values-ref.html
+== values-rtl.html values-rtl-ref.html
+== margin-padding.html margin-padding-ref.html
+== margin-padding-rtl.html margin-padding-rtl-ref.html
+== bar-pseudo-element.html bar-pseudo-element-ref.html
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
+== indeterminate-style-width.html indeterminate-style-width-ref.html
+
+# vertical tests
+== values-vertical.html values-vertical-ref.html
+== values-vertical-rtl.html values-vertical-rtl-ref.html
+== margin-padding-vertical.html margin-padding-vertical-ref.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html
+== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html
+== indeterminate-style-height.html indeterminate-style-height-ref.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <progress> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations-ref.html
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate-ref.html
+== in-cells.html in-cells-ref.html
+== max-height.html max-height-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= progress-orient-horizontal.html progress-orient-vertical.html
+fails != progress-orient-vertical.html progress-orient-vertical-rtl.html # only OS X currently has direction-dependent rendering here
+== progress-orient-block.html progress-orient-vertical.html
+== progress-orient-inline.html progress-orient-horizontal.html
+== progress-vlr.html progress-orient-vertical.html
+== progress-vlr-orient-block.html progress-orient-horizontal.html
+== progress-vlr-orient-inline.html progress-orient-vertical.html
+== progress-vlr-orient-horizontal.html progress-orient-horizontal.html
+== progress-vlr-orient-vertical.html progress-orient-vertical.html
+== progress-vrl.html progress-orient-vertical-rtl.html
+== progress-vrl-orient-block.html progress-orient-horizontal-rtl.html
+== progress-vrl-orient-inline.html progress-orient-vertical-rtl.html
+== progress-vrl-orient-horizontal.html progress-orient-horizontal-rtl.html
+== progress-vrl-orient-vertical.html progress-orient-vertical-rtl.html
diff --git a/layout/reftests/forms/progress/style.css b/layout/reftests/forms/progress/style.css
new file mode 100644
index 0000000000..fe3bc80389
--- /dev/null
+++ b/layout/reftests/forms/progress/style.css
@@ -0,0 +1,37 @@
+div.progress-element {
+ -moz-appearance: progressbar;
+ display: inline-block;
+ height: 1em;
+ width: 10em;
+ vertical-align: -0.2em;
+
+ /* Default style in case of there is -moz-appearance: none; */
+ border: 1px solid ThreeDShadow;
+ border-right-color: ThreeDHighlight;
+ border-bottom-color: ThreeDHighlight;
+ background-color: #e6e6e6;
+}
+
+div.progress-element.vertical {
+ height: 10em;
+ width: 1em;
+}
+
+div.progress-bar {
+ -moz-appearance: progresschunk;
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ box-sizing: border-box;
+
+ /* Default style in case of there is -moz-appearance: none; */
+ background-color: #0064b4;
+}
+
+progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
+ -moz-appearance: none;
+}
diff --git a/layout/reftests/forms/progress/transformations-ref.html b/layout/reftests/forms/progress/transformations-ref.html
new file mode 100644
index 0000000000..34f0d7151f
--- /dev/null
+++ b/layout/reftests/forms/progress/transformations-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ body > div:nth-child(2) { transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+ body > div:nth-child(3) { transform: rotate(30deg); }
+ body > div:nth-child(4) { transform: scale(2, 4); }
+ body > div:nth-child(5) { transform: scale(0.1, 0.4); }
+ body > div:nth-child(6) { transform: scale(1, 0.4); }
+ body > div:nth-child(7) { transform: scale(0.1, 1); }
+ body > div:nth-child(8) { transform: skew(30deg, -10deg); }
+ body > div:nth-child(9) { transform: skew(-30deg, 10deg); }
+ body > div:nth-child(10) { transform: translate(10px, 30px); }
+ body > div:nth-child(11) { transform: translate(30px, 10px); }
+ body > div:nth-child(12) { transform: translate(-10px, 30px); }
+ body > div:nth-child(13) { transform: translate(30px, -10px); }
+ body > div:nth-child(14) { transform: scale(0, 0); }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/transformations.html b/layout/reftests/forms/progress/transformations.html
new file mode 100644
index 0000000000..96a923c3f2
--- /dev/null
+++ b/layout/reftests/forms/progress/transformations.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress:nth-child(1) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ progress:nth-child(2) { transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+ progress:nth-child(3) { transform: rotate(30deg); }
+ progress:nth-child(4) { transform: scale(2, 4); }
+ progress:nth-child(5) { transform: scale(0.1, 0.4); }
+ progress:nth-child(6) { transform: scale(1, 0.4); }
+ progress:nth-child(7) { transform: scale(0.1, 1); }
+ progress:nth-child(8) { transform: skew(30deg, -10deg); }
+ progress:nth-child(9) { transform: skew(-30deg, 10deg); }
+ progress:nth-child(10) { transform: translate(10px, 30px); }
+ progress:nth-child(11) { transform: translate(30px, 10px); }
+ progress:nth-child(12) { transform: translate(-10px, 30px); }
+ progress:nth-child(13) { transform: translate(30px, -10px); }
+ progress:nth-child(14) { transform: scale(0, 0); }
+ </style>
+ <body>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-ref.html b/layout/reftests/forms/progress/values-ref.html
new file mode 100644
index 0000000000..d3c15bc8fb
--- /dev/null
+++ b/layout/reftests/forms/progress/values-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div:nth-child(1) > .progress-bar { width: 100%; }
+ div:nth-child(2) > .progress-bar { width: 0%; }
+ div:nth-child(3) > .progress-bar { width: 10%; }
+ div:nth-child(4) > .progress-bar { width: 50%; }
+ div:nth-child(5) > .progress-bar { width: 0%; }
+ div:nth-child(6) > .progress-bar { width: 100%; }
+ div:nth-child(7) > .progress-bar { width: 42%; }
+ div:nth-child(8) > .progress-bar { width: 100%; }
+ div:nth-child(9) > .progress-bar { width: 100%; }
+ div:nth-child(10) > .progress-bar { width: 10%; }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-rtl-ref.html b/layout/reftests/forms/progress/values-rtl-ref.html
new file mode 100644
index 0000000000..6787af2d70
--- /dev/null
+++ b/layout/reftests/forms/progress/values-rtl-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div:nth-child(1) > .progress-bar { width: 100%; }
+ div:nth-child(2) > .progress-bar { width: 0%; }
+ div:nth-child(3) > .progress-bar { width: 10%; }
+ div:nth-child(4) > .progress-bar { width: 50%; }
+ div:nth-child(5) > .progress-bar { width: 0%; }
+ div:nth-child(6) > .progress-bar { width: 100%; }
+ div:nth-child(7) > .progress-bar { width: 42%; }
+ div:nth-child(8) > .progress-bar { width: 100%; }
+ div:nth-child(9) > .progress-bar { width: 100%; }
+ div:nth-child(10) > .progress-bar { width: 10%; }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-rtl.html b/layout/reftests/forms/progress/values-rtl.html
new file mode 100644
index 0000000000..6a143b0c19
--- /dev/null
+++ b/layout/reftests/forms/progress/values-rtl.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body dir='rtl'>
+ <progress value="1.0"></progress>
+ <progress value="0.0"></progress>
+ <progress value="0.1"></progress>
+ <progress value="0.5"></progress>
+ <progress value="-1"></progress>
+ <progress value="42"></progress>
+ <progress value="42" max="100"></progress>
+ <progress value="42" max="1"></progress>
+ <progress value="42" max="-1"></progress>
+ <progress value="0.1" max="-1"></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-ref.html b/layout/reftests/forms/progress/values-vertical-ref.html
new file mode 100644
index 0000000000..43b3f7e20c
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
+ div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
+ </style>
+ <body>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-rtl-ref.html b/layout/reftests/forms/progress/values-vertical-rtl-ref.html
new file mode 100644
index 0000000000..88934c4876
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-rtl-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
+ div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-rtl.html b/layout/reftests/forms/progress/values-vertical-rtl.html
new file mode 100644
index 0000000000..b50db9ad2d
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ }
+ </style>
+ <body dir='rtl'>
+ <progress value="1.0"></progress>
+ <progress value="0.0"></progress>
+ <progress value="0.1"></progress>
+ <progress value="0.5"></progress>
+ <progress value="-1"></progress>
+ <progress value="42"></progress>
+ <progress value="42" max="100"></progress>
+ <progress value="42" max="1"></progress>
+ <progress value="42" max="-1"></progress>
+ <progress value="0.1" max="-1"></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical.html b/layout/reftests/forms/progress/values-vertical.html
new file mode 100644
index 0000000000..47294fdeb3
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ }
+ </style>
+ <body>
+ <progress value="1.0"></progress>
+ <progress value="0.0"></progress>
+ <progress value="0.1"></progress>
+ <progress value="0.5"></progress>
+ <progress value="-1"></progress>
+ <progress value="42"></progress>
+ <progress value="42" max="100"></progress>
+ <progress value="42" max="1"></progress>
+ <progress value="42" max="-1"></progress>
+ <progress value="0.1" max="-1"></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values.html b/layout/reftests/forms/progress/values.html
new file mode 100644
index 0000000000..3c5e3e80b7
--- /dev/null
+++ b/layout/reftests/forms/progress/values.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <progress value="1.0"></progress>
+ <progress value="0.0"></progress>
+ <progress value="0.1"></progress>
+ <progress value="0.5"></progress>
+ <progress value="-1"></progress>
+ <progress value="42"></progress>
+ <progress value="42" max="100"></progress>
+ <progress value="42" max="1"></progress>
+ <progress value="42" max="-1"></progress>
+ <progress value="0.1" max="-1"></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/reftest.list b/layout/reftests/forms/reftest.list
new file mode 100644
index 0000000000..b05924c3b7
--- /dev/null
+++ b/layout/reftests/forms/reftest.list
@@ -0,0 +1,40 @@
+fuzzy(0-1,0-10) fuzzy-if(Android,0-2,0-10) == text-control-baseline-1.html text-control-baseline-1-ref.html
+fuzzy-if(cocoaWidget,0-18,0-68) fuzzy-if(Android,0-52,0-64) fuzzy-if(winWidget,0-88,0-624) == display-block-baselines-1.html display-block-baselines-1-ref.html # anti-aliasing issues
+== display-block-baselines-2.html display-block-baselines-2-ref.html
+== display-block-baselines-3.html display-block-baselines-3-ref.html
+== display-block-baselines-4.html display-block-baselines-4-ref.html
+fuzzy(0-7,0-2) == display-block-baselines-5.html display-block-baselines-5-ref.html
+fuzzy(0-1,0-20) == overflow.html overflow-ref.html # bug 1620120 for natively themed cocoa, fuzzyness in the arrow for !native
+
+# button element
+include button/reftest.list
+
+# legend element
+include legend/reftest.list
+
+# fieldset element
+include fieldset/reftest.list
+
+# placeholder
+include placeholder/reftest.list
+
+# input
+include input/reftest.list
+
+# meter element
+include meter/reftest.list
+
+# output element
+include output/reftest.list
+
+# progress element
+include progress/reftest.list
+
+# select element
+include select/reftest.list
+
+# textarea element
+include textarea/reftest.list
+
+# textbox element
+include textbox/reftest.list
diff --git a/layout/reftests/forms/select/1769580-ref.html b/layout/reftests/forms/select/1769580-ref.html
new file mode 100644
index 0000000000..e6a4cb6577
--- /dev/null
+++ b/layout/reftests/forms/select/1769580-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+select {
+ appearance: none;
+ background: lightgray;
+ border: none;
+ text-indent: 0.01px;
+}
+</style>
+<select>
+ <option>16</option>
+</select>
diff --git a/layout/reftests/forms/select/1769580.html b/layout/reftests/forms/select/1769580.html
new file mode 100644
index 0000000000..00831f6997
--- /dev/null
+++ b/layout/reftests/forms/select/1769580.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+select {
+ appearance: none;
+ background: lightgray;
+ border: none;
+ text-indent: 0.01px;
+ text-overflow: "";
+}
+</style>
+<select>
+ <option>16</option>
+</select>
diff --git a/layout/reftests/forms/select/997709-2-ref.html b/layout/reftests/forms/select/997709-2-ref.html
new file mode 100644
index 0000000000..349abe0b77
--- /dev/null
+++ b/layout/reftests/forms/select/997709-2-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<html><body>
+<select style="display:block"><option>A</select>
+</body></html>
diff --git a/layout/reftests/forms/select/997709-2.html b/layout/reftests/forms/select/997709-2.html
new file mode 100644
index 0000000000..46be454185
--- /dev/null
+++ b/layout/reftests/forms/select/997709-2.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<html><body>
+<select style="display:flex"><option>A</select>
+</body></html>
diff --git a/layout/reftests/forms/select/arrow-color-notref.html b/layout/reftests/forms/select/arrow-color-notref.html
new file mode 100644
index 0000000000..b4869de4dd
--- /dev/null
+++ b/layout/reftests/forms/select/arrow-color-notref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<select style="color: black">
+ <option>&nbsp;</option>
+</select>
diff --git a/layout/reftests/forms/select/arrow-color.html b/layout/reftests/forms/select/arrow-color.html
new file mode 100644
index 0000000000..fab72e5e2a
--- /dev/null
+++ b/layout/reftests/forms/select/arrow-color.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<select style="color: white">
+ <option>&nbsp;</option>
+</select>
diff --git a/layout/reftests/forms/select/boguskids-ref.html b/layout/reftests/forms/select/boguskids-ref.html
new file mode 100644
index 0000000000..905b646493
--- /dev/null
+++ b/layout/reftests/forms/select/boguskids-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select size="10">
+ <option>one</option>
+ <option>two</option>
+ <optgroup>
+ <option>three</option>
+ <option>four</option>
+ </optgroup>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/boguskids.html b/layout/reftests/forms/select/boguskids.html
new file mode 100644
index 0000000000..102f820c84
--- /dev/null
+++ b/layout/reftests/forms/select/boguskids.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select size="10">
+ Shouldn't see me
+ <option>one</option>
+ Or me
+ <option>two</option>
+ <optgroup>
+ I should hide too
+ <option>three</option>
+ And me too
+ <option>four</option>
+ </optgroup>
+ And I
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/dynamic-boguskids.html b/layout/reftests/forms/select/dynamic-boguskids.html
new file mode 100644
index 0000000000..2a6b7c2614
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-boguskids.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script>
+ function doIt() {
+ var insertions = [
+ [ "opt1", "Shouldn't see me" ],
+ [ "opt2", "Or me" ],
+ [ "opt3", "I should hide too" ],
+ [ "opt4", "And me too" ]
+ ];
+ for (var i = 0; i < insertions.length; ++i) {
+ var next = document.getElementById(insertions[i][0]);
+ next.parentNode.insertBefore(document.createTextNode(insertions[i][1]),
+ next);
+ }
+ document.getElementById("sel").appendChild(document.createTextNode("And I"));
+ }
+ </script>
+ </head>
+ <body onload="doIt()">
+ <select size="10" id="sel">
+ <option id="opt1">one</option>
+ <option id="opt2">two</option>
+ <optgroup>
+ <option id="opt3">three</option>
+ <option id="opt4">four</option>
+ </optgroup>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/dynamic-text-indent-1-ref.html b/layout/reftests/forms/select/dynamic-text-indent-1-ref.html
new file mode 100644
index 0000000000..806fc525a0
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-text-indent-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<select style="text-indent: 15px">
+ <option selected>Text<option>
+</select>
diff --git a/layout/reftests/forms/select/dynamic-text-indent-1.html b/layout/reftests/forms/select/dynamic-text-indent-1.html
new file mode 100644
index 0000000000..6f2b5f3448
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-text-indent-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <select>
+ <option selected>Text<option>
+ </select>
+ <script>
+ onload = function() {
+ var s = document.querySelector("select");
+ window.w = s.offsetWidth;
+ s.style.textIndent = "15px";
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/forms/select/dynamic-text-overflow-1-ref.html b/layout/reftests/forms/select/dynamic-text-overflow-1-ref.html
new file mode 100644
index 0000000000..8de69cf5cc
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-text-overflow-1-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<select style="width: 100px; overflow: hidden; text-overflow: ellipsis;">
+ <option selected>Text that is long enough that it totally overflows<option>
+</select>
diff --git a/layout/reftests/forms/select/dynamic-text-overflow-1.html b/layout/reftests/forms/select/dynamic-text-overflow-1.html
new file mode 100644
index 0000000000..4d954f6981
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-text-overflow-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <select style="width: 100px; overflow: hidden;">
+ <option selected>Text that is long enough that it totally overflows<option>
+ </select>
+ <script>
+ onload = function() {
+ var s = document.querySelector("select");
+ window.w = s.offsetWidth;
+ s.style.textOverflow = "ellipsis";
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/forms/select/focusring-1-ref.html b/layout/reftests/forms/select/focusring-1-ref.html
new file mode 100644
index 0000000000..9f01908fd5
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>Testcase #1 for bug 1253977</title>
+ <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+ border:2px solid black;
+}
+:-moz-focusring {
+ outline: 2px dashed black;
+}
+
+ </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+<input>
+
+<script>
+
+function runTests() {
+ var b = document.querySelector("input");
+ b.focus();
+ document.body.offsetHeight;
+ setTimeout(function(){ document.body.offsetHeight; document.documentElement.removeAttribute("class"); }, 100);
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-1.html b/layout/reftests/forms/select/focusring-1.html
new file mode 100644
index 0000000000..e384bd4097
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>Testcase #1 for bug 1253977</title>
+ <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+ border:2px solid black;
+}
+:-moz-focusring {
+ outline: 2px dashed black;
+}
+
+ </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+<input>
+
+<script>
+
+function runTests() {
+ var s = document.querySelector("select");
+ var b = document.querySelector("input");
+ s.focus();
+ document.body.offsetHeight;
+ setTimeout(function(){ s.style.display = 'none'; document.body.offsetHeight; }, 2);
+ setTimeout(function(){ b.focus(); document.body.offsetHeight; }, 3);
+ setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4);
+ setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100);
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-2-ref.html b/layout/reftests/forms/select/focusring-2-ref.html
new file mode 100644
index 0000000000..c7c16a5e5e
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-2-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html><head>
+ <meta charset="utf-8">
+ <title>Testcase #2 for bug 1253977</title>
+ <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+ border:2px solid black;
+}
+:-moz-focusring {
+ outline: 2px dashed black;
+}
+
+ </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-2.html b/layout/reftests/forms/select/focusring-2.html
new file mode 100644
index 0000000000..e2656b2485
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-2.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+ <meta charset="utf-8">
+ <title>Testcase #2 for bug 1253977</title>
+ <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+ border:2px solid black;
+}
+:-moz-focusring {
+ outline: 2px dashed black;
+}
+
+ </style>
+</head>
+<body>
+
+<select onfocus="continueTest1()" onblur="continueTest2()"><option>1<option>2</select>
+
+<script>
+
+function continueTest2(){
+ var s = document.querySelector("select");
+ setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4);
+ setTimeout(function(){ document.body.offsetHeight; document.documentElement.removeAttribute("class"); }, 100);
+}
+
+function continueTest1(){
+ var s = document.querySelector("select");
+ setTimeout(function(){ s.style.display = 'none'; }, 2);
+ setTimeout(function(){ s.blur(); document.body.offsetHeight; }, 3);
+}
+
+function runTests(){
+ var s = document.querySelector("select");
+ s.focus();
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/intrinsic-size-scrollbar.html b/layout/reftests/forms/select/intrinsic-size-scrollbar.html
new file mode 100644
index 0000000000..091bd989c5
--- /dev/null
+++ b/layout/reftests/forms/select/intrinsic-size-scrollbar.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<select><option>ABC</option></select>
diff --git a/layout/reftests/forms/select/listbox-checked-style-notref.html b/layout/reftests/forms/select/listbox-checked-style-notref.html
new file mode 100644
index 0000000000..3b78fbac50
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-checked-style-notref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+ option {
+ background-color: purple;
+ color: white;
+ }
+</style>
+<select autofocus size="2">
+ <option selected>A</option>
+ <option>B</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-checked-style-ref.html b/layout/reftests/forms/select/listbox-checked-style-ref.html
new file mode 100644
index 0000000000..c48bc81225
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-checked-style-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+ option {
+ background-color: purple;
+ color: white;
+ }
+</style>
+<select size="2">
+ <option>A</option>
+ <option>B</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-checked-style.html b/layout/reftests/forms/select/listbox-checked-style.html
new file mode 100644
index 0000000000..1eb33817f6
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-checked-style.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<style>
+ option {
+ background-color: purple;
+ color: white;
+ }
+</style>
+<select size="2">
+ <option selected>A</option>
+ <option>B</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-focus-notref.html b/layout/reftests/forms/select/listbox-focus-notref.html
new file mode 100644
index 0000000000..d76865abbf
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-focus-notref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+ select {
+ appearance: none;
+ outline: none;
+ border: none;
+ }
+</style>
+<select multiple>
+ <option>First</option>
+ <option>Second</option>
+ <option>Third</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-focus.html b/layout/reftests/forms/select/listbox-focus.html
new file mode 100644
index 0000000000..0689ed43b8
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-focus.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+ select {
+ appearance: none;
+ outline: none;
+ border: none;
+ }
+</style>
+<select multiple autofocus>
+ <option>First</option>
+ <option>Second</option>
+ <option>Third</option>
+</select>
diff --git a/layout/reftests/forms/select/listbox-zero-row-initial-ref.html b/layout/reftests/forms/select/listbox-zero-row-initial-ref.html
new file mode 100644
index 0000000000..e7b2ec673a
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-zero-row-initial-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>Reference for initial reflow of zero height options</title>
+<style>
+
+ html { overflow: hidden }
+ option { height: 0; min-height: 0 }
+
+</style>
+
+<select size="3">
+ <option>One</option>
+ <option>Two</option>
+ <option>Three</option>
+</select>
+
+<script>
+
+ document.body.offsetHeight; // flush layout
+ document.body.style.fontSize = "60px";
+ document.body.offsetHeight; // flush layout
+ document.body.style.fontSize = "";
+
+</script>
diff --git a/layout/reftests/forms/select/listbox-zero-row-initial.html b/layout/reftests/forms/select/listbox-zero-row-initial.html
new file mode 100644
index 0000000000..1ff6549da2
--- /dev/null
+++ b/layout/reftests/forms/select/listbox-zero-row-initial.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<title>Testcase for initial reflow of zero height options</title>
+<style>
+
+ html { overflow: hidden }
+ option { height: 0; min-height: 0 }
+
+</style>
+
+<select size="3">
+ <option>One</option>
+ <option>Two</option>
+ <option>Three</option>
+</select>
diff --git a/layout/reftests/forms/select/multiple-ref.html b/layout/reftests/forms/select/multiple-ref.html
new file mode 100644
index 0000000000..70bdac6bc3
--- /dev/null
+++ b/layout/reftests/forms/select/multiple-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select size='4'>
+ <option>Tulip</option>
+ <option>Lily</option>
+ <option>Gagea</option>
+ <option>Snowflake</option>
+ <option>Ismene</option>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/multiple.html b/layout/reftests/forms/select/multiple.html
new file mode 100644
index 0000000000..6b95eebc56
--- /dev/null
+++ b/layout/reftests/forms/select/multiple.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <select multiple>
+ <option>Tulip</option>
+ <option>Lily</option>
+ <option>Gagea</option>
+ <option>Snowflake</option>
+ <option>Ismene</option>
+ </select>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/no-padding-ref.html b/layout/reftests/forms/select/no-padding-ref.html
new file mode 100644
index 0000000000..6ba141c627
--- /dev/null
+++ b/layout/reftests/forms/select/no-padding-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<button style="color: black; border: 1px solid; appearance: none; padding: 0">ABC</button>
diff --git a/layout/reftests/forms/select/no-padding.html b/layout/reftests/forms/select/no-padding.html
new file mode 100644
index 0000000000..8784b7b750
--- /dev/null
+++ b/layout/reftests/forms/select/no-padding.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<select style="color: black; border: 1px solid; appearance: none; padding: 0;"><option>ABC</option></select>
diff --git a/layout/reftests/forms/select/option-children-ref.html b/layout/reftests/forms/select/option-children-ref.html
new file mode 100644
index 0000000000..09f6d19f09
--- /dev/null
+++ b/layout/reftests/forms/select/option-children-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Option elements with children</title>
+<body>
+<select><option>font</option></select>
diff --git a/layout/reftests/forms/select/option-children.html b/layout/reftests/forms/select/option-children.html
new file mode 100644
index 0000000000..357247b567
--- /dev/null
+++ b/layout/reftests/forms/select/option-children.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Option elements with children</title>
+<body>
+<script>
+document.body
+ .appendChild(document.createElement("select"))
+ .appendChild(document.createElement("option"))
+ .appendChild(document.createElement("font"))
+ .appendChild(document.createTextNode("font"))
+</script>
diff --git a/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html b/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html
new file mode 100644
index 0000000000..4130241765
--- /dev/null
+++ b/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html
@@ -0,0 +1,112 @@
+<html class="reftest-wait">
+<head><title>Testcase for bug 471741</title>
+<script>
+function sel(id,index) {
+ var el = document.getElementById(id)
+ el.selectedIndex = index;
+}
+
+</script>
+</head>
+<body>
+<select size="4" id="m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="m3" multiple="multiple"></select>
+<select size="1" id="s3"></select>
+<br>
+
+<select size="4" id="r2m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="r2s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r2m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="r2s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r2m3" multiple="multiple"></select>
+<select size="1" id="r2s3"></select>
+<br>
+
+<select size="4" id="r3m1" multiple="multiple">
+ <option selected="selected" value="Item0">Item0</option>
+ <option value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="r3s1">
+ <option selected="selected" value="Item0">Item0</option>
+ <option value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r3m2" multiple="multiple">
+ <option selected="selected" value="Item0">Item0</option>
+</select>
+<select size="1" id="r3s2">
+ <option selected="selected" value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r3m3" multiple="multiple"></select>
+<select size="1" id="r3s3"></select>
+<br>
+
+<div id="result">Result: -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 0 0 0 0 -1 -1 </div>
+
+<script>
+sel('m1', -1)
+sel('s1', -1)
+sel('m2', -1)
+sel('s2', -1)
+sel('m3', -1)
+sel('s3', -1)
+
+sel('r2m1', -1)
+sel('r2s1', -1)
+sel('r2m2', -1)
+sel('r2s2', -1)
+sel('r2m3', -1)
+sel('r2s3', -1)
+
+var flush = document.documentElement.offsetHeight;
+document.documentElement.className='';
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/select/out-of-bounds-selectedindex.html b/layout/reftests/forms/select/out-of-bounds-selectedindex.html
new file mode 100644
index 0000000000..4ae9ed06b6
--- /dev/null
+++ b/layout/reftests/forms/select/out-of-bounds-selectedindex.html
@@ -0,0 +1,129 @@
+<html class="reftest-wait">
+<head><title>Testcase for bug 471741</title>
+<script>
+var result = "Result: "
+function sel(id,index) {
+ var el = document.getElementById(id)
+ el.selectedIndex = index;
+ result += el.selectedIndex + ' ';
+}
+
+</script>
+</head>
+<body id="body">
+<select size="4" id="m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="m3" multiple="multiple"></select>
+<select size="1" id="s3"></select>
+<br>
+
+<select size="4" id="r2m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="r2s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r2m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="r2s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r2m3" multiple="multiple"></select>
+<select size="1" id="r2s3"></select>
+<br>
+
+<select size="4" id="r3m1" multiple="multiple">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+<select size="1" id="r3s1">
+ <option value="Item0">Item0</option>
+ <option selected="selected" value="Item1">Item1</option>
+ <option value="Item2">Item2</option>
+ <option value="Item3">Item3</option>
+ <option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r3m2" multiple="multiple">
+ <option value="Item0">Item0</option>
+</select>
+<select size="1" id="r3s2">
+ <option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r3m3" multiple="multiple"></select>
+<select size="1" id="r3s3"></select>
+<br>
+
+<div id="result"></div>
+
+<script>
+sel('m1', 10)
+sel('s1', 10)
+sel('m2', 99999)
+sel('s2', 99999)
+sel('m3', 10)
+sel('s3', 10)
+
+sel('r2m1', -2)
+sel('r2s1', -2)
+sel('r2m2', -12)
+sel('r2s2', -12)
+sel('r2m3', -2)
+sel('r2s3', -2)
+
+sel('r3m1', -2)
+sel('r3s1', -2)
+sel('r3m2', -12)
+sel('r3s2', -12)
+sel('r3m3', -2)
+sel('r3s3', -2)
+sel('r3m1', 0)
+sel('r3s1', 0)
+sel('r3m2', 0)
+sel('r3s2', 0)
+sel('r3m3', 0)
+sel('r3s3', 0)
+
+document.getElementById('result').innerHTML = result;
+
+var flush = document.documentElement.offsetHeight;
+document.documentElement.className='';
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/select/padding-button-placement-ref.html b/layout/reftests/forms/select/padding-button-placement-ref.html
new file mode 100644
index 0000000000..342b404c6d
--- /dev/null
+++ b/layout/reftests/forms/select/padding-button-placement-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ </head>
+ <body>
+ <div style="box-sizing:border-box; width:402px; height:202px; border:1px solid black; border-right:50px solid black;"></div>
+ <div style="box-sizing:border-box; width:402px; height:202px; border:1px solid black; border-left:50px solid black;"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/padding-button-placement.html b/layout/reftests/forms/select/padding-button-placement.html
new file mode 100644
index 0000000000..3707150321
--- /dev/null
+++ b/layout/reftests/forms/select/padding-button-placement.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ </head>
+ <body>
+ <!-- The div's border should hide the select's button -->
+ <!-- z-index:1 works around an unrelated bug in B2G -->
+ <div style="position:absolute; z-index:1; box-sizing:border-box; width:402px; height:202px; border-right:50px solid black;"></div>
+ <div><select style="background:transparent; border-radius:0; box-sizing:content-box; padding:50px; width:300px; height:100px; border:1px solid black; direction:ltr"></select></div>
+
+ <div style="position:absolute; z-index:1; box-sizing:border-box; width:402px; height:202px; border-left:50px solid black;"></div>
+ <div><select style="background:transparent; border-radius:0; box-sizing:content-box; padding:50px; width:300px; height:100px; border:1px solid black; direction:rtl"></select></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/select/reftest.list b/layout/reftests/forms/select/reftest.list
new file mode 100644
index 0000000000..d2d1c1be6d
--- /dev/null
+++ b/layout/reftests/forms/select/reftest.list
@@ -0,0 +1,31 @@
+fuzzy-if(Android,0-4,0-12) == out-of-bounds-selectedindex.html out-of-bounds-selectedindex-ref.html # test for bug 471741
+== multiple.html multiple-ref.html
+== boguskids.html boguskids-ref.html
+== dynamic-boguskids.html boguskids-ref.html
+== option-children.html option-children-ref.html
+fuzzy(0-1,0-4) == padding-button-placement.html padding-button-placement-ref.html
+== vertical-centering.html vertical-centering-ref.html
+== 997709-2.html 997709-2-ref.html
+fuzzy(0-4,0-1) needs-focus == focusring-1.html focusring-1-ref.html
+needs-focus == focusring-2.html focusring-2-ref.html
+== dynamic-text-indent-1.html dynamic-text-indent-1-ref.html
+== dynamic-text-overflow-1.html dynamic-text-overflow-1-ref.html
+== listbox-zero-row-initial.html listbox-zero-row-initial-ref.html
+skip-if(Android) == select-option-display-none-inline-size.html select-option-display-none-inline-size-ref.html
+
+# Android and Windows actually use the anonymous select > button (rather than
+# drawing the arrow as a background like Linux and Mac), so most of this test
+# doesn't apply since when over-constrained it gets zero-sized.
+skip-if(Android||winWidget) == themed-select-padding-no-clip.html themed-select-padding-no-clip-ref.html
+
+== select-scrollbar-width.html select-scrollbar-width-ref.html
+test-pref(ui.useOverlayScrollbars,0) ref-pref(ui.useOverlayScrollbars,1) == intrinsic-size-scrollbar.html intrinsic-size-scrollbar.html
+
+== listbox-checked-style.html listbox-checked-style-ref.html
+needs-focus != listbox-checked-style.html listbox-checked-style-notref.html
+needs-focus != listbox-focus.html listbox-focus-notref.html
+
+== 1769580.html 1769580-ref.html
+
+== no-padding.html no-padding-ref.html
+!= arrow-color.html arrow-color-notref.html
diff --git a/layout/reftests/forms/select/select-option-display-none-inline-size-ref.html b/layout/reftests/forms/select/select-option-display-none-inline-size-ref.html
new file mode 100644
index 0000000000..c10490b0e8
--- /dev/null
+++ b/layout/reftests/forms/select/select-option-display-none-inline-size-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Reference: SELECT size with display:none OPTION</title>
+</head>
+<body>
+
+<select><option>option</select>
+<select style="-webkit-appearance: none"><option>option</select>
+<select style="-webkit-appearance: none; border: 1px solid black"><option>option</select>
+<select style="border: 1px solid black"><option>option</select>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/select-option-display-none-inline-size.html b/layout/reftests/forms/select/select-option-display-none-inline-size.html
new file mode 100644
index 0000000000..ece010df4c
--- /dev/null
+++ b/layout/reftests/forms/select/select-option-display-none-inline-size.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+ <meta charset="utf-8">
+ <title>Test: SELECT size with display:none OPTION</title>
+ <style>
+
+.none { display: none; }
+
+ </style>
+</head>
+<body>
+
+<select><option class="none">option</select>
+<select style="-webkit-appearance: none"><option class="none">option</select>
+<select style="-webkit-appearance: none; border: 1px solid black"><option class="none">option</select>
+<select style="border: 1px solid black"><option class="none">option</select>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/select-scrollbar-width-ref.html b/layout/reftests/forms/select/select-scrollbar-width-ref.html
new file mode 100644
index 0000000000..1a411340f8
--- /dev/null
+++ b/layout/reftests/forms/select/select-scrollbar-width-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<select style="border: 1px solid"><option>ABCDE</option></select>
diff --git a/layout/reftests/forms/select/select-scrollbar-width.html b/layout/reftests/forms/select/select-scrollbar-width.html
new file mode 100644
index 0000000000..fb2b627a83
--- /dev/null
+++ b/layout/reftests/forms/select/select-scrollbar-width.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<select style="scrollbar-width: thin; border: 1px solid"><option>ABCDE</option></select>
diff --git a/layout/reftests/forms/select/themed-select-padding-no-clip-ref.html b/layout/reftests/forms/select/themed-select-padding-no-clip-ref.html
new file mode 100644
index 0000000000..d8f5fd7b43
--- /dev/null
+++ b/layout/reftests/forms/select/themed-select-padding-no-clip-ref.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>Bug 1561794 - padding-inline-end does not clip display text for themed comboboxes.</title>
+<style>
+ select, .unthemed {
+ font: 16px / 1 monospace;
+ width: 20ch;
+ display: block;
+ }
+ .unthemed {
+ box-sizing: border-box;
+ border: 1px solid grey;
+ }
+</style>
+<!--- Ensure the text isn't chopped -->
+<select><option>XXXXXXXXXXXX</option></select>
+<select><option>X XXXXXXXXXX</option></select>
+
+<!--- Test that the display text doesn't overflow the select. -->
+<select style="overflow: hidden"><option>XXXXXXXXXXXXXXXXXX</option></select>
+
+<!-- Test that this only affects themed comboboxes -->
+<div class="unthemed" style="padding-right: 15ch"><div style="padding: 1px 4px; overflow: hidden;">XXXXXXXXXX</div></div>
+
+<select id="src" style="padding-left: 10ch; padding-right: 10ch"><option>XXXXXXXXXX</option></select>
+<select id="ref" style="padding-left: 10ch;"><option>XXXXXXXXXX</option></select>
+<script>
+ // This one is a bit special, because we want `ref` to have the same size as
+ // `src`, which for some reason, with or without the patch for this bug,
+ // grows outside the specified width. Given this width depends on scrollbar,
+ // width, which is platform dependent, we just calculate it from `src`, and
+ // then hide it.
+ //
+ // We just really want to test that the padding right doesn't clip the text
+ // anyhow.
+ ref.style.width = getComputedStyle(src).width;
+ src.style.display = "none";
+</script>
diff --git a/layout/reftests/forms/select/themed-select-padding-no-clip.html b/layout/reftests/forms/select/themed-select-padding-no-clip.html
new file mode 100644
index 0000000000..d353ecc871
--- /dev/null
+++ b/layout/reftests/forms/select/themed-select-padding-no-clip.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>Bug 1561794 - padding-inline-end does not clip display text for themed comboboxes.</title>
+<style>
+ select {
+ font: 16px / 1 monospace;
+ width: 20ch;
+ display: block;
+ }
+ .unthemed {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ border: 1px solid grey;
+ background: transparent;
+ }
+</style>
+<!--- Ensure the text isn't chopped -->
+<select style="padding-right: 15ch"><option>XXXXXXXXXXXX</option></select>
+<select style="padding-right: 15ch"><option>X XXXXXXXXXX</option></select>
+
+<!--- Test that the display text doesn't overflow the select. It'd be nice to test it doesn't overlap the button (which is true), but that seems hard to test via a reftest -->
+<select style="padding-right: 15ch"><option>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</option></select>
+
+<!-- Test that this only affects themed comboboxes; 4px is the padding-inline-start of the comboboxcontrol-frame anon box, so as to clip exactly at a character boundary. -->
+<select class="unthemed" style="color: initial; padding-right: 15ch"><option>XXXXXXXXXX</option></select>
+
+<select style="padding-left: 10ch; padding-right: 10ch"><option>XXXXXXXXXX</option></select>
diff --git a/layout/reftests/forms/select/vertical-centering-ref.html b/layout/reftests/forms/select/vertical-centering-ref.html
new file mode 100644
index 0000000000..82bbb7d3d0
--- /dev/null
+++ b/layout/reftests/forms/select/vertical-centering-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+ @font-face {
+ font-family: "Ahem";
+ src: url(../../fonts/Ahem.ttf);
+ }
+ select {
+ -moz-appearance: none;
+ border: none;
+ font: 20px/1 Ahem;
+ box-sizing: content-box;
+ /* The testcase has 20px-tall text, which should be centered in a 40px-tall
+ content-box (with 10px of extra space above and below). We emulate that
+ by having explicit 10px of padding on top and bottom. */
+ padding: 10px 0 10px 0;
+ }
+</style>
+<select>
+ <option>X</option>
+</select>
diff --git a/layout/reftests/forms/select/vertical-centering.html b/layout/reftests/forms/select/vertical-centering.html
new file mode 100644
index 0000000000..fb464395d5
--- /dev/null
+++ b/layout/reftests/forms/select/vertical-centering.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+ @font-face {
+ font-family: "Ahem";
+ src: url(../../fonts/Ahem.ttf);
+ }
+ select {
+ -moz-appearance: none;
+ border: none;
+ font: 20px/1 Ahem;
+ box-sizing: content-box;
+ height: 40px;
+ padding: 0;
+ }
+</style>
+<select>
+ <option>X</option>
+</select>
diff --git a/layout/reftests/forms/text-control-baseline-1-ref.html b/layout/reftests/forms/text-control-baseline-1-ref.html
new file mode 100644
index 0000000000..f46e55f1d2
--- /dev/null
+++ b/layout/reftests/forms/text-control-baseline-1-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title>Reference for bug 481751</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);
+ }
+ body {
+ background-color: white;
+ }
+ input, textarea {
+ font-family: "MarkA", sans-serif;
+ font-size: 32px;
+ background-color: black;
+ color: black;
+ vertical-align: baseline;
+ }
+ </style>
+</head>
+<body>
+ <input size="2" value="A">
+ <input size="2" value="A">
+ <textarea cols="2">A</textarea>
+ <textarea cols="2">A</textarea>
+</body>
+</html>
diff --git a/layout/reftests/forms/text-control-baseline-1.html b/layout/reftests/forms/text-control-baseline-1.html
new file mode 100644
index 0000000000..080eeb5cd4
--- /dev/null
+++ b/layout/reftests/forms/text-control-baseline-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title>Test for bug 481751</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <!--
+ The primary font MarkA has a small line height. The default 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 change the baseline (and thus position) of the text
+ control.
+ -->
+ <style type="text/css">
+ @font-face {
+ font-family: "MarkA";
+ src: url(../fonts/markA.ttf);
+ }
+ body {
+ background-color: white;
+ }
+ input, textarea {
+ font-family: "MarkA", sans-serif;
+ font-size: 32px;
+ background-color: black;
+ color: black;
+ vertical-align: baseline;
+ }
+ </style>
+</head>
+<body>
+ <input size="2" value="A">
+ <input size="2" value="A1">
+ <textarea cols="2">A</textarea>
+ <textarea cols="2">A1</textarea>
+</body>
+</html>
diff --git a/layout/reftests/forms/textarea/appearance-background-change-ref.html b/layout/reftests/forms/textarea/appearance-background-change-ref.html
new file mode 100644
index 0000000000..df5585213e
--- /dev/null
+++ b/layout/reftests/forms/textarea/appearance-background-change-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<style>
+ textarea, input {
+ background: transparent;
+ }
+</style>
+<textarea>FOO BAR</textarea><br>
+<input value="FOO BAR">
diff --git a/layout/reftests/forms/textarea/appearance-background-change.html b/layout/reftests/forms/textarea/appearance-background-change.html
new file mode 100644
index 0000000000..d1c7730513
--- /dev/null
+++ b/layout/reftests/forms/textarea/appearance-background-change.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<textarea>FOO BAR</textarea><br>
+<input value="FOO BAR">
+<script>
+onload = function() {
+ for (let e of document.querySelectorAll("input, textarea")) {
+ e.getBoundingClientRect().top;
+ e.style.background = "transparent";
+ }
+}
+</script>
diff --git a/layout/reftests/forms/textarea/in-dynamic-rtl-doc.html b/layout/reftests/forms/textarea/in-dynamic-rtl-doc.html
new file mode 100644
index 0000000000..c8afa20cf2
--- /dev/null
+++ b/layout/reftests/forms/textarea/in-dynamic-rtl-doc.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body style="text-align: left">
+ <textarea cols=20 rows=4></textarea>
+ <script>
+ onload = function() {
+ setTimeout(function() {
+ document.dir = "rtl";
+ document.documentElement.removeAttribute("class");
+ });
+ };
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html b/layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html
new file mode 100644
index 0000000000..e6b14358ec
--- /dev/null
+++ b/layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html dir="ltr">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body>
+ <textarea cols=20 rows=4 style="overflow: scroll; resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html b/layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html
new file mode 100644
index 0000000000..8c915b5ee9
--- /dev/null
+++ b/layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html dir="rtl">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body>
+ <textarea cols=20 rows=4 style="float: left; overflow: scroll; resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/ltr-scrollbar.html b/layout/reftests/forms/textarea/ltr-scrollbar.html
new file mode 100644
index 0000000000..927fbede66
--- /dev/null
+++ b/layout/reftests/forms/textarea/ltr-scrollbar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body>
+ <textarea dir="ltr" cols=20 rows=4 style="overflow: scroll; resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/ltr.html b/layout/reftests/forms/textarea/ltr.html
new file mode 100644
index 0000000000..c7e84be0e2
--- /dev/null
+++ b/layout/reftests/forms/textarea/ltr.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body>
+ <textarea cols=20 rows=4></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/no-resize.html b/layout/reftests/forms/textarea/no-resize.html
new file mode 100644
index 0000000000..fbf8796532
--- /dev/null
+++ b/layout/reftests/forms/textarea/no-resize.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body>
+ <textarea cols=20 rows=4 style="resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html b/layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html
new file mode 100644
index 0000000000..40a639eb94
--- /dev/null
+++ b/layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title>Padding and Scrollbar Placement Test Reference</title>
+ <style>input, textarea { border-radius:0; background:none; border:none; }</style>
+ <style type="text/css">
+ #t {
+ display: block;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ padding: 50px;
+ width: 300px;
+ height: 100px;
+ border: 5px solid red;
+ margin: 10px;
+ overflow: scroll;
+ font-family: verdana;
+ white-space: pre-wrap;
+ z-index: 0; /* force a stacking context */
+ }
+ #cover {
+ position: absolute;
+ left: 400px;
+ top: 50px;
+ width: 100px;
+ height: 300px;
+ background: black;
+ }
+ </style>
+ </head>
+ <body>
+ <script>
+ var ss = [];
+ for (var i = 0; i < 1000; ++i) {
+ ss.push(i);
+ }
+ document.write("<div id='t'>" + ss.join(" ") + "</div>");
+ </script>
+ <div id="cover"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/padding-scrollbar-placement.html b/layout/reftests/forms/textarea/padding-scrollbar-placement.html
new file mode 100644
index 0000000000..e1b0d7d672
--- /dev/null
+++ b/layout/reftests/forms/textarea/padding-scrollbar-placement.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title>Padding and Scrollbar Placement Test</title>
+ <style>input, textarea { border-radius:0; background:none; border:none; }</style>
+ <style type="text/css">
+ #t {
+ display: block;
+ position: absolute;
+ left: 50px;
+ top: 50px;
+ padding: 50px;
+ width: 300px;
+ height: 100px;
+ border: 5px solid red;
+ margin: 10px;
+ overflow: scroll;
+ font-family: verdana;
+ resize: none;
+ color: black;
+ z-index: 0; /* force a stacking context */
+ }
+ #cover {
+ position: absolute;
+ left: 400px;
+ top: 50px;
+ width: 100px;
+ height: 300px;
+ background: black;
+ }
+ </style>
+ </head>
+ <body>
+ <script>
+ var ss = [];
+ for (var i = 0; i < 1000; ++i) {
+ ss.push(i);
+ }
+ document.write("<textarea id='t'>" + ss.join(" ") + "</textarea>");
+ </script>
+ <div id="cover"></div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/padding-text-overflow-notref.html b/layout/reftests/forms/textarea/padding-text-overflow-notref.html
new file mode 100644
index 0000000000..78edebcad7
--- /dev/null
+++ b/layout/reftests/forms/textarea/padding-text-overflow-notref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<style>
+ textarea {
+ width: 100px;
+ height: 100px;
+ box-sizing: border-box;
+ padding: 50px 0px;
+ overflow: hidden;
+ resize: none;
+ }
+</style>
+<textarea></textarea>
diff --git a/layout/reftests/forms/textarea/padding-text-overflow.html b/layout/reftests/forms/textarea/padding-text-overflow.html
new file mode 100644
index 0000000000..92cc4f38ec
--- /dev/null
+++ b/layout/reftests/forms/textarea/padding-text-overflow.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<style>
+ textarea {
+ width: 100px;
+ height: 100px;
+ box-sizing: border-box;
+ padding: 50px 0px;
+ overflow: hidden;
+ resize: none;
+ }
+</style>
+<!-- Text should be visible -->
+<textarea>Foo</textarea>
diff --git a/layout/reftests/forms/textarea/reftest.list b/layout/reftests/forms/textarea/reftest.list
new file mode 100644
index 0000000000..f27e99726e
--- /dev/null
+++ b/layout/reftests/forms/textarea/reftest.list
@@ -0,0 +1,18 @@
+== resize.html resize-ref.html
+== resize-vertical.html resize-ref.html
+== resize-rtl.html resize-rtl-ref.html
+== resize-rtl-vertical.html resize-rtl-ref.html
+# an offset seems to apply to the native resizer on windows so skip this test for now
+skip-if(Android) skip-if(winWidget) fuzzy-if(cocoaWidget,0-1,0-33) fuzzy-if(!winWidget&&!Android,0-5,0-10) == resize-background.html resize-background-ref.html
+skip-if(Android) != ltr.html rtl.html
+skip-if(Android) != ltr-scrollbar.html rtl-scrollbar.html
+skip-if(Android) != in-ltr-doc-scrollbar.html in-rtl-doc-scrollbar.html
+skip-if(Android) != ltr.html no-resize.html
+skip-if(Android) != rtl.html no-resize.html # bug 834724
+fuzzy(0-1,0-1) == rtl.html rtl-dynamic-attr.html
+fuzzy(0-1,0-1) == rtl.html rtl-dynamic-style.html
+== rtl.html in-dynamic-rtl-doc.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,0-102,0-4168) == padding-scrollbar-placement.html padding-scrollbar-placement-ref.html
+== various-cols.html various-cols-ref.html
+== appearance-background-change.html appearance-background-change-ref.html
+!= padding-text-overflow.html padding-text-overflow-notref.html
diff --git a/layout/reftests/forms/textarea/resize-background-ref.html b/layout/reftests/forms/textarea/resize-background-ref.html
new file mode 100644
index 0000000000..9217ffaf86
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-background-ref.html
@@ -0,0 +1,30 @@
+<html>
+<script>
+function sizeResizer() {
+ // reference resizer
+ var img = document.getElementsByTagName("img")[0];
+ // hidden textarea
+ var textarea = document.getElementsByTagName("textarea")[0];
+ var width = 200 - textarea.clientWidth;
+ var height = 200 - textarea.clientHeight;
+ // (Leave test failing if a scrollbar is missing)
+ if (width != 0 && height != 0) {
+ img.style.width = width + "px";
+ img.style.left = textarea.clientWidth + "px";
+ img.style.height = height + "px";
+ img.style.top = textarea.clientHeight + "px";
+ }
+}
+</script>
+<body onload="sizeResizer()">
+<textarea style="width: 200px; height: 200px; margin: 0; border: none;
+ background: red; font-size: 400px;">
+M
+</textarea>
+<div style="position: relative; top: -200px;
+ width: 200px; height: 200px; margin: 0; border: none;
+ background: lightgreen">
+ <img style="position: relative;" src="chrome://global/skin/icons/resizer.svg">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/textarea/resize-background.html b/layout/reftests/forms/textarea/resize-background.html
new file mode 100644
index 0000000000..24c6f70d89
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-background.html
@@ -0,0 +1,3 @@
+<html><body>
+<textarea style="width: 200px; height: 200px; margin: 0; background: lightgreen; border: none;"></textarea>
+</body></html>
diff --git a/layout/reftests/forms/textarea/resize-ref.html b/layout/reftests/forms/textarea/resize-ref.html
new file mode 100644
index 0000000000..5d3334889d
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-ref.html
@@ -0,0 +1,3 @@
+<html><body>
+<div style="overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
+</body></html>
diff --git a/layout/reftests/forms/textarea/resize-rtl-ref.html b/layout/reftests/forms/textarea/resize-rtl-ref.html
new file mode 100644
index 0000000000..9ae0ac14fe
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-rtl-ref.html
@@ -0,0 +1,3 @@
+<html><body>
+<div style="transform: scaleX(-1); overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
+</body></html>
diff --git a/layout/reftests/forms/textarea/resize-rtl-vertical.html b/layout/reftests/forms/textarea/resize-rtl-vertical.html
new file mode 100644
index 0000000000..602ca9b399
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-rtl-vertical.html
@@ -0,0 +1,3 @@
+<html><body>
+<textarea dir="rtl" style="resize: vertical; -moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
+</body></html>
diff --git a/layout/reftests/forms/textarea/resize-rtl.html b/layout/reftests/forms/textarea/resize-rtl.html
new file mode 100644
index 0000000000..c91acad3ce
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-rtl.html
@@ -0,0 +1,3 @@
+<html><body>
+<textarea dir="rtl" style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
+</body></html>
diff --git a/layout/reftests/forms/textarea/resize-vertical.html b/layout/reftests/forms/textarea/resize-vertical.html
new file mode 100644
index 0000000000..57a245449f
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-vertical.html
@@ -0,0 +1,3 @@
+<html><body>
+<textarea style="resize: vertical; -moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
+</body></html>
diff --git a/layout/reftests/forms/textarea/resize.html b/layout/reftests/forms/textarea/resize.html
new file mode 100644
index 0000000000..f513b4634f
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize.html
@@ -0,0 +1,3 @@
+<html><body>
+<textarea style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
+</body></html>
diff --git a/layout/reftests/forms/textarea/rtl-dynamic-attr.html b/layout/reftests/forms/textarea/rtl-dynamic-attr.html
new file mode 100644
index 0000000000..47f97baa7b
--- /dev/null
+++ b/layout/reftests/forms/textarea/rtl-dynamic-attr.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body>
+ <textarea cols=20 rows=4></textarea>
+ <script>
+ onload = function() {
+ setTimeout(function() {
+ document.querySelector("textarea").setAttribute("dir", "rtl");
+ document.documentElement.removeAttribute("class");
+ });
+ };
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/rtl-dynamic-style.html b/layout/reftests/forms/textarea/rtl-dynamic-style.html
new file mode 100644
index 0000000000..8997e31c05
--- /dev/null
+++ b/layout/reftests/forms/textarea/rtl-dynamic-style.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body>
+ <textarea cols=20 rows=4></textarea>
+ <script>
+ onload = function() {
+ setTimeout(function() {
+ document.querySelector("textarea").style.direction = "rtl";
+ document.documentElement.removeAttribute("class");
+ });
+ };
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/rtl-scrollbar.html b/layout/reftests/forms/textarea/rtl-scrollbar.html
new file mode 100644
index 0000000000..2770dc6941
--- /dev/null
+++ b/layout/reftests/forms/textarea/rtl-scrollbar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body>
+ <textarea dir="rtl" cols=20 rows=4 style="overflow: scroll; resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/rtl.html b/layout/reftests/forms/textarea/rtl.html
new file mode 100644
index 0000000000..984f9d9aa9
--- /dev/null
+++ b/layout/reftests/forms/textarea/rtl.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title></title>
+ </head>
+ <body>
+ <textarea dir="rtl" cols=20 rows=4></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/various-cols-ref.html b/layout/reftests/forms/textarea/various-cols-ref.html
new file mode 100644
index 0000000000..7ba962e61d
--- /dev/null
+++ b/layout/reftests/forms/textarea/various-cols-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<textarea cols="20"></textarea><br>
+<textarea cols="20"></textarea><br>
+<textarea cols="20"></textarea>
diff --git a/layout/reftests/forms/textarea/various-cols.html b/layout/reftests/forms/textarea/various-cols.html
new file mode 100644
index 0000000000..dc62941d8f
--- /dev/null
+++ b/layout/reftests/forms/textarea/various-cols.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<textarea></textarea><br>
+<textarea cols="0"></textarea><br>
+<textarea cols="-1"></textarea>
diff --git a/layout/reftests/forms/textbox/accesskey-1-dyn.xhtml b/layout/reftests/forms/textbox/accesskey-1-dyn.xhtml
new file mode 100644
index 0000000000..797d61b02c
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-1-dyn.xhtml
@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <label value="foo" accesskey="s"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value="text"/>
+ </hbox>
+ <script>
+ onload = () => {
+ let label = document.querySelector("label");
+ label.getBoundingClientRect();
+ label.value = "test";
+ };
+ </script>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-1-notref.xhtml b/layout/reftests/forms/textbox/accesskey-1-notref.xhtml
new file mode 100644
index 0000000000..606873c38d
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-1-notref.xhtml
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <label value="test"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value="text"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-1.xhtml b/layout/reftests/forms/textbox/accesskey-1.xhtml
new file mode 100644
index 0000000000..49846b8c47
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-1.xhtml
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <label value="test" accesskey="s"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value="text"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-2-ref.xhtml b/layout/reftests/forms/textbox/accesskey-2-ref.xhtml
new file mode 100644
index 0000000000..a7ceb4a628
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-2-ref.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <!-- access key in LTR-overridden Arabic text -->
+ <label value="&#x202d;&#x64a;&#x628;&#x631;&#x639;&#x644;&#x627;&#x202c; test" accesskey="&#x639;"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value=""/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-2.xhtml b/layout/reftests/forms/textbox/accesskey-2.xhtml
new file mode 100644
index 0000000000..3e1efb03ff
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-2.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <!-- access key in RTL Arabic text -->
+ <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; test" accesskey="&#x639;"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value=""/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-3-notref.xhtml b/layout/reftests/forms/textbox/accesskey-3-notref.xhtml
new file mode 100644
index 0000000000..26d2cb7016
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-3-notref.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <!-- no access key, for != test -->
+ <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello world"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value=""/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-3-ref.xhtml b/layout/reftests/forms/textbox/accesskey-3-ref.xhtml
new file mode 100644
index 0000000000..3f29077e4e
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-3-ref.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <!-- access key in LTR text that follows RTL text (mixed direction) -->
+ <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello world" accesskey="d"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value=""/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-3.xhtml b/layout/reftests/forms/textbox/accesskey-3.xhtml
new file mode 100644
index 0000000000..752e448919
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-3.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <!-- access key in RTL-overridden English text -->
+ <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello &#x202e;dlrow&#x202c;" accesskey="d"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value=""/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-4-notref.xhtml b/layout/reftests/forms/textbox/accesskey-4-notref.xhtml
new file mode 100644
index 0000000000..26d2cb7016
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-4-notref.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <!-- no access key, for != test -->
+ <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello world"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value=""/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-4-ref.xhtml b/layout/reftests/forms/textbox/accesskey-4-ref.xhtml
new file mode 100644
index 0000000000..1522f92468
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-4-ref.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <!-- access key in English text following LTR-overridden Arabic -->
+ <label value="&#x202d;&#x64a;&#x628;&#x631;&#x639;&#x644;&#x627;&#x202c; hello world" accesskey="w"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value=""/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-4.xhtml b/layout/reftests/forms/textbox/accesskey-4.xhtml
new file mode 100644
index 0000000000..b7ad5b0b1e
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-4.xhtml
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox access key tests (see bug 698185)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ font-size: 36px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <!-- access key in English text following RTL Arabic -->
+ <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello world" accesskey="w"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value=""/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/align-baseline-1-ref.xhtml b/layout/reftests/forms/textbox/align-baseline-1-ref.xhtml
new file mode 100644
index 0000000000..8ad687f2d4
--- /dev/null
+++ b/layout/reftests/forms/textbox/align-baseline-1-ref.xhtml
@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox align=baseline reference"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ #container {
+ margin-top: 12px;
+ padding-top: 8px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ </html:style>
+
+ <hbox id="container" align="center">
+ <label value="test"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value="text"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/align-baseline-1.xhtml b/layout/reftests/forms/textbox/align-baseline-1.xhtml
new file mode 100644
index 0000000000..eab22d761b
--- /dev/null
+++ b/layout/reftests/forms/textbox/align-baseline-1.xhtml
@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<window title="textbox align=baseline test (bug 494901)"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml">
+ <html:style type="text/css">
+ hbox {
+ margin-top: 0px;
+ padding-top: 0px;
+ }
+ label, input {
+ -moz-appearance: none;
+ background: inherit;
+ border: none 0px;
+ }
+ label {
+ margin-top: 0px;
+ padding-top: 0px;
+ margin-bottom: 0px;
+ padding-bottom: 0px;
+ }
+ input {
+ margin-top: 12px;
+ padding-top: 8px;
+ margin-bottom: 5px;
+ padding-bottom: 9px;
+ }
+ </html:style>
+
+ <hbox align="baseline">
+ <label value="test"/>
+ <input xmlns="http://www.w3.org/1999/xhtml" value="text"/>
+ </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/reftest.list b/layout/reftests/forms/textbox/reftest.list
new file mode 100644
index 0000000000..edb83da6e2
--- /dev/null
+++ b/layout/reftests/forms/textbox/reftest.list
@@ -0,0 +1,11 @@
+# access-key tests are no use on OS X because access keys are not indicated visually
+# no real XUL theme on Android so we just skip
+skip-if(cocoaWidget||Android) != chrome://reftest/content/forms/textbox/accesskey-1.xhtml chrome://reftest/content/forms/textbox/accesskey-1-notref.xhtml
+== chrome://reftest/content/forms/textbox/accesskey-1-dyn.xhtml chrome://reftest/content/forms/textbox/accesskey-1.xhtml
+fuzzy(0-1,0-3) skip-if(cocoaWidget||Android) == chrome://reftest/content/forms/textbox/accesskey-2.xhtml chrome://reftest/content/forms/textbox/accesskey-2-ref.xhtml
+skip-if(cocoaWidget||Android) == chrome://reftest/content/forms/textbox/accesskey-3.xhtml chrome://reftest/content/forms/textbox/accesskey-3-ref.xhtml
+skip-if(cocoaWidget||Android) != chrome://reftest/content/forms/textbox/accesskey-3.xhtml chrome://reftest/content/forms/textbox/accesskey-3-notref.xhtml
+fuzzy(0-1,0-4) skip-if(cocoaWidget||Android) == chrome://reftest/content/forms/textbox/accesskey-4.xhtml chrome://reftest/content/forms/textbox/accesskey-4-ref.xhtml
+skip-if(cocoaWidget||Android) != chrome://reftest/content/forms/textbox/accesskey-4.xhtml chrome://reftest/content/forms/textbox/accesskey-4-notref.xhtml
+skip-if(Android) == chrome://reftest/content/forms/textbox/align-baseline-1.xhtml chrome://reftest/content/forms/textbox/align-baseline-1-ref.xhtml # test for bug 494901
+skip-if(Android) == chrome://reftest/content/forms/textbox/setsize.xhtml chrome://reftest/content/forms/textbox/setsize-ref.xhtml
diff --git a/layout/reftests/forms/textbox/setsize-ref.xhtml b/layout/reftests/forms/textbox/setsize-ref.xhtml
new file mode 100644
index 0000000000..5db79ff9d9
--- /dev/null
+++ b/layout/reftests/forms/textbox/setsize-ref.xhtml
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.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 style="appearance: auto; -moz-default-appearance: textarea; width: 200px; height: 200px;"/>
+<html:div style="position:fixed;top:0;left:0;width:100%;height:100%;"></html:div>
+
+</window>
diff --git a/layout/reftests/forms/textbox/setsize.xhtml b/layout/reftests/forms/textbox/setsize.xhtml
new file mode 100644
index 0000000000..14ccdfb27b
--- /dev/null
+++ b/layout/reftests/forms/textbox/setsize.xhtml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.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:textarea style="width: 200px; height: 200px; margin: 0; resize: none; box-sizing: border-box;"/>
+<html:div style="position:fixed;top:0;left:0;width:100%;height:100%;"></html:div>
+</window>