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

---
 .../forms/progress/bar-pseudo-element-ref.html     | 105 +++++++++++++++++++++
 .../forms/progress/bar-pseudo-element-rtl-ref.html |  45 +++++++++
 .../forms/progress/bar-pseudo-element-rtl.html     |  26 +++++
 .../progress/bar-pseudo-element-vertical-ref.html  |  90 ++++++++++++++++++
 .../bar-pseudo-element-vertical-rtl-ref.html       |  91 ++++++++++++++++++
 .../progress/bar-pseudo-element-vertical-rtl.html  |  46 +++++++++
 .../progress/bar-pseudo-element-vertical.html      |  46 +++++++++
 .../forms/progress/bar-pseudo-element.html         |  50 ++++++++++
 .../forms/progress/block-invalidate-ref.html       |  10 ++
 .../reftests/forms/progress/block-invalidate.html  |  19 ++++
 layout/reftests/forms/progress/in-cells-ref.html   |  22 +++++
 layout/reftests/forms/progress/in-cells.html       |  21 +++++
 .../progress/indeterminate-style-height-ref.html   |  46 +++++++++
 .../forms/progress/indeterminate-style-height.html |  24 +++++
 .../progress/indeterminate-style-width-ref.html    |  37 ++++++++
 .../forms/progress/indeterminate-style-width.html  |  19 ++++
 .../forms/progress/margin-padding-ref.html         |  88 +++++++++++++++++
 .../forms/progress/margin-padding-rtl-ref.html     |  88 +++++++++++++++++
 .../forms/progress/margin-padding-rtl.html         |  40 ++++++++
 .../progress/margin-padding-vertical-ref.html      |  88 +++++++++++++++++
 .../progress/margin-padding-vertical-rtl-ref.html  |  88 +++++++++++++++++
 .../progress/margin-padding-vertical-rtl.html      |  43 +++++++++
 .../forms/progress/margin-padding-vertical.html    |  43 +++++++++
 layout/reftests/forms/progress/margin-padding.html |  40 ++++++++
 layout/reftests/forms/progress/max-height-ref.html |  11 +++
 layout/reftests/forms/progress/max-height.html     |  11 +++
 .../forms/progress/progress-orient-block.html      |   3 +
 .../progress/progress-orient-horizontal-rtl.html   |   3 +
 .../forms/progress/progress-orient-horizontal.html |   3 +
 .../forms/progress/progress-orient-inline.html     |   3 +
 .../progress/progress-orient-vertical-rtl.html     |   3 +
 .../forms/progress/progress-orient-vertical.html   |   3 +
 .../forms/progress/progress-vlr-orient-block.html  |   3 +
 .../progress/progress-vlr-orient-horizontal.html   |   3 +
 .../forms/progress/progress-vlr-orient-inline.html |   3 +
 .../progress/progress-vlr-orient-vertical.html     |   3 +
 layout/reftests/forms/progress/progress-vlr.html   |   3 +
 .../forms/progress/progress-vrl-orient-block.html  |   3 +
 .../progress/progress-vrl-orient-horizontal.html   |   3 +
 .../forms/progress/progress-vrl-orient-inline.html |   3 +
 .../progress/progress-vrl-orient-vertical.html     |   3 +
 layout/reftests/forms/progress/progress-vrl.html   |   3 +
 layout/reftests/forms/progress/reftest-stylo.list  |  49 ++++++++++
 layout/reftests/forms/progress/reftest.list        |  42 +++++++++
 layout/reftests/forms/progress/style.css           |  39 ++++++++
 .../forms/progress/transformations-ref.html        |  78 +++++++++++++++
 .../reftests/forms/progress/transformations.html   |  36 +++++++
 layout/reftests/forms/progress/values-ref.html     |  58 ++++++++++++
 layout/reftests/forms/progress/values-rtl-ref.html |  58 ++++++++++++
 layout/reftests/forms/progress/values-rtl.html     |  16 ++++
 .../forms/progress/values-vertical-ref.html        |  58 ++++++++++++
 .../forms/progress/values-vertical-rtl-ref.html    |  58 ++++++++++++
 .../forms/progress/values-vertical-rtl.html        |  21 +++++
 .../reftests/forms/progress/values-vertical.html   |  21 +++++
 layout/reftests/forms/progress/values.html         |  16 ++++
 55 files changed, 1835 insertions(+)
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-ref.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-rtl.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element-vertical.html
 create mode 100644 layout/reftests/forms/progress/bar-pseudo-element.html
 create mode 100644 layout/reftests/forms/progress/block-invalidate-ref.html
 create mode 100644 layout/reftests/forms/progress/block-invalidate.html
 create mode 100644 layout/reftests/forms/progress/in-cells-ref.html
 create mode 100644 layout/reftests/forms/progress/in-cells.html
 create mode 100644 layout/reftests/forms/progress/indeterminate-style-height-ref.html
 create mode 100644 layout/reftests/forms/progress/indeterminate-style-height.html
 create mode 100644 layout/reftests/forms/progress/indeterminate-style-width-ref.html
 create mode 100644 layout/reftests/forms/progress/indeterminate-style-width.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-ref.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-rtl.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-vertical-ref.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-vertical-rtl.html
 create mode 100644 layout/reftests/forms/progress/margin-padding-vertical.html
 create mode 100644 layout/reftests/forms/progress/margin-padding.html
 create mode 100644 layout/reftests/forms/progress/max-height-ref.html
 create mode 100644 layout/reftests/forms/progress/max-height.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-block.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-horizontal.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-inline.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-vertical-rtl.html
 create mode 100644 layout/reftests/forms/progress/progress-orient-vertical.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr-orient-block.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr-orient-inline.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr-orient-vertical.html
 create mode 100644 layout/reftests/forms/progress/progress-vlr.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl-orient-block.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl-orient-inline.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl-orient-vertical.html
 create mode 100644 layout/reftests/forms/progress/progress-vrl.html
 create mode 100644 layout/reftests/forms/progress/reftest-stylo.list
 create mode 100644 layout/reftests/forms/progress/reftest.list
 create mode 100644 layout/reftests/forms/progress/style.css
 create mode 100644 layout/reftests/forms/progress/transformations-ref.html
 create mode 100644 layout/reftests/forms/progress/transformations.html
 create mode 100644 layout/reftests/forms/progress/values-ref.html
 create mode 100644 layout/reftests/forms/progress/values-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/values-rtl.html
 create mode 100644 layout/reftests/forms/progress/values-vertical-ref.html
 create mode 100644 layout/reftests/forms/progress/values-vertical-rtl-ref.html
 create mode 100644 layout/reftests/forms/progress/values-vertical-rtl.html
 create mode 100644 layout/reftests/forms/progress/values-vertical.html
 create mode 100644 layout/reftests/forms/progress/values.html

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

