Index: LayoutTests/compositing/overflow/ancestor-scroll-clipping-layer.html |
diff --git a/LayoutTests/compositing/overflow/ancestor-scroll-clipping-layer.html b/LayoutTests/compositing/overflow/ancestor-scroll-clipping-layer.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..e1b32749dd70f54043e665b20850a1083288c5ca |
--- /dev/null |
+++ b/LayoutTests/compositing/overflow/ancestor-scroll-clipping-layer.html |
@@ -0,0 +1,101 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<style> |
+ .containing-block { |
+ position: relative; |
+ -webkit-transform: translate(0px, 0px); |
+ } |
+ |
+ .clip { |
+ overflow: hidden; |
+ width: 50px; |
+ height: 120px; |
+ } |
+ |
+ .overflow { |
+ height: 100px; |
+ width: 100px; |
+ border: 1px solid black; |
+ overflow-y: scroll; |
+ resize: both; |
+ margin: 10px; |
+ } |
+ |
+ .box { |
+ position: relative; |
+ z-index: 1; |
+ height: 120px; |
+ width: 80px; |
+ margin: 10px; |
+ background-color: blue; |
+ } |
+ |
+ .fixed { |
+ position: fixed; |
+ background-color: green; |
+ width: 40px; |
+ height: 40px; |
+ top: -10px; |
+ } |
+ |
+ .beneath { |
+ z-index: -1; |
+ } |
+</style> |
+<script> |
+ if (window.testRunner) |
+ testRunner.dumpAsText(); |
+ |
+ if (window.internals) { |
+ window.internals.settings.setCompositorDrivenAcceleratedScrollingEnabled(true); |
+ window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true); |
+ } |
+ |
+ function setup() { |
+ var pre = document.createElement("pre"); |
+ if (!window.internals) { |
+ pre.innerHTML = "This test ensures that scroll and clip parent " |
+ + "relationships are set up correctly and that the scroll " |
+ + "children have a correctly positioned ancestor scroll " |
+ + "clipping layer."; |
+ } else { |
+ pre.innerHTML = window.internals.layerTreeAsText(document); |
+ } |
+ document.body.appendChild(pre); |
+ } |
+ |
+ window.onload = setup; |
+</script> |
+</head> |
+<body> |
+ <div class="containing-block"> |
+ <div class="overflow"> |
+ <div class="clip"> |
+ <div class="box fixed"></div> |
+ <div class="box"></div> |
+ </div> |
+ </div> |
+ </div> |
+ <div class="containing-block"> |
+ <div class="overflow"> |
+ <div class="box fixed"></div> |
+ <div class="box beneath"></div> |
+ </div> |
+ </div> |
+ <div class="containing-block"> |
+ <div class="overflow"> |
+ <div class="box fixed"></div> |
+ <div class="box"></div> |
+ </div> |
+ </div> |
+ <div class="clip"> |
+ <div class="containing-block"> |
+ <div class="overflow"> |
+ <div class="box fixed"></div> |
+ <div class="box"></div> |
+ </div> |
+ </div> |
+ </div> |
+</body> |
+</html> |