LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.html - Issue 13722015: Update automatically-opt-into-composited-scrolling.html

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: 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.js » ('j') | LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | 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..2541dc4281eb72099ebbe717f2a7b911a3825c75 100644

--- a/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.html

+++ b/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling.html

@@ -1,10 +1,7 @@

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

.container {

width: 200px;

@@ -12,12 +9,14 @@

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,100 @@

.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" src="automatically-opt-into-composited-scrolling.js"></script>

Julien - ping for review 2013/04/09 17:41:59 Can we remove the useless attributes from new test

hartmanng 2013/04/09 20:40:09 Yeah, sorry, a lot of this was originally based on

- var debugMode = false;

+ function didPass(count, ordering, hasPositionedAncestor, containerIsPositioned)

Julien - ping for review 2013/04/09 17:41:59 didPass is misnamed as it can print FAIL. How abo

hartmanng 2013/04/09 20:40:09 Done.

+ {

+ var container = document.getElementById('container');

- if (window.testRunner)

- testRunner.dumpAsText();

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

- if (window.internals)

- window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);

+ window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(false);

+ container.style.webkitTransform = '';

- function write(str)

- {

- var pre = document.getElementById('console');

- var text = document.createTextNode(str + '\n');

- pre.appendChild(text);

- }

+ var oldStackingOrder = getStackingOrder(container);

- var iteration = 0;

- function printResult(expectedResult)

- {

- // Force a style recalc.

- document.body.offsetTop;

+ // force to promote.

+ window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);

+ container.style.webkitTransform = 'translateZ(0px)';

- if (window.internals) {

- // Force a layout.

- window.internals.boundingBox(container);

- var layerTree = window.internals.layerTreeAsText(document);

+ var newStackingOrder = getStackingOrder(container);

- if (!layerTree == !expectedResult)

- write('Iteration ' + iteration.toString() + ': Passed')

+ var shouldOptIn = oldStackingOrder.length === newStackingOrder.length;

+ for (var i = 0; i < oldStackingOrder.length; ++i) {

+ if (oldStackingOrder[i] !== newStackingOrder[i]) {

+ shouldOptIn = false;

+ break;

+ }

+ 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(didPass);

+ }

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>