test_drawImage_context_properties.html (5102B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test for canvas drawImage from an SVG with context properties</title> 6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="chrome://mochikit/content/tests/SimpleTest/WindowSnapshot.js"></script> 8 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/> 9 <script type="application/javascript"> 10 11 SimpleTest.waitForExplicitFinish(); 12 window.addEventListener("load", test); 13 14 function getRGBA(imageData, x, y) { 15 let index = y * (imageData.width * 4) + x * 4; 16 return [ 17 imageData.data[index++], 18 imageData.data[index++], 19 imageData.data[index++], 20 imageData.data[index++] 21 ]; 22 } 23 24 function test_image(size, contextProperties, strokeStyle, fillStyle, expectedStroke, expectedFill) { 25 // Canvas should be a checker board looking like: 26 // +--------+--------+ 27 // | Fill | Stroke | 28 // +--------|--------+ 29 // | Stroke | Fill | 30 // +--------+--------+ 31 let sourceElement = document.getElementById("img"); 32 let canvas = document.getElementById("canvas"); 33 34 // The canvas is always square and the size divisible by two. 35 canvas.width = size; 36 canvas.height = size; 37 let col_a_start = 0; 38 let col_a_end = (size / 2) - 1; 39 let col_b_start = size / 2; 40 let col_b_end = size - 1; 41 42 let is_color = (a, b, msg) => is(JSON.stringify(a), JSON.stringify(b), msg); 43 44 let context = canvas.getContext("2d"); 45 context.strokeStyle = strokeStyle; 46 context.fillStyle = fillStyle; 47 context.contextProperties = contextProperties; 48 49 context.drawImage(sourceElement, 0, 0, size, size); 50 let imageData = context.getImageData(0, 0, size, size); 51 52 is_color(getRGBA(imageData, col_a_start, col_a_start), expectedFill, "top-left should be fill"); 53 is_color(getRGBA(imageData, col_a_end, col_a_start), expectedFill, "top-left should be fill"); 54 is_color(getRGBA(imageData, col_b_start, col_a_start), expectedStroke, "top-right should be stroke"); 55 is_color(getRGBA(imageData, col_b_end, col_a_start), expectedStroke, "top-right should be stroke"); 56 57 is_color(getRGBA(imageData, col_a_start, col_a_end), expectedFill, "top-left should be fill"); 58 is_color(getRGBA(imageData, col_a_end, col_a_end), expectedFill, "top-left should be fill"); 59 is_color(getRGBA(imageData, col_b_start, col_a_end), expectedStroke, "top-right should be stroke"); 60 is_color(getRGBA(imageData, col_b_end, col_a_end), expectedStroke, "top-right should be stroke"); 61 62 is_color(getRGBA(imageData, col_a_start, col_b_start), expectedStroke, "bottom-left should be stroke"); 63 is_color(getRGBA(imageData, col_a_end, col_b_start), expectedStroke, "bottom-left should be stroke"); 64 is_color(getRGBA(imageData, col_b_start, col_b_start), expectedFill, "bottom-right should be fill"); 65 is_color(getRGBA(imageData, col_b_end, col_b_start), expectedFill, "bottom-right should be fill"); 66 67 is_color(getRGBA(imageData, col_a_start, col_b_end), expectedStroke, "bottom-left should be stroke"); 68 is_color(getRGBA(imageData, col_a_end, col_b_end), expectedStroke, "bottom-left should be stroke"); 69 is_color(getRGBA(imageData, col_b_start, col_b_end), expectedFill, "bottom-right should be fill"); 70 is_color(getRGBA(imageData, col_b_end, col_b_end), expectedFill, "bottom-right should be fill"); 71 72 let matches = (a, b) => a[0] == b[0] && a[1] == b[1] && a[2] == b[2] && a[3] == b[3]; 73 74 let fillCount = 0; 75 let strokeCount = 0; 76 for (let x = 0; x < imageData.width; x++) { 77 for (let y = 0; y < imageData.height; y++) { 78 let pixel = getRGBA(imageData, x, y); 79 80 if (matches(pixel, expectedFill)) { 81 fillCount++; 82 } 83 if (matches(pixel, expectedStroke)) { 84 strokeCount++; 85 } 86 } 87 } 88 89 is(fillCount, size * size / 2, "Area with fill should be correct"); 90 is(strokeCount, size * size / 2, "Area with stroke should be correct"); 91 } 92 93 async function test() { 94 let img = document.getElementById("img"); 95 await img.decode(); 96 97 test_image(48, "both", "blue", "red", [0, 0, 255, 255], [255, 0, 0, 255]); 98 99 // Try again to a different canvas size. 100 test_image(128, "both", "rgb(0, 255, 0)", "yellow", [0, 255, 0, 255], [255, 255, 0, 255]); 101 102 // Test with no properties applied. 103 test_image(32, "none", "blue", "red", [0, 255, 255, 255], [255, 255, 0, 255]); 104 105 // Test with only stroke applied. 106 test_image(32, "stroke", "blue", "red", [0, 0, 255, 255], [255, 255, 0, 255]); 107 108 // Test with only fill applie. 109 test_image(32, "fill", "blue", "red", [0, 255, 255, 255], [255, 0, 0, 255]); 110 111 SimpleTest.finish(); 112 } 113 </script> 114 </head> 115 <body> 116 <div style="display: none"> 117 <img 118 id="img" 119 src="file_drawImage_context_properties.svg" 120 style="width: 64px; height: 64px" 121 /> 122 </div> 123 <canvas id="canvas" style="width: 48; height: 48px"></canvas> 124 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1937109">Mozilla Bug 1937109</a> 125 </body> 126 </html>