Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/compositing/masks/mask-with-added-filters.html |
| diff --git a/third_party/WebKit/LayoutTests/compositing/masks/mask-with-added-filters.html b/third_party/WebKit/LayoutTests/compositing/masks/mask-with-added-filters.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..4691a1f1404e1c7a81acabb3b53a1630fab134d4 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/compositing/masks/mask-with-added-filters.html |
| @@ -0,0 +1,40 @@ |
| +<!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> |
|
trchen
2017/02/23 23:12:20
By the way the composited one incorrectly stretche
|
| +<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> |