Index: LayoutTests/compositing/overflow/do-not-opt-in-with-out-of-flow-descendant.html |
diff --git a/LayoutTests/compositing/overflow/do-not-opt-in-with-out-of-flow-descendant.html b/LayoutTests/compositing/overflow/do-not-opt-in-with-out-of-flow-descendant.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..6d6b9f96431097d57e4c0183e8d080c41e32060a |
--- /dev/null |
+++ b/LayoutTests/compositing/overflow/do-not-opt-in-with-out-of-flow-descendant.html |
@@ -0,0 +1,130 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <style> |
+ #container { |
+ width: 200px; |
+ height: 200px; |
+ overflow: scroll; |
+ margin: 20px; |
+ border: 1px solid black; |
+ } |
+ |
+ #abs-pos-ancestor { |
+ width: 500px; |
+ height: 500px; |
+ position: absolute; |
+ z-index: 0; |
+ } |
+ |
+ #positioned-ancestor { |
+ width: 150px; |
+ height: 300px; |
+ position: relative; |
+ } |
+ |
+ #descendant { |
+ left: 10px; |
+ top: 10px; |
+ width: 50px; |
+ height: 50px; |
+ background-color: blue; |
+ position: absolute; |
+ z-index: -20; |
+ } |
+ </style> |
+ <script> |
+ var debugMode = false; |
+ |
+ if (window.testRunner) |
+ testRunner.dumpAsText(); |
+ |
+ if (window.internals) |
+ window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true); |
+ |
+ function write(str) |
+ { |
+ var pre = document.getElementById('console'); |
+ var text = document.createTextNode(str + '\n'); |
+ pre.appendChild(text); |
+ } |
+ |
+ var iteration = 0; |
+ function printResult(expectedResult) |
+ { |
+ // Force a style recalc. |
+ document.body.offsetTop; |
+ |
+ if (window.internals) { |
+ var layerTree = window.internals.layerTreeAsText(document); |
+ |
+ var passed = !layerTree == !expectedResult; |
+ if (passed) |
+ write('Iteration ' + iteration.toString() + ': Passed') |
+ else |
+ write('Iteration ' + iteration.toString() + ': FAILED') |
+ |
+ if (layerTree) { |
+ write('Iteration ' + iteration.toString() + ', layer tree'); |
+ if (debugMode || !passed) |
+ write(layerTree); |
+ } else |
+ write('Iteration ' + iteration.toString() + ', no layer tree'); |
+ } |
+ iteration++; |
+ } |
+ |
+ function doTest() |
+ { |
+ var container = document.getElementById('container'); |
+ var positionedAncestor = document.getElementById('positioned-ancestor'); |
+ var descendant = document.getElementById('descendant'); |
+ |
+ // Initial configuration should opt in. |
+ printResult(true); |
+ |
+ // If positioned ancestor ceases to be positioned, the containing |
+ // will become the abs-pos-ancestor. We should opt out. |
+ positionedAncestor.style.position = 'static'; |
+ printResult(false); |
+ |
+ // If we get rid of the out-of-flow positioned descendant at this point, |
+ // it should be ok to opt back in. |
+ descendant.style.display = 'none'; |
+ printResult(true); |
+ |
+ // This should return us to our previous state. |
+ descendant.style.display = ''; |
+ printResult(false); |
+ |
+ // If the descendant ceases to be out-of-flow-positioned, then we should |
+ // opt in. |
+ descendant.style.position = 'static'; |
+ printResult(true); |
+ |
+ // This should return us to our previous state. |
+ descendant.style.position = ''; |
+ printResult(false); |
+ |
+ // If the positionedAncestor again becomes positioned, it will become the |
+ // containing block for the descendant and we should opt in. |
+ positionedAncestor.style.position = 'relative'; |
+ printResult(true); |
+ } // function doTest |
+ |
+ window.addEventListener('load', doTest, false); |
+ </script> |
+</head> |
+ |
+<body> |
+ <div id="abs-pos-ancestor"> |
+ <div id="container"> |
+ <div id="positioned-ancestor"> |
+ <div id="descendant"></div> |
+ </div> |
+ </div> |
+ </div> |
+ <pre id="console"></pre> |
+</body> |
+</html> |
+ |