drawimage_canvas.html (10586B)
1 <script src="/resources/testharness.js"></script> 2 <script src="/resources/testharnessreport.js"></script> 3 <canvas id="dest" height="100" width="100"></canvas> 4 5 <script> 6 var sourceCanvasWidth = sourceCanvasHeight = 50; 7 var destCanvasWidth = destCanvasHeight = 100; 8 var blueRect = {x: 0, y: 0, w: 50, h: 50}; 9 var blackRect = {x: 5, y: 5, w: 40, h: 40}; 10 var redPixel = [255, 0, 0, 255]; 11 var bluePixel = [0, 0, 255, 255]; 12 var blackPixel = [0, 0, 0, 255]; 13 var transparentBlackPixel = [0, 0, 0, 0]; 14 15 var destCanvas = document.getElementById('dest'); 16 var destCtx = destCanvas.getContext('2d'); 17 destCtx.imageSmoothingEnabled = false; 18 19 function checkPixel(location, expected) { 20 var actual = destCtx.getImageData(location[0], location[1], 1, 1).data; 21 assert_array_equals(actual, expected); 22 } 23 24 function PreparePixelTests(blueCheck, blackCheck, redCheck, testDescription) { 25 var pixelTests = []; 26 for (var i = 0; i < blueCheck.length; i++) { 27 var message = testDescription + 'Pixel ' + blueCheck[i][0] + ',' + blueCheck[i][1] + ' should be blue.'; 28 pixelTests.push([message, blueCheck[i], bluePixel]); 29 } 30 for (var i = 0; i < blackCheck.length; i++) { 31 var message = testDescription + 'Pixel ' + blackCheck[i][0] + ',' + blackCheck[i][1] + ' should be black.'; 32 pixelTests.push([message, blackCheck[i], blackPixel]); 33 } 34 for (var i = 0; i < redCheck.length; i++) { 35 var message = testDescription + 'Pixel ' + redCheck[i][0] + ',' + redCheck[i][1] + ' should be red.'; 36 pixelTests.push([message, redCheck[i], redPixel]); 37 } 38 pixelTests.push([testDescription + 'Pixel outside canvas should be transparent black.\n', [100, 100], transparentBlackPixel]); 39 return pixelTests; 40 } 41 42 function drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription) { 43 destCtx.fillStyle = 'red'; 44 destCtx.fillRect(0, 0, destCanvasWidth, destCanvasHeight); 45 46 var sourceCanvas = document.createElement('canvas'); 47 sourceCanvas.width = sourceCanvasWidth; 48 sourceCanvas.height = sourceCanvasHeight; 49 var sourceCtx = sourceCanvas.getContext('2d'); 50 sourceCtx.fillStyle = 'blue'; 51 sourceCtx.fillRect(blueRect.x, blueRect.y, blueRect.w, blueRect.h); 52 sourceCtx.fillStyle = 'black'; 53 sourceCtx.fillRect(blackRect.x, blackRect.y, blackRect.w, blackRect.h); 54 if (typeof sourceRect.x !== 'undefined') 55 destCtx.drawImage(sourceCanvas, sourceRect.x, sourceRect.y, sourceRect.w, sourceRect.h, 56 destRect.x, destRect.y, destRect.w, destRect.h); 57 else if (typeof destRect.w !== 'undefined') 58 destCtx.drawImage(sourceCanvas, destRect.x, destRect.y, destRect.w, destRect.h); 59 else 60 destCtx.drawImage(sourceCanvas, destRect.x, destRect.y); 61 var pixelTests = PreparePixelTests(blueCheck, blackCheck, redCheck, testDescription); 62 generate_tests(checkPixel, pixelTests); 63 } 64 65 var testDescription; 66 var sourceRect = {}, destRect = {}; 67 var blueCheck, blackCheck, redCheck; 68 69 // 2 arguments, the dest origin is 0,0 70 // The source canvas will be copied to the 0,0 position of the destination canvas 71 testDescription = 'Test scenario 1: dx = 0, dy = 0 --- '; 72 destRect = {x: 0, y: 0}; 73 blueCheck = [[0,0], [0,49], [49,0], [49,49]]; 74 blackCheck = [[5,5], [5,44], [44,5], [44,44]]; 75 redCheck = [[50,0], [0,50], [50,50], [99,99]]; 76 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 77 78 // 2 arguments, the dest origin is not 0,0 79 // The source canvas will copied to the 25, 25 position of the destination canvas 80 testDescription = 'Test scenario 2: dx = 25, dy = 25 --- '; 81 destRect = {x: 25, y: 25}; 82 blueCheck = [[25,25], [25,74], [74,25], [74,74]]; 83 blackCheck = [[30,30], [30,69], [69,30], [69,69]]; 84 redCheck = [[24,24], [24,75], [75,24], [75,75]]; 85 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 86 87 // 4 arguments, the source origin is not 0,0, the dest size is provided 88 // The source canvas will copied to the 50, 50 position of the destination canvas and 89 // on an area of 50x50 pixels 90 testDescription = 'Test scenario 3: dx = 50, dy = 50, dw = 50, dh = 50 --- '; 91 destRect = {x: 50, y: 50, w: 50, h: 50}; 92 blueCheck = [[50,50], [50,99], [99,50], [99,99]]; 93 blackCheck = [[55,55], [55,94], [94,55], [94,94]]; 94 redCheck = [[0,0], [49,49], [49,99], [99,49]]; 95 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 96 97 // 4 arguments, the dest origin is not 0,0 and the dest size is provided but 98 // does not match the size of the source. The image will be distorted 99 // The source canvas will copied to the 50,50 position of the destination canvas 100 // and it will be shrunk to a and area of 20x20 101 testDescription = 'Test scenario 4: dx = 50, dy = 50, dw = 20, dh = 20 --- '; 102 destRect = {x: 50, y: 50, w: 20, h: 20}; 103 blueCheck = [[50,50], [50,69], [69,50], [69,69]]; 104 blackCheck = [[52,52], [52,67], [67,52], [67,67]]; 105 redCheck = [[49,49], [49,70], [70,49], [70,70]]; 106 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 107 108 // The source canvas will copied to the 50,50 position of the destination canvas 109 // over an area of 50x25 pixels 110 // The copied image will be distorted along the x axis 111 testDescription = 'Test scenario 5: dx = 50, dy = 50, dw = 50, dh = 20 --- '; 112 destRect = {x: 50, y: 50, w: 50, h: 20}; 113 blueCheck = [[50,50], [50,69], [99,50], [99,69]]; 114 blackCheck = [[55,52], [55,67], [94,52], [94,67]]; 115 redCheck = [[49,49], [49, 69], [99,49], [99,70]]; 116 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 117 118 // 8 arguments, both destination and source origins are 0, 0 119 // An area of 25x25 pixels of the source image will be copied to 120 // an area of 25x25 pixels of the destination canvas 121 // destCtx.drawImage(sourceCanvas, 0, 0, 25, 25, 0, 0, 25, 25); 122 testDescription = 'Test scenario 6: sx = 0, sy = 0, sw = 25, sh = 25, dx = 0, dy = 0, dw = 25, dh = 25 --- '; 123 sourceRect = {x: 0, y: 0, w: 25, h: 25}; 124 destRect = {x: 0, y: 0, w: 25, h: 25}; 125 blueCheck = [[0,0], [4,4], [0,24], [24,0]]; 126 blackCheck = [[5,5], [5,24], [24,5], [24,24]]; 127 redCheck = [[25,25], [25, 99], [99,25], [99,99]]; 128 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 129 130 // 8 arguments the destination origin is not 0,0 131 // An area of 25x25 pixels of the source image will be copied to 132 // an area of 25x25 pixels of the destination canvas in the position 25,25 133 testDescription = 'Test scenario 7: sx = 0, sy = 0, sw = 25, sh = 25, dx = 25, dy = 25, dw = 25, dh = 25 --- '; 134 sourceRect = {x: 0, y: 0, w: 25, h: 25}; 135 destRect = {x: 25, y: 25, w: 25, h: 25}; 136 blueCheck = [[25,25], [25,49], [49,25], [29,29]]; 137 blackCheck = [[30,30], [30,49], [49,30], [49,49]]; 138 redCheck = [[24,24], [24, 50], [50,24], [50,50]]; 139 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 140 141 // The source rectangle overflows the source image 142 // The source area is clipped to fit the source image 143 // and the destination are is clipped in the same proportion 144 testDescription = 'Test scenario 8: sx = 25, sy = 25, sw = 50, sh = 50, dx = 0, dy = 0, dw = 50, dh = 50 --- '; 145 sourceRect = {x: 25, y: 25, w: 50, h: 50}; 146 destRect = {x: 0, y: 0, w: 50, h: 50}; 147 blueCheck = [[0,20], [20,0], [20,20], [24,24]]; 148 blackCheck = [[0,0], [0,19], [19,0], [19,19]]; 149 redCheck = [[0,25], [25, 0], [25,25], [99,99]]; 150 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 151 152 // The destination rectangle has negative width and height. When the source 153 // rectangle is outside the source image, the source rectangle must be clipped 154 // to the source image and the destination rectangle must be clipped in the same 155 // proportion. 156 testDescription = 'Test scenario 9: sx = 0, sy = 0, sw = 50, sh = 50, dx = 100, dy = 100, dw = -50, dh = -50 --- '; 157 sourceRect = {x: 0, y: 0, w: 50, h: 50}; 158 destRect = {x: 100, y: 100, w: -50, h: -50}; 159 blueCheck = [[50,50], [50,99], [99,50], [99,99]]; 160 blackCheck = [[55,55], [55,94], [94,55], [94,94]]; 161 redCheck = [[0,0], [49,49], [0,99], [99,0]]; 162 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 163 164 // The destination rectangle is larger than the destination canvas 165 // When the destination rectangle is outside the destination image (the scratch bitmap), 166 // the pixels that land outside the scratch bitmap are discarded, 167 // as if the destination was an infinite canvas whose rendering was 168 // clipped to the dimensions of the scratch bitmap. 169 testDescription = 'Test scenario 10: sx = 0, sy = 0, sw = 50, sh = 50, dx = 0, dy = 0, dw = 200, dh = 200 --- '; 170 sourceRect = {x: 0, y: 0, w: 50, h: 50}; 171 destRect = {x: 0, y: 0, w: 200, h: 200}; 172 blueCheck = [[0,0], [0,99], [99,0], [19,19]]; 173 blackCheck = [[20,20], [20,99], [99,20], [99,99]]; 174 redCheck = []; 175 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 176 177 // The source rectangle is larger than the source canvas 178 // The source area is clipped to fit the source image 179 // and the destination are is clipped in the same proportion 180 testDescription = 'Test scenario 11: sx = 0, sy = 0, sw = 100, sh = 100, dx = 0, dy = 0, dw = 50, dh = 50 --- '; 181 sourceRect = {x: 0, y: 0, w: 100, h: 100}; 182 destRect = {x: 0, y: 0, w: 50, h: 50}; 183 blueCheck = [[0,0], [1,1], [23,23], [24,24]]; 184 blackCheck = [[3,3], [3,21], [21,3], [21,21]]; 185 redCheck = [[0,25], [25, 0], [25,25], [99,99]]; 186 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 187 188 // Negative coordinates of the source rectangle. 189 // The source area is clipped to fit the source image and the destination area 190 // is clipped in the same proportion. In this specific test: 191 // - source is clipped by 20 from top and left. 192 // - destination will get proportionally clipped by 50 from top and left as we 193 // are scaling the source image 2.5 times. 194 // - the rect will be drawn from 70,70 to 100,100. 195 testDescription = 'Test scenario 12: sx = -20, sy = -20, sw = 50, sh = 50, dx = 20, dy = 20, dw = 125, dh = 125 --- '; 196 sourceRect = {x: -20, y: -20, w: 50, h: 50}; 197 destRect = {x: 20, y: 20, w: 125, h: 125}; 198 blueCheck = [[70,70], [70,99], [99,70], [82,82]]; 199 blackCheck = [[84,84], [84,99], [99,84], [99,99]]; 200 redCheck = [[0,69], [69, 0], [69,69]]; 201 drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); 202 203 </script>