Index: LayoutTests/compositing/overflow/nested-render-surfaces-with-rotation.html |
diff --git a/LayoutTests/compositing/overflow/nested-render-surfaces-with-rotation.html b/LayoutTests/compositing/overflow/nested-render-surfaces-with-rotation.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8d5f00c11283d9b6c4af4db47859af99e97d4440 |
--- /dev/null |
+++ b/LayoutTests/compositing/overflow/nested-render-surfaces-with-rotation.html |
@@ -0,0 +1,90 @@ |
+<!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: 100px; |
+ height: 200px; |
+ width: 200px; |
+ } |
+ |
+ .rotated { |
+ -webkit-transform: translateZ(0) rotate(5deg); |
+ } |
+ |
+ .counter-rotated { |
+ -webkit-transform: translateZ(0) rotate(-9deg); |
+ } |
+</style> |
+<script> |
+ function setup() { |
+ if (!window.internals) { |
+ var pre = document.createElement("pre"); |
+ pre.innerHTML = "This test ensures that clipping works correctly " |
+ + "with clip children, even if there are rotations involved.\n" |
+ + "if this test is working correctly, all rects should be " |
+ + "clipped by their containing overflow scrolling divs (the\n" |
+ + "fixed position element will have the outer 'counter " |
+ + "rotate' div as its containing block due to the rotation,\n" |
+ + "not the viewport, and will therefore get clipped by the " |
+ + "outer overflow scrolling div, but not the inner."; |
+ document.body.appendChild(pre); |
+ } |
+ } |
+ window.onload = setup; |
+</script> |
+</head> |
+<body> |
+ <div class="rotated"> |
+ <div class="surface"> |
+ <div class="box"></div> |
+ <div class="container"> |
+ <div class="surface counter-rotated"> |
+ <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> |