file_drawWindow_common.js (4948B)
1 const CANVAS_WIDTH = 200; 2 const CANVAS_HEIGHT = 100; 3 4 async function runDrawWindowTests(snapshotCallback, transparentBackground) { 5 function make_canvas() { 6 var canvas = document.createElement("canvas"); 7 canvas.setAttribute("height", CANVAS_HEIGHT); 8 canvas.setAttribute("width", CANVAS_WIDTH); 9 document.body.appendChild(canvas); 10 return canvas; 11 } 12 13 var testCanvas = make_canvas(); 14 var refCanvas = make_canvas(); 15 16 var testCx = testCanvas.getContext("2d"); 17 var refCx = refCanvas.getContext("2d"); 18 19 var testWrapCx = SpecialPowers.wrap(testCx); 20 var refWrapCx = SpecialPowers.wrap(refCx); 21 22 function clearRef(fillStyle) { 23 refCx.setTransform(1, 0, 0, 1, 0, 0); 24 refCx.fillStyle = fillStyle; 25 refCx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 26 } 27 function clearTest(fillStyle) { 28 testCx.setTransform(1, 0, 0, 1, 0, 0); 29 testCx.fillStyle = fillStyle; 30 testCx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 31 } 32 function clear(fillStyle) { 33 clearRef(fillStyle); 34 clearTest(fillStyle); 35 } 36 37 // Basic tests of drawing the whole document on a background 38 39 clear("white"); 40 await snapshotCallback( 41 testWrapCx, 42 0, 43 0, 44 CANVAS_WIDTH, 45 CANVAS_HEIGHT, 46 "rgb(255, 255, 255)" 47 ); 48 refCx.fillStyle = "fuchsia"; 49 refCx.fillRect(10, 10, 20, 20); 50 refCx.fillStyle = "aqua"; 51 refCx.fillRect(50, 10, 20, 20); 52 refCx.fillStyle = "yellow"; 53 refCx.fillRect(90, 10, 20, 20); 54 assertSnapshots( 55 testCanvas, 56 refCanvas, 57 true /* equal */, 58 null /*no fuzz*/, 59 "full draw of source on white background", 60 "reference" 61 ); 62 63 clearTest("white"); 64 await snapshotCallback( 65 testWrapCx, 66 0, 67 0, 68 CANVAS_WIDTH, 69 CANVAS_HEIGHT, 70 "rgb(255, 255, 0)" 71 ); 72 assertSnapshots( 73 testCanvas, 74 refCanvas, 75 !transparentBackground /* not equal */, 76 null /*no fuzz*/, 77 "full draw of source on yellow background", 78 "reference" 79 ); 80 81 clearRef("yellow"); 82 refCx.fillStyle = "fuchsia"; 83 refCx.fillRect(10, 10, 20, 20); 84 refCx.fillStyle = "aqua"; 85 refCx.fillRect(50, 10, 20, 20); 86 refCx.fillStyle = "yellow"; 87 refCx.fillRect(90, 10, 20, 20); 88 89 assertSnapshots( 90 testCanvas, 91 refCanvas, 92 transparentBackground /* equal */, 93 null /*no fuzz*/, 94 "full draw of source on yellow background", 95 "reference" 96 ); 97 98 // Test drawing a region within the document. 99 100 clear("white"); 101 102 testCx.translate(17, 31); 103 await snapshotCallback(testWrapCx, 40, 0, 40, 40, "white"); 104 105 refCx.fillStyle = "aqua"; 106 refCx.fillRect(17 + 10, 31 + 10, 20, 20); 107 108 assertSnapshots( 109 testCanvas, 110 refCanvas, 111 true /* equal */, 112 null /*no fuzz*/, 113 "draw of subrect of source with matching background", 114 "reference" 115 ); 116 117 clear("blue"); 118 119 testCx.translate(17, 31); 120 await snapshotCallback(testWrapCx, 40, 0, 35, 45, "green"); 121 122 if (transparentBackground) { 123 refCx.fillStyle = "green"; 124 } else { 125 refCx.fillStyle = "white"; 126 } 127 refCx.fillRect(17, 31, 35, 45); 128 refCx.fillStyle = "aqua"; 129 refCx.fillRect(17 + 10, 31 + 10, 20, 20); 130 131 assertSnapshots( 132 testCanvas, 133 refCanvas, 134 true /* equal */, 135 null /*no fuzz*/, 136 "draw of subrect of source with different background", 137 "reference" 138 ); 139 140 // Test transparency of background not disturbing what is behind 141 clear("blue"); 142 143 testCx.translate(17, 31); 144 await snapshotCallback(testWrapCx, 40, 0, 35, 45, "transparent"); 145 146 if (!transparentBackground) { 147 refCx.fillStyle = "white"; 148 refCx.fillRect(17, 31, 35, 45); 149 } 150 refCx.fillStyle = "aqua"; 151 refCx.fillRect(17 + 10, 31 + 10, 20, 20); 152 153 assertSnapshots( 154 testCanvas, 155 refCanvas, 156 true /* equal */, 157 null /*no fuzz*/, 158 "draw of subrect of source with different background", 159 "reference" 160 ); 161 162 // Test that multiple drawWindow calls draw at correct positions. 163 clear("blue"); 164 165 testCx.translate(9, 3); 166 // 5, 8 is 5, 2 from the corner of the fuchsia square 167 await snapshotCallback(testWrapCx, 5, 8, 30, 25, "maroon"); 168 // 35, 0 is 15, 10 from the corner of the aqua square 169 await snapshotCallback(testWrapCx, 35, 0, 50, 40, "transparent"); 170 testCx.translate(15, 0); 171 // 85, 5 is 5, 5 from the corner of the yellow square 172 await snapshotCallback(testWrapCx, 85, 5, 30, 25, "transparent"); 173 174 if (transparentBackground) { 175 refCx.fillStyle = "maroon"; 176 refCx.fillRect(9, 3, 30, 25); 177 refCx.fillStyle = "fuchsia"; 178 refCx.fillRect(9 + 5, 3 + 2, 20, 20); 179 } else { 180 refCx.fillStyle = "white"; 181 refCx.fillRect(9, 3, 50, 40); 182 } 183 refCx.fillStyle = "aqua"; 184 refCx.fillRect(9 + 15, 3 + 10, 20, 20); 185 if (!transparentBackground) { 186 refCx.fillStyle = "white"; 187 refCx.fillRect(9 + 15, 3, 30, 25); 188 } 189 refCx.fillStyle = "yellow"; 190 refCx.fillRect(9 + 15 + 5, 3 + 0 + 5, 20, 20); 191 192 assertSnapshots( 193 testCanvas, 194 refCanvas, 195 true /* equal */, 196 null /*no fuzz*/, 197 "multiple drawWindow calls on top of each other", 198 "reference" 199 ); 200 }