Index: sky/tests/lowlevel/layers.sky |
diff --git a/sky/tests/lowlevel/layers.sky b/sky/tests/lowlevel/layers.sky |
new file mode 100644 |
index 0000000000000000000000000000000000000000..f61ec8fb922ab1ff8d64bd775e862b2c18a0b2a6 |
--- /dev/null |
+++ b/sky/tests/lowlevel/layers.sky |
@@ -0,0 +1,59 @@ |
+<sky> |
+ |
+<import src="../resources/run-after-display.sky" as="runAfterDisplay" /> |
+<style> |
+ sky { |
+ padding: 10px; |
+ } |
+ div { |
+ width: 50px; |
+ height: 50px; |
+ white-space: nowrap; |
+ } |
+</style> |
+Transforms |
+<div style="transform: translate3d(10px, 10px, 0); background-color: pink;"> |
+ One |
+ <div style="transform: translate3d(10px, 10px, 0); background-color: salmon;"> |
+ Two |
+ <div style="transform: translate3d(10px, 10px, 0); background-color: papayawhip;"> |
+ Three |
+ </div> |
+ </div> |
+</div> |
+ |
+<div style="position: absolute; right: 50px;"> |
+ <div style="background-color: red;"> |
+ 1 |
+ </div> |
+ <div style="position: absolute; left: 40px; top: 40px; z-index: 2; background-color: pink;"> |
+ 4 |
+ </div> |
+ <div style="position: absolute; left: 20px; top: 20px; z-index: 0; background-color: salmon;"> |
+ 2 |
+ </div> |
+ <div style="position: absolute; left: 35px; top: 20px; z-index: 1; background-color: papayawhip;"> |
+ 3 |
+ </div> |
+ <div style="background-color: green;"> |
+ 1 |
+ </div> |
+ z-index |
+</div> |
+ |
+<div style="position: absolute; bottom: 50px;"> |
+ Clip-path |
+ <div style="background-color: pink; -webkit-clip-path: circle(25px at 25px 25px);"> |
+ <div style="background-color: salmon; -webkit-clip-path: circle(25px at 35px 35px);"> |
+ <div style="background-color: papayawhip; -webkit-clip-path: circle(25px at 45px 45px);"></div> |
+ </div> |
+ </div> |
+</div> |
+ |
+<script> |
+runAfterDisplay(function() { |
+ internals.notifyTestComplete(""); |
+}); |
+</script> |
+ |
+</sky> |