Chromium Code Reviews Chromium Code Reviews
Issue 13913013:
Only update composited scrolling state when necessary (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| 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..e0a1320668c30f2b1dc2cf83e691c5d33877baff |
| --- /dev/null |
| +++ b/LayoutTests/compositing/overflow/do-not-opt-in-with-out-of-flow-descendant.html |
| @@ -0,0 +1,129 @@ |
| +<!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); |
| + |
| + if (!layerTree == !expectedResult) |
| + write('Iteration ' + iteration.toString() + ': Passed') |
| + else |
| + write('Iteration ' + iteration.toString() + ': FAILED') |
| + |
| + if (layerTree) { |
| + write('Iteration ' + iteration.toString() + ', layer tree'); |
| + if (debugMode) |
| + write(layerTree); |
|
Julien - ping for review
2013/04/18 00:42:34
The FAILED output could be improved. Ideally you w
Ian Vollick
2013/04/18 20:55:52
Done.
|
| + } 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> |
| + |
