From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../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  |  47 +++++++++
 .../progress/bar-pseudo-element-vertical.html      |  47 +++++++++
 .../forms/progress/bar-pseudo-element.html         |  51 ++++++++++
 .../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.list        |  42 +++++++++
 layout/reftests/forms/progress/style.css           |  37 ++++++++
 .../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 ++++
 54 files changed, 1787 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.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 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..34f0d7151f
--- /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) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    body > div:nth-child(2) { transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+    body > div:nth-child(3) { transform: rotate(30deg); }
+    body > div:nth-child(4) { transform: scale(2, 4); }
+    body > div:nth-child(5) { transform: scale(0.1, 0.4); }
+    body > div:nth-child(6) { transform: scale(1, 0.4); }
+    body > div:nth-child(7) { transform: scale(0.1, 1); }
+    body > div:nth-child(8) { transform: skew(30deg, -10deg); }
+    body > div:nth-child(9) { transform: skew(-30deg, 10deg); }
+    body > div:nth-child(10) { transform: translate(10px, 30px); }
+    body > div:nth-child(11) { transform: translate(30px, 10px); }
+    body > div:nth-child(12) { transform: translate(-10px, 30px); }
+    body > div:nth-child(13) { transform: translate(30px, -10px); }
+    body > div:nth-child(14) { transform: scale(0, 0); }
+  </style>
+  <body>
+    <div class="progress-element">
+      <div class="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..96a923c3f2
--- /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) { transform: matrix(1, -0.2, 0, 1, 0, 0); }
+    progress:nth-child(2) { transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
+    progress:nth-child(3) { transform: rotate(30deg); }
+    progress:nth-child(4) { transform: scale(2, 4); }
+    progress:nth-child(5) { transform: scale(0.1, 0.4); }
+    progress:nth-child(6) { transform: scale(1, 0.4); }
+    progress:nth-child(7) { transform: scale(0.1, 1); }
+    progress:nth-child(8) { transform: skew(30deg, -10deg); }
+    progress:nth-child(9) { transform: skew(-30deg, 10deg); }
+    progress:nth-child(10) { transform: translate(10px, 30px); }
+    progress:nth-child(11) { transform: translate(30px, 10px); }
+    progress:nth-child(12) { transform: translate(-10px, 30px); }
+    progress:nth-child(13) { transform: translate(30px, -10px); }
+    progress:nth-child(14) { 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>
-- 
cgit v1.2.3