diff --git a/layout/reftests/forms/input/color/custom-style-1-ref.html b/layout/reftests/forms/input/color/custom-style-1-ref.html
index fa550d83b6a7..f9d66c187c68 100644
--- a/layout/reftests/forms/input/color/custom-style-1-ref.html
+++ b/layout/reftests/forms/input/color/custom-style-1-ref.html
@@ -2,9 +2,6 @@
 <html>
   <link rel='stylesheet' type='text/css' href='reference-style.css'>
   <style>
-    button.input-color {
-      -moz-appearance: button;
-    }
     div.input-color-swatch {
       margin-top: 3px;
       margin-bottom: 3px;
diff --git a/layout/reftests/forms/input/color/custom-style-1.html b/layout/reftests/forms/input/color/custom-style-1.html
index 4aea98b1454e..47905cf3b652 100644
--- a/layout/reftests/forms/input/color/custom-style-1.html
+++ b/layout/reftests/forms/input/color/custom-style-1.html
@@ -1,9 +1,6 @@
 <!DOCTYPE html>
 <html>
   <style>
-    input[type="color"] {
-      -moz-appearance: button;
-    }
     input[type="color"]::-moz-color-swatch {
       margin-top: 3px;
       margin-bottom: 3px;
diff --git a/layout/reftests/forms/input/color/margin-padding-1-ref.html b/layout/reftests/forms/input/color/margin-padding-1-ref.html
index e32ee72ca887..c33752397f04 100644
--- a/layout/reftests/forms/input/color/margin-padding-1-ref.html
+++ b/layout/reftests/forms/input/color/margin-padding-1-ref.html
@@ -18,6 +18,32 @@
     body > button:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
     body > button:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
     body > button:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
+
+    @supports -moz-bool-pref("widget.disable-native-theme-for-content") {
+      /* The non-native theme has different widget-supplied padding values
+       * for <input type="color"> and <button>, and so we must calculate
+       * the color swatch height explicitly.  These are computed as the
+       * widget-supplied min-height (32px) minus padding+border (padding
+       * as set above, and the 2px of widget-supplied border), clamped to be
+       * non-negative.
+       */
+      body > button:nth-child(1) .input-color-swatch { height: 30px; }
+      body > button:nth-child(2) .input-color-swatch { height: 10px; }
+      body > button:nth-child(3) .input-color-swatch { height: 10px; }
+      body > button:nth-child(4) .input-color-swatch { height: 20px; }
+      body > button:nth-child(5) .input-color-swatch { height: 0px; }
+      body > button:nth-child(6) .input-color-swatch { height: 0px; }
+      body > button:nth-child(7) .input-color-swatch { height: 30px; }
+      body > button:nth-child(8) .input-color-swatch { height: 30px; }
+      body > button:nth-child(9) .input-color-swatch { height: 30px; }
+      body > button:nth-child(10) .input-color-swatch { height: 30px; }
+      body > button:nth-child(11) .input-color-swatch { height: 20px; }
+      body > button:nth-child(12) .input-color-swatch { height: 30px; }
+      body > button:nth-child(13) .input-color-swatch { height: 20px; }
+      body > button:nth-child(14) .input-color-swatch { height: 30px; }
+      body > button:nth-child(15) .input-color-swatch { height: 22px; }
+      body > button:nth-child(16) .input-color-swatch { height: 30px; }
+    }
   </style>
   <body>
     <button class="input-color">
diff --git a/layout/reftests/forms/input/color/reference-style.css b/layout/reftests/forms/input/color/reference-style.css
index 188b12c3178d..a21354ff3f31 100644
--- a/layout/reftests/forms/input/color/reference-style.css
+++ b/layout/reftests/forms/input/color/reference-style.css
@@ -14,3 +14,21 @@ button.input-color {
   width: 64px;
   height: 23px;
 }
+
+@supports -moz-bool-pref("widget.disable-native-theme-for-content") {
+  /* The non-native theme has different widget-supplied padding values
+   * for <input type="color"> and <button> -- `4px 4px 4px 4px` for the
+   * former, and `1px 4px 1px 4px` for the latter.  So we size the
+   * references elements a bit differently to account for this.
+   */
+  button.input-color {
+    min-height: 32px; /* widget-supplied min-height */
+    padding: 4px; /* widget-supplied padding */
+  }
+
+  div.input-color-swatch {
+    height: 22px; /* for a real ::-moz-color-swatch, its 100% height computes to
+                     the widget-supplied min-height (32px) minus
+                     padding+border (10px) */
+  }
+}
diff --git a/layout/reftests/forms/input/color/reftest.list b/layout/reftests/forms/input/color/reftest.list
index 4f1a131079c2..a16e6dab3c16 100644
--- a/layout/reftests/forms/input/color/reftest.list
+++ b/layout/reftests/forms/input/color/reftest.list
@@ -1,8 +1,8 @@
-== input-color-1.html input-color-1-ref.html
+== input-color-1.html chrome://reftest/content/forms/input/color/input-color-1-ref.html
 
-fuzzy-if(!nativeThemePref,0-1,0-2) == margin-padding-1.html margin-padding-1-ref.html
+fuzzy-if(!nativeThemePref,0-1,0-2) == margin-padding-1.html chrome://reftest/content/forms/input/color/margin-padding-1-ref.html
 == block-invalidate-1.html block-invalidate-1-ref.html
 == block-invalidate-2.html block-invalidate-2-ref.html
-fuzzy-if(skiaContent,0-8,0-80) fuzzy-if(gtkWidget,0-8,0-113) == transformations-1.html transformations-1-ref.html # Bug 1600790 for gtkWidget
-== custom-style-1.html custom-style-1-ref.html
-== custom-style-2.html custom-style-2-ref.html
+fuzzy-if(skiaContent,0-8,0-80) fuzzy-if(gtkWidget,0-8,0-113) == transformations-1.html chrome://reftest/content/forms/input/color/transformations-1-ref.html # Bug 1600790 for gtkWidget
+== custom-style-1.html chrome://reftest/content/forms/input/color/custom-style-1-ref.html
+== custom-style-2.html chrome://reftest/content/forms/input/color/custom-style-2-ref.html
diff --git a/layout/reftests/writing-mode/reftest.list b/layout/reftests/writing-mode/reftest.list
index f7af122bb8bc..bea67661217a 100644
--- a/layout/reftests/writing-mode/reftest.list
+++ b/layout/reftests/writing-mode/reftest.list
@@ -73,7 +73,7 @@ fuzzy-if(Android,0-1,0-18) == ua-style-sheet-checkbox-radio-1.html ua-style-shee
 skip-if(Android) fuzzy-if(skiaContent&&!Android,0-2,0-6) == ua-style-sheet-button-1.html ua-style-sheet-button-1a-ref.html
 
 # Android uses different margins for buttons compared to the ref.
-skip-if(Android) == ua-style-sheet-input-color-1.html ua-style-sheet-input-color-1-ref.html
+skip-if(Android) == ua-style-sheet-input-color-1.html chrome://reftest/content/writing-mode/ua-style-sheet-input-color-1-ref.html
 fuzzy-if(gtkWidget,0-1,0-15) == ua-style-sheet-input-number-1.html ua-style-sheet-input-number-1-ref.html
 
 == 1127488-align-default-horizontal-tb-ltr.html 1127488-align-top-left-ref.html
diff --git a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
index 60df0792d788..35b73b0d35c3 100644
--- a/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
+++ b/layout/reftests/writing-mode/ua-style-sheet-input-color-1-ref.html
@@ -18,6 +18,16 @@
   width: 23px;
   padding: 8px 0px;
 }
+
+@supports -moz-bool-pref("widget.disable-native-theme-for-content") {
+  /* The non-native theme has 4px of widget-supplied padding on all four
+   * sides. */
+  .ltr input[type="color"]:not(.a),
+  .rtl input[type="color"]:not(.a),
+  .v-rl input[type="color"]:not(.a) {
+    padding: 4px;
+  }
+}
 </style>
 <div class=ltr>
   <input type=color><br>
diff --git a/layout/tools/reftest/jar.mn b/layout/tools/reftest/jar.mn
index 8ab49a389a2e..b1803a06382a 100644
--- a/layout/tools/reftest/jar.mn
+++ b/layout/tools/reftest/jar.mn
@@ -7,6 +7,7 @@ reftest.jar:
   content/box-shadow (../../reftests/box-shadow/*)
   content/bugs (../../reftests/bugs/*)
   content/css-display (../../reftests/css-display/*)
+  content/forms/input/color (../../reftests/forms/input/color/*)
   content/forms/input/file (../../reftests/forms/input/file/*)
   content/forms/input/text (../../reftests/forms/input/text/*)
   content/forms/placeholder (../../reftests/forms/placeholder/*)
@@ -16,6 +17,7 @@ reftest.jar:
   content/native-theme (../../reftests/native-theme/*)
   content/reftest-sanity (../../reftests/reftest-sanity/*)
   content/text-shadow (../../reftests/text-shadow/*)
+  content/writing-mode (../../reftests/writing-mode/*)
   content/xul-document-load (../../reftests/xul-document-load/*)
   content/xul (../../reftests/xul/*)
   content/xul/reftest (../../xul/reftest/*)
