From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../input/checkbox/checkbox-baseline-ref.html      |  39 +++++++
 .../forms/input/checkbox/checkbox-baseline.html    |  45 +++++++++
 .../input/checkbox/checkbox-clamp-01-ref.html      |  13 +++
 .../forms/input/checkbox/checkbox-clamp-01.html    |  34 +++++++
 .../input/checkbox/checkbox-clamp-02-ref.html      |  37 +++++++
 .../forms/input/checkbox/checkbox-clamp-02.html    |  38 +++++++
 .../checkbox/checkbox-minimum-size-notref.html     |   2 +
 .../input/checkbox/checkbox-minimum-size.html      |  22 ++++
 .../checkbox/checkbox-radio-auto-sized-ref.html    |  24 +++++
 .../input/checkbox/checkbox-radio-color-ref.html   |  38 +++++++
 .../forms/input/checkbox/checkbox-radio-color.html |  40 ++++++++
 .../input/checkbox/checked-appearance-none.html    |   2 +
 .../input/checkbox/checked-native-notref.html      |   2 +
 .../forms/input/checkbox/checked-native.html       |   2 +
 .../checkbox/indeterminate-checked-notref.html     |   1 +
 .../input/checkbox/indeterminate-checked.html      |   1 +
 .../indeterminate-native-checked-notref.html       |   1 +
 .../checkbox/indeterminate-native-checked.html     |   1 +
 .../indeterminate-native-unchecked-notref.html     |   1 +
 .../checkbox/indeterminate-native-unchecked.html   |   1 +
 .../input/checkbox/indeterminate-selector-ref.html |   7 ++
 .../input/checkbox/indeterminate-selector.html     |   7 ++
 .../checkbox/indeterminate-unchecked-notref.html   |   1 +
 .../input/checkbox/indeterminate-unchecked.html    |   1 +
 .../forms/input/checkbox/label-dynamic-ref.html    |  27 +++++
 .../forms/input/checkbox/label-dynamic.html        |  37 +++++++
 .../forms/input/checkbox/radio-stretched-ref.html  |  11 ++
 .../forms/input/checkbox/radio-stretched.html      |  11 ++
 layout/reftests/forms/input/checkbox/reftest.list  |  18 ++++
 .../input/checkbox/unchecked-appearance-none.html  |   2 +
 .../forms/input/color/auto-height-1-ref.html       |   5 +
 .../reftests/forms/input/color/auto-height-1.html  |   3 +
 .../forms/input/color/block-invalidate-1-ref.html  |   6 ++
 .../forms/input/color/block-invalidate-1.html      |  14 +++
 .../forms/input/color/block-invalidate-2-ref.html  |   9 ++
 .../forms/input/color/block-invalidate-2.html      |  19 ++++
 .../forms/input/color/custom-style-1-ref.html      |  16 +++
 .../reftests/forms/input/color/custom-style-1.html |  11 ++
 .../forms/input/color/custom-style-2-ref.html      |  20 ++++
 .../reftests/forms/input/color/custom-style-2.html |  16 +++
 .../forms/input/color/input-color-1-ref.html       |  33 ++++++
 .../reftests/forms/input/color/input-color-1.html  |   9 ++
 .../forms/input/color/margin-padding-1-ref.html    | 112 +++++++++++++++++++++
 .../forms/input/color/margin-padding-1.html        |  39 +++++++
 .../reftests/forms/input/color/reference-style.css |  17 ++++
 layout/reftests/forms/input/color/reftest.list     |   9 ++
 .../forms/input/color/transformations-1-ref.html   |  78 ++++++++++++++
 .../forms/input/color/transformations-1.html       |  35 +++++++
 .../from-time-to-other-type-unthemed-ref.html      |   6 ++
 .../datetime/from-time-to-other-type-unthemed.html |  16 +++
 .../forms/input/datetime/line-height-01-ref.html   |   9 ++
 .../forms/input/datetime/line-height-01.html       |  10 ++
 .../forms/input/datetime/line-height-02-ref.html   |   8 ++
 .../forms/input/datetime/line-height-02.html       |   8 ++
 layout/reftests/forms/input/datetime/reftest.list  |  25 +++++
 .../reset-button-visibility-hidden-ref.html        |   2 +
 .../datetime/reset-button-visibility-hidden.html   |   3 +
 .../forms/input/datetime/text-align-notref.html    |   2 +
 .../reftests/forms/input/datetime/text-align.html  |   2 +
 .../reftests/forms/input/datetime/time-basic.html  |   6 ++
 .../reftests/forms/input/datetime/time-border.html |   6 ++
 .../datetime/time-content-left-aligned-ref.html    |   9 ++
 .../input/datetime/time-content-left-aligned.html  |   9 ++
 .../forms/input/datetime/time-large-font.html      |   6 ++
 .../time-reset-button-right-aligned-ref.html       |   9 ++
 .../datetime/time-reset-button-right-aligned.html  |  10 ++
 .../input/datetime/time-simple-unthemed-ref.html   |   6 ++
 .../forms/input/datetime/time-simple-unthemed.html |   6 ++
 .../input/datetime/time-small-height-ref.html      |  18 ++++
 .../forms/input/datetime/time-small-height.html    |  19 ++++
 .../datetime/time-small-width-height-ref.html      |  18 ++++
 .../input/datetime/time-small-width-height.html    |  19 ++++
 .../forms/input/datetime/time-small-width-ref.html |  19 ++++
 .../forms/input/datetime/time-small-width.html     |  20 ++++
 .../forms/input/datetime/time-width-height.html    |   6 ++
 .../datetime/to-time-from-other-type-unthemed.html |  15 +++
 layout/reftests/forms/input/email/1.html           |   7 ++
 layout/reftests/forms/input/email/2.html           |  18 ++++
 layout/reftests/forms/input/email/3.html           |  19 ++++
 layout/reftests/forms/input/email/ref.html         |   6 ++
 layout/reftests/forms/input/email/reftest.list     |   3 +
 .../reftests/forms/input/file/background-ref.xhtml |  16 +++
 layout/reftests/forms/input/file/background.html   |  11 ++
 .../forms/input/file/button-height-ref.html        |   6 ++
 .../reftests/forms/input/file/button-height.html   |   6 ++
 .../forms/input/file/color-inherit-ref.html        |   6 ++
 .../reftests/forms/input/file/color-inherit.html   |   6 ++
 .../reftests/forms/input/file/css-display-ref.html |  54 ++++++++++
 layout/reftests/forms/input/file/css-display.html  |  64 ++++++++++++
 .../forms/input/file/css-overflow-ref.html         |  39 +++++++
 layout/reftests/forms/input/file/css-overflow.html |  46 +++++++++
 .../forms/input/file/dynamic-max-width-ref.html    |  20 ++++
 .../forms/input/file/dynamic-max-width.html        |  34 +++++++
 .../input/file/label-min-inline-size-ref.html      |  23 +++++
 .../forms/input/file/label-min-inline-size.html    |  44 ++++++++
 layout/reftests/forms/input/file/reftest.list      |  12 +++
 layout/reftests/forms/input/file/rtl-ref.xhtml     |  17 ++++
 layout/reftests/forms/input/file/rtl.html          |   8 ++
 layout/reftests/forms/input/file/simple-ref.xhtml  |  14 +++
 layout/reftests/forms/input/file/simple.html       |   8 ++
 layout/reftests/forms/input/file/size.html         |   9 ++
 layout/reftests/forms/input/file/style-ref.xhtml   |  25 +++++
 layout/reftests/forms/input/file/style.css         |  63 ++++++++++++
 layout/reftests/forms/input/file/style.html        |  16 +++
 .../reftests/forms/input/file/width-clip-ref.html  |   3 +
 layout/reftests/forms/input/file/width-clip.html   |   3 +
 layout/reftests/forms/input/hidden/border.html     |  14 +++
 layout/reftests/forms/input/hidden/reftest.list    |   1 +
 .../input/number/appearance-textfield-dynamic.html |   7 ++
 .../forms/input/number/appearance-textfield.html   |   2 +
 .../forms/input/number/caret-left-rtl-notref.html  |   2 +
 .../forms/input/number/caret-left-rtl.html         |   2 +
 .../forms/input/number/caret-right-notref.html     |   2 +
 .../input/number/caret-right-vertical-notref.html  |   2 +
 .../forms/input/number/caret-right-vertical.html   |   2 +
 .../reftests/forms/input/number/caret-right.html   |   2 +
 .../forms/input/number/clipped-text-ref.html       |   9 ++
 .../reftests/forms/input/number/clipped-text.html  |   9 ++
 layout/reftests/forms/input/number/flex-ref.html   |  22 ++++
 layout/reftests/forms/input/number/flex.html       |  23 +++++
 .../forms/input/number/focus-handling-ref.html     |  26 +++++
 .../forms/input/number/focus-handling.html         |  32 ++++++
 .../from-number-to-other-type-unthemed-1-ref.html  |   6 ++
 .../from-number-to-other-type-unthemed-1.html      |  16 +++
 .../input/number/not-other-type-unthemed-1.html    |   6 ++
 .../number/not-other-type-unthemed-1a-notref.html  |   6 ++
 .../number/not-other-type-unthemed-1b-notref.html  |   6 ++
 .../input/number/number-auto-width-1-ref.html      |   8 ++
 .../forms/input/number/number-auto-width-1.html    |   8 ++
 .../forms/input/number/number-disabled-ref.html    |   9 ++
 .../forms/input/number/number-disabled.html        |   9 ++
 .../input/number/number-localized-notref.html      |   2 +
 .../forms/input/number/number-localized.html       |   2 +
 .../input/number/number-max-height-1-ref.html      |  17 ++++
 .../forms/input/number/number-max-height-1.html    |  27 +++++
 .../input/number/number-max-height-2-ref.html      |  17 ++++
 .../forms/input/number/number-max-height-2.html    |  27 +++++
 .../input/number/number-min-height-1-ref.html      |  17 ++++
 .../forms/input/number/number-min-height-1.html    |  26 +++++
 .../input/number/number-min-height-2-ref.html      |  17 ++++
 .../forms/input/number/number-min-height-2.html    |  26 +++++
 .../forms/input/number/number-placeholder-ref.html |  17 ++++
 .../forms/input/number/number-placeholder.html     |  24 +++++
 .../input/number/number-pseudo-elements-ref.html   |   6 ++
 .../forms/input/number/number-pseudo-elements.html |  18 ++++
 .../number/number-reframe-anon-text-field-ref.html |  17 ++++
 .../number/number-reframe-anon-text-field.html     |  44 ++++++++
 .../input/number/number-same-as-text-unthemed.html |   6 ++
 .../forms/input/number/number-selected-ref.html    |  18 ++++
 .../forms/input/number/number-selected.html        |  18 ++++
 .../number-significant-fractional-digits-ref.html  |   6 ++
 .../number-significant-fractional-digits.html      |  17 ++++
 .../number-similar-to-text-unthemed-ref.html       |   8 ++
 .../number-similar-to-text-unthemed-rtl-ref.html   |   8 ++
 .../number-similar-to-text-unthemed-rtl.html       |   8 ++
 ...r-similar-to-text-unthemed-vertical-lr-ref.html |   8 ++
 ...umber-similar-to-text-unthemed-vertical-lr.html |   8 ++
 ...r-similar-to-text-unthemed-vertical-rl-ref.html |   8 ++
 ...umber-similar-to-text-unthemed-vertical-rl.html |   8 ++
 .../number/number-similar-to-text-unthemed.html    |   8 ++
 .../number/number-spinbox-disabled-notref.html     |   9 ++
 .../input/number/number-spinbox-disabled.html      |   9 ++
 .../input/number/number-style-inheritance-ref.html |   6 ++
 .../input/number/number-style-inheritance.html     |   6 ++
 .../forms/input/number/padding-001-notref.html     |  10 ++
 .../forms/input/number/padding-001-ref.html        |   9 ++
 .../reftests/forms/input/number/padding-001.html   |  10 ++
 .../forms/input/number/padding-002-ref.html        |   8 ++
 .../reftests/forms/input/number/padding-002.html   |   8 ++
 .../forms/input/number/pseudo-classes.html         |  37 +++++++
 layout/reftests/forms/input/number/reftest.list    |  72 +++++++++++++
 .../forms/input/number/show-value-ref.html         |  26 +++++
 layout/reftests/forms/input/number/show-value.html |  42 ++++++++
 .../forms/input/number/spinner-overflow-ref.html   |  12 +++
 .../number/spinner-overflow-vertical-ref.html      |  11 ++
 .../input/number/spinner-overflow-vertical.html    |  10 ++
 .../forms/input/number/spinner-overflow.html       |  12 +++
 layout/reftests/forms/input/number/text.html       |   2 +
 .../to-number-from-other-type-unthemed-1-ref.html  |   6 ++
 .../to-number-from-other-type-unthemed-1.html      |  15 +++
 .../forms/input/percentage/padding-ref.html        |  21 ++++
 .../reftests/forms/input/percentage/padding.html   |  21 ++++
 .../reftests/forms/input/percentage/reftest.list   |   1 +
 .../forms/input/radio/checked-appearance-none.html |   2 +
 .../forms/input/radio/checked-native-notref.html   |   2 +
 .../reftests/forms/input/radio/checked-native.html |   2 +
 .../forms/input/radio/label-dynamic-ref.html       |  38 +++++++
 .../reftests/forms/input/radio/label-dynamic.html  |  46 +++++++++
 .../forms/input/radio/radio-clamp-01-ref.html      |  12 +++
 .../reftests/forms/input/radio/radio-clamp-01.html |  34 +++++++
 .../forms/input/radio/radio-clamp-02-ref.html      |  37 +++++++
 .../reftests/forms/input/radio/radio-clamp-02.html |  38 +++++++
 .../input/radio/radio-minimum-size-notref.html     |   2 +
 .../forms/input/radio/radio-minimum-size.html      |  22 ++++
 layout/reftests/forms/input/radio/reftest.list     |   9 ++
 .../input/radio/unchecked-appearance-none.html     |   2 +
 .../forms/input/range/100pct-common-ref.html       |   6 ++
 .../forms/input/range/75pct-common-ref.html        |   6 ++
 .../input/range/75pct-unthemed-common-ref.html     |   6 ++
 .../reftests/forms/input/range/auto-size-ref.html  |  59 +++++++++++
 layout/reftests/forms/input/range/auto-size.html   |  50 +++++++++
 ...ferent-fraction-of-range-unthemed-1-notref.html |   6 ++
 .../different-fraction-of-range-unthemed-1.html    |   7 ++
 .../input/range/direction-unthemed-1-ref.html      |   6 ++
 .../forms/input/range/direction-unthemed-1.html    |   7 ++
 .../from-range-to-other-type-unthemed-1-ref.html   |   6 ++
 .../range/from-range-to-other-type-unthemed-1.html |  16 +++
 layout/reftests/forms/input/range/max-prop.html    |  20 ++++
 .../input/range/moz-range-progress-1-ref.html      |  36 +++++++
 .../forms/input/range/moz-range-progress-1.html    |  30 ++++++
 .../input/range/moz-range-progress-2-ref.html      |  35 +++++++
 .../forms/input/range/moz-range-progress-2.html    |  40 ++++++++
 .../input/range/moz-range-progress-3-ref.html      |  35 +++++++
 .../forms/input/range/moz-range-progress-3.html    |  40 ++++++++
 .../input/range/not-other-type-unthemed-1.html     |   6 ++
 .../range/not-other-type-unthemed-1a-notref.html   |   6 ++
 .../range/not-other-type-unthemed-1b-notref.html   |   6 ++
 .../range/not-other-type-unthemed-1c-notref.html   |   6 ++
 .../input/range/range-border-background-ref.html   |  26 +++++
 .../forms/input/range/range-border-background.html |  26 +++++
 .../forms/input/range/range-orient-block.html      |   3 +
 .../input/range/range-orient-horizontal-rtl.html   |   3 +
 .../forms/input/range/range-orient-horizontal.html |   3 +
 .../forms/input/range/range-orient-inline.html     |   3 +
 .../input/range/range-orient-vertical-rtl.html     |   3 +
 .../forms/input/range/range-orient-vertical.html   |   3 +
 .../range/range-percent-intrinsic-size-2b-ref.html |  92 +++++++++++++++++
 .../range/range-percent-intrinsic-size-2b.html     |  99 ++++++++++++++++++
 .../forms/input/range/range-track-bg-ref.html      |  16 +++
 .../reftests/forms/input/range/range-track-bg.html |   9 ++
 .../forms/input/range/range-vlr-orient-block.html  |   3 +
 .../input/range/range-vlr-orient-horizontal.html   |   3 +
 .../forms/input/range/range-vlr-orient-inline.html |   3 +
 .../input/range/range-vlr-orient-vertical.html     |   3 +
 layout/reftests/forms/input/range/range-vlr.html   |   3 +
 .../forms/input/range/range-vrl-orient-block.html  |   3 +
 .../input/range/range-vrl-orient-horizontal.html   |   3 +
 .../forms/input/range/range-vrl-orient-inline.html |   3 +
 .../input/range/range-vrl-orient-vertical.html     |   3 +
 layout/reftests/forms/input/range/range-vrl.html   |   3 +
 layout/reftests/forms/input/range/reftest.list     |  61 +++++++++++
 .../forms/input/range/reset-value-ref.html         |  14 +++
 layout/reftests/forms/input/range/reset-value.html |  14 +++
 .../same-fraction-of-range-unthemed-1-ref.html     |   6 ++
 .../range/same-fraction-of-range-unthemed-1.html   |   9 ++
 .../forms/input/range/stepDown-unthemed.html       |  16 +++
 layout/reftests/forms/input/range/stepDown.html    |  16 +++
 .../forms/input/range/stepUp-unthemed.html         |  16 +++
 layout/reftests/forms/input/range/stepUp.html      |  16 +++
 .../to-range-from-other-type-unthemed-1-ref.html   |   6 ++
 .../range/to-range-from-other-type-unthemed-1.html |  15 +++
 .../input/range/track-default-rendering-ref.html   |  25 +++++
 .../forms/input/range/track-default-rendering.html |  22 ++++
 .../forms/input/range/value-prop-unthemed.html     |  17 ++++
 layout/reftests/forms/input/range/value-prop.html  |  17 ++++
 .../input/range/valueAsNumber-prop-unthemed.html   |  17 ++++
 .../forms/input/range/valueAsNumber-prop.html      |  17 ++++
 layout/reftests/forms/input/reftest.list           |  14 +++
 layout/reftests/forms/input/search/1.html          |   7 ++
 layout/reftests/forms/input/search/2.html          |  18 ++++
 layout/reftests/forms/input/search/3.html          |  19 ++++
 .../input/search/appearance-textfield-dynamic.html |   7 ++
 .../forms/input/search/appearance-textfield.html   |   2 +
 layout/reftests/forms/input/search/ref.html        |   6 ++
 layout/reftests/forms/input/search/reftest.list    |   8 ++
 .../reftests/forms/input/search/search-basic.html  |   2 +
 .../forms/input/search/search-with-value.html      |   2 +
 .../forms/input/search/text-with-value.html        |   2 +
 layout/reftests/forms/input/search/text.html       |   2 +
 layout/reftests/forms/input/tel/1.html             |   7 ++
 layout/reftests/forms/input/tel/2.html             |  18 ++++
 layout/reftests/forms/input/tel/3.html             |  19 ++++
 layout/reftests/forms/input/tel/ref.html           |   6 ++
 layout/reftests/forms/input/tel/reftest.list       |   3 +
 .../reftests/forms/input/text/autofill-blank.html  |   8 ++
 .../forms/input/text/autofill-line-height.html     |   9 ++
 .../forms/input/text/autofill-prefilled-value.html |   9 ++
 .../forms/input/text/autofill-preview-blank.html   |   8 ++
 .../input/text/autofill-preview-line-height.html   |  12 +++
 .../forms/input/text/autofill-preview.html         |   9 ++
 layout/reftests/forms/input/text/autofill.html     |   9 ++
 .../reftests/forms/input/text/baseline-1-ref.html  |  21 ++++
 layout/reftests/forms/input/text/baseline-1.html   |  31 ++++++
 layout/reftests/forms/input/text/bounds-1-ref.html |  11 ++
 layout/reftests/forms/input/text/bounds-1.html     |  22 ++++
 .../forms/input/text/centering-1-ref.xhtml         |  28 ++++++
 layout/reftests/forms/input/text/centering-1.xhtml |  39 +++++++
 .../forms/input/text/dynamic-height-1-ref.xhtml    |   9 ++
 .../forms/input/text/dynamic-height-1.xhtml        |  23 +++++
 .../forms/input/text/focus-on-anchor-ref.html      |   2 +
 .../reftests/forms/input/text/focus-on-anchor.html |   2 +
 .../forms/input/text/height-small-font-notref.html |   2 +
 .../forms/input/text/height-small-font.html        |   2 +
 .../forms/input/text/intrinsic-size-ref.html       |  12 +++
 .../reftests/forms/input/text/intrinsic-size.html  |  16 +++
 .../reftests/forms/input/text/line-height-0.5.html |   7 ++
 .../reftests/forms/input/text/line-height-1.0.html |   7 ++
 .../reftests/forms/input/text/line-height-2.5.html |   7 ++
 .../forms/input/text/pseudo-class-lock-ref.html    |   2 +
 .../forms/input/text/pseudo-class-lock.html        |   5 +
 layout/reftests/forms/input/text/reftest.list      |  25 +++++
 .../forms/input/text/select-overflow-ref.html      |  18 ++++
 .../reftests/forms/input/text/select-overflow.html |  25 +++++
 layout/reftests/forms/input/text/select-ref.html   |  18 ++++
 layout/reftests/forms/input/text/select.html       |  21 ++++
 .../forms/input/text/shadow-rules-ref.html         |   7 ++
 layout/reftests/forms/input/text/shadow-rules.html |  10 ++
 layout/reftests/forms/input/text/size-1-ref.html   |   3 +
 layout/reftests/forms/input/text/size-1.html       |   3 +
 layout/reftests/forms/input/text/size-2-ref.html   |   5 +
 layout/reftests/forms/input/text/size-2.html       |   5 +
 layout/reftests/forms/input/url/1.html             |   7 ++
 layout/reftests/forms/input/url/2.html             |  18 ++++
 layout/reftests/forms/input/url/3.html             |  19 ++++
 layout/reftests/forms/input/url/ref.html           |   6 ++
 layout/reftests/forms/input/url/reftest.list       |   3 +
 316 files changed, 4790 insertions(+)
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-baseline-ref.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-baseline.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-clamp-01-ref.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-clamp-01.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-clamp-02-ref.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-clamp-02.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-minimum-size-notref.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-minimum-size.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-radio-auto-sized-ref.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-radio-color-ref.html
 create mode 100644 layout/reftests/forms/input/checkbox/checkbox-radio-color.html
 create mode 100644 layout/reftests/forms/input/checkbox/checked-appearance-none.html
 create mode 100644 layout/reftests/forms/input/checkbox/checked-native-notref.html
 create mode 100644 layout/reftests/forms/input/checkbox/checked-native.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-checked.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-native-checked.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-selector.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
 create mode 100644 layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
 create mode 100644 layout/reftests/forms/input/checkbox/label-dynamic-ref.html
 create mode 100644 layout/reftests/forms/input/checkbox/label-dynamic.html
 create mode 100644 layout/reftests/forms/input/checkbox/radio-stretched-ref.html
 create mode 100644 layout/reftests/forms/input/checkbox/radio-stretched.html
 create mode 100644 layout/reftests/forms/input/checkbox/reftest.list
 create mode 100644 layout/reftests/forms/input/checkbox/unchecked-appearance-none.html
 create mode 100644 layout/reftests/forms/input/color/auto-height-1-ref.html
 create mode 100644 layout/reftests/forms/input/color/auto-height-1.html
 create mode 100644 layout/reftests/forms/input/color/block-invalidate-1-ref.html
 create mode 100644 layout/reftests/forms/input/color/block-invalidate-1.html
 create mode 100644 layout/reftests/forms/input/color/block-invalidate-2-ref.html
 create mode 100644 layout/reftests/forms/input/color/block-invalidate-2.html
 create mode 100644 layout/reftests/forms/input/color/custom-style-1-ref.html
 create mode 100644 layout/reftests/forms/input/color/custom-style-1.html
 create mode 100644 layout/reftests/forms/input/color/custom-style-2-ref.html
 create mode 100644 layout/reftests/forms/input/color/custom-style-2.html
 create mode 100644 layout/reftests/forms/input/color/input-color-1-ref.html
 create mode 100644 layout/reftests/forms/input/color/input-color-1.html
 create mode 100644 layout/reftests/forms/input/color/margin-padding-1-ref.html
 create mode 100644 layout/reftests/forms/input/color/margin-padding-1.html
 create mode 100644 layout/reftests/forms/input/color/reference-style.css
 create mode 100644 layout/reftests/forms/input/color/reftest.list
 create mode 100644 layout/reftests/forms/input/color/transformations-1-ref.html
 create mode 100644 layout/reftests/forms/input/color/transformations-1.html
 create mode 100644 layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html
 create mode 100644 layout/reftests/forms/input/datetime/line-height-01-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/line-height-01.html
 create mode 100644 layout/reftests/forms/input/datetime/line-height-02-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/line-height-02.html
 create mode 100644 layout/reftests/forms/input/datetime/reftest.list
 create mode 100644 layout/reftests/forms/input/datetime/reset-button-visibility-hidden-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/reset-button-visibility-hidden.html
 create mode 100644 layout/reftests/forms/input/datetime/text-align-notref.html
 create mode 100644 layout/reftests/forms/input/datetime/text-align.html
 create mode 100644 layout/reftests/forms/input/datetime/time-basic.html
 create mode 100644 layout/reftests/forms/input/datetime/time-border.html
 create mode 100644 layout/reftests/forms/input/datetime/time-content-left-aligned-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/time-content-left-aligned.html
 create mode 100644 layout/reftests/forms/input/datetime/time-large-font.html
 create mode 100644 layout/reftests/forms/input/datetime/time-reset-button-right-aligned-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/time-reset-button-right-aligned.html
 create mode 100644 layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/time-simple-unthemed.html
 create mode 100644 layout/reftests/forms/input/datetime/time-small-height-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/time-small-height.html
 create mode 100644 layout/reftests/forms/input/datetime/time-small-width-height-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/time-small-width-height.html
 create mode 100644 layout/reftests/forms/input/datetime/time-small-width-ref.html
 create mode 100644 layout/reftests/forms/input/datetime/time-small-width.html
 create mode 100644 layout/reftests/forms/input/datetime/time-width-height.html
 create mode 100644 layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html
 create mode 100644 layout/reftests/forms/input/email/1.html
 create mode 100644 layout/reftests/forms/input/email/2.html
 create mode 100644 layout/reftests/forms/input/email/3.html
 create mode 100644 layout/reftests/forms/input/email/ref.html
 create mode 100644 layout/reftests/forms/input/email/reftest.list
 create mode 100644 layout/reftests/forms/input/file/background-ref.xhtml
 create mode 100644 layout/reftests/forms/input/file/background.html
 create mode 100644 layout/reftests/forms/input/file/button-height-ref.html
 create mode 100644 layout/reftests/forms/input/file/button-height.html
 create mode 100644 layout/reftests/forms/input/file/color-inherit-ref.html
 create mode 100644 layout/reftests/forms/input/file/color-inherit.html
 create mode 100644 layout/reftests/forms/input/file/css-display-ref.html
 create mode 100644 layout/reftests/forms/input/file/css-display.html
 create mode 100644 layout/reftests/forms/input/file/css-overflow-ref.html
 create mode 100644 layout/reftests/forms/input/file/css-overflow.html
 create mode 100644 layout/reftests/forms/input/file/dynamic-max-width-ref.html
 create mode 100644 layout/reftests/forms/input/file/dynamic-max-width.html
 create mode 100644 layout/reftests/forms/input/file/label-min-inline-size-ref.html
 create mode 100644 layout/reftests/forms/input/file/label-min-inline-size.html
 create mode 100644 layout/reftests/forms/input/file/reftest.list
 create mode 100644 layout/reftests/forms/input/file/rtl-ref.xhtml
 create mode 100644 layout/reftests/forms/input/file/rtl.html
 create mode 100644 layout/reftests/forms/input/file/simple-ref.xhtml
 create mode 100644 layout/reftests/forms/input/file/simple.html
 create mode 100644 layout/reftests/forms/input/file/size.html
 create mode 100644 layout/reftests/forms/input/file/style-ref.xhtml
 create mode 100644 layout/reftests/forms/input/file/style.css
 create mode 100644 layout/reftests/forms/input/file/style.html
 create mode 100644 layout/reftests/forms/input/file/width-clip-ref.html
 create mode 100644 layout/reftests/forms/input/file/width-clip.html
 create mode 100644 layout/reftests/forms/input/hidden/border.html
 create mode 100644 layout/reftests/forms/input/hidden/reftest.list
 create mode 100644 layout/reftests/forms/input/number/appearance-textfield-dynamic.html
 create mode 100644 layout/reftests/forms/input/number/appearance-textfield.html
 create mode 100644 layout/reftests/forms/input/number/caret-left-rtl-notref.html
 create mode 100644 layout/reftests/forms/input/number/caret-left-rtl.html
 create mode 100644 layout/reftests/forms/input/number/caret-right-notref.html
 create mode 100644 layout/reftests/forms/input/number/caret-right-vertical-notref.html
 create mode 100644 layout/reftests/forms/input/number/caret-right-vertical.html
 create mode 100644 layout/reftests/forms/input/number/caret-right.html
 create mode 100644 layout/reftests/forms/input/number/clipped-text-ref.html
 create mode 100644 layout/reftests/forms/input/number/clipped-text.html
 create mode 100644 layout/reftests/forms/input/number/flex-ref.html
 create mode 100644 layout/reftests/forms/input/number/flex.html
 create mode 100644 layout/reftests/forms/input/number/focus-handling-ref.html
 create mode 100644 layout/reftests/forms/input/number/focus-handling.html
 create mode 100644 layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/number/not-other-type-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
 create mode 100644 layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
 create mode 100644 layout/reftests/forms/input/number/number-auto-width-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-auto-width-1.html
 create mode 100644 layout/reftests/forms/input/number/number-disabled-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-disabled.html
 create mode 100644 layout/reftests/forms/input/number/number-localized-notref.html
 create mode 100644 layout/reftests/forms/input/number/number-localized.html
 create mode 100644 layout/reftests/forms/input/number/number-max-height-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-max-height-1.html
 create mode 100644 layout/reftests/forms/input/number/number-max-height-2-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-max-height-2.html
 create mode 100644 layout/reftests/forms/input/number/number-min-height-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-min-height-1.html
 create mode 100644 layout/reftests/forms/input/number/number-min-height-2-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-min-height-2.html
 create mode 100644 layout/reftests/forms/input/number/number-placeholder-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-placeholder.html
 create mode 100644 layout/reftests/forms/input/number/number-pseudo-elements-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-pseudo-elements.html
 create mode 100644 layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-reframe-anon-text-field.html
 create mode 100644 layout/reftests/forms/input/number/number-same-as-text-unthemed.html
 create mode 100644 layout/reftests/forms/input/number/number-selected-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-selected.html
 create mode 100644 layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-significant-fractional-digits.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
 create mode 100644 layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
 create mode 100644 layout/reftests/forms/input/number/number-spinbox-disabled-notref.html
 create mode 100644 layout/reftests/forms/input/number/number-spinbox-disabled.html
 create mode 100644 layout/reftests/forms/input/number/number-style-inheritance-ref.html
 create mode 100644 layout/reftests/forms/input/number/number-style-inheritance.html
 create mode 100644 layout/reftests/forms/input/number/padding-001-notref.html
 create mode 100644 layout/reftests/forms/input/number/padding-001-ref.html
 create mode 100644 layout/reftests/forms/input/number/padding-001.html
 create mode 100644 layout/reftests/forms/input/number/padding-002-ref.html
 create mode 100644 layout/reftests/forms/input/number/padding-002.html
 create mode 100644 layout/reftests/forms/input/number/pseudo-classes.html
 create mode 100644 layout/reftests/forms/input/number/reftest.list
 create mode 100644 layout/reftests/forms/input/number/show-value-ref.html
 create mode 100644 layout/reftests/forms/input/number/show-value.html
 create mode 100644 layout/reftests/forms/input/number/spinner-overflow-ref.html
 create mode 100644 layout/reftests/forms/input/number/spinner-overflow-vertical-ref.html
 create mode 100644 layout/reftests/forms/input/number/spinner-overflow-vertical.html
 create mode 100644 layout/reftests/forms/input/number/spinner-overflow.html
 create mode 100644 layout/reftests/forms/input/number/text.html
 create mode 100644 layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
 create mode 100644 layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/percentage/padding-ref.html
 create mode 100644 layout/reftests/forms/input/percentage/padding.html
 create mode 100644 layout/reftests/forms/input/percentage/reftest.list
 create mode 100644 layout/reftests/forms/input/radio/checked-appearance-none.html
 create mode 100644 layout/reftests/forms/input/radio/checked-native-notref.html
 create mode 100644 layout/reftests/forms/input/radio/checked-native.html
 create mode 100644 layout/reftests/forms/input/radio/label-dynamic-ref.html
 create mode 100644 layout/reftests/forms/input/radio/label-dynamic.html
 create mode 100644 layout/reftests/forms/input/radio/radio-clamp-01-ref.html
 create mode 100644 layout/reftests/forms/input/radio/radio-clamp-01.html
 create mode 100644 layout/reftests/forms/input/radio/radio-clamp-02-ref.html
 create mode 100644 layout/reftests/forms/input/radio/radio-clamp-02.html
 create mode 100644 layout/reftests/forms/input/radio/radio-minimum-size-notref.html
 create mode 100644 layout/reftests/forms/input/radio/radio-minimum-size.html
 create mode 100644 layout/reftests/forms/input/radio/reftest.list
 create mode 100644 layout/reftests/forms/input/radio/unchecked-appearance-none.html
 create mode 100644 layout/reftests/forms/input/range/100pct-common-ref.html
 create mode 100644 layout/reftests/forms/input/range/75pct-common-ref.html
 create mode 100644 layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
 create mode 100644 layout/reftests/forms/input/range/auto-size-ref.html
 create mode 100644 layout/reftests/forms/input/range/auto-size.html
 create mode 100644 layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
 create mode 100644 layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/range/direction-unthemed-1-ref.html
 create mode 100644 layout/reftests/forms/input/range/direction-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
 create mode 100644 layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/range/max-prop.html
 create mode 100644 layout/reftests/forms/input/range/moz-range-progress-1-ref.html
 create mode 100644 layout/reftests/forms/input/range/moz-range-progress-1.html
 create mode 100644 layout/reftests/forms/input/range/moz-range-progress-2-ref.html
 create mode 100644 layout/reftests/forms/input/range/moz-range-progress-2.html
 create mode 100644 layout/reftests/forms/input/range/moz-range-progress-3-ref.html
 create mode 100644 layout/reftests/forms/input/range/moz-range-progress-3.html
 create mode 100644 layout/reftests/forms/input/range/not-other-type-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
 create mode 100644 layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
 create mode 100644 layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
 create mode 100644 layout/reftests/forms/input/range/range-border-background-ref.html
 create mode 100644 layout/reftests/forms/input/range/range-border-background.html
 create mode 100644 layout/reftests/forms/input/range/range-orient-block.html
 create mode 100644 layout/reftests/forms/input/range/range-orient-horizontal-rtl.html
 create mode 100644 layout/reftests/forms/input/range/range-orient-horizontal.html
 create mode 100644 layout/reftests/forms/input/range/range-orient-inline.html
 create mode 100644 layout/reftests/forms/input/range/range-orient-vertical-rtl.html
 create mode 100644 layout/reftests/forms/input/range/range-orient-vertical.html
 create mode 100644 layout/reftests/forms/input/range/range-percent-intrinsic-size-2b-ref.html
 create mode 100644 layout/reftests/forms/input/range/range-percent-intrinsic-size-2b.html
 create mode 100644 layout/reftests/forms/input/range/range-track-bg-ref.html
 create mode 100644 layout/reftests/forms/input/range/range-track-bg.html
 create mode 100644 layout/reftests/forms/input/range/range-vlr-orient-block.html
 create mode 100644 layout/reftests/forms/input/range/range-vlr-orient-horizontal.html
 create mode 100644 layout/reftests/forms/input/range/range-vlr-orient-inline.html
 create mode 100644 layout/reftests/forms/input/range/range-vlr-orient-vertical.html
 create mode 100644 layout/reftests/forms/input/range/range-vlr.html
 create mode 100644 layout/reftests/forms/input/range/range-vrl-orient-block.html
 create mode 100644 layout/reftests/forms/input/range/range-vrl-orient-horizontal.html
 create mode 100644 layout/reftests/forms/input/range/range-vrl-orient-inline.html
 create mode 100644 layout/reftests/forms/input/range/range-vrl-orient-vertical.html
 create mode 100644 layout/reftests/forms/input/range/range-vrl.html
 create mode 100644 layout/reftests/forms/input/range/reftest.list
 create mode 100644 layout/reftests/forms/input/range/reset-value-ref.html
 create mode 100644 layout/reftests/forms/input/range/reset-value.html
 create mode 100644 layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
 create mode 100644 layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/range/stepDown-unthemed.html
 create mode 100644 layout/reftests/forms/input/range/stepDown.html
 create mode 100644 layout/reftests/forms/input/range/stepUp-unthemed.html
 create mode 100644 layout/reftests/forms/input/range/stepUp.html
 create mode 100644 layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
 create mode 100644 layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
 create mode 100644 layout/reftests/forms/input/range/track-default-rendering-ref.html
 create mode 100644 layout/reftests/forms/input/range/track-default-rendering.html
 create mode 100644 layout/reftests/forms/input/range/value-prop-unthemed.html
 create mode 100644 layout/reftests/forms/input/range/value-prop.html
 create mode 100644 layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
 create mode 100644 layout/reftests/forms/input/range/valueAsNumber-prop.html
 create mode 100644 layout/reftests/forms/input/reftest.list
 create mode 100644 layout/reftests/forms/input/search/1.html
 create mode 100644 layout/reftests/forms/input/search/2.html
 create mode 100644 layout/reftests/forms/input/search/3.html
 create mode 100644 layout/reftests/forms/input/search/appearance-textfield-dynamic.html
 create mode 100644 layout/reftests/forms/input/search/appearance-textfield.html
 create mode 100644 layout/reftests/forms/input/search/ref.html
 create mode 100644 layout/reftests/forms/input/search/reftest.list
 create mode 100644 layout/reftests/forms/input/search/search-basic.html
 create mode 100644 layout/reftests/forms/input/search/search-with-value.html
 create mode 100644 layout/reftests/forms/input/search/text-with-value.html
 create mode 100644 layout/reftests/forms/input/search/text.html
 create mode 100644 layout/reftests/forms/input/tel/1.html
 create mode 100644 layout/reftests/forms/input/tel/2.html
 create mode 100644 layout/reftests/forms/input/tel/3.html
 create mode 100644 layout/reftests/forms/input/tel/ref.html
 create mode 100644 layout/reftests/forms/input/tel/reftest.list
 create mode 100644 layout/reftests/forms/input/text/autofill-blank.html
 create mode 100644 layout/reftests/forms/input/text/autofill-line-height.html
 create mode 100644 layout/reftests/forms/input/text/autofill-prefilled-value.html
 create mode 100644 layout/reftests/forms/input/text/autofill-preview-blank.html
 create mode 100644 layout/reftests/forms/input/text/autofill-preview-line-height.html
 create mode 100644 layout/reftests/forms/input/text/autofill-preview.html
 create mode 100644 layout/reftests/forms/input/text/autofill.html
 create mode 100644 layout/reftests/forms/input/text/baseline-1-ref.html
 create mode 100644 layout/reftests/forms/input/text/baseline-1.html
 create mode 100644 layout/reftests/forms/input/text/bounds-1-ref.html
 create mode 100644 layout/reftests/forms/input/text/bounds-1.html
 create mode 100644 layout/reftests/forms/input/text/centering-1-ref.xhtml
 create mode 100644 layout/reftests/forms/input/text/centering-1.xhtml
 create mode 100644 layout/reftests/forms/input/text/dynamic-height-1-ref.xhtml
 create mode 100644 layout/reftests/forms/input/text/dynamic-height-1.xhtml
 create mode 100644 layout/reftests/forms/input/text/focus-on-anchor-ref.html
 create mode 100644 layout/reftests/forms/input/text/focus-on-anchor.html
 create mode 100644 layout/reftests/forms/input/text/height-small-font-notref.html
 create mode 100644 layout/reftests/forms/input/text/height-small-font.html
 create mode 100644 layout/reftests/forms/input/text/intrinsic-size-ref.html
 create mode 100644 layout/reftests/forms/input/text/intrinsic-size.html
 create mode 100644 layout/reftests/forms/input/text/line-height-0.5.html
 create mode 100644 layout/reftests/forms/input/text/line-height-1.0.html
 create mode 100644 layout/reftests/forms/input/text/line-height-2.5.html
 create mode 100644 layout/reftests/forms/input/text/pseudo-class-lock-ref.html
 create mode 100644 layout/reftests/forms/input/text/pseudo-class-lock.html
 create mode 100644 layout/reftests/forms/input/text/reftest.list
 create mode 100644 layout/reftests/forms/input/text/select-overflow-ref.html
 create mode 100644 layout/reftests/forms/input/text/select-overflow.html
 create mode 100644 layout/reftests/forms/input/text/select-ref.html
 create mode 100644 layout/reftests/forms/input/text/select.html
 create mode 100644 layout/reftests/forms/input/text/shadow-rules-ref.html
 create mode 100644 layout/reftests/forms/input/text/shadow-rules.html
 create mode 100644 layout/reftests/forms/input/text/size-1-ref.html
 create mode 100644 layout/reftests/forms/input/text/size-1.html
 create mode 100644 layout/reftests/forms/input/text/size-2-ref.html
 create mode 100644 layout/reftests/forms/input/text/size-2.html
 create mode 100644 layout/reftests/forms/input/url/1.html
 create mode 100644 layout/reftests/forms/input/url/2.html
 create mode 100644 layout/reftests/forms/input/url/3.html
 create mode 100644 layout/reftests/forms/input/url/ref.html
 create mode 100644 layout/reftests/forms/input/url/reftest.list

