Index: third_party/WebKit/LayoutTests/compositing/overflow/scaled-mask.html |
diff --git a/third_party/WebKit/LayoutTests/compositing/overflow/scaled-mask.html b/third_party/WebKit/LayoutTests/compositing/overflow/scaled-mask.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..3c08e5e3d88cab707bcc4b5033817a2444d1ff26 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/compositing/overflow/scaled-mask.html |
@@ -0,0 +1,42 @@ |
+<!DOCTYPE html> |
+<style> |
+#mask { |
+ width: 200px; |
+ height: 200px; |
+ overflow: hidden; |
+ border-radius: 10px; |
+ border: 4px solid red; |
+ background-color: grey; |
+ position: absolute; |
+} |
+ |
+.scale-seam { |
+ transform-origin: 0 0; |
+ transform: scale(2, 1); |
+ display: inline-block; |
+ position: absolute; |
+} |
+ |
+.content { |
+ width: 500px; |
+ height: 500px; |
+ position: absolute; |
+} |
+ |
+.composited { |
+ will-change: transform; |
+} |
+</style> |
+ |
+<p>Testing masks on compositing layers. Top and bottom rows should look the same.</p> |
+<div class="scale-seam"> |
+ <div id="mask"> |
+ <div class="content" style="left: 0;top: 0;background: black;position: absolute;"></div> |
+ </div> |
+</div> |
+ |
+<div class="scale-seam" style="top: 300px;"> |
+ <div id="mask" class="composited"> |
+ <div class="content" style="left: 0;top: 0;background: black;position: absolute;"></div> |
+ </div> |
+</div> |