Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(115)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html

Issue 13913013: Only update composited scrolling state when necessary (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Adding more tests. Created 7 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change-expected.txt » ('j') | LayoutTests/compositing/overflow/do-not-opt-in-with-out-of-flow-descendant.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html
diff --git a/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html b/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html
new file mode 100644
index 0000000000000000000000000000000000000000..3f23bf33f4e6d70582e51619645618f14b9e0011
--- /dev/null
+++ b/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ #predecessor {
+ width: 70px;
+ height: 70px;
+ left: 25px;
+ top: 25px;
+ z-index: 2;
+ background-color: red;
+ position: absolute;
+ display: none;
+ }
+
+ #container {
+ width: 500px;
+ height: 500px;
+ position: absolute;
+ }
+
+ #content {
+ width: 1px;
+ height: 1px;
+ background-color: yellow;
+ position: relative;
+ }
+
+ #contentPredecessor {
+ z-index: 3;
+ width: 50px;
+ height: 50px;
+ background-color: blue;
+ position: relative;
+ display: none;
+ }
+
+ #contentSuccessor {
+ width: 1000px;
+ height: 1000px;
+ background-color: green;
+ position: relative;
+ display: none;
+ }
+ </style>
+
+ <script>
+ var debug = false;
+
+ if (window.testRunner)
+ testRunner.dumpAsText(false);
+
+ if (window.internals)
+ window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
+
+ function writeResult(iteration, expectedResult)
+ {
+ document.body.offsetTop;
+
+ if (!window.internals)
+ return;
+
+ if (debug)
+ writeDebug(iteration);
+
+ var result = document.getElementById('result');
+ result.innerText += "iteration " + iteration + ": ";
+
+ var hasLayerTree = !!window.internals.layerTreeAsText(document);
+ if (hasLayerTree === expectedResult)
+ result.innerText += "PASS, ";
+ else
+ result.innerText += "FAIL, ";
+
+ if (hasLayerTree)
+ result.innerText += "has layer tree.\n";
+ else
+ result.innerText += "does not have layer tree.\n";
+ }
+
+ function writeDebug(iteration)
+ {
+ var result = document.getElementById('result');
+ var content = document.getElementById('content');
+ var container = document.getElementById('container');
+ var contentPredecessor = document.getElementById('contentPredecessor');
+ var contentSuccessor = document.getElementById('contentSuccessor');
+
+ var elements = [container, contentPredecessor, content, contentSuccessor];
+
+ for (var i = 0; i < elements.length; i++) {
+ var element = elements[i];
+ var computedStyle = getComputedStyle(element);
+
+ result.innerText += "iteration " + iteration + ":\n";
+ result.innerText += "\telement: " + element.id + "\n";
+ result.innerText += "\theight: " + computedStyle.height + "\n";
+ result.innerText += "\twidth: " + computedStyle.width + "\n";
+ result.innerText += "\toverflowX: " + computedStyle.overflowX + "\n";
+ result.innerText += "\toverflowY: " + computedStyle.overflowY + "\n";
+ result.innerText += "\tdisplay: " + computedStyle.display + "\n";
+ result.innerText += "\tzIndex: " + computedStyle.zIndex + "\n";
+ }
+ }
+
+ function doSuccessorTest(test, testIndex)
+ {
+ container = document.getElementById('container');
+ contentSuccessor = document.getElementById('contentSuccessor');
+
+ content.style.width = test['width'];
+ content.style.height = test['height'];
+ container.style.overflowX = test['overflowX'];
+ container.style.overflowY = test['overflowY'];
+ contentSuccessor.style.display = test['display'];
+
+ var descendantCausesOverflow = test['width'] === '1000px' || test['height'] === '1000px' || test['display'] === 'block';
+ var containerScrolls = test['overflowX'] === 'scroll' || test['overflowY'] === 'scroll';
+
+ var shouldOptIn = descendantCausesOverflow && containerScrolls;
+
+ writeResult(testIndex, shouldOptIn);
+ }
+
+ function doPredecessorTest(test, testIndex)
+ {
+ container = document.getElementById('container');
+ contentPredecessor = document.getElementById('contentPredecessor');
+
+ contentPredecessor.style.display = test['display'];
+ container.style.zIndex = test['zIndex'];
+
+ var containerIsAStackingContext = test['zIndex'] === '1';
+ var predecessorIsInvisible = test['display'] === 'none';
+
+ // If the contentPredecessor is visible and the container is not a stacking
+ // context, then a non-descendant appears between our descendants; we
+ // fail the contiguity check and we should not opt in. If we are a
+ // stacking context or the predecessor is gone, we can opt in.
+ var shouldOptIn = containerIsAStackingContext || predecessorIsInvisible;
+
+ writeResult(testIndex, shouldOptIn);
+ }
+
+ function runTests()
+ {
+ var successorTests = [
+ { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },
+ { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },
+ { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },
+ { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },
+ { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' },
+ { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' },
+ { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' },
+ { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' },
+ { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },
+ { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },
+ { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },
+ { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },
+ { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' },
+ { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' },
+ { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' },
+ { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' },
+ { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },
+ { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },
+ { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },
+ { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },
+ { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' },
+ { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' },
+ { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' },
+ { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' },
+ { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },
+ { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },
+ { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },
+ { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },
+ { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' },
+ { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' },
+ { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' },
+ { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' }
+ ];
+
+ var predecessorTests = [
+ { 'display': 'block', 'zIndex': '1' },
+ { 'display': 'block', 'zIndex': 'auto' },
+ { 'display': 'none', 'zIndex': '1' },
+ { 'display': 'none', 'zIndex': 'auto' },
+ ];
+
+ var testIndex = 0;
+ writeResult(testIndex++, false);
+
+ for (var i = 0; i < successorTests.length; i++)
+ doSuccessorTest(successorTests[i], testIndex++);
+
+ content.style.height = '1000px';
+ content.style.width = '1000px';
+ container.style.overflowX = 'scroll';
+ container.style.overflowY = 'scroll';
+ contentSuccessor.style.display = 'none';
+ predecessor.style.display = 'block';
+
+ writeResult(testIndex++, true);
+
+ for (var i = 0; i < predecessorTests.length; i++)
+ doPredecessorTest(predecessorTests[i], testIndex++);
+ }
+
+ window.addEventListener('load', runTests, false);
+ </script>
+</head>
+
+<body>
+ <div id="predecessor"></div>
+ <div id="container">
+ <div id="contentPredecessor"></div>
+ <div id="content"></div>
+ <div id="contentSuccessor"></div>
+ </div>
+ <pre id="result"></pre>
+</body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change-expected.txt » ('j') | LayoutTests/compositing/overflow/do-not-opt-in-with-out-of-flow-descendant.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698