| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 canvas { display: inline-block; } | |
| 6 </style> | |
| 7 </head> | |
| 8 <body> | |
| 9 <canvas id="source-over" width="80" height="80"></canvas> | |
| 10 <canvas id="source-in" width="80" height="80"></canvas> | |
| 11 <canvas id="source-out" width="80" height="80"></canvas> | |
| 12 <canvas id="source-atop" width="80" height="80"></canvas> | |
| 13 <br> | |
| 14 <canvas id="destination-over" width="80" height="80"></canvas> | |
| 15 <canvas id="destination-in" width="80" height="80"></canvas> | |
| 16 <canvas id="destination-out" width="80" height="80"></canvas> | |
| 17 <canvas id="destination-atop" width="80" height="80"></canvas> | |
| 18 <br> | |
| 19 <canvas id="lighter" width="80" height="80"></canvas> | |
| 20 <canvas id="xor" width="80" height="80"></canvas> | |
| 21 <script> | |
| 22 var compositeOps = [ | |
| 23 'source-over', | |
| 24 'source-in', | |
| 25 'source-out', | |
| 26 'source-atop', | |
| 27 'destination-over', | |
| 28 'destination-in', | |
| 29 'destination-out', | |
| 30 'destination-atop', | |
| 31 'lighter', | |
| 32 'xor' | |
| 33 ]; | |
| 34 | |
| 35 for (var i = 0; i < compositeOps.length; i++) { | |
| 36 var op = compositeOps[i]; | |
| 37 var ctx = document.getElementById(op).getContext('2d'); | |
| 38 ctx.fillStyle = 'red'; | |
| 39 ctx.fillRect(5, 5, 40, 40); | |
| 40 | |
| 41 ctx.globalCompositeOperation = op; | |
| 42 | |
| 43 ctx.fillStyle = 'deepskyblue'; | |
| 44 ctx.beginPath(); | |
| 45 ctx.arc(45,45,20,0,Math.PI*2,true); | |
| 46 ctx.fill(); | |
| 47 } | |
| 48 </script> | |
| 49 </body> | |
| 50 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2868003002:
CSSPaint: Move layout tests in csspaint/ to http/tests/csspaint/ (Closed)
