| <!DOCTYPE html> |
| <style> |
| div { |
| display: inline-block; |
| position: relative; |
| height: 560px; |
| width: 260px; |
| border: 1px solid black; |
| } |
| |
| img { |
| width: 100%; |
| height: 100%; |
| } |
| |
| .composited { |
| will-change: transform; |
| } |
| |
| .alpha-color { |
| -webkit-mask-image: url(../resources/star.svg); |
| } |
| </style> |
| <script src="../../resources/run-after-layout-and-paint.js"></script> |
| <script> |
| runAfterLayoutAndPaint(function() { |
| var image = document.getElementById('blur-image'); |
| image.style.filter = "blur(5px)"; |
| var imageComposited = document.getElementById('blur-image-composited'); |
| imageComposited.style.filter = "blur(5px)"; |
| }, true); |
| </script> |
| |
| <p>Testing masks with filters on compositing layers. Left and right columns should look almost the same, composited filter look slightly different.</p> |
| <div> |
| <img id="blur-image" src="../resources/alpha-gradient-diagonal.png" class="alpha-color"> |
| </div> |
| <div> |
| <img id="blur-image-composited" src="../resources/alpha-gradient-diagonal.png" class="alpha-color composited"> |
| </div> |
