| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE HTML> | |
| 2 <svg style="display: block; width: 0; height: 0"> | |
| 3 <defs> | |
| 4 <filter id="merge-clean"> | |
| 5 <feColorMatrix type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0
0 0 1" /> | |
| 6 <feMerge> | |
| 7 <feMergeNode></feMergeNode> | |
| 8 <feMergeNode in="SourceGraphic"></feMergeNode> | |
| 9 <feMergeNode in="SourceAlpha"></feMergeNode> | |
| 10 <feMergeNode in="FillPaint"></feMergeNode> | |
| 11 <feMergeNode in="StrokePaint"></feMergeNode> | |
| 12 </feMerge> | |
| 13 </filter> | |
| 14 <circle id="circle" r="100" fill="blue" /> | |
| 15 </defs> | |
| 16 </svg><script src="../../resources/testharness.js"></script> | |
| 17 <script src="../../resources/testharnessreport.js"></script> | |
| 18 <script> | |
| 19 function testFilterValue(ctx) | |
| 20 { | |
| 21 // testing filter value | |
| 22 assert_equals(ctx.filter, 'none'); | |
| 23 ctx.filter = 'blur(5px)'; | |
| 24 assert_equals(ctx.filter, 'blur(5px)'); | |
| 25 | |
| 26 ctx.save(); | |
| 27 ctx.filter = 'none'; | |
| 28 assert_equals(ctx.filter, 'none'); | |
| 29 ctx.restore(); | |
| 30 assert_equals(ctx.filter, 'blur(5px)'); | |
| 31 | |
| 32 // Invalid filter should be ignored | |
| 33 ctx.filter = 'blur(10)'; | |
| 34 assert_equals(ctx.filter, 'blur(5px)'); | |
| 35 | |
| 36 // verify that exact string is preserved | |
| 37 ctx.filter = 'blur( 5px)'; | |
| 38 assert_equals(ctx.filter, 'blur( 5px)'); | |
| 39 }; | |
| 40 | |
| 41 function testFilterFillPaintColor(ctx) | |
| 42 { | |
| 43 ctx.filter = 'drop-shadow(0px 10px black)'; | |
| 44 ctx.fillStyle = '#0f0'; | |
| 45 ctx.fillRect(25, 25, 50, 50); | |
| 46 | |
| 47 // the color of pixel (50, 50) must be #0f0 | |
| 48 var colorData = ctx.getImageData(50, 50, 1, 1).data; | |
| 49 assert_equals(colorData[0], 0); | |
| 50 assert_equals(colorData[1], 255); | |
| 51 assert_equals(colorData[2], 0); | |
| 52 assert_equals(colorData[3], 255); | |
| 53 | |
| 54 // the color of pixel (60, 80) must be black | |
| 55 colorData = ctx.getImageData(60, 80, 1, 1).data; | |
| 56 assert_equals(colorData[0], 0); | |
| 57 assert_equals(colorData[1], 0); | |
| 58 assert_equals(colorData[2], 0); | |
| 59 assert_equals(colorData[3], 0); | |
| 60 } | |
| 61 | |
| 62 function testCSSShorthandFilter(ctx) | |
| 63 { | |
| 64 ctx.filter = 'hue-rotate(45deg) drop-shadow(16px 16px blue)'; | |
| 65 ctx.fillStyle = '#f00'; | |
| 66 ctx.fillRect(15, 15, 50, 50); | |
| 67 var colorData = ctx.getImageData(60, 60, 1, 1).data; | |
| 68 assert_equals(colorData[0], 255); | |
| 69 assert_equals(colorData[1], 0); | |
| 70 assert_equals(colorData[2], 0); | |
| 71 assert_equals(colorData[3], 255); | |
| 72 var colorData2 = ctx.getImageData(70, 70, 1, 1).data; | |
| 73 assert_equals(colorData2[0], 0); | |
| 74 assert_equals(colorData2[1], 255); | |
| 75 assert_equals(colorData2[2], 0); | |
| 76 assert_equals(colorData2[3], 255); | |
| 77 } | |
| 78 | |
| 79 function testWhitelistedSVGFilterNontaintness(ctx) | |
| 80 { | |
| 81 ctx.fillStyle = '#00f'; | |
| 82 ctx.fillRect(15, 15, 50, 50); | |
| 83 ctx.filter = 'blur(5px) url(#merge-clean) blur(5px)'; | |
| 84 var colorData = ctx.getImageData(25, 25, 1, 1).data; | |
| 85 assert_equals(colorData[0], 0); | |
| 86 assert_equals(colorData[1], 0); | |
| 87 assert_equals(colorData[2], 255); | |
| 88 assert_equals(colorData[3], 255); | |
| 89 } | |
| 90 | |
| 91 test(function() { | |
| 92 var ocanvas = new OffscreenCanvas(100, 100); | |
| 93 var ctx = ocanvas.getContext('2d'); | |
| 94 | |
| 95 testFilterValue(ctx); | |
| 96 testFilterFillPaintColor(ctx); | |
| 97 testCSSShorthandFilter(ctx); | |
| 98 testWhitelistedSVGFilterNontaintness(ctx); | |
| 99 }, 'testFilter should not return any error'); | |
| 100 </script> | |
| 101 | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2326633002:
Adds filter support for offscreen canvas (Closed)
