12 files changed, 214 insertions, 0 deletions
diff --git a/widget/reftests/664925.xhtml b/widget/reftests/664925.xhtml
new file mode 100644
index 0000000000..b4a11a7386
--- /dev/null
+++ b/widget/reftests/664925.xhtml
@@ -0,0 +1 @@
+<html xmlns="http://www.w3.org/1999/xhtml"><div><td style="-moz-appearance: progressbar;"></td></div></html>
diff --git a/widget/reftests/meter-fallback-default-style-ref.html b/widget/reftests/meter-fallback-default-style-ref.html
new file mode 100644
index 0000000000..cf6c2e521e
--- /dev/null
+++ b/widget/reftests/meter-fallback-default-style-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    div.meter-element {
+      /**
+       * The purpose of this test is to not show the native style.
+       * -moz-appearance: meterbar;
+       */
+      display: inline-block;
+      height: 1em;
+      width: 5em;
+      vertical-align: -0.2em;
+
+      background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
+    }
+
+    div.meter-bar {
+      /**
+       * The purpose of this test is to not show the native style.
+       * -moz-appearance: meterchunk;
+       */
+
+      height: 100%;
+      width: 100%;
+
+      background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
+    }
+
+    div.meter-element { padding: 5px; }
+    body > div:nth-child(1)  { -moz-appearance: none; }
+    body > div:nth-child(2) > .meter-bar { -moz-appearance: none; }
+    body > div:nth-child(3)  { background: red; }
+    body > div:nth-child(4) > .meter-bar { background: red; }
+    body > div:nth-child(5)  { border: 2px solid red; }
+    body > div:nth-child(6) > .meter-bar { border: 5px solid red; width: calc(100% - 10px); }
+  </style>
+  <body>
+    <div class="meter-element">
+      <div class="meter-bar"></div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar"></div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar"></div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar"></div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar"></div>
+    </div>
+    <div class="meter-element">
+      <div class="meter-bar"></div>
+    </div>
+  </body>
+</html>
diff --git a/widget/reftests/meter-fallback-default-style.html b/widget/reftests/meter-fallback-default-style.html
new file mode 100644
index 0000000000..a5942d7e55
--- /dev/null
+++ b/widget/reftests/meter-fallback-default-style.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    meter { padding: 5px }
+    body > meter:nth-child(1) { -moz-appearance: none; }
+    body > meter:nth-child(2)::-moz-meter-bar { -moz-appearance: none; }
+    body > meter:nth-child(3) { background: red; }
+    body > meter:nth-child(4)::-moz-meter-bar { background: red; }
+    body > meter:nth-child(5) { border: 2px solid red; }
+    body > meter:nth-child(6)::-moz-meter-bar { border: 5px solid red; }
+  </style>
+  <body>
+    <meter value=1></meter>
+    <meter value=1></meter>
+    <meter value=1></meter>
+    <meter value=1></meter>
+    <meter value=1></meter>
+    <meter value=1></meter>
+  </body>
+</html>
diff --git a/widget/reftests/meter-native-style-ref.html b/widget/reftests/meter-native-style-ref.html
new file mode 100644
index 0000000000..ce434e9f16
--- /dev/null
+++ b/widget/reftests/meter-native-style-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <!-- Empty meter, no bar. -->
+    <meter></meter>
+    <!-- Full meter green colored. -->
+    <meter min=0 low=0 high=1 optimum=2 max=10 value=10></meter>
+    <!-- Full meter orange colored. -->
+    <meter min=0 low=0 high=1 optimum=1 max=10 value=10></meter>
+    <!-- Full meter red colored. -->
+    <meter min=0 low=1 high=2 optimum=0 max=10 value=10></meter>
+    <!-- Half-empty orange colored. -->
+    <meter min=0 low=0 high=1 optimum=0 max=10 value=5></meter>
+    <!-- Half-empty orange colored. -->
+    <meter min=0 low=0 high=1 optimum=0 max=10 value=5></meter>
+    <!-- With RTL, the bar should begin on the right. -->
+    <meter style="-moz-transform: scale(-1, 1);" value=0.5></meter>
+  </body>
+</html>
diff --git a/widget/reftests/meter-native-style.html b/widget/reftests/meter-native-style.html
new file mode 100644
index 0000000000..91342772fe
--- /dev/null
+++ b/widget/reftests/meter-native-style.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <meter vaue=0></meter>
+    <!-- Should be green. -->
+    <meter min=0 low=0 high=10 optimum=10 max=10 value=10></meter>
+    <!-- Should be orange. -->
+    <meter min=0 low=9 high=10 optimum=8 max=10 value=10></meter>
+    <!-- Should be red. -->
+    <meter min=0 low=8 high=9 optimum=0 max=10 value=10></meter>
+    <!-- Half-full orange. -->
+    <meter min=0 low=3 high=4 optimum=4 max=10 value=5></meter>
+    <!-- Half-full orange. -->
+    <meter min=0 low=9 high=10 optimum=10 max=10 value=5></meter>
+    <!-- Test RTL -->
+    <meter dir='rtl' value=0.5></meter>
+  </body>
+</html>
diff --git a/widget/reftests/meter-vertical-native-style-ref.html b/widget/reftests/meter-vertical-native-style-ref.html
new file mode 100644
index 0000000000..4426fe93e0
--- /dev/null
+++ b/widget/reftests/meter-vertical-native-style-ref.html
@@ -0,0 +1,14 @@
+<html>
+  <style>
+    meter:nth-child(1) { -moz-transform: rotate(-90deg) translate(-2em, -2em); }
+    meter:nth-child(2) { -moz-transform: rotate(-90deg) translate(-2em, -6em); }
+    meter:nth-child(3) { -moz-transform: rotate(-90deg) translate(-2em, -10em); }
+    meter:nth-child(4) { -moz-transform: rotate(-90deg) translate(-2em, -14em); }
+    meter:nth-child(5) { -moz-transform: rotate(-90deg) translate(-2em, -18em); }
+    meter:nth-child(6) { -moz-transform: rotate(-90deg) translate(-2em, -22em); }
+    meter:nth-child(7) { -moz-transform: rotate(-90deg) translate(-2em, -26em); }
+  </style>
+<body>
+<meter></meter><meter min=0 low=0 high=1 optimum=2 max=10 value=10></meter><meter min=0 low=0 high=1 optimum=1 max=10 value=10></meter><meter min=0 low=1 high=2 optimum=0 max=10 value=10></meter><meter min=0 low=0 high=1 optimum=0 max=10 value=5></meter><meter min=0 low=0 high=1 optimum=0 max=10 value=5></meter><meter value=0.5></meter>
+</body>
+</html>
diff --git a/widget/reftests/meter-vertical-native-style.html b/widget/reftests/meter-vertical-native-style.html
new file mode 100644
index 0000000000..445671c5e4
--- /dev/null
+++ b/widget/reftests/meter-vertical-native-style.html
@@ -0,0 +1,13 @@
+<html>
+  <style>
+    meter { -moz-orient: vertical; }
+  </style>
+  <body>
+<!-- For some reasons, the ref has a small offset when there are spaces between meters.
+     Given that we don't want to test -moz-transform and even a perfect match but just
+     the general rendering, we are going to keep this dirty test.
+     It's very similar to the non-vertical test with a difference, for the RTL: RTL
+     does not apply for vertical meters. -->
+<meter vaue=0></meter><meter min=0 low=0 high=10 optimum=10 max=10 value=10></meter><meter min=0 low=9 high=10 optimum=8 max=10 value=10></meter><meter min=0 low=8 high=9 optimum=0 max=10 value=10></meter><meter min=0 low=3 high=4 optimum=4 max=10 value=5></meter><meter min=0 low=9 high=10 optimum=10 max=10 value=5></meter><meter value=0.5 dir=rtl></meter>
+  </body>
+</html>
diff --git a/widget/reftests/progressbar-fallback-default-style-ref.html b/widget/reftests/progressbar-fallback-default-style-ref.html
new file mode 100644
index 0000000000..22950ec583
--- /dev/null
+++ b/widget/reftests/progressbar-fallback-default-style-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' href='resource://reftest/progress.css'>
+  <style>
+    div.progress-element { padding: 5px; }
+    body > div:nth-child(1)  { -moz-appearance: none; }
+    body > div:nth-child(2) > .progress-bar { -moz-appearance: none; }
+    body > div:nth-child(3)  { background-color: red; }
+    body > div:nth-child(4) > .progress-bar { background-color: red; }
+    body > div:nth-child(5)  { border: 2px solid red; }
+    body > div:nth-child(6) > .progress-bar { border: 5px solid red; }
+  </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>
+  </body>
+</html>
diff --git a/widget/reftests/progressbar-fallback-default-style.html b/widget/reftests/progressbar-fallback-default-style.html
new file mode 100644
index 0000000000..7594e65556
--- /dev/null
+++ b/widget/reftests/progressbar-fallback-default-style.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    progress { padding: 5px }
+    body > progress:nth-child(1) { -moz-appearance: none; }
+    body > progress:nth-child(2)::-moz-progress-bar { -moz-appearance: none; }
+    body > progress:nth-child(3) { background-color: red; }
+    body > progress:nth-child(4)::-moz-progress-bar { background-color: red; }
+    body > progress:nth-child(5) { border: 2px solid red; }
+    body > progress:nth-child(6)::-moz-progress-bar { border: 5px solid red; }
+  </style>
+  <body>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+    <progress></progress>
+  </body>
+</html>
diff --git a/widget/reftests/reftest.list b/widget/reftests/reftest.list
new file mode 100644
index 0000000000..7b2ba984e6
--- /dev/null
+++ b/widget/reftests/reftest.list
@@ -0,0 +1,9 @@
+== progressbar-fallback-default-style.html progressbar-fallback-default-style-ref.html
+fuzzy-if(Android,0-17,0-1120) fuzzy-if(webrender,0-8,0-480) == meter-native-style.html meter-native-style-ref.html
+skip-if(!cocoaWidget) == meter-vertical-native-style.html meter-vertical-native-style-ref.html # dithering
+== meter-fallback-default-style.html meter-fallback-default-style-ref.html
+load 664925.xhtml
+pref(apz.allow_zooming,true) pref(ui.useOverlayScrollbars,0) skip-if(!cocoaWidget) != scaled-scrollbar.html about:blank
+
+# Test that scrollbar buttons are inhibited on Linux using the non-native theme.
+skip-if(!gtkWidget) pref(widget.disable-native-theme-for-content,true) test-pref(ui.scrollArrowStyle,4097) ref-pref(ui.scrollArrowStyle,0) == scrollbar-buttons.html scrollbar-buttons.html
diff --git a/widget/reftests/scaled-scrollbar.html b/widget/reftests/scaled-scrollbar.html
new file mode 100644
index 0000000000..f94df78420
--- /dev/null
+++ b/widget/reftests/scaled-scrollbar.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html reftest-resolution="2.0" style="scrollbar-width: none;">
+<div style="overflow: scroll; width: 300px; height: 300px">
+ <div style="width: 1000px; height: 1000px"></div>
+</div>
+</html>
diff --git a/widget/reftests/scrollbar-buttons.html b/widget/reftests/scrollbar-buttons.html
new file mode 100644
index 0000000000..d54218272d
--- /dev/null
+++ b/widget/reftests/scrollbar-buttons.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<div style="width: 200px; height: 200px; overflow: scroll;">
+  <div style="width: 400px; height: 400px;"></div>
+</div>