dom/canvas/test/test_toDataURL_parameters_png.html

   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>