Index: third_party/WebKit/LayoutTests/compositing/root-scroller/basic-disable-ancestor-clipping.html |
diff --git a/third_party/WebKit/LayoutTests/compositing/root-scroller/basic-disable-ancestor-clipping.html b/third_party/WebKit/LayoutTests/compositing/root-scroller/basic-disable-ancestor-clipping.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..5d304ee701b6d9693fd3f158d8ce7eaa09f03060 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/compositing/root-scroller/basic-disable-ancestor-clipping.html |
@@ -0,0 +1,82 @@ |
+<!DOCTYPE html> |
+<style> |
+ ::-webkit-scrollbar { |
+ width: 0px; |
+ height: 0px; |
+ } |
+ |
+ body, html { |
+ width: 100%; |
+ height: 100%; |
+ background-color: blue; |
+ } |
+ |
+ body { |
+ margin: 0px; |
+ } |
+ |
+ iframe { |
+ width: 100vw; |
+ height: 100vh; |
+ left: -50px; |
+ top: -50px; |
+ position: absolute; |
+ border: 0; |
+ } |
+ |
+ .clipBox { |
+ position: absolute; |
+ overflow: hidden; |
+ left: 50px; |
+ right: 50px; |
+ top: 50px; |
+ bottom: 50px; |
+ } |
+ |
+ .compositedClipBox { |
+ position: absolute; |
+ overflow: hidden; |
+ left: 50px; |
+ right: 50px; |
+ top: 50px; |
+ bottom: 50px; |
+ background-color: red; |
+ transform: translateZ(0); |
+ } |
+ |
+ #scroller { |
+ position: absolute; |
+ left: -100px; |
+ right: -100px; |
+ top: -100px; |
+ bottom: -100px; |
+ background-color: yellow; |
+ overflow: auto; |
+ transform: translateZ(0); |
+ } |
+ |
+ .spacer { |
+ height: 1000px; |
+ } |
+</style> |
+ |
+<script> |
+ // This test passed if the output is a fully yellow screen. We expect that |
+ // the "clipBox" boxes in this document will have their clipping layers |
+ // disabled/removed since the child #scroller element in the is the root |
+ // scroller. |
+ if (window.testRunner) |
+ testRunner.dumpAsTextWithPixelResults(); |
+ |
+ window.addEventListener('load', function() { |
+ document.rootScroller = document.getElementById('scroller'); |
+ }); |
+</script> |
+ |
+<div class="compositedClipBox"> |
+ <div class="clipBox"> |
+ <div id="scroller"> |
+ <div class="spacer"></div> |
+ </div> |
+ </div> |
+</div> |