Index: LayoutTests/compositing/overflow/nested-render-surfaces-with-intervening-clip.html |
diff --git a/LayoutTests/compositing/overflow/nested-render-surfaces-with-intervening-clip.html b/LayoutTests/compositing/overflow/nested-render-surfaces-with-intervening-clip.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8c53b02b1d1cbc2c81668c093c50a50ef76e803b |
--- /dev/null |
+++ b/LayoutTests/compositing/overflow/nested-render-surfaces-with-intervening-clip.html |
@@ -0,0 +1,84 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<style> |
+ body { |
+ height: 2000px; |
+ } |
+ |
+ .container { |
+ height: 300px; |
+ width: 300px; |
+ border: 4px solid black; |
+ overflow-y: scroll; |
+ resize: both; |
+ } |
+ |
+ .contents { |
+ height: 1000px; |
+ } |
+ |
+ .box { |
+ position: relative; |
+ z-index: 1; |
+ height: 100px; |
+ width: 100px; |
+ margin: 10px; |
+ background-color: blue; |
+ } |
+ |
+ .surface { |
+ opacity: 0.5; |
+ } |
+ |
+ .fixed { |
+ position: fixed; |
+ z-index: 0; |
+ background-color: green; |
+ left: 50px; |
+ top: 200px; |
+ height: 200px; |
+ width: 200px; |
+ } |
+ |
+ .clipping-layer { |
+ overflow: hidden; |
+ width: 150px; |
+ height: 300px; |
+ } |
+</style> |
+<script> |
+ function setup() { |
+ if (!window.internals) { |
+ var pre = document.createElement("pre"); |
+ pre.innerHTML = "This test ensures that clip children correctly " |
+ + "ignore clips established by layers between the clip parent " |
+ + "and itself. If the test is working correctly, the green " |
+ + "box should be a square."; |
+ document.body.appendChild(pre); |
+ } |
+ } |
+ window.onload = setup; |
+</script> |
+</head> |
+<body> |
+ <div class="clipping-layer"> |
+ <div class="surface"> |
+ <div class="box"></div> |
+ <div class="container"> |
+ <div> |
+ <div class="box"></div> |
+ <div class="container"> |
+ <div class="fixed"></div> |
+ <div class="box"></div> |
+ <div class="box"></div> |
+ <div class="box"></div> |
+ <div class="box"></div> |
+ <div class="box"></div> |
+ </div> |
+ </div> |
+ </div> |
+ </div> |
+ </div> |
+</body> |
+</html> |