picture-caching-on-async-zoom.html (2937B)
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>