summaryrefslogtreecommitdiffstats
path: root/layout/reftests/forms/progress
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/forms/progress')
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-ref.html105
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html45
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-rtl.html26
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html90
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html91
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html47
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element-vertical.html47
-rw-r--r--layout/reftests/forms/progress/bar-pseudo-element.html51
-rw-r--r--layout/reftests/forms/progress/block-invalidate-ref.html10
-rw-r--r--layout/reftests/forms/progress/block-invalidate.html19
-rw-r--r--layout/reftests/forms/progress/in-cells-ref.html22
-rw-r--r--layout/reftests/forms/progress/in-cells.html21
-rw-r--r--layout/reftests/forms/progress/indeterminate-style-height-ref.html46
-rw-r--r--layout/reftests/forms/progress/indeterminate-style-height.html24
-rw-r--r--layout/reftests/forms/progress/indeterminate-style-width-ref.html37
-rw-r--r--layout/reftests/forms/progress/indeterminate-style-width.html19
-rw-r--r--layout/reftests/forms/progress/margin-padding-ref.html88
-rw-r--r--layout/reftests/forms/progress/margin-padding-rtl-ref.html88
-rw-r--r--layout/reftests/forms/progress/margin-padding-rtl.html40
-rw-r--r--layout/reftests/forms/progress/margin-padding-vertical-ref.html88
-rw-r--r--layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html88
-rw-r--r--layout/reftests/forms/progress/margin-padding-vertical-rtl.html43
-rw-r--r--layout/reftests/forms/progress/margin-padding-vertical.html43
-rw-r--r--layout/reftests/forms/progress/margin-padding.html40
-rw-r--r--layout/reftests/forms/progress/max-height-ref.html11
-rw-r--r--layout/reftests/forms/progress/max-height.html11
-rw-r--r--layout/reftests/forms/progress/progress-orient-block.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-horizontal-rtl.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-inline.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-vertical-rtl.html3
-rw-r--r--layout/reftests/forms/progress/progress-orient-vertical.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr-orient-block.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr-orient-inline.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr-orient-vertical.html3
-rw-r--r--layout/reftests/forms/progress/progress-vlr.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl-orient-block.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl-orient-horizontal.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl-orient-inline.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl-orient-vertical.html3
-rw-r--r--layout/reftests/forms/progress/progress-vrl.html3
-rw-r--r--layout/reftests/forms/progress/reftest.list42
-rw-r--r--layout/reftests/forms/progress/style.css37
-rw-r--r--layout/reftests/forms/progress/transformations-ref.html78
-rw-r--r--layout/reftests/forms/progress/transformations.html36
-rw-r--r--layout/reftests/forms/progress/values-ref.html58
-rw-r--r--layout/reftests/forms/progress/values-rtl-ref.html58
-rw-r--r--layout/reftests/forms/progress/values-rtl.html16
-rw-r--r--layout/reftests/forms/progress/values-vertical-ref.html58
-rw-r--r--layout/reftests/forms/progress/values-vertical-rtl-ref.html58
-rw-r--r--layout/reftests/forms/progress/values-vertical-rtl.html21
-rw-r--r--layout/reftests/forms/progress/values-vertical.html21
-rw-r--r--layout/reftests/forms/progress/values.html16
54 files changed, 1787 insertions, 0 deletions
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-ref.html
new file mode 100644
index 0000000000..9d8d96a41a
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-ref.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) > .progress-bar { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) > .progress-bar { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) > .progress-bar { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) > .progress-bar { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) > .progress-bar { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) > .progress-bar { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) > .progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) > .progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) > .progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) > .progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) > .progress-bar { margin: 200px; padding: 0px; }
+ body > div:nth-child(16) > .progress-bar { margin: 0px; padding: 200px; }
+ /* 15 - 18 should have 100% width, no need to specify. */
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
new file mode 100644
index 0000000000..c25a143dbf
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(2) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(3) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(4) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ /* 15 - 18 should have 100% width, no need to specify. */
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html
new file mode 100644
index 0000000000..711dc26ba4
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > progress:nth-child(1)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > progress:nth-child(2)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > progress:nth-child(3)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > progress:nth-child(4)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > progress:nth-child(5)::-moz-progress-bar { width: 1000px; }
+ body > progress:nth-child(6)::-moz-progress-bar { width: 10px; }
+ body > progress:nth-child(7)::-moz-progress-bar { width: 10%; }
+ body > progress:nth-child(8)::-moz-progress-bar { width: 200%; }
+ </style>
+ <body dir='rtl'>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <!-- Those will be used to change width. -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
new file mode 100644
index 0000000000..4f28e3aceb
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ .progress-element { margin: 10px; }
+ body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(2) > .progress-bar { }
+ body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: calc(100% - 10px); }
+ body > div:nth-child(5) > .progress-bar { }
+ body > div:nth-child(6) > .progress-bar { height: calc(100% - 10px); }
+ body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
+ body > div:nth-child(8) > .progress-bar { }
+ body > div:nth-child(9) > .progress-bar { }
+ body > div:nth-child(10) > .progress-bar { }
+ body > div:nth-child(11) > .progress-bar { }
+ /* 12 - 15 should have 100% width, no need to specify. */
+ body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px; left: 64px;
+ height: calc(100% - 32px);
+ width: calc(100% + 128px - 1em); }
+ </style>
+ <body>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <br><div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
new file mode 100644
index 0000000000..d69b8b1e57
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ .progress-element { margin: 10px; }
+ body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(2) > .progress-bar { }
+ body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
+ height: calc(100% - 8px); }
+ body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: calc(100% - 10px); }
+ body > div:nth-child(5) > .progress-bar { }
+ body > div:nth-child(6) > .progress-bar { height: calc(100% - 10px); }
+ body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
+ body > div:nth-child(8) > .progress-bar { }
+ body > div:nth-child(9) > .progress-bar { }
+ body > div:nth-child(10) > .progress-bar { }
+ body > div:nth-child(11) > .progress-bar { }
+ /* 12 - 15 should have 100% width, no need to specify. */
+ body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px;
+ left: calc(100% + 128px + 32px );
+ height: calc(100% - 32px);
+ width: calc(100% + 128px - 1em); }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <br><div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
new file mode 100644
index 0000000000..7b8315c0f8
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ margin: 10px;
+ -moz-orient: vertical;
+ overflow: visible;
+ }
+ body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
+ body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
+ body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
+ body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
+ body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
+ body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
+ body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
+ body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
+ </style>
+ <body dir='rtl'>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <!-- Those will be used to change width. -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <br><progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html
new file mode 100644
index 0000000000..1988cb5184
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ margin: 10px;
+ -moz-orient: vertical;
+ overflow: visible;
+ }
+ body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
+ body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
+ body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
+ body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
+ body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
+ body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
+ body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
+ body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <!-- Those will be used to change width. -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <br><progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element.html b/layout/reftests/forms/progress/bar-pseudo-element.html
new file mode 100644
index 0000000000..edc8cd36ab
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress { overflow: visible; }
+ body > progress:nth-child(1)::-moz-progress-bar { margin: 10px; padding: 0px; }
+ body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 10px; }
+ body > progress:nth-child(3)::-moz-progress-bar { margin: 10px; padding: 10px; }
+ body > progress:nth-child(4)::-moz-progress-bar { margin: 5px; padding: 5px; }
+ body > progress:nth-child(5)::-moz-progress-bar { margin: 50px; padding: 50px; }
+ body > progress:nth-child(6)::-moz-progress-bar { margin: 100px; padding: 100px; }
+ body > progress:nth-child(7)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > progress:nth-child(8)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > progress:nth-child(9)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > progress:nth-child(10)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > progress:nth-child(12)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > progress:nth-child(13)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > progress:nth-child(14)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > progress:nth-child(15)::-moz-progress-bar { margin: 200px; padding: 0px; }
+ body > progress:nth-child(16)::-moz-progress-bar { margin: 0px; padding: 200px; }
+ body > progress:nth-child(17)::-moz-progress-bar { width: 1000px; }
+ body > progress:nth-child(18)::-moz-progress-bar { width: 10px; }
+ body > progress:nth-child(19)::-moz-progress-bar { width: 10%; }
+ body > progress:nth-child(20)::-moz-progress-bar { width: 200%; }
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <!-- Those will be used to change width. -->
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/block-invalidate-ref.html b/layout/reftests/forms/progress/block-invalidate-ref.html
new file mode 100644
index 0000000000..60f14f1349
--- /dev/null
+++ b/layout/reftests/forms/progress/block-invalidate-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ progress { display: block; }
+ </style>
+ <body>
+ <progress value='0.5'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/block-invalidate.html b/layout/reftests/forms/progress/block-invalidate.html
new file mode 100644
index 0000000000..47ba03bdac
--- /dev/null
+++ b/layout/reftests/forms/progress/block-invalidate.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress { display: block; }
+ </style>
+ <script>
+ function loadHandler() {
+ setTimeout(function() {
+ var p = document.getElementsByTagName('progress')[0];
+ p.value = '0.5';
+ document.documentElement.className = '';
+ }, 0);
+ }
+ </script>
+ <body onload="loadHandler();">
+ <progress value='0'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/in-cells-ref.html b/layout/reftests/forms/progress/in-cells-ref.html
new file mode 100644
index 0000000000..08917e43f4
--- /dev/null
+++ b/layout/reftests/forms/progress/in-cells-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ progress { width: 10em; height: 1em; }
+ progress.vertical { -moz-orient: vertical; width: 1em; height: 10em; }
+ </style>
+ <body>
+ <table>
+ <tr>
+ <td>foo</td>
+ <td><progress value='0.5'></progress></td>
+ <td>bar</td>
+ </tr>
+ <tr>
+ <td>foo</td>
+ <td><progress class='vertical' value='0.5'></progress></td>
+ <td>bar</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/in-cells.html b/layout/reftests/forms/progress/in-cells.html
new file mode 100644
index 0000000000..fc3614347a
--- /dev/null
+++ b/layout/reftests/forms/progress/in-cells.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress.vertical { -moz-orient: vertical; }
+ </style>
+ <body>
+ <table>
+ <tr>
+ <td>foo</td>
+ <td><progress value='0.5'></progress></td>
+ <td>bar</td>
+ </tr>
+ <tr>
+ <td>foo</td>
+ <td><progress class='vertical' value='0.5'></progress></td>
+ <td>bar</td>
+ </tr>
+ </table>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/indeterminate-style-height-ref.html b/layout/reftests/forms/progress/indeterminate-style-height-ref.html
new file mode 100644
index 0000000000..2a9eafa315
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-height-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div.progress-element {
+ height: 12em;
+ width: 2em;
+ }
+ div.progress-bar {
+ height: 100%;
+ }
+ body > div:nth-child(1) > .progress-bar { position: relative;
+ top: calc(12em - 20px); height: 20px; }
+ body > div:nth-child(2) > .progress-bar { position: relative;
+ top: calc(12em - 0px); height: 0px; }
+ body > div:nth-child(3) > .progress-bar { position: relative;
+ top: calc(12em - 50%); height: 50%; }
+ body > div:nth-child(4) > .progress-bar { position: relative;
+ top: calc(12em - 1em); height: 1em; }
+ body > div:nth-child(5) > .progress-bar { position: relative;
+ top: calc(12em - 100%); height: 100%; }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/forms/progress/indeterminate-style-height.html b/layout/reftests/forms/progress/indeterminate-style-height.html
new file mode 100644
index 0000000000..ddefd0afaf
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-height.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ height: 12em;
+ width: 2em;
+ }
+ body > progress:nth-child(1)::-moz-progress-bar { height: 20px; }
+ body > progress:nth-child(2)::-moz-progress-bar { height: 0px; }
+ body > progress:nth-child(3)::-moz-progress-bar { height: 50%; }
+ body > progress:nth-child(4)::-moz-progress-bar { height: 1em; }
+ /* last one is for the default value: width=100%. */
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/indeterminate-style-width-ref.html b/layout/reftests/forms/progress/indeterminate-style-width-ref.html
new file mode 100644
index 0000000000..7f67f946e0
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-width-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div.progress-bar {
+ width:100%;
+ }
+ body > div:nth-child(1) > .progress-bar { width: 20px; }
+ body > div:nth-child(2) > .progress-bar { width: 0px; }
+ body > div:nth-child(3) > .progress-bar { width: 50%; }
+ body > div:nth-child(4) > .progress-bar { width: 1em; }
+ body > div:nth-child(5) > .progress-bar { width: 100%; }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/forms/progress/indeterminate-style-width.html b/layout/reftests/forms/progress/indeterminate-style-width.html
new file mode 100644
index 0000000000..f5db8ff666
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-width.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ body > progress:nth-child(1)::-moz-progress-bar { width: 20px; }
+ body > progress:nth-child(2)::-moz-progress-bar { width: 0px; }
+ body > progress:nth-child(3)::-moz-progress-bar { width: 50%; }
+ body > progress:nth-child(4)::-moz-progress-bar { width: 1em; }
+ /* last one is for the default value: width=100%. */
+ </style>
+ <body>
+ <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ <progress></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-ref.html b/layout/reftests/forms/progress/margin-padding-ref.html
new file mode 100644
index 0000000000..5a64e6d2de
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-rtl-ref.html
new file mode 100644
index 0000000000..bef9c57276
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-rtl.html b/layout/reftests/forms/progress/margin-padding-rtl.html
new file mode 100644
index 0000000000..fc445c36c4
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-rtl.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress:nth-child(1) { margin: 10px; padding: 0px; }
+ progress:nth-child(2) { margin: 0px; padding: 10px; }
+ progress:nth-child(3) { margin: 10px; padding: 10px; }
+ progress:nth-child(4) { margin: 5px; padding: 5px; }
+ progress:nth-child(5) { margin: 50px; padding: 50px; }
+ progress:nth-child(6) { margin: 100px; padding: 100px; }
+ progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-ref.html
new file mode 100644
index 0000000000..2dea7af511
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
new file mode 100644
index 0000000000..4ded227feb
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { margin: 10px; padding: 0px; }
+ body > div:nth-child(2) { margin: 0px; padding: 10px; }
+ body > div:nth-child(3) { margin: 10px; padding: 10px; }
+ body > div:nth-child(4) { margin: 5px; padding: 5px; }
+ body > div:nth-child(5) { margin: 50px; padding: 50px; }
+ body > div:nth-child(6) { margin: 100px; padding: 100px; }
+ body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html
new file mode 100644
index 0000000000..7be45b2c1c
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ }
+ progress:nth-child(1) { margin: 10px; padding: 0px; }
+ progress:nth-child(2) { margin: 0px; padding: 10px; }
+ progress:nth-child(3) { margin: 10px; padding: 10px; }
+ progress:nth-child(4) { margin: 5px; padding: 5px; }
+ progress:nth-child(5) { margin: 50px; padding: 50px; }
+ progress:nth-child(6) { margin: 100px; padding: 100px; }
+ progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body dir='rtl'>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical.html b/layout/reftests/forms/progress/margin-padding-vertical.html
new file mode 100644
index 0000000000..8e4d485659
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ }
+ progress:nth-child(1) { margin: 10px; padding: 0px; }
+ progress:nth-child(2) { margin: 0px; padding: 10px; }
+ progress:nth-child(3) { margin: 10px; padding: 10px; }
+ progress:nth-child(4) { margin: 5px; padding: 5px; }
+ progress:nth-child(5) { margin: 50px; padding: 50px; }
+ progress:nth-child(6) { margin: 100px; padding: 100px; }
+ progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding.html b/layout/reftests/forms/progress/margin-padding.html
new file mode 100644
index 0000000000..fe4f3d003c
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress:nth-child(1) { margin: 10px; padding: 0px; }
+ progress:nth-child(2) { margin: 0px; padding: 10px; }
+ progress:nth-child(3) { margin: 10px; padding: 10px; }
+ progress:nth-child(4) { margin: 5px; padding: 5px; }
+ progress:nth-child(5) { margin: 50px; padding: 50px; }
+ progress:nth-child(6) { margin: 100px; padding: 100px; }
+ progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+ progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+ progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+ progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+ progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+ progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+ progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+ progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+ progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+ progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+ </style>
+ <body>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/max-height-ref.html b/layout/reftests/forms/progress/max-height-ref.html
new file mode 100644
index 0000000000..872f9cc826
--- /dev/null
+++ b/layout/reftests/forms/progress/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ progress {
+ height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<progress>Some text</progress>
diff --git a/layout/reftests/forms/progress/max-height.html b/layout/reftests/forms/progress/max-height.html
new file mode 100644
index 0000000000..c9d545330a
--- /dev/null
+++ b/layout/reftests/forms/progress/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+ progress {
+ max-height: 50px;
+ padding: 23px;
+ border: 1px solid black;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
+</style>
+<progress>Some text</progress>
diff --git a/layout/reftests/forms/progress/progress-orient-block.html b/layout/reftests/forms/progress/progress-orient-block.html
new file mode 100644
index 0000000000..e5f33c4979
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
new file mode 100644
index 0000000000..64d7157247
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:horizontal" max=100 value=0 dir=rtl>
diff --git a/layout/reftests/forms/progress/progress-orient-horizontal.html b/layout/reftests/forms/progress/progress-orient-horizontal.html
new file mode 100644
index 0000000000..e37e461702
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-inline.html b/layout/reftests/forms/progress/progress-orient-inline.html
new file mode 100644
index 0000000000..352537ae79
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-vertical-rtl.html b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html
new file mode 100644
index 0000000000..7fb4d81bed
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:vertical" max=100 value=0 dir=rtl>
diff --git a/layout/reftests/forms/progress/progress-orient-vertical.html b/layout/reftests/forms/progress/progress-orient-vertical.html
new file mode 100644
index 0000000000..6a64a5e8c8
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-block.html b/layout/reftests/forms/progress/progress-vlr-orient-block.html
new file mode 100644
index 0000000000..954bc9dd16
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
new file mode 100644
index 0000000000..9584f95d79
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-inline.html b/layout/reftests/forms/progress/progress-vlr-orient-inline.html
new file mode 100644
index 0000000000..9ec89960d8
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-vertical.html b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html
new file mode 100644
index 0000000000..625b543b46
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr.html b/layout/reftests/forms/progress/progress-vlr.html
new file mode 100644
index 0000000000..52f42aede5
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-block.html b/layout/reftests/forms/progress/progress-vrl-orient-block.html
new file mode 100644
index 0000000000..52df5dd298
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
new file mode 100644
index 0000000000..03ea99bb8d
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-inline.html b/layout/reftests/forms/progress/progress-vrl-orient-inline.html
new file mode 100644
index 0000000000..57ee166d09
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-vertical.html b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html
new file mode 100644
index 0000000000..becd4504e1
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl.html b/layout/reftests/forms/progress/progress-vrl.html
new file mode 100644
index 0000000000..a3f0b889fc
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl" max=100 value=0>
diff --git a/layout/reftests/forms/progress/reftest.list b/layout/reftests/forms/progress/reftest.list
new file mode 100644
index 0000000000..aa5f0c79d2
--- /dev/null
+++ b/layout/reftests/forms/progress/reftest.list
@@ -0,0 +1,42 @@
+== values.html values-ref.html
+== values-rtl.html values-rtl-ref.html
+== margin-padding.html margin-padding-ref.html
+== margin-padding-rtl.html margin-padding-rtl-ref.html
+== bar-pseudo-element.html bar-pseudo-element-ref.html
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
+== indeterminate-style-width.html indeterminate-style-width-ref.html
+
+# vertical tests
+== values-vertical.html values-vertical-ref.html
+== values-vertical-rtl.html values-vertical-rtl-ref.html
+== margin-padding-vertical.html margin-padding-vertical-ref.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html
+== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html
+== indeterminate-style-height.html indeterminate-style-height-ref.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <progress> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations-ref.html
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate-ref.html
+== in-cells.html in-cells-ref.html
+== max-height.html max-height-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= progress-orient-horizontal.html progress-orient-vertical.html
+fails != progress-orient-vertical.html progress-orient-vertical-rtl.html # only OS X currently has direction-dependent rendering here
+== progress-orient-block.html progress-orient-vertical.html
+== progress-orient-inline.html progress-orient-horizontal.html
+== progress-vlr.html progress-orient-vertical.html
+== progress-vlr-orient-block.html progress-orient-horizontal.html
+== progress-vlr-orient-inline.html progress-orient-vertical.html
+== progress-vlr-orient-horizontal.html progress-orient-horizontal.html
+== progress-vlr-orient-vertical.html progress-orient-vertical.html
+== progress-vrl.html progress-orient-vertical-rtl.html
+== progress-vrl-orient-block.html progress-orient-horizontal-rtl.html
+== progress-vrl-orient-inline.html progress-orient-vertical-rtl.html
+== progress-vrl-orient-horizontal.html progress-orient-horizontal-rtl.html
+== progress-vrl-orient-vertical.html progress-orient-vertical-rtl.html
diff --git a/layout/reftests/forms/progress/style.css b/layout/reftests/forms/progress/style.css
new file mode 100644
index 0000000000..fe3bc80389
--- /dev/null
+++ b/layout/reftests/forms/progress/style.css
@@ -0,0 +1,37 @@
+div.progress-element {
+ -moz-appearance: progressbar;
+ display: inline-block;
+ height: 1em;
+ width: 10em;
+ vertical-align: -0.2em;
+
+ /* Default style in case of there is -moz-appearance: none; */
+ border: 1px solid ThreeDShadow;
+ border-right-color: ThreeDHighlight;
+ border-bottom-color: ThreeDHighlight;
+ background-color: #e6e6e6;
+}
+
+div.progress-element.vertical {
+ height: 10em;
+ width: 1em;
+}
+
+div.progress-bar {
+ -moz-appearance: progresschunk;
+ height: 100%;
+ /*
+ * We can't apply the following style to the reference because it will have
+ * underisable effectes:
+ * width: 100%;
+ */
+
+ box-sizing: border-box;
+
+ /* Default style in case of there is -moz-appearance: none; */
+ background-color: #0064b4;
+}
+
+progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
+ -moz-appearance: none;
+}
diff --git a/layout/reftests/forms/progress/transformations-ref.html b/layout/reftests/forms/progress/transformations-ref.html
new file mode 100644
index 0000000000..dc0a246a3e
--- /dev/null
+++ b/layout/reftests/forms/progress/transformations-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ body > div:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ body > div:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+ body > div:nth-child(3) { -moz-transform: rotate(30deg); }
+ body > div:nth-child(4) { -moz-transform: scale(2, 4); }
+ body > div:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+ body > div:nth-child(6) { -moz-transform: scale(1, 0.4); }
+ body > div:nth-child(7) { -moz-transform: scale(0.1, 1); }
+ body > div:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+ body > div:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+ body > div:nth-child(10) { -moz-transform: translate(10px, 30px); }
+ body > div:nth-child(11) { -moz-transform: translate(30px, 10px); }
+ body > div:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+ body > div:nth-child(13) { -moz-transform: translate(30px, -10px); }
+ body > div:nth-child(14) { -moz-transform: scale(0, 0); }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/transformations.html b/layout/reftests/forms/progress/transformations.html
new file mode 100644
index 0000000000..d156379779
--- /dev/null
+++ b/layout/reftests/forms/progress/transformations.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+ progress:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+ progress:nth-child(3) { -moz-transform: rotate(30deg); }
+ progress:nth-child(4) { -moz-transform: scale(2, 4); }
+ progress:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+ progress:nth-child(6) { -moz-transform: scale(1, 0.4); }
+ progress:nth-child(7) { -moz-transform: scale(0.1, 1); }
+ progress:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+ progress:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+ progress:nth-child(10) { -moz-transform: translate(10px, 30px); }
+ progress:nth-child(11) { -moz-transform: translate(30px, 10px); }
+ progress:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+ progress:nth-child(13) { -moz-transform: translate(30px, -10px); }
+ progress:nth-child(14) { -moz-transform: scale(0, 0); }
+ </style>
+ <body>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ <progress value='1'></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-ref.html b/layout/reftests/forms/progress/values-ref.html
new file mode 100644
index 0000000000..d3c15bc8fb
--- /dev/null
+++ b/layout/reftests/forms/progress/values-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div:nth-child(1) > .progress-bar { width: 100%; }
+ div:nth-child(2) > .progress-bar { width: 0%; }
+ div:nth-child(3) > .progress-bar { width: 10%; }
+ div:nth-child(4) > .progress-bar { width: 50%; }
+ div:nth-child(5) > .progress-bar { width: 0%; }
+ div:nth-child(6) > .progress-bar { width: 100%; }
+ div:nth-child(7) > .progress-bar { width: 42%; }
+ div:nth-child(8) > .progress-bar { width: 100%; }
+ div:nth-child(9) > .progress-bar { width: 100%; }
+ div:nth-child(10) > .progress-bar { width: 10%; }
+ </style>
+ <body>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-rtl-ref.html b/layout/reftests/forms/progress/values-rtl-ref.html
new file mode 100644
index 0000000000..6787af2d70
--- /dev/null
+++ b/layout/reftests/forms/progress/values-rtl-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div:nth-child(1) > .progress-bar { width: 100%; }
+ div:nth-child(2) > .progress-bar { width: 0%; }
+ div:nth-child(3) > .progress-bar { width: 10%; }
+ div:nth-child(4) > .progress-bar { width: 50%; }
+ div:nth-child(5) > .progress-bar { width: 0%; }
+ div:nth-child(6) > .progress-bar { width: 100%; }
+ div:nth-child(7) > .progress-bar { width: 42%; }
+ div:nth-child(8) > .progress-bar { width: 100%; }
+ div:nth-child(9) > .progress-bar { width: 100%; }
+ div:nth-child(10) > .progress-bar { width: 10%; }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-rtl.html b/layout/reftests/forms/progress/values-rtl.html
new file mode 100644
index 0000000000..6a143b0c19
--- /dev/null
+++ b/layout/reftests/forms/progress/values-rtl.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body dir='rtl'>
+ <progress value="1.0"></progress>
+ <progress value="0.0"></progress>
+ <progress value="0.1"></progress>
+ <progress value="0.5"></progress>
+ <progress value="-1"></progress>
+ <progress value="42"></progress>
+ <progress value="42" max="100"></progress>
+ <progress value="42" max="1"></progress>
+ <progress value="42" max="-1"></progress>
+ <progress value="0.1" max="-1"></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-ref.html b/layout/reftests/forms/progress/values-vertical-ref.html
new file mode 100644
index 0000000000..43b3f7e20c
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
+ div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
+ </style>
+ <body>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-rtl-ref.html b/layout/reftests/forms/progress/values-vertical-rtl-ref.html
new file mode 100644
index 0000000000..88934c4876
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-rtl-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' href='resource://reftest/progress.css'>
+ <style>
+ div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
+ div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
+ div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
+ div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
+ div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
+ div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
+ </style>
+ <body dir='rtl'>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ <div class="progress-element vertical">
+ <div class="progress-bar">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-rtl.html b/layout/reftests/forms/progress/values-vertical-rtl.html
new file mode 100644
index 0000000000..b50db9ad2d
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ }
+ </style>
+ <body dir='rtl'>
+ <progress value="1.0"></progress>
+ <progress value="0.0"></progress>
+ <progress value="0.1"></progress>
+ <progress value="0.5"></progress>
+ <progress value="-1"></progress>
+ <progress value="42"></progress>
+ <progress value="42" max="100"></progress>
+ <progress value="42" max="1"></progress>
+ <progress value="42" max="-1"></progress>
+ <progress value="0.1" max="-1"></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical.html b/layout/reftests/forms/progress/values-vertical.html
new file mode 100644
index 0000000000..47294fdeb3
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <style>
+ progress {
+ -moz-orient: vertical;
+ }
+ </style>
+ <body>
+ <progress value="1.0"></progress>
+ <progress value="0.0"></progress>
+ <progress value="0.1"></progress>
+ <progress value="0.5"></progress>
+ <progress value="-1"></progress>
+ <progress value="42"></progress>
+ <progress value="42" max="100"></progress>
+ <progress value="42" max="1"></progress>
+ <progress value="42" max="-1"></progress>
+ <progress value="0.1" max="-1"></progress>
+ </body>
+</html>
diff --git a/layout/reftests/forms/progress/values.html b/layout/reftests/forms/progress/values.html
new file mode 100644
index 0000000000..3c5e3e80b7
--- /dev/null
+++ b/layout/reftests/forms/progress/values.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+ <link rel='stylesheet' type='text/css' href='style.css'>
+ <body>
+ <progress value="1.0"></progress>
+ <progress value="0.0"></progress>
+ <progress value="0.1"></progress>
+ <progress value="0.5"></progress>
+ <progress value="-1"></progress>
+ <progress value="42"></progress>
+ <progress value="42" max="100"></progress>
+ <progress value="42" max="1"></progress>
+ <progress value="42" max="-1"></progress>
+ <progress value="0.1" max="-1"></progress>
+ </body>
+</html>