Chromium Code Reviews Chromium Code Reviews
Issue 13467028:
Add an intermediate function to generate 2 paint-order lists. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| Index: LayoutTests/compositing/overflow/build-paint-order-lists.html |
| diff --git a/LayoutTests/compositing/overflow/build-paint-order-lists.html b/LayoutTests/compositing/overflow/build-paint-order-lists.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..309a4afc39770b9893080d55cc7eda0d6e2d5208 |
| --- /dev/null |
| +++ b/LayoutTests/compositing/overflow/build-paint-order-lists.html |
| @@ -0,0 +1,187 @@ |
| +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| + "http://www.w3.org/TR/html4/loose.dtd"> |
| + |
| +<html lang="en"> |
| +<head> |
| + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| + <title>Opting into composited scrolling</title> |
| + <style type="text/css" media="screen"> |
| + .container { |
| + width: 200px; |
| + height: 200px; |
| + overflow: scroll; |
| + margin: 20px; |
| + border: 1px solid black; |
| + background-color: #00FFFF; |
| + } |
| + |
| + .scrolled { |
| + width: 180px; |
| + height: 30px; |
| + margin: 10px; |
| + top: 70px; |
| + background-color: gray; |
| + position: relative; |
| + } |
| + |
| + .positioned { |
| + width: 120px; |
| + height: 240px; |
| + position: absolute; |
| + } |
| + |
| + #secondChild { |
| + background-color: #CC9999; |
| + top: 50px; |
| + } |
| + |
| + #predecessor { |
| + left: 20px; |
| + top: 20px; |
| + background-color: #990066; |
| + } |
| + |
| + #successor { |
| + left: 20px; |
| + top: 20px; |
| + background-color: #000066; |
| + } |
| + |
| + #normalFlow { |
| + width: 180px; |
| + height: 30px; |
| + margin: 10px; |
| + top: -20px; |
| + background-color: yellow; |
| + } |
| + </style> |
| + <script type="text/javascript" charset="utf-8" src="automatically-opt-into-composited-scrolling.js"></script> |
| + <script type="text/javascript" charset="utf-8"> |
| + function getPaintOrder(element) |
| + { |
| + var divElementsBeforePromote = []; |
| + var divElementsAfterPromote = []; |
| + // Force a style recalc. |
| + document.body.offsetTop; |
| + |
| + // Force a layout. |
| + window.internals.boundingBox(element); |
| + |
| + var paintOrderLists = window.internals.paintOrderLists(element); |
| + var paintOrderListBeforePromote = paintOrderLists.listBeforePromote; |
| + var paintOrderListAfterPromote = paintOrderLists.listAfterPromote; |
| + |
| + for (var i = 0; i < paintOrderListBeforePromote.length; ++i) |
| + if (paintOrderListBeforePromote[i].nodeName === "DIV") |
| + divElementsBeforePromote.push(paintOrderListBeforePromote[i]); |
| + |
| + for (var i = 0; i < paintOrderListAfterPromote.length; ++i) |
| + if (paintOrderListAfterPromote[i].nodeName === "DIV") |
| + divElementsAfterPromote.push(paintOrderListAfterPromote[i]); |
| + |
| + return {"beforePromote": divElementsBeforePromote, |
| + "afterPromote": divElementsAfterPromote}; |
| + } |
| + |
| + function comparePaintOrderLists(oldPaintOrder, newPaintOrder) |
| + { |
| + if (oldPaintOrder.length != newPaintOrder.length) |
| + return false; |
| + |
| + for (var i = 0; i < oldPaintOrder.length; i++) |
| + if (oldPaintOrder[i] != newPaintOrder[i]) |
| + return false; |
| + |
| + return true; |
| + } |
| + |
| + function compareStackingOrderWithPaintOrder(stackingOrder, paintOrder) |
| + { |
| + if (debugMode) { |
| + write("paint order:") |
| + for (var i = 0; i < paintOrder.length; i++) |
| + write(paintOrder[i].id + " " + paintOrder[i].className + " " + paintOrder[paintOrder.length - i - 1].tagName); |
| + |
| + write("stacking order:") |
| + for (var i = 0; i < stackingOrder.length; i++) |
| + write(stackingOrder[i].id + " " + stackingOrder[i].className + " " + stackingOrder[i].tagName); |
| + } |
| + |
| + if (stackingOrder.length < paintOrder.length) |
| + return false; |
| + |
| + for (var i = 0, j = 0; i < stackingOrder.length && j < paintOrder.length; i++) |
| + if (stackingOrder[i] == paintOrder[paintOrder.length - j - 1]) |
|
Ian Vollick
2013/04/16 19:17:41
This seems overly cryptic. Why not bail at the fir
hartmanng
2013/04/17 18:00:20
Yeah, it is a bit cryptic, but we expect the stack
|
| + j++; |
| + |
| + if (debugMode) |
| + write(stackingOrder.length + " " + i + " " + paintOrder.length + " " + j); |
| + |
| + return j == paintOrder.length; |
| + } |
| + |
| + function countOccurrencesOfContainerInPaintOrderList(paintOrder) { |
| + var container = document.getElementById('container'); |
|
Ian Vollick
2013/04/16 19:17:41
Is it possible to share some of this duplicated co
hartmanng
2013/04/17 18:00:20
Yeah, we can definitely move 2 or 3 of these helpe
|
| + var occurrenceCount = 0; |
| + for (var i = 0; i < paintOrder.length; i++) |
| + if (paintOrder[i] == container) |
| + occurrenceCount++; |
| + |
| + return occurrenceCount; |
| + } |
| + |
| + function didPass(count) { |
| + var container = document.getElementById('container'); |
| + // below, when we set webkitTransform to '', we want that to force a style recalculation. |
| + // Making this not '' here will force this recalculation. |
| + container.style.webkitTransform = 'translateZ(0px)'; |
| + document.body.offsetTop; |
| + |
| + // force to not promote. |
| + window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(false); |
| + container.style.webkitTransform = ''; |
| + |
| + var oldStackingOrder = getStackingOrder(container); |
| + var oldPaintOrder = getPaintOrder(container); |
| + |
| + // force to promote. |
| + window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true); |
| + container.style.webkitTransform = 'translateZ(0px)'; |
| + |
| + var newStackingOrder = getStackingOrder(container); |
| + var newPaintOrder = getPaintOrder(container); |
| + |
| + if (!comparePaintOrderLists(oldPaintOrder, newPaintOrder)) |
| + write("iteration " + count + " FAIL - paint order lists not identical before/after promotion"); |
| + |
| + if (!compareStackingOrderWithPaintOrder(oldStackingOrder, oldPaintOrder.beforePromote)) |
| + write("iteration " + count + " FAIL - paint order list before promote doesn't match stacking order"); |
| + |
| + if (!compareStackingOrderWithPaintOrder(newStackingOrder, oldPaintOrder.afterPromote)) |
| + write("iteration " + count + " FAIL - paint order list after promote doesn't match stacking order"); |
| + |
| + var containerOccurrences = countOccurrencesOfContainerInPaintOrderList(oldPaintOrder.beforePromote); |
| + if (containerOccurrences != 1) |
| + write("iteration " + count + " FAIL - paint order list before promote contains " + containerOccurrences + " occurrences of container. Should be exactly 1."); |
| + |
| + containerOccurrences = countOccurrencesOfContainerInPaintOrderList(oldPaintOrder.afterPromote); |
| + if (containerOccurrences != 1) |
| + write("iteration " + count + " FAIL - paint order list after promote contains " + containerOccurrences + " occurrences of container. Should be exactly 1."); |
| + |
| + if (debugMode) |
| + write(window.internals.paintOrderListsAsText(container)); |
| + } |
| + |
| + function doTest() |
| + { |
| + buildDom(); |
| + permute(didPass); |
| + } |
| + |
| + window.addEventListener('load', doTest, false); |
| + </script> |
| +</head> |
| + |
| +<body> |
| +</body> |
| +</html> |
