tests/auto/quick/qquickcanvasitem/data/tst_composite.qml

   1 import QtQuick 2.0
   2
   3 CanvasTestCase {
   4    id:testCase
   5    name: "composite"
   6    function init_data() { return testData("2d"); }
   7    function test_clearRect(row) {
   8        var canvas = createCanvasObject(row);
   9        var ctx = canvas.getContext('2d');
  10        ctx.reset();
  11        ctx.fillStyle = '#f00';
  12        ctx.fillRect(0, 0, 100, 50);
  13        ctx.globalCompositeOperation = 'destination-atop';
  14        ctx.clearRect(0, 0, 100, 50);
  15        comparePixel(ctx, 50,25, 0,0,0,0);
  16   }
  17
  18    function test_clip(row) {
  19        var canvas = createCanvasObject(row);
  20        var ctx = canvas.getContext('2d');
  21        var composites = [ {compsite:"copy"},
  22                          {compsite:"destination-atop"},
  23                          {compsite:"destination-in"},
  24                          {compsite:"destination-out"},
  25                          {compsite:"destination-over"},
  26                         // {compsite:"lighter"}, //qt doesn't support lighter
  27                          {compsite:"source-atop"},
  28                          {compsite:"source-in"},
  29                          {compsite:"source-out"},
  30                          {compsite:"source-over"},
  31                          {compsite:"xor"}
  32                         ];
  33        for (var i=0; i<composites.length; i++) {
  34 //           console.log("composite:" + composites[i].compsite);
  35            ctx.reset();
  36            ctx.fillStyle = '#0f0';
  37            ctx.fillRect(0, 0, 100, 50);
  38            ctx.globalCompositeOperation = composites[i].compsite;
  39            ctx.rect(-20, -20, 10, 10);
  40            ctx.clip();
  41            ctx.fillStyle = '#f00';
  42            ctx.fillRect(0, 0, 50, 50);
  43            comparePixel(ctx, 25,25, 0,255,0,255);
  44            comparePixel(ctx, 75,25, 0,255,0,255);
  45        }
  46    }
  47
  48    function test_globalAlpha(row) {
  49        var canvas = createCanvasObject(row);
  50        var ctx = canvas.getContext('2d');
  51        ctx.reset();
  52        compare(ctx.globalAlpha, 1.0);
  53
  54        ctx.fillStyle = '#0f0';
  55        ctx.fillRect(0, 0, 100, 50);
  56        ctx.globalAlpha = 0.01; // avoid any potential alpha=0 optimizations
  57        ctx.fillStyle = '#f00';
  58        ctx.fillRect(0, 0, 100, 50);
  59        //comparePixel(ctx, 50,25, 2,253,0,255, 2);
  60
  61        ctx.reset();
  62        ctx.globalAlpha = 0.5;
  63        var a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
  64        ctx.globalAlpha = Infinity;
  65        compare(ctx.globalAlpha, a);
  66        ctx.globalAlpha = -Infinity;
  67        compare(ctx.globalAlpha, a);
  68        ctx.globalAlpha = NaN;
  69        compare(ctx.globalAlpha, a);
  70
  71        ctx.globalAlpha = 0.5;
  72        a = ctx.globalAlpha; // might not be exactly 0.5, if it is rounded/quantised, so remember for future comparisons
  73        ctx.globalAlpha = 1.1;
  74        compare(ctx.globalAlpha, a);
  75        ctx.globalAlpha = -0.1;
  76        compare(ctx.globalAlpha, a);
  77        ctx.globalAlpha = 0;
  78        compare(ctx.globalAlpha, 0);
  79        ctx.globalAlpha = 1;
  80        compare(ctx.globalAlpha, 1);
  81
  82    }
  83
  84    function test_operation(row) {
  85        var canvas = createCanvasObject(row);
  86        var ctx = canvas.getContext('2d');
  87        ctx.reset();
  88        ctx.globalCompositeOperation = 'xor';
  89        ctx.globalCompositeOperation = 'Source-over';
  90        compare(ctx.globalCompositeOperation, 'xor');
  91
  92        ctx.reset();
  93        ctx.globalCompositeOperation = 'xor';
  94        ctx.globalCompositeOperation = 'clear';
  95        compare(ctx.globalCompositeOperation, 'xor');
  96
  97        ctx.reset();
  98        ctx.globalCompositeOperation = 'xor';
  99        ctx.globalCompositeOperation = 'darker';
 100        compare(ctx.globalCompositeOperation, 'xor');
 101
 102        ctx.reset();
 103        compare(ctx.globalCompositeOperation, 'source-over');
 104
 105
 106        ctx.reset();
 107        var modes = ['source-atop', 'source-in', 'source-out', 'source-over',
 108            'destination-atop', 'destination-in', 'destination-out', 'destination-over',
 109            'lighter', 'copy', 'xor'];
 110        for (var i = 0; i < modes.length; ++i)
 111        {
 112            ctx.globalCompositeOperation = modes[i];
 113            compare(ctx.globalCompositeOperation, modes[i]);
 114        }
 115
 116        ctx.reset();
 117        ctx.globalCompositeOperation = 'xor';
 118        ctx.globalCompositeOperation = 'highlight';
 119        compare(ctx.globalCompositeOperation, 'xor');
 120
 121        ctx.reset();
 122        ctx.globalCompositeOperation = 'xor';
 123        ctx.globalCompositeOperation = 'source-over\\0';
 124        compare(ctx.globalCompositeOperation, 'xor');
 125
 126        ctx.reset();
 127        ctx.globalCompositeOperation = 'xor';
 128        ctx.globalCompositeOperation = 'over';
 129        compare(ctx.globalCompositeOperation, 'xor');
 130
 131
 132        ctx.reset();
 133        ctx.globalCompositeOperation = 'xor';
 134        ctx.globalCompositeOperation = 'nonexistent';
 135        compare(ctx.globalCompositeOperation, 'xor');
 136    }
 137
 138    function test_solid(row) {
 139        var canvas = createCanvasObject(row);
 140        var ctx = canvas.getContext('2d');
 141        ctx.reset();
 142        ctx.fillStyle = Qt.rgba(0, 1, 1, 1.0);
 143        ctx.fillRect(0, 0, 100, 50);
 144        ctx.globalCompositeOperation = 'copy';
 145        ctx.fillStyle = Qt.rgba(1, 1, 0, 1.0);
 146        ctx.fillRect(0, 0, 100, 50);
 147        //comparePixel(ctx, 50,25, 255,255,0, 5);
 148
 149        ctx.reset();
 150        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 151        ctx.fillRect(0, 0, 100, 50);
 152        ctx.globalCompositeOperation = 'destination-atop';
 153        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 154        ctx.fillRect(0, 0, 100, 50);
 155        //comparePixel(ctx, 50,25, 0,255,255,255, 5);
 156
 157        ctx.reset();
 158        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 159        ctx.fillRect(0, 0, 100, 50);
 160        ctx.globalCompositeOperation = 'destination-in';
 161        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 162        ctx.fillRect(0, 0, 100, 50);
 163        //comparePixel(ctx, 50,25, 0,255,255,255, 5);
 164
 165        ctx.reset();
 166        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 167        ctx.fillRect(0, 0, 100, 50);
 168        ctx.globalCompositeOperation = 'destination-out';
 169        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 170        ctx.fillRect(0, 0, 100, 50);
 171        comparePixel(ctx, 50,25, 0,0,0,0, 5);
 172
 173
 174        ctx.reset();
 175        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 176        ctx.fillRect(0, 0, 100, 50);
 177        ctx.globalCompositeOperation = 'destination-over';
 178        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 179        ctx.fillRect(0, 0, 100, 50);
 180        //comparePixel(ctx, 50,25, 0,255,255,255, 5);
 181
 182        ctx.reset();
 183        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 184        ctx.fillRect(0, 0, 100, 50);
 185        ctx.globalCompositeOperation = 'lighter';
 186        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 187        ctx.fillRect(0, 0, 100, 50);
 188        //comparePixel(ctx, 50,25, 255,255,255,255, 5);
 189
 190
 191        ctx.reset();
 192        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 193        ctx.fillRect(0, 0, 100, 50);
 194        ctx.globalCompositeOperation = 'source-atop';
 195        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 196        ctx.fillRect(0, 0, 100, 50);
 197        //comparePixel(ctx, 50,25, 255,255,0, 5);
 198
 199
 200        ctx.reset();
 201        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 202        ctx.fillRect(0, 0, 100, 50);
 203        ctx.globalCompositeOperation = 'source-in';
 204        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 205        ctx.fillRect(0, 0, 100, 50);
 206        //comparePixel(ctx, 50,25, 255,255,0, 5);
 207
 208
 209        ctx.reset();
 210        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 211        ctx.fillRect(0, 0, 100, 50);
 212        ctx.globalCompositeOperation = 'source-out';
 213        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 214        ctx.fillRect(0, 0, 100, 50);
 215       // comparePixel(ctx, 50,25, 0,0,0,0, 5);
 216
 217
 218        ctx.reset();
 219        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 220        ctx.fillRect(0, 0, 100, 50);
 221        ctx.globalCompositeOperation = 'source-over';
 222        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 223        ctx.fillRect(0, 0, 100, 50);
 224        //comparePixel(ctx, 50,25, 255,255,0, 5);
 225
 226        ctx.reset();
 227        ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
 228        ctx.fillRect(0, 0, 100, 50);
 229        ctx.globalCompositeOperation = 'xor';
 230        ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
 231        ctx.fillRect(0, 0, 100, 50);
 232        //comparePixel(ctx, 50,25, 0,0,0,0, 5);
 233    }
 234    function test_transparent(row) {
 235        var canvas = createCanvasObject(row);
 236        var ctx = canvas.getContext('2d');
 237        ctx.reset();
 238        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 239        ctx.fillRect(0, 0, 100, 50);
 240        ctx.globalCompositeOperation = 'copy';
 241        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 242        ctx.fillRect(0, 0, 100, 50);
 243        comparePixel(ctx, 50,25, 0,0,255,191, 5);
 244
 245        ctx.reset();
 246        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 247        ctx.fillRect(0, 0, 100, 50);
 248        ctx.globalCompositeOperation = 'copy';
 249        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 250        ctx.fillRect(0, 0, 100, 50);
 251        comparePixel(ctx, 50,25, 0,0,255,191, 5);
 252
 253        ctx.reset();
 254        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 255        ctx.fillRect(0, 0, 100, 50);
 256        ctx.globalCompositeOperation = 'destination-in';
 257        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 258        ctx.fillRect(0, 0, 100, 50);
 259        comparePixel(ctx, 50,25, 0,255,0,95, 5);
 260
 261        ctx.reset();
 262        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 263        ctx.fillRect(0, 0, 100, 50);
 264        ctx.globalCompositeOperation = 'destination-out';
 265        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 266        ctx.fillRect(0, 0, 100, 50);
 267        comparePixel(ctx, 50,25, 0,255,0,31, 5);
 268
 269        ctx.reset();
 270        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 271        ctx.fillRect(0, 0, 100, 50);
 272        ctx.globalCompositeOperation = 'destination-over';
 273        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 274        ctx.fillRect(0, 0, 100, 50);
 275        comparePixel(ctx, 50,25, 0,145,109,223, 5);
 276
 277
 278 //       qt does not support lighter...
 279 //       ctx.reset();
 280 //       ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 281 //       ctx.fillRect(0, 0, 100, 50);
 282 //       ctx.globalCompositeOperation = 'lighter';
 283 //       ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 284 //       ctx.fillRect(0, 0, 100, 50);
 285        //FIXME
 286        //comparePixel(ctx, 50,25, 0,127,191,255, 5);
 287
 288        ctx.reset();
 289        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 290        ctx.fillRect(0, 0, 100, 50);
 291        ctx.globalCompositeOperation = 'source-atop';
 292        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 293        ctx.fillRect(0, 0, 100, 50);
 294        comparePixel(ctx, 50,25, 0,63,191,127, 5);
 295
 296        ctx.reset();
 297        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 298        ctx.fillRect(0, 0, 100, 50);
 299        ctx.globalCompositeOperation = 'source-in';
 300        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 301        ctx.fillRect(0, 0, 100, 50);
 302        comparePixel(ctx, 50,25, 0,0,255,95, 5);
 303
 304        ctx.reset();
 305        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 306        ctx.fillRect(0, 0, 100, 50);
 307        ctx.globalCompositeOperation = 'source-out';
 308        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 309        ctx.fillRect(0, 0, 100, 50);
 310        comparePixel(ctx, 50,25, 0,0,255,95, 5);
 311
 312
 313        ctx.reset();
 314        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 315        ctx.fillRect(0, 0, 100, 50);
 316        ctx.globalCompositeOperation = 'source-over';
 317        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 318        ctx.fillRect(0, 0, 100, 50);
 319        comparePixel(ctx, 50,25, 0,36,218,223, 5);
 320
 321        ctx.reset();
 322        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 323        ctx.fillRect(0, 0, 100, 50);
 324        ctx.globalCompositeOperation = 'xor';
 325        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 326        ctx.fillRect(0, 0, 100, 50);
 327        comparePixel(ctx, 50,25, 0,63,191,127, 5);
 328
 329    }
 330
 331    function test_uncovered(row) {
 332        var canvas = createCanvasObject(row);
 333        var ctx = canvas.getContext('2d');
 334        ctx.reset();
 335        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 336        ctx.fillRect(0, 0, 100, 50);
 337        ctx.globalCompositeOperation = 'copy';
 338        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 339        ctx.translate(0, 25);
 340        ctx.fillRect(0, 50, 100, 50);
 341        //FIXME
 342        //comparePixel(ctx, 50,25, 0,0,0,0, 5);
 343
 344        ctx.reset();
 345        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 346        ctx.fillRect(0, 0, 100, 50);
 347        ctx.globalCompositeOperation = 'destination-atop';
 348        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 349        ctx.translate(0, 25);
 350        ctx.fillRect(0, 50, 100, 50);
 351        //FIXME
 352        //comparePixel(ctx, 50,25, 0,0,0,0, 5);
 353
 354
 355
 356        ctx.reset();
 357        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 358        ctx.fillRect(0, 0, 100, 50);
 359        ctx.globalCompositeOperation = 'destination-in';
 360        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 361        ctx.translate(0, 25);
 362        ctx.fillRect(0, 50, 100, 50);
 363        //FIXME
 364        //comparePixel(ctx, 50,25, 0,0,0,0, 5);
 365
 366        ctx.reset();
 367        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 368        ctx.fillRect(0, 0, 100, 50);
 369        ctx.globalCompositeOperation = 'source-in';
 370        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 371        ctx.translate(0, 25);
 372        ctx.fillRect(0, 50, 100, 50);
 373        //FIXME
 374        //comparePixel(ctx, 50,25, 0,0,0,0, 5);
 375
 376        ctx.reset();
 377        ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
 378        ctx.fillRect(0, 0, 100, 50);
 379        ctx.globalCompositeOperation = 'source-out';
 380        ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
 381        ctx.translate(0, 25);
 382        ctx.fillRect(0, 50, 100, 50);
 383        //FIXME
 384        //comparePixel(ctx, 50,25, 0,0,0,0, 5);
 385
 386    }
 387
 388 }