diff --git a/layout/reftests/forms/progress/bar-pseudo-element-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-ref.html
new file mode 100644
index 000000000..ae95d4e23
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-ref.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) > .progress-bar { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) > .progress-bar { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) > .progress-bar { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) > .progress-bar { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) > .progress-bar { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) > .progress-bar { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) > .progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) > .progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) > .progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) > .progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) > .progress-bar { margin: 200px; padding: 0px; }
+    body > div:nth-child(16) > .progress-bar { margin: 0px; padding: 200px; }
+    /* 15 - 18 should have 100% width, no need to specify. */
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
new file mode 100644
index 000000000..102fb61f5
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(2) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(3) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(4) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    /* 15 - 18 should have 100% width, no need to specify. */
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html
new file mode 100644
index 000000000..711dc26ba
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-rtl.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > progress:nth-child(1)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > progress:nth-child(2)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > progress:nth-child(3)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > progress:nth-child(4)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > progress:nth-child(5)::-moz-progress-bar { width: 1000px; }
+    body > progress:nth-child(6)::-moz-progress-bar { width: 10px; }
+    body > progress:nth-child(7)::-moz-progress-bar { width: 10%; }
+    body > progress:nth-child(8)::-moz-progress-bar { width: 200%; }
+  </style>
+  <body dir='rtl'>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <!-- Those will be used to change width. -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
new file mode 100644
index 000000000..972d2ca49
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    .progress-element { margin: 10px; }
+    body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(2) > .progress-bar { }
+    body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
+    body > div:nth-child(5) > .progress-bar { }
+    body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); }
+    body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
+    body > div:nth-child(8) > .progress-bar { }
+    body > div:nth-child(9) > .progress-bar { }
+    body > div:nth-child(10) > .progress-bar { }
+    body > div:nth-child(11) > .progress-bar { }
+    /* 12 - 15 should have 100% width, no need to specify. */
+    body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px; left: 64px;
+                                                 height: -moz-calc(100% - 32px);
+                                                 width: -moz-calc(100% + 128px - 1em); }
+  </style>
+  <body>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <br><div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
new file mode 100644
index 000000000..ddf951f1a
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    .progress-element { margin: 10px; }
+    body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(2) > .progress-bar { }
+    body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
+                                              height: -moz-calc(100% - 8px); }
+    body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
+    body > div:nth-child(5) > .progress-bar { }
+    body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); }
+    body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
+    body > div:nth-child(8) > .progress-bar { }
+    body > div:nth-child(9) > .progress-bar { }
+    body > div:nth-child(10) > .progress-bar {  }
+    body > div:nth-child(11) > .progress-bar { }
+    /* 12 - 15 should have 100% width, no need to specify. */
+    body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px;
+                                                 left: -moz-calc(100% + 128px + 32px );
+                                                 height: -moz-calc(100% - 32px);
+                                                 width: -moz-calc(100% + 128px - 1em); }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <br><div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
new file mode 100644
index 000000000..312d69f52
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      margin: 10px;
+      -moz-orient: vertical;
+    }
+    body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
+    body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
+    body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
+    body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
+    body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
+    body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
+    body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
+    body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
+  </style>
+  <body dir='rtl'>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <!-- Those will be used to change width. -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <br><progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element-vertical.html b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html
new file mode 100644
index 000000000..0ef17f167
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element-vertical.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      margin: 10px;
+      -moz-orient: vertical;
+    }
+    body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
+    body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
+    body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
+    body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
+    body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
+    body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
+    body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
+    body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <!-- Those will be used to change width. -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <br><progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/bar-pseudo-element.html b/layout/reftests/forms/progress/bar-pseudo-element.html
new file mode 100644
index 000000000..15caf21ef
--- /dev/null
+++ b/layout/reftests/forms/progress/bar-pseudo-element.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > progress:nth-child(1)::-moz-progress-bar { margin: 10px; padding: 0px; }
+    body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 10px; }
+    body > progress:nth-child(3)::-moz-progress-bar { margin: 10px; padding: 10px; }
+    body > progress:nth-child(4)::-moz-progress-bar { margin: 5px; padding: 5px; }
+    body > progress:nth-child(5)::-moz-progress-bar { margin: 50px; padding: 50px; }
+    body > progress:nth-child(6)::-moz-progress-bar { margin: 100px; padding: 100px; }
+    body > progress:nth-child(7)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > progress:nth-child(8)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > progress:nth-child(9)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > progress:nth-child(10)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > progress:nth-child(12)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > progress:nth-child(13)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > progress:nth-child(14)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > progress:nth-child(15)::-moz-progress-bar { margin: 200px; padding: 0px; }
+    body > progress:nth-child(16)::-moz-progress-bar { margin: 0px; padding: 200px; }
+    body > progress:nth-child(17)::-moz-progress-bar { width: 1000px; }
+    body > progress:nth-child(18)::-moz-progress-bar { width: 10px; }
+    body > progress:nth-child(19)::-moz-progress-bar { width: 10%; }
+    body > progress:nth-child(20)::-moz-progress-bar { width: 200%; }
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <!-- Those will be used to change width. -->
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/block-invalidate-ref.html b/layout/reftests/forms/progress/block-invalidate-ref.html
new file mode 100644
index 000000000..c06092f72
--- /dev/null
+++ b/layout/reftests/forms/progress/block-invalidate-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress { display: block; }
+  </style>
+  <body>
+    <progress value='0.5'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/block-invalidate.html b/layout/reftests/forms/progress/block-invalidate.html
new file mode 100644
index 000000000..47ba03bda
--- /dev/null
+++ b/layout/reftests/forms/progress/block-invalidate.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress { display: block; }
+  </style>
+  <script>
+    function loadHandler() {
+      setTimeout(function() {
+        var p = document.getElementsByTagName('progress')[0];
+        p.value = '0.5';
+        document.documentElement.className = '';
+      }, 0);
+    }
+  </script>
+  <body onload="loadHandler();">
+    <progress value='0'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/in-cells-ref.html b/layout/reftests/forms/progress/in-cells-ref.html
new file mode 100644
index 000000000..700270621
--- /dev/null
+++ b/layout/reftests/forms/progress/in-cells-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress { width: 10em; height: 1em; }
+    progress.vertical { -moz-orient: vertical; width: 1em; height: 10em; }
+  </style>
+  <body>
+    <table>
+      <tr>
+        <td>foo</td>
+        <td><progress value='0.5'></progress></td>
+        <td>bar</td>
+      </tr>
+      <tr>
+        <td>foo</td>
+        <td><progress class='vertical' value='0.5'></progress></td>
+        <td>bar</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/in-cells.html b/layout/reftests/forms/progress/in-cells.html
new file mode 100644
index 000000000..fc3614347
--- /dev/null
+++ b/layout/reftests/forms/progress/in-cells.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress.vertical { -moz-orient: vertical; }
+  </style>
+  <body>
+    <table>
+      <tr>
+        <td>foo</td>
+        <td><progress value='0.5'></progress></td>
+        <td>bar</td>
+      </tr>
+      <tr>
+        <td>foo</td>
+        <td><progress class='vertical' value='0.5'></progress></td>
+        <td>bar</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/indeterminate-style-height-ref.html b/layout/reftests/forms/progress/indeterminate-style-height-ref.html
new file mode 100644
index 000000000..d53eb069c
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-height-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div.progress-element {
+      height: 12em;
+      width: 2em;
+    }
+    div.progress-bar {
+      height: 100%;
+    }
+    body > div:nth-child(1) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 20px); height: 20px; }
+    body > div:nth-child(2) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 0px); height: 0px; }
+    body > div:nth-child(3) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 50%); height: 50%; }
+    body > div:nth-child(4) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 1em); height: 1em; }
+    body > div:nth-child(5) > .progress-bar { position: relative;
+                                              top: -moz-calc(12em - 100%); height: 100%; }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/progress/indeterminate-style-height.html b/layout/reftests/forms/progress/indeterminate-style-height.html
new file mode 100644
index 000000000..ddefd0afa
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-height.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+      height: 12em;
+      width: 2em;
+    }
+    body > progress:nth-child(1)::-moz-progress-bar { height: 20px; }
+    body > progress:nth-child(2)::-moz-progress-bar { height: 0px; }
+    body > progress:nth-child(3)::-moz-progress-bar { height: 50%; }
+    body > progress:nth-child(4)::-moz-progress-bar { height: 1em; }
+    /* last one is for the default value: width=100%. */
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/indeterminate-style-width-ref.html b/layout/reftests/forms/progress/indeterminate-style-width-ref.html
new file mode 100644
index 000000000..8a135b2ea
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-width-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div.progress-bar {
+      width:100%;
+    }
+    body > div:nth-child(1) > .progress-bar { width: 20px; }
+    body > div:nth-child(2) > .progress-bar { width: 0px; }
+    body > div:nth-child(3) > .progress-bar { width: 50%; }
+    body > div:nth-child(4) > .progress-bar { width: 1em; }
+    body > div:nth-child(5) > .progress-bar { width: 100%; }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/forms/progress/indeterminate-style-width.html b/layout/reftests/forms/progress/indeterminate-style-width.html
new file mode 100644
index 000000000..f5db8ff66
--- /dev/null
+++ b/layout/reftests/forms/progress/indeterminate-style-width.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > progress:nth-child(1)::-moz-progress-bar { width: 20px; }
+    body > progress:nth-child(2)::-moz-progress-bar { width: 0px; }
+    body > progress:nth-child(3)::-moz-progress-bar { width: 50%; }
+    body > progress:nth-child(4)::-moz-progress-bar { width: 1em; }
+    /* last one is for the default value: width=100%. */
+  </style>
+  <body>
+    <!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-ref.html b/layout/reftests/forms/progress/margin-padding-ref.html
new file mode 100644
index 000000000..33f35c306
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-rtl-ref.html
new file mode 100644
index 000000000..dcf76f0f3
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-rtl.html b/layout/reftests/forms/progress/margin-padding-rtl.html
new file mode 100644
index 000000000..fc445c36c
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-rtl.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress:nth-child(1) { margin: 10px; padding: 0px; }
+    progress:nth-child(2) { margin: 0px; padding: 10px; }
+    progress:nth-child(3) { margin: 10px; padding: 10px; }
+    progress:nth-child(4) { margin: 5px; padding: 5px; }
+    progress:nth-child(5) { margin: 50px; padding: 50px; }
+    progress:nth-child(6) { margin: 100px; padding: 100px; }
+    progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-ref.html
new file mode 100644
index 000000000..1d964bdfa
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
new file mode 100644
index 000000000..986a7ca44
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { margin: 10px; padding: 0px; }
+    body > div:nth-child(2) { margin: 0px; padding: 10px; }
+    body > div:nth-child(3) { margin: 10px; padding: 10px; }
+    body > div:nth-child(4) { margin: 5px; padding: 5px; }
+    body > div:nth-child(5) { margin: 50px; padding: 50px; }
+    body > div:nth-child(6) { margin: 100px; padding: 100px; }
+    body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical-rtl.html b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html
new file mode 100644
index 000000000..7be45b2c1
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical-rtl.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+    }
+    progress:nth-child(1) { margin: 10px; padding: 0px; }
+    progress:nth-child(2) { margin: 0px; padding: 10px; }
+    progress:nth-child(3) { margin: 10px; padding: 10px; }
+    progress:nth-child(4) { margin: 5px; padding: 5px; }
+    progress:nth-child(5) { margin: 50px; padding: 50px; }
+    progress:nth-child(6) { margin: 100px; padding: 100px; }
+    progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body dir='rtl'>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding-vertical.html b/layout/reftests/forms/progress/margin-padding-vertical.html
new file mode 100644
index 000000000..8e4d48565
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding-vertical.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+    }
+    progress:nth-child(1) { margin: 10px; padding: 0px; }
+    progress:nth-child(2) { margin: 0px; padding: 10px; }
+    progress:nth-child(3) { margin: 10px; padding: 10px; }
+    progress:nth-child(4) { margin: 5px; padding: 5px; }
+    progress:nth-child(5) { margin: 50px; padding: 50px; }
+    progress:nth-child(6) { margin: 100px; padding: 100px; }
+    progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/margin-padding.html b/layout/reftests/forms/progress/margin-padding.html
new file mode 100644
index 000000000..fe4f3d003
--- /dev/null
+++ b/layout/reftests/forms/progress/margin-padding.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress:nth-child(1) { margin: 10px; padding: 0px; }
+    progress:nth-child(2) { margin: 0px; padding: 10px; }
+    progress:nth-child(3) { margin: 10px; padding: 10px; }
+    progress:nth-child(4) { margin: 5px; padding: 5px; }
+    progress:nth-child(5) { margin: 50px; padding: 50px; }
+    progress:nth-child(6) { margin: 100px; padding: 100px; }
+    progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
+    progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
+    progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
+    progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
+    progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
+    progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
+    progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
+    progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
+    progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
+    progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+  </style>
+  <body>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/max-height-ref.html b/layout/reftests/forms/progress/max-height-ref.html
new file mode 100644
index 000000000..872f9cc82
--- /dev/null
+++ b/layout/reftests/forms/progress/max-height-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  progress {
+    height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<progress>Some text</progress>
diff --git a/layout/reftests/forms/progress/max-height.html b/layout/reftests/forms/progress/max-height.html
new file mode 100644
index 000000000..c9d545330
--- /dev/null
+++ b/layout/reftests/forms/progress/max-height.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+  progress {
+    max-height: 50px;
+    padding: 23px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+</style>
+<progress>Some text</progress>
diff --git a/layout/reftests/forms/progress/progress-orient-block.html b/layout/reftests/forms/progress/progress-orient-block.html
new file mode 100644
index 000000000..e5f33c497
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
new file mode 100644
index 000000000..64d715724
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-horizontal-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:horizontal" max=100 value=0 dir=rtl>
diff --git a/layout/reftests/forms/progress/progress-orient-horizontal.html b/layout/reftests/forms/progress/progress-orient-horizontal.html
new file mode 100644
index 000000000..e37e46170
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-inline.html b/layout/reftests/forms/progress/progress-orient-inline.html
new file mode 100644
index 000000000..352537ae7
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-orient-vertical-rtl.html b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html
new file mode 100644
index 000000000..7fb4d81be
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-vertical-rtl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:vertical" max=100 value=0 dir=rtl>
diff --git a/layout/reftests/forms/progress/progress-orient-vertical.html b/layout/reftests/forms/progress/progress-orient-vertical.html
new file mode 100644
index 000000000..6a64a5e8c
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-block.html b/layout/reftests/forms/progress/progress-vlr-orient-block.html
new file mode 100644
index 000000000..954bc9dd1
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
new file mode 100644
index 000000000..9584f95d7
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-inline.html b/layout/reftests/forms/progress/progress-vlr-orient-inline.html
new file mode 100644
index 000000000..9ec89960d
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr-orient-vertical.html b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html
new file mode 100644
index 000000000..625b543b4
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vlr.html b/layout/reftests/forms/progress/progress-vlr.html
new file mode 100644
index 000000000..52f42aede
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vlr.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-lr" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-block.html b/layout/reftests/forms/progress/progress-vrl-orient-block.html
new file mode 100644
index 000000000..52df5dd29
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-block.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
new file mode 100644
index 000000000..03ea99bb8
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-horizontal.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-inline.html b/layout/reftests/forms/progress/progress-vrl-orient-inline.html
new file mode 100644
index 000000000..57ee166d0
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-inline.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl-orient-vertical.html b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html
new file mode 100644
index 000000000..becd4504e
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl-orient-vertical.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=0>
diff --git a/layout/reftests/forms/progress/progress-vrl.html b/layout/reftests/forms/progress/progress-vrl.html
new file mode 100644
index 000000000..a3f0b889f
--- /dev/null
+++ b/layout/reftests/forms/progress/progress-vrl.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html>
+<progress style="writing-mode:vertical-rl" max=100 value=0>
diff --git a/layout/reftests/forms/progress/reftest-stylo.list b/layout/reftests/forms/progress/reftest-stylo.list
new file mode 100644
index 000000000..5019c4486
--- /dev/null
+++ b/layout/reftests/forms/progress/reftest-stylo.list
@@ -0,0 +1,49 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== values.html values.html
+== values-rtl.html values-rtl.html
+== margin-padding.html margin-padding.html
+== margin-padding-rtl.html margin-padding-rtl.html
+skip-if(B2G||Mulet) == bar-pseudo-element.html bar-pseudo-element.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl.html
+== indeterminate-style-width.html indeterminate-style-width.html
+
+# vertical tests
+== values-vertical.html values-vertical.html
+== values-vertical-rtl.html values-vertical-rtl.html
+== margin-padding-vertical.html margin-padding-vertical.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl.html
+skip-if(B2G||Mulet) == bar-pseudo-element-vertical.html bar-pseudo-element-vertical.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl.html
+== indeterminate-style-height.html indeterminate-style-height.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <progress> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations.html
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate.html
+== in-cells.html in-cells.html
+== max-height.html max-height.html
+
+# Tests for block and inline orientation in combination with writing-mode
+# XXX Remove default-preferences setting here after bug 1138384 makes
+#     it the default for all channels
+
+== progress-orient-horizontal.html progress-orient-horizontal.html
+skip == progress-orient-vertical.html progress-orient-vertical.html
+# only OS X currently has direction-dependent rendering here
+== progress-orient-block.html progress-orient-block.html
+== progress-orient-inline.html progress-orient-inline.html
+== progress-vlr.html progress-vlr.html
+== progress-vlr-orient-block.html progress-vlr-orient-block.html
+== progress-vlr-orient-inline.html progress-vlr-orient-inline.html
+== progress-vlr-orient-horizontal.html progress-vlr-orient-horizontal.html
+== progress-vlr-orient-vertical.html progress-vlr-orient-vertical.html
+== progress-vrl.html progress-vrl.html
+== progress-vrl-orient-block.html progress-vrl-orient-block.html
+== progress-vrl-orient-inline.html progress-vrl-orient-inline.html
+== progress-vrl-orient-horizontal.html progress-vrl-orient-horizontal.html
+== progress-vrl-orient-vertical.html progress-vrl-orient-vertical.html
diff --git a/layout/reftests/forms/progress/reftest.list b/layout/reftests/forms/progress/reftest.list
new file mode 100644
index 000000000..445a76a4d
--- /dev/null
+++ b/layout/reftests/forms/progress/reftest.list
@@ -0,0 +1,42 @@
+== values.html values-ref.html
+== values-rtl.html values-rtl-ref.html
+== margin-padding.html margin-padding-ref.html
+== margin-padding-rtl.html margin-padding-rtl-ref.html
+== bar-pseudo-element.html bar-pseudo-element-ref.html
+== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
+== indeterminate-style-width.html indeterminate-style-width-ref.html
+
+# vertical tests
+== values-vertical.html values-vertical-ref.html
+== values-vertical-rtl.html values-vertical-rtl-ref.html
+== margin-padding-vertical.html margin-padding-vertical-ref.html
+== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html
+== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html
+== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html
+== indeterminate-style-height.html indeterminate-style-height-ref.html
+
+# The following test is disabled but kept in the repository because the
+# transformations will not behave exactly the same for <progress> and two divs.
+# However, it would be possible to manually check those.
+# == transformations.html transformations-ref.html
+
+# Tests for bugs:
+== block-invalidate.html block-invalidate-ref.html
+== in-cells.html in-cells-ref.html
+== max-height.html max-height-ref.html
+
+# Tests for block and inline orientation in combination with writing-mode
+!= progress-orient-horizontal.html progress-orient-vertical.html
+fails-if(!cocoaWidget||OSX==1010) != progress-orient-vertical.html progress-orient-vertical-rtl.html # only OS X currently has direction-dependent rendering here
+== progress-orient-block.html progress-orient-vertical.html
+== progress-orient-inline.html progress-orient-horizontal.html
+== progress-vlr.html progress-orient-vertical.html
+== progress-vlr-orient-block.html progress-orient-horizontal.html
+== progress-vlr-orient-inline.html progress-orient-vertical.html
+== progress-vlr-orient-horizontal.html progress-orient-horizontal.html
+== progress-vlr-orient-vertical.html progress-orient-vertical.html
+== progress-vrl.html progress-orient-vertical-rtl.html
+== progress-vrl-orient-block.html progress-orient-horizontal-rtl.html
+== progress-vrl-orient-inline.html progress-orient-vertical-rtl.html
+== progress-vrl-orient-horizontal.html progress-orient-horizontal-rtl.html
+== progress-vrl-orient-vertical.html progress-orient-vertical-rtl.html
diff --git a/layout/reftests/forms/progress/style.css b/layout/reftests/forms/progress/style.css
new file mode 100644
index 000000000..025bde8f8
--- /dev/null
+++ b/layout/reftests/forms/progress/style.css
@@ -0,0 +1,39 @@
+div.progress-element {
+  -moz-appearance: progressbar;
+  display: inline-block;
+  height: 1em;
+  width: 10em;
+  vertical-align: -0.2em;
+
+  /* Default style in case of there is -moz-appearance: none; */
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow #e6e6e6;
+  -moz-border-right-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-left-colors: ThreeDShadow #e6e6e6;
+  background-color: #e6e6e6;
+}
+
+div.progress-element.vertical {
+  height: 10em;
+  width: 1em;
+}
+
+div.progress-bar {
+  -moz-appearance: progresschunk;
+  height: 100%;
+  /*
+   * We can't apply the following style to the reference because it will have
+   * underisable effectes:
+   * width: 100%;
+   */
+
+  box-sizing: border-box;
+
+  /* Default style in case of there is -moz-appearance: none; */
+  background-color: #0064b4;
+}
+
+progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
+  -moz-appearance: none;
+}
diff --git a/layout/reftests/forms/progress/transformations-ref.html b/layout/reftests/forms/progress/transformations-ref.html
new file mode 100644
index 000000000..f77751ac8
--- /dev/null
+++ b/layout/reftests/forms/progress/transformations-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    body > div:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    body > div:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+    body > div:nth-child(3) { -moz-transform: rotate(30deg); }
+    body > div:nth-child(4) { -moz-transform: scale(2, 4); }
+    body > div:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+    body > div:nth-child(6) { -moz-transform: scale(1, 0.4); }
+    body > div:nth-child(7) { -moz-transform: scale(0.1, 1); }
+    body > div:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+    body > div:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+    body > div:nth-child(10) { -moz-transform: translate(10px, 30px); }
+    body > div:nth-child(11) { -moz-transform: translate(30px, 10px); }
+    body > div:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+    body > div:nth-child(13) { -moz-transform: translate(30px, -10px); }
+    body > div:nth-child(14) { -moz-transform: scale(0, 0); }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/transformations.html b/layout/reftests/forms/progress/transformations.html
new file mode 100644
index 000000000..d15637977
--- /dev/null
+++ b/layout/reftests/forms/progress/transformations.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    progress:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+    progress:nth-child(3) { -moz-transform: rotate(30deg); }
+    progress:nth-child(4) { -moz-transform: scale(2, 4); }
+    progress:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
+    progress:nth-child(6) { -moz-transform: scale(1, 0.4); }
+    progress:nth-child(7) { -moz-transform: scale(0.1, 1); }
+    progress:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
+    progress:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
+    progress:nth-child(10) { -moz-transform: translate(10px, 30px); }
+    progress:nth-child(11) { -moz-transform: translate(30px, 10px); }
+    progress:nth-child(12) { -moz-transform: translate(-10px, 30px); }
+    progress:nth-child(13) { -moz-transform: translate(30px, -10px); }
+    progress:nth-child(14) { -moz-transform: scale(0, 0); }
+  </style>
+  <body>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+    <progress value='1'></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-ref.html b/layout/reftests/forms/progress/values-ref.html
new file mode 100644
index 000000000..048e1164c
--- /dev/null
+++ b/layout/reftests/forms/progress/values-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .progress-bar { width: 100%; }
+    div:nth-child(2) > .progress-bar { width: 0%; }
+    div:nth-child(3) > .progress-bar { width: 10%; }
+    div:nth-child(4) > .progress-bar { width: 50%; }
+    div:nth-child(5) > .progress-bar { width: 0%; }
+    div:nth-child(6) > .progress-bar { width: 100%; }
+    div:nth-child(7) > .progress-bar { width: 42%; }
+    div:nth-child(8) > .progress-bar { width: 100%; }
+    div:nth-child(9) > .progress-bar { width: 100%; }
+    div:nth-child(10) > .progress-bar { width: 10%; }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-rtl-ref.html b/layout/reftests/forms/progress/values-rtl-ref.html
new file mode 100644
index 000000000..99bf9fb2a
--- /dev/null
+++ b/layout/reftests/forms/progress/values-rtl-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .progress-bar { width: 100%; }
+    div:nth-child(2) > .progress-bar { width: 0%; }
+    div:nth-child(3) > .progress-bar { width: 10%; }
+    div:nth-child(4) > .progress-bar { width: 50%; }
+    div:nth-child(5) > .progress-bar { width: 0%; }
+    div:nth-child(6) > .progress-bar { width: 100%; }
+    div:nth-child(7) > .progress-bar { width: 42%; }
+    div:nth-child(8) > .progress-bar { width: 100%; }
+    div:nth-child(9) > .progress-bar { width: 100%; }
+    div:nth-child(10) > .progress-bar { width: 10%; }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-rtl.html b/layout/reftests/forms/progress/values-rtl.html
new file mode 100644
index 000000000..6a143b0c1
--- /dev/null
+++ b/layout/reftests/forms/progress/values-rtl.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body dir='rtl'>
+    <progress value="1.0"></progress>
+    <progress value="0.0"></progress>
+    <progress value="0.1"></progress>
+    <progress value="0.5"></progress>
+    <progress value="-1"></progress>
+    <progress value="42"></progress>
+    <progress value="42" max="100"></progress>
+    <progress value="42" max="1"></progress>
+    <progress value="42" max="-1"></progress>
+    <progress value="0.1" max="-1"></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-ref.html b/layout/reftests/forms/progress/values-vertical-ref.html
new file mode 100644
index 000000000..e6d85b317
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
+    div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
+  </style>
+  <body>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-rtl-ref.html b/layout/reftests/forms/progress/values-vertical-rtl-ref.html
new file mode 100644
index 000000000..6da23eae6
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-rtl-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
+    div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
+    div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
+    div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
+    div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
+    div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
+  </style>
+  <body dir='rtl'>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+    <div class="progress-element vertical">
+      <div class="progress-bar">
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical-rtl.html b/layout/reftests/forms/progress/values-vertical-rtl.html
new file mode 100644
index 000000000..b50db9ad2
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical-rtl.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+    }
+  </style>
+  <body dir='rtl'>
+    <progress value="1.0"></progress>
+    <progress value="0.0"></progress>
+    <progress value="0.1"></progress>
+    <progress value="0.5"></progress>
+    <progress value="-1"></progress>
+    <progress value="42"></progress>
+    <progress value="42" max="100"></progress>
+    <progress value="42" max="1"></progress>
+    <progress value="42" max="-1"></progress>
+    <progress value="0.1" max="-1"></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values-vertical.html b/layout/reftests/forms/progress/values-vertical.html
new file mode 100644
index 000000000..47294fdeb
--- /dev/null
+++ b/layout/reftests/forms/progress/values-vertical.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <style>
+    progress {
+      -moz-orient: vertical;
+    }
+  </style>
+  <body>
+    <progress value="1.0"></progress>
+    <progress value="0.0"></progress>
+    <progress value="0.1"></progress>
+    <progress value="0.5"></progress>
+    <progress value="-1"></progress>
+    <progress value="42"></progress>
+    <progress value="42" max="100"></progress>
+    <progress value="42" max="1"></progress>
+    <progress value="42" max="-1"></progress>
+    <progress value="0.1" max="-1"></progress>
+  </body>
+</html>
diff --git a/layout/reftests/forms/progress/values.html b/layout/reftests/forms/progress/values.html
new file mode 100644
index 000000000..3c5e3e80b
--- /dev/null
+++ b/layout/reftests/forms/progress/values.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <progress value="1.0"></progress>
+    <progress value="0.0"></progress>
+    <progress value="0.1"></progress>
+    <progress value="0.5"></progress>
+    <progress value="-1"></progress>
+    <progress value="42"></progress>
+    <progress value="42" max="100"></progress>
+    <progress value="42" max="1"></progress>
+    <progress value="42" max="-1"></progress>
+    <progress value="0.1" max="-1"></progress>
+  </body>
+</html>
-- 
cgit v1.2.3