| 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>
|
| +
|
|
|