test_drawSnapshot_fixed.html (1980B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test for drawSnapshot</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/WindowSnapshot.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 9 <style> 10 html { 11 height: 2000px; 12 overflow: hidden; 13 } 14 header { 15 position: fixed; 16 background: red; 17 display: block; 18 left: 0; 19 right: 0; 20 top: 0; 21 height: 200px; 22 } 23 </style> 24 <script type="application/javascript"> 25 function make_canvas() { 26 var canvas = document.createElement("canvas"); 27 canvas.setAttribute("height", 2000); 28 canvas.setAttribute("width", 500); 29 return canvas; 30 } 31 32 SimpleTest.waitForExplicitFinish(); 33 window.addEventListener("load", runTests); 34 35 window.scrollTo(0, 1000); 36 37 async function runTests(event) { 38 var testCanvas = make_canvas(); 39 var testCx = testCanvas.getContext("2d"); 40 var testWrapCx = SpecialPowers.wrap(testCx); 41 42 // Take a snapshot of the page while scrolled down, so that the fixed header will 43 // be visually in the middle of the root scroll frame, but should still be at the 44 // top of the snapshot (since snapshots with a rect are taken relative to the document). 45 var rect = new window.DOMRect(0, 0, 500, 2000); 46 let image = await SpecialPowers.snapshotContext(window, rect, "rgb(255, 255, 255)", true); 47 testWrapCx.drawImage(image, 0, 0); 48 49 var refCanvas = make_canvas(); 50 var refCx = refCanvas.getContext("2d"); 51 52 // Construct a reference image with an equivalent red square at the top. 53 refCx.fillStyle = "white"; 54 refCx.fillRect(0, 0, 500, 2000); 55 refCx.fillStyle = "red"; 56 refCx.fillRect(0, 0, 500, 200); 57 58 assertSnapshots(testCanvas, refCanvas, true, null, "position:fixed element with scrolling", "reference"); 59 60 SimpleTest.finish(); 61 } 62 63 </script> 64 </head> 65 <body> 66 <header></header> 67 </body> 68 </html>