OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <style> | |
3 div { | |
4 display: inline-block; | |
5 position: relative; | |
6 height: 560px; | |
7 width: 260px; | |
8 border: 1px solid black; | |
9 } | |
10 | |
11 img { | |
12 width: 100%; | |
13 height: 100%; | |
14 } | |
15 | |
16 .composited { | |
17 will-change: transform; | |
18 } | |
19 | |
20 .alpha-color { | |
21 -webkit-mask-image: url(../resources/star.svg); | |
22 } | |
23 </style> | |
24 <script src="../../resources/run-after-layout-and-paint.js"></script> | |
25 <script> | |
26 runAfterLayoutAndPaint(function() { | |
27 var image = document.getElementById('blur-image'); | |
28 image.style.filter = "blur(5px)"; | |
29 var imageComposited = document.getElementById('blur-image-composited'); | |
30 imageComposited.style.filter = "blur(5px)"; | |
31 }, true); | |
32 </script> | |
33 | |
34 <p>Testing masks with filters on compositing layers. Left and right columns shou ld look almost the same, composited filter look slightly different.</p> | |
trchen
2017/02/23 23:12:20
By the way the composited one incorrectly stretche
| |
35 <div> | |
36 <img id="blur-image" src="../resources/alpha-gradient-diagonal.png" class="alp ha-color"> | |
37 </div> | |
38 <div> | |
39 <img id="blur-image-composited" src="../resources/alpha-gradient-diagonal.png" class="alpha-color composited"> | |
40 </div> | |
OLD | NEW |