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

---
 .../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 ++++
 58 files changed, 2708 insertions(+)
 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

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

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>
-- 
cgit v1.2.3