test_toDataURL_parameters_png.html (6639B)
1 <!DOCTYPE HTML> 2 <title>Canvas test: toDataURL parameters for png moz specific</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 5 <body> 6 <p> 7 This test covers the png compression options moz specific. 8 </p> 9 <canvas id="c" width="400" height="400"><p class="fallback">FAIL (fallback content)</p></canvas> 10 <script> 11 let canvas = document.getElementById('c'); 12 let ctx = canvas.getContext("2d"); 13 14 ctx.strokeStyle = '#FF0000'; 15 ctx.fillStyle = '#00FF00'; 16 ctx.fillRect(0, 0, 100, 100); 17 ctx.beginPath(); 18 ctx.moveTo(10, 10); 19 ctx.lineTo(90, 90); 20 ctx.stroke(); 21 ctx.strokeStyle = '#0000FF'; 22 ctx.beginPath(); 23 ctx.moveTo(90, 10); 24 ctx.lineTo(10, 90); 25 ctx.stroke(); 26 27 ctx.beginPath(); 28 ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle 29 ctx.moveTo(110, 75); 30 ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise) 31 ctx.moveTo(65, 65); 32 ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye 33 ctx.moveTo(95, 65); 34 ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye 35 ctx.stroke(); 36 37 ctx.strokeStyle = '#FF0000'; 38 // Set line width 39 ctx.lineWidth = 10; 40 41 // Wall 42 ctx.strokeRect(75, 140, 150, 110); 43 44 // Door 45 ctx.fillRect(130, 190, 40, 60); 46 47 // Roof 48 ctx.beginPath(); 49 ctx.moveTo(50, 140); 50 ctx.lineTo(150, 60); 51 ctx.lineTo(250, 140); 52 ctx.closePath(); 53 ctx.stroke(); 54 55 56 for (let i = 0; i < 4; i++) { 57 for (let j = 0; j < 3; j++) { 58 ctx.beginPath(); 59 let x = 25 + j * 50; // x coordinate 60 let y = 25 + i * 50; // y coordinate 61 let radius = 20; // Arc radius 62 let startAngle = 0; // Starting point on circle 63 let endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle 64 let counterclockwise = i % 2 !== 0; // clockwise or counterclockwise 65 66 ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise); 67 68 if (i > 1) { 69 ctx.fill(); 70 } else { 71 ctx.stroke(); 72 } 73 } 74 } 75 76 for (let i = 0; i < 6; i++) { 77 for (let j = 0; j < 6; j++) { 78 ctx.fillStyle = `rgb( 79 ${Math.floor(255 - 42.5 * i)}, 80 ${Math.floor(255 - 42.5 * j)}, 81 0)`; 82 ctx.fillRect(200 + j * 25, 100 + i * 25, 25, 25); 83 } 84 } 85 86 for (let i = 0; i < 6; i++) { 87 for (let j = 0; j < 6; j++) { 88 ctx.fillStyle = `rgb( 89 ${Math.floor(255 - 42.5 * i)}, 90 0, 91 ${Math.floor(255 - 42.5 * j)})`; 92 ctx.fillRect(200 + j * 25, 250 + i * 25, 25, 25); 93 } 94 } 95 96 for (let i = 0; i < 6; i++) { 97 for (let j = 0; j < 6; j++) { 98 ctx.fillStyle = `rgb( 99 0, 100 ${Math.floor(255 - 42.5 * i)}, 101 ${Math.floor(255 - 42.5 * j)})`; 102 ctx.fillRect(0 + j * 25, 250 + i * 25, 25, 25); 103 } 104 } 105 106 107 // vary the zlib level 108 { 109 let zlib0 = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=0"); 110 let zlib3 = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=3"); 111 let zlibDefaultLevel = canvas.toDataURL("image/png"); 112 let zlib9 = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=9"); 113 // zlib0 > zlib3, zlibDefaultLevel > zlib9 114 ok(zlib0.length > zlib3.length, "zlib 3 better compression than zlib 0"); 115 ok(zlib0.length > zlibDefaultLevel.length, "zlib default better compression than zlib 0"); 116 ok(zlib3.length > zlib9.length, "zlib 9 better compression than zlib 3"); 117 ok(zlibDefaultLevel.length > zlib9.length, "zlib 9 better compression than zlib default"); 118 } 119 120 // vary the filter 121 { 122 let zlibNone = canvas.toDataURL("image/png", "-moz-parse-options:png-filter=none"); 123 let zlibSub = canvas.toDataURL("image/png", "-moz-parse-options:png-filter=sub"); 124 let zlibDefaultFilter = canvas.toDataURL("image/png"); 125 let zlibAll = canvas.toDataURL("image/png", "-moz-parse-options:png-filter=all"); 126 // zlibNone, zlibSub, zlibDefaultFilter > zlibAll 127 ok(zlibNone.length != zlibSub.length, "sub filter different compression than none filter"); 128 ok(zlibNone.length != zlibDefaultFilter.length, "default filter different compression than none filter"); 129 ok(zlibNone.length > zlibAll.length, "all filter better compression than none filter"); 130 ok(zlibSub.length > zlibAll.length, "all filter better compression than sub filter"); 131 ok(zlibDefaultFilter.length > zlibAll.length, "all filter better compression than default filter"); 132 } 133 134 // non-default zlib level, vary the filter 135 { 136 let zlibNone = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=6;png-filter=none"); 137 let zlibSub = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=6;png-filter=sub"); 138 let zlibDefaultFilter = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=6"); 139 let zlibAll = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=6;png-filter=all"); 140 // zlibNone, zlibSub, zlibDefaultFilter > zlibAll 141 ok(zlibNone.length != zlibSub.length, "sub filter different compression than none filter"); 142 ok(zlibNone.length != zlibDefaultFilter.length, "default filter different compression than none filter"); 143 ok(zlibNone.length > zlibAll.length, "all filter better compression than none filter"); 144 ok(zlibSub.length > zlibAll.length, "all filter better compression than sub filter"); 145 ok(zlibDefaultFilter.length > zlibAll.length, "all filter better compression than default filter"); 146 } 147 148 // non-default filter, vary the zlib level 149 { 150 let zlib0 = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=0;png-filter=all"); 151 let zlib3 = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=3;png-filter=all"); 152 let zlibDefaultLevel = canvas.toDataURL("image/png", "-moz-parse-options:png-filter=all"); 153 let zlib9 = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=9;png-filter=all"); 154 // zlib0 > zlib3, zlibDefaultLevel > zlib9 155 ok(zlib0.length > zlib3.length, "(all) zlib 3 better compression than zlib 0"); 156 ok(zlib0.length > zlibDefaultLevel.length, "(all) zlib default better compression than zlib 0"); 157 ok(zlib3.length > zlib9.length, "(all) zlib 9 better compression than zlib 3"); 158 ok(zlibDefaultLevel.length > zlib9.length, "(all) zlib 9 better compression than zlib default"); 159 } 160 161 // vary both 162 { 163 let zlib2 = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=2;png-filter=none"); 164 let zlib5 = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=5;png-filter=paeth"); 165 let zlib7 = canvas.toDataURL("image/png", "-moz-parse-options:png-zlib-level=7;png-filter=all"); 166 // zlib2 > zlib5 > zlib7 167 ok(zlib2.length > zlib5.length, "zlib 5 with paeth filter better than zlib 2 with none filter"); 168 ok(zlib5.length > zlib7.length, "zlib 7 with all filter better than zlib 5 with paeth filter"); 169 } 170 171 </script>