picture-caching-on-async-zoom.html

Enable keyboard shortcuts

<!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>