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..a3fd83c550d87ca8d9c73ef65c469fc538d82f64 |
| --- /dev/null |
| +++ b/LayoutTests/compositing/overflow/build-paint-order-lists.html |
| @@ -0,0 +1,193 @@ |
| +<!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; |
| + } |
| + </style> |
| + <script src="resources/automatically-opt-into-composited-scrolling.js"></script> |
| + <script> |
| + function getPaintOrder(element) |
|
Julien - ping for review
2013/04/22 21:49:30
This function has a non-trivial behavior and it's
hartmanng
2013/04/23 21:32:37
Done.
|
| + { |
| + var divElementsBeforePromote = []; |
| + var divElementsAfterPromote = []; |
| + // Force a style recalc. |
| + document.body.offsetTop; |
| + |
| + var paintOrderListBeforePromote = window.internals.paintOrderListBeforePromote(element); |
| + var paintOrderListAfterPromote = window.internals.paintOrderListAfterPromote(element); |
| + |
| + 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; |
| + |
| + // 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 countOccurrencesOfContainerInPaintOrderList(paintOrder) { |
| + var container = document.getElementById('container'); |
| + var occurrenceCount = 0; |
| + for (var i = 0; i < paintOrder.length; i++) |
| + if (paintOrder[i] === container) |
| + occurrenceCount++; |
| + |
| + return occurrenceCount; |
| + } |
| + |
| + 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 = 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."); |
| + } |
| + |
| + function doTest() |
| + { |
| + buildDom(); |
| + permute(testPermutation); |
| + } |
| + |
| + window.addEventListener('load', doTest, false); |
| + </script> |
| +</head> |
| + |
| +<body> |
| +</body> |
| +</html> |
