summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms/meter
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/forms/meter')
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-ref.html105
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html45
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-rtl.html26
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html91
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html94
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html47
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element-vertical.html47
-rw-r--r--layout/reftests/forms/meter/bar-pseudo-element.html52
-rw-r--r--layout/reftests/forms/meter/block-invalidate-ref.html10
-rw-r--r--layout/reftests/forms/meter/block-invalidate.html19
-rw-r--r--layout/reftests/forms/meter/default-style/default-style-dyn-ref.html38
-rw-r--r--layout/reftests/forms/meter/default-style/default-style-dyn.html34
-rw-r--r--layout/reftests/forms/meter/default-style/default-style-ref.html279
-rw-r--r--layout/reftests/forms/meter/default-style/default-style.html61
-rw-r--r--layout/reftests/forms/meter/default-style/reftest.list2
-rw-r--r--layout/reftests/forms/meter/default-style/style.css54
-rw-r--r--layout/reftests/forms/meter/in-cells-ref.html22
-rw-r--r--layout/reftests/forms/meter/in-cells.html21
-rw-r--r--layout/reftests/forms/meter/margin-padding-ref.html88
-rw-r--r--layout/reftests/forms/meter/margin-padding-rtl-ref.html88
-rw-r--r--layout/reftests/forms/meter/margin-padding-rtl.html40
-rw-r--r--layout/reftests/forms/meter/margin-padding-vertical-ref.html88
-rw-r--r--layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html88
-rw-r--r--layout/reftests/forms/meter/margin-padding-vertical-rtl.html43
-rw-r--r--layout/reftests/forms/meter/margin-padding-vertical.html43
-rw-r--r--layout/reftests/forms/meter/margin-padding.html40
-rw-r--r--layout/reftests/forms/meter/max-height-ref.html11
-rw-r--r--layout/reftests/forms/meter/max-height.html11
-rw-r--r--layout/reftests/forms/meter/meter-orient-block.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-horizontal-rtl.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-inline.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-vertical-rtl.html3
-rw-r--r--layout/reftests/forms/meter/meter-orient-vertical.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr-orient-block.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr-orient-inline.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr-orient-vertical.html3
-rw-r--r--layout/reftests/forms/meter/meter-vlr.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl-orient-block.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl-orient-inline.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl-orient-vertical.html3
-rw-r--r--layout/reftests/forms/meter/meter-vrl.html3
-rw-r--r--layout/reftests/forms/meter/reftest.list44
-rw-r--r--layout/reftests/forms/meter/rounded-corner-clipping-ref.html21
-rw-r--r--layout/reftests/forms/meter/rounded-corner-clipping.html17
-rw-r--r--layout/reftests/forms/meter/style.css38
-rw-r--r--layout/reftests/forms/meter/transformations-ref.html78
-rw-r--r--layout/reftests/forms/meter/transformations.html36
-rw-r--r--layout/reftests/forms/meter/values-ref.html163
-rw-r--r--layout/reftests/forms/meter/values-rtl-ref.html163
-rw-r--r--layout/reftests/forms/meter/values-rtl.html42
-rw-r--r--layout/reftests/forms/meter/values-vertical-ref.html163
-rw-r--r--layout/reftests/forms/meter/values-vertical-rtl-ref.html163
-rw-r--r--layout/reftests/forms/meter/values-vertical-rtl.html47
-rw-r--r--layout/reftests/forms/meter/values-vertical.html47
-rw-r--r--layout/reftests/forms/meter/values.html42
58 files changed, 2699 insertions, 0 deletions
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-ref.html
new file mode 100644
index 0000000000..c9576fc40b
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-ref.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) > .meter-bar { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) > .meter-bar { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) > .meter-bar { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) > .meter-bar { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) > .meter-bar { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) > .meter-bar { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) > .meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) > .meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) > .meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) > .meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) > .meter-bar { margin: 200px; padding: 0px; }
+ body > div:nth-child(16) > .meter-bar { margin: 0px; padding: 200px; }
+ /* 15 - 18 should have 100% width, no need to specify. */
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html
new file mode 100644
index 0000000000..ba9b6c8f35
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-rtl-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) > .meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(2) > .meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(3) > .meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(4) > .meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ /* 15 - 18 should have 100% width, no need to specify. */
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-rtl.html b/layout/reftests/forms/meter/bar-pseudo-element-rtl.html
new file mode 100644
index 0000000000..22f5462dfd
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-rtl.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > meter:nth-child(1)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > meter:nth-child(2)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > meter:nth-child(3)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > meter:nth-child(4)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > meter:nth-child(5)::-moz-meter-bar { width: 1000px; }
+ body > meter:nth-child(6)::-moz-meter-bar { width: 10px; }
+ body > meter:nth-child(7)::-moz-meter-bar { width: 10%; }
+ body > meter:nth-child(8)::-moz-meter-bar { width: 200%; }
+ </style>
+ <body dir='rtl'>
+ <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <!-- Those will be used to change width. -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html
new file mode 100644
index 0000000000..ff5227a9d9
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ .meter-element { margin: 10px; }
+ body > div:nth-child(1) > .meter-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(2) > .meter-bar { width: calc(100% + 8px); }
+ body > div:nth-child(3) > .meter-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px);
+ width: calc(100% + 8px); }
+ body > div:nth-child(4) > .meter-bar { position: relative; top: 10px; height: calc(100% - 10px); }
+ body > div:nth-child(5) > .meter-bar { }
+ body > div:nth-child(6) > .meter-bar { height: calc(100% - 10px); }
+ body > div:nth-child(7) > .meter-bar { position: relative; left: 10px; }
+ body > div:nth-child(8) > .meter-bar { }
+ body > div:nth-child(9) > .meter-bar { width: calc(100% + 10px); }
+ body > div:nth-child(10) > .meter-bar { }
+ body > div:nth-child(11) > .meter-bar { width: calc(100% + 10px); }
+ /* 12 - 15 should have 100% width, no need to specify. */
+ body > div:nth-child(16) > .meter-bar { position: relative; top: 64px; left: 64px;
+ height: calc(100% + 32px + 16px);
+ width: calc(100% + 128px + 16px - 1em); }
+ </style>
+ <body>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html
new file mode 100644
index 0000000000..651747f99c
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl-ref.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ .meter-element { margin: 10px; }
+ body > div:nth-child(1) > .meter-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(2) > .meter-bar { position: relative; left: 8px;
+ width: calc(100% + 8px); }
+ body > div:nth-child(3) > .meter-bar { position: relative; top: 4px; left: 12px;
+ height: calc(100% - 8px);
+ width: calc(100% + 8px); }
+ body > div:nth-child(4) > .meter-bar { position: relative; top: 10px; height: calc(100% - 10px); }
+ body > div:nth-child(5) > .meter-bar { }
+ body > div:nth-child(6) > .meter-bar { height: calc(100% - 10px); }
+ body > div:nth-child(7) > .meter-bar { position: relative; left: 10px; }
+ body > div:nth-child(8) > .meter-bar { }
+ body > div:nth-child(9) > .meter-bar { position: relative; left: 10px;
+ width: calc(100% + 10px); }
+ body > div:nth-child(10) > .meter-bar { }
+ body > div:nth-child(11) > .meter-bar { position: relative; left: 10px;
+ width: calc(100% + 10px); }
+ /* 12 - 15 should have 100% width, no need to specify. */
+ body > div:nth-child(16) > .meter-bar { position: relative; top: 64px; left: 192px;
+ height: calc(100% + 64px - 1em);
+ width: calc(100% + 128px); }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html
new file mode 100644
index 0000000000..1a1752baf9
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical-rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ margin: 10px;
+ -moz-orient: vertical;
+ overflow: visible;
+ }
+ body > meter:nth-child(1)::-moz-meter-bar { margin: 4px; padding: 0px; }
+ body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 4px; }
+ body > meter:nth-child(3)::-moz-meter-bar { margin: 4px; padding: 4px; }
+ body > meter:nth-child(4)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > meter:nth-child(5)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > meter:nth-child(6)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > meter:nth-child(7)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > meter:nth-child(8)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > meter:nth-child(9)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > meter:nth-child(10)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > meter:nth-child(12)::-moz-meter-bar { height: 1000px; }
+ body > meter:nth-child(13)::-moz-meter-bar { height: 10px; }
+ body > meter:nth-child(14)::-moz-meter-bar { height: 10%; }
+ body > meter:nth-child(15)::-moz-meter-bar { height: 200%; }
+ body > meter:nth-child(16)::-moz-meter-bar { margin: 64px; padding: 64px; }
+ </style>
+ <body dir='rtl'>
+ <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <!-- Those will be used to change width. -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element-vertical.html b/layout/reftests/forms/meter/bar-pseudo-element-vertical.html
new file mode 100644
index 0000000000..509dbb78da
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element-vertical.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ margin: 10px;
+ -moz-orient: vertical;
+ overflow: visible;
+ }
+ body > meter:nth-child(1)::-moz-meter-bar { margin: 4px; padding: 0px; }
+ body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 4px; }
+ body > meter:nth-child(3)::-moz-meter-bar { margin: 4px; padding: 4px; }
+ body > meter:nth-child(4)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > meter:nth-child(5)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > meter:nth-child(6)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > meter:nth-child(7)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > meter:nth-child(8)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > meter:nth-child(9)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > meter:nth-child(10)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > meter:nth-child(12)::-moz-meter-bar { height: 1000px; }
+ body > meter:nth-child(13)::-moz-meter-bar { height: 10px; }
+ body > meter:nth-child(14)::-moz-meter-bar { height: 10%; }
+ body > meter:nth-child(15)::-moz-meter-bar { height: 200%; }
+ body > meter:nth-child(16)::-moz-meter-bar { margin: 64px; padding: 64px; }
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <!-- Those will be used to change width. -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/bar-pseudo-element.html b/layout/reftests/forms/meter/bar-pseudo-element.html
new file mode 100644
index 0000000000..9fb69bc185
--- /dev/null
+++ b/layout/reftests/forms/meter/bar-pseudo-element.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ /* override the default clipping of the meter bar from forms.css */
+ meter { overflow: visible; }
+ body > meter:nth-child(1)::-moz-meter-bar { margin: 10px; padding: 0px; }
+ body > meter:nth-child(2)::-moz-meter-bar { margin: 0px; padding: 10px; }
+ body > meter:nth-child(3)::-moz-meter-bar { margin: 10px; padding: 10px; }
+ body > meter:nth-child(4)::-moz-meter-bar { margin: 5px; padding: 5px; }
+ body > meter:nth-child(5)::-moz-meter-bar { margin: 50px; padding: 50px; }
+ body > meter:nth-child(6)::-moz-meter-bar { margin: 100px; padding: 100px; }
+ body > meter:nth-child(7)::-moz-meter-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > meter:nth-child(8)::-moz-meter-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > meter:nth-child(9)::-moz-meter-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > meter:nth-child(10)::-moz-meter-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > meter:nth-child(11)::-moz-meter-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > meter:nth-child(12)::-moz-meter-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > meter:nth-child(13)::-moz-meter-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > meter:nth-child(14)::-moz-meter-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > meter:nth-child(15)::-moz-meter-bar { margin: 200px; padding: 0px; }
+ body > meter:nth-child(16)::-moz-meter-bar { margin: 0px; padding: 200px; }
+ body > meter:nth-child(17)::-moz-meter-bar { width: 1000px; }
+ body > meter:nth-child(18)::-moz-meter-bar { width: 10px; }
+ body > meter:nth-child(19)::-moz-meter-bar { width: 10%; }
+ body > meter:nth-child(20)::-moz-meter-bar { width: 200%; }
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-meter-bar -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <!-- Those will be used to change width. -->
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/block-invalidate-ref.html b/layout/reftests/forms/meter/block-invalidate-ref.html
new file mode 100644
index 0000000000..3208c43ef6
--- /dev/null
+++ b/layout/reftests/forms/meter/block-invalidate-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter { display: block; }
+ </style>
+ <body>
+ <meter value='0.5'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/block-invalidate.html b/layout/reftests/forms/meter/block-invalidate.html
new file mode 100644
index 0000000000..abc98f7f7a
--- /dev/null
+++ b/layout/reftests/forms/meter/block-invalidate.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter { display: block; }
+ </style>
+ <script>
+ function loadHandler() {
+ setTimeout(function() {
+ var p = document.getElementsByTagName('meter')[0];
+ p.value = '0.5';
+ document.documentElement.className = '';
+ }, 0);
+ }
+ </script>
+ <body onload="loadHandler();">
+ <meter value='0'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html b/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html
new file mode 100644
index 0000000000..03a1937fa5
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style-dyn-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-sub-optimum { width: 10%; }
+ div:nth-child(2) > .meter-sub-sub-optimum { width: 10%; }
+ div:nth-child(3) > .meter-sub-optimum { width: 40%; }
+ div:nth-child(4) > .meter-optimum { width: 10%; }
+ div:nth-child(5) > .meter-optimum { width: 0%; }
+ div:nth-child(6) > .meter-sub-optimum { width: 20%; }
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style-dyn.html b/layout/reftests/forms/meter/default-style/default-style-dyn.html
new file mode 100644
index 0000000000..bed08d6511
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style-dyn.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <meter id='m1' value="0.1" low="0" optimum="0.5" high="1" min="0" max="1"></meter>
+ <meter id='m2' value="0.1" low="0.3" optimum="0.7" high="1" min="0" max="1"></meter>
+ <meter id='m3' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+ <meter id='m4' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+ <meter id='m5' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+ <meter id='m6' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
+
+ <script>
+
+ var m = document.getElementById('m1');
+ m.setAttribute("low",0.3);
+
+ m = document.getElementById('m2');
+ m.setAttribute("high",0.5);
+
+ m = document.getElementById('m3');
+ m.setAttribute("value",0.4);
+
+ m = document.getElementById('m4');
+ m.setAttribute("optimum",0.1);
+
+ m = document.getElementById('m5');
+ m.setAttribute("min",0.9);
+
+ m = document.getElementById('m6');
+ m.setAttribute("max",0.5);
+
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style-ref.html b/layout/reftests/forms/meter/default-style/default-style-ref.html
new file mode 100644
index 0000000000..7cba9ab962
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style-ref.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ /* optimum = 0.0 */
+ div:nth-child(1) > .meter-optimum { width: 0%; }
+ div:nth-child(2) > .meter-optimum { width: 10%; }
+ div:nth-child(3) > .meter-sub-optimum { width: 30%; }
+ div:nth-child(4) > .meter-sub-optimum { width: 50%; }
+ div:nth-child(5) > .meter-sub-optimum { width: 70%; }
+ div:nth-child(6) > .meter-sub-sub-optimum { width: 80%; }
+ div:nth-child(7) > .meter-sub-sub-optimum { width: 100%; }
+
+ /* optimum = 0.1 */
+ div:nth-child(8) > .meter-optimum { width: 0%; }
+ div:nth-child(9) > .meter-optimum { width: 10%; }
+ div:nth-child(10) > .meter-sub-optimum { width: 30%; }
+ div:nth-child(11) > .meter-sub-optimum { width: 50%; }
+ div:nth-child(12) > .meter-sub-optimum { width: 70%; }
+ div:nth-child(13) > .meter-sub-sub-optimum { width: 80%; }
+ div:nth-child(14) > .meter-sub-sub-optimum { width: 100%; }
+
+ /* optimum = 0.3 */
+ div:nth-child(15) > .meter-sub-optimum { width: 0%; }
+ div:nth-child(16) > .meter-sub-optimum { width: 10%; }
+ div:nth-child(17) > .meter-optimum { width: 30%; }
+ div:nth-child(18) > .meter-optimum { width: 50%; }
+ div:nth-child(19) > .meter-optimum { width: 70%; }
+ div:nth-child(20) > .meter-sub-optimum { width: 80%; }
+ div:nth-child(21) > .meter-sub-optimum { width: 100%; }
+
+ /* optimum = 0.5 */
+ div:nth-child(22) > .meter-sub-optimum { width: 0%; }
+ div:nth-child(23) > .meter-sub-optimum { width: 10%; }
+ div:nth-child(24) > .meter-optimum { width: 30%; }
+ div:nth-child(25) > .meter-optimum { width: 50%; }
+ div:nth-child(26) > .meter-optimum { width: 70%; }
+ div:nth-child(27) > .meter-sub-optimum { width: 80%; }
+ div:nth-child(28) > .meter-sub-optimum { width: 100%; }
+
+ /* optimum = 0.7 */
+ div:nth-child(29) > .meter-sub-optimum { width: 0%; }
+ div:nth-child(30) > .meter-sub-optimum { width: 10%; }
+ div:nth-child(31) > .meter-optimum { width: 30%; }
+ div:nth-child(32) > .meter-optimum { width: 50%; }
+ div:nth-child(33) > .meter-optimum { width: 70%; }
+ div:nth-child(34) > .meter-sub-optimum { width: 80%; }
+ div:nth-child(35) > .meter-sub-optimum { width: 100%; }
+
+ /* optimum = 0.8 */
+ div:nth-child(36) > .meter-sub-sub-optimum { width: 0%; }
+ div:nth-child(37) > .meter-sub-sub-optimum { width: 10%; }
+ div:nth-child(38) > .meter-sub-optimum { width: 30%; }
+ div:nth-child(39) > .meter-sub-optimum { width: 50%; }
+ div:nth-child(40) > .meter-sub-optimum { width: 70%; }
+ div:nth-child(41) > .meter-optimum { width: 80%; }
+ div:nth-child(42) > .meter-optimum { width: 100%; }
+
+ /* optimum = 1.0 */
+ div:nth-child(43) > .meter-sub-sub-optimum { width: 0%; }
+ div:nth-child(44) > .meter-sub-sub-optimum { width: 10%; }
+ div:nth-child(45) > .meter-sub-optimum { width: 30%; }
+ div:nth-child(46) > .meter-sub-optimum { width: 50%; }
+ div:nth-child(47) > .meter-sub-optimum { width: 70%; }
+ div:nth-child(48) > .meter-optimum { width: 80%; }
+ div:nth-child(49) > .meter-optimum { width: 100%; }
+ </style>
+ <body>
+ <!-- optimum = 0.0 -->
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.1 -->
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.3 -->
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.5 -->
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.7 -->
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 0.8 -->
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+
+ <!-- optimum = 1.0 -->
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-sub-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-optimum">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/default-style.html b/layout/reftests/forms/meter/default-style/default-style.html
new file mode 100644
index 0000000000..6c648c3355
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/default-style.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <meter value="0.0" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.0" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.0" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.1" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.1" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.3" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.3" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.5" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.5" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.7" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.7" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="0.8" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="0.8" high="0.7"></meter>
+
+ <meter value="0.0" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.1" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.3" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.5" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.7" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="0.8" low="0.3" optimum="1.0" high="0.7"></meter>
+ <meter value="1.0" low="0.3" optimum="1.0" high="0.7"></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/default-style/reftest.list b/layout/reftests/forms/meter/default-style/reftest.list
new file mode 100644
index 0000000000..a67d6712b6
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/reftest.list
@@ -0,0 +1,2 @@
+== default-style.html default-style-ref.html
+== default-style-dyn.html default-style-dyn-ref.html
diff --git a/layout/reftests/forms/meter/default-style/style.css b/layout/reftests/forms/meter/default-style/style.css
new file mode 100644
index 0000000000..2d42337e9a
--- /dev/null
+++ b/layout/reftests/forms/meter/default-style/style.css
@@ -0,0 +1,54 @@
+div.meter-element {
+ display: inline-block;
+ height: 1em;
+ width: 5em;
+ vertical-align: -0.2em;
+
+ background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
+}
+
+div.meter-optimum {
+ float: none ! important;
+
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ /* green. */
+ background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
+}
+
+div.meter-sub-optimum {
+ float: none ! important;
+
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ /* orange. */
+ background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
+}
+
+div.meter-sub-sub-optimum {
+ float: none ! important;
+
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ /* red. */
+ background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
+}
+
+meter, meter::-moz-meter-bar, div.meter-element, div.meter-optimum, div.meter-sub-optimum, div.meter-sub-sub-optimum {
+ -moz-appearance: none;
+}
diff --git a/layout/reftests/forms/meter/in-cells-ref.html b/layout/reftests/forms/meter/in-cells-ref.html
new file mode 100644
index 0000000000..aa81938a3d
--- /dev/null
+++ b/layout/reftests/forms/meter/in-cells-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter { width: 5em; height: 1em; }
+ meter.vertical { -moz-orient: vertical; width: 1em; height: 5em; }
+ </style>
+ <body>
+ <table>
+ <tr>
+ <td>foo</td>
+ <td><meter value='0.5'></meter></td>
+ <td>bar</td>
+ </tr>
+ <tr>
+ <td>foo</td>
+ <td><meter class='vertical' value='0.5'></meter></td>
+ <td>bar</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/in-cells.html b/layout/reftests/forms/meter/in-cells.html
new file mode 100644
index 0000000000..c62510433a
--- /dev/null
+++ b/layout/reftests/forms/meter/in-cells.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter.vertical { -moz-orient: vertical; }
+ </style>
+ <body>
+ <table>
+ <tr>
+ <td>foo</td>
+ <td><meter value='0.5'></meter></td>
+ <td>bar</td>
+ </tr>
+ <tr>
+ <td>foo</td>
+ <td><meter class='vertical' value='0.5'></meter></td>
+ <td>bar</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-ref.html b/layout/reftests/forms/meter/margin-padding-ref.html
new file mode 100644
index 0000000000..84fb9b3852
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-rtl-ref.html b/layout/reftests/forms/meter/margin-padding-rtl-ref.html
new file mode 100644
index 0000000000..579794cc9e
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-rtl.html b/layout/reftests/forms/meter/margin-padding-rtl.html
new file mode 100644
index 0000000000..d840582647
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-rtl.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter:nth-child(1) { margin: 10px; padding: 0px; }
+ meter:nth-child(2) { margin: 0px; padding: 10px; }
+ meter:nth-child(3) { margin: 10px; padding: 10px; }
+ meter:nth-child(4) { margin: 5px; padding: 5px; }
+ meter:nth-child(5) { margin: 50px; padding: 50px; }
+ meter:nth-child(6) { margin: 100px; padding: 100px; }
+ meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical-ref.html b/layout/reftests/forms/meter/margin-padding-vertical-ref.html
new file mode 100644
index 0000000000..e6de9fef13
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html b/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html
new file mode 100644
index 0000000000..6ecb2fcafd
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical-rtl.html b/layout/reftests/forms/meter/margin-padding-vertical-rtl.html
new file mode 100644
index 0000000000..55e922b07b
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical-rtl.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ -moz-orient: vertical;
+ }
+ meter:nth-child(1) { margin: 10px; padding: 0px; }
+ meter:nth-child(2) { margin: 0px; padding: 10px; }
+ meter:nth-child(3) { margin: 10px; padding: 10px; }
+ meter:nth-child(4) { margin: 5px; padding: 5px; }
+ meter:nth-child(5) { margin: 50px; padding: 50px; }
+ meter:nth-child(6) { margin: 100px; padding: 100px; }
+ meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding-vertical.html b/layout/reftests/forms/meter/margin-padding-vertical.html
new file mode 100644
index 0000000000..d25d45e286
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding-vertical.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ -moz-orient: vertical;
+ }
+ meter:nth-child(1) { margin: 10px; padding: 0px; }
+ meter:nth-child(2) { margin: 0px; padding: 10px; }
+ meter:nth-child(3) { margin: 10px; padding: 10px; }
+ meter:nth-child(4) { margin: 5px; padding: 5px; }
+ meter:nth-child(5) { margin: 50px; padding: 50px; }
+ meter:nth-child(6) { margin: 100px; padding: 100px; }
+ meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/margin-padding.html b/layout/reftests/forms/meter/margin-padding.html
new file mode 100644
index 0000000000..349813e1fd
--- /dev/null
+++ b/layout/reftests/forms/meter/margin-padding.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter:nth-child(1) { margin: 10px; padding: 0px; }
+ meter:nth-child(2) { margin: 0px; padding: 10px; }
+ meter:nth-child(3) { margin: 10px; padding: 10px; }
+ meter:nth-child(4) { margin: 5px; padding: 5px; }
+ meter:nth-child(5) { margin: 50px; padding: 50px; }
+ meter:nth-child(6) { margin: 100px; padding: 100px; }
+ meter:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ meter:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ meter:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ meter:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ meter:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ meter:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ meter:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ meter:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ meter:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ meter:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/max-height-ref.html b/layout/reftests/forms/meter/max-height-ref.html
new file mode 100644
index 0000000000..be61638a7d
--- /dev/null
+++ b/layout/reftests/forms/meter/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ meter {
+ height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<meter>Some text</meter>
diff --git a/layout/reftests/forms/meter/max-height.html b/layout/reftests/forms/meter/max-height.html
new file mode 100644
index 0000000000..ae6115f855
--- /dev/null
+++ b/layout/reftests/forms/meter/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ meter {
+ max-height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<meter>Some text</meter>
diff --git a/layout/reftests/forms/meter/meter-orient-block.html b/layout/reftests/forms/meter/meter-orient-block.html
new file mode 100644
index 0000000000..8096473e76
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:block" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html b/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html
new file mode 100644
index 0000000000..29050d0219
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:horizontal" max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/meter/meter-orient-horizontal.html b/layout/reftests/forms/meter/meter-orient-horizontal.html
new file mode 100644
index 0000000000..762329c7f6
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:horizontal" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-orient-inline.html b/layout/reftests/forms/meter/meter-orient-inline.html
new file mode 100644
index 0000000000..a5ac5b52ba
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:inline" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-orient-vertical-rtl.html b/layout/reftests/forms/meter/meter-orient-vertical-rtl.html
new file mode 100644
index 0000000000..af83d45301
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:vertical" max=100 value=70 dir=rtl>
diff --git a/layout/reftests/forms/meter/meter-orient-vertical.html b/layout/reftests/forms/meter/meter-orient-vertical.html
new file mode 100644
index 0000000000..0bcc363497
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="-moz-orient:vertical" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-block.html b/layout/reftests/forms/meter/meter-vlr-orient-block.html
new file mode 100644
index 0000000000..500f1599d4
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html b/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html
new file mode 100644
index 0000000000..194f942d16
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-inline.html b/layout/reftests/forms/meter/meter-vlr-orient-inline.html
new file mode 100644
index 0000000000..d3ee42792b
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr-orient-vertical.html b/layout/reftests/forms/meter/meter-vlr-orient-vertical.html
new file mode 100644
index 0000000000..40e9c82344
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vlr.html b/layout/reftests/forms/meter/meter-vlr.html
new file mode 100644
index 0000000000..7edf4a6042
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-lr" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-block.html b/layout/reftests/forms/meter/meter-vrl-orient-block.html
new file mode 100644
index 0000000000..6b136624c5
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html b/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html
new file mode 100644
index 0000000000..87f8c938dd
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-inline.html b/layout/reftests/forms/meter/meter-vrl-orient-inline.html
new file mode 100644
index 0000000000..294f823e19
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl-orient-vertical.html b/layout/reftests/forms/meter/meter-vrl-orient-vertical.html
new file mode 100644
index 0000000000..369465660c
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=70>
diff --git a/layout/reftests/forms/meter/meter-vrl.html b/layout/reftests/forms/meter/meter-vrl.html
new file mode 100644
index 0000000000..7c481b31e3
--- /dev/null
+++ b/layout/reftests/forms/meter/meter-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<meter style="writing-mode:vertical-rl" max=100 value=70>
diff --git a/layout/reftests/forms/meter/reftest.list b/layout/reftests/forms/meter/reftest.list
new file mode 100644
index 0000000000..8da63340de
--- /dev/null
+++ b/layout/reftests/forms/meter/reftest.list
@@ -0,0 +1,44 @@
+fuzzy-if(Android,0-128,0-16) == values.html values-ref.html
+== values-rtl.html values-rtl-ref.html
+== margin-padding.html margin-padding-ref.html
+== margin-padding-rtl.html margin-padding-rtl-ref.html
+== bar-pseudo-element.html bar-pseudo-element-ref.html
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
+
+# vertical tests
+== values-vertical.html values-vertical-ref.html
+== values-vertical-rtl.html values-vertical-rtl-ref.html
+== margin-padding-vertical.html margin-padding-vertical-ref.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html
+== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <meter> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations-ref.html
+
+# default style
+include default-style/reftest.list
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate-ref.html
+== in-cells.html in-cells-ref.html
+== max-height.html max-height-ref.html
+== rounded-corner-clipping.html rounded-corner-clipping-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= meter-orient-vertical.html meter-orient-horizontal.html
+!= meter-orient-horizontal.html meter-orient-horizontal-rtl.html
+== meter-orient-block.html meter-orient-vertical.html
+== meter-orient-inline.html meter-orient-horizontal.html
+== meter-vlr.html meter-orient-vertical.html
+== meter-vlr-orient-block.html meter-orient-horizontal.html
+== meter-vlr-orient-inline.html meter-orient-vertical.html
+== meter-vlr-orient-horizontal.html meter-orient-horizontal.html
+== meter-vlr-orient-vertical.html meter-orient-vertical.html
+== meter-vrl.html meter-orient-vertical-rtl.html
+== meter-vrl-orient-block.html meter-orient-horizontal-rtl.html
+== meter-vrl-orient-inline.html meter-orient-vertical-rtl.html
+== meter-vrl-orient-horizontal.html meter-orient-horizontal-rtl.html
+== meter-vrl-orient-vertical.html meter-orient-vertical-rtl.html
diff --git a/layout/reftests/forms/meter/rounded-corner-clipping-ref.html b/layout/reftests/forms/meter/rounded-corner-clipping-ref.html
new file mode 100644
index 0000000000..f2e2beded3
--- /dev/null
+++ b/layout/reftests/forms/meter/rounded-corner-clipping-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+div {
+ width: 20em;
+ height: 5em;
+ border-radius: 2em;
+ border-style: solid;
+ border-width: .25em;
+ background: #eee;
+ overflow: clip;
+}
+span {
+ display: inline-block;
+ background: blue;
+ width: 8em;
+ height: 100%;
+}
+</style>
+
+<div><span></span></div>
diff --git a/layout/reftests/forms/meter/rounded-corner-clipping.html b/layout/reftests/forms/meter/rounded-corner-clipping.html
new file mode 100644
index 0000000000..d12a41f2cd
--- /dev/null
+++ b/layout/reftests/forms/meter/rounded-corner-clipping.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+meter {
+ width: 20em;
+ height: 5em;
+ border-radius: 2em;
+ border-style: solid;
+ border-width: .25em;
+ background: #eee;
+}
+::-moz-meter-bar {
+ background: blue;
+}
+</style>
+
+<meter min="0" max="100" value="40"></meter>
diff --git a/layout/reftests/forms/meter/style.css b/layout/reftests/forms/meter/style.css
new file mode 100644
index 0000000000..8370c5c33a
--- /dev/null
+++ b/layout/reftests/forms/meter/style.css
@@ -0,0 +1,38 @@
+div.meter-element {
+ display: inline-block;
+ height: 1em;
+ width: 5em;
+ vertical-align: -0.2em;
+
+ background-color: grey;
+}
+
+div.meter-element.vertical {
+ height: 5em;
+ width: 1em;
+}
+
+div.meter-bar {
+ float: none ! important;
+
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ background-color: green;
+}
+
+meter, meter::-moz-meter-bar, div.meter-element, div.meter-bar {
+ -moz-appearance: none;
+}
+
+meter {
+ background: grey;
+}
+
+meter::-moz-meter-bar {
+ background: green;
+}
diff --git a/layout/reftests/forms/meter/transformations-ref.html b/layout/reftests/forms/meter/transformations-ref.html
new file mode 100644
index 0000000000..4c1c95abb6
--- /dev/null
+++ b/layout/reftests/forms/meter/transformations-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > div:nth-child(1) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ body > div:nth-child(2) { transform: matrix(1, 0, 0.6, 1, 15em, 0); }
+ body > div:nth-child(3) { transform: rotate(30deg); }
+ body > div:nth-child(4) { transform: scale(2, 4); }
+ body > div:nth-child(5) { transform: scale(0.1, 0.4); }
+ body > div:nth-child(6) { transform: scale(1, 0.4); }
+ body > div:nth-child(7) { transform: scale(0.1, 1); }
+ body > div:nth-child(8) { transform: skew(30deg, -10deg); }
+ body > div:nth-child(9) { transform: skew(-30deg, 10deg); }
+ body > div:nth-child(10) { transform: translate(10px, 30px); }
+ body > div:nth-child(11) { transform: translate(30px, 10px); }
+ body > div:nth-child(12) { transform: translate(-10px, 30px); }
+ body > div:nth-child(13) { transform: translate(30px, -10px); }
+ body > div:nth-child(14) { transform: scale(0, 0); }
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/transformations.html b/layout/reftests/forms/meter/transformations.html
new file mode 100644
index 0000000000..54f44cc28d
--- /dev/null
+++ b/layout/reftests/forms/meter/transformations.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter:nth-child(1) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ meter:nth-child(2) { transform: matrix(1, 0, 0.6, 1, 15em, 0); }
+ meter:nth-child(3) { transform: rotate(30deg); }
+ meter:nth-child(4) { transform: scale(2, 4); }
+ meter:nth-child(5) { transform: scale(0.1, 0.4); }
+ meter:nth-child(6) { transform: scale(1, 0.4); }
+ meter:nth-child(7) { transform: scale(0.1, 1); }
+ meter:nth-child(8) { transform: skew(30deg, -10deg); }
+ meter:nth-child(9) { transform: skew(-30deg, 10deg); }
+ meter:nth-child(10) { transform: translate(10px, 30px); }
+ meter:nth-child(11) { transform: translate(30px, 10px); }
+ meter:nth-child(12) { transform: translate(-10px, 30px); }
+ meter:nth-child(13) { transform: translate(30px, -10px); }
+ meter:nth-child(14) { transform: scale(0, 0); }
+ </style>
+ <body>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ <meter value='1'></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-ref.html b/layout/reftests/forms/meter/values-ref.html
new file mode 100644
index 0000000000..0e97da064b
--- /dev/null
+++ b/layout/reftests/forms/meter/values-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-bar { width: 100%; }
+ div:nth-child(2) > .meter-bar { width: 0%; }
+ div:nth-child(3) > .meter-bar { width: 10%; }
+ div:nth-child(4) > .meter-bar { width: 50%; }
+ div:nth-child(5) > .meter-bar { width: 0%; }
+ div:nth-child(6) > .meter-bar { width: 100%; }
+ div:nth-child(7) > .meter-bar { width: 42%; }
+ div:nth-child(8) > .meter-bar { width: 100%; }
+ div:nth-child(9) > .meter-bar { width: 100%; }
+ div:nth-child(10) > .meter-bar { width: 10%; }
+ div:nth-child(11) > .meter-bar { width: 37.5%; }
+ div:nth-child(12) > .meter-bar { width: 100%; }
+ div:nth-child(13) > .meter-bar { width: 100%; }
+ div:nth-child(14) > .meter-bar { width: 0%; }
+ div:nth-child(15) > .meter-bar { width: 55%; }
+ div:nth-child(16) > .meter-bar { width: 50%; }
+ div:nth-child(17) > .meter-bar { width: 20%; }
+ div:nth-child(18) > .meter-bar { width: 10%; }
+ div:nth-child(19) > .meter-bar { width: 10%; }
+ div:nth-child(20) > .meter-bar { width: 20%; }
+ div:nth-child(21) > .meter-bar { width: 37.5%; }
+ div:nth-child(22) > .meter-bar { width: 10%; }
+ div:nth-child(23) > .meter-bar { width: 10%; }
+ div:nth-child(24) > .meter-bar { width: 10%; }
+ div:nth-child(25) > .meter-bar { width: 50%; }
+ div:nth-child(26) > .meter-bar { width: 20%; }
+ div:nth-child(27) > .meter-bar { width: 90%; }
+ div:nth-child(28) > .meter-bar { width: 10%; }
+ div:nth-child(29) > .meter-bar { width: 10%; }
+ div:nth-child(30) > .meter-bar { width: 10%; }
+ div:nth-child(31) > .meter-bar { width: 10%; }
+ </style>
+ <body>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-rtl-ref.html b/layout/reftests/forms/meter/values-rtl-ref.html
new file mode 100644
index 0000000000..ea47bf2567
--- /dev/null
+++ b/layout/reftests/forms/meter/values-rtl-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-bar { width: 100%; }
+ div:nth-child(2) > .meter-bar { width: 0%; }
+ div:nth-child(3) > .meter-bar { width: 10%; }
+ div:nth-child(4) > .meter-bar { width: 50%; }
+ div:nth-child(5) > .meter-bar { width: 0%; }
+ div:nth-child(6) > .meter-bar { width: 100%; }
+ div:nth-child(7) > .meter-bar { width: 42%; }
+ div:nth-child(8) > .meter-bar { width: 100%; }
+ div:nth-child(9) > .meter-bar { width: 100%; }
+ div:nth-child(10) > .meter-bar { width: 10%; }
+ div:nth-child(11) > .meter-bar { width: 37.5%; }
+ div:nth-child(12) > .meter-bar { width: 100%; }
+ div:nth-child(13) > .meter-bar { width: 100%; }
+ div:nth-child(14) > .meter-bar { width: 0%; }
+ div:nth-child(15) > .meter-bar { width: 55%; }
+ div:nth-child(16) > .meter-bar { width: 50%; }
+ div:nth-child(17) > .meter-bar { width: 20%; }
+ div:nth-child(18) > .meter-bar { width: 10%; }
+ div:nth-child(19) > .meter-bar { width: 10%; }
+ div:nth-child(20) > .meter-bar { width: 20%; }
+ div:nth-child(21) > .meter-bar { width: 37.5%; }
+ div:nth-child(22) > .meter-bar { width: 10%; }
+ div:nth-child(23) > .meter-bar { width: 10%; }
+ div:nth-child(24) > .meter-bar { width: 10%; }
+ div:nth-child(25) > .meter-bar { width: 50%; }
+ div:nth-child(26) > .meter-bar { width: 20%; }
+ div:nth-child(27) > .meter-bar { width: 90%; }
+ div:nth-child(28) > .meter-bar { width: 10%; }
+ div:nth-child(29) > .meter-bar { width: 10%; }
+ div:nth-child(30) > .meter-bar { width: 10%; }
+ div:nth-child(31) > .meter-bar { width: 10%; }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-rtl.html b/layout/reftests/forms/meter/values-rtl.html
new file mode 100644
index 0000000000..bd86ed3b1f
--- /dev/null
+++ b/layout/reftests/forms/meter/values-rtl.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body dir='rtl'>
+ <meter value="1.0"></meter>
+ <meter value="0.0"></meter>
+ <meter value="0.1"></meter>
+ <meter value="0.5"></meter>
+ <meter value="-1"></meter>
+ <meter value="50"></meter>
+ <!-- focus on max -->
+ <meter value="42" max="100"></meter>
+ <meter value="42" max="1"></meter>
+ <meter value="42" max="-1"></meter>
+ <meter value="0.1" max="1"></meter>
+ <!-- focus on min -->
+ <meter value="50" min="20" max="100"></meter>
+ <meter value="50" min="1" ></meter>
+ <meter value="0.1" min="2" ></meter>
+ <meter value="0.1" min="0.1"></meter>
+ <meter value="0.1" min="-1"></meter>
+ <!-- focus on low -->
+ <meter value="50" low="20" max="100"></meter>
+ <meter value="20" low="50" max="100"></meter>
+ <meter value="0.1" low="-1"></meter>
+ <meter value="0.1" low="0"></meter>
+ <!-- focus on high -->
+ <meter value="20" high="50" max="100"></meter>
+ <meter value="50" min="20" high="1" max="100"></meter>
+ <meter value="0.1" low="0.3" high="0.2"></meter>
+ <meter value="0.1" high="-1"></meter>
+ <meter value="0.1" high="2"></meter>
+ <!-- focus on optimum -->
+ <meter value="50" max="100" optimum="20"></meter>
+ <meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+ <meter value="0.1" optimum="50"></meter>
+ <meter value="0.1" optimum="-1"></meter>
+ <meter value="0.1" optimum="1"></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical-ref.html b/layout/reftests/forms/meter/values-vertical-ref.html
new file mode 100644
index 0000000000..4f2d7ac915
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(2) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(3) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(4) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(5) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(6) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(7) > .meter-bar { position: relative; top: 58%; height: 42%; }
+ div:nth-child(8) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(9) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(10) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(11) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+ div:nth-child(12) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(13) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(14) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(15) > .meter-bar { position: relative; top: 45%; height: 55%; }
+ div:nth-child(16) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(17) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(18) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(19) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(20) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(21) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+ div:nth-child(22) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(23) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(24) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(25) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(26) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(27) > .meter-bar { position: relative; top: 10%; height: 90%; }
+ div:nth-child(28) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(29) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(30) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(31) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ </style>
+ <body>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical-rtl-ref.html b/layout/reftests/forms/meter/values-vertical-rtl-ref.html
new file mode 100644
index 0000000000..f99dc4189f
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical-rtl-ref.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ div:nth-child(1) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(2) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(3) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(4) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(5) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(6) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(7) > .meter-bar { position: relative; top: 58%; height: 42%; }
+ div:nth-child(8) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(9) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(10) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(11) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+ div:nth-child(12) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(13) > .meter-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(14) > .meter-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(15) > .meter-bar { position: relative; top: 45%; height: 55%; }
+ div:nth-child(16) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(17) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(18) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(19) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(20) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(21) > .meter-bar { position: relative; top: 62.5%; height: 37.5%; }
+ div:nth-child(22) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(23) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(24) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(25) > .meter-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(26) > .meter-bar { position: relative; top: 80%; height: 20%; }
+ div:nth-child(27) > .meter-bar { position: relative; top: 10%; height: 90%; }
+ div:nth-child(28) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(29) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(30) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(31) > .meter-bar { position: relative; top: 90%; height: 10%; }
+ </style>
+ <body dir='rtl'>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ <div class="meter-element vertical">
+ <div class="meter-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical-rtl.html b/layout/reftests/forms/meter/values-vertical-rtl.html
new file mode 100644
index 0000000000..7884e697ea
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical-rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ -moz-orient: vertical;
+ }
+ </style>
+ <body dir='rtl'>
+ <meter value="1.0"></meter>
+ <meter value="0.0"></meter>
+ <meter value="0.1"></meter>
+ <meter value="0.5"></meter>
+ <meter value="-1"></meter>
+ <meter value="50"></meter>
+ <!-- focus on max -->
+ <meter value="42" max="100"></meter>
+ <meter value="42" max="1"></meter>
+ <meter value="42" max="-1"></meter>
+ <meter value="0.1" max="1"></meter>
+ <!-- focus on min -->
+ <meter value="50" min="20" max="100"></meter>
+ <meter value="50" min="1" ></meter>
+ <meter value="0.1" min="2" ></meter>
+ <meter value="0.1" min="0.1"></meter>
+ <meter value="0.1" min="-1"></meter>
+ <!-- focus on low -->
+ <meter value="50" low="20" max="100"></meter>
+ <meter value="20" low="50" max="100"></meter>
+ <meter value="0.1" low="-1"></meter>
+ <meter value="0.1" low="0"></meter>
+ <!-- focus on high -->
+ <meter value="20" high="50" max="100"></meter>
+ <meter value="50" min="20" high="1" max="100"></meter>
+ <meter value="0.1" low="0.3" high="0.2"></meter>
+ <meter value="0.1" high="-1"></meter>
+ <meter value="0.1" high="2"></meter>
+ <!-- focus on optimum -->
+ <meter value="50" max="100" optimum="20"></meter>
+ <meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+ <meter value="0.1" optimum="50"></meter>
+ <meter value="0.1" optimum="-1"></meter>
+ <meter value="0.1" optimum="1"></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values-vertical.html b/layout/reftests/forms/meter/values-vertical.html
new file mode 100644
index 0000000000..9e32d53d6e
--- /dev/null
+++ b/layout/reftests/forms/meter/values-vertical.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ meter {
+ -moz-orient: vertical;
+ }
+ </style>
+ <body>
+ <meter value="1.0"></meter>
+ <meter value="0.0"></meter>
+ <meter value="0.1"></meter>
+ <meter value="0.5"></meter>
+ <meter value="-1"></meter>
+ <meter value="50"></meter>
+ <!-- focus on max -->
+ <meter value="42" max="100"></meter>
+ <meter value="42" max="1"></meter>
+ <meter value="42" max="-1"></meter>
+ <meter value="0.1" max="1"></meter>
+ <!-- focus on min -->
+ <meter value="50" min="20" max="100"></meter>
+ <meter value="50" min="1" ></meter>
+ <meter value="0.1" min="2" ></meter>
+ <meter value="0.1" min="0.1"></meter>
+ <meter value="0.1" min="-1"></meter>
+ <!-- focus on low -->
+ <meter value="50" low="20" max="100"></meter>
+ <meter value="20" low="50" max="100"></meter>
+ <meter value="0.1" low="-1"></meter>
+ <meter value="0.1" low="0"></meter>
+ <!-- focus on high -->
+ <meter value="20" high="50" max="100"></meter>
+ <meter value="50" min="20" high="1" max="100"></meter>
+ <meter value="0.1" low="0.3" high="0.2"></meter>
+ <meter value="0.1" high="-1"></meter>
+ <meter value="0.1" high="2"></meter>
+ <!-- focus on optimum -->
+ <meter value="50" max="100" optimum="20"></meter>
+ <meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+ <meter value="0.1" optimum="50"></meter>
+ <meter value="0.1" optimum="-1"></meter>
+ <meter value="0.1" optimum="1"></meter>
+ </body>
+</html>
diff --git a/layout/reftests/forms/meter/values.html b/layout/reftests/forms/meter/values.html
new file mode 100644
index 0000000000..16d7f794ce
--- /dev/null
+++ b/layout/reftests/forms/meter/values.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <meter value="1.0"></meter>
+ <meter value="0.0"></meter>
+ <meter value="0.1"></meter>
+ <meter value="0.5"></meter>
+ <meter value="-1"></meter>
+ <meter value="50"></meter>
+ <!-- focus on max -->
+ <meter value="42" max="100"></meter>
+ <meter value="42" max="1"></meter>
+ <meter value="42" max="-1"></meter>
+ <meter value="0.1" max="1"></meter>
+ <!-- focus on min -->
+ <meter value="50" min="20" max="100"></meter>
+ <meter value="50" min="1" ></meter>
+ <meter value="0.1" min="2" ></meter>
+ <meter value="0.1" min="0.1"></meter>
+ <meter value="0.1" min="-1"></meter>
+ <!-- focus on low -->
+ <meter value="50" low="20" max="100"></meter>
+ <meter value="20" low="50" max="100"></meter>
+ <meter value="0.1" low="-1"></meter>
+ <meter value="0.1" low="0"></meter>
+ <!-- focus on high -->
+ <meter value="20" high="50" max="100"></meter>
+ <meter value="50" min="20" high="1" max="100"></meter>
+ <meter value="0.1" low="0.3" high="0.2"></meter>
+ <meter value="0.1" high="-1"></meter>
+ <meter value="0.1" high="2"></meter>
+ <!-- focus on optimum -->
+ <meter value="50" max="100" optimum="20"></meter>
+ <meter value="20" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="90" max="100" low="40" high="50" optimum="20"></meter>
+ <meter value="10" max="100" low="20" high="40" optimum="50"></meter>
+ <meter value="0.1" optimum="50"></meter>
+ <meter value="0.1" optimum="-1"></meter>
+ <meter value="0.1" optimum="1"></meter>
+ </body>
+</html>