diff --git a/layout/reftests/meta-viewport/reftest.list b/layout/reftests/meta-viewport/reftest.list
index c2eea68bfa79..aacd457b7513 100644
--- a/layout/reftests/meta-viewport/reftest.list
+++ b/layout/reftests/meta-viewport/reftest.list
@@ -18,6 +18,7 @@ default-preferences pref(dom.meta-viewport.enabled,true) pref(apz.allow_zooming,
 fails == position-fixed-on-landscape-content.html position-fixed-on-half-height-content-ref.html
 fails == position-fixed-on-square-content.html position-fixed-on-square-content-ref.html
 fails == async-scroll-to-no-content-area.html async-scroll-to-no-content-area-ref.html
+fails == resolution-change-on-landscape-content.html resolution-change-on-landscape-content-ref.html
 
 skip-if(!Android) fails-if(geckoview&&webrender) == position-fixed-on-minimum-scale-size.html position-fixed-on-minimum-scale-size-ref.html
 == position-fixed-out-of-view.html about:blank
diff --git a/layout/reftests/meta-viewport/resolution-change-on-landscape-content-ref.html b/layout/reftests/meta-viewport/resolution-change-on-landscape-content-ref.html
new file mode 100644
index 000000000000..d2058d48eecf
--- /dev/null
+++ b/layout/reftests/meta-viewport/resolution-change-on-landscape-content-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<style>
+html {
+  background-color: green;
+}
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  scrollbar-width: none; /* avoid drawing scrollbars */
+}
+#quarter-height {
+  background-color: red;
+  width: 100%;
+  height: 25%;
+  position: absolute;
+}
+</style>
+<div id="quarter-height"></div>
diff --git a/layout/reftests/meta-viewport/resolution-change-on-landscape-content.html b/layout/reftests/meta-viewport/resolution-change-on-landscape-content.html
new file mode 100644
index 000000000000..6343be70edba
--- /dev/null
+++ b/layout/reftests/meta-viewport/resolution-change-on-landscape-content.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+  This test case is initially scaled to 1.x by initial-scale=1 in the meta
+  viewport tag below, then scaled down to 0.25x by reftest-resolution="0.25"
+  -->
+<html reftest-resolution="0.25">
+<meta name="viewport" content="width=device-width,minimum-scale=0.25,initial-scale=1">
+<style>
+html {
+  background-color: green;
+}
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  scrollbar-width: none; /* avoid drawing scrollbars */
+}
+#quadruple-width {
+  background-color: red;
+  width: 400%;
+  height: 100%;
+  position: absolute;
+}
+</style>
+<div id="quadruple-width"></div>
+</html>
diff --git a/layout/tools/reftest/README.txt b/layout/tools/reftest/README.txt
index 4b8701094d79..2652ee7fde1c 100644
--- a/layout/tools/reftest/README.txt
+++ b/layout/tools/reftest/README.txt
@@ -604,7 +604,9 @@ is rendered with the specified resolution (as if the user pinch-zoomed in
 to that scale). Note that the difference between reftest-async-zoom and
 reftest-resolution is that reftest-async-zoom only applies the scale in
 the compositor, while reftest-resolution causes the page to be paint at that
-resolution.
+resolution. This attribute can be used together with initial-scale in meta
+viewport tag, in such cases initial-scale is applied first then
+reftest-resolution changes the scale.
 
 This attributes requires the pref apz.allow_zooming=true to have an effect.
 
