OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <html> |
| 4 <head> |
| 5 <style> |
| 6 .container { |
| 7 width: 200px; |
| 8 height: 200px; |
| 9 overflow: scroll; |
| 10 border: 1px solid black; |
| 11 background-color: #00FFFF; |
| 12 } |
| 13 |
| 14 .scrolled { |
| 15 height: 30px; |
| 16 top: 70px; |
| 17 background-color: gray; |
| 18 position: relative; |
| 19 } |
| 20 |
| 21 .positioned { |
| 22 width: 120px; |
| 23 height: 240px; |
| 24 position: absolute; |
| 25 } |
| 26 |
| 27 #secondChild { |
| 28 background-color: #CC9999; |
| 29 top: 50px; |
| 30 } |
| 31 |
| 32 #predecessor { |
| 33 background-color: #990066; |
| 34 } |
| 35 |
| 36 #successor { |
| 37 background-color: #000066; |
| 38 } |
| 39 |
| 40 #normalFlow { |
| 41 width: 180px; |
| 42 height: 30px; |
| 43 margin: 10px; |
| 44 top: -20px; |
| 45 background-color: yellow; |
| 46 } |
| 47 </style> |
| 48 <script src="resources/automatically-opt-into-composited-scrolling.js"></scrip
t> |
| 49 <script src="resources/build-paint-order-lists.js"></script> |
| 50 <script> |
| 51 function compareStackingOrderWithPaintOrder(stackingOrder, paintOrder) |
| 52 { |
| 53 if (debugMode) { |
| 54 write("paint order:") |
| 55 for (var i = 0; i < paintOrder.length; i++) |
| 56 write(paintOrder[i].id + " " + paintOrder[i].className + " " + paintOr
der[paintOrder.length - i - 1].tagName); |
| 57 |
| 58 write("stacking order:") |
| 59 for (var i = 0; i < stackingOrder.length; i++) |
| 60 write(stackingOrder[i].id + " " + stackingOrder[i].className + " " + s
tackingOrder[i].tagName); |
| 61 } |
| 62 |
| 63 if (stackingOrder.length < paintOrder.length) |
| 64 return false; |
| 65 |
| 66 // We expect the stacking order list to contain more than the paint order |
| 67 // list sometimes because after we promote, the container's children won't |
| 68 // appear in the stacking context's ancestor's lists anymore (which is |
| 69 // expected and correct). They'll still be in the stacking order list. |
| 70 // The important part is that the order of the things present in the paint |
| 71 // order list is preserved in the stacking order list. |
| 72 for (var i = 0, j = 0; i < stackingOrder.length && j < paintOrder.length;
i++) |
| 73 if (stackingOrder[i] === paintOrder[paintOrder.length - j - 1]) |
| 74 j++; |
| 75 |
| 76 if (debugMode) |
| 77 write(stackingOrder.length + " " + i + " " + paintOrder.length + " " + j
); |
| 78 |
| 79 return j == paintOrder.length; |
| 80 } |
| 81 |
| 82 function testPermutation(count) { |
| 83 var container = document.getElementById('container'); |
| 84 // Here we want to compare paint order lists before and after promotion |
| 85 // to the actual stacking order as determined by hit-testing. So we |
| 86 // first force the element not to promote, then compute its paint and |
| 87 // stacking order lists. We then force the element to opt in, and |
| 88 // generate the paint and stacking order lists after opt-in. |
| 89 // |
| 90 // The paint order lists should exactly match the stacking order lists |
| 91 // (modulo children that fall outside of the hit-testing area |
| 92 // on-screen), both before and after promotion. |
| 93 container.style.webkitTransform = 'translateZ(0px)'; |
| 94 document.body.offsetTop; |
| 95 |
| 96 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable
d(false); |
| 97 container.style.webkitTransform = ''; |
| 98 |
| 99 var oldStackingOrder = getStackingOrder(container); |
| 100 var oldPaintOrder = getPaintOrder(container); |
| 101 |
| 102 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable
d(true); |
| 103 container.style.webkitTransform = 'translateZ(0px)'; |
| 104 |
| 105 var newStackingOrder = getStackingOrder(container); |
| 106 var newPaintOrder = getPaintOrder(container); |
| 107 |
| 108 // The getPaintOrder() function should return a pair of paint orders. |
| 109 // One before promotion and one after. This pair of lists should remain |
| 110 // identical whether the element is actually currently promoted or not, |
| 111 // its purpose is to generate hypothetical pre- and post-lists to |
| 112 // determine if the element is promotable. |
| 113 if (!comparePaintOrderLists(oldPaintOrder, newPaintOrder)) |
| 114 write("iteration " + count + " FAIL - paint order lists not identical be
fore/after promotion"); |
| 115 |
| 116 if (!compareStackingOrderWithPaintOrder(oldStackingOrder, oldPaintOrder.be
forePromote)) |
| 117 write("iteration " + count + " FAIL - paint order list before promote do
esn't match stacking order"); |
| 118 |
| 119 if (!compareStackingOrderWithPaintOrder(newStackingOrder, oldPaintOrder.af
terPromote)) |
| 120 write("iteration " + count + " FAIL - paint order list after promote doe
sn't match stacking order"); |
| 121 |
| 122 var containerOccurrences = countOccurrencesOfElementInPaintOrderList(oldPa
intOrder.beforePromote, container); |
| 123 if (containerOccurrences !== 1) |
| 124 write("iteration " + count + " FAIL - paint order list before promote co
ntains " + containerOccurrences + " occurrences of container. Should be exactly
1."); |
| 125 |
| 126 containerOccurrences = countOccurrencesOfElementInPaintOrderList(oldPaintO
rder.afterPromote, container); |
| 127 if (containerOccurrences !== 1) |
| 128 write("iteration " + count + " FAIL - paint order list after promote con
tains " + containerOccurrences + " occurrences of container. Should be exactly 1
."); |
| 129 } |
| 130 |
| 131 function doTest() |
| 132 { |
| 133 buildDom(); |
| 134 permute(testPermutation); |
| 135 } |
| 136 |
| 137 window.addEventListener('load', doTest, false); |
| 138 </script> |
| 139 </head> |
| 140 |
| 141 <body> |
| 142 </body> |
| 143 </html> |
OLD | NEW |