| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> |
| <link rel="match" href="paint2d-filter-ref.html"> |
| <style> |
| div { |
| display: inline-block; |
| width: 100px; |
| height: 100px; |
| } |
| #filter-none { background-image: paint(filter-none); } |
| #filter-blur-10px { background-image: paint(filter-blur-10px); } |
| #filter-blur-50vh { background-image: paint(filter-blur-50vh); } |
| #filter-blur-1em { background-image: paint(filter-blur-1em); } |
| #filter-blur-2percent { background-image: paint(filter-blur-2percent); } |
| #filter-brightness { background-image: paint(filter-brightness); } |
| #filter-contrast { background-image: paint(filter-contrast); } |
| #filter-drop-shadow { background-image: paint(filter-drop-shadow); } |
| #filter-grayscale { background-image: paint(filter-grayscale); } |
| #filter-invert { background-image: paint(filter-invert); } |
| #filter-opacity { background-image: paint(filter-opacity); } |
| #filter-saturate { background-image: paint(filter-saturate); } |
| #filter-sepia { background-image: paint(filter-sepia); } |
| #filter-hue-rotate { background-image: paint(filter-hue-rotate); } |
| #filter-url { background-image: paint(filter-url); } |
| </style> |
| <script src="/common/reftest-wait.js"></script> |
| <script src="/common/worklet-reftest.js"></script> |
| <body> |
| <div id="filter-none"></div> |
| <div id="filter-blur-10px"></div> |
| <div id="filter-blur-50vh"></div> |
| <div id="filter-blur-1em"></div> |
| <div id="filter-blur-2percent"></div> |
| <br> |
| <div id="filter-brightness"></div> |
| <div id="filter-contrast"></div> |
| <div id="filter-drop-shadow"></div> |
| <div id="filter-grayscale"></div> |
| <div id="filter-invert"></div> |
| <br> |
| <div id="filter-opacity"></div> |
| <div id="filter-saturate"></div> |
| <div id="filter-sepia"></div> |
| <div id="filter-hue-rotate"></div> |
| <div id="filter-url"></div> |
| |
| <script id="code" type="text/worklet"> |
| var paintNames = [ |
| 'filter-none', |
| 'filter-blur-10px', |
| 'filter-blur-50vh', |
| 'filter-blur-1em', |
| 'filter-blur-2percent', |
| 'filter-brightness', |
| 'filter-contrast', |
| 'filter-drop-shadow', |
| 'filter-grayscale', |
| 'filter-invert', |
| 'filter-opacity', |
| 'filter-saturate', |
| 'filter-sepia', |
| 'filter-hue-rotate', |
| 'filter-url' |
| ]; |
| |
| var filterOps = [ |
| 'none', |
| 'blur(10px)', |
| 'blur(50vh)', |
| 'blur(1em)', |
| 'blur(2%)', |
| 'brightness(40%)', |
| 'contrast(20%)', |
| 'drop-shadow(0 0 5px green)', |
| 'grayscale(100%)', |
| 'invert(100%)', |
| 'opacity(50%)', |
| 'saturate(20%)', |
| 'sepia(100%)', |
| 'sepia(1) hue-rotate(200deg)', |
| 'url(#url)' |
| ]; |
| |
| function doPaint(ctx, op) { |
| ctx.filter = op; |
| ctx.fillStyle = '#A00'; |
| ctx.fillRect(0, 0, 15, 15); |
| ctx.fillStyle = '#0A0'; |
| ctx.fillRect(15, 0, 15, 15); |
| ctx.fillStyle = '#00A'; |
| ctx.fillRect(0, 15, 15, 15); |
| ctx.fillStyle = "#AA0"; |
| ctx.fillRect(15, 15, 15, 15); |
| }; |
| |
| for (var i = 0; i < filterOps.length; i++) { |
| let op = filterOps[i]; |
| registerPaint(paintNames[i], class { paint(ctx, geom) { doPaint(ctx, op); } }); |
| } |
| </script> |
| |
| <script> |
| importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); |
| </script> |
| </body> |
| </html> |
