| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <script src="../resources/run-after-layout-and-paint.js"></script> | |
| 5 <script src="resources/test-runner-paint-worklet.js"></script> | |
| 6 <style> | |
| 7 div { | |
| 8 display: inline-block; | |
| 9 width: 80px; | |
| 10 height: 80px; | |
| 11 } | |
| 12 #source-over { background-image: paint(source-over); } | |
| 13 #source-in { background-image: paint(source-in); } | |
| 14 #source-out { background-image: paint(source-out); } | |
| 15 #source-atop { background-image: paint(source-atop); } | |
| 16 #destination-over { background-image: paint(destination-over); } | |
| 17 #destination-in { background-image: paint(destination-in); } | |
| 18 #destination-out { background-image: paint(destination-out); } | |
| 19 #destination-atop { background-image: paint(destination-atop); } | |
| 20 #lighter { background-image: paint(lighter); } | |
| 21 #xor { background-image: paint(xor); } | |
| 22 </style> | |
| 23 </head> | |
| 24 <body> | |
| 25 <div id="source-over"></div> | |
| 26 <div id="source-in"></div> | |
| 27 <div id="source-out"></div> | |
| 28 <div id="source-atop"></div> | |
| 29 <br> | |
| 30 <div id="destination-over"></div> | |
| 31 <div id="destination-in"></div> | |
| 32 <div id="destination-out"></div> | |
| 33 <div id="destination-atop"></div> | |
| 34 <br> | |
| 35 <div id="lighter"></div> | |
| 36 <div id="xor"></div> | |
| 37 | |
| 38 <script id="code" type="text/worklet"> | |
| 39 var compositeOps = [ | |
| 40 'source-over', | |
| 41 'source-in', | |
| 42 'source-out', | |
| 43 'source-atop', | |
| 44 'destination-over', | |
| 45 'destination-in', | |
| 46 'destination-out', | |
| 47 'destination-atop', | |
| 48 'lighter', | |
| 49 'xor' | |
| 50 ]; | |
| 51 | |
| 52 function doPaint(ctx, op) { | |
| 53 ctx.fillStyle = 'red'; | |
| 54 ctx.fillRect(5, 5, 40, 40); | |
| 55 | |
| 56 ctx.globalCompositeOperation = op; | |
| 57 | |
| 58 ctx.fillStyle = 'deepskyblue'; | |
| 59 ctx.beginPath(); | |
| 60 ctx.arc(45,45,20,0,Math.PI*2,true); | |
| 61 ctx.fill(); | |
| 62 } | |
| 63 | |
| 64 for (var i = 0; i < compositeOps.length; i++) { | |
| 65 let op = compositeOps[i]; | |
| 66 registerPaint(op, class { paint(ctx, geom) { doPaint(ctx, op); } }); | |
| 67 } | |
| 68 </script> | |
| 69 | |
| 70 <script> | |
| 71 importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('c
ode').textContent); | |
| 72 </script> | |
| 73 </body> | |
| 74 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2868003002:
CSSPaint: Move layout tests in csspaint/ to http/tests/csspaint/ (Closed)
