gfx/tests/reftest/picture-caching-on-async-zoom.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3  <head>
   4   <meta name="viewport" content="width=device-width"/>
   5   <title>The Grid in an overflowing div</title>
   6   <style type="text/css">
   7     html, body {
   8         padding: 0;
   9         border: 0;
  10         margin: 0;
  11         scrollbar-width: none;
  12     }
  13     table {
  14         padding: 0;
  15         margin: 0;
  16         border-top: none;
  17         border-left: none;
  18         border-right: 1px solid black;
  19         border-bottom: 1px solid black;
  20     }
  21     tr {
  22         padding: 0;
  23         border: 0;
  24         margin: 0;
  25     }
  26     td {
  27         /* top border counts as part of height, but
  28            left border doesn't count as part of width.
  29            go figure.
  30         */
  31         min-height: 99px;
  32         height: 99px;
  33         max-height: 99px;
  34         min-width: 99px;
  35         width: 99px;
  36         max-width: 99px;
  37         padding: 0;
  38         border-left: 1px solid black;
  39         border-top: 1px solid black;
  40         border-right: none;
  41         border-bottom: none;
  42         margin: 0;
  43         font-size: 12px;
  44         text-align: left;
  45         vertical-align: top;
  46         font-family: monospace;
  47     }
  48   </style>
  49  </head>
  50  <body>
  51   <div style="color: red">this text is above the scrolling div. the div below is 300x400</div>
  52   <div id="nest" style="overflow: scroll; scrollbar-width: none; height: 400px; width: 300px">
  53   <table cellspacing="0" cellpadding="0" border="0">
  54    <script type="text/javascript">
  55     var PAGE_SIZE = 2000;
  56     var GRID_SIZE = 100;
  57
  58     var cnt = (PAGE_SIZE / GRID_SIZE);
  59     for (var y = 0; y < cnt; y++) {
  60         document.writeln( "<tr>" );
  61         for (var x = 0; x < cnt; x++) {
  62             var color = ((x + y) % 2) ? "blue" : "red";
  63             document.writeln( "<td style='background-color: " + color + "'></td>" );
  64         }
  65         document.writeln( "</tr>" );
  66     }
  67    </script>
  68   </table>
  69   </div>
  70   <div style="color: red">this text is below the scrolling div</div>
  71   <script>
  72     if (location.search == "?ref") {
  73         // In the reference case we use a CSS transform so that we don't use
  74         // the async-zoom codepath (which is handled differently by WR).
  75         document.documentElement.setAttribute("style", "transform: scale(1.1); transform-origin: top left");
  76         document.documentElement.classList.remove("reftest-wait");
  77     } else {
  78         // In the test case, we want to first paint the unscaled content, so that
  79         // WR populates the picture cache. Then we apply an async zoom and paint
  80         // again for the final snapshot. The bug in this case was that WR wasn't
  81         // properly invalidating the picture cache tiles and so things would
  82         // appear incorrectly.
  83         window.addEventListener("MozAfterPaint", () => {
  84             document.documentElement.setAttribute("reftest-async-zoom", "1.1");
  85             document.documentElement.classList.remove("reftest-wait");
  86         });
  87     }
  88   </script>
  89  </body>
  90 </html>