1 files changed, 90 insertions, 0 deletions
diff --git a/gfx/tests/reftest/picture-caching-on-async-zoom.html b/gfx/tests/reftest/picture-caching-on-async-zoom.html
new file mode 100644
index 0000000000..f32ab02d3b
--- /dev/null
+++ b/gfx/tests/reftest/picture-caching-on-async-zoom.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+  <meta name="viewport" content="width=device-width"/>
+  <title>The Grid in an overflowing div</title>
+  <style type="text/css">
+    html, body {
+        padding: 0;
+        border: 0;
+        margin: 0;
+        scrollbar-width: none;
+    }
+    table {
+        padding: 0;
+        margin: 0;
+        border-top: none;
+        border-left: none;
+        border-right: 1px solid black;
+        border-bottom: 1px solid black;
+    }
+    tr {
+        padding: 0;
+        border: 0;
+        margin: 0;
+    }
+    td {
+        /* top border counts as part of height, but
+           left border doesn't count as part of width.
+           go figure.
+        */
+        min-height: 99px;
+        height: 99px;
+        max-height: 99px;
+        min-width: 99px;
+        width: 99px;
+        max-width: 99px;
+        padding: 0;
+        border-left: 1px solid black;
+        border-top: 1px solid black;
+        border-right: none;
+        border-bottom: none;
+        margin: 0;
+        font-size: 12px;
+        text-align: left;
+        vertical-align: top;
+        font-family: monospace;
+    }
+  </style>
+ </head>
+ <body>
+  <div style="color: red">this text is above the scrolling div. the div below is 300x400</div>
+  <div id="nest" style="overflow: scroll; scrollbar-width: none; height: 400px; width: 300px">
+  <table cellspacing="0" cellpadding="0" border="0">
+   <script type="text/javascript">
+    var PAGE_SIZE = 2000;
+    var GRID_SIZE = 100;
+
+    var cnt = (PAGE_SIZE / GRID_SIZE);
+    for (var y = 0; y < cnt; y++) {
+        document.writeln( "<tr>" );
+        for (var x = 0; x < cnt; x++) {
+            var color = ((x + y) % 2) ? "blue" : "red";
+            document.writeln( "<td style='background-color: " + color + "'></td>" );
+        }
+        document.writeln( "</tr>" );
+    }
+   </script>
+  </table>
+  </div>
+  <div style="color: red">this text is below the scrolling div</div>
+  <script>
+    if (location.search == "?ref") {
+        // In the reference case we use a CSS transform so that we don't use
+        // the async-zoom codepath (which is handled differently by WR).
+        document.documentElement.setAttribute("style", "transform: scale(1.1); transform-origin: top left");
+        document.documentElement.classList.remove("reftest-wait");
+    } else {
+        // In the test case, we want to first paint the unscaled content, so that
+        // WR populates the picture cache. Then we apply an async zoom and paint
+        // again for the final snapshot. The bug in this case was that WR wasn't
+        // properly invalidating the picture cache tiles and so things would
+        // appear incorrectly.
+        window.addEventListener("MozAfterPaint", () => {
+            document.documentElement.setAttribute("reftest-async-zoom", "1.1");
+            document.documentElement.classList.remove("reftest-wait");
+        });
+    }
+  </script>
+ </body>
+</html>