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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 13722015: Update automatically-opt-into-composited-scrolling.html (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: final rebase for landing 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 | « LayoutTests/TestExpectations ('k') | LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.html
diff --git a/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.html b/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.html
index 1e67b5dd78fb711bbe14c16618832e611dafaf40..8c5a37e8ad2b0a77a0bd9bec18a6110aeac8a369 100644
--- a/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.html
+++ b/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.html
@@ -1,23 +1,22 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
-<html lang="en">
+<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>Opting into composited scrolling</title>
- <style type="text/css" media="screen">
+ <style>
.container {
width: 200px;
height: 200px;
overflow: scroll;
margin: 20px;
border: 1px solid black;
+ background-color: #00FFFF;
}
.scrolled {
width: 180px;
- height: 90px;
+ height: 30px;
margin: 10px;
+ top: 70px;
background-color: gray;
position: relative;
}
@@ -25,206 +24,114 @@
.positioned {
width: 120px;
height: 240px;
- background-color: green;
position: absolute;
}
+ #secondChild {
+ background-color: #CC9999;
+ top: 50px;
+ }
+
#predecessor {
left: 20px;
top: 20px;
+ background-color: #990066;
}
#successor {
- left: 160px;
+ left: 20px;
top: 20px;
+ background-color: #000066;
}
- #descendant {
- left: 90px;
- top: 20px;
- background-color: blue;
- z-index: -20;
+ #normalFlow {
+ width: 180px;
+ height: 30px;
+ margin: 10px;
+ background-color: yellow;
}
</style>
- <script type="text/javascript" charset="utf-8">
- var debugMode = false;
+ <script src="resources/automatically-opt-into-composited-scrolling.js"></script>
+ <script>
+ function testPermutation(count, ordering, hasPositionedAncestor, containerIsPositioned)
+ {
+ if (!window.internals)
+ return;
- if (window.testRunner)
- testRunner.dumpAsText();
+ var container = document.getElementById('container');
- if (window.internals)
- window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
+ // Below, when we set webkitTransform to '', we want that to force an
+ // immediate, synchronous style recalculation. Querying the
+ // document.body.offsetTop value should force this for us.
+ // Note that this step is also performed inside getStackingOrder() to make
+ // sure we have fresh values when we need them.
+ container.style.webkitTransform = 'translateZ(0px)';
+ document.body.offsetTop;
- function write(str)
- {
- var pre = document.getElementById('console');
- var text = document.createTextNode(str + '\n');
- pre.appendChild(text);
- }
+ // container may be opting in automatically, so even if
+ // container.style.webkitTransform === '', we need to explicitly force it
+ // not to opt in to get our first stacking order list. To do this, we need
+ // to disable compositing for overflow scroll entirely.
+ //
+ // Unfortunately this operation won't dirty any style bits, and we will
+ // need to perform a full style recalc both here and below when we force
+ // to promote, so that we reevaluate whether or not container can be
+ // composited. To ensure that we perform the full style recalc, we need to
+ // change a style property so the style is dirty, and force the style to
+ // be cleaned with document.body.offsetTop (inside getStackingOrder()).
+ window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(false);
+ container.style.webkitTransform = '';
+
+ var oldStackingOrder = getStackingOrder(container);
+
+ // force to promote.
+ window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
+ container.style.webkitTransform = 'translateZ(0px)';
- var iteration = 0;
- function printResult(expectedResult)
- {
- // Force a style recalc.
- document.body.offsetTop;
+ var newStackingOrder = getStackingOrder(container);
- if (window.internals) {
- // Force a layout.
- window.internals.boundingBox(container);
- var layerTree = window.internals.layerTreeAsText(document);
+ var shouldOptIn = oldStackingOrder.length === newStackingOrder.length;
+ for (var i = 0; i < oldStackingOrder.length; ++i) {
+ if (oldStackingOrder[i] !== newStackingOrder[i]) {
+ shouldOptIn = false;
+ break;
+ }
+ }
- if (!layerTree == !expectedResult)
- write('Iteration ' + iteration.toString() + ': Passed')
+ container.style.webkitTransform = '';
+ if (shouldOptIn !== didOptIn(container)) {
+ if (shouldOptIn)
+ write("FAIL - should've automatically opted in but didn't " + count);
+ else
+ write('FAIL - automatically opted in and changed stacking order ' + count);
+
+ var additionalFailureInfo = "\tOrdering:";
+ for(var i = 0; i < ordering.length; ++i) {
+ additionalFailureInfo += " " + ordering[i].id + " (z-index: " + ordering[i].style.zIndex + ")";
+ if(i < ordering.length - 1)
+ additionalFailureInfo += ",";
+ }
+
+ additionalFailureInfo += "\n\thasPositionedAncestor: " + hasPositionedAncestor + "; containerIsPositioned: " + containerIsPositioned;
+ write(additionalFailureInfo);
+ } else {
+ if (shouldOptIn)
+ write("PASS iteration " + count + ": opted in, since doing so does not change the stacking order.");
else
- write('Iteration ' + iteration.toString() + ': FAILED')
-
- if (layerTree) {
- write('Iteration ' + iteration.toString() + ', layer tree');
- if (debugMode)
- write(layerTree);
- } else
- write('Iteration ' + iteration.toString() + ', no layer tree');
+ write("PASS iteration " + count + ": did not opt in, since doing so would change the stacking order.");
}
- iteration++;
}
function doTest()
{
- var predecessor = document.getElementById('predecessor');
- var successor = document.getElementById('successor');
- var container = document.getElementById('container');
- var firstChild = document.getElementById('firstChild');
- var secondChild = document.getElementById('secondChild');
- var descendant = document.getElementById('descendant');
- var count = 0;
-
- descendant.style.display = 'none';
-
- // descendants in stacking order.
- for (i = 0; i < 3; ++i) {
- for (j = 0; j < 5; ++j) {
- for (k = 0; k < 2; ++k) {
- for (l = 0; l < 2; ++l) {
- var minZIndex = 0;
- var maxZIndex = 0;
- if (i == 0) {
- firstChild.style.zIndex = '1';
- secondChild.style.zIndex = '3';
- maxZIndex = 3;
- } else if (i == 1) {
- firstChild.style.zIndex = '-1';
- secondChild.style.zIndex = '-3';
- minZIndex = -3;
- } else {
- firstChild.style.zIndex = '-1';
- secondChild.style.zIndex = '3';
- minZIndex = -1;
- maxZIndex = 3;
- }
-
- var sibling = predecessor;
- var toHide = successor;
- if (k == 1) {
- sibling = successor;
- toHide = predecessor;
- }
-
- // The result should be the same if the the element to hide is
- // display:hidden or display:none.
- if (l == 0)
- toHide.style.display = 'none';
- else
- toHide.style.display = 'hidden';
-
- sibling.style.display = '';
-
- if (j == 0)
- sibling.style.zIndex = (maxZIndex + 1).toString();
- else if (j == 1)
- sibling.style.zIndex = (minZIndex - 1).toString();
- else if (j == 2)
- sibling.style.zIndex = maxZIndex.toString();
- else if (j == 3)
- sibling.style.zIndex = minZIndex.toString();
- else
- sibling.style.zIndex = ((minZIndex + maxZIndex) / 2).toString();
-
- var areContiguous = false;
- if (sibling.style.zIndex > maxZIndex ||
- sibling.style.zIndex < minZIndex) {
- // sibling is outside the range of our descendants.
- areContiguous = true;
- } else if (sibling.style.zIndex < maxZIndex &&
- sibling.style.zIndex > minZIndex) {
- // sibling is between our descendants.
- areContiguous = false;
- } else if (sibling.style.zIndex == minZIndex) {
- if (minZIndex == 0) {
- // sibling lies between us (normal flow) and our pos
- // z-order descendants, so we are not contiguous.
- areContiguous = false;
- } else {
- // sibling's zIndex matches the min; we're only ok if it
- // appears first.
- areContiguous = k == 0;
- }
- } else if (sibling.style.zIndex == maxZIndex) {
- if (maxZIndex < 0) {
- // sibling lies between us (normal flow) and neg z-order
- // descendants, so we are not contiguous.
- areContiguous = false;
- } else if (maxZIndex == 0) {
- // sibling is in the pos z-order list and does not affect
- // us since we're in the normal flow list and our
- // descandants are in the neg z-order list.
- areContiguous = true;
- } else {
- // sibling's zIndex matches the max; we're only ok if it
- // appears after.
- areContiguous = k == 1;
- }
- }
-
- printResult(areContiguous);
- } // for l
- } // for k
- } // for j
- } // for i
-
- // Now check that we don't promote if we have an out of flow descendant.
- // We need to hide the predecessor and successor so they don't interfere
- // with this experiment.
- predecessor.style.display = 'none';
- successor.style.display = 'none';
- for (i = 0; i < 3; ++i) {
- if (i == 0)
- descendant.style.display = 'hidden';
- else if (i == 1)
- descendant.style.display = '';
- else
- descendant.style.display = 'none';
-
- // If the out of flow positioned descendant is visible, we cannot opt
- // into composited scrolling.
- printResult(i != 1);
- count++;
- } // for i
-
- } // function doTest
+ buildDom();
+ permute(testPermutation);
+ }
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
- <div class="positioned" id="predecessor"></div>
- <div class="container" id="container">
- <div class="scrolled" id="firstChild"></div>
- <div class="scrolled" id="secondChild"></div>
- <div class="positioned" id="descendant"></div>
- </div>
- <div class="positioned" id="successor"></div>
- <pre id="console"></pre>
</body>
</html>
-
« no previous file with comments | « LayoutTests/TestExpectations ('k') | LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698