(limited to 'layout/reftests/forms/input')

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..766d0efbbd
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/reftest.list
@@ -0,0 +1,18 @@
+== 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
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..4eaa1a7eee
--- /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-80) fuzzy-if(gtkWidget,0-8,0-113) == transformations-1.html transformations-1-ref.html # Bug 1600790 for gtkWidget
+== 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..67bb4b3c9f
--- /dev/null
+++ b/layout/reftests/forms/input/color/transformations-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    input[type=color]:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    input[type=color]:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+    input[type=color]:nth-child(3) { -moz-transform: rotate(30deg); }
+    input[type=color]:nth-child(4) { -moz-transform: scale(2, 4); }
+    input[type=color]:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+    input[type=color]:nth-child(6) { -moz-transform: scale(1, 0.4); }
+    input[type=color]:nth-child(7) { -moz-transform: scale(0.1, 1); }
+    input[type=color]:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+    input[type=color]:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+    input[type=color]:nth-child(10) { -moz-transform: translate(10px, 30px); }
+    input[type=color]:nth-child(11) { -moz-transform: translate(30px, 10px); }
+    input[type=color]:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+    input[type=color]:nth-child(13) { -moz-transform: translate(30px, -10px); }
+    input[type=color]:nth-child(14) { -moz-transform: scale(0, 0); }
+  </style>
+  <body>
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
new file mode 100644
index 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-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..4c583a87bd
--- /dev/null
+++ b/layout/reftests/forms/input/number/reftest.list
@@ -0,0 +1,72 @@
+# 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
+
+== 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..c505ad8af0
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-vertical.html b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html
new file mode 100644
index 0000000000..c6ad0c16bb
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr.html b/layout/reftests/forms/input/range/range-vlr.html
new file mode 100644
index 0000000000..38fde65566
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-block.html b/layout/reftests/forms/input/range/range-vrl-orient-block.html
new file mode 100644
index 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..035c56b076
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-vertical.html b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html
new file mode 100644
index 0000000000..1f5a73201d
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl.html b/layout/reftests/forms/input/range/range-vrl.html
new file mode 100644
index 0000000000..e1ac59cc6c
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" max=100 value=70>
diff --git a/layout/reftests/forms/input/range/reftest.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
-- 
cgit v1.2.3