Chromium Code Reviews| 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 |