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..e982b5f476020eb7162f42bd3bce9d15bbc66d92 |
| --- /dev/null |
| +++ b/LayoutTests/compositing/overflow/build-paint-order-lists.html |
| @@ -0,0 +1,150 @@ |
| +<!DOCTYPE html> |
| + |
| +<html> |
| +<head> |
| + <style> |
| + .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; |
|
Julien - ping for review
2013/04/24 15:44:01
Do we *really* need all this style? Ideally we sho
hartmanng
2013/04/24 17:02:41
I've taken out what I can, unfortunately a lot of
|
| + } |
| + </style> |
| + <script src="resources/automatically-opt-into-composited-scrolling.js"></script> |
| + <script src="resources/build-paint-order-lists.js"></script> |
| + <script> |
| + 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; |
| + |
| + // We expect the stacking order list to contain more than the paint order |
| + // list sometimes because after we promote, the container's children won't |
| + // appear in the stacking context's ancestor's lists anymore (which is |
| + // expected and correct). They'll still be in the stacking order list. |
| + // The important part is that the order of the things present in the paint |
| + // order list is preserved in the stacking order list. |
| + for (var i = 0, j = 0; i < stackingOrder.length && j < paintOrder.length; i++) |
| + if (stackingOrder[i] === paintOrder[paintOrder.length - j - 1]) |
| + j++; |
| + |
| + if (debugMode) |
| + write(stackingOrder.length + " " + i + " " + paintOrder.length + " " + j); |
| + |
| + return j == paintOrder.length; |
| + } |
| + |
| + function testPermutation(count) { |
| + var container = document.getElementById('container'); |
| + // Here we want to compare paint order lists before and after promotion |
| + // to the actual stacking order as determined by hit-testing. So we |
| + // first force the element not to promote, then compute its paint and |
| + // stacking order lists. We then force the element to opt in, and |
| + // generate the paint and stacking order lists after opt-in. |
| + // |
| + // The paint order lists should exactly match the stacking order lists |
| + // (modulo children that fall outside of the hit-testing area |
| + // on-screen), both before and after promotion. |
| + container.style.webkitTransform = 'translateZ(0px)'; |
| + document.body.offsetTop; |
| + |
| + window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(false); |
| + container.style.webkitTransform = ''; |
| + |
| + var oldStackingOrder = getStackingOrder(container); |
| + var oldPaintOrder = getPaintOrder(container); |
| + |
| + window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true); |
| + container.style.webkitTransform = 'translateZ(0px)'; |
| + |
| + var newStackingOrder = getStackingOrder(container); |
| + var newPaintOrder = getPaintOrder(container); |
| + |
| + // The getPaintOrder() function should return a pair of paint orders. |
| + // One before promotion and one after. This pair of lists should remain |
| + // identical whether the element is actually currently promoted or not, |
| + // its purpose is to generate hypothetical pre- and post-lists to |
| + // determine if the element is promotable. |
| + 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 = countOccurrencesOfElementInPaintOrderList(oldPaintOrder.beforePromote, container); |
| + if (containerOccurrences !== 1) |
| + write("iteration " + count + " FAIL - paint order list before promote contains " + containerOccurrences + " occurrences of container. Should be exactly 1."); |
| + |
| + containerOccurrences = countOccurrencesOfElementInPaintOrderList(oldPaintOrder.afterPromote, container); |
| + if (containerOccurrences !== 1) |
| + write("iteration " + count + " FAIL - paint order list after promote contains " + containerOccurrences + " occurrences of container. Should be exactly 1."); |
| + } |
| + |
| + function doTest() |
| + { |
| + buildDom(); |
| + permute(testPermutation); |
| + } |
| + |
| + window.addEventListener('load', doTest, false); |
| + </script> |
| +</head> |
| + |
| +<body> |
| +</body> |
| +</html> |
