From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 layout/reftests/forms/button/disabled-1-ref.html   |  16 ++
 layout/reftests/forms/button/disabled-1.html       |  15 ++
 layout/reftests/forms/button/disabled-2-ref.html   |  17 ++
 layout/reftests/forms/button/disabled-2.html       |  17 ++
 .../reftests/forms/button/disabled-3-notref.html   |   9 +
 layout/reftests/forms/button/disabled-3.html       |   9 +
 .../reftests/forms/button/disabled-4-notref.html   |   9 +
 layout/reftests/forms/button/disabled-4.html       |   9 +
 .../reftests/forms/button/disabled-5-notref.html   |   9 +
 layout/reftests/forms/button/disabled-5.html       |   9 +
 .../reftests/forms/button/disabled-6-notref.html   |   9 +
 layout/reftests/forms/button/disabled-6.html       |   9 +
 .../button/display-grid-flex-columnset-ref.html    |  61 +++++
 .../forms/button/display-grid-flex-columnset.html  |  61 +++++
 .../forms/button/first-letter-1-noref.html         |   5 +
 .../reftests/forms/button/first-letter-1-ref.html  |   7 +
 layout/reftests/forms/button/first-letter-1.html   |   6 +
 .../button/focus-area-percent-units-1-ref.html     |  52 ++++
 .../forms/button/focus-area-percent-units-1.html   |  62 +++++
 .../button/focus-area-percent-units-2-ref.html     |  68 +++++
 .../forms/button/focus-area-percent-units-2.html   |  51 ++++
 .../forms/button/line-height-button-0.5.html       |   7 +
 .../forms/button/line-height-button-1.0.html       |   7 +
 .../forms/button/line-height-button-1.5.html       |   7 +
 .../forms/button/line-height-input-0.5.html        |   7 +
 .../forms/button/line-height-input-1.0.html        |   7 +
 .../forms/button/line-height-input-1.5.html        |   7 +
 layout/reftests/forms/button/max-height-ref.html   |  11 +
 layout/reftests/forms/button/max-height.html       |  11 +
 layout/reftests/forms/button/min-height-ref.html   |  17 ++
 layout/reftests/forms/button/min-height.html       |  22 ++
 .../forms/button/overflow-areas-1-ref.html         |  48 ++++
 layout/reftests/forms/button/overflow-areas-1.html |  51 ++++
 .../forms/button/percent-height-child-1-ref.html   |  52 ++++
 .../forms/button/percent-height-child-1.html       |  60 +++++
 .../forms/button/percent-height-child-2-ref.html   |  54 ++++
 .../forms/button/percent-height-child-2.html       |  63 +++++
 .../forms/button/percent-width-child-1-ref.html    |  53 ++++
 .../forms/button/percent-width-child-1.html        |  59 +++++
 .../forms/button/percent-width-child-2-ref.html    |  55 ++++
 .../forms/button/percent-width-child-2.html        |  62 +++++
 layout/reftests/forms/button/reftest-stylo.list    |  61 +++++
 layout/reftests/forms/button/reftest.list          |  48 ++++
 .../forms/button/vertical-centering-ref.html       |  23 ++
 .../reftests/forms/button/vertical-centering.html  |  33 +++
 .../forms/button/width-auto-size-em-ltr-ref.html   |  19 ++
 .../forms/button/width-auto-size-em-ltr.html       |  20 ++
 .../forms/button/width-auto-size-em-rtl-ref.html   |  20 ++
 .../forms/button/width-auto-size-em-rtl.html       |  21 ++
 .../forms/button/width-auto-size-ltr-ref.html      |  20 ++
 .../reftests/forms/button/width-auto-size-ltr.html |  20 ++
 .../forms/button/width-auto-size-rtl-ref.html      |  21 ++
 .../reftests/forms/button/width-auto-size-rtl.html |  21 ++
 .../width-erode-all-focuspadding-ltr-ref.html      |  20 ++
 .../button/width-erode-all-focuspadding-ltr.html   |  21 ++
 .../width-erode-all-focuspadding-rtl-ref.html      |  21 ++
 .../button/width-erode-all-focuspadding-rtl.html   |  22 ++
 .../width-erode-overflow-focuspadding-ltr-ref.html |  20 ++
 .../width-erode-overflow-focuspadding-ltr.html     |  21 ++
 .../width-erode-overflow-focuspadding-rtl-ref.html |  21 ++
 .../width-erode-overflow-focuspadding-rtl.html     |  22 ++
 .../width-erode-part-focuspadding-ltr-ref.html     |  20 ++
 .../button/width-erode-part-focuspadding-ltr.html  |  21 ++
 .../width-erode-part-focuspadding-rtl-ref.html     |  21 ++
 .../button/width-erode-part-focuspadding-rtl.html  |  22 ++
 .../reftests/forms/button/width-exact-fit-ltr.html |  21 ++
 .../reftests/forms/button/width-exact-fit-rtl.html |  22 ++
 .../forms/fieldset/abs-pos-child-sizing-ref.html   |  79 ++++++
 .../forms/fieldset/abs-pos-child-sizing.html       |  64 +++++
 .../fieldset/dynamic-legend-scroll-1-ref.html      |  24 ++
 .../forms/fieldset/dynamic-legend-scroll-1.html    |  33 +++
 .../forms/fieldset/fieldset-flexbox-001-ref.html   |  40 +++
 .../forms/fieldset/fieldset-flexbox-001.html       |  36 +++
 .../forms/fieldset/fieldset-grid-001-ref.html      |  33 +++
 .../reftests/forms/fieldset/fieldset-grid-001.html |  29 +++
 .../forms/fieldset/fieldset-hidden-1-ref.html      |  21 ++
 .../reftests/forms/fieldset/fieldset-hidden-1.html |  19 ++
 .../fieldset/fieldset-intrinsic-width-1-ref.html   |   8 +
 .../forms/fieldset/fieldset-intrinsic-width-1.html |   8 +
 .../fieldset/fieldset-overflow-auto-1-ref.html     |  52 ++++
 .../forms/fieldset/fieldset-overflow-auto-1.html   |  52 ++++
 .../fieldset-percentage-padding-1-ref.html         |  19 ++
 .../fieldset/fieldset-percentage-padding-1.html    |  19 ++
 .../forms/fieldset/fieldset-scroll-1-ref.html      |   9 +
 .../reftests/forms/fieldset/fieldset-scroll-1.html |   8 +
 .../forms/fieldset/fieldset-scrolled-1-ref.html    |  24 ++
 .../forms/fieldset/fieldset-scrolled-1.html        |  27 ++
 layout/reftests/forms/fieldset/legend-rtl-ref.html |   5 +
 layout/reftests/forms/fieldset/legend-rtl.html     |   5 +
 .../forms/fieldset/overflow-hidden-ref.html        | 175 +++++++++++++
 .../reftests/forms/fieldset/overflow-hidden.html   | 125 +++++++++
 .../forms/fieldset/positioned-container-1-ref.html |  11 +
 .../forms/fieldset/positioned-container-1.html     |  14 ++
 layout/reftests/forms/fieldset/reftest-stylo.list  |  19 ++
 layout/reftests/forms/fieldset/reftest.list        |  16 ++
 .../forms/fieldset/relpos-legend-1-ref.html        |   8 +
 .../reftests/forms/fieldset/relpos-legend-1.html   |   8 +
 .../forms/fieldset/relpos-legend-2-ref.html        |   8 +
 .../reftests/forms/fieldset/relpos-legend-2.html   |   8 +
 .../forms/fieldset/sticky-legend-1-ref.html        |  12 +
 .../reftests/forms/fieldset/sticky-legend-1.html   |  12 +
 .../input/checkbox/checked-native-notref.html      |   2 +
 .../forms/input/checkbox/checked-native.html       |   2 +
 .../forms/input/checkbox/checked-notref.html       |   2 +
 layout/reftests/forms/input/checkbox/checked.html  |   2 +
 .../input/checkbox/gtk-theme-width-height-ref.html |  31 +++
 .../input/checkbox/gtk-theme-width-height.html     |  30 +++
 .../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 +
 .../forms/input/checkbox/reftest-stylo.list        |  18 ++
 layout/reftests/forms/input/checkbox/reftest.list  |  14 ++
 .../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      |  19 ++
 .../reftests/forms/input/color/custom-style-1.html |  14 ++
 .../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    |  88 +++++++
 .../forms/input/color/margin-padding-1.html        |  39 +++
 .../reftests/forms/input/color/reference-style.css |  16 ++
 .../reftests/forms/input/color/reftest-stylo.list  |  20 ++
 layout/reftests/forms/input/color/reftest.list     |  14 ++
 .../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 ++
 layout/reftests/forms/input/datetime/reftest.list  |  13 +
 .../reftests/forms/input/datetime/time-basic.html  |   6 +
 .../reftests/forms/input/datetime/time-border.html |   6 +
 .../forms/input/datetime/time-large-font.html      |   6 +
 .../input/datetime/time-simple-unthemed-ref.html   |   6 +
 .../forms/input/datetime/time-simple-unthemed.html |   6 +
 .../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 +
 .../reftests/forms/input/email/reftest-stylo.list  |   4 +
 layout/reftests/forms/input/email/reftest.list     |   3 +
 .../reftests/forms/input/file/background-ref.xul   |  16 ++
 layout/reftests/forms/input/file/background.html   |  11 +
 .../forms/input/file/color-inherit-ref.html        |   6 +
 .../reftests/forms/input/file/color-inherit.html   |   6 +
 .../reftests/forms/input/file/reftest-stylo.list   |  20 ++
 layout/reftests/forms/input/file/reftest.list      |   7 +
 layout/reftests/forms/input/file/rtl-ref.xul       |  17 ++
 layout/reftests/forms/input/file/rtl.html          |   8 +
 layout/reftests/forms/input/file/simple-ref.xul    |  14 ++
 layout/reftests/forms/input/file/simple.html       |   8 +
 layout/reftests/forms/input/file/size.html         |   9 +
 layout/reftests/forms/input/file/style-ref.xul     |  25 ++
 layout/reftests/forms/input/file/style.css         |  61 +++++
 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 ++
 .../reftests/forms/input/hidden/reftest-stylo.list |   2 +
 layout/reftests/forms/input/hidden/reftest.list    |   1 +
 .../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-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 |  20 ++
 .../number/number-reframe-anon-text-field-ref.html |  17 ++
 .../number/number-reframe-anon-text-field.html     |  44 ++++
 .../number/number-same-as-text-unthemed-ref.html   |   6 +
 .../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 +
 .../forms/input/number/pseudo-classes.html         |  37 +++
 .../reftests/forms/input/number/reftest-stylo.list |  65 +++++
 layout/reftests/forms/input/number/reftest.list    |  54 ++++
 .../forms/input/number/show-value-ref.html         |  26 ++
 layout/reftests/forms/input/number/show-value.html |  42 ++++
 .../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 ++
 .../forms/input/percentage/reftest-stylo.list      |   2 +
 .../reftests/forms/input/percentage/reftest.list   |   1 +
 .../forms/input/radio/checked-native-notref.html   |   2 +
 .../reftests/forms/input/radio/checked-native.html |   2 +
 .../reftests/forms/input/radio/checked-notref.html |   2 +
 layout/reftests/forms/input/radio/checked.html     |   2 +
 .../input/radio/gtk-theme-width-height-ref.html    |  31 +++
 .../forms/input/radio/gtk-theme-width-height.html  |  30 +++
 .../forms/input/radio/label-dynamic-ref.html       |  38 +++
 .../reftests/forms/input/radio/label-dynamic.html  |  46 ++++
 .../reftests/forms/input/radio/reftest-stylo.list  |  10 +
 layout/reftests/forms/input/radio/reftest.list     |   8 +
 .../forms/input/range/100pct-common-ref.html       |   6 +
 .../forms/input/range/75pct-common-ref.html        |   6 +
 .../input/range/75pct-unthemed-common-ref.html     |   6 +
 ...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 +
 .../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 +
 .../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 +
 .../reftests/forms/input/range/reftest-stylo.list  |  54 ++++
 layout/reftests/forms/input/range/reftest.list     |  49 ++++
 .../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 ++
 .../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-stylo.list     |  14 ++
 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 ++
 layout/reftests/forms/input/search/ref.html        |   6 +
 .../reftests/forms/input/search/reftest-stylo.list |   4 +
 layout/reftests/forms/input/search/reftest.list    |   3 +
 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-stylo.list |   4 +
 layout/reftests/forms/input/tel/reftest.list       |   3 +
 .../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 ++
 .../reftests/forms/input/text/centering-1-ref.xul  |  28 +++
 layout/reftests/forms/input/text/centering-1.xul   |  39 +++
 .../forms/input/text/dynamic-height-1-ref.xul      |   9 +
 .../reftests/forms/input/text/dynamic-height-1.xul |  23 ++
 .../forms/input/text/intrinsic-size-ref.html       |  12 +
 .../reftests/forms/input/text/intrinsic-size.html  |  12 +
 .../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-1.5.html |   7 +
 .../reftests/forms/input/text/reftest-stylo.list   |  16 ++
 layout/reftests/forms/input/text/reftest.list      |  10 +
 layout/reftests/forms/input/text/select-ref.html   |  18 ++
 layout/reftests/forms/input/text/select.html       |  21 ++
 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-stylo.list |   4 +
 layout/reftests/forms/input/url/reftest.list       |   3 +
 layout/reftests/forms/legend/1273433-ref.html      |  51 ++++
 layout/reftests/forms/legend/1273433.html          |  51 ++++
 layout/reftests/forms/legend/legend-ref.html       |  94 +++++++
 layout/reftests/forms/legend/legend.html           |  87 +++++++
 layout/reftests/forms/legend/reftest-stylo.list    |   5 +
 layout/reftests/forms/legend/reftest.list          |   3 +
 layout/reftests/forms/legend/shadow-dom-ref.html   |  29 +++
 layout/reftests/forms/legend/shadow-dom.html       | 111 ++++++++
 .../forms/meter/bar-pseudo-element-ref.html        | 105 ++++++++
 .../forms/meter/bar-pseudo-element-rtl-ref.html    |  45 ++++
 .../forms/meter/bar-pseudo-element-rtl.html        |  26 ++
 .../meter/bar-pseudo-element-vertical-ref.html     |  91 +++++++
 .../meter/bar-pseudo-element-vertical-rtl-ref.html |  94 +++++++
 .../meter/bar-pseudo-element-vertical-rtl.html     |  46 ++++
 .../forms/meter/bar-pseudo-element-vertical.html   |  46 ++++
 .../reftests/forms/meter/bar-pseudo-element.html   |  50 ++++
 .../reftests/forms/meter/block-invalidate-ref.html |  10 +
 layout/reftests/forms/meter/block-invalidate.html  |  19 ++
 .../meter/default-style/default-style-dyn-ref.html |  38 +++
 .../meter/default-style/default-style-dyn.html     |  34 +++
 .../meter/default-style/default-style-ref.html     | 279 +++++++++++++++++++++
 .../forms/meter/default-style/default-style.html   |  61 +++++
 .../forms/meter/default-style/reftest-stylo.list   |   3 +
 .../forms/meter/default-style/reftest.list         |   2 +
 .../reftests/forms/meter/default-style/style.css   |  54 ++++
 layout/reftests/forms/meter/in-cells-ref.html      |  22 ++
 layout/reftests/forms/meter/in-cells.html          |  21 ++
 .../reftests/forms/meter/margin-padding-ref.html   |  88 +++++++
 .../forms/meter/margin-padding-rtl-ref.html        |  88 +++++++
 .../reftests/forms/meter/margin-padding-rtl.html   |  40 +++
 .../forms/meter/margin-padding-vertical-ref.html   |  88 +++++++
 .../meter/margin-padding-vertical-rtl-ref.html     |  88 +++++++
 .../forms/meter/margin-padding-vertical-rtl.html   |  43 ++++
 .../forms/meter/margin-padding-vertical.html       |  43 ++++
 layout/reftests/forms/meter/margin-padding.html    |  40 +++
 layout/reftests/forms/meter/max-height-ref.html    |  11 +
 layout/reftests/forms/meter/max-height.html        |  11 +
 .../reftests/forms/meter/meter-orient-block.html   |   3 +
 .../forms/meter/meter-orient-horizontal-rtl.html   |   3 +
 .../forms/meter/meter-orient-horizontal.html       |   3 +
 .../reftests/forms/meter/meter-orient-inline.html  |   3 +
 .../forms/meter/meter-orient-vertical-rtl.html     |   3 +
 .../forms/meter/meter-orient-vertical.html         |   3 +
 .../forms/meter/meter-vlr-orient-block.html        |   3 +
 .../forms/meter/meter-vlr-orient-horizontal.html   |   3 +
 .../forms/meter/meter-vlr-orient-inline.html       |   3 +
 .../forms/meter/meter-vlr-orient-vertical.html     |   3 +
 layout/reftests/forms/meter/meter-vlr.html         |   3 +
 .../forms/meter/meter-vrl-orient-block.html        |   3 +
 .../forms/meter/meter-vrl-orient-horizontal.html   |   3 +
 .../forms/meter/meter-vrl-orient-inline.html       |   3 +
 .../forms/meter/meter-vrl-orient-vertical.html     |   3 +
 layout/reftests/forms/meter/meter-vrl.html         |   3 +
 layout/reftests/forms/meter/reftest-stylo.list     |  49 ++++
 layout/reftests/forms/meter/reftest.list           |  43 ++++
 layout/reftests/forms/meter/style.css              |  38 +++
 .../reftests/forms/meter/transformations-ref.html  |  78 ++++++
 layout/reftests/forms/meter/transformations.html   |  36 +++
 layout/reftests/forms/meter/values-ref.html        | 163 ++++++++++++
 layout/reftests/forms/meter/values-rtl-ref.html    | 163 ++++++++++++
 layout/reftests/forms/meter/values-rtl.html        |  42 ++++
 .../reftests/forms/meter/values-vertical-ref.html  | 163 ++++++++++++
 .../forms/meter/values-vertical-rtl-ref.html       | 163 ++++++++++++
 .../reftests/forms/meter/values-vertical-rtl.html  |  47 ++++
 layout/reftests/forms/meter/values-vertical.html   |  47 ++++
 layout/reftests/forms/meter/values.html            |  42 ++++
 layout/reftests/forms/output/output-1.html         |   7 +
 layout/reftests/forms/output/output-2.html         |   7 +
 layout/reftests/forms/output/output-3.html         |   7 +
 layout/reftests/forms/output/output-4.html         |   7 +
 layout/reftests/forms/output/output-5.html         |  18 ++
 layout/reftests/forms/output/output-6.html         |  18 ++
 layout/reftests/forms/output/output-7.html         |  22 ++
 layout/reftests/forms/output/output-ref-2.html     |   6 +
 layout/reftests/forms/output/output-ref-3.html     |   6 +
 layout/reftests/forms/output/output-ref.html       |   6 +
 layout/reftests/forms/output/reftest-stylo.list    |   8 +
 layout/reftests/forms/output/reftest.list          |   7 +
 .../forms/placeholder/placeholder-1-password.html  |   8 +
 .../forms/placeholder/placeholder-1-text.html      |   8 +
 .../forms/placeholder/placeholder-1-textarea.html  |   8 +
 .../reftests/forms/placeholder/placeholder-10.html |  27 ++
 .../reftests/forms/placeholder/placeholder-11.html |   8 +
 .../reftests/forms/placeholder/placeholder-12.html |   8 +
 .../reftests/forms/placeholder/placeholder-13.html |  18 ++
 .../reftests/forms/placeholder/placeholder-14.html |  18 ++
 .../reftests/forms/placeholder/placeholder-18.html |  22 ++
 .../reftests/forms/placeholder/placeholder-19.xul  |  23 ++
 .../forms/placeholder/placeholder-2-textarea.html  |  19 ++
 .../reftests/forms/placeholder/placeholder-2.html  |  19 ++
 .../reftests/forms/placeholder/placeholder-20.html |  23 ++
 .../reftests/forms/placeholder/placeholder-21.html |  22 ++
 .../reftests/forms/placeholder/placeholder-22.html |  22 ++
 .../reftests/forms/placeholder/placeholder-3.html  |   7 +
 .../reftests/forms/placeholder/placeholder-4.html  |  18 ++
 .../reftests/forms/placeholder/placeholder-5.html  |  19 ++
 .../forms/placeholder/placeholder-6-textarea.html  |   8 +
 .../reftests/forms/placeholder/placeholder-6.html  |   8 +
 .../reftests/forms/placeholder/placeholder-7.html  |  19 ++
 .../reftests/forms/placeholder/placeholder-8.html  |  23 ++
 .../reftests/forms/placeholder/placeholder-9.html  |  23 ++
 .../forms/placeholder/placeholder-blank-ref.html   |  16 ++
 .../forms/placeholder/placeholder-focus-pref.html  |  20 ++
 .../forms/placeholder/placeholder-focus-ref.html   |  17 ++
 .../placeholder/placeholder-overflow-ref.html      |  13 +
 .../placeholder-overflow-textarea-ref.html         |  13 +
 .../placeholder/placeholder-overridden-ref.html    |   6 +
 .../placeholder/placeholder-overridden-ref.xul     |   5 +
 .../forms/placeholder/placeholder-rtl-ref.html     |   9 +
 .../forms/placeholder/placeholder-rtl.html         |   8 +
 .../forms/placeholder/placeholder-style.css        |  10 +
 .../forms/placeholder/placeholder-visible-ref.html |  13 +
 .../placeholder-visible-textarea-ref.html          |  13 +
 .../reftests/forms/placeholder/reftest-stylo.list  |  39 +++
 layout/reftests/forms/placeholder/reftest.list     |  35 +++
 .../forms/progress/bar-pseudo-element-ref.html     | 105 ++++++++
 .../forms/progress/bar-pseudo-element-rtl-ref.html |  45 ++++
 .../forms/progress/bar-pseudo-element-rtl.html     |  26 ++
 .../progress/bar-pseudo-element-vertical-ref.html  |  90 +++++++
 .../bar-pseudo-element-vertical-rtl-ref.html       |  91 +++++++
 .../progress/bar-pseudo-element-vertical-rtl.html  |  46 ++++
 .../progress/bar-pseudo-element-vertical.html      |  46 ++++
 .../forms/progress/bar-pseudo-element.html         |  50 ++++
 .../forms/progress/block-invalidate-ref.html       |  10 +
 .../reftests/forms/progress/block-invalidate.html  |  19 ++
 layout/reftests/forms/progress/in-cells-ref.html   |  22 ++
 layout/reftests/forms/progress/in-cells.html       |  21 ++
 .../progress/indeterminate-style-height-ref.html   |  46 ++++
 .../forms/progress/indeterminate-style-height.html |  24 ++
 .../progress/indeterminate-style-width-ref.html    |  37 +++
 .../forms/progress/indeterminate-style-width.html  |  19 ++
 .../forms/progress/margin-padding-ref.html         |  88 +++++++
 .../forms/progress/margin-padding-rtl-ref.html     |  88 +++++++
 .../forms/progress/margin-padding-rtl.html         |  40 +++
 .../progress/margin-padding-vertical-ref.html      |  88 +++++++
 .../progress/margin-padding-vertical-rtl-ref.html  |  88 +++++++
 .../progress/margin-padding-vertical-rtl.html      |  43 ++++
 .../forms/progress/margin-padding-vertical.html    |  43 ++++
 layout/reftests/forms/progress/margin-padding.html |  40 +++
 layout/reftests/forms/progress/max-height-ref.html |  11 +
 layout/reftests/forms/progress/max-height.html     |  11 +
 .../forms/progress/progress-orient-block.html      |   3 +
 .../progress/progress-orient-horizontal-rtl.html   |   3 +
 .../forms/progress/progress-orient-horizontal.html |   3 +
 .../forms/progress/progress-orient-inline.html     |   3 +
 .../progress/progress-orient-vertical-rtl.html     |   3 +
 .../forms/progress/progress-orient-vertical.html   |   3 +
 .../forms/progress/progress-vlr-orient-block.html  |   3 +
 .../progress/progress-vlr-orient-horizontal.html   |   3 +
 .../forms/progress/progress-vlr-orient-inline.html |   3 +
 .../progress/progress-vlr-orient-vertical.html     |   3 +
 layout/reftests/forms/progress/progress-vlr.html   |   3 +
 .../forms/progress/progress-vrl-orient-block.html  |   3 +
 .../progress/progress-vrl-orient-horizontal.html   |   3 +
 .../forms/progress/progress-vrl-orient-inline.html |   3 +
 .../progress/progress-vrl-orient-vertical.html     |   3 +
 layout/reftests/forms/progress/progress-vrl.html   |   3 +
 layout/reftests/forms/progress/reftest-stylo.list  |  49 ++++
 layout/reftests/forms/progress/reftest.list        |  42 ++++
 layout/reftests/forms/progress/style.css           |  39 +++
 .../forms/progress/transformations-ref.html        |  78 ++++++
 .../reftests/forms/progress/transformations.html   |  36 +++
 layout/reftests/forms/progress/values-ref.html     |  58 +++++
 layout/reftests/forms/progress/values-rtl-ref.html |  58 +++++
 layout/reftests/forms/progress/values-rtl.html     |  16 ++
 .../forms/progress/values-vertical-ref.html        |  58 +++++
 .../forms/progress/values-vertical-rtl-ref.html    |  58 +++++
 .../forms/progress/values-vertical-rtl.html        |  21 ++
 .../reftests/forms/progress/values-vertical.html   |  21 ++
 layout/reftests/forms/progress/values.html         |  16 ++
 layout/reftests/forms/reftest-stylo.list           |  36 +++
 layout/reftests/forms/reftest.list                 |  34 +++
 layout/reftests/forms/select/997709-2-ref.html     |   4 +
 layout/reftests/forms/select/997709-2.html         |   4 +
 layout/reftests/forms/select/boguskids-ref.html    |  13 +
 layout/reftests/forms/select/boguskids.html        |  18 ++
 .../reftests/forms/select/dynamic-boguskids.html   |  31 +++
 layout/reftests/forms/select/focusring-1-ref.html  |  37 +++
 layout/reftests/forms/select/focusring-1.html      |  41 +++
 layout/reftests/forms/select/focusring-2-ref.html  |  22 ++
 layout/reftests/forms/select/focusring-2.html      |  46 ++++
 layout/reftests/forms/select/focusring-3-ref.html  |  36 +++
 layout/reftests/forms/select/focusring-3.html      |  40 +++
 layout/reftests/forms/select/multiple-ref.html     |  12 +
 layout/reftests/forms/select/multiple.html         |  12 +
 .../reftests/forms/select/option-children-ref.html |   5 +
 layout/reftests/forms/select/option-children.html  |  11 +
 .../select/out-of-bounds-selectedindex-ref.html    | 112 +++++++++
 .../forms/select/out-of-bounds-selectedindex.html  | 129 ++++++++++
 .../forms/select/padding-button-placement-ref.html |  10 +
 .../forms/select/padding-button-placement.html     |  15 ++
 layout/reftests/forms/select/reftest-stylo.list    |  15 ++
 layout/reftests/forms/select/reftest.list          |  11 +
 .../forms/select/vertical-centering-ref.html       |  23 ++
 .../reftests/forms/select/vertical-centering.html  |  19 ++
 .../forms/text-control-baseline-1-ref.html         |  30 +++
 layout/reftests/forms/text-control-baseline-1.html |  37 +++
 .../forms/textarea/in-dynamic-rtl-doc.html         |  18 ++
 .../forms/textarea/in-ltr-doc-scrollbar.html       |  10 +
 .../forms/textarea/in-rtl-doc-scrollbar.html       |  10 +
 layout/reftests/forms/textarea/ltr-scrollbar.html  |  10 +
 layout/reftests/forms/textarea/ltr.html            |  10 +
 layout/reftests/forms/textarea/no-resize.html      |  10 +
 .../textarea/padding-scrollbar-placement-ref.html  |  51 ++++
 .../textarea/padding-scrollbar-placement.html      |  44 ++++
 layout/reftests/forms/textarea/reftest-stylo.list  |  23 ++
 layout/reftests/forms/textarea/reftest.list        |  14 ++
 .../forms/textarea/resize-background-ref.html      |  30 +++
 .../reftests/forms/textarea/resize-background.html |   3 +
 layout/reftests/forms/textarea/resize-ref.html     |   3 +
 layout/reftests/forms/textarea/resize.html         |   3 +
 .../reftests/forms/textarea/rtl-dynamic-attr.html  |  18 ++
 .../reftests/forms/textarea/rtl-dynamic-style.html |  18 ++
 layout/reftests/forms/textarea/rtl-scrollbar.html  |  10 +
 layout/reftests/forms/textarea/rtl.html            |  10 +
 .../textarea/setvalue-framereconstruction-1.html   |  50 ++++
 .../textarea/setvalue-framereconstruction-ref.html |  17 ++
 .../reftests/forms/textarea/various-cols-ref.html  |   4 +
 layout/reftests/forms/textarea/various-cols.html   |   4 +
 .../reftests/forms/textbox/accesskey-1-notref.xul  |  35 +++
 layout/reftests/forms/textbox/accesskey-1.xul      |  35 +++
 layout/reftests/forms/textbox/accesskey-2-ref.xul  |  36 +++
 layout/reftests/forms/textbox/accesskey-2.xul      |  36 +++
 .../reftests/forms/textbox/accesskey-3-notref.xul  |  36 +++
 layout/reftests/forms/textbox/accesskey-3-ref.xul  |  36 +++
 layout/reftests/forms/textbox/accesskey-3.xul      |  36 +++
 .../reftests/forms/textbox/accesskey-4-notref.xul  |  36 +++
 layout/reftests/forms/textbox/accesskey-4-ref.xul  |  36 +++
 layout/reftests/forms/textbox/accesskey-4.xul      |  36 +++
 .../forms/textbox/align-baseline-1-ref.xul         |  26 ++
 layout/reftests/forms/textbox/align-baseline-1.xul |  34 +++
 layout/reftests/forms/textbox/reftest-stylo.list   |  28 +++
 layout/reftests/forms/textbox/reftest.list         |  11 +
 layout/reftests/forms/textbox/setsize-ref.xul      |   9 +
 layout/reftests/forms/textbox/setsize.xul          |   8 +
 563 files changed, 13417 insertions(+)
 create mode 100644 layout/reftests/forms/button/disabled-1-ref.html
 create mode 100644 layout/reftests/forms/button/disabled-1.html
 create mode 100644 layout/reftests/forms/button/disabled-2-ref.html
 create mode 100644 layout/reftests/forms/button/disabled-2.html
 create mode 100644 layout/reftests/forms/button/disabled-3-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-3.html
 create mode 100644 layout/reftests/forms/button/disabled-4-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-4.html
 create mode 100644 layout/reftests/forms/button/disabled-5-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-5.html
 create mode 100644 layout/reftests/forms/button/disabled-6-notref.html
 create mode 100644 layout/reftests/forms/button/disabled-6.html
 create mode 100644 layout/reftests/forms/button/display-grid-flex-columnset-ref.html
 create mode 100644 layout/reftests/forms/button/display-grid-flex-columnset.html
 create mode 100644 layout/reftests/forms/button/first-letter-1-noref.html
 create mode 100644 layout/reftests/forms/button/first-letter-1-ref.html
 create mode 100644 layout/reftests/forms/button/first-letter-1.html
 create mode 100644 layout/reftests/forms/button/focus-area-percent-units-1-ref.html
 create mode 100644 layout/reftests/forms/button/focus-area-percent-units-1.html
 create mode 100644 layout/reftests/forms/button/focus-area-percent-units-2-ref.html
 create mode 100644 layout/reftests/forms/button/focus-area-percent-units-2.html
 create mode 100644 layout/reftests/forms/button/line-height-button-0.5.html
 create mode 100644 layout/reftests/forms/button/line-height-button-1.0.html
 create mode 100644 layout/reftests/forms/button/line-height-button-1.5.html
 create mode 100644 layout/reftests/forms/button/line-height-input-0.5.html
 create mode 100644 layout/reftests/forms/button/line-height-input-1.0.html
 create mode 100644 layout/reftests/forms/button/line-height-input-1.5.html
 create mode 100644 layout/reftests/forms/button/max-height-ref.html
 create mode 100644 layout/reftests/forms/button/max-height.html
 create mode 100644 layout/reftests/forms/button/min-height-ref.html
 create mode 100644 layout/reftests/forms/button/min-height.html
 create mode 100644 layout/reftests/forms/button/overflow-areas-1-ref.html
 create mode 100644 layout/reftests/forms/button/overflow-areas-1.html
 create mode 100644 layout/reftests/forms/button/percent-height-child-1-ref.html
 create mode 100644 layout/reftests/forms/button/percent-height-child-1.html
 create mode 100644 layout/reftests/forms/button/percent-height-child-2-ref.html
 create mode 100644 layout/reftests/forms/button/percent-height-child-2.html
 create mode 100644 layout/reftests/forms/button/percent-width-child-1-ref.html
 create mode 100644 layout/reftests/forms/button/percent-width-child-1.html
 create mode 100644 layout/reftests/forms/button/percent-width-child-2-ref.html
 create mode 100644 layout/reftests/forms/button/percent-width-child-2.html
 create mode 100644 layout/reftests/forms/button/reftest-stylo.list
 create mode 100644 layout/reftests/forms/button/reftest.list
 create mode 100644 layout/reftests/forms/button/vertical-centering-ref.html
 create mode 100644 layout/reftests/forms/button/vertical-centering.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-ltr.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-em-rtl.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-ltr.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-auto-size-rtl.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
 create mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
 create mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
 create mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
 create mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
 create mode 100644 layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
 create mode 100644 layout/reftests/forms/button/width-exact-fit-ltr.html
 create mode 100644 layout/reftests/forms/button/width-exact-fit-rtl.html
 create mode 100644 layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html
 create mode 100644 layout/reftests/forms/fieldset/abs-pos-child-sizing.html
 create mode 100644 layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-flexbox-001.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-grid-001-ref.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-grid-001.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-hidden-1.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-scroll-1.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/fieldset-scrolled-1.html
 create mode 100644 layout/reftests/forms/fieldset/legend-rtl-ref.html
 create mode 100644 layout/reftests/forms/fieldset/legend-rtl.html
 create mode 100644 layout/reftests/forms/fieldset/overflow-hidden-ref.html
 create mode 100644 layout/reftests/forms/fieldset/overflow-hidden.html
 create mode 100644 layout/reftests/forms/fieldset/positioned-container-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/positioned-container-1.html
 create mode 100644 layout/reftests/forms/fieldset/reftest-stylo.list
 create mode 100644 layout/reftests/forms/fieldset/reftest.list
 create mode 100644 layout/reftests/forms/fieldset/relpos-legend-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/relpos-legend-1.html
 create mode 100644 layout/reftests/forms/fieldset/relpos-legend-2-ref.html
 create mode 100644 layout/reftests/forms/fieldset/relpos-legend-2.html
 create mode 100644 layout/reftests/forms/fieldset/sticky-legend-1-ref.html
 create mode 100644 layout/reftests/forms/fieldset/sticky-legend-1.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/checked-notref.html
 create mode 100644 layout/reftests/forms/input/checkbox/checked.html
 create mode 100644 layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html
 create mode 100644 layout/reftests/forms/input/checkbox/gtk-theme-width-height.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-stylo.list
 create mode 100644 layout/reftests/forms/input/checkbox/reftest.list
 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-stylo.list
 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/reftest.list
 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-large-font.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-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-stylo.list
 create mode 100644 layout/reftests/forms/input/email/reftest.list
 create mode 100644 layout/reftests/forms/input/file/background-ref.xul
 create mode 100644 layout/reftests/forms/input/file/background.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/reftest-stylo.list
 create mode 100644 layout/reftests/forms/input/file/reftest.list
 create mode 100644 layout/reftests/forms/input/file/rtl-ref.xul
 create mode 100644 layout/reftests/forms/input/file/rtl.html
 create mode 100644 layout/reftests/forms/input/file/simple-ref.xul
 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.xul
 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-stylo.list
 create mode 100644 layout/reftests/forms/input/hidden/reftest.list
 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-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-ref.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/pseudo-classes.html
 create mode 100644 layout/reftests/forms/input/number/reftest-stylo.list
 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/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-stylo.list
 create mode 100644 layout/reftests/forms/input/percentage/reftest.list
 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/checked-notref.html
 create mode 100644 layout/reftests/forms/input/radio/checked.html
 create mode 100644 layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html
 create mode 100644 layout/reftests/forms/input/radio/gtk-theme-width-height.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/reftest-stylo.list
 create mode 100644 layout/reftests/forms/input/radio/reftest.list
 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/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-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-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-stylo.list
 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/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-stylo.list
 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/ref.html
 create mode 100644 layout/reftests/forms/input/search/reftest-stylo.list
 create mode 100644 layout/reftests/forms/input/search/reftest.list
 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-stylo.list
 create mode 100644 layout/reftests/forms/input/tel/reftest.list
 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.xul
 create mode 100644 layout/reftests/forms/input/text/centering-1.xul
 create mode 100644 layout/reftests/forms/input/text/dynamic-height-1-ref.xul
 create mode 100644 layout/reftests/forms/input/text/dynamic-height-1.xul
 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-1.5.html
 create mode 100644 layout/reftests/forms/input/text/reftest-stylo.list
 create mode 100644 layout/reftests/forms/input/text/reftest.list
 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/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-stylo.list
 create mode 100644 layout/reftests/forms/input/url/reftest.list
 create mode 100644 layout/reftests/forms/legend/1273433-ref.html
 create mode 100644 layout/reftests/forms/legend/1273433.html
 create mode 100644 layout/reftests/forms/legend/legend-ref.html
 create mode 100644 layout/reftests/forms/legend/legend.html
 create mode 100644 layout/reftests/forms/legend/reftest-stylo.list
 create mode 100644 layout/reftests/forms/legend/reftest.list
 create mode 100644 layout/reftests/forms/legend/shadow-dom-ref.html
 create mode 100644 layout/reftests/forms/legend/shadow-dom.html
 create mode 100644 layout/reftests/forms/meter/bar-pseudo-element-ref.html
 create mode 100644 layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html
 create mode 100644 layout/reftests/forms/meter/bar-pseudo-element-rtl.html
 create mode 100644 layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html
 create mode 100644 layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html
 create mode 100644 layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html
 create mode 100644 layout/reftests/forms/meter/bar-pseudo-element-vertical.html
 create mode 100644 layout/reftests/forms/meter/bar-pseudo-element.html
 create mode 100644 layout/reftests/forms/meter/block-invalidate-ref.html
 create mode 100644 layout/reftests/forms/meter/block-invalidate.html
 create mode 100644 layout/reftests/forms/meter/default-style/default-style-dyn-ref.html
 create mode 100644 layout/reftests/forms/meter/default-style/default-style-dyn.html
 create mode 100644 layout/reftests/forms/meter/default-style/default-style-ref.html
 create mode 100644 layout/reftests/forms/meter/default-style/default-style.html
 create mode 100644 layout/reftests/forms/meter/default-style/reftest-stylo.list
 create mode 100644 layout/reftests/forms/meter/default-style/reftest.list
 create mode 100644 layout/reftests/forms/meter/default-style/style.css
 create mode 100644 layout/reftests/forms/meter/in-cells-ref.html
 create mode 100644 layout/reftests/forms/meter/in-cells.html
 create mode 100644 layout/reftests/forms/meter/margin-padding-ref.html
 create mode 100644 layout/reftests/forms/meter/margin-padding-rtl-ref.html
 create mode 100644 layout/reftests/forms/meter/margin-padding-rtl.html
 create mode 100644 layout/reftests/forms/meter/margin-padding-vertical-ref.html
 create mode 100644 layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html
 create mode 100644 layout/reftests/forms/meter/margin-padding-vertical-rtl.html
 create mode 100644 layout/reftests/forms/meter/margin-padding-vertical.html
 create mode 100644 layout/reftests/forms/meter/margin-padding.html
 create mode 100644 layout/reftests/forms/meter/max-height-ref.html
 create mode 100644 layout/reftests/forms/meter/max-height.html
 create mode 100644 layout/reftests/forms/meter/meter-orient-block.html
 create mode 100644 layout/reftests/forms/meter/meter-orient-horizontal-rtl.html
 create mode 100644 layout/reftests/forms/meter/meter-orient-horizontal.html
 create mode 100644 layout/reftests/forms/meter/meter-orient-inline.html
 create mode 100644 layout/reftests/forms/meter/meter-orient-vertical-rtl.html
 create mode 100644 layout/reftests/forms/meter/meter-orient-vertical.html
 create mode 100644 layout/reftests/forms/meter/meter-vlr-orient-block.html
 create mode 100644 layout/reftests/forms/meter/meter-vlr-orient-horizontal.html
 create mode 100644 layout/reftests/forms/meter/meter-vlr-orient-inline.html
 create mode 100644 layout/reftests/forms/meter/meter-vlr-orient-vertical.html
 create mode 100644 layout/reftests/forms/meter/meter-vlr.html
 create mode 100644 layout/reftests/forms/meter/meter-vrl-orient-block.html
 create mode 100644 layout/reftests/forms/meter/meter-vrl-orient-horizontal.html
 create mode 100644 layout/reftests/forms/meter/meter-vrl-orient-inline.html
 create mode 100644 layout/reftests/forms/meter/meter-vrl-orient-vertical.html
 create mode 100644 layout/reftests/forms/meter/meter-vrl.html
 create mode 100644 layout/reftests/forms/meter/reftest-stylo.list
 create mode 100644 layout/reftests/forms/meter/reftest.list
 create mode 100644 layout/reftests/forms/meter/style.css
 create mode 100644 layout/reftests/forms/meter/transformations-ref.html
 create mode 100644 layout/reftests/forms/meter/transformations.html
 create mode 100644 layout/reftests/forms/meter/values-ref.html
 create mode 100644 layout/reftests/forms/meter/values-rtl-ref.html
 create mode 100644 layout/reftests/forms/meter/values-rtl.html
 create mode 100644 layout/reftests/forms/meter/values-vertical-ref.html
 create mode 100644 layout/reftests/forms/meter/values-vertical-rtl-ref.html
 create mode 100644 layout/reftests/forms/meter/values-vertical-rtl.html
 create mode 100644 layout/reftests/forms/meter/values-vertical.html
 create mode 100644 layout/reftests/forms/meter/values.html
 create mode 100644 layout/reftests/forms/output/output-1.html
 create mode 100644 layout/reftests/forms/output/output-2.html
 create mode 100644 layout/reftests/forms/output/output-3.html
 create mode 100644 layout/reftests/forms/output/output-4.html
 create mode 100644 layout/reftests/forms/output/output-5.html
 create mode 100644 layout/reftests/forms/output/output-6.html
 create mode 100644 layout/reftests/forms/output/output-7.html
 create mode 100644 layout/reftests/forms/output/output-ref-2.html
 create mode 100644 layout/reftests/forms/output/output-ref-3.html
 create mode 100644 layout/reftests/forms/output/output-ref.html
 create mode 100644 layout/reftests/forms/output/reftest-stylo.list
 create mode 100644 layout/reftests/forms/output/reftest.list
 create mode 100644 layout/reftests/forms/placeholder/placeholder-1-password.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-1-text.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-1-textarea.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-10.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-11.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-12.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-13.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-14.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-18.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-19.xul
 create mode 100644 layout/reftests/forms/placeholder/placeholder-2-textarea.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-2.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-20.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-21.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-22.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-3.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-4.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-5.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-6-textarea.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-6.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-7.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-8.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-9.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-blank-ref.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-focus-pref.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-focus-ref.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-overflow-ref.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-overridden-ref.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-overridden-ref.xul
 create mode 100644 layout/reftests/forms/placeholder/placeholder-rtl-ref.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-rtl.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-style.css
 create mode 100644 layout/reftests/forms/placeholder/placeholder-visible-ref.html
 create mode 100644 layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html
 create mode 100644 layout/reftests/forms/placeholder/reftest-stylo.list
 create mode 100644 layout/reftests/forms/placeholder/reftest.list
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-ref.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-rtl.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-vertical.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element.html
 create mode 100644 layout/reftests/forms/progress/block-invalidate-ref.html
 create mode 100644 layout/reftests/forms/progress/block-invalidate.html
 create mode 100644 layout/reftests/forms/progress/in-cells-ref.html
 create mode 100644 layout/reftests/forms/progress/in-cells.html
 create mode 100644 layout/reftests/forms/progress/indeterminate-style-height-ref.html
 create mode 100644 layout/reftests/forms/progress/indeterminate-style-height.html
 create mode 100644 layout/reftests/forms/progress/indeterminate-style-width-ref.html
 create mode 100644 layout/reftests/forms/progress/indeterminate-style-width.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-ref.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-rtl.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-vertical-ref.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-vertical-rtl.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-vertical.html
 create mode 100644 layout/reftests/forms/progress/margin-padding.html
 create mode 100644 layout/reftests/forms/progress/max-height-ref.html
 create mode 100644 layout/reftests/forms/progress/max-height.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-block.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-horizontal.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-inline.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-vertical-rtl.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-vertical.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr-orient-block.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr-orient-inline.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr-orient-vertical.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl-orient-block.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl-orient-inline.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl-orient-vertical.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl.html
 create mode 100644 layout/reftests/forms/progress/reftest-stylo.list
 create mode 100644 layout/reftests/forms/progress/reftest.list
 create mode 100644 layout/reftests/forms/progress/style.css
 create mode 100644 layout/reftests/forms/progress/transformations-ref.html
 create mode 100644 layout/reftests/forms/progress/transformations.html
 create mode 100644 layout/reftests/forms/progress/values-ref.html
 create mode 100644 layout/reftests/forms/progress/values-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/values-rtl.html
 create mode 100644 layout/reftests/forms/progress/values-vertical-ref.html
 create mode 100644 layout/reftests/forms/progress/values-vertical-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/values-vertical-rtl.html
 create mode 100644 layout/reftests/forms/progress/values-vertical.html
 create mode 100644 layout/reftests/forms/progress/values.html
 create mode 100644 layout/reftests/forms/reftest-stylo.list
 create mode 100644 layout/reftests/forms/reftest.list
 create mode 100644 layout/reftests/forms/select/997709-2-ref.html
 create mode 100644 layout/reftests/forms/select/997709-2.html
 create mode 100644 layout/reftests/forms/select/boguskids-ref.html
 create mode 100644 layout/reftests/forms/select/boguskids.html
 create mode 100644 layout/reftests/forms/select/dynamic-boguskids.html
 create mode 100644 layout/reftests/forms/select/focusring-1-ref.html
 create mode 100644 layout/reftests/forms/select/focusring-1.html
 create mode 100644 layout/reftests/forms/select/focusring-2-ref.html
 create mode 100644 layout/reftests/forms/select/focusring-2.html
 create mode 100644 layout/reftests/forms/select/focusring-3-ref.html
 create mode 100644 layout/reftests/forms/select/focusring-3.html
 create mode 100644 layout/reftests/forms/select/multiple-ref.html
 create mode 100644 layout/reftests/forms/select/multiple.html
 create mode 100644 layout/reftests/forms/select/option-children-ref.html
 create mode 100644 layout/reftests/forms/select/option-children.html
 create mode 100644 layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html
 create mode 100644 layout/reftests/forms/select/out-of-bounds-selectedindex.html
 create mode 100644 layout/reftests/forms/select/padding-button-placement-ref.html
 create mode 100644 layout/reftests/forms/select/padding-button-placement.html
 create mode 100644 layout/reftests/forms/select/reftest-stylo.list
 create mode 100644 layout/reftests/forms/select/reftest.list
 create mode 100644 layout/reftests/forms/select/vertical-centering-ref.html
 create mode 100644 layout/reftests/forms/select/vertical-centering.html
 create mode 100644 layout/reftests/forms/text-control-baseline-1-ref.html
 create mode 100644 layout/reftests/forms/text-control-baseline-1.html
 create mode 100644 layout/reftests/forms/textarea/in-dynamic-rtl-doc.html
 create mode 100644 layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html
 create mode 100644 layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html
 create mode 100644 layout/reftests/forms/textarea/ltr-scrollbar.html
 create mode 100644 layout/reftests/forms/textarea/ltr.html
 create mode 100644 layout/reftests/forms/textarea/no-resize.html
 create mode 100644 layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html
 create mode 100644 layout/reftests/forms/textarea/padding-scrollbar-placement.html
 create mode 100644 layout/reftests/forms/textarea/reftest-stylo.list
 create mode 100644 layout/reftests/forms/textarea/reftest.list
 create mode 100644 layout/reftests/forms/textarea/resize-background-ref.html
 create mode 100644 layout/reftests/forms/textarea/resize-background.html
 create mode 100644 layout/reftests/forms/textarea/resize-ref.html
 create mode 100644 layout/reftests/forms/textarea/resize.html
 create mode 100644 layout/reftests/forms/textarea/rtl-dynamic-attr.html
 create mode 100644 layout/reftests/forms/textarea/rtl-dynamic-style.html
 create mode 100644 layout/reftests/forms/textarea/rtl-scrollbar.html
 create mode 100644 layout/reftests/forms/textarea/rtl.html
 create mode 100644 layout/reftests/forms/textarea/setvalue-framereconstruction-1.html
 create mode 100644 layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html
 create mode 100644 layout/reftests/forms/textarea/various-cols-ref.html
 create mode 100644 layout/reftests/forms/textarea/various-cols.html
 create mode 100644 layout/reftests/forms/textbox/accesskey-1-notref.xul
 create mode 100644 layout/reftests/forms/textbox/accesskey-1.xul
 create mode 100644 layout/reftests/forms/textbox/accesskey-2-ref.xul
 create mode 100644 layout/reftests/forms/textbox/accesskey-2.xul
 create mode 100644 layout/reftests/forms/textbox/accesskey-3-notref.xul
 create mode 100644 layout/reftests/forms/textbox/accesskey-3-ref.xul
 create mode 100644 layout/reftests/forms/textbox/accesskey-3.xul
 create mode 100644 layout/reftests/forms/textbox/accesskey-4-notref.xul
 create mode 100644 layout/reftests/forms/textbox/accesskey-4-ref.xul
 create mode 100644 layout/reftests/forms/textbox/accesskey-4.xul
 create mode 100644 layout/reftests/forms/textbox/align-baseline-1-ref.xul
 create mode 100644 layout/reftests/forms/textbox/align-baseline-1.xul
 create mode 100644 layout/reftests/forms/textbox/reftest-stylo.list
 create mode 100644 layout/reftests/forms/textbox/reftest.list
 create mode 100644 layout/reftests/forms/textbox/setsize-ref.xul
 create mode 100644 layout/reftests/forms/textbox/setsize.xul

(limited to 'layout/reftests/forms')

diff --git a/layout/reftests/forms/button/disabled-1-ref.html b/layout/reftests/forms/button/disabled-1-ref.html
new file mode 100644
index 000000000..c408ec16f
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test button "disabled" text style</title>
+<style>
+  button {
+    color: GrayText;
+    border-width: 0;
+    background: transparent;
+  }
+</style>
+</head>
+<body>
+  <button>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-1.html b/layout/reftests/forms/button/disabled-1.html
new file mode 100644
index 000000000..6bcba667b
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test button "disabled" text style</title>
+<style>
+  button {
+    border-width: 0;
+    background: transparent;
+  }
+</style>
+</head>
+<body>
+  <button disabled>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-2-ref.html b/layout/reftests/forms/button/disabled-2-ref.html
new file mode 100644
index 000000000..53958f76b
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test all types of buttons look similar when disabled</title>
+</head>
+<body>
+  <button>Some text</button>
+  <button>Some text</button>
+  <button>Reset</button>
+  <button>Submit Query</button>
+  <br>
+  <button disabled>Some text</button>
+  <button disabled>Some text</button>
+  <button disabled>Reset</button>
+  <button disabled>Submit Query</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-2.html b/layout/reftests/forms/button/disabled-2.html
new file mode 100644
index 000000000..a77287dfe
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: test all types of buttons look similar when disabled</title>
+</head>
+<body>
+  <button>Some text</button>
+  <input type="button" value="Some text">
+  <input type="reset">
+  <input type="submit">
+  <br>
+  <button disabled>Some text</button>
+  <input disabled type="button" value="Some text">
+  <input disabled type="reset">
+  <input disabled type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-3-notref.html b/layout/reftests/forms/button/disabled-3-notref.html
new file mode 100644
index 000000000..bd8b45774
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-3-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <button disabled>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-3.html b/layout/reftests/forms/button/disabled-3.html
new file mode 100644
index 000000000..440d43b53
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-3.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <button>Some text</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-4-notref.html b/layout/reftests/forms/button/disabled-4-notref.html
new file mode 100644
index 000000000..41fe9e610
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-4-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input disabled type="button" value="Some text">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-4.html b/layout/reftests/forms/button/disabled-4.html
new file mode 100644
index 000000000..38f71544a
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-4.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input type="button" value="Some text">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-5-notref.html b/layout/reftests/forms/button/disabled-5-notref.html
new file mode 100644
index 000000000..d944d0421
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-5-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input disabled type="reset">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-5.html b/layout/reftests/forms/button/disabled-5.html
new file mode 100644
index 000000000..ded7c1905
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-5.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input type="reset">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-6-notref.html b/layout/reftests/forms/button/disabled-6-notref.html
new file mode 100644
index 000000000..c6f0abce6
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-6-notref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input disabled type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/disabled-6.html b/layout/reftests/forms/button/disabled-6.html
new file mode 100644
index 000000000..2a1d9cfa7
--- /dev/null
+++ b/layout/reftests/forms/button/disabled-6.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Bug 1007278: check disabled and non-disabled buttons look different</title>
+</head>
+<body>
+  <input type="submit">
+</body>
+</html>
diff --git a/layout/reftests/forms/button/display-grid-flex-columnset-ref.html b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html
new file mode 100644
index 000000000..a176dd3e8
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 984869</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+
+.grid, .igrid {
+  display: grid;
+  grid: 20px / 20px 20px;
+}
+.igrid { display:inline-grid; }
+
+.flex, .iflex {
+  display: flex;
+}
+.iflex { display:inline-flex; }
+
+.columnset, .block-columnset {
+     -moz-columns: 2;
+      -ms-columns: 2;
+  -webkit-columns: 2;
+          columns: 2;
+}
+
+.block-columnset, .b { display: block; }
+
+a {
+  position: absolute;
+  right:0; bottom:0;
+  width:5px; height:5px;
+  background: lime;
+}
+.rel { position:relative; }
+
+button { vertical-align: bottom; }
+    </style>
+</head>
+<body>
+
+<button><wrap class="grid">x<span>y</span>z</wrap></button>
+<button><wrap class="iflex">x<span>y</span>z</wrap></button>
+<button><wrap class="b columnset">x<br><span>y</span>z</wrap></button>
+
+<button class="rel"><wrap class="grid">x<span>y</span>z<a></a></wrap></button>
+<button class="rel"><wrap class="iflex">x<span>y</span>z<a></a></wrap></button>
+<button class="rel"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button>
+
+<button class="b"><wrap class="grid">x<span>y</span>z</wrap></button>
+<button class="b"><wrap class="flex">x<span>y</span>z</wrap></button>
+<button class="b"><wrap class="b columnset">x<br><span>y</span>z</wrap></button>
+
+<button class="rel b"><wrap class="grid">x<span>y</span>z<a></a></wrap></button>
+<button class="rel b"><wrap class="flex">x<span>y</span>z<a></a></wrap></button>
+<button class="rel b"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/display-grid-flex-columnset.html b/layout/reftests/forms/button/display-grid-flex-columnset.html
new file mode 100644
index 000000000..86c8f587a
--- /dev/null
+++ b/layout/reftests/forms/button/display-grid-flex-columnset.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 984869</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+
+.grid, .igrid {
+  display: grid;
+  grid: 20px / 20px 20px;
+}
+.igrid { display:inline-grid; }
+
+.flex, .iflex {
+  display: flex;
+}
+.iflex { display:inline-flex; }
+
+.columnset {
+     -moz-columns: 2;
+      -ms-columns: 2;
+  -webkit-columns: 2;
+          columns: 2;
+}
+
+.b { display: block; }
+
+a {
+  position: absolute;
+  right:0; bottom:0;
+  width:5px; height:5px;
+  background: lime;
+}
+.rel { position:relative; }
+
+button { vertical-align: bottom; }
+    </style>
+</head>
+<body>
+
+<button class="igrid">x<span>y</span>z</button>
+<button class="iflex">x<span>y</span>z</button>
+<button class="columnset">x<br><span>y</span>z</button>
+
+<button class="rel igrid">x<span>y</span>z<a></a></button>
+<button class="rel iflex">x<span>y</span>z<a></a></button>
+<button class="rel columnset">x<br><span>y</span>z<a></a></button>
+
+<button class="grid">x<span>y</span>z</button>
+<button class="flex">x<span>y</span>z</button>
+<button class="b columnset">x<br><span>y</span>z</button>
+
+<button class="rel grid">x<span>y</span>z<a></a></button>
+<button class="rel flex">x<span>y</span>z<a></a></button>
+<button class="rel b columnset">x<br><span>y</span>z<a></a></button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/first-letter-1-noref.html b/layout/reftests/forms/button/first-letter-1-noref.html
new file mode 100644
index 000000000..d59db575f
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1-noref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<style>
+  body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/first-letter-1-ref.html b/layout/reftests/forms/button/first-letter-1-ref.html
new file mode 100644
index 000000000..34ffa64f2
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+  button { display: block; }
+  button::first-letter { color: green; }
+  body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/first-letter-1.html b/layout/reftests/forms/button/first-letter-1.html
new file mode 100644
index 000000000..3dbf1667f
--- /dev/null
+++ b/layout/reftests/forms/button/first-letter-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<style>
+  button::first-letter { color: green; }
+  body { line-height: 0; }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-1-ref.html b/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
new file mode 100644
index 000000000..6c66d5f17
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-1-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>Reference case for bug 1272983</title>
+  <style>
+    /* Set explicit font size so that em units are predictable: */
+    body, button { font: 10px sans-serif; }
+
+    /* Set margin to 0 for all cases. In the first 6, that's how we expect
+       the testcase to render; and in the 7th and 8th, our reference margin
+       will be applied via a child div instead of via the pseudo-element. */
+    button.mfi1::-moz-focus-inner,
+    button.mfi2::-moz-focus-inner,
+    button.mfi3::-moz-focus-inner,
+    button.mfi4::-moz-focus-inner,
+    button.mfi5::-moz-focus-inner,
+    button.mfi6::-moz-focus-inner,
+    button.mfi7::-moz-focus-inner,
+    button.mfi8::-moz-focus-inner { margin: 0; }
+
+    /* Use an explicit div instead of pseudo-element, for reference case's
+       version of margin values that we actually expect to take effect: */
+    button.mfi7 > div { margin: 10px; }
+    button.mfi8 > div { margin: 20px; /* = 2em * 20px/em */ }
+  </style>
+</head>
+<body>
+  <button class="mfi1">mfi1</button>
+  <button class="mfi2">mfi2</button>
+  <button class="mfi3">mfi3</button>
+  <button class="mfi4">mfi4</button>
+  <br>
+  <button class="mfi5">mfi5</button>
+  <button class="mfi6">mfi6</button>
+  <button class="mfi7"><div>mfi7</div></button>
+  <button class="mfi8"><div>mfi8</div></button>
+  <br>
+
+  <button class="mfo1">mfo1</button>
+  <button class="mfo2">mfo2</button>
+  <button class="mfo3">mfo3</button>
+  <button class="mfo4">mfo4</button>
+  <br>
+  <button class="mfo5">mfo5</button>
+  <button class="mfo6">mfo6</button>
+  <button class="mfo7">mfo7</button>
+  <button class="mfo8">mfo8</button>
+  <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-1.html b/layout/reftests/forms/button/focus-area-percent-units-1.html
new file mode 100644
index 000000000..17d65b3b0
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-1.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only
+     support CSS "margin" values that contain absolute lengths.  Any percent or
+     "auto" margin values will simply make the margin collapse to zero.
+     This test verifies that this is indeed what happens (not anything worse).
+-->
+<head>
+  <title>Testcase for bug 1272983</title>
+  <style>
+    /* Set explicit font size so that em units are predictable: */
+    body, button { font: 10px sans-serif; }
+
+    /* Testing percent and auto margin values on "-moz-focus-inner": */
+    button.mfi1::-moz-focus-inner { margin: 50%; }
+    button.mfi2::-moz-focus-inner { margin: 50% 10px; }
+    button.mfi3::-moz-focus-inner { margin: 10px 50%; }
+    button.mfi4::-moz-focus-inner { margin: auto; }
+    button.mfi5::-moz-focus-inner { margin: auto 10px; }
+    button.mfi6::-moz-focus-inner { margin: 10px auto; }
+    button.mfi7::-moz-focus-inner { margin: 10px; }
+    button.mfi8::-moz-focus-inner { margin: 2em; }
+
+    /* Testing percent and auto margin values on "-moz-focus-outer":
+       (just for completeness -- really, 'margin' has no effect on
+       the behavior of -moz-focus-outer) */
+    button.mfo1::-moz-focus-outer { margin: 50%; }
+    button.mfo2::-moz-focus-outer { margin: 50% 10px; }
+    button.mfo3::-moz-focus-outer { margin: 10px 50%; }
+    button.mfo4::-moz-focus-outer { margin: auto; }
+    button.mfo5::-moz-focus-outer { margin: auto 10px; }
+    button.mfo6::-moz-focus-outer { margin: 10px auto; }
+    button.mfo7::-moz-focus-outer { margin: 10px; }
+    button.mfo8::-moz-focus-outer { margin: 2em; }
+  </style>
+</head>
+<body>
+  <button class="mfi1">mfi1</button>
+  <button class="mfi2">mfi2</button>
+  <button class="mfi3">mfi3</button>
+  <button class="mfi4">mfi4</button>
+  <br>
+  <button class="mfi5">mfi5</button>
+  <button class="mfi6">mfi6</button>
+  <button class="mfi7">mfi7</button>
+  <button class="mfi8">mfi8</button>
+  <br>
+
+  <button class="mfo1">mfo1</button>
+  <button class="mfo2">mfo2</button>
+  <button class="mfo3">mfo3</button>
+  <button class="mfo4">mfo4</button>
+  <br>
+  <button class="mfo5">mfo5</button>
+  <button class="mfo6">mfo6</button>
+  <button class="mfo7">mfo7</button>
+  <button class="mfo8">mfo8</button>
+  <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-2-ref.html b/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
new file mode 100644
index 000000000..6b6a6056d
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-2-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>Reference case for bug 1272983</title>
+  <style>
+    /* Set explicit font size so that em units are predictable: */
+    body, button { font: 10px sans-serif; }
+
+    /* Add outline to help visualize the padding outside of buttons: */
+    button { outline: 1px solid black; }
+
+    /* Set padding to 0 for all cases. In the first 3, that's how we expect
+       the testcase to render; and in the 4th and 5th, our reference padding
+       will be applied via a child div instead of via the pseudo-element. */
+    button.mfi1::-moz-focus-inner,
+    button.mfi2::-moz-focus-inner,
+    button.mfi3::-moz-focus-inner,
+    button.mfi4::-moz-focus-inner,
+    button.mfi5::-moz-focus-inner { padding: 0; }
+
+    /* Use an explicit div instead of pseudo-element, for reference case's
+       version of padding values that we actually expect to take effect: */
+    button.mfi4 > div { padding: 10px; }
+    button.mfi5 > div { padding: 2em; }
+
+    /* As above, set padding to 0 for all cases: */
+    button.mfo1::-moz-focus-outer,
+    button.mfo2::-moz-focus-outer,
+    button.mfo3::-moz-focus-outer,
+    button.mfo4::-moz-focus-outer,
+    button.mfo5::-moz-focus-outer { padding: 0; }
+
+    /* To make reference for -moz-focus-outer padding that we expect to
+       take effect, we'll put the padding on a wrapper-div (and bump the
+       button's outline to that div). */
+    div.mfo4-wrapper { padding: 10px; }
+    div.mfo5-wrapper { padding: 20px; /* = 2em * 10px/em */ }
+
+    button.mfo4,
+    button.mfo5 { outline: none; }
+    div.mfo4-wrapper,
+    div.mfo5-wrapper { display: inline-block; outline: 1px solid black; }
+  </style>
+</head>
+<body>
+  <button class="mfi1">mfi1</button>
+  <button class="mfi2">mfi2</button>
+  <button class="mfi3">mfi3</button>
+  <br>
+  <button class="mfi4"><div>mfi4</div></button>
+  <button class="mfi5"><div>mfi5</div></button>
+  <br>
+
+  <button class="mfo1">mfo1</button>
+  <button class="mfo2">mfo2</button>
+  <button class="mfo3">mfo3</button>
+  <br>
+  <div class="mfo4-wrapper">
+    <button class="mfo4">mfo4</button>
+  </div>
+  <div class="mfo5-wrapper">
+    <button class="mfo5">mfo5</button>
+  </div>
+  <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/focus-area-percent-units-2.html b/layout/reftests/forms/button/focus-area-percent-units-2.html
new file mode 100644
index 000000000..3c0cb8612
--- /dev/null
+++ b/layout/reftests/forms/button/focus-area-percent-units-2.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- The ::-moz-focus-inner & ::-moz-focus-outer button pseudo-elements only
+     support CSS "padding" values that contain absolute lengths.  Any percent
+     padding values will simply make the padding collapse to zero.
+     This test verifies that this is indeed what happens (not anything worse).
+-->
+<head>
+  <title>Testcase for bug 1272983</title>
+  <style>
+    /* Set explicit font size so that em units are predictable: */
+    body, button { font: 10px sans-serif; }
+
+    /* Add outline to help visualize the padding outside of buttons: */
+    button { outline: 1px solid black; }
+
+    /* Testing percent and auto padding values on "-moz-focus-inner": */
+    button.mfi1::-moz-focus-inner { padding: 50%; }
+    button.mfi2::-moz-focus-inner { padding: 50% 10px; }
+    button.mfi3::-moz-focus-inner { padding: 10px 50%; }
+    button.mfi4::-moz-focus-inner { padding: 10px; }
+    button.mfi5::-moz-focus-inner { padding: 2em; }
+
+    /* Testing percent and auto padding values on "-moz-focus-outer": */
+    button.mfo1::-moz-focus-outer { padding: 50%; }
+    button.mfo2::-moz-focus-outer { padding: 50% 10px; }
+    button.mfo3::-moz-focus-outer { padding: 10px 50%; }
+    button.mfo4::-moz-focus-outer { padding: 10px; }
+    button.mfo5::-moz-focus-outer { padding: 2em; }
+  </style>
+</head>
+<body>
+  <button class="mfi1">mfi1</button>
+  <button class="mfi2">mfi2</button>
+  <button class="mfi3">mfi3</button>
+  <br>
+  <button class="mfi4">mfi4</button>
+  <button class="mfi5">mfi5</button>
+  <br>
+
+  <button class="mfo1">mfo1</button>
+  <button class="mfo2">mfo2</button>
+  <button class="mfo3">mfo3</button>
+  <br>
+  <button class="mfo4">mfo4</button>
+  <button class="mfo5">mfo5</button>
+  <br>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/line-height-button-0.5.html b/layout/reftests/forms/button/line-height-button-0.5.html
new file mode 100644
index 000000000..e3343d9e4
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 0.5 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-button-1.0.html b/layout/reftests/forms/button/line-height-button-1.0.html
new file mode 100644
index 000000000..2685624dc
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 1.0 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-button-1.5.html b/layout/reftests/forms/button/line-height-button-1.5.html
new file mode 100644
index 000000000..f86839fc3
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-button-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+button { line-height: 1.5 }
+
+</style>
+<button>button input</button>
diff --git a/layout/reftests/forms/button/line-height-input-0.5.html b/layout/reftests/forms/button/line-height-input-0.5.html
new file mode 100644
index 000000000..e3b6dd920
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 0.5 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/line-height-input-1.0.html b/layout/reftests/forms/button/line-height-input-1.0.html
new file mode 100644
index 000000000..18f8b4646
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.0 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/line-height-input-1.5.html b/layout/reftests/forms/button/line-height-input-1.5.html
new file mode 100644
index 000000000..ea486d14e
--- /dev/null
+++ b/layout/reftests/forms/button/line-height-input-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.5 }
+
+</style>
+<input type="button" value="button input" size="20">
diff --git a/layout/reftests/forms/button/max-height-ref.html b/layout/reftests/forms/button/max-height-ref.html
new file mode 100644
index 000000000..ea12a8668
--- /dev/null
+++ b/layout/reftests/forms/button/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  button {
+    height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/max-height.html b/layout/reftests/forms/button/max-height.html
new file mode 100644
index 000000000..87ac8a979
--- /dev/null
+++ b/layout/reftests/forms/button/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  button {
+    max-height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<button>Some text</button>
diff --git a/layout/reftests/forms/button/min-height-ref.html b/layout/reftests/forms/button/min-height-ref.html
new file mode 100644
index 000000000..5f0f2d654
--- /dev/null
+++ b/layout/reftests/forms/button/min-height-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.btn1, .btn2 {
+    border: 5px solid green;
+    background-color: blue;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<input type='submit' class='btn1' value='' />
+<input type='submit' class='btn2' value='' />
+</body>
+</html>
diff --git a/layout/reftests/forms/button/min-height.html b/layout/reftests/forms/button/min-height.html
new file mode 100644
index 000000000..cadffa78d
--- /dev/null
+++ b/layout/reftests/forms/button/min-height.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.btn1, .btn2 {
+    border: 5px solid green;
+    background-color: blue;
+}
+.btn1 {
+    min-height: 50px;
+}
+.btn2 {
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<input type='submit' class='btn1' value='' />
+<input type='submit' class='btn2' value='' />
+</body>
+</html>
diff --git a/layout/reftests/forms/button/overflow-areas-1-ref.html b/layout/reftests/forms/button/overflow-areas-1-ref.html
new file mode 100644
index 000000000..a1eb50575
--- /dev/null
+++ b/layout/reftests/forms/button/overflow-areas-1-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>Reference case</title>
+  <style>
+    input, button {
+      border: 0;             /* Combined, these mean the gray area is the */
+      background: lightgray; /* border-box size. */
+
+      outline: 2px solid black; /* The outlined area is the overflow area. */
+      width: 1px;   /* (To attempt to trigger overflow) */
+
+      display: block;     /* Put each button on its own line, w/ some margin, */
+      margin-bottom: 5px; /* so that any overflow doesn't get stomped on.     */
+
+      font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
+    }
+
+    .oh { overflow: hidden }
+  </style>
+</head>
+<body>
+  <!-- For the reference case, we just put "overflow:hidden" on everything. -->
+  <input class="oh" type="reset">
+  <input class="oh" type="submit">
+  <input class="oh" type="button" value="InputTypeButton">
+  <!-- ...with one exception: button with (default) overflow:visible.
+       Such buttons *do* actually allow their contents to overflow. -->
+  <button>ActualButton</button>
+
+  <input  class="oh" type="reset">
+  <input  class="oh" type="submit">
+  <input  class="oh" type="button" value="InputTypeButton">
+  <button class="oh">ActualButton</button>
+
+  <input  class="oh" type="reset">
+  <input  class="oh" type="submit">
+  <input  class="oh" type="button" value="InputTypeButton">
+  <button class="oh">ActualButton</button>
+
+  <input  class="oh" type="reset">
+  <input  class="oh" type="submit">
+  <input  class="oh" type="button" value="InputTypeButton">
+  <button class="oh">ActualButton</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/overflow-areas-1.html b/layout/reftests/forms/button/overflow-areas-1.html
new file mode 100644
index 000000000..b1a34dfe4
--- /dev/null
+++ b/layout/reftests/forms/button/overflow-areas-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- Any copyright is dedicated to the Public Domain.
+   - http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<!-- For buttons whose painting gets clipped to their border-box area,
+     we should *also* clip their overflow area (as exposed via 'outline').
+     This test exposes these areas so they can be visualized, and checks that
+     they match when we expect them to. -->
+<head>
+  <title>Testcase for bug 1261284</title>
+  <style>
+    input, button {
+      border: 0;             /* Combined, these mean the gray area is the */
+      background: lightgray; /* border-box size. */
+
+      outline: 2px solid black; /* The outlined area is the overflow area. */
+      width: 1px;   /* (To attempt to trigger overflow) */
+
+      display: block;     /* Put each button on its own line, w/ some margin, */
+      margin-bottom: 5px; /* so that any overflow doesn't get stomped on.     */
+
+      font: 8px serif; /* (This just lets the testcase fit better on mobile.) */
+    }
+
+    .oh { overflow: hidden }
+    .oa { overflow: auto }
+    .os { overflow: scroll }
+  </style>
+</head>
+<body>
+  <input type="reset">
+  <input type="submit">
+  <input type="button" value="InputTypeButton">
+  <button>ActualButton</button>
+
+  <input  class="oh" type="reset">
+  <input  class="oh" type="submit">
+  <input  class="oh" type="button" value="InputTypeButton">
+  <button class="oh">ActualButton</button>
+
+  <input  class="oa" type="reset">
+  <input  class="oa" type="submit">
+  <input  class="oa" type="button" value="InputTypeButton">
+  <button class="oa">ActualButton</button>
+
+  <input  class="os" type="reset">
+  <input  class="os" type="submit">
+  <input  class="os" type="button" value="InputTypeButton">
+  <button class="os">ActualButton</button>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-1-ref.html b/layout/reftests/forms/button/percent-height-child-1-ref.html
new file mode 100644
index 000000000..b2b810958
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-1-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+    display: inline-block;
+    width: 80px;
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    text-align: center;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+}
+
+div.p80 {
+    background: pink;
+}
+
+div.p100 {
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<div class="button" style="height: 100px">
+  <div class="p80" style="margin-top: 10px; height: 80px">abc</div>
+</div>
+
+<div class="button" style="height: 100px">
+  <div class="p100" style="height: 100px">abc</div>
+</div>
+
+<!--Button is using intrinsic height: -->
+<div class="button">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button">
+  <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-1.html b/layout/reftests/forms/button/percent-height-child-1.html
new file mode 100644
index 000000000..c676715c2
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-1.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent heights on content inside of
+     a <button> element (resolving the percent against the <button>).
+     (In this testcase, the button has no focus-border/padding.) -->
+<html>
+<head>
+<style>
+button {
+    width: 80px;
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+    -moz-appearance: none;
+}
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+div.p80 {
+    height: 80%;
+    background: pink;
+}
+
+div.p100 {
+    height: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<button style="height: 100px">
+  <div class="p80">abc</div>
+</button>
+
+<button style="height: 100px">
+  <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic height: -->
+<button>
+  <div class="p80">abc</div>
+</button>
+
+<button>
+  <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-2-ref.html b/layout/reftests/forms/button/percent-height-child-2-ref.html
new file mode 100644
index 000000000..7491ed71e
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-2-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+    display: inline-block;
+    width: 78px;
+    border: 0;
+
+    /* Padding to match the -moz-focus-inner border/padding in testcase: */
+    padding: 7px 1px 3px;
+
+    font: 10px sans-serif;
+    text-align: center;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+}
+
+div.p80 {
+    background: pink;
+}
+
+div.p100 {
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<div class="button" style="height: 100px">
+  <div class="p80" style="margin-top: 10px; height: 80px">abc</div>
+</div>
+
+<div class="button" style="height: 100px">
+  <div class="p100" style="height: 100px">abc</div>
+</div>
+
+<!--Button is using intrinsic height: -->
+<div class="button">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button">
+  <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-height-child-2.html b/layout/reftests/forms/button/percent-height-child-2.html
new file mode 100644
index 000000000..7eecea1ad
--- /dev/null
+++ b/layout/reftests/forms/button/percent-height-child-2.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent heights on content inside of
+     a <button> element (resolving the percent against the <button>).
+     (In this testcase, the button has some focus-border/padding, which
+     occupies part of the button's content-box and which we'll have to
+     subtract out from the button's size before using it to resolve
+     percentages sizes.) -->
+<html>
+<head>
+<style>
+button {
+    width: 80px;
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+    -moz-appearance: none;
+}
+button::-moz-focus-inner {
+    padding: 6px 0 2px;
+    border: 1px dotted transparent;
+}
+
+div.p80 {
+    height: 80%;
+    background: pink;
+}
+
+div.p100 {
+    height: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit height for us to resolve against: -->
+<button style="height: 110px">
+  <div class="p80">abc</div>
+</button>
+
+<button style="height: 110px">
+  <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic height: -->
+<button>
+  <div class="p80">abc</div>
+</button>
+
+<button>
+  <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-1-ref.html b/layout/reftests/forms/button/percent-width-child-1-ref.html
new file mode 100644
index 000000000..dcc228994
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-1-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+    display: inline-block;
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    text-align: center;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+}
+
+div.p80 {
+    width: 80%;
+    background: pink;
+}
+
+div.p100 {
+    width: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<div class="button" style="width: 100px">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button" style="width: 100px">
+  <div class="p100">abc</div>
+</div>
+
+<!--Button is using intrinsic width: -->
+<div class="button">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button">
+  <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-1.html b/layout/reftests/forms/button/percent-width-child-1.html
new file mode 100644
index 000000000..fdd2b4923
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-1.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent widths on content inside of
+     a <button> element (resolving the percent against the <button>).
+     (In this testcase, the button has no focus-border/padding.) -->
+<html>
+<head>
+<style>
+button {
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+    -moz-appearance: none;
+}
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+div.p80 {
+    width: 80%;
+    background: pink;
+}
+
+div.p100 {
+    width: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<button style="width: 100px">
+  <div class="p80">abc</div>
+</button>
+
+<button style="width: 100px">
+  <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic width: -->
+<button>
+  <div class="p80">abc</div>
+</button>
+
+<button>
+  <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-2-ref.html b/layout/reftests/forms/button/percent-width-child-2-ref.html
new file mode 100644
index 000000000..19a24a737
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-2-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+div.button {
+    display: inline-block;
+    border: 0;
+
+    /* Padding to match the -moz-focus-inner border/padding in testcase: */
+    padding: 1px 7px 1px 3px;
+
+    font: 10px sans-serif;
+    text-align: center;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+}
+
+div.p80 {
+    width: 80%;
+    background: pink;
+}
+
+div.p100 {
+    width: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<div class="button" style="width: 100px">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button" style="width: 100px">
+  <div class="p100">abc</div>
+</div>
+
+<!--Button is using intrinsic width: -->
+<div class="button">
+  <div class="p80">abc</div>
+</div>
+
+<div class="button">
+  <div class="p100">abc</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/percent-width-child-2.html b/layout/reftests/forms/button/percent-width-child-2.html
new file mode 100644
index 000000000..d46ff62af
--- /dev/null
+++ b/layout/reftests/forms/button/percent-width-child-2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This test verifies that we honor percent widths on content inside of
+     a <button> element (resolving the percent against the <button>).
+     (In this testcase, the button has some focus-border/padding, which
+     occupies part of the button's content-box and which we'll have to
+     subtract out from the button's size before using it to resolve
+     percentages sizes.) -->
+<html>
+<head>
+<style>
+button {
+    border: 0;
+    padding: 0;
+
+    font: 10px sans-serif;
+    vertical-align: top;
+
+    color: black;
+    background: gray;
+    -moz-appearance: none;
+}
+button::-moz-focus-inner {
+    padding: 0 6px 0 2px;
+    border: 1px dotted transparent;
+}
+
+div.p80 {
+    width: 80%;
+    background: pink;
+}
+
+div.p100 {
+    width: 100%;
+    background: yellow;
+}
+</style>
+</head>
+<body>
+<!--Button has explicit width for us to resolve against: -->
+<button style="width: 110px">
+  <div class="p80">abc</div>
+</button>
+
+<button style="width: 110px">
+  <div class="p100">abc</div>
+</button>
+
+<!--Button is using intrinsic width: -->
+<button>
+  <div class="p80">abc</div>
+</button>
+
+<button>
+  <div class="p100">abc</div>
+</button>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/button/reftest-stylo.list b/layout/reftests/forms/button/reftest-stylo.list
new file mode 100644
index 000000000..c76d15c91
--- /dev/null
+++ b/layout/reftests/forms/button/reftest-stylo.list
@@ -0,0 +1,61 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== first-letter-1.html first-letter-1.html
+== first-letter-1.html first-letter-1.html
+
+== focus-area-percent-units-1.html focus-area-percent-units-1.html
+== focus-area-percent-units-2.html focus-area-percent-units-2.html
+
+== max-height.html max-height.html
+== min-height.html min-height.html
+== overflow-areas-1.html overflow-areas-1.html
+
+# The buttons in these tests have some fancy shading applied to their corners
+# on B2G, despite their "-moz-appearance: none; background: gray", so they
+# don't quite match the reference case's normal <div>. That's why they're fuzzy.
+fuzzy-if(B2G||Mulet||Android,125,20) == percent-height-child-1.html percent-height-child-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+pref(browser.display.focus_ring_width,1) fuzzy-if(B2G||Mulet||Android,125,80) == percent-height-child-2.html percent-height-child-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(B2G||Mulet||Android,125,20) == percent-width-child-1.html percent-width-child-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+pref(browser.display.focus_ring_width,1) fuzzy-if(B2G||Mulet||Android,125,80) == percent-width-child-2.html percent-width-child-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+== vertical-centering.html vertical-centering.html
+
+== line-height-button-0.5.html line-height-button-0.5.html
+== line-height-button-1.5.html line-height-button-1.5.html
+== line-height-input-0.5.html line-height-input-0.5.html
+== line-height-input-1.5.html line-height-input-1.5.html
+
+# Looks like Android and B2G change the text color, but to something slightly
+# different from ColorGray
+fails-if(Android||B2G||Mulet) == disabled-1.html disabled-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== disabled-2.html disabled-2.html
+
+== disabled-3.html disabled-3.html
+== disabled-4.html disabled-4.html
+== disabled-5.html disabled-5.html
+== disabled-6.html disabled-6.html
+
+fails-if(B2G||Mulet) == width-auto-size-em-ltr.html width-auto-size-em-ltr.html
+# Bug 1145672
+# Bug 1150486
+fails-if(B2G||Mulet) == width-auto-size-ltr.html width-auto-size-ltr.html
+# Bug 1145672
+# Bug 1150486
+== width-exact-fit-ltr.html width-exact-fit-ltr.html
+== width-erode-part-focuspadding-ltr.html width-erode-part-focuspadding-ltr.html
+== width-erode-all-focuspadding-ltr.html width-erode-all-focuspadding-ltr.html
+== width-erode-overflow-focuspadding-ltr.html width-erode-overflow-focuspadding-ltr.html
+fails-if(B2G||Mulet) == width-auto-size-em-rtl.html width-auto-size-em-rtl.html
+# Bug 1145672
+# Bug 1150486
+fails-if(B2G||Mulet) == width-auto-size-rtl.html width-auto-size-rtl.html
+# Bug 1145672
+# Bug 1150486
+== width-exact-fit-rtl.html width-exact-fit-rtl.html
+== width-erode-part-focuspadding-rtl.html width-erode-part-focuspadding-rtl.html
+== width-erode-all-focuspadding-rtl.html width-erode-all-focuspadding-rtl.html
+== width-erode-overflow-focuspadding-rtl.html width-erode-overflow-focuspadding-rtl.html
diff --git a/layout/reftests/forms/button/reftest.list b/layout/reftests/forms/button/reftest.list
new file mode 100644
index 000000000..cefec2e85
--- /dev/null
+++ b/layout/reftests/forms/button/reftest.list
@@ -0,0 +1,48 @@
+== first-letter-1.html first-letter-1-ref.html
+!= first-letter-1.html first-letter-1-noref.html
+
+== focus-area-percent-units-1.html focus-area-percent-units-1-ref.html
+== focus-area-percent-units-2.html focus-area-percent-units-2-ref.html
+
+== max-height.html max-height-ref.html
+== min-height.html min-height-ref.html
+== overflow-areas-1.html overflow-areas-1-ref.html
+
+# The buttons in these tests have some fancy shading applied to their corners
+# on Android, despite their "-moz-appearance: none; background: gray", so they
+# don't quite match the reference case's normal <div>. That's why they're fuzzy.
+fuzzy-if(Android,125,20) == percent-height-child-1.html percent-height-child-1-ref.html
+pref(browser.display.focus_ring_width,1) fuzzy-if(Android,125,80) == percent-height-child-2.html percent-height-child-2-ref.html
+fuzzy-if(Android,125,20) == percent-width-child-1.html  percent-width-child-1-ref.html
+pref(browser.display.focus_ring_width,1) fuzzy-if(Android,125,80) == percent-width-child-2.html  percent-width-child-2-ref.html
+
+== vertical-centering.html vertical-centering-ref.html
+
+!= line-height-button-0.5.html line-height-button-1.0.html
+!= line-height-button-1.5.html line-height-button-1.0.html
+!= line-height-input-0.5.html line-height-input-1.0.html
+!= line-height-input-1.5.html line-height-input-1.0.html
+
+# Looks like Android changes the text color, but to something slightly
+# different from ColorGray
+fails-if(Android) == disabled-1.html disabled-1-ref.html
+== disabled-2.html disabled-2-ref.html
+
+!= disabled-3.html disabled-3-notref.html
+!= disabled-4.html disabled-4-notref.html
+!= disabled-5.html disabled-5-notref.html
+!= disabled-6.html disabled-6-notref.html
+
+== width-auto-size-em-ltr.html width-auto-size-em-ltr-ref.html
+== width-auto-size-ltr.html width-auto-size-ltr-ref.html
+== width-exact-fit-ltr.html width-auto-size-ltr-ref.html
+== width-erode-part-focuspadding-ltr.html width-erode-part-focuspadding-ltr-ref.html
+== width-erode-all-focuspadding-ltr.html width-erode-all-focuspadding-ltr-ref.html
+== width-erode-overflow-focuspadding-ltr.html width-erode-overflow-focuspadding-ltr-ref.html
+== width-auto-size-em-rtl.html width-auto-size-em-rtl-ref.html
+== width-auto-size-rtl.html width-auto-size-rtl-ref.html
+== width-exact-fit-rtl.html width-auto-size-rtl-ref.html
+== width-erode-part-focuspadding-rtl.html width-erode-part-focuspadding-rtl-ref.html
+== width-erode-all-focuspadding-rtl.html width-erode-all-focuspadding-rtl-ref.html
+== width-erode-overflow-focuspadding-rtl.html width-erode-overflow-focuspadding-rtl-ref.html
+== display-grid-flex-columnset.html display-grid-flex-columnset-ref.html
diff --git a/layout/reftests/forms/button/vertical-centering-ref.html b/layout/reftests/forms/button/vertical-centering-ref.html
new file mode 100644
index 000000000..aa6d76367
--- /dev/null
+++ b/layout/reftests/forms/button/vertical-centering-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    height: 100px;
+    display: inline-block;
+    border: 0;
+    padding: 0;
+
+    font: 2em/100px sans-serif;
+    text-align: center;
+
+    background: transparent;
+    color: black;
+}
+</style>
+</head>
+<body>
+<div>button</div>
+<div>button</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/vertical-centering.html b/layout/reftests/forms/button/vertical-centering.html
new file mode 100644
index 000000000..08ca38519
--- /dev/null
+++ b/layout/reftests/forms/button/vertical-centering.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+input, div {
+    height: 100px;
+    display: inline-block;
+    border: 0;
+    padding: 0;
+
+    font: 2em sans-serif;
+
+    background: transparent;
+    color: black;
+}
+input {
+    -moz-appearance: none;
+}
+input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+div {
+    line-height: 100px;
+    text-align: center;
+}
+</style>
+</head>
+<body>
+<input type='button' value='button' />
+<div>button</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
new file mode 100644
index 000000000..1e7ab40bb
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+  margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-em-ltr.html b/layout/reftests/forms/button/width-auto-size-em-ltr.html
new file mode 100644
index 000000000..3285c3e95
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-ltr.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 1em;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
new file mode 100644
index 000000000..121471474
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+  margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-em-rtl.html b/layout/reftests/forms/button/width-auto-size-em-rtl.html
new file mode 100644
index 000000000..fb72ef97e
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-em-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 1em;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr-ref.html b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
new file mode 100644
index 000000000..c1ba89860
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-ltr.html b/layout/reftests/forms/button/width-auto-size-ltr.html
new file mode 100644
index 000000000..c8f3f7d11
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-ltr.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl-ref.html b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
new file mode 100644
index 000000000..3e09016dc
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 3px; /* for implicit focuspadding */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-auto-size-rtl.html b/layout/reftests/forms/button/width-auto-size-rtl.html
new file mode 100644
index 000000000..7ae3092f9
--- /dev/null
+++ b/layout/reftests/forms/button/width-auto-size-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 2em; width: 5em; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
new file mode 100644
index 000000000..c85da00e3
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 0px; /* for implicit focuspadding, fully eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
new file mode 100644
index 000000000..4978a57e4
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 62px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
new file mode 100644
index 000000000..762e443f8
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 0px; /* for implicit focuspadding, fully eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
new file mode 100644
index 000000000..d4b028b48
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-all-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 62px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
new file mode 100644
index 000000000..6f7047cce
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px -2px 1px 0; /* for implicit focuspadding, fully eroded and overflowed */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
new file mode 100644
index 000000000..daecef56e
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 60px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
new file mode 100644
index 000000000..1b36154cf
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 0 1px -2px; /* for implicit focuspadding, fully eroded and overflowed */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
new file mode 100644
index 000000000..b76a3957a
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-overflow-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 60px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
new file mode 100644
index 000000000..59cbd0208
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 2px; /* for implicit focuspadding, partly eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
new file mode 100644
index 000000000..c0d64b279
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 66px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
new file mode 100644
index 000000000..0765a673d
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+div.button {
+  display: inline-block;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+  margin: 1px 2px; /* for implicit focuspadding, partly eroded */
+}
+
+</style>
+
+<div class=button><span></span></div>
diff --git a/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
new file mode 100644
index 000000000..9b8826938
--- /dev/null
+++ b/layout/reftests/forms/button/width-erode-part-focuspadding-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 66px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-exact-fit-ltr.html b/layout/reftests/forms/button/width-exact-fit-ltr.html
new file mode 100644
index 000000000..58db0aa70
--- /dev/null
+++ b/layout/reftests/forms/button/width-exact-fit-ltr.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 68px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/button/width-exact-fit-rtl.html b/layout/reftests/forms/button/width-exact-fit-rtl.html
new file mode 100644
index 000000000..996a69d83
--- /dev/null
+++ b/layout/reftests/forms/button/width-exact-fit-rtl.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html dir=rtl>
+<style>
+
+button {
+  -moz-appearance: none;
+  background: yellow;
+  border: 2px solid fuchsia;
+  padding: 2px;
+  font-size: 10px;
+  width: 68px;
+  border-radius: 0; /* override mobile/android/themes/core/content.css */
+}
+
+span {
+  display: inline-block; vertical-align: middle;
+  height: 20px; width: 50px; border: 2px solid blue;
+}
+
+</style>
+
+<button><span></span></button>
diff --git a/layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html b/layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html
new file mode 100644
index 000000000..405cfaf0a
--- /dev/null
+++ b/layout/reftests/forms/fieldset/abs-pos-child-sizing-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 971653</title>
+    <style type="text/css">
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+
+div {
+    position: absolute;
+    background: rgba(0,255,0,0.5);
+    top:0; bottom:0;
+    left:0; right:0;
+    z-index: 0;
+}
+c {
+    display: block;
+    background: blue;
+    height:100%;
+}
+
+legend { height: 24px; }
+
+fieldset {
+    position: absolute;
+    border: 2px green solid;
+    width: 100px;
+    height: 100px;
+    margin-bottom:40px;
+}
+
+#t1,#t3 { padding: 3px 5px 7px 11px; }
+#t2,#t4 { padding: 0; }
+
+#t1 div, #t3 div {
+    /* same numbers as padding above */
+    left: -11px; right: -5px;
+    top:  -3px;  bottom:-7px;
+}
+
+#t2 { top: 120px; }
+#t3 { top: 240px; }
+#t4 { top: 360px; }
+
+x {
+    position: absolute;
+    width:100px;
+    height:100px;
+}
+#t1 x, #t2 x {
+    height:78px; /* compensate for legend */
+}
+    </style>
+</head>
+<body>
+
+
+<fieldset id="t1">
+    <legend>legend</legend>
+    <x><div></div><c></c></x>
+</fieldset>
+
+<fieldset id="t2">
+    <legend>legend</legend>
+    <x><div></div></x>
+</fieldset>
+
+<fieldset id="t3">
+    <x><div></div><c></c></x>
+</fieldset>
+
+<fieldset id="t4">
+    <x><div></div></x>
+</fieldset>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/abs-pos-child-sizing.html b/layout/reftests/forms/fieldset/abs-pos-child-sizing.html
new file mode 100644
index 000000000..72d47deac
--- /dev/null
+++ b/layout/reftests/forms/fieldset/abs-pos-child-sizing.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 971653</title>
+    <style type="text/css">
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+
+div {
+    position: absolute;
+    background: rgba(0,255,0,0.5);
+    top:0; bottom:0;
+    left:0; right:0;
+    z-index: 0;
+}
+c {
+    display: block;
+    background: blue;
+    height:100%;
+}
+
+legend { height: 24px; }
+
+fieldset {
+    position: absolute;
+    border: 2px green solid;
+    width: 100px;
+    height: 100px;
+    margin-bottom:40px;
+}
+
+#t1,#t3 { padding: 3px 5px 7px 11px; }
+#t2,#t4 { padding: 0; }
+
+#t2 { top: 120px; }
+#t3 { top: 240px; }
+#t4 { top: 360px; }
+    </style>
+</head>
+<body>
+
+
+<fieldset id="t1">
+    <legend>legend</legend>
+    <div></div><c></c>
+</fieldset>
+
+<fieldset id="t2">
+    <legend>legend</legend>
+    <div></div>
+</fieldset>
+
+<fieldset id="t3">
+    <div></div><c></c>
+</fieldset>
+
+<fieldset id="t4">
+    <div></div>
+</fieldset>
+
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html
new file mode 100644
index 000000000..4f2e7ba47
--- /dev/null
+++ b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+fieldset { 
+  background:pink;
+  overflow:hidden;
+  height:100px;
+}
+legend::after { content:"legend"; }
+p {
+  background:lime;
+  height:20px;
+}
+</style>
+</head>
+<body>
+<fieldset id="f1"><legend></legend><p></p></fieldset>
+<br>
+<fieldset id="f2"><legend></legend><p></p></fieldset>
+<br>
+<fieldset id="f3"><legend></legend></fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html
new file mode 100644
index 000000000..0870f06a0
--- /dev/null
+++ b/layout/reftests/forms/fieldset/dynamic-legend-scroll-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+<style>
+fieldset { 
+  background:pink;
+  overflow:hidden;
+  height:100px;
+}
+legend::after { content:"legend"; }
+p {
+  background:lime;
+  height:20px;
+}
+</style>
+</head>
+<body>
+<fieldset id="f1"><p></p></fieldset>
+<br>
+<fieldset id="f2"><p></p></fieldset>
+<br>
+<fieldset id="f3"></fieldset>
+<script>
+function doTest() {
+  f1.appendChild(document.createElement('legend'));
+  f2.insertBefore(document.createElement('legend'), f2.firstChild);
+  f3.appendChild(document.createElement('legend'));
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html b/layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html
new file mode 100644
index 000000000..80b64f8f8
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-flexbox-001-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<style>
+p { flex-grow: 1; }
+</style>
+<fieldset style="overflow:hidden; width:200px; height:200px;">
+  <legend>Legend</legend>
+<div style="display:flex;">
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+</div>
+</fieldset>
+<fieldset>
+  <legend>Legend</legend>
+<div style="display:flex;">
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+</div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-flexbox-001.html b/layout/reftests/forms/fieldset/fieldset-flexbox-001.html
new file mode 100644
index 000000000..b78d28cf5
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-flexbox-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<style>
+p { flex-grow: 1; }
+</style>
+<fieldset style="display:flex; overflow:hidden; width:200px; height:200px;">
+  <legend>Legend</legend>
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+</fieldset>
+<fieldset style="display:flex;">
+  <legend>Legend</legend>
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-grid-001-ref.html b/layout/reftests/forms/fieldset/fieldset-grid-001-ref.html
new file mode 100644
index 000000000..f99de2252
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-grid-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:hidden; width:200px; height:200px;">
+  <legend>Legend</legend>
+<div style="display:grid; grid-template-columns: repeat(4,50px); grid-auto-rows: 20px;">
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+</div>
+</fieldset>
+<fieldset>
+  <legend>Legend</legend>
+<div style="display:grid; grid-auto-columns: 50px; grid-auto-rows: 20px;">
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+</div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-grid-001.html b/layout/reftests/forms/fieldset/fieldset-grid-001.html
new file mode 100644
index 000000000..37bfaa6be
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-grid-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="display:grid; overflow:hidden; grid-template-columns: repeat(4,50px); grid-auto-rows: 20px; width:200px; height:200px;">
+  <legend>Legend</legend>
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+</fieldset>
+<fieldset style="display:grid; grid-auto-columns: 50px; grid-auto-rows: 20px;">
+  <legend>Legend</legend>
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+  <p>X
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html b/layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html
new file mode 100644
index 000000000..da53b994d
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-hidden-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="width:200px; height:200px; padding:0">
+  <legend>Legend</legend>
+  <div style="overflow:hidden; height:100%;">
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+  </div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-hidden-1.html b/layout/reftests/forms/fieldset/fieldset-hidden-1.html
new file mode 100644
index 000000000..b1046ed72
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-hidden-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:hidden; width:200px; height:200px; padding:0">
+  <legend>Legend</legend>
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html
new file mode 100644
index 000000000..ec0c49ffe
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="width:0; padding:0;">
+  <div style="width:400px; height:200px;"></div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html
new file mode 100644
index 000000000..3326dff9b
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-intrinsic-width-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="padding:50px; float:left;">
+  <div style="width:300px; height:100px;"></div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html
new file mode 100644
index 000000000..9732c7fea
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 261037</title>
+    <style type="text/css">
+fieldset, div { 
+  background:pink;
+  overflow:auto;
+  height:100px;
+  margin:0; padding:0; border:0;
+}
+p {
+  background:blue;
+  height:100px;
+  margin:0; padding:0;
+}
+.overflow {
+  height:110px;
+}
+.abs {
+  position:absolute;
+  width:100px;
+  top:250px;
+}
+p.abs {
+  top:0;left:0;
+}
+.b { border:10px solid black; }
+.p { padding: 7px 0; }
+.p p { height:114px; }
+    </style>
+</head>
+<body>
+
+<div><p></p></div>
+<br>
+<div><p class="overflow"></p></div>
+<br>
+<div class="abs"><p class="abs"></p></div>
+<br>
+<div class="abs" style="left:120px"><p class="abs overflow"></p></div>
+<br>
+<div class="abs b" style="left:240px"><p class="abs"></p></div>
+<br>
+<div class="abs b" style="left:370px"><p class="abs overflow"></p></div>
+<br>
+<div class="abs b p" style="left:510px"><p class="abs"></p></div>
+<br>
+<div class="abs b p" style="left:640px"><p class="abs overflow"></p></div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html
new file mode 100644
index 000000000..d9cf97cf6
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-overflow-auto-1.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 261037</title>
+    <style type="text/css">
+fieldset, div { 
+  background:pink;
+  overflow:auto;
+  height:100px;
+  margin:0; padding:0; border:0;
+}
+p {
+  background:blue;
+  height:100px;
+  margin:0; padding:0;
+}
+.overflow {
+  height:110px;
+}
+.abs {
+  position:absolute;
+  width:100px;
+  top:250px;
+}
+p.abs {
+  top:0;left:0;
+}
+.b { border:10px solid black; }
+.p { padding: 7px 0; }
+.p p { height:114px; }
+    </style>
+</head>
+<body>
+
+<fieldset><p></p></fieldset>
+<br>
+<fieldset><p class="overflow"></p></fieldset>
+<br>
+<fieldset class="abs"><p class="abs"></p></fieldset>
+<br>
+<fieldset class="abs" style="left:120px"><p class="abs overflow"></p></fieldset>
+<br>
+<fieldset class="abs b" style="left:240px"><p class="abs"></p></fieldset>
+<br>
+<fieldset class="abs b" style="left:370px"><p class="abs overflow"></p></fieldset>
+<br>
+<fieldset class="abs b p" style="left:510px"><p class="abs"></p></fieldset>
+<br>
+<fieldset class="abs b p" style="left:640px"><p class="abs overflow"></p></fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html
new file mode 100644
index 000000000..bc926d00c
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:700px; border:2px solid green; overflow:hidden">
+  <fieldset style="padding:140px; width:400px;">
+    <legend>Legend</legend>
+    TextTextTextTextTextText
+  </fieldset>
+  <fieldset style="padding:140px; display:inline;">
+    <legend>Legend</legend>
+    TextTextTextTextTextText
+  </fieldset>
+  <fieldset style="padding:140px; float:left;">
+    <legend>Legend</legend>
+    TextTextTextTextTextText
+  </fieldset>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html
new file mode 100644
index 000000000..ab9a66ab1
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-percentage-padding-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:700px; border:2px solid green; overflow:hidden">
+  <fieldset style="padding:20%; width:400px;">
+    <legend>Legend</legend>
+    TextTextTextTextTextText
+  </fieldset>
+  <fieldset style="padding:20%; display:inline;">
+    <legend>Legend</legend>
+    TextTextTextTextTextText
+  </fieldset>
+  <fieldset style="padding:20%; float:left;">
+    <legend>Legend</legend>
+    TextTextTextTextTextText
+  </fieldset>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html b/layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html
new file mode 100644
index 000000000..e8a696bd1
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-scroll-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="width:200px; height:200px; padding:0">
+  <legend>Legend</legend>
+  <div style="overflow:scroll; height:100%">
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-scroll-1.html b/layout/reftests/forms/fieldset/fieldset-scroll-1.html
new file mode 100644
index 000000000..3f4d75daf
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-scroll-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:scroll; width:200px; height:200px; padding:0">
+  <legend>Legend</legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html b/layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html
new file mode 100644
index 000000000..dc9bcaf9e
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-scrolled-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="width:200px; height:200px; padding:0">
+  <legend style="overflow:hidden">Legend</legend>
+  <div id="d" style="overflow:hidden; height:100%;">
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+    <p>Hello Kitty
+  </div>
+</fieldset>
+<script>
+d.scrollTop = 20;
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/fieldset-scrolled-1.html b/layout/reftests/forms/fieldset/fieldset-scrolled-1.html
new file mode 100644
index 000000000..12aac6bdd
--- /dev/null
+++ b/layout/reftests/forms/fieldset/fieldset-scrolled-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body>
+<fieldset id="f" style="overflow:hidden; width:200px; height:200px; padding:0">
+  <legend style="overflow:hidden">Legend</legend>
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+  <p>Hello Kitty
+</fieldset>
+<script>
+f.scrollTop = 0;
+function doTest() {
+  f.scrollTop = 20;
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/legend-rtl-ref.html b/layout/reftests/forms/fieldset/legend-rtl-ref.html
new file mode 100644
index 000000000..10fb1d1b2
--- /dev/null
+++ b/layout/reftests/forms/fieldset/legend-rtl-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+<fieldset><legend style="position:relative;left:20px;">Legend</legend></fieldset>
+<fieldset dir="rtl"><legend style="position:relative;right:20px;">Legend</legend></fieldset>
+</html>
diff --git a/layout/reftests/forms/fieldset/legend-rtl.html b/layout/reftests/forms/fieldset/legend-rtl.html
new file mode 100644
index 000000000..7a4f114a0
--- /dev/null
+++ b/layout/reftests/forms/fieldset/legend-rtl.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html>
+<fieldset><legend dir="rtl" style="position:relative;left:20px;">Legend</legend></fieldset>
+<fieldset dir="rtl"><legend dir="ltr" style="position:relative;right:20px;">Legend</legend></fieldset>
+</html>
diff --git a/layout/reftests/forms/fieldset/overflow-hidden-ref.html b/layout/reftests/forms/fieldset/overflow-hidden-ref.html
new file mode 100644
index 000000000..0c00977f5
--- /dev/null
+++ b/layout/reftests/forms/fieldset/overflow-hidden-ref.html
@@ -0,0 +1,175 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 971933</title>
+    <style type="text/css">
+        html,body {
+            color:black; background-color:white; font-size:16px;
+        }
+#f0 div::before { content: "f0"; }
+#f1 div::before { content: "f1"; }
+#f2 div::before { content: "f2"; }
+#f3 div::before { content: "f3"; }
+#f4 div::before { content: "f4"; }
+#f5 div::before { content: "f5"; }
+#f6 div::before { content: "f6"; }
+#f7 div::before { content: "f7"; }
+#f8 div::before { content: "f8"; }
+#f9 div::before { content: "f9"; }
+
+legend { background:pink; height:30px; }
+div { background:yellow; height:100px; overflow:hidden; }
+fieldset {
+    border-width:0;
+    padding:0;
+    margin:0;
+    margin-top:6px;
+    outline:1px dotted black;
+    height:auto;
+    background:grey;
+
+    padding-bottom:0px;
+    padding-top:5px;
+    border:1px solid blue;
+    border-top-width:7px;
+}
+
+#f1 { }
+#f2 { border-top-width:0; }
+#f3 { border-width:0; }
+#f4 { border-bottom-width:0; }
+#f5 { border-width:0; padding:0; }
+#f6 { border-width:0; padding-bottom:0; }
+#f7 { border-width:0; padding-top:0; }
+#f8 { padding-top:0; }
+#f9 { padding-bottom:0; }
+#f0 { padding:0; }
+
+#c2 fieldset { height:29px; }
+
+#c3 fieldset { height:39px; }
+
+#c4 fieldset { height:29px; }
+#c4 legend { height: 20px; }
+
+#c5 legend { height:21px; }
+#c5 fieldset { border-top-width:31px; }
+
+.col { float:left; width:10ch; margin-left:6px; }
+
+#c1 div { height:3px; } #c1 #f6 div, #c1 #f9 div, #c1 #f0 div { height:0; }
+#c1 #f5 div { height:0px; }
+
+#c2 div { height:9px; }
+  #c2 #f1 { padding-bottom:3px; } #c2 #f1 div { height:9px;}
+  #c2 #f2 { padding-bottom:3px; } #c2 #f2 div { height:3px; }
+  #c2 #f3 { padding-bottom:3px; } #c2 #f3 div { height:3px; }
+  #c2 #f4 { padding-bottom:3px; }
+  #c2 #f5 div { height:0; }
+  #c2 #f6 div { height:0; }
+  #c2 #f7 { padding-bottom:3px; } #c2 #f7 div { height:3px; }
+  #c2 #f8 { padding-bottom:3px; } #c2 #f8 div { height:9px; }
+  #c2 #f9 div { height:6px; }
+  #c2 #f0 div { height:6px; }
+
+#c3 fieldset { padding-bottom:3px; }
+  #c3 #f1 div { height:19px; }
+  #c3 #f2 div { height:12px; }
+  #c3 #f3 div { height:12px; }
+  #c3 #f4 div { height:19px; }
+  #c3 #f5 { padding-bottom:0; } #c3 #f5 div { height:9px; }
+  #c3 #f6 { padding-bottom:0; } #c3 #f6 div { height:9px; }
+  #c3 #f7 div { height:12px; }
+  #c3 #f8 div { height:19px; }
+  #c3 #f9 { padding-bottom:0; } #c3 #f9 div { height:16px; }
+  #c3 #f0 { padding-bottom:0; } #c3 #f0 div { height:16px; }
+
+#c4 fieldset { padding-bottom:3px; }
+  #c4 #f1 div { height:19px; }
+  #c4 #f2 div { height:12px; }
+  #c4 #f3 div { height:12px; }
+  #c4 #f4 div { height:19px; }
+  #c4 #f5 { padding-bottom:0; } #c4 #f5 div { height:9px; }
+  #c4 #f6 { padding-bottom:0; } #c4 #f6 div { height:9px; }
+  #c4 #f7 div { height:12px; }
+  #c4 #f8 div { height:19px; }
+  #c4 #f9 { padding-bottom:0; } #c4 #f9 div { height:16px; }
+  #c4 #f0 { padding-bottom:0; } #c4 #f0 div { height:16px; }
+
+  #c5 #f1 div { height:18px; }
+  #c5 #f2 div { height:18px; }
+  #c5 #f3 div { height:18px; }
+  #c5 #f4 div { height:18px; }
+  #c5 #f5 div { height:15px; }
+  #c5 #f6 div { height:15px; }
+  #c5 #f7 div { height:18px; }
+  #c5 #f8 div { height:18px; }
+  #c5 #f9 div { height:15px; }
+  #c5 #f0 div { height:15px; }
+
+</style>
+</head>
+<body>
+<span id=c1 class=col>C1
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c2 class=col>C2
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c3 class=col>C3
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c4 class=col>C4
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c5 class=col>C5
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/overflow-hidden.html b/layout/reftests/forms/fieldset/overflow-hidden.html
new file mode 100644
index 000000000..480134803
--- /dev/null
+++ b/layout/reftests/forms/fieldset/overflow-hidden.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 971933</title>
+    <style type="text/css">
+        html,body {
+            color:black; background-color:white; font-size:16px;
+        }
+#f0 div::before { content: "f0"; }
+#f1 div::before { content: "f1"; }
+#f2 div::before { content: "f2"; }
+#f3 div::before { content: "f3"; }
+#f4 div::before { content: "f4"; }
+#f5 div::before { content: "f5"; }
+#f6 div::before { content: "f6"; }
+#f7 div::before { content: "f7"; }
+#f8 div::before { content: "f8"; }
+#f9 div::before { content: "f9"; }
+
+legend { background:pink; height:30px; }
+div { background:yellow; height:100px; }
+fieldset {
+    border-width:0;
+    padding:0;
+    margin:0;
+    margin-top:6px;
+    outline:1px dotted black;
+    height:15px;
+    overflow:hidden;
+    background:grey;
+
+    padding-bottom:3px;
+    padding-top:5px;
+    border:1px solid blue;
+    border-top-width:7px;
+}
+
+#f1 {}
+#f2 { border-top-width:0; }
+#f3 { border-width:0; }
+#f4 { border-bottom-width:0; }
+#f5 { border-width:0; padding:0; }
+#f6 { border-width:0; padding-bottom:0; }
+#f7 { border-width:0; padding-top:0; }
+#f8 { padding-top:0; }
+#f9 { padding-bottom:0; }
+#f0 { padding:0; }
+
+#c2 fieldset { height:29px; }
+
+#c3 fieldset { height:39px; }
+
+#c4 fieldset { height:29px; }
+#c4 legend { height: 20px; }
+
+#c5 legend { height:21px; }
+#c5 fieldset { border-top-width:31px; }
+
+.col { float:left; width:10ch; margin-left:6px; }
+</style>
+</head>
+<body>
+<span id=c1 class=col>C1
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c2 class=col>C2
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c3 class=col>C3
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c4 class=col>C4
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+<span id=c5 class=col>C5
+        <fieldset id=f1><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f2><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f3><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f4><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f5><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f6><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f7><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f8><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f9><legend>LEGEND</legend><div></div></fieldset>
+        <fieldset id=f0><legend>LEGEND</legend><div></div></fieldset>
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/positioned-container-1-ref.html b/layout/reftests/forms/fieldset/positioned-container-1-ref.html
new file mode 100644
index 000000000..b7988f379
--- /dev/null
+++ b/layout/reftests/forms/fieldset/positioned-container-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="position:relative; overflow:hidden; width:500px; height:500px;">
+  <legend>Legend</legend>
+  <div style="height:1000px;">
+    <div style="position:absolute; padding:2px; left:20px; top:20px; background:yellow;">Abs-pos</div>
+  </div>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/positioned-container-1.html b/layout/reftests/forms/fieldset/positioned-container-1.html
new file mode 100644
index 000000000..04e81ca6b
--- /dev/null
+++ b/layout/reftests/forms/fieldset/positioned-container-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset id="f" style="position:relative; overflow:hidden; width:500px; height:500px;">
+  <legend>Legend</legend>
+  <div style="height:1000px;">
+    <div style="position:absolute; padding:2px; left:20px; top:50px; background:yellow;">Abs-pos</div>
+  </div>
+</fieldset>
+<script>
+f.scrollTop = 30;
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/reftest-stylo.list b/layout/reftests/forms/fieldset/reftest-stylo.list
new file mode 100644
index 000000000..d1dd22756
--- /dev/null
+++ b/layout/reftests/forms/fieldset/reftest-stylo.list
@@ -0,0 +1,19 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+fuzzy-if(skiaContent,2,13) == dynamic-legend-scroll-1.html dynamic-legend-scroll-1.html
+== fieldset-hidden-1.html fieldset-hidden-1.html
+== fieldset-intrinsic-width-1.html fieldset-intrinsic-width-1.html
+== fieldset-percentage-padding-1.html fieldset-percentage-padding-1.html
+== fieldset-scroll-1.html fieldset-scroll-1.html
+== fieldset-scrolled-1.html fieldset-scrolled-1.html
+random-if(B2G||Mulet) == fieldset-overflow-auto-1.html fieldset-overflow-auto-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(winWidget&&!layersGPUAccelerated,121,221) == positioned-container-1.html positioned-container-1.html
+== relpos-legend-1.html relpos-legend-1.html
+== relpos-legend-2.html relpos-legend-2.html
+skip-if((B2G&&browserIsRemote)||Mulet) == sticky-legend-1.html sticky-legend-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails fuzzy-if(skiaContent,1,40768) == abs-pos-child-sizing.html abs-pos-child-sizing.html
+== overflow-hidden.html overflow-hidden.html
+== legend-rtl.html legend-rtl.html
+== fieldset-grid-001.html fieldset-grid-001.html
+== fieldset-flexbox-001.html fieldset-flexbox-001.html
diff --git a/layout/reftests/forms/fieldset/reftest.list b/layout/reftests/forms/fieldset/reftest.list
new file mode 100644
index 000000000..fdf783053
--- /dev/null
+++ b/layout/reftests/forms/fieldset/reftest.list
@@ -0,0 +1,16 @@
+fuzzy-if(skiaContent,2,13) == dynamic-legend-scroll-1.html dynamic-legend-scroll-1-ref.html
+== fieldset-hidden-1.html fieldset-hidden-1-ref.html
+== fieldset-intrinsic-width-1.html fieldset-intrinsic-width-1-ref.html
+== fieldset-percentage-padding-1.html fieldset-percentage-padding-1-ref.html
+== fieldset-scroll-1.html fieldset-scroll-1-ref.html
+== fieldset-scrolled-1.html fieldset-scrolled-1-ref.html
+== fieldset-overflow-auto-1.html fieldset-overflow-auto-1-ref.html
+fuzzy-if(winWidget&&!layersGPUAccelerated,140,276) == positioned-container-1.html positioned-container-1-ref.html
+== relpos-legend-1.html relpos-legend-1-ref.html
+== relpos-legend-2.html relpos-legend-2-ref.html
+== sticky-legend-1.html sticky-legend-1-ref.html
+fuzzy-if(skiaContent,1,40768) == abs-pos-child-sizing.html abs-pos-child-sizing-ref.html
+== overflow-hidden.html overflow-hidden-ref.html
+== legend-rtl.html legend-rtl-ref.html
+== fieldset-grid-001.html fieldset-grid-001-ref.html
+== fieldset-flexbox-001.html fieldset-flexbox-001-ref.html
diff --git a/layout/reftests/forms/fieldset/relpos-legend-1-ref.html b/layout/reftests/forms/fieldset/relpos-legend-1-ref.html
new file mode 100644
index 000000000..c916817dd
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+  <legend><div style="position:relative; top:20px">Legend</div></legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-1.html b/layout/reftests/forms/fieldset/relpos-legend-1.html
new file mode 100644
index 000000000..441dd9219
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+  <legend style="position:relative; top:20px">Legend</legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-2-ref.html b/layout/reftests/forms/fieldset/relpos-legend-2-ref.html
new file mode 100644
index 000000000..4124b074b
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-2-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+  <legend><span style="position:relative; top:20px">Legend</span></legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/relpos-legend-2.html b/layout/reftests/forms/fieldset/relpos-legend-2.html
new file mode 100644
index 000000000..f1be56e26
--- /dev/null
+++ b/layout/reftests/forms/fieldset/relpos-legend-2.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset>
+  <legend style="display:inline; position:relative; top:20px">Legend</legend>
+</fieldset>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/sticky-legend-1-ref.html b/layout/reftests/forms/fieldset/sticky-legend-1-ref.html
new file mode 100644
index 000000000..892fa4c29
--- /dev/null
+++ b/layout/reftests/forms/fieldset/sticky-legend-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:hidden; height:300px;">
+  <legend style="position:fixed; top:0"><div style="width:200px; height:50px; background:yellow;"></div></legend>
+</fieldset>
+<div style="height:5000px;"></div>
+<script>
+window.scrollTo(0,100);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/fieldset/sticky-legend-1.html b/layout/reftests/forms/fieldset/sticky-legend-1.html
new file mode 100644
index 000000000..588ea521f
--- /dev/null
+++ b/layout/reftests/forms/fieldset/sticky-legend-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<fieldset style="overflow:hidden; height:300px;">
+  <legend style="position:sticky; top:0;"><div style="width:200px; height:50px; background:yellow;"></div></legend>
+</fieldset>
+<div style="height:5000px;"></div>
+<script>
+window.scrollTo(0,100);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/checked-native-notref.html b/layout/reftests/forms/input/checkbox/checked-native-notref.html
new file mode 100644
index 000000000..921482afc
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checked-native-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox">
diff --git a/layout/reftests/forms/input/checkbox/checked-native.html b/layout/reftests/forms/input/checkbox/checked-native.html
new file mode 100644
index 000000000..50faa46d2
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checked-native.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox" checked>
diff --git a/layout/reftests/forms/input/checkbox/checked-notref.html b/layout/reftests/forms/input/checkbox/checked-notref.html
new file mode 100644
index 000000000..8e5b55cfb
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checked-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox" style="-moz-appearance:none">
diff --git a/layout/reftests/forms/input/checkbox/checked.html b/layout/reftests/forms/input/checkbox/checked.html
new file mode 100644
index 000000000..b7d651135
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/checked.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="checkbox" style="-moz-appearance:none" checked>
diff --git a/layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html b/layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html
new file mode 100644
index 000000000..380f52286
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/gtk-theme-width-height-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 932506</title>
+  <style>
+
+input { outline:1px solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="overflow:hidden; width:160px;">
+  <div style="float:left; width:799px; border:1px solid blue;">
+    <input type="checkbox" checked style="width:400px; visibility:hidden;">
+    <input type="checkbox" checked style="width:400px; height:100px; visibility:hidden;">
+  </div>
+</div>
+
+
+<input type="checkbox" checked style="width:400px;"><br>
+<input type="checkbox" checked style="height:100px;"><br>
+<input type="checkbox" checked style=""><br>
+
+<input type="checkbox" checked style="width:400px;"><br>
+<input type="checkbox" checked style="height:100px;"><br>
+<input type="checkbox" checked style=""><br>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/gtk-theme-width-height.html b/layout/reftests/forms/input/checkbox/gtk-theme-width-height.html
new file mode 100644
index 000000000..456864e95
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/gtk-theme-width-height.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 932506</title>
+  <style>
+
+input { outline:1px solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="overflow:hidden; width:160px;">
+  <div style="float:left; width:799px; border:1px solid blue;">
+    <input type="checkbox" checked style="width:400px; outline:none;">
+    <input type="checkbox" checked style="width:400px; height:100px; outline:none;">
+  </div>
+</div>
+
+<input type="checkbox" checked style="width:400px; height:1px;"><br>
+<input type="checkbox" checked style="width:1px; height:100px;"><br>
+<input type="checkbox" checked style="width:1px; height:1px;"><br>
+
+<input type="checkbox" checked style="width:400px; height:0;"><br>
+<input type="checkbox" checked style="width:0; height:100px;"><br>
+<input type="checkbox" checked style="width:0; height:0;"><br>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
new file mode 100644
index 000000000..37ea17655
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-checked-notref.html
@@ -0,0 +1 @@
+<input type="checkbox" checked style="-moz-appearance: none;">
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-checked.html b/layout/reftests/forms/input/checkbox/indeterminate-checked.html
new file mode 100644
index 000000000..7cecf09a0
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-checked.html
@@ -0,0 +1 @@
+<input type="checkbox" id="s" checked style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html
new file mode 100644
index 000000000..cf16667cb
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-native-checked-notref.html
@@ -0,0 +1 @@
+<input type="checkbox" checked>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-checked.html b/layout/reftests/forms/input/checkbox/indeterminate-native-checked.html
new file mode 100644
index 000000000..91097098c
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-native-checked.html
@@ -0,0 +1 @@
+<input type="checkbox" id="s" checked><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html
new file mode 100644
index 000000000..74c06d253
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked-notref.html
@@ -0,0 +1 @@
+<input type="checkbox">
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html
new file mode 100644
index 000000000..11832f477
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-native-unchecked.html
@@ -0,0 +1 @@
+<input type="checkbox" id="s"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html b/layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html
new file mode 100644
index 000000000..02266912a
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-selector-ref.html
@@ -0,0 +1,7 @@
+<style>
+#s {
+  margin: 50px;
+}
+</style>
+
+<input type="checkbox" id="s"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-selector.html b/layout/reftests/forms/input/checkbox/indeterminate-selector.html
new file mode 100644
index 000000000..eb23819f9
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-selector.html
@@ -0,0 +1,7 @@
+<style>
+#s:indeterminate {
+  margin: 50px;
+}
+</style>
+
+<input type="checkbox" id="s"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html b/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
new file mode 100644
index 000000000..1055cbef1
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked-notref.html
@@ -0,0 +1 @@
+<input type="checkbox" style="-moz-appearance: none;">
diff --git a/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html b/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
new file mode 100644
index 000000000..56a8d0955
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/indeterminate-unchecked.html
@@ -0,0 +1 @@
+<input type="checkbox" id="s" style="-moz-appearance: none;"><script>document.getElementById("s").indeterminate = true;</script>
diff --git a/layout/reftests/forms/input/checkbox/label-dynamic-ref.html b/layout/reftests/forms/input/checkbox/label-dynamic-ref.html
new file mode 100644
index 000000000..3dbdc48d4
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/label-dynamic-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+
+#c3, #c4 {
+  display: none;
+}
+
+label[for="c1"], 
+label[for="c3"] {
+  background-color: yellow;
+}
+
+</style>
+
+</head>
+
+<body>
+
+<div><input type="checkbox" name="test" id="c1" checked><label for="c1">check #c1</label></div>
+<div><input type="checkbox" name="test" id="c2"><label for="c2">check #c2</label></div>
+<div><input type="checkbox" name="test" id="c3" checked><label for="c3">check #c3</label></div>
+<div><input type="checkbox" name="test" id="c4"><label for="c4">check #c4</label></div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/label-dynamic.html b/layout/reftests/forms/input/checkbox/label-dynamic.html
new file mode 100644
index 000000000..cbbce6817
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/label-dynamic.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+
+#c3, #c4 {
+  display: none;
+}
+
+input:checked + label {
+  background-color: yellow;
+}
+
+</style>
+
+<script type="text/javascript">
+
+function toggleAllCheckboxes()
+{
+  for (var i = 1; i <= 4; ++i) {
+    var cb = document.getElementById('c'+i);
+    cb.checked = !cb.checked;
+  }
+}
+
+</script>
+</head>
+
+<body onload="toggleAllCheckboxes();">
+
+<div><input type="checkbox" name="test" id="c1"><label for="c1">check #c1</label></div>
+<div><input type="checkbox" name="test" id="c2" checked><label for="c2">check #c2</label></div>
+<div><input type="checkbox" name="test" id="c3"><label for="c3">check #c3</label></div>
+<div><input type="checkbox" name="test" id="c4" checked><label for="c4">check #c4</label></div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/radio-stretched-ref.html b/layout/reftests/forms/input/checkbox/radio-stretched-ref.html
new file mode 100644
index 000000000..2f2532c0b
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/radio-stretched-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<form>
+  <input type="checkbox"/>
+  <input type="radio"/>
+</form>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/radio-stretched.html b/layout/reftests/forms/input/checkbox/radio-stretched.html
new file mode 100644
index 000000000..159a2cc92
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/radio-stretched.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<form>
+  <input type="checkbox" style="width: auto;">
+  <input type="radio" style="width: auto;">
+</form>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/checkbox/reftest-stylo.list b/layout/reftests/forms/input/checkbox/reftest-stylo.list
new file mode 100644
index 000000000..11fe7d778
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/reftest-stylo.list
@@ -0,0 +1,18 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== label-dynamic.html label-dynamic.html
+skip-if(B2G||Mulet) fails-if(Android) == radio-stretched.html radio-stretched.html
+# test for bug 464589
+# Initial mulet triage: parity with B2G/B2G Desktop
+== checked.html checked.html
+== checked-native.html checked-native.html
+== checked.html checked.html
+== checked-notref.html checked-notref.html
+== checked-native.html checked-native.html
+== checked-native-notref.html checked-native-notref.html
+== indeterminate-checked.html indeterminate-checked.html
+== indeterminate-unchecked.html indeterminate-unchecked.html
+== indeterminate-native-checked.html indeterminate-native-checked.html
+== indeterminate-native-unchecked.html indeterminate-native-unchecked.html
+== indeterminate-selector.html indeterminate-selector.html
+skip-if(!gtkWidget||Mulet) == gtk-theme-width-height.html gtk-theme-width-height.html
+# bug 1141511: Disable some gtkWidget-dependant reftests on Mulet
diff --git a/layout/reftests/forms/input/checkbox/reftest.list b/layout/reftests/forms/input/checkbox/reftest.list
new file mode 100644
index 000000000..cc485e969
--- /dev/null
+++ b/layout/reftests/forms/input/checkbox/reftest.list
@@ -0,0 +1,14 @@
+== label-dynamic.html label-dynamic-ref.html
+fails-if(Android) == radio-stretched.html radio-stretched-ref.html # test for bug 464589
+!= checked.html checked-notref.html
+!= checked-native.html checked-native-notref.html
+!= checked.html about:blank
+!= checked-notref.html about:blank
+!= checked-native.html about:blank
+!= checked-native-notref.html about:blank
+!= indeterminate-checked.html indeterminate-checked-notref.html
+!= indeterminate-unchecked.html indeterminate-unchecked-notref.html
+!= indeterminate-native-checked.html indeterminate-native-checked-notref.html
+!= indeterminate-native-unchecked.html indeterminate-native-unchecked-notref.html
+== indeterminate-selector.html indeterminate-selector-ref.html
+skip-if(!gtkWidget) == gtk-theme-width-height.html gtk-theme-width-height-ref.html
diff --git a/layout/reftests/forms/input/color/block-invalidate-1-ref.html b/layout/reftests/forms/input/color/block-invalidate-1-ref.html
new file mode 100644
index 000000000..027c1e2b5
--- /dev/null
+++ b/layout/reftests/forms/input/color/block-invalidate-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="color" value="#00ff00" />
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/block-invalidate-1.html b/layout/reftests/forms/input/color/block-invalidate-1.html
new file mode 100644
index 000000000..fb79067ad
--- /dev/null
+++ b/layout/reftests/forms/input/color/block-invalidate-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <script>
+    function runTest() {
+      var p = document.getElementsByTagName('input')[0];
+      p.value = '#00ff00';
+      document.documentElement.className = '';
+    }
+    window.addEventListener("MozReftestInvalidate", runTest, false);
+  </script>
+  <body>
+    <input type="color" />
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/block-invalidate-2-ref.html b/layout/reftests/forms/input/color/block-invalidate-2-ref.html
new file mode 100644
index 000000000..9def78fad
--- /dev/null
+++ b/layout/reftests/forms/input/color/block-invalidate-2-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <p>Test for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977038">977038</a></p>
+    <form>
+      <input type="color" value="#00ff00" />
+    </form>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/block-invalidate-2.html b/layout/reftests/forms/input/color/block-invalidate-2.html
new file mode 100644
index 000000000..efc2acb84
--- /dev/null
+++ b/layout/reftests/forms/input/color/block-invalidate-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <script>
+    function runTest() {
+      var p = document.getElementsByTagName('input')[0];
+      p.value = '#0000ff'
+      p.defaultValue = '#00ff00';
+      p.form.reset();
+      document.documentElement.className = '';
+    }
+    window.addEventListener("MozReftestInvalidate", runTest, false);
+  </script>
+  <body>
+    <p>Test for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977038">977038</a></p>
+    <form>
+      <input type="color" />
+    </form>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/custom-style-1-ref.html b/layout/reftests/forms/input/color/custom-style-1-ref.html
new file mode 100644
index 000000000..fa550d83b
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='reference-style.css'>
+  <style>
+    button.input-color {
+      -moz-appearance: button;
+    }
+    div.input-color-swatch {
+      margin-top: 3px;
+      margin-bottom: 3px;
+    }
+  </style>
+  <body>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+
+  </body>
diff --git a/layout/reftests/forms/input/color/custom-style-1.html b/layout/reftests/forms/input/color/custom-style-1.html
new file mode 100644
index 000000000..4aea98b14
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    input[type="color"] {
+      -moz-appearance: button;
+    }
+    input[type="color"]::-moz-color-swatch {
+      margin-top: 3px;
+      margin-bottom: 3px;
+    }
+  </style>
+  <body>
+    <input type="color" />
+  </body>
diff --git a/layout/reftests/forms/input/color/custom-style-2-ref.html b/layout/reftests/forms/input/color/custom-style-2-ref.html
new file mode 100644
index 000000000..802af966e
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test for bug 943966</title>
+    <link rel='stylesheet' type='text/css' href='reference-style.css'>
+    <style>
+      button.input-color {
+        height: 15px;
+        width: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=943966">Mozilla Bug 943966</a>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/custom-style-2.html b/layout/reftests/forms/input/color/custom-style-2.html
new file mode 100644
index 000000000..209594b32
--- /dev/null
+++ b/layout/reftests/forms/input/color/custom-style-2.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test for bug 943966</title>
+    <style>
+      input[type="color"].tiny {
+        height: 15px;
+        width: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=943966">Mozilla Bug 943966</a>
+    <input class="tiny" type="color" />
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/input-color-1-ref.html b/layout/reftests/forms/input/color/input-color-1-ref.html
new file mode 100644
index 000000000..99087c53c
--- /dev/null
+++ b/layout/reftests/forms/input/color/input-color-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel='stylesheet' type='text/css' href='reference-style.css'>
+    <style>
+      body > button:nth-child(1) > .input-color-swatch { background-color: #000000; }
+      body > button:nth-child(2) > .input-color-swatch { background-color: #000000; }
+      body > button:nth-child(3) > .input-color-swatch { background-color: #00ff00; }
+      body > button:nth-child(4) > .input-color-swatch { background-color: #123456; }
+    </style>
+  </head>
+  <body>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/input-color-1.html b/layout/reftests/forms/input/color/input-color-1.html
new file mode 100644
index 000000000..a351df18f
--- /dev/null
+++ b/layout/reftests/forms/input/color/input-color-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="color" />
+    <input type="color" value="#000000" />
+    <input type="color" value="#00ff00" />
+    <input type="color" value="#123456" />
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/margin-padding-1-ref.html b/layout/reftests/forms/input/color/margin-padding-1-ref.html
new file mode 100644
index 000000000..e32ee72ca
--- /dev/null
+++ b/layout/reftests/forms/input/color/margin-padding-1-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='reference-style.css'>
+  <style>
+    body > button:nth-child(1) { margin: 10px; padding: 0px; }
+    body > button:nth-child(2) { margin: 0px; padding: 10px; }
+    body > button:nth-child(3) { margin: 10px; padding: 10px; }
+    body > button:nth-child(4) { margin: 5px; padding: 5px; }
+    body > button:nth-child(5) { margin: 50px; padding: 50px; }
+    body > button:nth-child(6) { margin: 100px; padding: 100px; }
+    body > button:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > button:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > button:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > button:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > button:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > button:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > button:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > button:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > button:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > button:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/margin-padding-1.html b/layout/reftests/forms/input/color/margin-padding-1.html
new file mode 100644
index 000000000..e394d5d29
--- /dev/null
+++ b/layout/reftests/forms/input/color/margin-padding-1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    input[type=color]:nth-child(1) { margin: 10px; padding: 0px; }
+    input[type=color]:nth-child(2) { margin: 0px; padding: 10px; }
+    input[type=color]:nth-child(3) { margin: 10px; padding: 10px; }
+    input[type=color]:nth-child(4) { margin: 5px; padding: 5px; }
+    input[type=color]:nth-child(5) { margin: 50px; padding: 50px; }
+    input[type=color]:nth-child(6) { margin: 100px; padding: 100px; }
+    input[type=color]:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    input[type=color]:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    input[type=color]:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    input[type=color]:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    input[type=color]:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    input[type=color]:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    input[type=color]:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    input[type=color]:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    input[type=color]:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    input[type=color]:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/reference-style.css b/layout/reftests/forms/input/color/reference-style.css
new file mode 100644
index 000000000..188b12c31
--- /dev/null
+++ b/layout/reftests/forms/input/color/reference-style.css
@@ -0,0 +1,16 @@
+div.input-color-swatch {
+  /* This should match the styling for ::-moz-color-swatch in forms.css. */
+  width: 100%;
+  height: 100%;
+  min-width: 3px;
+  min-height: 3px;
+  box-sizing: border-box;
+  border: 1px solid grey;
+  display: block;
+  background-color:#000000; /* default color for input type color */
+}
+
+button.input-color {
+  width: 64px;
+  height: 23px;
+}
diff --git a/layout/reftests/forms/input/color/reftest-stylo.list b/layout/reftests/forms/input/color/reftest-stylo.list
new file mode 100644
index 000000000..a1e01b480
--- /dev/null
+++ b/layout/reftests/forms/input/color/reftest-stylo.list
@@ -0,0 +1,20 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Simple test. Should fail on platforms where input type color isn't activated
+# yet. Missing platforms are B2G (bug 875751), Android (bug 875750).
+fails-if(B2G||Mulet||Android) == input-color-1.html input-color-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+default-preferences pref(dom.forms.color,true)
+
+# Despite the "default-preferences" line above, B2G and Android are still
+# excluded from some style in forms.css, which makes the following tests fail.
+fails-if(B2G||Mulet||Android) == margin-padding-1.html margin-padding-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== block-invalidate-1.html block-invalidate-1.html
+== block-invalidate-2.html block-invalidate-2.html
+fuzzy-if(gtkWidget,8,33) fuzzy-if(skiaContent,8,35) fails-if(B2G||Mulet||Android) == transformations-1.html transformations-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) == custom-style-1.html custom-style-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) == custom-style-2.html custom-style-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
diff --git a/layout/reftests/forms/input/color/reftest.list b/layout/reftests/forms/input/color/reftest.list
new file mode 100644
index 000000000..148cb4bad
--- /dev/null
+++ b/layout/reftests/forms/input/color/reftest.list
@@ -0,0 +1,14 @@
+# Simple test. Should fail on platforms where input type color isn't activated
+# yet. The missing platform is Android (bug 875750).
+fails-if(Android) == input-color-1.html input-color-1-ref.html
+
+default-preferences pref(dom.forms.color,true)
+
+# Despite the "default-preferences" line above, Android is still
+# excluded from some style in forms.css, which makes the following tests fail.
+fails-if(Android) == margin-padding-1.html margin-padding-1-ref.html
+== block-invalidate-1.html block-invalidate-1-ref.html
+== block-invalidate-2.html block-invalidate-2-ref.html
+fuzzy-if(gtkWidget,8,33) fuzzy-if(skiaContent,8,35) fails-if(Android) == transformations-1.html transformations-1-ref.html
+fails-if(Android) == custom-style-1.html custom-style-1-ref.html
+fails-if(Android) == custom-style-2.html custom-style-2-ref.html
diff --git a/layout/reftests/forms/input/color/transformations-1-ref.html b/layout/reftests/forms/input/color/transformations-1-ref.html
new file mode 100644
index 000000000..fba5093f7
--- /dev/null
+++ b/layout/reftests/forms/input/color/transformations-1-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='reference-style.css'>
+  <style>
+    body > button:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    body > button:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+    body > button:nth-child(3) { -moz-transform: rotate(30deg); }
+    body > button:nth-child(4) { -moz-transform: scale(2, 4); }
+    body > button:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+    body > button:nth-child(6) { -moz-transform: scale(1, 0.4); }
+    body > button:nth-child(7) { -moz-transform: scale(0.1, 1); }
+    body > button:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+    body > button:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+    body > button:nth-child(10) { -moz-transform: translate(10px, 30px); }
+    body > button:nth-child(11) { -moz-transform: translate(30px, 10px); }
+    body > button:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+    body > button:nth-child(13) { -moz-transform: translate(30px, -10px); }
+    body > button:nth-child(14) { -moz-transform: scale(0, 0); }
+  </style>
+  <body>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+    <button class="input-color">
+      <div class="input-color-swatch">
+      </div>
+    </button>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/color/transformations-1.html b/layout/reftests/forms/input/color/transformations-1.html
new file mode 100644
index 000000000..67bb4b3c9
--- /dev/null
+++ b/layout/reftests/forms/input/color/transformations-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    input[type=color]:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    input[type=color]:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+    input[type=color]:nth-child(3) { -moz-transform: rotate(30deg); }
+    input[type=color]:nth-child(4) { -moz-transform: scale(2, 4); }
+    input[type=color]:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+    input[type=color]:nth-child(6) { -moz-transform: scale(1, 0.4); }
+    input[type=color]:nth-child(7) { -moz-transform: scale(0.1, 1); }
+    input[type=color]:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+    input[type=color]:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+    input[type=color]:nth-child(10) { -moz-transform: translate(10px, 30px); }
+    input[type=color]:nth-child(11) { -moz-transform: translate(30px, 10px); }
+    input[type=color]:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+    input[type=color]:nth-child(13) { -moz-transform: translate(30px, -10px); }
+    input[type=color]:nth-child(14) { -moz-transform: scale(0, 0); }
+  </style>
+  <body>
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+    <input type=color />
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="checkbox" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html
new file mode 100644
index 000000000..31b804602
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/from-time-to-other-type-unthemed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when switching to another type, the input element should look
+             like that type (not like an input time element) -->
+  <script type="text/javascript">
+    function setToCheckbox()
+    {
+      document.getElementById("i").type = "checkbox";
+      document.documentElement.className = "";
+    }
+    document.addEventListener("MozReftestInvalidate", setToCheckbox);
+  </script>
+  <body>
+    <input type="time" id="i" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/reftest.list b/layout/reftests/forms/input/datetime/reftest.list
new file mode 100644
index 000000000..0ce2002bd
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/reftest.list
@@ -0,0 +1,13 @@
+default-preferences pref(dom.forms.datetime,true)
+
+# not valid on Android/B2G where type=time looks like type=text
+skip-if(Android||B2G||Mulet) != time-simple-unthemed.html time-simple-unthemed-ref.html
+skip-if(Android||B2G||Mulet) != time-large-font.html time-basic.html
+skip-if(Android||B2G||Mulet) != time-width-height.html time-basic.html
+skip-if(Android||B2G||Mulet) != time-border.html time-basic.html
+# only valid on Android/B2G where type=number looks the same as type=text
+skip-if(!Android&&!B2G&&!Mulet) == time-simple-unthemed.html time-simple-unthemed-ref.html
+
+# type change
+skip-if(Android||B2G||Mulet) == to-time-from-other-type-unthemed.html time-simple-unthemed.html
+skip-if(Android||B2G||Mulet) == from-time-to-other-type-unthemed.html from-time-to-other-type-unthemed-ref.html
diff --git a/layout/reftests/forms/input/datetime/time-basic.html b/layout/reftests/forms/input/datetime/time-basic.html
new file mode 100644
index 000000000..c161b17c2
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-basic.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="time" value="12:30">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-border.html b/layout/reftests/forms/input/datetime/time-border.html
new file mode 100644
index 000000000..09ffd01d2
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-border.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="time" value="12:30" style="border:10px solid blue">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-large-font.html b/layout/reftests/forms/input/datetime/time-large-font.html
new file mode 100644
index 000000000..c2f5e956d
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-large-font.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="time" value="12:30" style="font-size: 32px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html b/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html
new file mode 100644
index 000000000..24dccffea
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-simple-unthemed-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-simple-unthemed.html b/layout/reftests/forms/input/datetime/time-simple-unthemed.html
new file mode 100644
index 000000000..023456723
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-simple-unthemed.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="time" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/time-width-height.html b/layout/reftests/forms/input/datetime/time-width-height.html
new file mode 100644
index 000000000..a6de5cdb4
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/time-width-height.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="time" style="width:200px; height:50px">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html b/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html
new file mode 100644
index 000000000..1ae398f4c
--- /dev/null
+++ b/layout/reftests/forms/input/datetime/to-time-from-other-type-unthemed.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: input element changed to time state doesn't look like checkbox state -->
+  <script type="text/javascript">
+    function setToTime()
+    {
+      document.getElementById("i").type = "time";
+      document.documentElement.className = "";
+    }
+    document.addEventListener("MozReftestInvalidate", setToTime);
+  </script>
+  <body>
+    <input type="checkbox" id="i" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/email/1.html b/layout/reftests/forms/input/email/1.html
new file mode 100644
index 000000000..c2591d068
--- /dev/null
+++ b/layout/reftests/forms/input/email/1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: input element in email state looks like in text state -->
+  <body>
+    <input type="email">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/email/2.html b/layout/reftests/forms/input/email/2.html
new file mode 100644
index 000000000..ab1bf2e6b
--- /dev/null
+++ b/layout/reftests/forms/input/email/2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: input element in email state looks like in text state -->
+  <script type="text/javascript">
+    function setToEmail()
+    {
+      document.getElementById('i').type = 'email';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setToEmail(); disableReftestWait();">
+    <input type='checkbox' id='i'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/email/3.html b/layout/reftests/forms/input/email/3.html
new file mode 100644
index 000000000..a9fe4400d
--- /dev/null
+++ b/layout/reftests/forms/input/email/3.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when switching to another type, the input element should not look
+             like an input email element -->
+  <script type="text/javascript">
+    function setToCheckbox()
+    {
+      document.getElementById('i').type='checkbox';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setToCheckbox(); disableReftestWait();">
+    <input type='email' id='i'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/email/ref.html b/layout/reftests/forms/input/email/ref.html
new file mode 100644
index 000000000..07e5eee7e
--- /dev/null
+++ b/layout/reftests/forms/input/email/ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/email/reftest-stylo.list b/layout/reftests/forms/input/email/reftest-stylo.list
new file mode 100644
index 000000000..021c5f861
--- /dev/null
+++ b/layout/reftests/forms/input/email/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== 1.html 1.html
+== 2.html 2.html
+== 3.html 3.html
diff --git a/layout/reftests/forms/input/email/reftest.list b/layout/reftests/forms/input/email/reftest.list
new file mode 100644
index 000000000..dcca7a3cd
--- /dev/null
+++ b/layout/reftests/forms/input/email/reftest.list
@@ -0,0 +1,3 @@
+== 1.html ref.html
+== 2.html ref.html
+!= 3.html ref.html
diff --git a/layout/reftests/forms/input/file/background-ref.xul b/layout/reftests/forms/input/file/background-ref.xul
new file mode 100644
index 000000000..cf5b0c5e4
--- /dev/null
+++ b/layout/reftests/forms/input/file/background-ref.xul
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style>
+    window {
+      background-color: blue;
+    }
+  </html:style>
+
+  <vbox>
+    <html:div class='file'>
+      <html:button>Browse&#8230;</html:button><label value="No file selected."/>
+    </html:div>
+  </vbox>
+</window>
diff --git a/layout/reftests/forms/input/file/background.html b/layout/reftests/forms/input/file/background.html
new file mode 100644
index 000000000..02af1d143
--- /dev/null
+++ b/layout/reftests/forms/input/file/background.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    body {
+      background-color: blue;
+    }
+  </style>
+  <body>
+    <input type='file'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/color-inherit-ref.html b/layout/reftests/forms/input/file/color-inherit-ref.html
new file mode 100644
index 000000000..39cd471a5
--- /dev/null
+++ b/layout/reftests/forms/input/file/color-inherit-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type='file' style='color: chartreuse;'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/color-inherit.html b/layout/reftests/forms/input/file/color-inherit.html
new file mode 100644
index 000000000..843532953
--- /dev/null
+++ b/layout/reftests/forms/input/file/color-inherit.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body style='color: chartreuse;'>
+    <input type='file'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/reftest-stylo.list b/layout/reftests/forms/input/file/reftest-stylo.list
new file mode 100644
index 000000000..44d8ce504
--- /dev/null
+++ b/layout/reftests/forms/input/file/reftest-stylo.list
@@ -0,0 +1,20 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# B2G failures: bug 855352.
+fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,152) skip-if((B2G&&browserIsRemote)||Mulet) == simple.html simple.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,76) skip-if((B2G&&browserIsRemote)||Mulet) == rtl.html rtl.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,152) skip-if((B2G&&browserIsRemote)||Mulet) == size.html size.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) fuzzy-if(OSX==1006,8,76) skip-if((B2G&&browserIsRemote)||Mulet) == background.html background.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fails-if(B2G||Mulet||Android) skip-if((B2G&&browserIsRemote)||Mulet) == style.html style.html
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+== width-clip.html width-clip.html
+fails-if(B2G||Mulet||Android) == color-inherit.html color-inherit.html
+# Initial mulet triage: parity with B2G/B2G Desktop
diff --git a/layout/reftests/forms/input/file/reftest.list b/layout/reftests/forms/input/file/reftest.list
new file mode 100644
index 000000000..ecb509226
--- /dev/null
+++ b/layout/reftests/forms/input/file/reftest.list
@@ -0,0 +1,7 @@
+fails-if(Android) fuzzy-if(OSX==1006,8,152) == simple.html simple-ref.xul
+fails-if(Android) fuzzy-if(OSX==1006,8,76) == rtl.html rtl-ref.xul
+fails-if(Android) fuzzy-if(OSX==1006,8,152) == size.html simple-ref.xul
+fails-if(Android) fuzzy-if(OSX==1006,8,76) == background.html background-ref.xul
+fails-if(Android) == style.html style-ref.xul
+!= width-clip.html width-clip-ref.html
+fails-if(Android) == color-inherit.html color-inherit-ref.html
diff --git a/layout/reftests/forms/input/file/rtl-ref.xul b/layout/reftests/forms/input/file/rtl-ref.xul
new file mode 100644
index 000000000..eb61d45c7
--- /dev/null
+++ b/layout/reftests/forms/input/file/rtl-ref.xul
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml">
+  <vbox>
+    <html:style>
+      vbox {
+       margin-right: 8px;
+      }
+    </html:style>
+    <html:div dir='rtl'>
+      <html:div class='file' dir='rtl'>
+        <html:button>Browse&#8230;</html:button><label value="No file selected."/>
+      </html:div>
+    </html:div>
+  </vbox>
+</window>
diff --git a/layout/reftests/forms/input/file/rtl.html b/layout/reftests/forms/input/file/rtl.html
new file mode 100644
index 000000000..81e841a12
--- /dev/null
+++ b/layout/reftests/forms/input/file/rtl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div dir='rtl'>
+      <input type='file'>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/simple-ref.xul b/layout/reftests/forms/input/file/simple-ref.xul
new file mode 100644
index 000000000..a9bc3cbd9
--- /dev/null
+++ b/layout/reftests/forms/input/file/simple-ref.xul
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml">
+  <vbox>
+    <html:div class='file'>
+      <html:button>Browse&#8230;</html:button><label value="No file selected."/>
+    </html:div>
+    <html:br/>
+    <html:div class='file'>
+      <html:button>Browse&#8230;</html:button><label value="No files selected."/>
+    </html:div>
+  </vbox>
+</window>
diff --git a/layout/reftests/forms/input/file/simple.html b/layout/reftests/forms/input/file/simple.html
new file mode 100644
index 000000000..03a2a7bde
--- /dev/null
+++ b/layout/reftests/forms/input/file/simple.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type='file'>
+    <br>
+    <input type='file' multiple>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/size.html b/layout/reftests/forms/input/file/size.html
new file mode 100644
index 000000000..33606f935
--- /dev/null
+++ b/layout/reftests/forms/input/file/size.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<!-- size should have no impact on <input type='file'>. -->
+<html>
+  <body>
+    <input type='file' size='5'>
+    <br>
+    <input type='file' multiple size='30'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/style-ref.xul b/layout/reftests/forms/input/file/style-ref.xul
new file mode 100644
index 000000000..20af35b48
--- /dev/null
+++ b/layout/reftests/forms/input/file/style-ref.xul
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="style.css" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml">
+  <hbox>
+    <html:style>
+      .file {
+        background-color: blue;
+        border: 1px red solid;
+        width: 400px;
+        padding: 2px;
+        margin: 5px;
+        display: inline-block;
+      }
+
+      .file > label {
+        /* color only applies to the label */
+        color: white;
+      }
+    </html:style>
+    <html:div class='file'>
+      <html:button>Browse&#8230;</html:button><label value="No file selected."/>
+    </html:div>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/input/file/style.css b/layout/reftests/forms/input/file/style.css
new file mode 100644
index 000000000..18be345bb
--- /dev/null
+++ b/layout/reftests/forms/input/file/style.css
@@ -0,0 +1,61 @@
+vbox, hbox {
+  margin-top: 8px;
+  margin-left: 8px;
+  display: block;
+}
+
+.file {
+  /* Copy of input properties that apply of forms.css below this */
+  color: inherit;
+  font: -moz-field;
+  text-rendering: optimizeLegibility;
+  line-height: normal !important;
+  text-align: start;
+  text-transform: none;
+  word-spacing: normal;
+  letter-spacing: normal;
+  text-indent: 0;
+  -moz-user-select: text;
+  text-shadow: none;
+
+  /* Copy of the type=file part of forms.css below this */
+  display: inline; /* this one isn't really a copy... */
+  white-space: nowrap;
+  overflow:hidden;
+
+  -moz-appearance: none;
+  -moz-binding: none;
+  cursor: default;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+.file > label {
+  display: inline-block;
+
+  /* Copy from forms.css below this */
+  min-width: 12em;
+  padding-inline-start: 5px;
+
+  color: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+
+  direction: ltr !important;
+}
+
+.file[dir='rtl'] > label {
+  /* Copy from forms.css below this */
+  padding-inline-start: 0px;
+  padding-right: 5px;
+  text-align: right;
+}
+
+.file > button {
+  /* Copy from forms.css below this */
+  height: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  cursor: inherit;
+}
diff --git a/layout/reftests/forms/input/file/style.html b/layout/reftests/forms/input/file/style.html
new file mode 100644
index 000000000..76fa4d971
--- /dev/null
+++ b/layout/reftests/forms/input/file/style.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    input {
+      background-color: blue;
+      border: 1px red solid;
+      width: 400px;
+      color: white;
+      padding: 2px;
+      margin: 5px;
+    }
+  </style>
+  <body>
+    <input type='file'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/file/width-clip-ref.html b/layout/reftests/forms/input/file/width-clip-ref.html
new file mode 100644
index 000000000..a6c746ac8
--- /dev/null
+++ b/layout/reftests/forms/input/file/width-clip-ref.html
@@ -0,0 +1,3 @@
+<div style="width: 5px;"><input type="file"></div>
+<div style="width: 500px;"><input type="file"></div>
+
diff --git a/layout/reftests/forms/input/file/width-clip.html b/layout/reftests/forms/input/file/width-clip.html
new file mode 100644
index 000000000..d4acd7e27
--- /dev/null
+++ b/layout/reftests/forms/input/file/width-clip.html
@@ -0,0 +1,3 @@
+<div><input type="file" style="width: 5px"></div>
+<div><input type="file" style="width: 500px"></div>
+
diff --git a/layout/reftests/forms/input/hidden/border.html b/layout/reftests/forms/input/hidden/border.html
new file mode 100644
index 000000000..ce7dcb2ca
--- /dev/null
+++ b/layout/reftests/forms/input/hidden/border.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+<style type="text/css">
+input {
+ display: block;
+ border: 1px solid #000;
+}
+</style>
+</head>
+<body>
+<input type="hidden">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/hidden/reftest-stylo.list b/layout/reftests/forms/input/hidden/reftest-stylo.list
new file mode 100644
index 000000000..db274e45f
--- /dev/null
+++ b/layout/reftests/forms/input/hidden/reftest-stylo.list
@@ -0,0 +1,2 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== border.html border.html
diff --git a/layout/reftests/forms/input/hidden/reftest.list b/layout/reftests/forms/input/hidden/reftest.list
new file mode 100644
index 000000000..64fa2bda5
--- /dev/null
+++ b/layout/reftests/forms/input/hidden/reftest.list
@@ -0,0 +1 @@
+== border.html about:blank
diff --git a/layout/reftests/forms/input/number/focus-handling-ref.html b/layout/reftests/forms/input/number/focus-handling-ref.html
new file mode 100644
index 000000000..e07f83f99
--- /dev/null
+++ b/layout/reftests/forms/input/number/focus-handling-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- In this case we're using reftest-wait to make sure the test doesn't         
+       get snapshotted before it's been focused. We're not testing                 
+       invalidation so we don't need to listen for MozReftestInvalidate.           
+  -->
+  <head>
+    <meta charset="utf-8">
+    <script>
+
+function end() {
+  setTimeout(function() {
+    document.documentElement.className = "";
+  }, 0);
+}
+
+    </script>
+  </head>
+  <body>
+    <input style="-moz-appearance:none;"><br>
+    <input autofocus onfocus="end();"
+           style="-moz-appearance:none;">
+    <!-- div to cover spin box area for type=number to type=text comparison -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/focus-handling.html b/layout/reftests/forms/input/number/focus-handling.html
new file mode 100644
index 000000000..b54f83a56
--- /dev/null
+++ b/layout/reftests/forms/input/number/focus-handling.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- In this case we're using reftest-wait to make sure the test doesn't         
+       get snapshotted before it's been focused. We're not testing                 
+       invalidation so we don't need to listen for MozReftestInvalidate.           
+  -->                                                                              
+  <head>
+    <meta charset="utf-8">
+    <script>
+
+function begin() {
+  document.getElementsByTagName('input')[1].focus();
+}
+
+function end() {
+  setTimeout(function() {
+    document.documentElement.className = "";
+  }, 0);
+}
+
+    </script>
+  </head>
+  <body>
+    <input type='number' autofocus onfocus="begin();"
+           style="-moz-appearance:none;"><br>
+    <input type='number' onfocus="end();"
+           style="-moz-appearance:none;">
+    <!-- div to cover spin box area for type=number to type=text comparison -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="checkbox" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
new file mode 100644
index 000000000..561b39bec
--- /dev/null
+++ b/layout/reftests/forms/input/number/from-number-to-other-type-unthemed-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when switching to another type, the input element should look
+             like that type (not like an input number element) -->
+  <script type="text/javascript">
+    function setToCheckbox()
+    {
+      document.getElementById('i').type='checkbox';
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setToCheckbox);
+  </script>
+  <body>
+    <input type='number' id='i' style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html
new file mode 100644
index 000000000..7f0d427b4
--- /dev/null
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" value="1" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
new file mode 100644
index 000000000..7c5a4dcac
--- /dev/null
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1a-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" value="1" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/number/not-other-type-unthemed-1b-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="checkbox" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-auto-width-1-ref.html b/layout/reftests/forms/input/number/number-auto-width-1-ref.html
new file mode 100644
index 000000000..50b7b7e04
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-auto-width-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" style="-moz-appearance:none; width:auto;">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-auto-width-1.html b/layout/reftests/forms/input/number/number-auto-width-1.html
new file mode 100644
index 000000000..5c9cc0abe
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-auto-width-1.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none; width:auto;">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:2000px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-disabled-ref.html b/layout/reftests/forms/input/number/number-disabled-ref.html
new file mode 100644
index 000000000..f3c9d4d56
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-disabled-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" disabled
+           style="-moz-appearance: none"><!-- Workaround for bug 1223198 -->
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-disabled.html b/layout/reftests/forms/input/number/number-disabled.html
new file mode 100644
index 000000000..b4acb20a7
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-disabled.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" disabled
+           style="-moz-appearance: none"><!-- Workaround for bug 1223198 -->
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-1-ref.html b/layout/reftests/forms/input/number/number-max-height-1-ref.html
new file mode 100644
index 000000000..5f17a6242
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  border: 3px solid black;
+  width: 308px;
+  height: 108px;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-1.html b/layout/reftests/forms/input/number/number-max-height-1.html
new file mode 100644
index 000000000..bf671a0f9
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  border: 3px solid black;
+  padding: 4px;
+  width: 300px;
+  height: 300px;
+  max-height: 100px;
+  box-sizing: content-box;
+  /* hide the spin buttons: */
+  -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+  /* get rid of background gradient for Firefox OS */
+  background-color: transparent ! important;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-2-ref.html b/layout/reftests/forms/input/number/number-max-height-2-ref.html
new file mode 100644
index 000000000..8b654e7f9
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  border: 3px solid black;
+  width: 294px;
+  height: 94px;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-max-height-2.html b/layout/reftests/forms/input/number/number-max-height-2.html
new file mode 100644
index 000000000..ff118ea23
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-max-height-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  border: 3px solid black;
+  padding: 4px;
+  width: 300px;
+  height: 300px;
+  max-height: 100px;
+  box-sizing: border-box;
+  /* hide the spin buttons: */
+  -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+  /* get rid of background gradient for Firefox OS */
+  background-color: transparent ! important;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-1-ref.html b/layout/reftests/forms/input/number/number-min-height-1-ref.html
new file mode 100644
index 000000000..5f17a6242
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  border: 3px solid black;
+  width: 308px;
+  height: 108px;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-1.html b/layout/reftests/forms/input/number/number-min-height-1.html
new file mode 100644
index 000000000..75923b98b
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  border: 3px solid black;
+  padding: 4px;
+  width: 300px;
+  min-height: 100px;
+  box-sizing: content-box;
+  /* hide the spin buttons: */
+  -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+  /* get rid of background gradient for Firefox OS */
+  background-color: transparent ! important;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-2-ref.html b/layout/reftests/forms/input/number/number-min-height-2-ref.html
new file mode 100644
index 000000000..8b654e7f9
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+div {
+  border: 3px solid black;
+  width: 294px;
+  height: 94px;
+}
+
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-min-height-2.html b/layout/reftests/forms/input/number/number-min-height-2.html
new file mode 100644
index 000000000..9f69e1eae
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-min-height-2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  border: 3px solid black;
+  padding: 4px;
+  width: 300px;
+  min-height: 100px;
+  box-sizing: border-box;
+  /* hide the spin buttons: */
+  -moz-appearance: textfield;
+}
+
+* > input[type=number] {
+  /* get rid of background gradient for Firefox OS */
+  background-color: transparent ! important;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-placeholder-ref.html b/layout/reftests/forms/input/number/number-placeholder-ref.html
new file mode 100644
index 000000000..607627243
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-placeholder-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  width: 15em;
+  color: blue;
+  font-style: italic;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number" value="123">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-placeholder.html b/layout/reftests/forms/input/number/number-placeholder.html
new file mode 100644
index 000000000..5018255ca
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-placeholder.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  width: 15em;
+}
+
+input[type=number]::placeholder {
+  color: blue;
+  opacity: 1.0;
+}
+
+input[type=number]::-moz-placeholder {
+  font-style: italic;
+  opacity: 1.0;
+}
+    </style>
+  </head>
+  <body>
+    <input type="number" placeholder="123">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-pseudo-elements-ref.html b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html
new file mode 100644
index 000000000..263aeff1f
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-pseudo-elements-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-pseudo-elements.html b/layout/reftests/forms/input/number/number-pseudo-elements.html
new file mode 100644
index 000000000..33cf40fcf
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-pseudo-elements.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+/* None of these selectors should match from content */
+input[type=number]::-moz-number-wrapper,
+input[type=number]::-moz-number-text,
+input[type=number]::-moz-number-spin-box,
+input[type=number]::-moz-number-spin-up,
+input[type=number]::-moz-number-spin-down {
+  background-color: red;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html b/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html
new file mode 100644
index 000000000..aa58e491e
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-reframe-anon-text-field-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+
+input {
+  font-size: 30pt;
+  background-color: lightblue;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/number-reframe-anon-text-field.html b/layout/reftests/forms/input/number/number-reframe-anon-text-field.html
new file mode 100644
index 000000000..8120b67d6
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-reframe-anon-text-field.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <style>
+
+input {
+  font-size: 30pt;
+  background-color: lightblue;
+}
+
+    </style>
+    <script>
+
+document.addEventListener("DOMContentLoaded", function() {
+  document.body.style.backgroundImage = "none";
+}, false);
+
+function PostRebuildAllStyleDataEvent() {
+  // trigger http://mxr.mozilla.org/mozilla-central/source/layout/base/RestyleManager.cpp?rev=a8b06549f680#1490
+  var m = document.createElementNS("http://www.w3.org/1998/Math/MathML", "math");
+  document.head.appendChild(m);
+  document.head.removeChild(m);
+}
+
+function reframe() {
+  PostRebuildAllStyleDataEvent();
+  document.documentElement.className = "";
+}
+
+document.addEventListener("MozReftestInvalidate", function() {
+  // Calling reframe now would be too early to reproduce the bug that we're
+  // testing for. Note that in the event that we start faling this test this
+  // timeout may make the failure seem intermittent when in fact we would
+  // always fail if it was longer.
+  setTimeout(reframe, 500);
+}, false);
+
+    </script>
+  </head>
+  <body>
+    <input type="number">
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html b/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html
new file mode 100644
index 000000000..ceaa14d85
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-same-as-text-unthemed-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" style="-moz-appearance:none; width:200px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-same-as-text-unthemed.html b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html
new file mode 100644
index 000000000..fddcc33eb
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-same-as-text-unthemed.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none; width:200px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-selected-ref.html b/layout/reftests/forms/input/number/number-selected-ref.html
new file mode 100644
index 000000000..10fea8f47
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-selected-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <script>
+
+document.addEventListener("MozReftestInvalidate", function() {
+  document.getElementById("i").select();
+  document.documentElement.className = "";
+}, false);
+
+    </script>
+  </head>
+  <body>
+    <input id="i" type="text" value="123">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-selected.html b/layout/reftests/forms/input/number/number-selected.html
new file mode 100644
index 000000000..614b12718
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-selected.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <script>
+
+document.addEventListener("MozReftestInvalidate", function() {
+  document.getElementById("i").select();
+  document.documentElement.className = "";
+}, false);
+
+    </script>
+  </head>
+  <body>
+    <input id="i" type="number" value="123">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html b/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html
new file mode 100644
index 000000000..d57683025
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-significant-fractional-digits-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" value="1.00100000000001" style="width:100%;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-significant-fractional-digits.html b/layout/reftests/forms/input/number/number-significant-fractional-digits.html
new file mode 100644
index 000000000..bb1654428
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-significant-fractional-digits.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <script>
+
+document.addEventListener("MozReftestInvalidate", function() {
+  document.getElementById("i").stepUp();
+  document.documentElement.className = "";
+}, false);
+
+    </script>
+  </head>
+  <body>
+    <input id="i" type="number" value="1.001" step="0.00000000000001"
+           style="width:100%;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
new file mode 100644
index 000000000..abb0b240d
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" style="-moz-appearance:none; width:200px;">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
new file mode 100644
index 000000000..79644edc8
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body style="direction: rtl">
+    <input type="text" style="-moz-appearance:none; width:200px;" value="1">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
new file mode 100644
index 000000000..36ffc0629
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-rtl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body style="direction: rtl">
+    <input type="number" style="-moz-appearance:none; width:200px;" value="1">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; right:100px;"></div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
new file mode 100644
index 000000000..6deed4891
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-lr;">
+  <body>
+    <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
new file mode 100644
index 000000000..7a7883062
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-lr;">
+  <body>
+    <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
new file mode 100644
index 000000000..73a537387
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-rl;">
+  <body>
+    <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
new file mode 100644
index 000000000..3bc3a388a
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-rl;">
+  <body>
+    <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
new file mode 100644
index 000000000..f8c2ce65d
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none; width:200px;">
+    <!-- div to cover spin box area -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/pseudo-classes.html b/layout/reftests/forms/input/number/pseudo-classes.html
new file mode 100644
index 000000000..a0c62f721
--- /dev/null
+++ b/layout/reftests/forms/input/number/pseudo-classes.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Test pseudo-classes on number controls</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1250315">
+  <link rel="help" href="https://drafts.csswg.org/selectors-4/#rw-pseudos">
+  <link rel="match" href="about:blank">
+  <style type="text/css">
+body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
+
+#t1:-moz-read-only { display:none; }
+#t1:-moz-read-write { display:block; }
+
+#t2:-moz-read-write { display:none; }
+#t2:-moz-read-only { display:block; }
+
+#t3:disabled { display:none; }
+#t3:enabled { display:block; }
+
+#t4:enabled { display:none; }
+#t4:disabled { display:block; }
+
+  </style>
+</head>
+<body>
+
+<input id=t1 type=number readonly>
+<input id=t2 type=number>
+<input id=t3 type=number disabled>
+<input id=t4 type=number>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/number/reftest-stylo.list b/layout/reftests/forms/input/number/reftest-stylo.list
new file mode 100644
index 000000000..8a10476d7
--- /dev/null
+++ b/layout/reftests/forms/input/number/reftest-stylo.list
@@ -0,0 +1,65 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences pref(dom.forms.number,true)
+
+# sanity checks:
+# not valid on Android/B2G where type=number looks like type=text
+skip skip-if(Android||B2G||Mulet) == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip skip-if(Android||B2G||Mulet) == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+# only valid on Android/B2G where type=number looks the same as type=text
+skip-if(!Android&&!B2G&&!Mulet) == number-same-as-text-unthemed.html number-same-as-text-unthemed.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# should look the same as type=text, except for the spin box
+skip == number-similar-to-text-unthemed.html number-similar-to-text-unthemed.html
+skip == number-similar-to-text-unthemed-rtl.html number-similar-to-text-unthemed-rtl.html
+skip == number-similar-to-text-unthemed-vertical-lr.html number-similar-to-text-unthemed-vertical-lr.html
+skip == number-similar-to-text-unthemed-vertical-rl.html number-similar-to-text-unthemed-vertical-rl.html
+
+# dynamic type changes:
+fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),64,4) fuzzy-if(cocoaWidget,63,4) fuzzy-if(skiaContent,2,5) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1.html
+# skip fuzzy-if(skiaContent,2,5) == from-number-to-other-type-unthemed-1.html from-number-to-other-type-unthemed-1.html
+
+# dynamic value changes:
+# skip fuzzy-if(skiaContent,2,13) == show-value.html show-value.html
+
+# disabled
+skip == number-disabled.html number-disabled.html
+
+# auto width:
+skip == number-auto-width-1.html number-auto-width-1.html
+
+# min-height/max-height tests:
+skip skip-if(B2G||Mulet||Android) == number-min-height-1.html number-min-height-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip skip-if(B2G||Mulet||Android) == number-min-height-2.html number-min-height-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip skip-if(B2G||Mulet||Android) == number-max-height-1.html number-max-height-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip skip-if(B2G||Mulet||Android) == number-max-height-2.html number-max-height-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# number of significant fractional digits:
+skip == number-significant-fractional-digits.html number-significant-fractional-digits.html
+
+# focus
+# autofocus is disabled on B2G
+# https://bugzilla.mozilla.org/show_bug.cgi?id=965763
+# skip skip-if(B2G||Mulet) fuzzy-if(skiaContent,2,5) needs-focus == focus-handling.html focus-handling.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# select
+skip == number-selected.html number-selected.html
+
+# pseudo-elements not usable from content:
+skip == number-pseudo-elements.html number-pseudo-elements.html
+
+skip == number-placeholder.html number-placeholder.html
+
+# check that if the anonymous text control is reframed, we reframe the whole
+# number control (the fuzzy is for the top-right and bottom-left of the border
+# bevel which gets slightly different antialiasing after invalidation):
+skip == number-reframe-anon-text-field.html number-reframe-anon-text-field.html
+
+skip == pseudo-classes.html pseudo-classes.html
diff --git a/layout/reftests/forms/input/number/reftest.list b/layout/reftests/forms/input/number/reftest.list
new file mode 100644
index 000000000..ecf05ce15
--- /dev/null
+++ b/layout/reftests/forms/input/number/reftest.list
@@ -0,0 +1,54 @@
+default-preferences pref(dom.forms.number,true)
+
+# sanity checks:
+# not valid on Android where type=number looks like type=text
+skip-if(Android) != not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html
+skip-if(Android) != not-other-type-unthemed-1.html not-other-type-unthemed-1b-notref.html
+# only valid on Android where type=number looks the same as type=text
+skip-if(!Android) == number-same-as-text-unthemed.html number-same-as-text-unthemed-ref.html
+
+# should look the same as type=text, except for the spin box
+== number-similar-to-text-unthemed.html number-similar-to-text-unthemed-ref.html
+== number-similar-to-text-unthemed-rtl.html number-similar-to-text-unthemed-rtl-ref.html
+== number-similar-to-text-unthemed-vertical-lr.html number-similar-to-text-unthemed-vertical-lr-ref.html
+== number-similar-to-text-unthemed-vertical-rl.html number-similar-to-text-unthemed-vertical-rl-ref.html
+
+# dynamic type changes:
+fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),64,4) fuzzy-if(cocoaWidget,63,4) fuzzy-if(skiaContent,2,5) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1-ref.html
+fuzzy-if(skiaContent,2,5) == from-number-to-other-type-unthemed-1.html from-number-to-other-type-unthemed-1-ref.html
+
+# dynamic value changes:
+fuzzy-if(skiaContent,2,13) == show-value.html show-value-ref.html
+
+# disabled
+== number-disabled.html number-disabled-ref.html
+
+# auto width:
+== number-auto-width-1.html number-auto-width-1-ref.html
+
+# min-height/max-height tests:
+skip-if(Android) == number-min-height-1.html number-min-height-1-ref.html
+skip-if(Android) == number-min-height-2.html number-min-height-2-ref.html
+skip-if(Android) == number-max-height-1.html number-max-height-1-ref.html
+skip-if(Android) == number-max-height-2.html number-max-height-2-ref.html
+
+# number of significant fractional digits:
+== number-significant-fractional-digits.html number-significant-fractional-digits-ref.html
+
+# focus
+fuzzy-if(skiaContent,2,5) needs-focus == focus-handling.html focus-handling-ref.html
+
+# select
+== number-selected.html number-selected-ref.html
+
+# pseudo-elements not usable from content:
+== number-pseudo-elements.html number-pseudo-elements-ref.html
+
+== number-placeholder.html number-placeholder-ref.html
+
+# check that if the anonymous text control is reframed, we reframe the whole
+# number control (the fuzzy is for the top-right and bottom-left of the border
+# bevel which gets slightly different antialiasing after invalidation):
+fuzzy(128,4) == number-reframe-anon-text-field.html number-reframe-anon-text-field-ref.html
+
+== pseudo-classes.html about:blank
diff --git a/layout/reftests/forms/input/number/show-value-ref.html b/layout/reftests/forms/input/number/show-value-ref.html
new file mode 100644
index 000000000..c3d2c5564
--- /dev/null
+++ b/layout/reftests/forms/input/number/show-value-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">                                                         
+    <style>                                                                        
+                                                                                   
+input {                                                                            
+  -moz-appearance: none;                                                           
+}                                                                                  
+                                                                                   
+    </style>                                                                       
+  </head>
+  <body>
+    <input value='142'><br>
+    <input value='142'><br>
+    <input value='142'><br>
+    <input value='142'><br>
+    <input value='142'><br>
+    <form>
+      <input value='142'>
+    </form>
+    <!-- div to cover spin box area for type=number to type=text comparison -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:400px; top:0px; left:100px;">
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/input/number/show-value.html b/layout/reftests/forms/input/number/show-value.html
new file mode 100644
index 000000000..5aae9922e
--- /dev/null
+++ b/layout/reftests/forms/input/number/show-value.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <head>
+    <meta charset="utf-8">
+    <style>
+
+input {
+  -moz-appearance: none;
+}
+
+    </style>
+    <script>
+// Using "142" as the magic number as "1" in a monospace font should not have
+// stray leading or trailing antialised pixels that get clipped unexpectedly.
+
+function run() {
+  var numbers = document.getElementsByTagName('input');
+  numbers[2].style.display = 'inline-block'; // none -> inline-block
+  numbers[3].setAttribute('value', '142');
+  numbers[4].value = '142';
+  numbers[5].varue = '1337'; // deliberately misspelt - should not set value
+  document.forms[0].reset(); // numbers[5] value should be 42 again.
+  document.documentElement.className = '';
+}
+
+document.addEventListener("MozReftestInvalidate", run);
+
+    </script>
+  </head>
+  <body onload="run();">
+    <input type='number' value='142'><br>
+    <input value='142' type='number'><br>
+    <input type='number' value='142' style="display: none;"><br>
+    <input type='number' value='1337'><br>
+    <input type='number' value='1337'><br>
+    <form>
+      <input type='number' value='142'>
+    </form>
+    <!-- div to cover spin box area for type=number to type=text comparison -->
+    <div style="display:block; position:absolute; background-color:black; width:200px; height:400px; top:0px; left:100px;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
new file mode 100644
index 000000000..263aeff1f
--- /dev/null
+++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="number" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
new file mode 100644
index 000000000..b0beffa56
--- /dev/null
+++ b/layout/reftests/forms/input/number/to-number-from-other-type-unthemed-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: input element changed to number state doesn't look like checkbox state -->
+  <script type="text/javascript">
+    function setToNumber()
+    {
+      document.getElementById('i').type='number';
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setToNumber);
+  </script>
+  <body>
+    <input type='checkbox' id='i' style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/percentage/padding-ref.html b/layout/reftests/forms/input/percentage/padding-ref.html
new file mode 100644
index 000000000..31dac1b36
--- /dev/null
+++ b/layout/reftests/forms/input/percentage/padding-ref.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+    <head>
+        <style>
+            .container {
+                width: 400px;
+                background: #ddd;
+            }
+            .text-input {
+                width: 200px; /* 50% */
+                padding: 40px; /* 10% */
+                background: #fff;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <input type="text" class="text-input" />
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/forms/input/percentage/padding.html b/layout/reftests/forms/input/percentage/padding.html
new file mode 100644
index 000000000..7b792595b
--- /dev/null
+++ b/layout/reftests/forms/input/percentage/padding.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+    <head>
+        <style>
+            .container {
+                width: 400px;
+                background: #ddd;
+            }
+            .text-input {
+                width: 50%; /* 200px */
+                padding: 10%; /* 40px */
+                background: #fff;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <input type="text" class="text-input" />
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/forms/input/percentage/reftest-stylo.list b/layout/reftests/forms/input/percentage/reftest-stylo.list
new file mode 100644
index 000000000..6f9069ce2
--- /dev/null
+++ b/layout/reftests/forms/input/percentage/reftest-stylo.list
@@ -0,0 +1,2 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== padding.html padding.html
diff --git a/layout/reftests/forms/input/percentage/reftest.list b/layout/reftests/forms/input/percentage/reftest.list
new file mode 100644
index 000000000..5d9f72902
--- /dev/null
+++ b/layout/reftests/forms/input/percentage/reftest.list
@@ -0,0 +1 @@
+== padding.html padding-ref.html
diff --git a/layout/reftests/forms/input/radio/checked-native-notref.html b/layout/reftests/forms/input/radio/checked-native-notref.html
new file mode 100644
index 000000000..c9483ac05
--- /dev/null
+++ b/layout/reftests/forms/input/radio/checked-native-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio">
diff --git a/layout/reftests/forms/input/radio/checked-native.html b/layout/reftests/forms/input/radio/checked-native.html
new file mode 100644
index 000000000..7e7673afd
--- /dev/null
+++ b/layout/reftests/forms/input/radio/checked-native.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio" checked>
diff --git a/layout/reftests/forms/input/radio/checked-notref.html b/layout/reftests/forms/input/radio/checked-notref.html
new file mode 100644
index 000000000..e30a1ef39
--- /dev/null
+++ b/layout/reftests/forms/input/radio/checked-notref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio" style="-moz-appearance:none">
diff --git a/layout/reftests/forms/input/radio/checked.html b/layout/reftests/forms/input/radio/checked.html
new file mode 100644
index 000000000..37aed5826
--- /dev/null
+++ b/layout/reftests/forms/input/radio/checked.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type="radio" style="-moz-appearance:none" checked>
diff --git a/layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html b/layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html
new file mode 100644
index 000000000..65b31236c
--- /dev/null
+++ b/layout/reftests/forms/input/radio/gtk-theme-width-height-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 932506</title>
+  <style>
+
+input { outline:1px solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="overflow:hidden; width:160px;">
+  <div style="float:left; width:799px; border:1px solid blue;">
+    <input type="radio" checked style="width:400px; visibility:hidden;">
+    <input type="radio" checked style="width:400px; height:100px; visibility:hidden;">
+  </div>
+</div>
+
+
+<input type="radio" checked style="width:400px;"><br>
+<input type="radio" checked style="height:100px;"><br>
+<input type="radio" checked style=""><br>
+
+<input type="radio" checked style="width:400px;"><br>
+<input type="radio" checked style="height:100px;"><br>
+<input type="radio" checked style=""><br>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/radio/gtk-theme-width-height.html b/layout/reftests/forms/input/radio/gtk-theme-width-height.html
new file mode 100644
index 000000000..3c336f2c8
--- /dev/null
+++ b/layout/reftests/forms/input/radio/gtk-theme-width-height.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 932506</title>
+  <style>
+
+input { outline:1px solid black; }
+
+</style>
+</head>
+<body>
+
+<div style="overflow:hidden; width:160px;">
+  <div style="float:left; width:799px; border:1px solid blue;">
+    <input type="radio" checked style="width:400px; outline:none;">
+    <input type="radio" checked style="width:400px; height:100px; outline:none;">
+  </div>
+</div>
+
+<input type="radio" checked style="width:400px; height:1px;"><br>
+<input type="radio" checked style="width:1px; height:100px;"><br>
+<input type="radio" checked style="width:1px; height:1px;"><br>
+
+<input type="radio" checked style="width:400px; height:0;"><br>
+<input type="radio" checked style="width:0; height:100px;"><br>
+<input type="radio" checked style="width:0; height:0;"><br>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/radio/label-dynamic-ref.html b/layout/reftests/forms/input/radio/label-dynamic-ref.html
new file mode 100644
index 000000000..5b0501bb8
--- /dev/null
+++ b/layout/reftests/forms/input/radio/label-dynamic-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+
+.hideradios input {
+  display: none;
+}
+
+label[for="a2"],
+label[for="b2"] {
+  background-color: yellow;
+}
+
+</style>
+
+</head>
+
+<body>
+
+<div>
+<div><input type="radio" name="a" id="a1"><label for="a1">radio #a1</label></div>
+<div><input type="radio" name="a" id="a2" checked><label for="a2">radio #a2</label></div>
+<div><input type="radio" name="a" id="a3"><label for="a3">radio #a3</label></div>
+<div><input type="radio" name="a" id="a4"><label for="a4">radio #a4</label></div>
+<div><input type="radio" name="a" id="a5"><label for="a5">radio #a5</label></div>
+</div>
+
+<div class="hideradios">
+<div><input type="radio" name="b" id="b1"><label for="b1">radio #b1</label></div>
+<div><input type="radio" name="b" id="b2" checked><label for="b2">radio #b2</label></div>
+<div><input type="radio" name="b" id="b3"><label for="b3">radio #b3</label></div>
+<div><input type="radio" name="b" id="b4"><label for="b4">radio #b4</label></div>
+<div><input type="radio" name="b" id="b5"><label for="b5">radio #b5</label></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/radio/label-dynamic.html b/layout/reftests/forms/input/radio/label-dynamic.html
new file mode 100644
index 000000000..143a0fb6d
--- /dev/null
+++ b/layout/reftests/forms/input/radio/label-dynamic.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+
+.hideradios input {
+  display: none;
+}
+
+input:checked + label {
+  background-color: yellow;
+}
+
+</style>
+
+<script type="text/javascript">
+
+function chooseSecondItems()
+{
+  document.getElementById("a2").checked = true;
+  document.getElementById("b2").checked = true;
+}
+
+</script>
+</head>
+
+<body onload="chooseSecondItems();">
+
+<div>
+<div><input type="radio" name="a" id="a1"><label for="a1">radio #a1</label></div>
+<div><input type="radio" name="a" id="a2"><label for="a2">radio #a2</label></div>
+<div><input type="radio" name="a" id="a3"><label for="a3">radio #a3</label></div>
+<div><input type="radio" name="a" id="a4" checked><label for="a4">radio #a4</label></div>
+<div><input type="radio" name="a" id="a5"><label for="a5">radio #a5</label></div>
+</div>
+
+<div class="hideradios">
+<div><input type="radio" name="b" id="b1"><label for="b1">radio #b1</label></div>
+<div><input type="radio" name="b" id="b2"><label for="b2">radio #b2</label></div>
+<div><input type="radio" name="b" id="b3"><label for="b3">radio #b3</label></div>
+<div><input type="radio" name="b" id="b4" checked><label for="b4">radio #b4</label></div>
+<div><input type="radio" name="b" id="b5"><label for="b5">radio #b5</label></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/input/radio/reftest-stylo.list b/layout/reftests/forms/input/radio/reftest-stylo.list
new file mode 100644
index 000000000..7f7adc33b
--- /dev/null
+++ b/layout/reftests/forms/input/radio/reftest-stylo.list
@@ -0,0 +1,10 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== label-dynamic.html label-dynamic.html
+== checked.html checked.html
+== checked-native.html checked-native.html
+== checked.html checked.html
+== checked-notref.html checked-notref.html
+== checked-native.html checked-native.html
+== checked-native-notref.html checked-native-notref.html
+skip-if(!gtkWidget||Mulet) == gtk-theme-width-height.html gtk-theme-width-height.html
+# bug 1141511: Disable some gtkWidget-dependant reftests on Mulet
diff --git a/layout/reftests/forms/input/radio/reftest.list b/layout/reftests/forms/input/radio/reftest.list
new file mode 100644
index 000000000..1aaec422d
--- /dev/null
+++ b/layout/reftests/forms/input/radio/reftest.list
@@ -0,0 +1,8 @@
+== label-dynamic.html label-dynamic-ref.html
+!= checked.html checked-notref.html
+!= checked-native.html checked-native-notref.html
+!= checked.html about:blank
+!= checked-notref.html about:blank
+!= checked-native.html about:blank
+!= checked-native-notref.html about:blank
+skip-if(!gtkWidget) == gtk-theme-width-height.html gtk-theme-width-height-ref.html
diff --git a/layout/reftests/forms/input/range/100pct-common-ref.html b/layout/reftests/forms/input/range/100pct-common-ref.html
new file mode 100644
index 000000000..ef65c9297
--- /dev/null
+++ b/layout/reftests/forms/input/range/100pct-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type=range value=100 max=100>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/75pct-common-ref.html b/layout/reftests/forms/input/range/75pct-common-ref.html
new file mode 100644
index 000000000..929887d65
--- /dev/null
+++ b/layout/reftests/forms/input/range/75pct-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type=range value=75>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
new file mode 100644
index 000000000..a4b73e23a
--- /dev/null
+++ b/layout/reftests/forms/input/range/75pct-unthemed-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type=range value=75 style="-moz-appearance:none">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
new file mode 100644
index 000000000..3103fc721
--- /dev/null
+++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="range" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
new file mode 100644
index 000000000..d9514542f
--- /dev/null
+++ b/layout/reftests/forms/input/range/different-fraction-of-range-unthemed-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: that range with value=70 is different to the default value=50. -->
+  <body>
+    <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/direction-unthemed-1-ref.html b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html
new file mode 100644
index 000000000..f2758db17
--- /dev/null
+++ b/layout/reftests/forms/input/range/direction-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type='range' value=30 style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/direction-unthemed-1.html b/layout/reftests/forms/input/range/direction-unthemed-1.html
new file mode 100644
index 000000000..162d55504
--- /dev/null
+++ b/layout/reftests/forms/input/range/direction-unthemed-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: that direction:rtl behaves correctly -->
+  <body>
+    <input type='range' value=70 style="-moz-appearance:none; direction:rtl;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="checkbox" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
new file mode 100644
index 000000000..0e1fffaf1
--- /dev/null
+++ b/layout/reftests/forms/input/range/from-range-to-other-type-unthemed-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when switching to another type, the input element should look
+             like that type (not like an input range element) -->
+  <script type="text/javascript">
+    function setToCheckbox()
+    {
+      document.getElementById('i').type='checkbox';
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setToCheckbox);
+  </script>
+  <body>
+    <input type='range' id='i' style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/max-prop.html b/layout/reftests/forms/input/range/max-prop.html
new file mode 100644
index 000000000..18a018330
--- /dev/null
+++ b/layout/reftests/forms/input/range/max-prop.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'max' IDL property, the thumb of the range
+             should be moved to the appropriate position. This test also
+             sets the max to less than the current value which checks that the
+             rendering code handles repositioning correctly in the case that
+             sanitization of the value is needed for a non-value change. -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').max = "10";
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' max=100>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-1-ref.html b/layout/reftests/forms/input/range/moz-range-progress-1-ref.html
new file mode 100644
index 000000000..73af6dcb0
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test ::-moz-range-progress</title>
+    <style>
+
+div {
+  margin: 0;
+  padding: 0;
+}
+
+.range {
+  display: inline-block;
+  position: relative;
+  width: 200px;
+  height: 20px;
+  background-color: blue;
+}
+
+.range-progress {
+  display: inline-block;
+  position: absolute;
+  top: 5px;
+  width: 50px;
+  height: 10px;
+  background-color: lime;
+}
+
+    </style>
+  </head>
+  <body>
+    <div class="range">
+      <div class="range-progress"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-1.html b/layout/reftests/forms/input/range/moz-range-progress-1.html
new file mode 100644
index 000000000..8adc10112
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test ::-moz-range-progress</title>
+    <style>
+
+input[type=range] {
+  width: 200px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  background-color: blue;
+}
+
+input[type=range]::-moz-range-progress {
+  height: 10px;
+  background-color: lime;
+}
+
+input[type=range]::-moz-range-track,
+input[type=range]::-moz-range-thumb {
+  visibility: hidden;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type=range value=25>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-2-ref.html b/layout/reftests/forms/input/range/moz-range-progress-2-ref.html
new file mode 100644
index 000000000..fd914edfd
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-2-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test ::-moz-range-progress</title>
+    <style>
+
+input[type=range] {
+  width: 200px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+  border: 0;
+  height: 10px;
+  background-color: lime;
+}
+
+input[type=range]::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 0;
+  background-image: none;
+  background-color: yellow;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type=range value=0>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-2.html b/layout/reftests/forms/input/range/moz-range-progress-2.html
new file mode 100644
index 000000000..ffe43266c
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test ::-moz-range-progress</title>
+    <style>
+
+input[type=range] {
+  width: 200px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+  border: 0;
+  height: 10px;
+  background-color: lime;
+}
+
+input[type=range]::-moz-range-progress {
+  height: 10px;
+  background-color: red;
+}
+
+input[type=range]::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 0;
+  background-image: none;
+  background-color: yellow;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type=range value=0>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-3-ref.html b/layout/reftests/forms/input/range/moz-range-progress-3-ref.html
new file mode 100644
index 000000000..623f60810
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-3-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test ::-moz-range-progress</title>
+    <style>
+
+input[type=range] {
+  width: 200px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+  border: 0;
+  height: 10px;
+  background-color: lime;
+}
+
+input[type=range]::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 0;
+  background-image: none;
+  background-color: yellow;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type=range value=100>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/moz-range-progress-3.html b/layout/reftests/forms/input/range/moz-range-progress-3.html
new file mode 100644
index 000000000..365c62c99
--- /dev/null
+++ b/layout/reftests/forms/input/range/moz-range-progress-3.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test ::-moz-range-progress</title>
+    <style>
+
+input[type=range] {
+  width: 200px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  background-color: blue;
+}
+
+input[type=range]::-moz-range-track {
+  border: 0;
+  height: 10px;
+  background-color: red;
+}
+
+input[type=range]::-moz-range-progress {
+  height: 10px;
+  background-color: lime;
+}
+
+input[type=range]::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 0;
+  background-image: none;
+  background-color: yellow;
+}
+
+    </style>
+  </head>
+  <body>
+    <input type=range value=100>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html
new file mode 100644
index 000000000..3103fc721
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="range" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
new file mode 100644
index 000000000..24dccffea
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1a-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
new file mode 100644
index 000000000..8bf48f7e9
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1b-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" value="50" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
new file mode 100644
index 000000000..ffb5ffa58
--- /dev/null
+++ b/layout/reftests/forms/input/range/not-other-type-unthemed-1c-notref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="checkbox" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/range-orient-block.html b/layout/reftests/forms/input/range/range-orient-block.html
new file mode 100644
index 000000000..df4a3e250
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=block max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html b/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html
new file mode 100644
index 000000000..01fe1f75c
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=horizontal max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/input/range/range-orient-horizontal.html b/layout/reftests/forms/input/range/range-orient-horizontal.html
new file mode 100644
index 000000000..be7bb4b0b
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=horizontal max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-orient-inline.html b/layout/reftests/forms/input/range/range-orient-inline.html
new file mode 100644
index 000000000..ef1012bd4
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-orient-vertical-rtl.html b/layout/reftests/forms/input/range/range-orient-vertical-rtl.html
new file mode 100644
index 000000000..205e7de02
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=vertical max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/input/range/range-orient-vertical.html b/layout/reftests/forms/input/range/range-orient-vertical.html
new file mode 100644
index 000000000..321822f2b
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-block.html b/layout/reftests/forms/input/range/range-vlr-orient-block.html
new file mode 100644
index 000000000..b2d009bd8
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=block max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html b/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html
new file mode 100644
index 000000000..406eb646e
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=horizontal max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-inline.html b/layout/reftests/forms/input/range/range-vlr-orient-inline.html
new file mode 100644
index 000000000..c505ad8af
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr-orient-vertical.html b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html
new file mode 100644
index 000000000..c6ad0c16b
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vlr.html b/layout/reftests/forms/input/range/range-vlr.html
new file mode 100644
index 000000000..38fde6556
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-lr" max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-block.html b/layout/reftests/forms/input/range/range-vrl-orient-block.html
new file mode 100644
index 000000000..07edd1258
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=block max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html b/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html
new file mode 100644
index 000000000..66637c652
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=horizontal max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-inline.html b/layout/reftests/forms/input/range/range-vrl-orient-inline.html
new file mode 100644
index 000000000..035c56b07
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=inline max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl-orient-vertical.html b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html
new file mode 100644
index 000000000..1f5a73201
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" orient=vertical max=100 value=70>
diff --git a/layout/reftests/forms/input/range/range-vrl.html b/layout/reftests/forms/input/range/range-vrl.html
new file mode 100644
index 000000000..e1ac59cc6
--- /dev/null
+++ b/layout/reftests/forms/input/range/range-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<input type=range style="writing-mode:vertical-rl" max=100 value=70>
diff --git a/layout/reftests/forms/input/range/reftest-stylo.list b/layout/reftests/forms/input/range/reftest-stylo.list
new file mode 100644
index 000000000..776a29fb2
--- /dev/null
+++ b/layout/reftests/forms/input/range/reftest-stylo.list
@@ -0,0 +1,54 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+
+# sanity checks:
+skip == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+skip == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+skip == not-other-type-unthemed-1.html not-other-type-unthemed-1.html
+
+# dynamic type changes:
+fuzzy-if(skiaContent,1,40) == to-range-from-other-type-unthemed-1.html to-range-from-other-type-unthemed-1.html
+== from-range-to-other-type-unthemed-1.html from-range-to-other-type-unthemed-1.html
+
+# for different values:
+== different-fraction-of-range-unthemed-1.html different-fraction-of-range-unthemed-1.html
+== same-fraction-of-range-unthemed-1.html same-fraction-of-range-unthemed-1.html
+
+# dynamic value changes:
+fails fuzzy-if(skiaContent,1,40) == value-prop-unthemed.html value-prop-unthemed.html
+== value-prop.html value-prop.html
+fails fuzzy-if(skiaContent,1,40) == valueAsNumber-prop-unthemed.html valueAsNumber-prop-unthemed.html
+== valueAsNumber-prop.html valueAsNumber-prop.html
+fails fuzzy-if(B2G,2,1) fuzzy-if(skiaContent,1,40) == stepDown-unthemed.html stepDown-unthemed.html
+fuzzy-if(B2G,2,1) == stepDown.html stepDown.html
+fails fuzzy-if(skiaContent,1,40) == stepUp-unthemed.html stepUp-unthemed.html
+== stepUp.html stepUp.html
+fuzzy-if(B2G,2,1) == max-prop.html max-prop.html
+skip == reset-value.html reset-value.html
+
+# 'direction' property:
+== direction-unthemed-1.html direction-unthemed-1.html
+
+# ::-moz-range-progress pseudo-element:
+fails-if(B2G||Mulet||Android) == moz-range-progress-1.html moz-range-progress-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== moz-range-progress-2.html moz-range-progress-2.html
+== moz-range-progress-3.html moz-range-progress-3.html
+
+# Tests for block and inline orientation in combination with writing-mode
+# XXX Remove default-preferences setting here after bug 1138384 makes
+#     it the default for all channels
+
+== range-orient-horizontal.html range-orient-horizontal.html
+== range-orient-horizontal.html range-orient-horizontal.html
+== range-orient-block.html range-orient-block.html
+== range-orient-inline.html range-orient-inline.html
+== range-vlr.html range-vlr.html
+== range-vlr-orient-block.html range-vlr-orient-block.html
+== range-vlr-orient-inline.html range-vlr-orient-inline.html
+== range-vlr-orient-horizontal.html range-vlr-orient-horizontal.html
+== range-vlr-orient-vertical.html range-vlr-orient-vertical.html
+== range-vrl.html range-vrl.html
+== range-vrl-orient-block.html range-vrl-orient-block.html
+== range-vrl-orient-inline.html range-vrl-orient-inline.html
+== range-vrl-orient-horizontal.html range-vrl-orient-horizontal.html
+== range-vrl-orient-vertical.html range-vrl-orient-vertical.html
diff --git a/layout/reftests/forms/input/range/reftest.list b/layout/reftests/forms/input/range/reftest.list
new file mode 100644
index 000000000..8c2c231a3
--- /dev/null
+++ b/layout/reftests/forms/input/range/reftest.list
@@ -0,0 +1,49 @@
+
+# sanity checks:
+!= not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html
+!= not-other-type-unthemed-1.html not-other-type-unthemed-1b-notref.html
+!= not-other-type-unthemed-1.html not-other-type-unthemed-1c-notref.html
+
+# dynamic type changes:
+fuzzy-if(skiaContent,1,40) == to-range-from-other-type-unthemed-1.html to-range-from-other-type-unthemed-1-ref.html
+== from-range-to-other-type-unthemed-1.html from-range-to-other-type-unthemed-1-ref.html
+
+# for different values:
+!= different-fraction-of-range-unthemed-1.html different-fraction-of-range-unthemed-1-notref.html
+== same-fraction-of-range-unthemed-1.html same-fraction-of-range-unthemed-1-ref.html
+
+# dynamic value changes:
+fuzzy-if(skiaContent,1,40) == value-prop-unthemed.html 75pct-unthemed-common-ref.html
+== value-prop.html 75pct-common-ref.html
+fuzzy-if(skiaContent,1,40) == valueAsNumber-prop-unthemed.html 75pct-unthemed-common-ref.html
+== valueAsNumber-prop.html 75pct-common-ref.html
+fuzzy-if(skiaContent,1,40) == stepDown-unthemed.html 75pct-unthemed-common-ref.html
+== stepDown.html 75pct-common-ref.html
+fuzzy-if(skiaContent,1,40) == stepUp-unthemed.html 75pct-unthemed-common-ref.html
+== stepUp.html 75pct-common-ref.html
+== max-prop.html 100pct-common-ref.html
+== reset-value.html reset-value-ref.html
+
+# 'direction' property:
+== direction-unthemed-1.html direction-unthemed-1-ref.html
+
+# ::-moz-range-progress pseudo-element:
+fails-if(Android) == moz-range-progress-1.html moz-range-progress-1-ref.html
+== moz-range-progress-2.html moz-range-progress-2-ref.html
+== moz-range-progress-3.html moz-range-progress-3-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= range-orient-horizontal.html range-orient-vertical.html
+!= range-orient-horizontal.html range-orient-horizontal-rtl.html
+== range-orient-block.html range-orient-vertical.html
+== range-orient-inline.html range-orient-horizontal.html
+== range-vlr.html range-orient-vertical.html
+== range-vlr-orient-block.html range-orient-horizontal.html
+== range-vlr-orient-inline.html range-orient-vertical.html
+== range-vlr-orient-horizontal.html range-orient-horizontal.html
+== range-vlr-orient-vertical.html range-orient-vertical.html
+== range-vrl.html range-orient-vertical-rtl.html
+== range-vrl-orient-block.html range-orient-horizontal-rtl.html
+== range-vrl-orient-inline.html range-orient-vertical-rtl.html
+== range-vrl-orient-horizontal.html range-orient-horizontal-rtl.html
+== range-vrl-orient-vertical.html range-orient-vertical-rtl.html
diff --git a/layout/reftests/forms/input/range/reset-value-ref.html b/layout/reftests/forms/input/range/reset-value-ref.html
new file mode 100644
index 000000000..74675c2d7
--- /dev/null
+++ b/layout/reftests/forms/input/range/reset-value-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <title>1080352</title>
+  </head>
+  <body>
+    <form id="form">
+      <input id='inputRange' type='range' step='10' min='0' max='50' value='20'><br>
+      <input id='inputNumber' type='number' step='10' min='0' max='500' value='30'><br>
+      
+      <input type='reset'><br>
+    </form>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/reset-value.html b/layout/reftests/forms/input/range/reset-value.html
new file mode 100644
index 000000000..2ccb36765
--- /dev/null
+++ b/layout/reftests/forms/input/range/reset-value.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <title>1080352</title>
+  </head>
+  <body onload="inputRange.value=40;inputNumber.value=40; form.reset()">
+    <form id="form">
+      <input id='inputRange' type='range' step='10' min='0' max='50' value='20'><br>
+      <input id='inputNumber' type='number' step='10' min='0' max='500' value='30'><br>
+      
+      <input type='reset'><br>
+    </form>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
new file mode 100644
index 000000000..6aefd17bc
--- /dev/null
+++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="range" value=70 style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
new file mode 100644
index 000000000..3c9f0e7ce
--- /dev/null
+++ b/layout/reftests/forms/input/range/same-fraction-of-range-unthemed-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: that range with value=90,min=90,max=120 looks the same as range
+       with value=70 (also tests that it doesn't look like type=text, since the
+       text displayed would be different in the type=text case). -->
+  <body>
+    <input type='range' style="-moz-appearance:none;" value=90 min=20 max=120>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepDown-unthemed.html b/layout/reftests/forms/input/range/stepDown-unthemed.html
new file mode 100644
index 000000000..6d4d6708a
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepDown-unthemed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').stepDown();
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+  </script>
+  <body>
+    <input type=range id='i' value=100 step=25 style='-moz-appearance:none'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepDown.html b/layout/reftests/forms/input/range/stepDown.html
new file mode 100644
index 000000000..e482af490
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepDown.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').stepDown();
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+  </script>
+  <body>
+    <input type=range id='i' value=100 step=25>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepUp-unthemed.html b/layout/reftests/forms/input/range/stepUp-unthemed.html
new file mode 100644
index 000000000..1e4198cc6
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepUp-unthemed.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').stepUp();
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/stepUp.html b/layout/reftests/forms/input/range/stepUp.html
new file mode 100644
index 000000000..139e6c797
--- /dev/null
+++ b/layout/reftests/forms/input/range/stepUp.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').stepUp();
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
new file mode 100644
index 000000000..3103fc721
--- /dev/null
+++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="range" style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
new file mode 100644
index 000000000..86ff0c521
--- /dev/null
+++ b/layout/reftests/forms/input/range/to-range-from-other-type-unthemed-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: input element changed to range state doesn't look like checkbox state -->
+  <script type="text/javascript">
+    function setToRange()
+    {
+      document.getElementById('i').type='range';
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setToRange);
+  </script>
+  <body>
+    <input type='checkbox' id='i' style="-moz-appearance:none;">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/value-prop-unthemed.html b/layout/reftests/forms/input/range/value-prop-unthemed.html
new file mode 100644
index 000000000..46387af2e
--- /dev/null
+++ b/layout/reftests/forms/input/range/value-prop-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').value = "75";
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/value-prop.html b/layout/reftests/forms/input/range/value-prop.html
new file mode 100644
index 000000000..66be83704
--- /dev/null
+++ b/layout/reftests/forms/input/range/value-prop.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').value = "75";
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
new file mode 100644
index 000000000..a2a6eb6cc
--- /dev/null
+++ b/layout/reftests/forms/input/range/valueAsNumber-prop-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').valueAsNumber = 75;
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/range/valueAsNumber-prop.html b/layout/reftests/forms/input/range/valueAsNumber-prop.html
new file mode 100644
index 000000000..c00fe8bf4
--- /dev/null
+++ b/layout/reftests/forms/input/range/valueAsNumber-prop.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').valueAsNumber = 75;
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/reftest-stylo.list b/layout/reftests/forms/input/reftest-stylo.list
new file mode 100644
index 000000000..c3ab90d2c
--- /dev/null
+++ b/layout/reftests/forms/input/reftest-stylo.list
@@ -0,0 +1,14 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+include checkbox/reftest-stylo.list
+include email/reftest-stylo.list
+include tel/reftest-stylo.list
+include search/reftest-stylo.list
+include url/reftest-stylo.list
+include number/reftest-stylo.list
+include file/reftest-stylo.list
+include radio/reftest-stylo.list
+include range/reftest-stylo.list
+include text/reftest-stylo.list
+include percentage/reftest-stylo.list
+include hidden/reftest-stylo.list
+include color/reftest-stylo.list
diff --git a/layout/reftests/forms/input/reftest.list b/layout/reftests/forms/input/reftest.list
new file mode 100644
index 000000000..7de1175ef
--- /dev/null
+++ b/layout/reftests/forms/input/reftest.list
@@ -0,0 +1,14 @@
+include checkbox/reftest.list
+include email/reftest.list
+include tel/reftest.list
+include search/reftest.list
+include url/reftest.list
+include number/reftest.list
+include file/reftest.list
+include radio/reftest.list
+include range/reftest.list
+include text/reftest.list
+include percentage/reftest.list
+include hidden/reftest.list
+include color/reftest.list
+include datetime/reftest.list
diff --git a/layout/reftests/forms/input/search/1.html b/layout/reftests/forms/input/search/1.html
new file mode 100644
index 000000000..93bdd26b0
--- /dev/null
+++ b/layout/reftests/forms/input/search/1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: input element in search state looks like in text state -->
+  <body>
+    <input type="search">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/search/2.html b/layout/reftests/forms/input/search/2.html
new file mode 100644
index 000000000..9c1f4151a
--- /dev/null
+++ b/layout/reftests/forms/input/search/2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: input element in search state looks like in text state -->
+  <script type="text/javascript">
+    function setToSearch()
+    {
+      document.getElementById('i').type = 'search';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setToSearch(); disableReftestWait();">
+    <input type='checkbox' id='i'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/search/3.html b/layout/reftests/forms/input/search/3.html
new file mode 100644
index 000000000..2e4ce9c8b
--- /dev/null
+++ b/layout/reftests/forms/input/search/3.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when switching to another type, the input element should not look
+             like an input search element -->
+  <script type="text/javascript">
+    function setToCheckbox()
+    {
+      document.getElementById('i').type = 'checkbox';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setToCheckbox(); disableReftestWait();">
+    <input type='search' id='i'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/search/ref.html b/layout/reftests/forms/input/search/ref.html
new file mode 100644
index 000000000..07e5eee7e
--- /dev/null
+++ b/layout/reftests/forms/input/search/ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/search/reftest-stylo.list b/layout/reftests/forms/input/search/reftest-stylo.list
new file mode 100644
index 000000000..021c5f861
--- /dev/null
+++ b/layout/reftests/forms/input/search/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== 1.html 1.html
+== 2.html 2.html
+== 3.html 3.html
diff --git a/layout/reftests/forms/input/search/reftest.list b/layout/reftests/forms/input/search/reftest.list
new file mode 100644
index 000000000..dcca7a3cd
--- /dev/null
+++ b/layout/reftests/forms/input/search/reftest.list
@@ -0,0 +1,3 @@
+== 1.html ref.html
+== 2.html ref.html
+!= 3.html ref.html
diff --git a/layout/reftests/forms/input/tel/1.html b/layout/reftests/forms/input/tel/1.html
new file mode 100644
index 000000000..4a034de07
--- /dev/null
+++ b/layout/reftests/forms/input/tel/1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: input element in telephone state looks like in text state -->
+  <body>
+    <input type="tel">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/tel/2.html b/layout/reftests/forms/input/tel/2.html
new file mode 100644
index 000000000..47b530bfe
--- /dev/null
+++ b/layout/reftests/forms/input/tel/2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: input element in telephone state looks like in text state -->
+  <script type="text/javascript">
+    function setToTel()
+    {
+      document.getElementById('i').type='tel';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setToTel(); disableReftestWait();">
+    <input type='checkbox' id='i'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/tel/3.html b/layout/reftests/forms/input/tel/3.html
new file mode 100644
index 000000000..c1348e6f7
--- /dev/null
+++ b/layout/reftests/forms/input/tel/3.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when switching to another type, the input element should not look
+             like an input tel element -->
+  <script type="text/javascript">
+    function setToCheckbox()
+    {
+      document.getElementById('i').type='checkbox';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setToCheckbox(); disableReftestWait();">
+    <input type='tel' id='i'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/tel/ref.html b/layout/reftests/forms/input/tel/ref.html
new file mode 100644
index 000000000..07e5eee7e
--- /dev/null
+++ b/layout/reftests/forms/input/tel/ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/tel/reftest-stylo.list b/layout/reftests/forms/input/tel/reftest-stylo.list
new file mode 100644
index 000000000..021c5f861
--- /dev/null
+++ b/layout/reftests/forms/input/tel/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== 1.html 1.html
+== 2.html 2.html
+== 3.html 3.html
diff --git a/layout/reftests/forms/input/tel/reftest.list b/layout/reftests/forms/input/tel/reftest.list
new file mode 100644
index 000000000..dcca7a3cd
--- /dev/null
+++ b/layout/reftests/forms/input/tel/reftest.list
@@ -0,0 +1,3 @@
+== 1.html ref.html
+== 2.html ref.html
+!= 3.html ref.html
diff --git a/layout/reftests/forms/input/text/baseline-1-ref.html b/layout/reftests/forms/input/text/baseline-1-ref.html
new file mode 100644
index 000000000..427911eb0
--- /dev/null
+++ b/layout/reftests/forms/input/text/baseline-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+  <title>Text baseline positioning reference</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <style type="text/css">
+    @font-face {
+      font-family: "MarkA";
+      src: url(../fonts/markA.ttf);
+    }
+    input {
+      font-family: "MarkA", sans-serif;
+      font-size: 32px;
+    }
+  </style>
+</head>
+<body>
+  <input size="2" value="AAAAAAAA">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/baseline-1.html b/layout/reftests/forms/input/text/baseline-1.html
new file mode 100644
index 000000000..59e92018b
--- /dev/null
+++ b/layout/reftests/forms/input/text/baseline-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+  <title>Text baseline positioning test</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <!--
+      The primary font MarkA has a small line height.  The fallback font
+      (used for the character '1') will probably have a maximum ascent
+      greater than the ascent plus half leading of MarkA, but this
+      should not adversly affect the positioning of characters from the
+      primary font.  Currently the maximum ascent of the fallback font
+      has no effect on the position, but if a future implementation
+      considers the fallback font in the position, this test may need to
+      be modified to accommodate.
+    -->
+  <style type="text/css">
+    @font-face {
+      font-family: "MarkA";
+      src: url(../fonts/markA.ttf);
+    }
+    input {
+      font-family: "MarkA", sans-serif;
+      font-size: 32px;
+    }
+  </style>
+</head>
+<body>
+  <input size="2" value="AAAAAAAA1">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/bounds-1-ref.html b/layout/reftests/forms/input/text/bounds-1-ref.html
new file mode 100644
index 000000000..14d39ba72
--- /dev/null
+++ b/layout/reftests/forms/input/text/bounds-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Reference for bug 806583 test</title>
+  <style>
+    body { background: blue }
+  </style>
+</head>
+<body>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/bounds-1.html b/layout/reftests/forms/input/text/bounds-1.html
new file mode 100644
index 000000000..4af490dce
--- /dev/null
+++ b/layout/reftests/forms/input/text/bounds-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test for bug 806583</title>
+  <style>
+    body, div { background: blue }
+    div { position: fixed; }
+  </style>
+</head>
+<body>
+  <input id="input">
+  <div id="cover"/>
+  <script>
+var rect = document.getElementById("input").getBoundingClientRect();
+var cover = document.getElementById("cover");
+cover.style.left = rect.left + "px";
+cover.style.top = rect.top + "px";
+cover.style.width = rect.width + "px";
+cover.style.height = rect.height + "px";
+  </script>
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/centering-1-ref.xul b/layout/reftests/forms/input/text/centering-1-ref.xul
new file mode 100644
index 000000000..f1bf3e49c
--- /dev/null
+++ b/layout/reftests/forms/input/text/centering-1-ref.xul
@@ -0,0 +1,28 @@
+<?xml version="1.0"?>
+<window title="Text input text centering reference"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <html:style type="text/css">
+    @font-face {
+      font-family: "Ahem";
+      src: url(../fonts/Ahem.ttf);
+    }
+    hbox {
+      height: 128px;
+      background-color: white;
+    }
+    input {
+      height: 64px;
+      background-color: white;
+      border: none;
+      margin: 0px;
+      padding: 0px;
+      font-family: "Ahem", sans-serif;
+      font-size: 32px;
+    }
+  </html:style>
+
+  <hbox align="center">
+    <html:input value="Ahem"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/centering-1.xul b/layout/reftests/forms/input/text/centering-1.xul
new file mode 100644
index 000000000..dc72bda55
--- /dev/null
+++ b/layout/reftests/forms/input/text/centering-1.xul
@@ -0,0 +1,39 @@
+<?xml version="1.0"?>
+<window title="Text input text centering test"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <!--
+
+      There is no spec that says where text within an html text input element
+      should be placed, but some sort of centering reduces the likelihood or
+      extent of clipping.
+
+      This test uses a font where every character used has an ascent and
+      descent equal to typographical ascent of the font.  This makes it
+      unlikely that using a different concept of centering will change the
+      results of this test.
+
+    -->
+  <html:style type="text/css">
+    @font-face {
+      font-family: "Ahem";
+      src: url(../fonts/Ahem.ttf);
+    }
+    hbox {
+      height: 128px;
+      background-color: white;
+    }
+    input {
+      background-color: white;
+      border: none;
+      margin: 0px;
+      padding: 0px;
+      font-family: "Ahem", sans-serif;
+      font-size: 32px;
+    }
+  </html:style>
+
+  <hbox align="stretch">
+    <html:input value="Ahem"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/dynamic-height-1-ref.xul b/layout/reftests/forms/input/text/dynamic-height-1-ref.xul
new file mode 100644
index 000000000..7b82803e0
--- /dev/null
+++ b/layout/reftests/forms/input/text/dynamic-height-1-ref.xul
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <hbox align="stretch">
+    <box style="height: 5em"/>
+    <html:input value="YO"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/dynamic-height-1.xul b/layout/reftests/forms/input/text/dynamic-height-1.xul
new file mode 100644
index 000000000..f95469f19
--- /dev/null
+++ b/layout/reftests/forms/input/text/dynamic-height-1.xul
@@ -0,0 +1,23 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml"
+	onload="onLoad();">
+  <script type="application/javascript">
+<![CDATA[
+    function onLoad()
+    {
+      var adjust = document.getElementById("adjust");
+      flush();
+      adjust.style.height = "5em";
+    }
+
+    function flush() { document.documentElement.getBoundingClientRect(); }
+
+]]>
+  </script>
+  <hbox align="stretch">
+    <box id="adjust"/>
+    <html:input id="input" value="YO"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/input/text/intrinsic-size-ref.html b/layout/reftests/forms/input/text/intrinsic-size-ref.html
new file mode 100644
index 000000000..2735336e3
--- /dev/null
+++ b/layout/reftests/forms/input/text/intrinsic-size-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Intrinsic Size Test Reference</title>
+        <style>input, textarea { border-radius:0; background:none; border:none; }</style>
+    </head>
+    <body>
+        <div>
+            <span style="border:2px solid black; padding-left:200px"><input style="background-color:transparent; border:none; font-family:monospace"/></span>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/forms/input/text/intrinsic-size.html b/layout/reftests/forms/input/text/intrinsic-size.html
new file mode 100644
index 000000000..ef5c3da83
--- /dev/null
+++ b/layout/reftests/forms/input/text/intrinsic-size.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Intrinsic Size Test</title>
+	<style>input, textarea { border-radius:0; background:none; border:none; }</style>
+    </head>
+    <body>
+        <div>
+            <span style="border:2px solid black"><input style="background-color:transparent; border:none; font-family:monospace; padding-left:201px"/></span>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/forms/input/text/line-height-0.5.html b/layout/reftests/forms/input/text/line-height-0.5.html
new file mode 100644
index 000000000..e60a5f3a8
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-0.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 0.5 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/line-height-1.0.html b/layout/reftests/forms/input/text/line-height-1.0.html
new file mode 100644
index 000000000..52a0fde6c
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-1.0.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.0 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/line-height-1.5.html b/layout/reftests/forms/input/text/line-height-1.5.html
new file mode 100644
index 000000000..4363b09a2
--- /dev/null
+++ b/layout/reftests/forms/input/text/line-height-1.5.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<style>
+
+input { line-height: 1.5 }
+
+</style>
+<input type="text" value="text input" size="20">
diff --git a/layout/reftests/forms/input/text/reftest-stylo.list b/layout/reftests/forms/input/text/reftest-stylo.list
new file mode 100644
index 000000000..86f890acd
--- /dev/null
+++ b/layout/reftests/forms/input/text/reftest-stylo.list
@@ -0,0 +1,16 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== bounds-1.html bounds-1.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,121,84) == size-1.html size-1.html
+skip-if(B2G||Mulet) == size-2.html size-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+HTTP(..) == baseline-1.html baseline-1.html
+skip-if((B2G&&browserIsRemote)||Mulet) HTTP(..) == centering-1.xul centering-1.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if((B2G&&browserIsRemote)||Mulet) == dynamic-height-1.xul dynamic-height-1.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(skiaContent,1,500) needs-focus == select.html select.html
+== intrinsic-size.html intrinsic-size.html
+== line-height-0.5.html line-height-0.5.html
+== line-height-1.5.html line-height-1.5.html
diff --git a/layout/reftests/forms/input/text/reftest.list b/layout/reftests/forms/input/text/reftest.list
new file mode 100644
index 000000000..7f75af36a
--- /dev/null
+++ b/layout/reftests/forms/input/text/reftest.list
@@ -0,0 +1,10 @@
+== bounds-1.html bounds-1-ref.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,140,111) == size-1.html size-1-ref.html
+== size-2.html size-2-ref.html
+HTTP(..) == baseline-1.html baseline-1-ref.html
+HTTP(..) == centering-1.xul centering-1-ref.xul
+== dynamic-height-1.xul dynamic-height-1-ref.xul
+fuzzy-if(skiaContent,1,500) needs-focus == select.html select-ref.html
+== intrinsic-size.html intrinsic-size-ref.html
+== line-height-0.5.html line-height-1.0.html
+!= line-height-1.5.html line-height-1.0.html
diff --git a/layout/reftests/forms/input/text/select-ref.html b/layout/reftests/forms/input/text/select-ref.html
new file mode 100644
index 000000000..added237c
--- /dev/null
+++ b/layout/reftests/forms/input/text/select-ref.html
@@ -0,0 +1,18 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function finishTest() {
+        document.documentElement.removeAttribute("class");
+      }
+      function runTest() {
+        var field = document.getElementById('field');
+        field.focus();
+        field.select();
+        setTimeout(finishTest, 0);
+       }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <input id="field" type="text" value="1234">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/text/select.html b/layout/reftests/forms/input/text/select.html
new file mode 100644
index 000000000..eba0c3824
--- /dev/null
+++ b/layout/reftests/forms/input/text/select.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+  <head>
+    <script type="text/javascript">
+      function finishTest() {
+        document.documentElement.removeAttribute("class");
+      }
+      function runTest() {
+        var field = document.getElementById('field');
+        field.focus();
+        field.disabled = true;
+        field.setSelectionRange(0, 4);
+        field.disabled = false;
+        field.select();
+        setTimeout(finishTest, 0);
+       }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <input id="field" type="text" value="1234">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/text/size-1-ref.html b/layout/reftests/forms/input/text/size-1-ref.html
new file mode 100644
index 000000000..c9a480358
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-1-ref.html
@@ -0,0 +1,3 @@
+<html lang="en">
+  <input size="4" value="1234" style="font-family: monospace">
+</html>
diff --git a/layout/reftests/forms/input/text/size-1.html b/layout/reftests/forms/input/text/size-1.html
new file mode 100644
index 000000000..e0390261d
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-1.html
@@ -0,0 +1,3 @@
+<html lang="en">
+  <input size="4" value="1234|6" style="font-family: monospace">
+</html>
diff --git a/layout/reftests/forms/input/text/size-2-ref.html b/layout/reftests/forms/input/text/size-2-ref.html
new file mode 100644
index 000000000..94512260b
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-2-ref.html
@@ -0,0 +1,5 @@
+<html lang="en">
+<body style="background-color:white;">
+  <input size="40" value="1234" style="background-color:white; color:black; font-family: monospace; border: none">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/text/size-2.html b/layout/reftests/forms/input/text/size-2.html
new file mode 100644
index 000000000..7353238f7
--- /dev/null
+++ b/layout/reftests/forms/input/text/size-2.html
@@ -0,0 +1,5 @@
+<html lang="en">
+<body style="background-color:white;">
+  <input size="4"  value="1234" style="background-color:white; color:black; font-family: monospace; border: none">
+</body>
+</html>
diff --git a/layout/reftests/forms/input/url/1.html b/layout/reftests/forms/input/url/1.html
new file mode 100644
index 000000000..a2ce658b4
--- /dev/null
+++ b/layout/reftests/forms/input/url/1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: input element in url state looks like in text state -->
+  <body>
+    <input type="url">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/url/2.html b/layout/reftests/forms/input/url/2.html
new file mode 100644
index 000000000..58302d278
--- /dev/null
+++ b/layout/reftests/forms/input/url/2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: input element in url state looks like in text state -->
+  <script type="text/javascript">
+    function setToURL()
+    {
+      document.getElementById('i').type = 'url';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setToURL(); disableReftestWait();">
+    <input type='checkbox' id='i'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/url/3.html b/layout/reftests/forms/input/url/3.html
new file mode 100644
index 000000000..b9f13924a
--- /dev/null
+++ b/layout/reftests/forms/input/url/3.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when switching to another type, the input element should not look
+             like an input url element -->
+  <script type="text/javascript">
+    function setToCheckbox()
+    {
+      document.getElementById('i').type='checkbox';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setToCheckbox(); disableReftestWait();">
+    <input type='url' id='i'>
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/url/ref.html b/layout/reftests/forms/input/url/ref.html
new file mode 100644
index 000000000..07e5eee7e
--- /dev/null
+++ b/layout/reftests/forms/input/url/ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text">
+  </body>
+</html>
diff --git a/layout/reftests/forms/input/url/reftest-stylo.list b/layout/reftests/forms/input/url/reftest-stylo.list
new file mode 100644
index 000000000..021c5f861
--- /dev/null
+++ b/layout/reftests/forms/input/url/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== 1.html 1.html
+== 2.html 2.html
+== 3.html 3.html
diff --git a/layout/reftests/forms/input/url/reftest.list b/layout/reftests/forms/input/url/reftest.list
new file mode 100644
index 000000000..dcca7a3cd
--- /dev/null
+++ b/layout/reftests/forms/input/url/reftest.list
@@ -0,0 +1,3 @@
+== 1.html ref.html
+== 2.html ref.html
+!= 3.html ref.html
diff --git a/layout/reftests/forms/legend/1273433-ref.html b/layout/reftests/forms/legend/1273433-ref.html
new file mode 100644
index 000000000..6c28a9f0c
--- /dev/null
+++ b/layout/reftests/forms/legend/1273433-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1273433</title>
+    <style type="text/css">
+
+html,body {
+    color:black; background-color:white; font-size:12px; padding:0; margin:0;
+}
+	
+fieldset { border: 1px solid black; }
+.v { writing-mode: vertical-lr; height:300px; float:left; }
+legend { width: 100px; border:1px solid blue; }
+.v legend, .rl legend { width: auto; height: 100px; }
+.rtl { direction:rtl; }
+.ltr { direction:ltr; }
+
+    </style>
+</head>
+<body>
+
+<fieldset align="left"><legend>(unset)</legend></fieldset>
+<fieldset><legend align="left">left</legend></fieldset>
+<fieldset class="rtl"><legend style="text-align:left">right</legend></fieldset>
+
+<fieldset><legend align="right" style="text-align:right">(unset)</legend><div class=rtl>RTL</div></fieldset>
+<fieldset><legend align="left" style="text-align:right">left</legend><div class=rtl>RTL</div></fieldset>
+<fieldset><legend align="right" style="text-align:right">right</legend><div class=rtl>RTL</div></fieldset>
+
+<fieldset><legend>left</legend><div class=rtl>RTL</div></fieldset>
+<fieldset><legend align="right" style="text-align:left">right</legend><div class=rtl>RTL</div></fieldset>
+
+<fieldset><legend align="left">bottom</legend></fieldset>
+<fieldset><legend align="left">top</legend></fieldset>
+
+<fieldset class="v"><legend align="left">(unset)</legend></fieldset>
+<fieldset class="v"><legend align="left">left</legend></fieldset>
+<fieldset class="v rtl"><legend style="text-align:left">right</legend></fieldset>
+
+<fieldset class="v"><legend align="right" style="text-align:right">(unset)</legend><div class=rtl>RTL</div></fieldset>
+<fieldset class="v"><legend align="left" style="text-align:right">left</legend><div class=rtl>RTL</div></fieldset>
+<fieldset class="v"><legend align="right" style="text-align:right">right</legend><div class=rtl>RTL</div></fieldset>
+
+<fieldset class="v"><legend>left</legend><div class=rtl>RTL</div></fieldset>
+<fieldset class="v"><legend align="right" style="text-align:left">right</legend><div class=rtl>RTL</div></fieldset>
+
+<fieldset class="v"><legend align="left">bottom</legend></fieldset>
+<fieldset class="v"><legend align="left">top</legend></fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/1273433.html b/layout/reftests/forms/legend/1273433.html
new file mode 100644
index 000000000..beb1b0907
--- /dev/null
+++ b/layout/reftests/forms/legend/1273433.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase for bug 1273433</title>
+    <style type="text/css">
+
+html,body {
+    color:black; background-color:white; font-size:12px; padding:0; margin:0;
+}
+	
+fieldset { border: 1px solid black; }
+.v { writing-mode: vertical-lr; height:300px; float:left; }
+legend { width: 100px; border:1px solid blue; }
+.v legend, .rl legend { width: auto; height: 100px; }
+.rtl { direction:rtl; }
+.ltr { direction:ltr; }
+
+    </style>
+</head>
+<body>
+
+<fieldset><legend>(unset)</legend></fieldset>
+<fieldset><legend align="left">left</legend></fieldset>
+<fieldset><legend align="right">right</legend></fieldset>
+
+<fieldset class="rtl"><legend>(unset)</legend>RTL</fieldset>
+<fieldset class="rtl"><legend align="left">left</legend>RTL</fieldset>
+<fieldset class="rtl"><legend align="right">right</legend>RTL</fieldset>
+
+<fieldset class="rtl"><legend class="ltr" align="left">left</legend>RTL</fieldset>
+<fieldset class="rtl"><legend class="ltr" align="right">right</legend>RTL</fieldset>
+
+<fieldset><legend align="bottom">bottom</legend></fieldset>
+<fieldset><legend align="top">top</legend></fieldset>
+
+<fieldset class="v"><legend>(unset)</legend></fieldset>
+<fieldset class="v"><legend align="left">left</legend></fieldset>
+<fieldset class="v"><legend align="right">right</legend></fieldset>
+
+<fieldset class="v rtl"><legend>(unset)</legend>RTL</fieldset>
+<fieldset class="v rtl"><legend align="left">left</legend>RTL</fieldset>
+<fieldset class="v rtl"><legend align="right">right</legend>RTL</fieldset>
+
+<fieldset class="v rtl"><legend class="ltr" align="left">left</legend>RTL</fieldset>
+<fieldset class="v rtl"><legend class="ltr" align="right">right</legend>RTL</fieldset>
+
+<fieldset class="v"><legend align="bottom">bottom</legend></fieldset>
+<fieldset class="v"><legend align="top">top</legend></fieldset>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/legend-ref.html b/layout/reftests/forms/legend/legend-ref.html
new file mode 100644
index 000000000..8238e239f
--- /dev/null
+++ b/layout/reftests/forms/legend/legend-ref.html
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html><head>
+    <title>Testcase for bug 740743</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+fieldset { padding: 2px; }
+legend { padding: 0; }
+span { background: lime; display: block;}
+legend > span {
+   padding-left: 2px;
+   padding-right: 2px;
+}
+
+.s10 { width:10px; height:10px; }
+.h10 { height:10px; }
+.w50 { width:50px; }
+.hidden { overflow:hidden; }
+.scroll { overflow:scroll; }
+.auto { overflow:auto; }
+
+.o { text-overflow: ellipsis; }
+
+#inline span { display:inline; }
+#inline-block span { display:inline-block; }
+
+    </style>
+</head>
+<body>
+
+<fieldset><legend><span class="hidden s10"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="scroll s10">Legend Test</span></legend></fieldset>
+<fieldset><legend><span class="auto s10">Legend Test</span></legend></fieldset>
+<fieldset><legend><span class="hidden w50"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="scroll w50">Legend Test</span></legend></fieldset>
+<fieldset><legend><span class="auto w50"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="hidden">Legend Test</span></legend></fieldset>
+<fieldset><legend><span class="auto"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="auto"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="auto"><b>Legend Test</b></span></legend></fieldset>
+
+<fieldset><legend><span class="hidden w50 o"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend><span class="hidden w50 o">Test Legend</span></legend></fieldset>
+<fieldset><legend><span class="hidden o">Test Legend</span></legend></fieldset>
+<fieldset><legend><span class="auto w50 o"><b>Legend Test</b></span></legend></fieldset>
+<fieldset><legend align="right"><span class="hidden w50 o">Test Legend</span></legend></fieldset>
+<fieldset><legend align="center"><span class="hidden w50 o">Test Legend</span></legend></fieldset>
+
+<div id="inline">
+<span class="hidden s10"><b>Legend Test</b></span>
+<span class="scroll s10">Legend Test</span>
+<span class="auto s10">Legend Test</span>
+<span class="hidden w50"><b>Legend Test</b></span>
+<span class="scroll w50">Legend Test</span>
+<span class="auto w50"><b>Legend Test</b></span>
+<span class="hidden">Legend Test</span>
+<span class="auto"><b>Legend Test</b></span>
+
+<span class="hidden w50 o"><b>Legend Test</b></span>
+<span class="hidden w50 o">Test Legend</span>
+<span class="hidden o">Test Legend</span>
+<span class="auto w50 o"><b>Legend Test</b></span>
+<span class="hidden w50 o">Test Legend</span>
+<span class="hidden w50 o">Test Legend</span>
+</div>
+
+<div id="inline-block">
+<span class="hidden s10"><b>Legend Test</b></span>
+<span class="scroll s10">Legend Test</span>
+<span class="auto s10">Legend Test</span>
+<span class="hidden w50"><b>Legend Test</b></span>
+<span class="scroll w50">Legend Test</span>
+<span class="auto w50"><b>Legend Test</b></span>
+<span class="hidden">Legend Test</span>
+<span class="auto"><b>Legend Test</b></span>
+<span class="auto"><b>Legend Test</b></span>
+
+<span class="hidden w50 o"><b>Legend Test</b></span>
+<span class="hidden w50 o">Test Legend</span>
+<span class="hidden o">Test Legend</span>
+<span class="auto w50 o"><b>Legend Test</b></span>
+<span class="hidden w50 o">Test Legend</span>
+<span class="hidden w50 o">Test Legend</span>
+</div>
+
+<span class="auto w50"><b>Legend Test</b></span>
+<span><b>Legend Test</b></span>
+<span><b>Legend Test</b></span>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/legend.html b/layout/reftests/forms/legend/legend.html
new file mode 100644
index 000000000..9d05fbe6a
--- /dev/null
+++ b/layout/reftests/forms/legend/legend.html
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html><head>
+    <title>Testcase for bug 740743</title>
+    <style type="text/css">
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+fieldset { padding: 2px; }
+legend { background: lime; }
+.s10 { width:10px; height:10px; }
+.h10 { height:10px; }
+.w50 { width:50px; }
+.hidden { overflow:hidden; }
+.scroll { overflow:scroll; }
+.auto { overflow:auto; }
+
+.o { text-overflow: ellipsis; }
+
+#inline legend { display:inline; }
+#inline-block legend { display:inline-block; }
+    </style>
+</head>
+<body>
+
+<fieldset><legend class="hidden s10"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="scroll s10">Legend Test</legend></fieldset>
+<fieldset><legend class="auto s10">Legend Test</legend></fieldset>
+<fieldset><legend class="hidden w50"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="scroll w50">Legend Test</legend></fieldset>
+<fieldset><legend class="auto w50"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="hidden">Legend Test</legend></fieldset>
+<fieldset><legend class="auto"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="auto" style="width:auto"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend style="width:auto"><b>Legend Test</b></legend></fieldset>
+
+<fieldset><legend class="hidden w50 o"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="hidden w50 o">Test Legend</legend></fieldset>
+<fieldset><legend class="hidden o">Test Legend</legend></fieldset>
+<fieldset><legend class="auto w50 o"><b>Legend Test</b></legend></fieldset>
+<fieldset><legend class="hidden w50 o" align="right">Test Legend</legend></fieldset>
+<fieldset><legend class="hidden w50 o" align="center">Test Legend</legend></fieldset>
+
+<div id="inline">
+<legend class="hidden s10"><b>Legend Test</b></legend>
+<legend class="scroll s10">Legend Test</legend>
+<legend class="auto s10">Legend Test</legend>
+<legend class="hidden w50"><b>Legend Test</b></legend>
+<legend class="scroll w50">Legend Test</legend>
+<legend class="auto w50"><b>Legend Test</b></legend>
+<legend class="hidden">Legend Test</legend>
+<legend class="auto"><b>Legend Test</b></legend>
+
+<legend class="hidden w50 o"><b>Legend Test</b></legend>
+<legend class="hidden w50 o">Test Legend</legend>
+<legend class="hidden o">Test Legend</legend>
+<legend class="auto w50 o"><b>Legend Test</b></legend>
+<legend class="hidden w50 o" align="right">Test Legend</legend>
+<legend class="hidden w50 o" align="center">Test Legend</legend>
+</div>
+
+<div id="inline-block">
+<legend class="hidden s10"><b>Legend Test</b></legend>
+<legend class="scroll s10">Legend Test</legend>
+<legend class="auto s10">Legend Test</legend>
+<legend class="hidden w50"><b>Legend Test</b></legend>
+<legend class="scroll w50">Legend Test</legend>
+<legend class="auto w50"><b>Legend Test</b></legend>
+<legend class="hidden">Legend Test</legend>
+<legend class="auto"><b>Legend Test</b></legend>
+<legend class="auto" style="width:auto"><b>Legend Test</b></legend>
+
+<legend class="hidden w50 o"><b>Legend Test</b></legend>
+<legend class="hidden w50 o">Test Legend</legend>
+<legend class="hidden o">Test Legend</legend>
+<legend class="auto w50 o"><b>Legend Test</b></legend>
+<legend class="hidden w50 o" align="right">Test Legend</legend>
+<legend class="hidden w50 o" align="center">Test Legend</legend>
+</div>
+
+<legend class="auto w50"><b>Legend Test</b></legend>
+<legend class="auto" zstyle="width:auto"><b>Legend Test</b></legend>
+<legend style="width:auto"><b>Legend Test</b></legend>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/legend/reftest-stylo.list b/layout/reftests/forms/legend/reftest-stylo.list
new file mode 100644
index 000000000..e622ffda4
--- /dev/null
+++ b/layout/reftests/forms/legend/reftest-stylo.list
@@ -0,0 +1,5 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip-if(B2G||Mulet) == legend.html legend.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip == shadow-dom.html shadow-dom.html
+== 1273433.html 1273433.html
diff --git a/layout/reftests/forms/legend/reftest.list b/layout/reftests/forms/legend/reftest.list
new file mode 100644
index 000000000..879835a59
--- /dev/null
+++ b/layout/reftests/forms/legend/reftest.list
@@ -0,0 +1,3 @@
+== legend.html legend-ref.html
+fuzzy-if(skiaContent,1,7) pref(dom.webcomponents.enabled,true) == shadow-dom.html shadow-dom-ref.html
+== 1273433.html 1273433-ref.html
diff --git a/layout/reftests/forms/legend/shadow-dom-ref.html b/layout/reftests/forms/legend/shadow-dom-ref.html
new file mode 100644
index 000000000..472d33acf
--- /dev/null
+++ b/layout/reftests/forms/legend/shadow-dom-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+  <head>
+  <title>Test LEGEND placed into FIELDSET shadow DOM</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140579">
+<style>
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+.inline { display:inline; }
+z,.b { color:blue; }
+</style>
+  </head>
+  <body>
+    <fieldset id="host1"><legend>1</legend>a c</fieldset>
+    <fieldset id="host2"><legend>2</legend>a c</fieldset>
+    <fieldset id="host3"><legend>3</legend>a c</fieldset>
+    <fieldset id="host4"><legend>4</legend>a c</fieldset>
+    <fieldset id="host5"><legend>5</legend>a c</fieldset>
+    <fieldset id="host6"><legend class="b">6</legend>a c</fieldset>
+    <fieldset id="host7"><legend>7</legend>a <legend class="inline">L</legend> B</fieldset>
+    <fieldset id="host8"><legend>a 8</legend>A <legend class="inline">L c</legend> B</fieldset>
+    <fieldset id="host9"><legend>a 9</legend>A <legend class="inline p0">a L2 c</legend><z>a<legend>L3</legend>c</z> B</fieldset>
+  </body>
+</html>
diff --git a/layout/reftests/forms/legend/shadow-dom.html b/layout/reftests/forms/legend/shadow-dom.html
new file mode 100644
index 000000000..ad7babcf7
--- /dev/null
+++ b/layout/reftests/forms/legend/shadow-dom.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait" lang="en-US">
+  <head>
+  <title>Test LEGEND placed into FIELDSET shadow DOM</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140579">
+  <link rel="match" href="shadow-dom-ref.html">
+<style>
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+.before::before {content: "a ";}
+.after::after {content: " c";}
+div.before::before {content: "X ";}
+div.after::after {content: " Y";}
+.b,.c { display:contents; }
+</style>
+  </head>
+  <body>
+    <fieldset id="host1" class="before"></fieldset>
+    <fieldset id="host2"></fieldset>
+    <fieldset id="host3" class="after"></fieldset>
+    <fieldset id="host4" class="before after"></fieldset>
+    <fieldset id="host5" class="after"></fieldset>
+    <fieldset id="host6" class="before"></fieldset>
+    <fieldset id="host7"></fieldset>
+    <fieldset id="host8"></fieldset>
+    <fieldset id="host9"></fieldset>
+
+   <script>
+      function shadow(id) {
+        return document.getElementById(id).createShadowRoot();
+      }
+      function legend(s) {
+        var e = document.createElement("legend");
+        var t = document.createTextNode(s);
+        e.appendChild(t);
+        return e;
+      }
+      function contents(n) {
+        var e = document.createElement("z");
+        e.style.display = "contents";
+        e.style.color = "blue"; 
+        if (n) e.appendChild(n);
+        return e;
+      }
+
+      document.body.offsetHeight;
+
+      shadow("host1").innerHTML = '<content></content> c';
+      shadow("host2").innerHTML = 'a <content></content> c';
+      shadow("host3").innerHTML = 'a <content></content>';
+      shadow("host4").innerHTML = '<content></content>';
+      shadow("host5").innerHTML = 'a <content></content>';
+      shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c';
+      shadow("host7").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B';
+      shadow("host8").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
+      shadow("host9").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>';
+
+      function tweak() {
+        document.body.offsetHeight;
+
+        host1.appendChild(legend("1"));
+        host2.appendChild(legend("2"));
+        host3.appendChild(legend("3"));
+        host4.appendChild(legend("4"));
+
+        var e = legend("5");
+        e.style.display = "contents";
+        host5.appendChild(e);
+
+        host6.appendChild(legend("6"));
+
+        var e = legend("L");
+        e.className = "b";
+        host7.appendChild(e);
+        var e = legend("7");
+        e.className = "c";
+        host7.appendChild(e);
+
+        var e = legend("L");
+        e.className = "b after";
+        host8.appendChild(e);
+        var e = legend("8");
+        e.className = "c  before";
+        host8.appendChild(e);
+
+        var e = legend("L2");
+        e.className = "b before after";
+        host9.appendChild(e);
+        var e = contents(legend(" L3"));
+        e.className = "b before after";
+        host9.appendChild(e);
+        var e = legend("9");
+        e.className = "c  before";
+        host9.appendChild(e);
+
+        document.body.offsetHeight;
+        setTimeout(function() {
+            document.body.offsetHeight;
+            document.documentElement.removeAttribute("class");
+          },0);
+      }
+
+      window.addEventListener("MozReftestInvalidate", tweak, false);
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-ref.html
new file mode 100644
index 000000000..c9576fc40
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-ref.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) > .meter-bar { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) > .meter-bar { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) > .meter-bar { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) > .meter-bar { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) > .meter-bar { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) > .meter-bar { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) > .meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) > .meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) > .meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) > .meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) > .meter-bar { margin: 200px; padding: 0px; }
+    body > div:nth-child(16) > .meter-bar { margin: 0px; padding: 200px; }
+    /* 15 - 18 should have 100% width, no need to specify. */
+  </style>
+  <body>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html
new file mode 100644
index 000000000..ba9b6c8f3
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(2) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(3) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(4) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    /* 15 - 18 should have 100% width, no need to specify. */
+  </style>
+  <body dir='rtl'>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-rtl.html b/layout/reftests/forms/meter/bar-pseudo-element-rtl.html
new file mode 100644
index 000000000..22f5462df
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-rtl.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > meter:nth-child(1)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > meter:nth-child(2)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > meter:nth-child(3)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > meter:nth-child(4)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > meter:nth-child(5)::-moz-meter-bar { width: 1000px; }
+    body > meter:nth-child(6)::-moz-meter-bar { width: 10px; }
+    body > meter:nth-child(7)::-moz-meter-bar { width: 10%; }
+    body > meter:nth-child(8)::-moz-meter-bar { width: 200%; }
+  </style>
+  <body dir='rtl'>
+    <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <!-- Those will be used to change width. -->
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html
new file mode 100644
index 000000000..90e269ef1
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    .meter-element { margin: 10px; }
+    body > div:nth-child(1) > .meter-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(2) > .meter-bar { width: -moz-calc(100% + 8px); }
+    body > div:nth-child(3) > .meter-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px);
+											  width: -moz-calc(100% + 8px); }
+    body > div:nth-child(4) > .meter-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
+    body > div:nth-child(5) > .meter-bar { }
+    body > div:nth-child(6) > .meter-bar { height: -moz-calc(100% - 10px); }
+    body > div:nth-child(7) > .meter-bar { position: relative; left: 10px; }
+    body > div:nth-child(8) > .meter-bar { }
+    body > div:nth-child(9) > .meter-bar { width: -moz-calc(100% + 10px); }
+    body > div:nth-child(10) > .meter-bar { }
+    body > div:nth-child(11) > .meter-bar { width: -moz-calc(100% + 10px); }
+    /* 12 - 15 should have 100% width, no need to specify. */
+    body > div:nth-child(16) > .meter-bar { position: relative; top: 64px; left: 64px;
+                                               height: -moz-calc(100% + 32px + 16px);
+                                               width: -moz-calc(100% + 128px + 16px - 1em); }
+  </style>
+  <body>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html
new file mode 100644
index 000000000..e98c140f8
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    .meter-element { margin: 10px; }
+    body > div:nth-child(1) > .meter-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(2) > .meter-bar { position: relative; left: 8px;
+	                                          width: -moz-calc(100% + 8px); }
+    body > div:nth-child(3) > .meter-bar { position: relative; top: 4px; left: 12px;
+                                              height: -moz-calc(100% - 8px);
+											  width: -moz-calc(100% + 8px); }
+    body > div:nth-child(4) > .meter-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
+    body > div:nth-child(5) > .meter-bar { }
+    body > div:nth-child(6) > .meter-bar { height: -moz-calc(100% - 10px); }
+    body > div:nth-child(7) > .meter-bar { position: relative; left: 10px; }
+    body > div:nth-child(8) > .meter-bar { }
+    body > div:nth-child(9) > .meter-bar { position: relative; left: 10px;
+	                                          width: -moz-calc(100% + 10px); }
+    body > div:nth-child(10) > .meter-bar { }
+    body > div:nth-child(11) > .meter-bar { position: relative; left: 10px;
+	                                          width: -moz-calc(100% + 10px); }
+    /* 12 - 15 should have 100% width, no need to specify. */
+    body > div:nth-child(16) > .meter-bar { position: relative; top: 64px; left: 192px;
+                                               height: -moz-calc(100% + 64px - 1em); 
+								               width: -moz-calc(100% + 128px); }
+  </style>
+  <body dir='rtl'>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html
new file mode 100644
index 000000000..b865133a8
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter {
+      margin: 10px;
+      -moz-orient: vertical;
+    }
+    body > meter:nth-child(1)::-moz-meter-bar { margin: 4px; padding: 0px; }
+    body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 4px; }
+    body > meter:nth-child(3)::-moz-meter-bar { margin: 4px; padding: 4px; }
+    body > meter:nth-child(4)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > meter:nth-child(5)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > meter:nth-child(6)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > meter:nth-child(7)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > meter:nth-child(8)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > meter:nth-child(9)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > meter:nth-child(10)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > meter:nth-child(12)::-moz-meter-bar { height: 1000px; }
+    body > meter:nth-child(13)::-moz-meter-bar { height: 10px; }
+    body > meter:nth-child(14)::-moz-meter-bar { height: 10%; }
+    body > meter:nth-child(15)::-moz-meter-bar { height: 200%; }
+    body > meter:nth-child(16)::-moz-meter-bar { margin: 64px; padding: 64px; }
+  </style>
+  <body dir='rtl'>
+    <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <!-- Those will be used to change width. -->
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical.html
new file mode 100644
index 000000000..a2ab3222e
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter {
+      margin: 10px;
+      -moz-orient: vertical;
+    }
+    body > meter:nth-child(1)::-moz-meter-bar { margin: 4px; padding: 0px; }
+    body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 4px; }
+    body > meter:nth-child(3)::-moz-meter-bar { margin: 4px; padding: 4px; }
+    body > meter:nth-child(4)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > meter:nth-child(5)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > meter:nth-child(6)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > meter:nth-child(7)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > meter:nth-child(8)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > meter:nth-child(9)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > meter:nth-child(10)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > meter:nth-child(12)::-moz-meter-bar { height: 1000px; }
+    body > meter:nth-child(13)::-moz-meter-bar { height: 10px; }
+    body > meter:nth-child(14)::-moz-meter-bar { height: 10%; }
+    body > meter:nth-child(15)::-moz-meter-bar { height: 200%; }
+    body > meter:nth-child(16)::-moz-meter-bar { margin: 64px; padding: 64px; }
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <!-- Those will be used to change width. -->
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element.html b/layout/reftests/forms/meter/bar-pseudo-element.html
new file mode 100644
index 000000000..821a44961
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > meter:nth-child(1)::-moz-meter-bar { margin: 10px; padding: 0px; }
+    body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 10px; }
+    body > meter:nth-child(3)::-moz-meter-bar { margin: 10px; padding: 10px; }
+    body > meter:nth-child(4)::-moz-meter-bar { margin: 5px; padding: 5px; }
+    body > meter:nth-child(5)::-moz-meter-bar { margin: 50px; padding: 50px; }
+    body > meter:nth-child(6)::-moz-meter-bar { margin: 100px; padding: 100px; }
+    body > meter:nth-child(7)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > meter:nth-child(8)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > meter:nth-child(9)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > meter:nth-child(10)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > meter:nth-child(12)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > meter:nth-child(13)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > meter:nth-child(14)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > meter:nth-child(15)::-moz-meter-bar { margin: 200px; padding: 0px; }
+    body > meter:nth-child(16)::-moz-meter-bar { margin: 0px; padding: 200px; }
+    body > meter:nth-child(17)::-moz-meter-bar { width: 1000px; }
+    body > meter:nth-child(18)::-moz-meter-bar { width: 10px; }
+    body > meter:nth-child(19)::-moz-meter-bar { width: 10%; }
+    body > meter:nth-child(20)::-moz-meter-bar { width: 200%; }
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <!-- Those will be used to change width. -->
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/block-invalidate-ref.html b/layout/reftests/forms/meter/block-invalidate-ref.html
new file mode 100644
index 000000000..3208c43ef
--- /dev/null
+++ b/layout/reftests/forms/meter/block-invalidate-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter { display: block; }
+  </style>
+  <body>
+    <meter value='0.5'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/block-invalidate.html b/layout/reftests/forms/meter/block-invalidate.html
new file mode 100644
index 000000000..abc98f7f7
--- /dev/null
+++ b/layout/reftests/forms/meter/block-invalidate.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter { display: block; }
+  </style>
+  <script>
+    function loadHandler() {
+      setTimeout(function() {
+        var p = document.getElementsByTagName('meter')[0];
+        p.value = '0.5';
+        document.documentElement.className = '';
+      }, 0);
+    }
+  </script>
+  <body onload="loadHandler();">
+    <meter value='0'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html b/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html
new file mode 100644
index 000000000..03a1937fa
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .meter-sub-optimum { width: 10%; }
+    div:nth-child(2) > .meter-sub-sub-optimum { width: 10%; }
+    div:nth-child(3) > .meter-sub-optimum { width: 40%; }
+    div:nth-child(4) > .meter-optimum { width: 10%; }
+    div:nth-child(5) > .meter-optimum { width: 0%; }
+    div:nth-child(6) > .meter-sub-optimum { width: 20%; }
+  </style>
+  <body>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style-dyn.html b/layout/reftests/forms/meter/default-style/default-style-dyn.html
new file mode 100644
index 000000000..bed08d651
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <meter id='m1' value="0.1" low="0" optimum="0.5" high="1" min="0" max="1"></meter>
+    <meter id='m2' value="0.1" low="0.3" optimum="0.7" high="1" min="0" max="1"></meter>
+    <meter id='m3' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+    <meter id='m4' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+    <meter id='m5' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+    <meter id='m6' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+
+    <script>
+
+    var m = document.getElementById('m1');
+    m.setAttribute("low",0.3);
+
+    m = document.getElementById('m2');
+    m.setAttribute("high",0.5);
+
+    m = document.getElementById('m3');
+    m.setAttribute("value",0.4);
+
+    m = document.getElementById('m4');
+    m.setAttribute("optimum",0.1);
+
+    m = document.getElementById('m5');
+    m.setAttribute("min",0.9);
+
+    m = document.getElementById('m6');
+    m.setAttribute("max",0.5);
+
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style-ref.html b/layout/reftests/forms/meter/default-style/default-style-ref.html
new file mode 100644
index 000000000..7cba9ab96
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style-ref.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    /* optimum = 0.0 */
+    div:nth-child(1) > .meter-optimum { width: 0%; }
+    div:nth-child(2) > .meter-optimum { width: 10%; }
+    div:nth-child(3) > .meter-sub-optimum { width: 30%; }
+    div:nth-child(4) > .meter-sub-optimum { width: 50%; }
+    div:nth-child(5) > .meter-sub-optimum { width: 70%; }
+    div:nth-child(6) > .meter-sub-sub-optimum { width: 80%; }
+    div:nth-child(7) > .meter-sub-sub-optimum { width: 100%; }
+
+    /* optimum = 0.1 */
+    div:nth-child(8) > .meter-optimum { width: 0%; }
+    div:nth-child(9) > .meter-optimum { width: 10%; }
+    div:nth-child(10) > .meter-sub-optimum { width: 30%; }
+    div:nth-child(11) > .meter-sub-optimum { width: 50%; }
+    div:nth-child(12) > .meter-sub-optimum { width: 70%; }
+    div:nth-child(13) > .meter-sub-sub-optimum { width: 80%; }
+    div:nth-child(14) > .meter-sub-sub-optimum { width: 100%; }
+
+    /* optimum = 0.3 */
+    div:nth-child(15) > .meter-sub-optimum { width: 0%; }
+    div:nth-child(16) > .meter-sub-optimum { width: 10%; }
+    div:nth-child(17) > .meter-optimum { width: 30%; }
+    div:nth-child(18) > .meter-optimum { width: 50%; }
+    div:nth-child(19) > .meter-optimum { width: 70%; }
+    div:nth-child(20) > .meter-sub-optimum { width: 80%; }
+    div:nth-child(21) > .meter-sub-optimum { width: 100%; }
+
+    /* optimum = 0.5 */
+    div:nth-child(22) > .meter-sub-optimum { width: 0%; }
+    div:nth-child(23) > .meter-sub-optimum { width: 10%; }
+    div:nth-child(24) > .meter-optimum { width: 30%; }
+    div:nth-child(25) > .meter-optimum { width: 50%; }
+    div:nth-child(26) > .meter-optimum { width: 70%; }
+    div:nth-child(27) > .meter-sub-optimum { width: 80%; }
+    div:nth-child(28) > .meter-sub-optimum { width: 100%; }
+
+    /* optimum = 0.7 */
+    div:nth-child(29) > .meter-sub-optimum { width: 0%; }
+    div:nth-child(30) > .meter-sub-optimum { width: 10%; }
+    div:nth-child(31) > .meter-optimum { width: 30%; }
+    div:nth-child(32) > .meter-optimum { width: 50%; }
+    div:nth-child(33) > .meter-optimum { width: 70%; }
+    div:nth-child(34) > .meter-sub-optimum { width: 80%; }
+    div:nth-child(35) > .meter-sub-optimum { width: 100%; }
+
+    /* optimum = 0.8 */
+    div:nth-child(36) > .meter-sub-sub-optimum { width: 0%; }
+    div:nth-child(37) > .meter-sub-sub-optimum { width: 10%; }
+    div:nth-child(38) > .meter-sub-optimum { width: 30%; }
+    div:nth-child(39) > .meter-sub-optimum { width: 50%; }
+    div:nth-child(40) > .meter-sub-optimum { width: 70%; }
+    div:nth-child(41) > .meter-optimum { width: 80%; }
+    div:nth-child(42) > .meter-optimum { width: 100%; }
+
+    /* optimum = 1.0 */
+    div:nth-child(43) > .meter-sub-sub-optimum { width: 0%; }
+    div:nth-child(44) > .meter-sub-sub-optimum { width: 10%; }
+    div:nth-child(45) > .meter-sub-optimum { width: 30%; }
+    div:nth-child(46) > .meter-sub-optimum { width: 50%; }
+    div:nth-child(47) > .meter-sub-optimum { width: 70%; }
+    div:nth-child(48) > .meter-optimum { width: 80%; }
+    div:nth-child(49) > .meter-optimum { width: 100%; }
+  </style>
+  <body>
+    <!-- optimum = 0.0 -->
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-sub-optimum">
+      </div>
+    </div>
+
+    <!-- optimum = 0.1 -->
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-sub-optimum">
+      </div>
+    </div>
+
+    <!-- optimum = 0.3 -->
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+
+    <!-- optimum = 0.5 -->
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+
+    <!-- optimum = 0.7 -->
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+
+    <!-- optimum = 0.8 -->
+    <div class="meter-element">
+      <div class="meter-sub-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+
+    <!-- optimum = 1.0 -->
+    <div class="meter-element">
+      <div class="meter-sub-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-sub-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-optimum">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style.html b/layout/reftests/forms/meter/default-style/default-style.html
new file mode 100644
index 000000000..6c648c335
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <meter value="0.0" low="0.3" optimum="0.0" high="0.7"></meter>
+    <meter value="0.1" low="0.3" optimum="0.0" high="0.7"></meter>
+    <meter value="0.3" low="0.3" optimum="0.0" high="0.7"></meter>
+    <meter value="0.5" low="0.3" optimum="0.0" high="0.7"></meter>
+    <meter value="0.7" low="0.3" optimum="0.0" high="0.7"></meter>
+    <meter value="0.8" low="0.3" optimum="0.0" high="0.7"></meter>
+    <meter value="1.0" low="0.3" optimum="0.0" high="0.7"></meter>
+    
+    <meter value="0.0" low="0.3" optimum="0.1" high="0.7"></meter>
+    <meter value="0.1" low="0.3" optimum="0.1" high="0.7"></meter>
+    <meter value="0.3" low="0.3" optimum="0.1" high="0.7"></meter>
+    <meter value="0.5" low="0.3" optimum="0.1" high="0.7"></meter>
+    <meter value="0.7" low="0.3" optimum="0.1" high="0.7"></meter>
+    <meter value="0.8" low="0.3" optimum="0.1" high="0.7"></meter>
+    <meter value="1.0" low="0.3" optimum="0.1" high="0.7"></meter>
+    
+    <meter value="0.0" low="0.3" optimum="0.3" high="0.7"></meter>
+    <meter value="0.1" low="0.3" optimum="0.3" high="0.7"></meter>
+    <meter value="0.3" low="0.3" optimum="0.3" high="0.7"></meter>
+    <meter value="0.5" low="0.3" optimum="0.3" high="0.7"></meter>
+    <meter value="0.7" low="0.3" optimum="0.3" high="0.7"></meter>
+    <meter value="0.8" low="0.3" optimum="0.3" high="0.7"></meter>
+    <meter value="1.0" low="0.3" optimum="0.3" high="0.7"></meter>
+    
+    <meter value="0.0" low="0.3" optimum="0.5" high="0.7"></meter>
+    <meter value="0.1" low="0.3" optimum="0.5" high="0.7"></meter>
+    <meter value="0.3" low="0.3" optimum="0.5" high="0.7"></meter>
+    <meter value="0.5" low="0.3" optimum="0.5" high="0.7"></meter>
+    <meter value="0.7" low="0.3" optimum="0.5" high="0.7"></meter>
+    <meter value="0.8" low="0.3" optimum="0.5" high="0.7"></meter>
+    <meter value="1.0" low="0.3" optimum="0.5" high="0.7"></meter>
+    
+    <meter value="0.0" low="0.3" optimum="0.7" high="0.7"></meter>
+    <meter value="0.1" low="0.3" optimum="0.7" high="0.7"></meter>
+    <meter value="0.3" low="0.3" optimum="0.7" high="0.7"></meter>
+    <meter value="0.5" low="0.3" optimum="0.7" high="0.7"></meter>
+    <meter value="0.7" low="0.3" optimum="0.7" high="0.7"></meter>
+    <meter value="0.8" low="0.3" optimum="0.7" high="0.7"></meter>
+    <meter value="1.0" low="0.3" optimum="0.7" high="0.7"></meter>
+    
+    <meter value="0.0" low="0.3" optimum="0.8" high="0.7"></meter>
+    <meter value="0.1" low="0.3" optimum="0.8" high="0.7"></meter>
+    <meter value="0.3" low="0.3" optimum="0.8" high="0.7"></meter>
+    <meter value="0.5" low="0.3" optimum="0.8" high="0.7"></meter>
+    <meter value="0.7" low="0.3" optimum="0.8" high="0.7"></meter>
+    <meter value="0.8" low="0.3" optimum="0.8" high="0.7"></meter>
+    <meter value="1.0" low="0.3" optimum="0.8" high="0.7"></meter>
+    
+    <meter value="0.0" low="0.3" optimum="1.0" high="0.7"></meter>
+    <meter value="0.1" low="0.3" optimum="1.0" high="0.7"></meter>
+    <meter value="0.3" low="0.3" optimum="1.0" high="0.7"></meter>
+    <meter value="0.5" low="0.3" optimum="1.0" high="0.7"></meter>
+    <meter value="0.7" low="0.3" optimum="1.0" high="0.7"></meter>
+    <meter value="0.8" low="0.3" optimum="1.0" high="0.7"></meter>
+    <meter value="1.0" low="0.3" optimum="1.0" high="0.7"></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/reftest-stylo.list b/layout/reftests/forms/meter/default-style/reftest-stylo.list
new file mode 100644
index 000000000..55cd0b3e3
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/reftest-stylo.list
@@ -0,0 +1,3 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== default-style.html default-style.html
+== default-style-dyn.html default-style-dyn.html
diff --git a/layout/reftests/forms/meter/default-style/reftest.list b/layout/reftests/forms/meter/default-style/reftest.list
new file mode 100644
index 000000000..a67d6712b
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/reftest.list
@@ -0,0 +1,2 @@
+== default-style.html default-style-ref.html
+== default-style-dyn.html default-style-dyn-ref.html
diff --git a/layout/reftests/forms/meter/default-style/style.css b/layout/reftests/forms/meter/default-style/style.css
new file mode 100644
index 000000000..9e0697bb3
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/style.css
@@ -0,0 +1,54 @@
+div.meter-element {
+  display: inline-block;
+  height: 1em;
+  width: 5em;
+  vertical-align: -0.2em;
+
+  background: -moz-linear-gradient(top, #e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
+}
+
+div.meter-optimum {
+  float: none ! important;
+
+  height: 100%;
+  /*
+   * We can't apply the following style to the reference because it will have
+   * underisable effectes:
+   * width: 100%;
+   */
+
+  /* green. */
+  background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
+}
+
+div.meter-sub-optimum {
+  float: none ! important;
+
+  height: 100%;
+  /*
+   * We can't apply the following style to the reference because it will have
+   * underisable effectes:
+   * width: 100%;
+   */
+
+  /* orange. */
+  background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
+}
+
+div.meter-sub-sub-optimum {
+  float: none ! important;
+
+  height: 100%;
+  /*
+   * We can't apply the following style to the reference because it will have
+   * underisable effectes:
+   * width: 100%;
+   */
+
+  /* red. */
+  background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
+}
+
+meter, meter::-moz-meter-bar, div.meter-element, div.meter-optimum, div.meter-sub-optimum, div.meter-sub-sub-optimum {
+  -moz-appearance: none;
+}
diff --git a/layout/reftests/forms/meter/in-cells-ref.html b/layout/reftests/forms/meter/in-cells-ref.html
new file mode 100644
index 000000000..aa81938a3
--- /dev/null
+++ b/layout/reftests/forms/meter/in-cells-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter { width: 5em; height: 1em; }
+    meter.vertical { -moz-orient: vertical; width: 1em; height: 5em; }
+  </style>
+  <body>
+    <table>
+      <tr>
+        <td>foo</td>
+        <td><meter value='0.5'></meter></td>
+        <td>bar</td>
+      </tr>
+      <tr>
+        <td>foo</td>
+        <td><meter class='vertical' value='0.5'></meter></td>
+        <td>bar</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/in-cells.html b/layout/reftests/forms/meter/in-cells.html
new file mode 100644
index 000000000..c62510433
--- /dev/null
+++ b/layout/reftests/forms/meter/in-cells.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter.vertical { -moz-orient: vertical; }
+  </style>
+  <body>
+    <table>
+      <tr>
+        <td>foo</td>
+        <td><meter value='0.5'></meter></td>
+        <td>bar</td>
+      </tr>
+      <tr>
+        <td>foo</td>
+        <td><meter class='vertical' value='0.5'></meter></td>
+        <td>bar</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-ref.html b/layout/reftests/forms/meter/margin-padding-ref.html
new file mode 100644
index 000000000..84fb9b385
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-rtl-ref.html b/layout/reftests/forms/meter/margin-padding-rtl-ref.html
new file mode 100644
index 000000000..579794cc9
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-rtl.html b/layout/reftests/forms/meter/margin-padding-rtl.html
new file mode 100644
index 000000000..d84058264
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-rtl.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter:nth-child(1) { margin: 10px; padding: 0px; }
+    meter:nth-child(2) { margin: 0px; padding: 10px; }
+    meter:nth-child(3) { margin: 10px; padding: 10px; }
+    meter:nth-child(4) { margin: 5px; padding: 5px; }
+    meter:nth-child(5) { margin: 50px; padding: 50px; }
+    meter:nth-child(6) { margin: 100px; padding: 100px; }
+    meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical-ref.html b/layout/reftests/forms/meter/margin-padding-vertical-ref.html
new file mode 100644
index 000000000..e6de9fef1
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html b/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html
new file mode 100644
index 000000000..6ecb2fcaf
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical-rtl.html b/layout/reftests/forms/meter/margin-padding-vertical-rtl.html
new file mode 100644
index 000000000..55e922b07
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical-rtl.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter {
+      -moz-orient: vertical;
+    }
+    meter:nth-child(1) { margin: 10px; padding: 0px; }
+    meter:nth-child(2) { margin: 0px; padding: 10px; }
+    meter:nth-child(3) { margin: 10px; padding: 10px; }
+    meter:nth-child(4) { margin: 5px; padding: 5px; }
+    meter:nth-child(5) { margin: 50px; padding: 50px; }
+    meter:nth-child(6) { margin: 100px; padding: 100px; }
+    meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical.html b/layout/reftests/forms/meter/margin-padding-vertical.html
new file mode 100644
index 000000000..d25d45e28
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter {
+      -moz-orient: vertical;
+    }
+    meter:nth-child(1) { margin: 10px; padding: 0px; }
+    meter:nth-child(2) { margin: 0px; padding: 10px; }
+    meter:nth-child(3) { margin: 10px; padding: 10px; }
+    meter:nth-child(4) { margin: 5px; padding: 5px; }
+    meter:nth-child(5) { margin: 50px; padding: 50px; }
+    meter:nth-child(6) { margin: 100px; padding: 100px; }
+    meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding.html b/layout/reftests/forms/meter/margin-padding.html
new file mode 100644
index 000000000..349813e1f
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter:nth-child(1) { margin: 10px; padding: 0px; }
+    meter:nth-child(2) { margin: 0px; padding: 10px; }
+    meter:nth-child(3) { margin: 10px; padding: 10px; }
+    meter:nth-child(4) { margin: 5px; padding: 5px; }
+    meter:nth-child(5) { margin: 50px; padding: 50px; }
+    meter:nth-child(6) { margin: 100px; padding: 100px; }
+    meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/max-height-ref.html b/layout/reftests/forms/meter/max-height-ref.html
new file mode 100644
index 000000000..be61638a7
--- /dev/null
+++ b/layout/reftests/forms/meter/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  meter {
+    height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<meter>Some text</meter>
diff --git a/layout/reftests/forms/meter/max-height.html b/layout/reftests/forms/meter/max-height.html
new file mode 100644
index 000000000..ae6115f85
--- /dev/null
+++ b/layout/reftests/forms/meter/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  meter {
+    max-height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<meter>Some text</meter>
diff --git a/layout/reftests/forms/meter/meter-orient-block.html b/layout/reftests/forms/meter/meter-orient-block.html
new file mode 100644
index 000000000..8096473e7
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:block" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html b/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html
new file mode 100644
index 000000000..29050d021
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:horizontal" max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/meter/meter-orient-horizontal.html b/layout/reftests/forms/meter/meter-orient-horizontal.html
new file mode 100644
index 000000000..762329c7f
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:horizontal" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-orient-inline.html b/layout/reftests/forms/meter/meter-orient-inline.html
new file mode 100644
index 000000000..a5ac5b52b
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:inline" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-orient-vertical-rtl.html b/layout/reftests/forms/meter/meter-orient-vertical-rtl.html
new file mode 100644
index 000000000..af83d4530
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:vertical" max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/meter/meter-orient-vertical.html b/layout/reftests/forms/meter/meter-orient-vertical.html
new file mode 100644
index 000000000..0bcc36349
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:vertical" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-block.html b/layout/reftests/forms/meter/meter-vlr-orient-block.html
new file mode 100644
index 000000000..500f1599d
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html b/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html
new file mode 100644
index 000000000..194f942d1
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-inline.html b/layout/reftests/forms/meter/meter-vlr-orient-inline.html
new file mode 100644
index 000000000..d3ee42792
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-vertical.html b/layout/reftests/forms/meter/meter-vlr-orient-vertical.html
new file mode 100644
index 000000000..40e9c8234
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr.html b/layout/reftests/forms/meter/meter-vlr.html
new file mode 100644
index 000000000..7edf4a604
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-block.html b/layout/reftests/forms/meter/meter-vrl-orient-block.html
new file mode 100644
index 000000000..6b136624c
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html b/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html
new file mode 100644
index 000000000..87f8c938d
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-inline.html b/layout/reftests/forms/meter/meter-vrl-orient-inline.html
new file mode 100644
index 000000000..294f823e1
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-vertical.html b/layout/reftests/forms/meter/meter-vrl-orient-vertical.html
new file mode 100644
index 000000000..369465660
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl.html b/layout/reftests/forms/meter/meter-vrl.html
new file mode 100644
index 000000000..7c481b31e
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl" max=100 value=70>
diff --git a/layout/reftests/forms/meter/reftest-stylo.list b/layout/reftests/forms/meter/reftest-stylo.list
new file mode 100644
index 000000000..ef10df30d
--- /dev/null
+++ b/layout/reftests/forms/meter/reftest-stylo.list
@@ -0,0 +1,49 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+fuzzy-if(Android,128,16) == values.html values.html
+== values-rtl.html values-rtl.html
+== margin-padding.html margin-padding.html
+== margin-padding-rtl.html margin-padding-rtl.html
+skip-if(B2G||Mulet) == bar-pseudo-element.html bar-pseudo-element.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl.html
+
+# vertical tests
+== values-vertical.html values-vertical.html
+== values-vertical-rtl.html values-vertical-rtl.html
+== margin-padding-vertical.html margin-padding-vertical.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl.html
+skip-if(B2G||Mulet) == bar-pseudo-element-vertical.html bar-pseudo-element-vertical.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <meter> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations.html
+
+# default style
+include default-style/reftest-stylo.list
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate.html
+== in-cells.html in-cells.html
+== max-height.html max-height.html
+
+# Tests for block and inline orientation in combination with writing-mode
+# XXX Remove default-preferences setting here after bug 1138384 makes
+#     it the default for all channels
+
+== meter-orient-vertical.html meter-orient-vertical.html
+== meter-orient-horizontal.html meter-orient-horizontal.html
+== meter-orient-block.html meter-orient-block.html
+== meter-orient-inline.html meter-orient-inline.html
+== meter-vlr.html meter-vlr.html
+== meter-vlr-orient-block.html meter-vlr-orient-block.html
+== meter-vlr-orient-inline.html meter-vlr-orient-inline.html
+== meter-vlr-orient-horizontal.html meter-vlr-orient-horizontal.html
+skip == meter-vlr-orient-vertical.html meter-vlr-orient-vertical.html
+== meter-vrl.html meter-vrl.html
+== meter-vrl-orient-block.html meter-vrl-orient-block.html
+== meter-vrl-orient-inline.html meter-vrl-orient-inline.html
+== meter-vrl-orient-horizontal.html meter-vrl-orient-horizontal.html
+== meter-vrl-orient-vertical.html meter-vrl-orient-vertical.html
diff --git a/layout/reftests/forms/meter/reftest.list b/layout/reftests/forms/meter/reftest.list
new file mode 100644
index 000000000..0a92a6004
--- /dev/null
+++ b/layout/reftests/forms/meter/reftest.list
@@ -0,0 +1,43 @@
+fuzzy-if(Android,128,16) == values.html values-ref.html
+== values-rtl.html values-rtl-ref.html
+== margin-padding.html margin-padding-ref.html
+== margin-padding-rtl.html margin-padding-rtl-ref.html
+== bar-pseudo-element.html bar-pseudo-element-ref.html
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
+
+# vertical tests
+== values-vertical.html values-vertical-ref.html
+== values-vertical-rtl.html values-vertical-rtl-ref.html
+== margin-padding-vertical.html margin-padding-vertical-ref.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html
+== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <meter> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations-ref.html
+
+# default style
+include default-style/reftest.list
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate-ref.html
+== in-cells.html in-cells-ref.html
+== max-height.html max-height-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= meter-orient-vertical.html meter-orient-horizontal.html
+!= meter-orient-horizontal.html meter-orient-horizontal-rtl.html
+== meter-orient-block.html meter-orient-vertical.html
+== meter-orient-inline.html meter-orient-horizontal.html
+== meter-vlr.html meter-orient-vertical.html
+== meter-vlr-orient-block.html meter-orient-horizontal.html
+== meter-vlr-orient-inline.html meter-orient-vertical.html
+== meter-vlr-orient-horizontal.html meter-orient-horizontal.html
+== meter-vlr-orient-vertical.html meter-orient-vertical.html
+== meter-vrl.html meter-orient-vertical-rtl.html
+== meter-vrl-orient-block.html meter-orient-horizontal-rtl.html
+== meter-vrl-orient-inline.html meter-orient-vertical-rtl.html
+== meter-vrl-orient-horizontal.html meter-orient-horizontal-rtl.html
+== meter-vrl-orient-vertical.html meter-orient-vertical-rtl.html
diff --git a/layout/reftests/forms/meter/style.css b/layout/reftests/forms/meter/style.css
new file mode 100644
index 000000000..8370c5c33
--- /dev/null
+++ b/layout/reftests/forms/meter/style.css
@@ -0,0 +1,38 @@
+div.meter-element {
+  display: inline-block;
+  height: 1em;
+  width: 5em;
+  vertical-align: -0.2em;
+
+  background-color: grey;
+}
+
+div.meter-element.vertical {
+  height: 5em;
+  width: 1em;
+}
+
+div.meter-bar {
+  float: none ! important;
+
+  height: 100%;
+  /*
+   * We can't apply the following style to the reference because it will have
+   * underisable effectes:
+   * width: 100%;
+   */
+
+  background-color: green;
+}
+
+meter, meter::-moz-meter-bar, div.meter-element, div.meter-bar {
+  -moz-appearance: none;
+}
+
+meter {
+  background: grey;
+}
+
+meter::-moz-meter-bar {
+  background: green;
+}
diff --git a/layout/reftests/forms/meter/transformations-ref.html b/layout/reftests/forms/meter/transformations-ref.html
new file mode 100644
index 000000000..17d0daa1a
--- /dev/null
+++ b/layout/reftests/forms/meter/transformations-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    body > div:nth-child(2) { -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); }
+    body > div:nth-child(3) { -moz-transform: rotate(30deg); }
+    body > div:nth-child(4) { -moz-transform: scale(2, 4); }
+    body > div:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+    body > div:nth-child(6) { -moz-transform: scale(1, 0.4); }
+    body > div:nth-child(7) { -moz-transform: scale(0.1, 1); }
+    body > div:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+    body > div:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+    body > div:nth-child(10) { -moz-transform: translate(10px, 30px); }
+    body > div:nth-child(11) { -moz-transform: translate(30px, 10px); }
+    body > div:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+    body > div:nth-child(13) { -moz-transform: translate(30px, -10px); }
+    body > div:nth-child(14) { -moz-transform: scale(0, 0); }
+  </style>
+  <body>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/transformations.html b/layout/reftests/forms/meter/transformations.html
new file mode 100644
index 000000000..f4d8a3e20
--- /dev/null
+++ b/layout/reftests/forms/meter/transformations.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    meter:nth-child(2) { -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); }
+    meter:nth-child(3) { -moz-transform: rotate(30deg); }
+    meter:nth-child(4) { -moz-transform: scale(2, 4); }
+    meter:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+    meter:nth-child(6) { -moz-transform: scale(1, 0.4); }
+    meter:nth-child(7) { -moz-transform: scale(0.1, 1); }
+    meter:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+    meter:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+    meter:nth-child(10) { -moz-transform: translate(10px, 30px); }
+    meter:nth-child(11) { -moz-transform: translate(30px, 10px); }
+    meter:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+    meter:nth-child(13) { -moz-transform: translate(30px, -10px); }
+    meter:nth-child(14) { -moz-transform: scale(0, 0); }
+  </style>
+  <body>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+    <meter value='1'></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-ref.html b/layout/reftests/forms/meter/values-ref.html
new file mode 100644
index 000000000..346e1b910
--- /dev/null
+++ b/layout/reftests/forms/meter/values-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .meter-bar { width: 100%; }
+    div:nth-child(2) > .meter-bar { width: 0%; }
+    div:nth-child(3) > .meter-bar { width: 10%; }
+    div:nth-child(4) > .meter-bar { width: 50%; }
+    div:nth-child(5) > .meter-bar { width: 0%; }
+    div:nth-child(6) > .meter-bar { width: 100%; }
+    div:nth-child(7) > .meter-bar { width: 42%; }
+    div:nth-child(8) > .meter-bar { width: 100%; }
+    div:nth-child(9) > .meter-bar { width: 100%; }
+    div:nth-child(10) > .meter-bar { width: 10%; }
+		div:nth-child(11) > .meter-bar { width: 37.5%; }
+		div:nth-child(12) > .meter-bar { width: 100%; }
+    div:nth-child(13) > .meter-bar { width: 100%; }	
+    div:nth-child(14) > .meter-bar { width: 0%; }
+    div:nth-child(15) > .meter-bar { width: 55%; }
+    div:nth-child(16) > .meter-bar { width: 50%; }
+    div:nth-child(17) > .meter-bar { width: 20%; }	
+    div:nth-child(18) > .meter-bar { width: 10%; }
+    div:nth-child(19) > .meter-bar { width: 10%; }
+    div:nth-child(20) > .meter-bar { width: 20%; }
+		div:nth-child(21) > .meter-bar { width: 37.5%; }
+    div:nth-child(22) > .meter-bar { width: 10%; }
+    div:nth-child(23) > .meter-bar { width: 10%; }
+    div:nth-child(24) > .meter-bar { width: 10%; }
+    div:nth-child(25) > .meter-bar { width: 50%; }
+    div:nth-child(26) > .meter-bar { width: 20%; }
+    div:nth-child(27) > .meter-bar { width: 90%; }
+    div:nth-child(28) > .meter-bar { width: 10%; }
+    div:nth-child(29) > .meter-bar { width: 10%; }
+    div:nth-child(30) > .meter-bar { width: 10%; }
+		div:nth-child(31) > .meter-bar { width: 10%; }
+  </style>
+  <body>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-rtl-ref.html b/layout/reftests/forms/meter/values-rtl-ref.html
new file mode 100644
index 000000000..c65e1d1d2
--- /dev/null
+++ b/layout/reftests/forms/meter/values-rtl-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .meter-bar { width: 100%; }
+    div:nth-child(2) > .meter-bar { width: 0%; }
+    div:nth-child(3) > .meter-bar { width: 10%; }
+    div:nth-child(4) > .meter-bar { width: 50%; }
+    div:nth-child(5) > .meter-bar { width: 0%; }
+    div:nth-child(6) > .meter-bar { width: 100%; }
+    div:nth-child(7) > .meter-bar { width: 42%; }
+    div:nth-child(8) > .meter-bar { width: 100%; }
+    div:nth-child(9) > .meter-bar { width: 100%; }
+    div:nth-child(10) > .meter-bar { width: 10%; }
+		div:nth-child(11) > .meter-bar { width: 37.5%; }
+		div:nth-child(12) > .meter-bar { width: 100%; }
+    div:nth-child(13) > .meter-bar { width: 100%; }	
+    div:nth-child(14) > .meter-bar { width: 0%; }
+    div:nth-child(15) > .meter-bar { width: 55%; }
+    div:nth-child(16) > .meter-bar { width: 50%; }
+    div:nth-child(17) > .meter-bar { width: 20%; }	
+    div:nth-child(18) > .meter-bar { width: 10%; }
+    div:nth-child(19) > .meter-bar { width: 10%; }
+    div:nth-child(20) > .meter-bar { width: 20%; }
+		div:nth-child(21) > .meter-bar { width: 37.5%; }
+    div:nth-child(22) > .meter-bar { width: 10%; }
+    div:nth-child(23) > .meter-bar { width: 10%; }
+    div:nth-child(24) > .meter-bar { width: 10%; }
+    div:nth-child(25) > .meter-bar { width: 50%; }
+    div:nth-child(26) > .meter-bar { width: 20%; }
+    div:nth-child(27) > .meter-bar { width: 90%; }
+    div:nth-child(28) > .meter-bar { width: 10%; }
+    div:nth-child(29) > .meter-bar { width: 10%; }
+    div:nth-child(30) > .meter-bar { width: 10%; }
+		div:nth-child(31) > .meter-bar { width: 10%; }
+  </style>
+  <body dir='rtl'>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-rtl.html b/layout/reftests/forms/meter/values-rtl.html
new file mode 100644
index 000000000..7fc25c74a
--- /dev/null
+++ b/layout/reftests/forms/meter/values-rtl.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body dir='rtl'>
+    <meter value="1.0"></meter>
+    <meter value="0.0"></meter>
+    <meter value="0.1"></meter>
+    <meter value="0.5"></meter>
+    <meter value="-1"></meter>
+    <meter value="50"></meter>
+		<!-- focus on max -->
+    <meter value="42" max="100"></meter>
+    <meter value="42" max="1"></meter>
+    <meter value="42" max="-1"></meter>
+    <meter value="0.1" max="1"></meter>
+		<!-- focus on min -->
+		<meter value="50" min="20" max="100"></meter>
+    <meter value="50" min="1" ></meter>
+    <meter value="0.1" min="2" ></meter>
+    <meter value="0.1" min="0.1"></meter>
+		<meter value="0.1" min="-1"></meter>
+		<!-- focus on low -->
+		<meter value="50" low="20" max="100"></meter>
+		<meter value="20" low="50" max="100"></meter>	
+    <meter value="0.1" low="-1"></meter>
+    <meter value="0.1" low="0"></meter>
+		<!-- focus on high -->
+		<meter value="20" high="50" max="100"></meter>
+    <meter value="50" min="20" high="1" max="100"></meter>	
+		<meter value="0.1" low="0.3" high="0.2"></meter>	
+    <meter value="0.1" high="-1"></meter>
+    <meter value="0.1" high="2"></meter>
+		<!-- focus on optimum -->
+		<meter value="50" max="100" optimum="20"></meter>
+		<meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+		<meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+		<meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+    <meter value="0.1" optimum="50"></meter>
+    <meter value="0.1" optimum="-1"></meter>
+		<meter value="0.1" optimum="1"></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical-ref.html b/layout/reftests/forms/meter/values-vertical-ref.html
new file mode 100644
index 000000000..b33027829
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+		div:nth-child(1) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(2) > .meter-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(3) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(4) > .meter-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(5) > .meter-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(6) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(7) > .meter-bar { position: relative; top: 58%; height: 42%; }
+    div:nth-child(8) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(9) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(10) > .meter-bar { position: relative; top: 90%; height: 10%; }
+		div:nth-child(11) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+		div:nth-child(12) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(13) > .meter-bar { position: relative; top: 0%; height: 100%; }	
+    div:nth-child(14) > .meter-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(15) > .meter-bar { position: relative; top: 45%; height: 55%; }
+    div:nth-child(16) > .meter-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(17) > .meter-bar { position: relative; top: 80%; height: 20%; }	
+    div:nth-child(18) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(19) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(20) > .meter-bar { position: relative; top: 80%; height: 20%; }
+		div:nth-child(21) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+    div:nth-child(22) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(23) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(24) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(25) > .meter-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(26) > .meter-bar { position: relative; top: 80%; height: 20%; }
+    div:nth-child(27) > .meter-bar { position: relative; top: 10%; height: 90%; }
+    div:nth-child(28) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(29) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(30) > .meter-bar { position: relative; top: 90%; height: 10%; }
+		div:nth-child(31) > .meter-bar { position: relative; top: 90%; height: 10%; }
+  </style>
+  <body>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical-rtl-ref.html b/layout/reftests/forms/meter/values-vertical-rtl-ref.html
new file mode 100644
index 000000000..71e166c6c
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical-rtl-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(2) > .meter-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(3) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(4) > .meter-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(5) > .meter-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(6) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(7) > .meter-bar { position: relative; top: 58%; height: 42%; }
+    div:nth-child(8) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(9) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(10) > .meter-bar { position: relative; top: 90%; height: 10%; }
+		div:nth-child(11) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+		div:nth-child(12) > .meter-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(13) > .meter-bar { position: relative; top: 0%; height: 100%; }	
+    div:nth-child(14) > .meter-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(15) > .meter-bar { position: relative; top: 45%; height: 55%; }
+    div:nth-child(16) > .meter-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(17) > .meter-bar { position: relative; top: 80%; height: 20%; }	
+    div:nth-child(18) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(19) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(20) > .meter-bar { position: relative; top: 80%; height: 20%; }
+		div:nth-child(21) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+    div:nth-child(22) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(23) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(24) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(25) > .meter-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(26) > .meter-bar { position: relative; top: 80%; height: 20%; }
+    div:nth-child(27) > .meter-bar { position: relative; top: 10%; height: 90%; }
+    div:nth-child(28) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(29) > .meter-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(30) > .meter-bar { position: relative; top: 90%; height: 10%; }
+		div:nth-child(31) > .meter-bar { position: relative; top: 90%; height: 10%; }
+  </style>
+  <body dir='rtl'>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+    <div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+		<div class="meter-element vertical">
+      <div class="meter-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical-rtl.html b/layout/reftests/forms/meter/values-vertical-rtl.html
new file mode 100644
index 000000000..e4653ac67
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical-rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter {
+      -moz-orient: vertical;
+    }
+  </style>
+  <body dir='rtl'>
+    <meter value="1.0"></meter>
+    <meter value="0.0"></meter>
+    <meter value="0.1"></meter>
+    <meter value="0.5"></meter>
+    <meter value="-1"></meter>
+    <meter value="50"></meter>
+		<!-- focus on max -->
+    <meter value="42" max="100"></meter>
+    <meter value="42" max="1"></meter>
+    <meter value="42" max="-1"></meter>
+    <meter value="0.1" max="1"></meter>
+		<!-- focus on min -->
+		<meter value="50" min="20" max="100"></meter>
+    <meter value="50" min="1" ></meter>
+    <meter value="0.1" min="2" ></meter>
+    <meter value="0.1" min="0.1"></meter>
+		<meter value="0.1" min="-1"></meter>
+		<!-- focus on low -->
+		<meter value="50" low="20" max="100"></meter>
+		<meter value="20" low="50" max="100"></meter>	
+    <meter value="0.1" low="-1"></meter>
+    <meter value="0.1" low="0"></meter>
+		<!-- focus on high -->
+		<meter value="20" high="50" max="100"></meter>
+    <meter value="50" min="20" high="1" max="100"></meter>	
+		<meter value="0.1" low="0.3" high="0.2"></meter>	
+    <meter value="0.1" high="-1"></meter>
+    <meter value="0.1" high="2"></meter>
+		<!-- focus on optimum -->
+		<meter value="50" max="100" optimum="20"></meter>
+		<meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+		<meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+		<meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+    <meter value="0.1" optimum="50"></meter>
+    <meter value="0.1" optimum="-1"></meter>
+		<meter value="0.1" optimum="1"></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical.html b/layout/reftests/forms/meter/values-vertical.html
new file mode 100644
index 000000000..a9c31bbdd
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    meter {
+      -moz-orient: vertical;
+    }
+  </style>
+  <body>
+    <meter value="1.0"></meter>
+    <meter value="0.0"></meter>
+    <meter value="0.1"></meter>
+    <meter value="0.5"></meter>
+    <meter value="-1"></meter>
+    <meter value="50"></meter>
+		<!-- focus on max -->
+    <meter value="42" max="100"></meter>
+    <meter value="42" max="1"></meter>
+    <meter value="42" max="-1"></meter>
+    <meter value="0.1" max="1"></meter>
+		<!-- focus on min -->
+		<meter value="50" min="20" max="100"></meter>
+    <meter value="50" min="1" ></meter>
+    <meter value="0.1" min="2" ></meter>
+    <meter value="0.1" min="0.1"></meter>
+		<meter value="0.1" min="-1"></meter>
+		<!-- focus on low -->
+		<meter value="50" low="20" max="100"></meter>
+		<meter value="20" low="50" max="100"></meter>	
+    <meter value="0.1" low="-1"></meter>
+    <meter value="0.1" low="0"></meter>
+		<!-- focus on high -->
+		<meter value="20" high="50" max="100"></meter>
+    <meter value="50" min="20" high="1" max="100"></meter>	
+		<meter value="0.1" low="0.3" high="0.2"></meter>	
+    <meter value="0.1" high="-1"></meter>
+    <meter value="0.1" high="2"></meter>
+		<!-- focus on optimum -->
+		<meter value="50" max="100" optimum="20"></meter>
+		<meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+		<meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+		<meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+    <meter value="0.1" optimum="50"></meter>
+    <meter value="0.1" optimum="-1"></meter>
+		<meter value="0.1" optimum="1"></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/meter/values.html b/layout/reftests/forms/meter/values.html
new file mode 100644
index 000000000..17ae90017
--- /dev/null
+++ b/layout/reftests/forms/meter/values.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <meter value="1.0"></meter>
+    <meter value="0.0"></meter>
+    <meter value="0.1"></meter>
+    <meter value="0.5"></meter>
+    <meter value="-1"></meter>
+    <meter value="50"></meter>
+		<!-- focus on max -->
+    <meter value="42" max="100"></meter>
+    <meter value="42" max="1"></meter>
+    <meter value="42" max="-1"></meter>
+    <meter value="0.1" max="1"></meter>
+		<!-- focus on min -->
+		<meter value="50" min="20" max="100"></meter>
+    <meter value="50" min="1" ></meter>
+    <meter value="0.1" min="2" ></meter>
+    <meter value="0.1" min="0.1"></meter>
+		<meter value="0.1" min="-1"></meter>
+		<!-- focus on low -->
+		<meter value="50" low="20" max="100"></meter>
+		<meter value="20" low="50" max="100"></meter>	
+    <meter value="0.1" low="-1"></meter>
+    <meter value="0.1" low="0"></meter>
+		<!-- focus on high -->
+		<meter value="20" high="50" max="100"></meter>
+    <meter value="50" min="20" high="1" max="100"></meter>	
+		<meter value="0.1" low="0.3" high="0.2"></meter>	
+    <meter value="0.1" high="-1"></meter>
+    <meter value="0.1" high="2"></meter>
+		<!-- focus on optimum -->
+		<meter value="50" max="100" optimum="20"></meter>
+		<meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+		<meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+		<meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+    <meter value="0.1" optimum="50"></meter>
+    <meter value="0.1" optimum="-1"></meter>
+		<meter value="0.1" optimum="1"></meter>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-1.html b/layout/reftests/forms/output/output-1.html
new file mode 100644
index 000000000..0fdb2ae8b
--- /dev/null
+++ b/layout/reftests/forms/output/output-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: the output shouldn't show anything when there is no content -->
+  <body>
+    <output></output>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-2.html b/layout/reftests/forms/output/output-2.html
new file mode 100644
index 000000000..882e805ba
--- /dev/null
+++ b/layout/reftests/forms/output/output-2.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: the output should show the textContent -->
+  <body>
+    <output>foo</output>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-3.html b/layout/reftests/forms/output/output-3.html
new file mode 100644
index 000000000..ecb17e915
--- /dev/null
+++ b/layout/reftests/forms/output/output-3.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: the output should show its content -->
+  <body>
+    <output>foo<b>bar</b></output>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-4.html b/layout/reftests/forms/output/output-4.html
new file mode 100644
index 000000000..b0ce800be
--- /dev/null
+++ b/layout/reftests/forms/output/output-4.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: the output should show its content -->
+  <body>
+    <output>foo<input></output>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-5.html b/layout/reftests/forms/output/output-5.html
new file mode 100644
index 000000000..16bcf357a
--- /dev/null
+++ b/layout/reftests/forms/output/output-5.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: the output element should show its default value -->
+  <script type="text/javascript">
+    function setDefaultValue()
+    {
+      document.getElementById('o').defaultValue = "foo";
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setDefaultValue(); disableReftestWait();">
+    <output id="o"></output>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-6.html b/layout/reftests/forms/output/output-6.html
new file mode 100644
index 000000000..b7e9ede75
--- /dev/null
+++ b/layout/reftests/forms/output/output-6.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: the output element should show its value -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('o').value = "foo";
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setValue(); disableReftestWait();">
+    <output id="o"></output>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-7.html b/layout/reftests/forms/output/output-7.html
new file mode 100644
index 000000000..0ec10f3c3
--- /dev/null
+++ b/layout/reftests/forms/output/output-7.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: the output element should show its value -->
+  <script type="text/javascript">
+    function setDefaultValue()
+    {
+      document.getElementById('o').value = "bar";
+    }
+    function setValue()
+    {
+      document.getElementById('o').value = "foo";
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setDefaultValue(); setValue(); disableReftestWait();">
+    <output id="o"></output>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-ref-2.html b/layout/reftests/forms/output/output-ref-2.html
new file mode 100644
index 000000000..ad78e10e5
--- /dev/null
+++ b/layout/reftests/forms/output/output-ref-2.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    foo<b>bar</b>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-ref-3.html b/layout/reftests/forms/output/output-ref-3.html
new file mode 100644
index 000000000..cae43bf45
--- /dev/null
+++ b/layout/reftests/forms/output/output-ref-3.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    foo<input>
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/output-ref.html b/layout/reftests/forms/output/output-ref.html
new file mode 100644
index 000000000..01d12af23
--- /dev/null
+++ b/layout/reftests/forms/output/output-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    foo
+  </body>
+</html>
diff --git a/layout/reftests/forms/output/reftest-stylo.list b/layout/reftests/forms/output/reftest-stylo.list
new file mode 100644
index 000000000..b55dac96f
--- /dev/null
+++ b/layout/reftests/forms/output/reftest-stylo.list
@@ -0,0 +1,8 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== output-1.html output-1.html
+== output-2.html output-2.html
+== output-3.html output-3.html
+== output-4.html output-4.html
+== output-5.html output-5.html
+== output-6.html output-6.html
+== output-7.html output-7.html
diff --git a/layout/reftests/forms/output/reftest.list b/layout/reftests/forms/output/reftest.list
new file mode 100644
index 000000000..1bd798272
--- /dev/null
+++ b/layout/reftests/forms/output/reftest.list
@@ -0,0 +1,7 @@
+== output-1.html about:blank
+== output-2.html output-ref.html
+== output-3.html output-ref-2.html
+== output-4.html output-ref-3.html
+== output-5.html output-ref.html
+== output-6.html output-ref.html
+== output-7.html output-ref.html
diff --git a/layout/reftests/forms/placeholder/placeholder-1-password.html b/layout/reftests/forms/placeholder/placeholder-1-password.html
new file mode 100644
index 000000000..1c3d582f1
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-1-password.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: placeholder should be used by input password elements -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <body>
+    <input type="password" value="" placeholder="my placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-1-text.html b/layout/reftests/forms/placeholder/placeholder-1-text.html
new file mode 100644
index 000000000..30df2f348
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-1-text.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: placeholder should be used by input text elements -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <body>
+    <input type="text" value="" placeholder="my placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-1-textarea.html b/layout/reftests/forms/placeholder/placeholder-1-textarea.html
new file mode 100644
index 000000000..89f990ce0
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-1-textarea.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: placeholder should be used by textarea elements -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <body>
+    <textarea placeholder="my placeholder"></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-10.html b/layout/reftests/forms/placeholder/placeholder-10.html
new file mode 100644
index 000000000..40a35669e
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-10.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when unfocused, if value='', newest placeholder should be shown -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <script type="text/javascript">
+    function focusPlaceholder()
+    {
+      document.getElementById('p1').focus();
+    }
+    function setPlaceholder()
+    {
+      document.getElementById('p1').placeholder = 'my placeholder';
+    }
+    function unFocusPlaceholder()
+    {
+      document.getElementById('p1').blur();
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="focusPlaceholder();">
+    <input type="text" id="p1" value="" placeholder="old placeholder" onfocus="setPlaceholder(); unFocusPlaceholder(); disableReftestWait();">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-11.html b/layout/reftests/forms/placeholder/placeholder-11.html
new file mode 100644
index 000000000..62c77351c
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-11.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: placeholder shouldn't show new lines (&#10; version) -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <body>
+    <input type="text" value="" placeholder="my&#10; placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-12.html b/layout/reftests/forms/placeholder/placeholder-12.html
new file mode 100644
index 000000000..7cfd00a0e
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-12.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: placeholder shouldn't show new lines (&#13; version) -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <body>
+    <input type="text" value="" placeholder="my&#13; placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-13.html b/layout/reftests/forms/placeholder/placeholder-13.html
new file mode 100644
index 000000000..19fc17293
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-13.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: placeholder shouldn't show new lines (\r version) -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <script type="text/javascript">
+    function setPlaceholder()
+    {
+      document.getElementById('p1').placeholder = 'my\r placeholder';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload="setPlaceholder(); disableReftestWait();">
+    <input type="text" id="p1" value="" placeholder="">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-14.html b/layout/reftests/forms/placeholder/placeholder-14.html
new file mode 100644
index 000000000..ad99420eb
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-14.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: placeholder shouldn't show new lines (\n version) -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <script type="text/javascript">
+    function setPlaceholder()
+    {
+      document.getElementById('p1').placeholder = 'my\n placeholder';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload="setPlaceholder(); disableReftestWait();">
+    <input type="text" id="p1" value="" placeholder="">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-18.html b/layout/reftests/forms/placeholder/placeholder-18.html
new file mode 100644
index 000000000..159d5d7e2
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-18.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: placeholder should appear with dynamic DOM modifications -->
+  <script type="text/javascript">
+    function setPlaceholder()
+    {
+      var i = document.getElementById('p1');
+      i.focus();
+      i.blur();
+      i.value = "not empty";
+      i.value = "";
+      i.value = "my value";
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload="setPlaceholder(); disableReftestWait();">
+    <input type="text" id="p1" value="" placeholder="my placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-19.xul b/layout/reftests/forms/placeholder/placeholder-19.xul
new file mode 100644
index 000000000..e176e0f9b
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-19.xul
@@ -0,0 +1,23 @@
+<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        class="reftest-wait">
+  <script type="text/javascript"><![CDATA[
+    window.addEventListener("load", function() {
+      var x = document.getElementById("x");
+      x.value = "val";
+      x.focus();x.blur();
+      setTimeout(function() {
+        x.value = "";
+        x.hidden = true;
+        setTimeout(function() {
+          x.value = "value";
+          x.hidden = false;
+          x.focus();x.blur();
+          document.documentElement.removeAttribute("class");
+        }, 0);
+      }, 0);
+    }, false);
+  ]]></script>
+  <textbox id="x" placeholder="placeholder"/>
+</window>
+
diff --git a/layout/reftests/forms/placeholder/placeholder-2-textarea.html b/layout/reftests/forms/placeholder/placeholder-2-textarea.html
new file mode 100644
index 000000000..06678a3db
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-2-textarea.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: placeholder has to be used if set via javascript -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <script type="text/javascript">
+    function setPlaceholder()
+    {
+      document.getElementById('p1').placeholder = "my placeholder";
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setPlaceholder(); disableReftestWait();">
+    <textarea id="p1" placeholder=""></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-2.html b/layout/reftests/forms/placeholder/placeholder-2.html
new file mode 100644
index 000000000..36b883ab2
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: placeholder has to be used if set via javascript -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <script type="text/javascript">
+    function setPlaceholder()
+    {
+      document.getElementById('p1').placeholder = "my placeholder";
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setPlaceholder(); disableReftestWait();">
+    <input type="text" id="p1" value="" placeholder="">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-20.html b/layout/reftests/forms/placeholder/placeholder-20.html
new file mode 100644
index 000000000..323cea849
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-20.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <!-- Test: when focused, if value='', newest placeholder should be shown. -->
+  <script type="text/javascript">
+    function focusPlaceholder()
+    {
+      document.getElementById('p1').focus();
+    }
+    function setPlaceholder()
+    {
+      document.getElementById('p1').placeholder = 'my placeholder';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="focusPlaceholder();">
+    <input type="text" id="p1" value="" onfocus="setPlaceholder(); disableReftestWait();">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-21.html b/layout/reftests/forms/placeholder/placeholder-21.html
new file mode 100644
index 000000000..483b0d49d
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-21.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when focused, clearing placeholder attribute should work. -->
+  <script type="text/javascript">
+    function focusPlaceholder()
+    {
+      document.getElementById('p1').focus();
+    }
+    function setPlaceholder()
+    {
+      document.getElementById('p1').removeAttribute('placeholder');
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="focusPlaceholder();">
+    <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="setPlaceholder(); disableReftestWait();">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-22.html b/layout/reftests/forms/placeholder/placeholder-22.html
new file mode 100644
index 000000000..7ae54e8e7
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-22.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when focused, clearing placeholder attribute should work. -->
+  <script type="text/javascript">
+    function focusPlaceholder()
+    {
+      document.getElementById('p1').focus();
+    }
+    function setPlaceholder()
+    {
+      document.getElementById('p1').placeholder = '';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="focusPlaceholder();">
+    <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="setPlaceholder(); disableReftestWait();">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-3.html b/layout/reftests/forms/placeholder/placeholder-3.html
new file mode 100644
index 000000000..b58f7ca72
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-3.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test: value has to be shown when not null -->
+  <body>
+    <input type="text" value="my value" placeholder="my placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-4.html b/layout/reftests/forms/placeholder/placeholder-4.html
new file mode 100644
index 000000000..bfcce20b8
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-4.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: value has to be shown if set via javascript -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('p1').value = "my value";
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setValue(); disableReftestWait();">
+    <input type="text" id="p1" value="" placeholder="my placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-5.html b/layout/reftests/forms/placeholder/placeholder-5.html
new file mode 100644
index 000000000..0f766d160
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-5.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: placeholder has to be shown if value is reseted via javascript -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('p1').value = "";
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="setValue(); disableReftestWait();">
+    <input type="text" id="p1" value="my value" placeholder="my placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-6-textarea.html b/layout/reftests/forms/placeholder/placeholder-6-textarea.html
new file mode 100644
index 000000000..b56cb0478
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-6-textarea.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test placeholder behavior when textarea is too small -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <body>
+    <textarea cols="5" rows="3" placeholder="my placeholder"></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-6.html b/layout/reftests/forms/placeholder/placeholder-6.html
new file mode 100644
index 000000000..774aa35d4
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-6.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <!-- Test placeholder behavior when input is too small -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <body>
+    <input type="text" size="5" value="" placeholder="my placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-7.html b/layout/reftests/forms/placeholder/placeholder-7.html
new file mode 100644
index 000000000..19fc8eb74
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-7.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <!-- Test: when focused, element should show placeholder. -->
+  <script type="text/javascript">
+    function focusPlaceholder()
+    {
+      document.getElementById('p1').focus();
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="focusPlaceholder();">
+    <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="disableReftestWait();">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-8.html b/layout/reftests/forms/placeholder/placeholder-8.html
new file mode 100644
index 000000000..9c1ac995a
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-8.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <!-- Test: when focused, if value='', newest placeholder should be shown. -->
+  <script type="text/javascript">
+    function focusPlaceholder()
+    {
+      document.getElementById('p1').focus();
+    }
+    function setPlaceholder()
+    {
+      document.getElementById('p1').placeholder = 'my placeholder';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="focusPlaceholder();">
+    <input type="text" id="p1" value="" placeholder="old placeholder" onfocus="setPlaceholder(); disableReftestWait();">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-9.html b/layout/reftests/forms/placeholder/placeholder-9.html
new file mode 100644
index 000000000..35155c012
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-9.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <!-- Test: when focused, value reset should show placeholder. -->
+  <script type="text/javascript">
+    function focusPlaceholder()
+    {
+      document.getElementById('p1').focus();
+    }
+    function resetValue()
+    {
+      document.getElementById('p1').value = '';
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="focusPlaceholder();">
+    <input type="text" id="p1" value="my value" placeholder="my placeholder" onfocus="resetValue(); disableReftestWait();">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-blank-ref.html b/layout/reftests/forms/placeholder/placeholder-blank-ref.html
new file mode 100644
index 000000000..115ffac79
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-blank-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <script type="text/javascript">
+    function focusInput()
+    {
+      document.getElementById('t1').focus();
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload="focusInput();">
+    <input id='t1' type="text" onfocus="disableReftestWait();">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-focus-pref.html b/layout/reftests/forms/placeholder/placeholder-focus-pref.html
new file mode 100644
index 000000000..cdfd92444
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-focus-pref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <!-- Test: when focused, element should not placeholder when
+       'dom.placeholder.show_on_focus' pref is false. -->
+  <script type="text/javascript">
+    function focusPlaceholder()
+    {
+      document.getElementById('p1').focus();
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+
+  <body onload="focusPlaceholder();">
+    <input type="text" id="p1" value="" placeholder="my placeholder" onfocus="disableReftestWait();">
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/forms/placeholder/placeholder-focus-ref.html b/layout/reftests/forms/placeholder/placeholder-focus-ref.html
new file mode 100644
index 000000000..fa8f292a4
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-focus-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <script type="text/javascript">
+    function focusInput()
+    {
+      document.getElementById('t1').focus();
+    }
+    function disableReftestWait()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload="focusInput();">
+    <input id='t1' type="text" class="placeholder" value="my placeholder" onfocus="disableReftestWait();">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-overflow-ref.html b/layout/reftests/forms/placeholder/placeholder-overflow-ref.html
new file mode 100644
index 000000000..9bceacd62
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-overflow-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <!--
+    This test 'emulate' the placeholder by setting a style
+    to the value of an input text.
+    This test may break if placeholder default style is changed.
+  -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+
+  <body>
+    <input type="text" class="placeholder" size="5" value="my placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html b/layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html
new file mode 100644
index 000000000..559945a50
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-overflow-textarea-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <!--
+    This test 'emulate' the placeholder by setting a style
+    to the value of a textarea.
+    This test may break if placeholder default style is changed.
+  -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+
+  <body>
+    <textarea class="placeholder" cols="5" rows="3">my placeholder</textarea>
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-overridden-ref.html b/layout/reftests/forms/placeholder/placeholder-overridden-ref.html
new file mode 100644
index 000000000..11f756af6
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-overridden-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type="text" value="my value">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-overridden-ref.xul b/layout/reftests/forms/placeholder/placeholder-overridden-ref.xul
new file mode 100644
index 000000000..706f27fbb
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-overridden-ref.xul
@@ -0,0 +1,5 @@
+<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <textbox placeholder="placeholder" value="value"/>
+</window>
+
diff --git a/layout/reftests/forms/placeholder/placeholder-rtl-ref.html b/layout/reftests/forms/placeholder/placeholder-rtl-ref.html
new file mode 100644
index 000000000..91812d0ce
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-rtl-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html dir='rtl'>
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <body>
+    <input class='placeholder' value='foo'>
+    <textarea class='placeholder' >foo</textarea>
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/placeholder/placeholder-rtl.html b/layout/reftests/forms/placeholder/placeholder-rtl.html
new file mode 100644
index 000000000..5898ed55c
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-rtl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html dir='rtl'>
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+  <body>
+    <input placeholder='foo'>
+    <textarea placeholder='foo'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-style.css b/layout/reftests/forms/placeholder/placeholder-style.css
new file mode 100644
index 000000000..0c5bb6333
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-style.css
@@ -0,0 +1,10 @@
+textarea.placeholder,
+input.placeholder,
+input::placeholder,
+textarea::placeholder {
+  /* Unfortunately, we can't style the <input> or <textarea> text so we can't
+     set it to opacity: 0.54; which means we have to revert the style to
+     something that doesn't include an opacity. */
+  color: GrayText;
+  opacity: 1.0;
+}
diff --git a/layout/reftests/forms/placeholder/placeholder-visible-ref.html b/layout/reftests/forms/placeholder/placeholder-visible-ref.html
new file mode 100644
index 000000000..b05267457
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-visible-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <!--
+    This test 'emulate' the placeholder by setting a style
+    to the value of an input text.
+    This test may break if placeholder default style is changed.
+  -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+
+  <body>
+    <input type="text" class="placeholder" value="my placeholder">
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html b/layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html
new file mode 100644
index 000000000..b7bda6f80
--- /dev/null
+++ b/layout/reftests/forms/placeholder/placeholder-visible-textarea-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <!--
+    This test 'emulate' the placeholder by setting a style
+    to the value of a textarea.
+    This test may break if placeholder default style is changed.
+  -->
+  <link rel='stylesheet' type='text/css' href='placeholder-style.css'>
+
+  <body>
+    <textarea class="placeholder">my placeholder</textarea>
+  </body>
+</html>
diff --git a/layout/reftests/forms/placeholder/reftest-stylo.list b/layout/reftests/forms/placeholder/reftest-stylo.list
new file mode 100644
index 000000000..e6766e944
--- /dev/null
+++ b/layout/reftests/forms/placeholder/reftest-stylo.list
@@ -0,0 +1,39 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests using placeholder-focus-ref.html as a reference are disabled because
+# we can't change the caret colour nor disable it and we can't change the
+# text colour without changing the caret which means that the tested page has
+# a black caret with a grey text and the reference has a grey caret with grey
+# text. The only thing that is doable is to make the caret grey in the tested
+# page but that would make the test moot because a failure wouldn't be seen.
+# A real way to fix this would be to be able to style the caret or to implement
+# ::value (bug 648643), depending of the ::value behaviour (it could change the
+# caret colour and the text colour or just the text colour).
+
+== placeholder-1-text.html placeholder-1-text.html
+== placeholder-1-password.html placeholder-1-password.html
+== placeholder-1-textarea.html placeholder-1-textarea.html
+== placeholder-2.html placeholder-2.html
+== placeholder-2-textarea.html placeholder-2-textarea.html
+== placeholder-3.html placeholder-3.html
+== placeholder-4.html placeholder-4.html
+== placeholder-5.html placeholder-5.html
+fuzzy-if(winWidget,160,10) fuzzy-if(Android,1,1) fuzzy-if(asyncPan&&!layersGPUAccelerated,146,317) fuzzy-if(OSX==1010&&browserIsRemote,1,8) == placeholder-6.html placeholder-6.html
+skip-if(B2G||Mulet||(Android&&asyncPan)) == placeholder-6-textarea.html placeholder-6-textarea.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+# needs-focus == placeholder-7.html placeholder-7.html
+# needs-focus == placeholder-8.html placeholder-8.html
+# needs-focus == placeholder-9.html placeholder-9.html
+needs-focus == placeholder-10.html placeholder-10.html
+== placeholder-11.html placeholder-11.html
+== placeholder-12.html placeholder-12.html
+== placeholder-13.html placeholder-13.html
+== placeholder-14.html placeholder-14.html
+== placeholder-18.html placeholder-18.html
+random-if(winWidget) skip-if((B2G&&browserIsRemote)||Mulet) == placeholder-19.xul placeholder-19.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+# needs-focus == placeholder-20.html placeholder-20.html
+needs-focus == placeholder-21.html placeholder-21.html
+needs-focus == placeholder-22.html placeholder-22.html
+== placeholder-rtl.html placeholder-rtl.html
+pref(dom.placeholder.show_on_focus,false) needs-focus == placeholder-focus-pref.html placeholder-focus-pref.html
diff --git a/layout/reftests/forms/placeholder/reftest.list b/layout/reftests/forms/placeholder/reftest.list
new file mode 100644
index 000000000..525b4ab74
--- /dev/null
+++ b/layout/reftests/forms/placeholder/reftest.list
@@ -0,0 +1,35 @@
+# Tests using placeholder-focus-ref.html as a reference are disabled because
+# we can't change the caret colour nor disable it and we can't change the
+# text colour without changing the caret which means that the tested page has
+# a black caret with a grey text and the reference has a grey caret with grey
+# text. The only thing that is doable is to make the caret grey in the tested
+# page but that would make the test moot because a failure wouldn't be seen.
+# A real way to fix this would be to be able to style the caret or to implement
+# ::value (bug 648643), depending of the ::value behaviour (it could change the
+# caret colour and the text colour or just the text colour).
+
+== placeholder-1-text.html placeholder-visible-ref.html
+== placeholder-1-password.html placeholder-visible-ref.html
+== placeholder-1-textarea.html placeholder-visible-textarea-ref.html
+== placeholder-2.html placeholder-visible-ref.html
+== placeholder-2-textarea.html placeholder-visible-textarea-ref.html
+== placeholder-3.html placeholder-overridden-ref.html
+== placeholder-4.html placeholder-overridden-ref.html
+== placeholder-5.html placeholder-visible-ref.html
+fuzzy-if(winWidget,160,10) fuzzy-if(Android,1,1) fuzzy-if(asyncPan&&!layersGPUAccelerated,146,317) fuzzy-if(OSX==1010&&browserIsRemote,1,8) == placeholder-6.html placeholder-overflow-ref.html
+skip-if(Android&&asyncPan) == placeholder-6-textarea.html placeholder-overflow-textarea-ref.html
+# needs-focus == placeholder-7.html placeholder-focus-ref.html
+# needs-focus == placeholder-8.html placeholder-focus-ref.html
+# needs-focus == placeholder-9.html placeholder-focus-ref.html
+needs-focus == placeholder-10.html placeholder-visible-ref.html
+== placeholder-11.html placeholder-visible-ref.html
+== placeholder-12.html placeholder-visible-ref.html
+== placeholder-13.html placeholder-visible-ref.html
+== placeholder-14.html placeholder-visible-ref.html
+== placeholder-18.html placeholder-overridden-ref.html
+random-if(winWidget) == placeholder-19.xul  placeholder-overridden-ref.xul
+# needs-focus == placeholder-20.html placeholder-focus-ref.html
+needs-focus == placeholder-21.html placeholder-blank-ref.html
+needs-focus == placeholder-22.html placeholder-blank-ref.html
+== placeholder-rtl.html placeholder-rtl-ref.html
+pref(dom.placeholder.show_on_focus,false) needs-focus == placeholder-focus-pref.html placeholder-blank-ref.html
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-ref.html
new file mode 100644
index 000000000..ae95d4e23
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-ref.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) > .progress-bar { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) > .progress-bar { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) > .progress-bar { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) > .progress-bar { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) > .progress-bar { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) > .progress-bar { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) > .progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) > .progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) > .progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) > .progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) > .progress-bar { margin: 200px; padding: 0px; }
+    body > div:nth-child(16) > .progress-bar { margin: 0px; padding: 200px; }
+    /* 15 - 18 should have 100% width, no need to specify. */
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
new file mode 100644
index 000000000..102fb61f5
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(2) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(3) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(4) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    /* 15 - 18 should have 100% width, no need to specify. */
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html
new file mode 100644
index 000000000..711dc26ba
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > progress:nth-child(1)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > progress:nth-child(2)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > progress:nth-child(3)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > progress:nth-child(4)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > progress:nth-child(5)::-moz-progress-bar { width: 1000px; }
+    body > progress:nth-child(6)::-moz-progress-bar { width: 10px; }
+    body > progress:nth-child(7)::-moz-progress-bar { width: 10%; }
+    body > progress:nth-child(8)::-moz-progress-bar { width: 200%; }
+  </style>
+  <body dir='rtl'>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <!-- Those will be used to change width. -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
new file mode 100644
index 000000000..972d2ca49
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    .progress-element { margin: 10px; }
+    body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(2) > .progress-bar { }
+    body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
+    body > div:nth-child(5) > .progress-bar { }
+    body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); }
+    body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
+    body > div:nth-child(8) > .progress-bar { }
+    body > div:nth-child(9) > .progress-bar { }
+    body > div:nth-child(10) > .progress-bar { }
+    body > div:nth-child(11) > .progress-bar { }
+    /* 12 - 15 should have 100% width, no need to specify. */
+    body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px; left: 64px;
+                                                 height: -moz-calc(100% - 32px);
+                                                 width: -moz-calc(100% + 128px - 1em); }
+  </style>
+  <body>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <br><div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
new file mode 100644
index 000000000..ddf951f1a
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    .progress-element { margin: 10px; }
+    body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(2) > .progress-bar { }
+    body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
+    body > div:nth-child(5) > .progress-bar { }
+    body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); }
+    body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
+    body > div:nth-child(8) > .progress-bar { }
+    body > div:nth-child(9) > .progress-bar { }
+    body > div:nth-child(10) > .progress-bar {  }
+    body > div:nth-child(11) > .progress-bar { }
+    /* 12 - 15 should have 100% width, no need to specify. */
+    body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px;
+                                                 left: -moz-calc(100% + 128px + 32px );
+                                                 height: -moz-calc(100% - 32px);
+                                                 width: -moz-calc(100% + 128px - 1em); }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <br><div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
new file mode 100644
index 000000000..312d69f52
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      margin: 10px;
+      -moz-orient: vertical;
+    }
+    body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
+    body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
+    body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
+    body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
+    body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
+    body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
+    body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
+    body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
+  </style>
+  <body dir='rtl'>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <!-- Those will be used to change width. -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <br><progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html
new file mode 100644
index 000000000..0ef17f167
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      margin: 10px;
+      -moz-orient: vertical;
+    }
+    body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
+    body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
+    body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
+    body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
+    body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
+    body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
+    body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
+    body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <!-- Those will be used to change width. -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <br><progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element.html b/layout/reftests/forms/progress/bar-pseudo-element.html
new file mode 100644
index 000000000..15caf21ef
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > progress:nth-child(1)::-moz-progress-bar { margin: 10px; padding: 0px; }
+    body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 10px; }
+    body > progress:nth-child(3)::-moz-progress-bar { margin: 10px; padding: 10px; }
+    body > progress:nth-child(4)::-moz-progress-bar { margin: 5px; padding: 5px; }
+    body > progress:nth-child(5)::-moz-progress-bar { margin: 50px; padding: 50px; }
+    body > progress:nth-child(6)::-moz-progress-bar { margin: 100px; padding: 100px; }
+    body > progress:nth-child(7)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > progress:nth-child(8)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > progress:nth-child(9)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > progress:nth-child(10)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > progress:nth-child(12)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > progress:nth-child(13)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > progress:nth-child(14)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > progress:nth-child(15)::-moz-progress-bar { margin: 200px; padding: 0px; }
+    body > progress:nth-child(16)::-moz-progress-bar { margin: 0px; padding: 200px; }
+    body > progress:nth-child(17)::-moz-progress-bar { width: 1000px; }
+    body > progress:nth-child(18)::-moz-progress-bar { width: 10px; }
+    body > progress:nth-child(19)::-moz-progress-bar { width: 10%; }
+    body > progress:nth-child(20)::-moz-progress-bar { width: 200%; }
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <!-- Those will be used to change width. -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/block-invalidate-ref.html b/layout/reftests/forms/progress/block-invalidate-ref.html
new file mode 100644
index 000000000..c06092f72
--- /dev/null
+++ b/layout/reftests/forms/progress/block-invalidate-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress { display: block; }
+  </style>
+  <body>
+    <progress value='0.5'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/block-invalidate.html b/layout/reftests/forms/progress/block-invalidate.html
new file mode 100644
index 000000000..47ba03bda
--- /dev/null
+++ b/layout/reftests/forms/progress/block-invalidate.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress { display: block; }
+  </style>
+  <script>
+    function loadHandler() {
+      setTimeout(function() {
+        var p = document.getElementsByTagName('progress')[0];
+        p.value = '0.5';
+        document.documentElement.className = '';
+      }, 0);
+    }
+  </script>
+  <body onload="loadHandler();">
+    <progress value='0'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/in-cells-ref.html b/layout/reftests/forms/progress/in-cells-ref.html
new file mode 100644
index 000000000..700270621
--- /dev/null
+++ b/layout/reftests/forms/progress/in-cells-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress { width: 10em; height: 1em; }
+    progress.vertical { -moz-orient: vertical; width: 1em; height: 10em; }
+  </style>
+  <body>
+    <table>
+      <tr>
+        <td>foo</td>
+        <td><progress value='0.5'></progress></td>
+        <td>bar</td>
+      </tr>
+      <tr>
+        <td>foo</td>
+        <td><progress class='vertical' value='0.5'></progress></td>
+        <td>bar</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/in-cells.html b/layout/reftests/forms/progress/in-cells.html
new file mode 100644
index 000000000..fc3614347
--- /dev/null
+++ b/layout/reftests/forms/progress/in-cells.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress.vertical { -moz-orient: vertical; }
+  </style>
+  <body>
+    <table>
+      <tr>
+        <td>foo</td>
+        <td><progress value='0.5'></progress></td>
+        <td>bar</td>
+      </tr>
+      <tr>
+        <td>foo</td>
+        <td><progress class='vertical' value='0.5'></progress></td>
+        <td>bar</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/indeterminate-style-height-ref.html b/layout/reftests/forms/progress/indeterminate-style-height-ref.html
new file mode 100644
index 000000000..d53eb069c
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-height-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div.progress-element {
+      height: 12em;
+      width: 2em;
+    }
+    div.progress-bar {
+      height: 100%;
+    }
+    body > div:nth-child(1) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 20px); height: 20px; }
+    body > div:nth-child(2) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 0px); height: 0px; }
+    body > div:nth-child(3) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 50%); height: 50%; }
+    body > div:nth-child(4) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 1em); height: 1em; }
+    body > div:nth-child(5) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 100%); height: 100%; }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/progress/indeterminate-style-height.html b/layout/reftests/forms/progress/indeterminate-style-height.html
new file mode 100644
index 000000000..ddefd0afa
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-height.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+      height: 12em;
+      width: 2em;
+    }
+    body > progress:nth-child(1)::-moz-progress-bar { height: 20px; }
+    body > progress:nth-child(2)::-moz-progress-bar { height: 0px; }
+    body > progress:nth-child(3)::-moz-progress-bar { height: 50%; }
+    body > progress:nth-child(4)::-moz-progress-bar { height: 1em; }
+    /* last one is for the default value: width=100%. */
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/indeterminate-style-width-ref.html b/layout/reftests/forms/progress/indeterminate-style-width-ref.html
new file mode 100644
index 000000000..8a135b2ea
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-width-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div.progress-bar {
+      width:100%;
+    }
+    body > div:nth-child(1) > .progress-bar { width: 20px; }
+    body > div:nth-child(2) > .progress-bar { width: 0px; }
+    body > div:nth-child(3) > .progress-bar { width: 50%; }
+    body > div:nth-child(4) > .progress-bar { width: 1em; }
+    body > div:nth-child(5) > .progress-bar { width: 100%; }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/progress/indeterminate-style-width.html b/layout/reftests/forms/progress/indeterminate-style-width.html
new file mode 100644
index 000000000..f5db8ff66
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-width.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > progress:nth-child(1)::-moz-progress-bar { width: 20px; }
+    body > progress:nth-child(2)::-moz-progress-bar { width: 0px; }
+    body > progress:nth-child(3)::-moz-progress-bar { width: 50%; }
+    body > progress:nth-child(4)::-moz-progress-bar { width: 1em; }
+    /* last one is for the default value: width=100%. */
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-ref.html b/layout/reftests/forms/progress/margin-padding-ref.html
new file mode 100644
index 000000000..33f35c306
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-rtl-ref.html
new file mode 100644
index 000000000..dcf76f0f3
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-rtl.html b/layout/reftests/forms/progress/margin-padding-rtl.html
new file mode 100644
index 000000000..fc445c36c
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-rtl.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress:nth-child(1) { margin: 10px; padding: 0px; }
+    progress:nth-child(2) { margin: 0px; padding: 10px; }
+    progress:nth-child(3) { margin: 10px; padding: 10px; }
+    progress:nth-child(4) { margin: 5px; padding: 5px; }
+    progress:nth-child(5) { margin: 50px; padding: 50px; }
+    progress:nth-child(6) { margin: 100px; padding: 100px; }
+    progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-ref.html
new file mode 100644
index 000000000..1d964bdfa
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
new file mode 100644
index 000000000..986a7ca44
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html
new file mode 100644
index 000000000..7be45b2c1
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+    }
+    progress:nth-child(1) { margin: 10px; padding: 0px; }
+    progress:nth-child(2) { margin: 0px; padding: 10px; }
+    progress:nth-child(3) { margin: 10px; padding: 10px; }
+    progress:nth-child(4) { margin: 5px; padding: 5px; }
+    progress:nth-child(5) { margin: 50px; padding: 50px; }
+    progress:nth-child(6) { margin: 100px; padding: 100px; }
+    progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical.html b/layout/reftests/forms/progress/margin-padding-vertical.html
new file mode 100644
index 000000000..8e4d48565
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+    }
+    progress:nth-child(1) { margin: 10px; padding: 0px; }
+    progress:nth-child(2) { margin: 0px; padding: 10px; }
+    progress:nth-child(3) { margin: 10px; padding: 10px; }
+    progress:nth-child(4) { margin: 5px; padding: 5px; }
+    progress:nth-child(5) { margin: 50px; padding: 50px; }
+    progress:nth-child(6) { margin: 100px; padding: 100px; }
+    progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding.html b/layout/reftests/forms/progress/margin-padding.html
new file mode 100644
index 000000000..fe4f3d003
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress:nth-child(1) { margin: 10px; padding: 0px; }
+    progress:nth-child(2) { margin: 0px; padding: 10px; }
+    progress:nth-child(3) { margin: 10px; padding: 10px; }
+    progress:nth-child(4) { margin: 5px; padding: 5px; }
+    progress:nth-child(5) { margin: 50px; padding: 50px; }
+    progress:nth-child(6) { margin: 100px; padding: 100px; }
+    progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/max-height-ref.html b/layout/reftests/forms/progress/max-height-ref.html
new file mode 100644
index 000000000..872f9cc82
--- /dev/null
+++ b/layout/reftests/forms/progress/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  progress {
+    height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<progress>Some text</progress>
diff --git a/layout/reftests/forms/progress/max-height.html b/layout/reftests/forms/progress/max-height.html
new file mode 100644
index 000000000..c9d545330
--- /dev/null
+++ b/layout/reftests/forms/progress/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  progress {
+    max-height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<progress>Some text</progress>
diff --git a/layout/reftests/forms/progress/progress-orient-block.html b/layout/reftests/forms/progress/progress-orient-block.html
new file mode 100644
index 000000000..e5f33c497
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
new file mode 100644
index 000000000..64d715724
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:horizontal" max=100 value=0 dir=rtl>
diff --git a/layout/reftests/forms/progress/progress-orient-horizontal.html b/layout/reftests/forms/progress/progress-orient-horizontal.html
new file mode 100644
index 000000000..e37e46170
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-inline.html b/layout/reftests/forms/progress/progress-orient-inline.html
new file mode 100644
index 000000000..352537ae7
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-vertical-rtl.html b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html
new file mode 100644
index 000000000..7fb4d81be
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:vertical" max=100 value=0 dir=rtl>
diff --git a/layout/reftests/forms/progress/progress-orient-vertical.html b/layout/reftests/forms/progress/progress-orient-vertical.html
new file mode 100644
index 000000000..6a64a5e8c
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-block.html b/layout/reftests/forms/progress/progress-vlr-orient-block.html
new file mode 100644
index 000000000..954bc9dd1
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
new file mode 100644
index 000000000..9584f95d7
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-inline.html b/layout/reftests/forms/progress/progress-vlr-orient-inline.html
new file mode 100644
index 000000000..9ec89960d
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-vertical.html b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html
new file mode 100644
index 000000000..625b543b4
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr.html b/layout/reftests/forms/progress/progress-vlr.html
new file mode 100644
index 000000000..52f42aede
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-block.html b/layout/reftests/forms/progress/progress-vrl-orient-block.html
new file mode 100644
index 000000000..52df5dd29
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
new file mode 100644
index 000000000..03ea99bb8
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-inline.html b/layout/reftests/forms/progress/progress-vrl-orient-inline.html
new file mode 100644
index 000000000..57ee166d0
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-vertical.html b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html
new file mode 100644
index 000000000..becd4504e
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl.html b/layout/reftests/forms/progress/progress-vrl.html
new file mode 100644
index 000000000..a3f0b889f
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl" max=100 value=0>
diff --git a/layout/reftests/forms/progress/reftest-stylo.list b/layout/reftests/forms/progress/reftest-stylo.list
new file mode 100644
index 000000000..5019c4486
--- /dev/null
+++ b/layout/reftests/forms/progress/reftest-stylo.list
@@ -0,0 +1,49 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== values.html values.html
+== values-rtl.html values-rtl.html
+== margin-padding.html margin-padding.html
+== margin-padding-rtl.html margin-padding-rtl.html
+skip-if(B2G||Mulet) == bar-pseudo-element.html bar-pseudo-element.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl.html
+== indeterminate-style-width.html indeterminate-style-width.html
+
+# vertical tests
+== values-vertical.html values-vertical.html
+== values-vertical-rtl.html values-vertical-rtl.html
+== margin-padding-vertical.html margin-padding-vertical.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl.html
+skip-if(B2G||Mulet) == bar-pseudo-element-vertical.html bar-pseudo-element-vertical.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl.html
+== indeterminate-style-height.html indeterminate-style-height.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <progress> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations.html
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate.html
+== in-cells.html in-cells.html
+== max-height.html max-height.html
+
+# Tests for block and inline orientation in combination with writing-mode
+# XXX Remove default-preferences setting here after bug 1138384 makes
+#     it the default for all channels
+
+== progress-orient-horizontal.html progress-orient-horizontal.html
+skip == progress-orient-vertical.html progress-orient-vertical.html
+# only OS X currently has direction-dependent rendering here
+== progress-orient-block.html progress-orient-block.html
+== progress-orient-inline.html progress-orient-inline.html
+== progress-vlr.html progress-vlr.html
+== progress-vlr-orient-block.html progress-vlr-orient-block.html
+== progress-vlr-orient-inline.html progress-vlr-orient-inline.html
+== progress-vlr-orient-horizontal.html progress-vlr-orient-horizontal.html
+== progress-vlr-orient-vertical.html progress-vlr-orient-vertical.html
+== progress-vrl.html progress-vrl.html
+== progress-vrl-orient-block.html progress-vrl-orient-block.html
+== progress-vrl-orient-inline.html progress-vrl-orient-inline.html
+== progress-vrl-orient-horizontal.html progress-vrl-orient-horizontal.html
+== progress-vrl-orient-vertical.html progress-vrl-orient-vertical.html
diff --git a/layout/reftests/forms/progress/reftest.list b/layout/reftests/forms/progress/reftest.list
new file mode 100644
index 000000000..445a76a4d
--- /dev/null
+++ b/layout/reftests/forms/progress/reftest.list
@@ -0,0 +1,42 @@
+== values.html values-ref.html
+== values-rtl.html values-rtl-ref.html
+== margin-padding.html margin-padding-ref.html
+== margin-padding-rtl.html margin-padding-rtl-ref.html
+== bar-pseudo-element.html bar-pseudo-element-ref.html
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
+== indeterminate-style-width.html indeterminate-style-width-ref.html
+
+# vertical tests
+== values-vertical.html values-vertical-ref.html
+== values-vertical-rtl.html values-vertical-rtl-ref.html
+== margin-padding-vertical.html margin-padding-vertical-ref.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html
+== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html
+== indeterminate-style-height.html indeterminate-style-height-ref.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <progress> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations-ref.html
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate-ref.html
+== in-cells.html in-cells-ref.html
+== max-height.html max-height-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= progress-orient-horizontal.html progress-orient-vertical.html
+fails-if(!cocoaWidget||OSX==1010) != progress-orient-vertical.html progress-orient-vertical-rtl.html # only OS X currently has direction-dependent rendering here
+== progress-orient-block.html progress-orient-vertical.html
+== progress-orient-inline.html progress-orient-horizontal.html
+== progress-vlr.html progress-orient-vertical.html
+== progress-vlr-orient-block.html progress-orient-horizontal.html
+== progress-vlr-orient-inline.html progress-orient-vertical.html
+== progress-vlr-orient-horizontal.html progress-orient-horizontal.html
+== progress-vlr-orient-vertical.html progress-orient-vertical.html
+== progress-vrl.html progress-orient-vertical-rtl.html
+== progress-vrl-orient-block.html progress-orient-horizontal-rtl.html
+== progress-vrl-orient-inline.html progress-orient-vertical-rtl.html
+== progress-vrl-orient-horizontal.html progress-orient-horizontal-rtl.html
+== progress-vrl-orient-vertical.html progress-orient-vertical-rtl.html
diff --git a/layout/reftests/forms/progress/style.css b/layout/reftests/forms/progress/style.css
new file mode 100644
index 000000000..025bde8f8
--- /dev/null
+++ b/layout/reftests/forms/progress/style.css
@@ -0,0 +1,39 @@
+div.progress-element {
+  -moz-appearance: progressbar;
+  display: inline-block;
+  height: 1em;
+  width: 10em;
+  vertical-align: -0.2em;
+
+  /* Default style in case of there is -moz-appearance: none; */
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow #e6e6e6;
+  -moz-border-right-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-left-colors: ThreeDShadow #e6e6e6;
+  background-color: #e6e6e6;
+}
+
+div.progress-element.vertical {
+  height: 10em;
+  width: 1em;
+}
+
+div.progress-bar {
+  -moz-appearance: progresschunk;
+  height: 100%;
+  /*
+   * We can't apply the following style to the reference because it will have
+   * underisable effectes:
+   * width: 100%;
+   */
+
+  box-sizing: border-box;
+
+  /* Default style in case of there is -moz-appearance: none; */
+  background-color: #0064b4;
+}
+
+progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
+  -moz-appearance: none;
+}
diff --git a/layout/reftests/forms/progress/transformations-ref.html b/layout/reftests/forms/progress/transformations-ref.html
new file mode 100644
index 000000000..f77751ac8
--- /dev/null
+++ b/layout/reftests/forms/progress/transformations-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    body > div:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+    body > div:nth-child(3) { -moz-transform: rotate(30deg); }
+    body > div:nth-child(4) { -moz-transform: scale(2, 4); }
+    body > div:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+    body > div:nth-child(6) { -moz-transform: scale(1, 0.4); }
+    body > div:nth-child(7) { -moz-transform: scale(0.1, 1); }
+    body > div:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+    body > div:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+    body > div:nth-child(10) { -moz-transform: translate(10px, 30px); }
+    body > div:nth-child(11) { -moz-transform: translate(30px, 10px); }
+    body > div:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+    body > div:nth-child(13) { -moz-transform: translate(30px, -10px); }
+    body > div:nth-child(14) { -moz-transform: scale(0, 0); }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/transformations.html b/layout/reftests/forms/progress/transformations.html
new file mode 100644
index 000000000..d15637977
--- /dev/null
+++ b/layout/reftests/forms/progress/transformations.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    progress:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+    progress:nth-child(3) { -moz-transform: rotate(30deg); }
+    progress:nth-child(4) { -moz-transform: scale(2, 4); }
+    progress:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+    progress:nth-child(6) { -moz-transform: scale(1, 0.4); }
+    progress:nth-child(7) { -moz-transform: scale(0.1, 1); }
+    progress:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+    progress:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+    progress:nth-child(10) { -moz-transform: translate(10px, 30px); }
+    progress:nth-child(11) { -moz-transform: translate(30px, 10px); }
+    progress:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+    progress:nth-child(13) { -moz-transform: translate(30px, -10px); }
+    progress:nth-child(14) { -moz-transform: scale(0, 0); }
+  </style>
+  <body>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-ref.html b/layout/reftests/forms/progress/values-ref.html
new file mode 100644
index 000000000..048e1164c
--- /dev/null
+++ b/layout/reftests/forms/progress/values-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .progress-bar { width: 100%; }
+    div:nth-child(2) > .progress-bar { width: 0%; }
+    div:nth-child(3) > .progress-bar { width: 10%; }
+    div:nth-child(4) > .progress-bar { width: 50%; }
+    div:nth-child(5) > .progress-bar { width: 0%; }
+    div:nth-child(6) > .progress-bar { width: 100%; }
+    div:nth-child(7) > .progress-bar { width: 42%; }
+    div:nth-child(8) > .progress-bar { width: 100%; }
+    div:nth-child(9) > .progress-bar { width: 100%; }
+    div:nth-child(10) > .progress-bar { width: 10%; }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-rtl-ref.html b/layout/reftests/forms/progress/values-rtl-ref.html
new file mode 100644
index 000000000..99bf9fb2a
--- /dev/null
+++ b/layout/reftests/forms/progress/values-rtl-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .progress-bar { width: 100%; }
+    div:nth-child(2) > .progress-bar { width: 0%; }
+    div:nth-child(3) > .progress-bar { width: 10%; }
+    div:nth-child(4) > .progress-bar { width: 50%; }
+    div:nth-child(5) > .progress-bar { width: 0%; }
+    div:nth-child(6) > .progress-bar { width: 100%; }
+    div:nth-child(7) > .progress-bar { width: 42%; }
+    div:nth-child(8) > .progress-bar { width: 100%; }
+    div:nth-child(9) > .progress-bar { width: 100%; }
+    div:nth-child(10) > .progress-bar { width: 10%; }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-rtl.html b/layout/reftests/forms/progress/values-rtl.html
new file mode 100644
index 000000000..6a143b0c1
--- /dev/null
+++ b/layout/reftests/forms/progress/values-rtl.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body dir='rtl'>
+    <progress value="1.0"></progress>
+    <progress value="0.0"></progress>
+    <progress value="0.1"></progress>
+    <progress value="0.5"></progress>
+    <progress value="-1"></progress>
+    <progress value="42"></progress>
+    <progress value="42" max="100"></progress>
+    <progress value="42" max="1"></progress>
+    <progress value="42" max="-1"></progress>
+    <progress value="0.1" max="-1"></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-ref.html b/layout/reftests/forms/progress/values-vertical-ref.html
new file mode 100644
index 000000000..e6d85b317
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
+    div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
+  </style>
+  <body>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-rtl-ref.html b/layout/reftests/forms/progress/values-vertical-rtl-ref.html
new file mode 100644
index 000000000..6da23eae6
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-rtl-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
+    div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-rtl.html b/layout/reftests/forms/progress/values-vertical-rtl.html
new file mode 100644
index 000000000..b50db9ad2
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+    }
+  </style>
+  <body dir='rtl'>
+    <progress value="1.0"></progress>
+    <progress value="0.0"></progress>
+    <progress value="0.1"></progress>
+    <progress value="0.5"></progress>
+    <progress value="-1"></progress>
+    <progress value="42"></progress>
+    <progress value="42" max="100"></progress>
+    <progress value="42" max="1"></progress>
+    <progress value="42" max="-1"></progress>
+    <progress value="0.1" max="-1"></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical.html b/layout/reftests/forms/progress/values-vertical.html
new file mode 100644
index 000000000..47294fdeb
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+    }
+  </style>
+  <body>
+    <progress value="1.0"></progress>
+    <progress value="0.0"></progress>
+    <progress value="0.1"></progress>
+    <progress value="0.5"></progress>
+    <progress value="-1"></progress>
+    <progress value="42"></progress>
+    <progress value="42" max="100"></progress>
+    <progress value="42" max="1"></progress>
+    <progress value="42" max="-1"></progress>
+    <progress value="0.1" max="-1"></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values.html b/layout/reftests/forms/progress/values.html
new file mode 100644
index 000000000..3c5e3e80b
--- /dev/null
+++ b/layout/reftests/forms/progress/values.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <progress value="1.0"></progress>
+    <progress value="0.0"></progress>
+    <progress value="0.1"></progress>
+    <progress value="0.5"></progress>
+    <progress value="-1"></progress>
+    <progress value="42"></progress>
+    <progress value="42" max="100"></progress>
+    <progress value="42" max="1"></progress>
+    <progress value="42" max="-1"></progress>
+    <progress value="0.1" max="-1"></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/reftest-stylo.list b/layout/reftests/forms/reftest-stylo.list
new file mode 100644
index 000000000..cfea24b9a
--- /dev/null
+++ b/layout/reftests/forms/reftest-stylo.list
@@ -0,0 +1,36 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip-if(B2G||Mulet) fuzzy-if(skiaContent,1,10) HTTP(..) == text-control-baseline-1.html text-control-baseline-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+
+# button element
+include button/reftest-stylo.list
+
+# legend element
+include legend/reftest-stylo.list
+
+# fieldset element
+include fieldset/reftest-stylo.list
+
+# placeholder
+include placeholder/reftest-stylo.list
+
+# input
+include input/reftest-stylo.list
+
+# meter element
+include meter/reftest-stylo.list
+
+# output element
+include output/reftest-stylo.list
+
+# progress element
+include progress/reftest-stylo.list
+
+# select element
+include select/reftest-stylo.list
+
+# textarea element
+include textarea/reftest-stylo.list
+
+# textbox element
+include textbox/reftest-stylo.list
diff --git a/layout/reftests/forms/reftest.list b/layout/reftests/forms/reftest.list
new file mode 100644
index 000000000..d45db276f
--- /dev/null
+++ b/layout/reftests/forms/reftest.list
@@ -0,0 +1,34 @@
+fuzzy-if(skiaContent,1,10) HTTP(..) == text-control-baseline-1.html text-control-baseline-1-ref.html
+
+# button element
+include button/reftest.list
+
+# legend element
+include legend/reftest.list
+
+# fieldset element
+include fieldset/reftest.list
+
+# placeholder
+include placeholder/reftest.list
+
+# input
+include input/reftest.list
+
+# meter element
+include meter/reftest.list
+
+# output element
+include output/reftest.list
+
+# progress element
+include progress/reftest.list
+
+# select element
+include select/reftest.list
+
+# textarea element
+include textarea/reftest.list
+
+# textbox element
+include textbox/reftest.list
diff --git a/layout/reftests/forms/select/997709-2-ref.html b/layout/reftests/forms/select/997709-2-ref.html
new file mode 100644
index 000000000..349abe0b7
--- /dev/null
+++ b/layout/reftests/forms/select/997709-2-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<html><body>
+<select style="display:block"><option>A</select>
+</body></html>
diff --git a/layout/reftests/forms/select/997709-2.html b/layout/reftests/forms/select/997709-2.html
new file mode 100644
index 000000000..46be45418
--- /dev/null
+++ b/layout/reftests/forms/select/997709-2.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<html><body>
+<select style="display:flex"><option>A</select>
+</body></html>
diff --git a/layout/reftests/forms/select/boguskids-ref.html b/layout/reftests/forms/select/boguskids-ref.html
new file mode 100644
index 000000000..905b64649
--- /dev/null
+++ b/layout/reftests/forms/select/boguskids-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <select size="10">
+      <option>one</option>
+      <option>two</option>
+      <optgroup>
+        <option>three</option>
+        <option>four</option>
+      </optgroup>
+    </select>
+  </body>
+</html>
diff --git a/layout/reftests/forms/select/boguskids.html b/layout/reftests/forms/select/boguskids.html
new file mode 100644
index 000000000..102f820c8
--- /dev/null
+++ b/layout/reftests/forms/select/boguskids.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <select size="10">
+      Shouldn't see me
+      <option>one</option>
+      Or me
+      <option>two</option>
+      <optgroup>
+        I should hide too
+        <option>three</option>
+        And me too
+        <option>four</option>
+      </optgroup>
+      And I
+    </select>
+  </body>
+</html>
diff --git a/layout/reftests/forms/select/dynamic-boguskids.html b/layout/reftests/forms/select/dynamic-boguskids.html
new file mode 100644
index 000000000..2a6b7c261
--- /dev/null
+++ b/layout/reftests/forms/select/dynamic-boguskids.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script>
+    function doIt() {
+      var insertions = [
+        [ "opt1", "Shouldn't see me" ],
+        [ "opt2", "Or me" ],
+        [ "opt3", "I should hide too" ],
+        [ "opt4", "And me too" ]
+      ];
+      for (var i = 0; i < insertions.length; ++i) {
+        var next = document.getElementById(insertions[i][0]);
+        next.parentNode.insertBefore(document.createTextNode(insertions[i][1]),
+                                     next);
+      }
+      document.getElementById("sel").appendChild(document.createTextNode("And I"));
+    }
+    </script>
+  </head>
+  <body onload="doIt()">
+    <select size="10" id="sel">
+      <option id="opt1">one</option>
+      <option id="opt2">two</option>
+      <optgroup>
+        <option id="opt3">three</option>
+        <option id="opt4">four</option>
+      </optgroup>
+    </select>
+  </body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-1-ref.html b/layout/reftests/forms/select/focusring-1-ref.html
new file mode 100644
index 000000000..9118d265e
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+    <meta charset="utf-8">
+    <title>Testcase #1 for bug 1253977</title>
+    <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+  border:2px solid black;
+}
+:-moz-focusring {
+  outline: 2px dashed black;
+}
+
+    </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+<input>
+
+<script>
+
+function runTests() {
+  var b = document.querySelector("input");
+  b.focus();
+  document.body.offsetHeight;
+  setTimeout(function(){ document.body.offsetHeight; document.documentElement.removeAttribute("class"); }, 100);
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests, false);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-1.html b/layout/reftests/forms/select/focusring-1.html
new file mode 100644
index 000000000..fa3bb204f
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+    <meta charset="utf-8">
+    <title>Testcase #1 for bug 1253977</title>
+    <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+  border:2px solid black;
+}
+:-moz-focusring {
+  outline: 2px dashed black;
+}
+
+    </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+<input>
+
+<script>
+
+function runTests() {
+  var s = document.querySelector("select");
+  var b = document.querySelector("input");
+  s.focus();
+  document.body.offsetHeight;
+  setTimeout(function(){ s.style.display = 'none'; document.body.offsetHeight; }, 2);
+  setTimeout(function(){ b.focus(); document.body.offsetHeight; }, 3);
+  setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4);
+  setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100);
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests, false);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-2-ref.html b/layout/reftests/forms/select/focusring-2-ref.html
new file mode 100644
index 000000000..c7c16a5e5
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-2-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html><head>
+    <meta charset="utf-8">
+    <title>Testcase #2 for bug 1253977</title>
+    <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+  border:2px solid black;
+}
+:-moz-focusring {
+  outline: 2px dashed black;
+}
+
+    </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-2.html b/layout/reftests/forms/select/focusring-2.html
new file mode 100644
index 000000000..413ca3a83
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-2.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+    <meta charset="utf-8">
+    <title>Testcase #2 for bug 1253977</title>
+    <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+  border:2px solid black;
+}
+:-moz-focusring {
+  outline: 2px dashed black;
+}
+
+    </style>
+</head>
+<body>
+
+<select onfocus="continueTest1()" onblur="continueTest2()"><option>1<option>2</select>
+
+<script>
+
+function continueTest2(){
+  var s = document.querySelector("select");
+  setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4);
+  setTimeout(function(){ document.body.offsetHeight; document.documentElement.removeAttribute("class"); }, 100);
+}
+
+function continueTest1(){
+  var s = document.querySelector("select");
+  setTimeout(function(){ s.style.display = 'none';   }, 2);
+  setTimeout(function(){ s.blur();  document.body.offsetHeight; }, 3);
+}
+
+function runTests(){
+  var s = document.querySelector("select");
+  s.focus();
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests, false);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-3-ref.html b/layout/reftests/forms/select/focusring-3-ref.html
new file mode 100644
index 000000000..0238f8bdb
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-3-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+    <meta charset="utf-8">
+    <title>Testcase #3 for bug 1253977</title>
+    <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+  border:2px solid black;
+}
+:-moz-focusring {
+  outline: 2px dashed black;
+}
+
+    </style>
+</head>
+<body>
+
+<select><option>1<option>2</select>
+
+<script>
+
+function runTests(){
+  var s = document.querySelector("select");
+  s.focus();
+  document.body.offsetHeight;
+  setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100);
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests, false);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/focusring-3.html b/layout/reftests/forms/select/focusring-3.html
new file mode 100644
index 000000000..4a51476db
--- /dev/null
+++ b/layout/reftests/forms/select/focusring-3.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait"><head>
+    <meta charset="utf-8">
+    <title>Testcase #3 for bug 1253977</title>
+    <style type="text/css">
+
+* { -moz-appearance:none; }
+:focus {
+  border:2px solid black;
+}
+:-moz-focusring {
+  outline: 2px dashed black;
+}
+
+    </style>
+</head>
+<body>
+
+<select onfocus="continueTest1()"><option>1<option>2</select>
+
+<script>
+
+function continueTest1(){
+  var s = document.querySelector("select");
+  setTimeout(function(){ s.style.display = 'none';   }, 2);
+  setTimeout(function(){ s.style.display = 'inline'; document.body.offsetHeight; }, 4);
+  setTimeout(function(){ document.documentElement.removeAttribute("class"); }, 100);
+}
+function runTests(){
+  var s = document.querySelector("select");
+  s.focus();
+}
+
+window.focus();
+window.addEventListener("MozReftestInvalidate", runTests, false);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/forms/select/multiple-ref.html b/layout/reftests/forms/select/multiple-ref.html
new file mode 100644
index 000000000..70bdac6bc
--- /dev/null
+++ b/layout/reftests/forms/select/multiple-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <select size='4'>
+      <option>Tulip</option>
+      <option>Lily</option>
+      <option>Gagea</option>
+      <option>Snowflake</option>
+      <option>Ismene</option>
+    </select>
+  </body>
+</html>
diff --git a/layout/reftests/forms/select/multiple.html b/layout/reftests/forms/select/multiple.html
new file mode 100644
index 000000000..6b95eebc5
--- /dev/null
+++ b/layout/reftests/forms/select/multiple.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <select multiple>
+      <option>Tulip</option>
+      <option>Lily</option>
+      <option>Gagea</option>
+      <option>Snowflake</option>
+      <option>Ismene</option>
+    </select>
+  </body>
+</html>
diff --git a/layout/reftests/forms/select/option-children-ref.html b/layout/reftests/forms/select/option-children-ref.html
new file mode 100644
index 000000000..09f6d19f0
--- /dev/null
+++ b/layout/reftests/forms/select/option-children-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Option elements with children</title>
+<body>
+<select><option>font</option></select>
diff --git a/layout/reftests/forms/select/option-children.html b/layout/reftests/forms/select/option-children.html
new file mode 100644
index 000000000..357247b56
--- /dev/null
+++ b/layout/reftests/forms/select/option-children.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Option elements with children</title>
+<body>
+<script>
+document.body
+  .appendChild(document.createElement("select"))
+  .appendChild(document.createElement("option"))
+  .appendChild(document.createElement("font"))
+  .appendChild(document.createTextNode("font"))
+</script>
diff --git a/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html b/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html
new file mode 100644
index 000000000..413024176
--- /dev/null
+++ b/layout/reftests/forms/select/out-of-bounds-selectedindex-ref.html
@@ -0,0 +1,112 @@
+<html class="reftest-wait">
+<head><title>Testcase for bug 471741</title>
+<script>
+function sel(id,index) {
+  var el = document.getElementById(id)
+  el.selectedIndex = index;
+}
+
+</script>
+</head>
+<body>
+<select size="4" id="m1" multiple="multiple">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+<select size="1" id="s1">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="m2" multiple="multiple">
+	<option value="Item0">Item0</option>
+</select>
+<select size="1" id="s2">
+	<option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="m3" multiple="multiple"></select>
+<select size="1" id="s3"></select>
+<br>
+
+<select size="4" id="r2m1" multiple="multiple">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+<select size="1" id="r2s1">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r2m2" multiple="multiple">
+	<option value="Item0">Item0</option>
+</select>
+<select size="1" id="r2s2">
+	<option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r2m3" multiple="multiple"></select>
+<select size="1" id="r2s3"></select>
+<br>
+
+<select size="4" id="r3m1" multiple="multiple">
+	<option selected="selected" value="Item0">Item0</option>
+	<option value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+<select size="1" id="r3s1">
+	<option selected="selected" value="Item0">Item0</option>
+	<option value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r3m2" multiple="multiple">
+	<option selected="selected" value="Item0">Item0</option>
+</select>
+<select size="1" id="r3s2">
+	<option selected="selected" value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r3m3" multiple="multiple"></select>
+<select size="1" id="r3s3"></select>
+<br>
+
+<div id="result">Result: -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 0 0 0 0 -1 -1 </div>
+
+<script>
+sel('m1', -1)
+sel('s1', -1)
+sel('m2', -1)
+sel('s2', -1)
+sel('m3', -1)
+sel('s3', -1)
+
+sel('r2m1', -1)
+sel('r2s1', -1)
+sel('r2m2', -1)
+sel('r2s2', -1)
+sel('r2m3', -1)
+sel('r2s3', -1)
+
+var flush = document.documentElement.offsetHeight;
+document.documentElement.className='';
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/select/out-of-bounds-selectedindex.html b/layout/reftests/forms/select/out-of-bounds-selectedindex.html
new file mode 100644
index 000000000..4ae9ed06b
--- /dev/null
+++ b/layout/reftests/forms/select/out-of-bounds-selectedindex.html
@@ -0,0 +1,129 @@
+<html class="reftest-wait">
+<head><title>Testcase for bug 471741</title>
+<script>
+var result = "Result: "
+function sel(id,index) {
+  var el = document.getElementById(id)
+  el.selectedIndex = index;
+  result += el.selectedIndex + ' ';
+}
+
+</script>
+</head>
+<body id="body">
+<select size="4" id="m1" multiple="multiple">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+<select size="1" id="s1">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="m2" multiple="multiple">
+	<option value="Item0">Item0</option>
+</select>
+<select size="1" id="s2">
+	<option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="m3" multiple="multiple"></select>
+<select size="1" id="s3"></select>
+<br>
+
+<select size="4" id="r2m1" multiple="multiple">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+<select size="1" id="r2s1">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r2m2" multiple="multiple">
+	<option value="Item0">Item0</option>
+</select>
+<select size="1" id="r2s2">
+	<option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r2m3" multiple="multiple"></select>
+<select size="1" id="r2s3"></select>
+<br>
+
+<select size="4" id="r3m1" multiple="multiple">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+<select size="1" id="r3s1">
+	<option value="Item0">Item0</option>
+	<option selected="selected" value="Item1">Item1</option>
+	<option value="Item2">Item2</option>
+	<option value="Item3">Item3</option>
+	<option value="Item4">Item4</option>
+</select>
+
+<select size="4" id="r3m2" multiple="multiple">
+	<option value="Item0">Item0</option>
+</select>
+<select size="1" id="r3s2">
+	<option value="Item0">Item0</option>
+</select>
+
+<select size="4" id="r3m3" multiple="multiple"></select>
+<select size="1" id="r3s3"></select>
+<br>
+
+<div id="result"></div>
+
+<script>
+sel('m1', 10)
+sel('s1', 10)
+sel('m2', 99999)
+sel('s2', 99999)
+sel('m3', 10)
+sel('s3', 10)
+
+sel('r2m1', -2)
+sel('r2s1', -2)
+sel('r2m2', -12)
+sel('r2s2', -12)
+sel('r2m3', -2)
+sel('r2s3', -2)
+
+sel('r3m1', -2)
+sel('r3s1', -2)
+sel('r3m2', -12)
+sel('r3s2', -12)
+sel('r3m3', -2)
+sel('r3s3', -2)
+sel('r3m1', 0)
+sel('r3s1', 0)
+sel('r3m2', 0)
+sel('r3s2', 0)
+sel('r3m3', 0)
+sel('r3s3', 0)
+
+document.getElementById('result').innerHTML = result;
+
+var flush = document.documentElement.offsetHeight;
+document.documentElement.className='';
+
+</script>
+</body>
+</html>
diff --git a/layout/reftests/forms/select/padding-button-placement-ref.html b/layout/reftests/forms/select/padding-button-placement-ref.html
new file mode 100644
index 000000000..342b404c6
--- /dev/null
+++ b/layout/reftests/forms/select/padding-button-placement-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    </head>
+    <body>
+        <div style="box-sizing:border-box; width:402px; height:202px; border:1px solid black; border-right:50px solid black;"></div>
+        <div style="box-sizing:border-box; width:402px; height:202px; border:1px solid black; border-left:50px solid black;"></div>
+    </body>
+</html>
diff --git a/layout/reftests/forms/select/padding-button-placement.html b/layout/reftests/forms/select/padding-button-placement.html
new file mode 100644
index 000000000..370715032
--- /dev/null
+++ b/layout/reftests/forms/select/padding-button-placement.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    </head>
+    <body>
+        <!-- The div's border should hide the select's button -->
+        <!-- z-index:1 works around an unrelated bug in B2G -->
+        <div style="position:absolute; z-index:1; box-sizing:border-box; width:402px; height:202px; border-right:50px solid black;"></div>
+        <div><select style="background:transparent; border-radius:0; box-sizing:content-box; padding:50px; width:300px; height:100px; border:1px solid black; direction:ltr"></select></div>
+
+        <div style="position:absolute; z-index:1; box-sizing:border-box; width:402px; height:202px; border-left:50px solid black;"></div>
+        <div><select style="background:transparent; border-radius:0; box-sizing:content-box; padding:50px; width:300px; height:100px; border:1px solid black; direction:rtl"></select></div>
+    </body>
+</html>
diff --git a/layout/reftests/forms/select/reftest-stylo.list b/layout/reftests/forms/select/reftest-stylo.list
new file mode 100644
index 000000000..998f27237
--- /dev/null
+++ b/layout/reftests/forms/select/reftest-stylo.list
@@ -0,0 +1,15 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+fuzzy-if(Android,2,2) skip-if(B2G||Mulet) == out-of-bounds-selectedindex.html out-of-bounds-selectedindex.html
+# test for bug 471741
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == multiple.html multiple.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== boguskids.html boguskids.html
+== dynamic-boguskids.html dynamic-boguskids.html
+== option-children.html option-children.html
+fuzzy(1,4) == padding-button-placement.html padding-button-placement.html
+HTTP(../..) == vertical-centering.html vertical-centering.html
+== 997709-2.html 997709-2.html
+needs-focus == focusring-1.html focusring-1.html
+needs-focus == focusring-2.html focusring-2.html
+needs-focus == focusring-3.html focusring-3.html
diff --git a/layout/reftests/forms/select/reftest.list b/layout/reftests/forms/select/reftest.list
new file mode 100644
index 000000000..1261dad9f
--- /dev/null
+++ b/layout/reftests/forms/select/reftest.list
@@ -0,0 +1,11 @@
+fuzzy-if(Android,4,11) == out-of-bounds-selectedindex.html out-of-bounds-selectedindex-ref.html # test for bug 471741
+== multiple.html multiple-ref.html
+== boguskids.html boguskids-ref.html
+== dynamic-boguskids.html boguskids-ref.html
+== option-children.html option-children-ref.html
+fuzzy(1,4) == padding-button-placement.html padding-button-placement-ref.html
+HTTP(../..) == vertical-centering.html vertical-centering-ref.html
+== 997709-2.html 997709-2-ref.html
+needs-focus == focusring-1.html focusring-1-ref.html
+needs-focus == focusring-2.html focusring-2-ref.html
+needs-focus == focusring-3.html focusring-3-ref.html
diff --git a/layout/reftests/forms/select/vertical-centering-ref.html b/layout/reftests/forms/select/vertical-centering-ref.html
new file mode 100644
index 000000000..f5d855456
--- /dev/null
+++ b/layout/reftests/forms/select/vertical-centering-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+  @font-face {
+    font-family: "Ahem";
+    src: url(../../fonts/Ahem.ttf);
+  }
+  select {
+    -moz-appearance: none;
+    border: none;
+    font-family: Ahem;
+    font-size: 20px;
+    box-sizing: content-box;
+    /*
+     * Why are these top/bottom paddings 7px rather than 10px?  1px each is
+     * eaten up by padding on the combobox display area, but I have no idea
+     * where the extra 4px somewhere else are coming from...
+     */
+    padding: 7px 0 7px 0;
+  }
+</style>
+<select>
+  <option>X</option>
+</select>
diff --git a/layout/reftests/forms/select/vertical-centering.html b/layout/reftests/forms/select/vertical-centering.html
new file mode 100644
index 000000000..6a2daa9e7
--- /dev/null
+++ b/layout/reftests/forms/select/vertical-centering.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<style>
+  @font-face {
+    font-family: "Ahem";
+    src: url(../../fonts/Ahem.ttf);
+  }
+  select {
+    -moz-appearance: none;
+    border: none;
+    font-family: Ahem;
+    font-size: 20px;
+    padding: 0;
+    box-sizing: content-box;
+    height: 40px;
+  }
+</style>
+<select>
+  <option>X</option>
+</select>
diff --git a/layout/reftests/forms/text-control-baseline-1-ref.html b/layout/reftests/forms/text-control-baseline-1-ref.html
new file mode 100644
index 000000000..f46e55f1d
--- /dev/null
+++ b/layout/reftests/forms/text-control-baseline-1-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+        <title>Reference for bug 481751</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <style type="text/css">
+        @font-face {
+                font-family: "MarkA";
+                src: url(../fonts/markA.ttf);
+        }
+	body {
+	  background-color: white;
+	}
+        input, textarea {
+	  font-family: "MarkA", sans-serif;
+          font-size: 32px;
+	  background-color: black;
+	  color: black;
+	  vertical-align: baseline;
+	}
+        </style>
+</head>
+<body>
+  <input size="2" value="A">
+  <input size="2" value="A">
+  <textarea cols="2">A</textarea>
+  <textarea cols="2">A</textarea>
+</body>
+</html>
diff --git a/layout/reftests/forms/text-control-baseline-1.html b/layout/reftests/forms/text-control-baseline-1.html
new file mode 100644
index 000000000..080eeb5cd
--- /dev/null
+++ b/layout/reftests/forms/text-control-baseline-1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+        <title>Test for bug 481751</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<!--
+	    The primary font MarkA has a small line height.  The default font
+	    (used for the character '1') will probably have a maximum ascent
+	    greater than the ascent plus half leading of MarkA, but this
+	    should not change the baseline (and thus position) of the text
+	    control.
+	  -->
+        <style type="text/css">
+        @font-face {
+                font-family: "MarkA";
+                src: url(../fonts/markA.ttf);
+        }
+	body {
+	  background-color: white;
+	}
+        input, textarea {
+	  font-family: "MarkA", sans-serif;
+          font-size: 32px;
+	  background-color: black;
+	  color: black;
+	  vertical-align: baseline;
+	}
+        </style>
+</head>
+<body>
+  <input size="2" value="A">
+  <input size="2" value="A1">
+  <textarea cols="2">A</textarea>
+  <textarea cols="2">A1</textarea>
+</body>
+</html>
diff --git a/layout/reftests/forms/textarea/in-dynamic-rtl-doc.html b/layout/reftests/forms/textarea/in-dynamic-rtl-doc.html
new file mode 100644
index 000000000..c8afa20cf
--- /dev/null
+++ b/layout/reftests/forms/textarea/in-dynamic-rtl-doc.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body style="text-align: left">
+  <textarea cols=20 rows=4></textarea>
+  <script>
+    onload = function() {
+      setTimeout(function() {
+        document.dir = "rtl";
+        document.documentElement.removeAttribute("class");
+      });
+    };
+  </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html b/layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html
new file mode 100644
index 000000000..e6b14358e
--- /dev/null
+++ b/layout/reftests/forms/textarea/in-ltr-doc-scrollbar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html dir="ltr">
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body>
+  <textarea cols=20 rows=4 style="overflow: scroll; resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html b/layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html
new file mode 100644
index 000000000..8c915b5ee
--- /dev/null
+++ b/layout/reftests/forms/textarea/in-rtl-doc-scrollbar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html dir="rtl">
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body>
+  <textarea cols=20 rows=4 style="float: left; overflow: scroll; resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/ltr-scrollbar.html b/layout/reftests/forms/textarea/ltr-scrollbar.html
new file mode 100644
index 000000000..927fbede6
--- /dev/null
+++ b/layout/reftests/forms/textarea/ltr-scrollbar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body>
+  <textarea dir="ltr" cols=20 rows=4 style="overflow: scroll; resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/ltr.html b/layout/reftests/forms/textarea/ltr.html
new file mode 100644
index 000000000..c7e84be0e
--- /dev/null
+++ b/layout/reftests/forms/textarea/ltr.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body>
+  <textarea cols=20 rows=4></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/no-resize.html b/layout/reftests/forms/textarea/no-resize.html
new file mode 100644
index 000000000..fbf879653
--- /dev/null
+++ b/layout/reftests/forms/textarea/no-resize.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body>
+  <textarea cols=20 rows=4 style="resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html b/layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html
new file mode 100644
index 000000000..30928bbd7
--- /dev/null
+++ b/layout/reftests/forms/textarea/padding-scrollbar-placement-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <title>Padding and Scrollbar Placement Test Reference</title>
+	<style>input, textarea { border-radius:0; background:none; border:none; }</style>
+        <style type="text/css">
+            #t {
+                display: block;
+                position: absolute;
+                left: 50px;
+                top: 50px;
+                padding: 50px;
+                width: 300px;
+                height: 100px;
+                border: 5px solid red;
+                margin: 10px;
+                overflow: scroll;
+                font-family: verdana;
+                white-space: pre-wrap;
+                z-index: 0; /* force a stacking context */
+            }
+            #cover {
+                position: absolute;
+                left: 400px;
+                top: 50px;
+                width: 100px;
+                height: 300px;
+                background: black;
+            }
+            #cover2 { /* corresponds to the bottom padding inside the textarea */
+                position: absolute;
+                left: 0px;
+                bottom: 0px;
+                width: 100%;
+                height: 50px;
+                background: white;
+            }
+        </style>
+    </head>
+    <body>
+        <script>
+        var ss = [];
+        for (var i = 0; i < 1000; ++i) {
+          ss.push(i);
+        }
+        document.write("<div id='t'><div id=cover2></div>" + ss.join(" ") + "</div>");
+        </script>
+        <div id="cover"></div>
+    </body>
+</html>
diff --git a/layout/reftests/forms/textarea/padding-scrollbar-placement.html b/layout/reftests/forms/textarea/padding-scrollbar-placement.html
new file mode 100644
index 000000000..e1b0d7d67
--- /dev/null
+++ b/layout/reftests/forms/textarea/padding-scrollbar-placement.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <title>Padding and Scrollbar Placement Test</title>
+	<style>input, textarea { border-radius:0; background:none; border:none; }</style>
+        <style type="text/css">
+            #t {
+                display: block;
+                position: absolute;
+                left: 50px;
+                top: 50px;
+                padding: 50px;
+                width: 300px;
+                height: 100px;
+                border: 5px solid red;
+                margin: 10px;
+                overflow: scroll;
+                font-family: verdana;
+                resize: none;
+                color: black;
+                z-index: 0; /* force a stacking context */
+            }
+            #cover {
+                position: absolute;
+                left: 400px;
+                top: 50px;
+                width: 100px;
+                height: 300px;
+                background: black;
+            }
+        </style>
+    </head>
+    <body>
+        <script>
+        var ss = [];
+        for (var i = 0; i < 1000; ++i) {
+          ss.push(i);
+        }
+        document.write("<textarea id='t'>" + ss.join(" ") + "</textarea>");
+        </script>
+        <div id="cover"></div>
+    </body>
+</html>
diff --git a/layout/reftests/forms/textarea/reftest-stylo.list b/layout/reftests/forms/textarea/reftest-stylo.list
new file mode 100644
index 000000000..0a050f16b
--- /dev/null
+++ b/layout/reftests/forms/textarea/reftest-stylo.list
@@ -0,0 +1,23 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip-if(B2G||Mulet||Android) == resize.html resize.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+# an offset seems to apply to the native resizer on windows so skip this test for now
+fails skip-if(B2G||Mulet||Android) skip-if(winWidget) fuzzy-if(cocoaWidget,1,33) fuzzy-if(skiaContent&&!winWidget,5,10) == resize-background.html resize-background.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet||Android) == ltr.html ltr.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet||Android) == ltr-scrollbar.html ltr-scrollbar.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip == in-ltr-doc-scrollbar.html in-ltr-doc-scrollbar.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet||Android) == ltr.html ltr.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet||Android) fails-if(xulRuntime.widgetToolkit=="gtk2") == rtl.html rtl.html
+# bug 834724
+# Initial mulet triage: parity with B2G/B2G Desktop
+== rtl.html rtl.html
+== rtl.html rtl.html
+== rtl.html rtl.html
+fuzzy-if(skiaContent,1,3) == setvalue-framereconstruction-1.html setvalue-framereconstruction-1.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,102,4168) == padding-scrollbar-placement.html padding-scrollbar-placement.html
+== various-cols.html various-cols.html
diff --git a/layout/reftests/forms/textarea/reftest.list b/layout/reftests/forms/textarea/reftest.list
new file mode 100644
index 000000000..aee3654cb
--- /dev/null
+++ b/layout/reftests/forms/textarea/reftest.list
@@ -0,0 +1,14 @@
+skip-if(Android) == resize.html resize-ref.html
+# an offset seems to apply to the native resizer on windows so skip this test for now
+skip-if(Android) skip-if(winWidget) fuzzy-if(cocoaWidget,1,33) fuzzy-if(skiaContent&&!winWidget&&!Android,5,10) == resize-background.html resize-background-ref.html
+skip-if(Android) != ltr.html rtl.html
+skip-if(Android) != ltr-scrollbar.html rtl-scrollbar.html
+skip-if(Android) != in-ltr-doc-scrollbar.html in-rtl-doc-scrollbar.html
+skip-if(Android) != ltr.html no-resize.html
+skip-if(Android) fails-if(xulRuntime.widgetToolkit=="gtk2") != rtl.html no-resize.html # bug 834724
+== rtl.html rtl-dynamic-attr.html
+== rtl.html rtl-dynamic-style.html
+== rtl.html in-dynamic-rtl-doc.html
+fuzzy-if(skiaContent,1,3) == setvalue-framereconstruction-1.html setvalue-framereconstruction-ref.html
+fuzzy-if(asyncPan&&!layersGPUAccelerated,102,4168) == padding-scrollbar-placement.html padding-scrollbar-placement-ref.html
+== various-cols.html various-cols-ref.html
diff --git a/layout/reftests/forms/textarea/resize-background-ref.html b/layout/reftests/forms/textarea/resize-background-ref.html
new file mode 100644
index 000000000..c0a97fb63
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-background-ref.html
@@ -0,0 +1,30 @@
+<html>
+<script>
+function sizeResizer() {
+    // reference resizer
+    var img = document.getElementsByTagName("img")[0];
+    // hidden textarea
+    var textarea = document.getElementsByTagName("textarea")[0];
+    var width = 200 - textarea.clientWidth;
+    var height = 200 - textarea.clientHeight;
+    // (Leave test failing if a scrollbar is missing)
+    if (width != 0 && height != 0) {
+        img.style.width = width + "px";
+        img.style.left = textarea.clientWidth + "px";
+        img.style.height = height + "px";
+        img.style.top = textarea.clientHeight + "px";
+    }
+}
+</script>
+<body onload="sizeResizer()">
+<textarea style="width: 200px; height: 200px; margin: 0; border: none;
+                 background: red; font-size: 400px;">
+M
+</textarea>
+<div style="position: relative; top: -200px;
+            width: 200px; height: 200px; margin: 0; border: none;
+            background: lightgreen">
+  <img style="position: relative;" src="chrome://global/skin/icons/resizer.png">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/forms/textarea/resize-background.html b/layout/reftests/forms/textarea/resize-background.html
new file mode 100644
index 000000000..24c6f70d8
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-background.html
@@ -0,0 +1,3 @@
+<html><body>
+<textarea style="width: 200px; height: 200px; margin: 0; background: lightgreen; border: none;"></textarea>
+</body></html>
diff --git a/layout/reftests/forms/textarea/resize-ref.html b/layout/reftests/forms/textarea/resize-ref.html
new file mode 100644
index 000000000..5d3334889
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize-ref.html
@@ -0,0 +1,3 @@
+<html><body>
+<div style="overflow: auto; resize: both; background: white; -moz-appearance: none; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;"></div>
+</body></html>
diff --git a/layout/reftests/forms/textarea/resize.html b/layout/reftests/forms/textarea/resize.html
new file mode 100644
index 000000000..f513b4634
--- /dev/null
+++ b/layout/reftests/forms/textarea/resize.html
@@ -0,0 +1,3 @@
+<html><body>
+<textarea style="-moz-appearance: none; background: white; border: 0; padding: 0; margin: 0; width: 100px; height: 100px;" resizable="false" multiline="true" width="100" height="100"></textarea>
+</body></html>
diff --git a/layout/reftests/forms/textarea/rtl-dynamic-attr.html b/layout/reftests/forms/textarea/rtl-dynamic-attr.html
new file mode 100644
index 000000000..47f97baa7
--- /dev/null
+++ b/layout/reftests/forms/textarea/rtl-dynamic-attr.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body>
+  <textarea cols=20 rows=4></textarea>
+  <script>
+    onload = function() {
+      setTimeout(function() {
+        document.querySelector("textarea").setAttribute("dir", "rtl");
+        document.documentElement.removeAttribute("class");
+      });
+    };
+  </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/rtl-dynamic-style.html b/layout/reftests/forms/textarea/rtl-dynamic-style.html
new file mode 100644
index 000000000..8997e31c0
--- /dev/null
+++ b/layout/reftests/forms/textarea/rtl-dynamic-style.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body>
+  <textarea cols=20 rows=4></textarea>
+  <script>
+    onload = function() {
+      setTimeout(function() {
+        document.querySelector("textarea").style.direction = "rtl";
+        document.documentElement.removeAttribute("class");
+      });
+    };
+  </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/rtl-scrollbar.html b/layout/reftests/forms/textarea/rtl-scrollbar.html
new file mode 100644
index 000000000..2770dc694
--- /dev/null
+++ b/layout/reftests/forms/textarea/rtl-scrollbar.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body>
+  <textarea dir="rtl" cols=20 rows=4 style="overflow: scroll; resize: none"></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/rtl.html b/layout/reftests/forms/textarea/rtl.html
new file mode 100644
index 000000000..984f9d9aa
--- /dev/null
+++ b/layout/reftests/forms/textarea/rtl.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title></title>
+ </head>
+ <body>
+  <textarea dir="rtl" cols=20 rows=4></textarea>
+ </body>
+</html>
diff --git a/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html b/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html
new file mode 100644
index 000000000..dd8f1d2c0
--- /dev/null
+++ b/layout/reftests/forms/textarea/setvalue-framereconstruction-1.html
@@ -0,0 +1,50 @@
+<!--
+
+This test is mostly a copy of layout/forms/crashtests/373586-1.xhtml,
+and it makes sure that the value setter works correctly when setting
+the value causes the frame to be reconstructed.
+
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<head>
+
+<bindings xmlns="http://www.mozilla.org/xbl">
+  <binding id="foo">
+    <content>
+      <children xmlns="http://www.mozilla.org/xbl" />
+    </content>
+  </binding>
+</bindings>
+
+<script>
+function boom()
+{
+  document.getElementById("div").style.MozBinding = "url('#foo')";
+
+  var opt1 = document.getElementById("opt1");
+  opt1.removeChild(opt1.firstChild);
+
+  document.getElementById("textarea").value += " y";
+
+  document.getElementById("div").style.MozBinding = "";
+  document.documentElement.removeAttribute("class")
+}
+
+window.addEventListener("MozReftestInvalidate", boom, false);
+</script>
+
+</head>
+
+<body>
+
+<div id="div">
+  <textarea rows="3" cols="5" id="textarea">x</textarea>
+</div>
+
+<select style="-moz-appearance:none">
+  <option id="opt1">opt1</option>
+</select>
+
+</body>
+</html>
+
diff --git a/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html b/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html
new file mode 100644
index 000000000..3f5108815
--- /dev/null
+++ b/layout/reftests/forms/textarea/setvalue-framereconstruction-ref.html
@@ -0,0 +1,17 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+</head>
+
+<body>
+
+<div id="div">
+  <textarea rows="3" cols="5" id="textarea">x y</textarea>
+</div>
+
+<select style="-moz-appearance:none">
+  <option id="opt1"></option>
+</select>
+
+</body>
+</html>
+
diff --git a/layout/reftests/forms/textarea/various-cols-ref.html b/layout/reftests/forms/textarea/various-cols-ref.html
new file mode 100644
index 000000000..7ba962e61
--- /dev/null
+++ b/layout/reftests/forms/textarea/various-cols-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<textarea cols="20"></textarea><br>
+<textarea cols="20"></textarea><br>
+<textarea cols="20"></textarea>
diff --git a/layout/reftests/forms/textarea/various-cols.html b/layout/reftests/forms/textarea/various-cols.html
new file mode 100644
index 000000000..dc62941d8
--- /dev/null
+++ b/layout/reftests/forms/textarea/various-cols.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<textarea></textarea><br>
+<textarea cols="0"></textarea><br>
+<textarea cols="-1"></textarea>
diff --git a/layout/reftests/forms/textbox/accesskey-1-notref.xul b/layout/reftests/forms/textbox/accesskey-1-notref.xul
new file mode 100644
index 000000000..697d10879
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-1-notref.xul
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <label value="test"/>
+    <textbox value="text"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-1.xul b/layout/reftests/forms/textbox/accesskey-1.xul
new file mode 100644
index 000000000..39ad15b2d
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-1.xul
@@ -0,0 +1,35 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <label value="test" accesskey="s"/>
+    <textbox value="text"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-2-ref.xul b/layout/reftests/forms/textbox/accesskey-2-ref.xul
new file mode 100644
index 000000000..ce6ed1ebc
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-2-ref.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <!-- access key in LTR-overridden Arabic text -->
+    <label value="&#x202d;&#x64a;&#x628;&#x631;&#x639;&#x644;&#x627;&#x202c; test" accesskey="&#x639;"/>
+    <textbox value=""/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-2.xul b/layout/reftests/forms/textbox/accesskey-2.xul
new file mode 100644
index 000000000..98b2c272b
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-2.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <!-- access key in RTL Arabic text -->
+    <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; test" accesskey="&#x639;"/>
+    <textbox value=""/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-3-notref.xul b/layout/reftests/forms/textbox/accesskey-3-notref.xul
new file mode 100644
index 000000000..1a81e2811
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-3-notref.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <!-- no access key, for != test -->
+    <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello world"/>
+    <textbox value=""/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-3-ref.xul b/layout/reftests/forms/textbox/accesskey-3-ref.xul
new file mode 100644
index 000000000..b7907e9a6
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-3-ref.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <!-- access key in LTR text that follows RTL text (mixed direction) -->
+    <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello world" accesskey="d"/>
+    <textbox value=""/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-3.xul b/layout/reftests/forms/textbox/accesskey-3.xul
new file mode 100644
index 000000000..97e2c6fbc
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-3.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <!-- access key in RTL-overridden English text -->
+    <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello &#x202e;dlrow&#x202c;" accesskey="d"/>
+    <textbox value=""/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-4-notref.xul b/layout/reftests/forms/textbox/accesskey-4-notref.xul
new file mode 100644
index 000000000..1a81e2811
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-4-notref.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <!-- no access key, for != test -->
+    <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello world"/>
+    <textbox value=""/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-4-ref.xul b/layout/reftests/forms/textbox/accesskey-4-ref.xul
new file mode 100644
index 000000000..df787415f
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-4-ref.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <!-- access key in English text following LTR-overridden Arabic -->
+    <label value="&#x202d;&#x64a;&#x628;&#x631;&#x639;&#x644;&#x627;&#x202c; hello world" accesskey="w"/>
+    <textbox value=""/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/accesskey-4.xul b/layout/reftests/forms/textbox/accesskey-4.xul
new file mode 100644
index 000000000..d63bafbc5
--- /dev/null
+++ b/layout/reftests/forms/textbox/accesskey-4.xul
@@ -0,0 +1,36 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox access key tests (see bug 698185)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+      font-size: 36px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <!-- access key in English text following RTL Arabic -->
+    <label value="&#x627;&#x644;&#x639;&#x631;&#x628;&#x64a; hello world" accesskey="w"/>
+    <textbox value=""/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/align-baseline-1-ref.xul b/layout/reftests/forms/textbox/align-baseline-1-ref.xul
new file mode 100644
index 000000000..646e412de
--- /dev/null
+++ b/layout/reftests/forms/textbox/align-baseline-1-ref.xul
@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox align=baseline reference"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    #container {
+      margin-top: 12px;
+      padding-top: 8px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+  </html:style>
+
+  <hbox id="container" align="center">
+    <label value="test"/>
+    <textbox value="text"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/align-baseline-1.xul b/layout/reftests/forms/textbox/align-baseline-1.xul
new file mode 100644
index 000000000..711e1858a
--- /dev/null
+++ b/layout/reftests/forms/textbox/align-baseline-1.xul
@@ -0,0 +1,34 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/"?>
+<window title="textbox align=baseline test (bug 494901)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+  <html:style type="text/css">
+    hbox {
+      margin-top: 0px;
+      padding-top: 0px;
+    }
+    label, textbox {
+      -moz-appearance: none;
+      background: inherit;
+      border: none 0px;
+    }
+    label {
+      margin-top: 0px;
+      padding-top: 0px;
+      margin-bottom: 0px;
+      padding-bottom: 0px;
+    }
+    textbox {
+      margin-top: 12px;
+      padding-top: 8px;
+      margin-bottom: 5px;
+      padding-bottom: 9px;
+    }
+  </html:style>
+
+  <hbox align="baseline">
+    <label value="test"/>
+    <textbox value="text"/>
+  </hbox>
+</window>
diff --git a/layout/reftests/forms/textbox/reftest-stylo.list b/layout/reftests/forms/textbox/reftest-stylo.list
new file mode 100644
index 000000000..f14a2c20a
--- /dev/null
+++ b/layout/reftests/forms/textbox/reftest-stylo.list
@@ -0,0 +1,28 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# access-key tests are no use on OS X because access keys are not indicated visually
+# no real XUL theme on Android so we just skip
+skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-1.xul accesskey-1.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-2.xul accesskey-2.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+# accesskey-3 fails because of defects in XUL bidi support
+skip == accesskey-3.xul accesskey-3.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-3.xul accesskey-3.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-4.xul accesskey-4.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(cocoaWidget||((B2G&&browserIsRemote)||Mulet)||Android) == accesskey-4.xul accesskey-4.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if((B2G&&browserIsRemote)||Mulet||Android) == align-baseline-1.xul align-baseline-1.xul
+# test for bug 494901
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet||Android) == setsize.xul setsize.xul
+# bug 974780
+# Initial mulet triage: parity with B2G/B2G Desktop
diff --git a/layout/reftests/forms/textbox/reftest.list b/layout/reftests/forms/textbox/reftest.list
new file mode 100644
index 000000000..eb0b8fc9d
--- /dev/null
+++ b/layout/reftests/forms/textbox/reftest.list
@@ -0,0 +1,11 @@
+# access-key tests are no use on OS X because access keys are not indicated visually
+# no real XUL theme on Android so we just skip
+skip-if(cocoaWidget||Android) != accesskey-1.xul accesskey-1-notref.xul
+skip-if(cocoaWidget||Android) == accesskey-2.xul accesskey-2-ref.xul
+# accesskey-3 fails because of defects in XUL bidi support
+fails-if(!cocoaWidget) skip-if(cocoaWidget||Android) == accesskey-3.xul accesskey-3-ref.xul
+skip-if(cocoaWidget||Android) != accesskey-3.xul accesskey-3-notref.xul
+skip-if(cocoaWidget||Android) == accesskey-4.xul accesskey-4-ref.xul
+skip-if(cocoaWidget||Android) != accesskey-4.xul accesskey-4-notref.xul
+skip-if(Android) == align-baseline-1.xul align-baseline-1-ref.xul # test for bug 494901
+skip-if(Android) == setsize.xul setsize-ref.xul
diff --git a/layout/reftests/forms/textbox/setsize-ref.xul b/layout/reftests/forms/textbox/setsize-ref.xul
new file mode 100644
index 000000000..ca0d30e72
--- /dev/null
+++ b/layout/reftests/forms/textbox/setsize-ref.xul
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
+
+<hbox style="-moz-appearance: textfield-multiline; width: 200px; height: 200px;"/>
+<html:div style="position:fixed;top:0;left:0;width:100%;height:100%;"></html:div>
+
+</window>
diff --git a/layout/reftests/forms/textbox/setsize.xul b/layout/reftests/forms/textbox/setsize.xul
new file mode 100644
index 000000000..30d2face1
--- /dev/null
+++ b/layout/reftests/forms/textbox/setsize.xul
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
+
+<html:textarea style="width: 200px; height: 200px; margin: 0; resize: none;"/>
+<html:div style="position:fixed;top:0;left:0;width:100%;height:100%;"></html:div>
+</window>
-- 
cgit v1.2.3