12 files changed, 244 insertions, 0 deletions
diff --git a/widget/reftests/507947.html b/widget/reftests/507947.html
new file mode 100644
index 000000000..2405850db
--- /dev/null
+++ b/widget/reftests/507947.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="height: 100px; -moz-appearance: toolbar;"></div>
diff --git a/widget/reftests/664925.xhtml b/widget/reftests/664925.xhtml
new file mode 100644
index 000000000..b4a11a738
--- /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 000000000..ea7269881
--- /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: -moz-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 000000000..a5942d7e5
--- /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 000000000..ce434e9f1
--- /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 000000000..91342772f
--- /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 000000000..4426fe93e
--- /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 000000000..445671c5e
--- /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 000000000..5de4274ec
--- /dev/null
+++ b/widget/reftests/progressbar-fallback-default-style-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    div.progress-element {
+      /**
+       * The purpose of this test is to not show the native style.
+       * -moz-appearance: progressbar;
+       */
+      display: inline-block;
+      height: 1em;
+      width: 10em;
+      vertical-align: -0.2em;
+
+      /* Default style in case of there is -moz-appearance: none; */
+      border: 2px solid;
+      -moz-border-top-colors: ThreeDShadow #e6e6e6;
+      -moz-border-right-colors: ThreeDHighlight #e6e6e6;
+      -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
+      -moz-border-left-colors: ThreeDShadow #e6e6e6;
+      background-color: #e6e6e6;
+    }
+
+    div.progress-bar {
+      /**
+       * The purpose of this test is to not show the native style.
+       * -moz-appearance: progresschunk;
+       */
+
+      height: 100%;
+      width: 100%;
+
+      box-sizing: border-box;
+
+      /* Default style in case of there is -moz-appearance: none; */
+      background-color: #0064b4;
+    }
+
+    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 000000000..7594e6555
--- /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-stylo.list b/widget/reftests/reftest-stylo.list
new file mode 100644
index 000000000..86ac4e30e
--- /dev/null
+++ b/widget/reftests/reftest-stylo.list
@@ -0,0 +1,8 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip-if(!cocoaWidget) == 507947.html 507947.html
+== progressbar-fallback-default-style.html progressbar-fallback-default-style.html
+fuzzy-if(Android,17,1120) == meter-native-style.html meter-native-style.html
+fails skip-if(!cocoaWidget) == meter-vertical-native-style.html meter-vertical-native-style.html
+# dithering
+== meter-fallback-default-style.html meter-fallback-default-style.html
+load 664925.xhtml
diff --git a/widget/reftests/reftest.list b/widget/reftests/reftest.list
new file mode 100644
index 000000000..26057327b
--- /dev/null
+++ b/widget/reftests/reftest.list
@@ -0,0 +1,6 @@
+skip-if(!cocoaWidget) != 507947.html about:blank
+== progressbar-fallback-default-style.html progressbar-fallback-default-style-ref.html
+fuzzy-if(Android,17,1120) == 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