| 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 margin: 20px; |
| 11 border: 1px solid black; |
| 12 background-color: #00FFFF; |
| 13 } |
| 14 |
| 15 .scrolled { |
| 16 width: 180px; |
| 17 height: 30px; |
| 18 margin: 10px; |
| 19 top: 70px; |
| 20 background-color: gray; |
| 21 position: relative; |
| 22 } |
| 23 |
| 24 .positioned { |
| 25 width: 120px; |
| 26 height: 240px; |
| 27 position: absolute; |
| 28 } |
| 29 |
| 30 #secondChild { |
| 31 background-color: #CC9999; |
| 32 top: 50px; |
| 33 } |
| 34 |
| 35 #predecessor { |
| 36 left: 20px; |
| 37 top: 20px; |
| 38 background-color: #990066; |
| 39 } |
| 40 |
| 41 #successor { |
| 42 left: 20px; |
| 43 top: 20px; |
| 44 background-color: #000066; |
| 45 } |
| 46 |
| 47 #normalFlow { |
| 48 width: 180px; |
| 49 height: 30px; |
| 50 margin: 10px; |
| 51 top: -20px; |
| 52 background-color: yellow; |
| 53 } |
| 54 </style> |
| 55 <script src="automatically-opt-into-composited-scrolling.js"></script> |
| 56 <script> |
| 57 function getPaintOrder(element) |
| 58 { |
| 59 var divElementsBeforePromote = []; |
| 60 var divElementsAfterPromote = []; |
| 61 // Force a style recalc. |
| 62 document.body.offsetTop; |
| 63 |
| 64 var paintOrderLists = window.internals.paintOrderLists(element); |
| 65 var paintOrderListBeforePromote = paintOrderLists.listBeforePromote; |
| 66 var paintOrderListAfterPromote = paintOrderLists.listAfterPromote; |
| 67 |
| 68 for (var i = 0; i < paintOrderListBeforePromote.length; ++i) |
| 69 if (paintOrderListBeforePromote[i].nodeName === "DIV") |
| 70 divElementsBeforePromote.push(paintOrderListBeforePromote[i]); |
| 71 |
| 72 for (var i = 0; i < paintOrderListAfterPromote.length; ++i) |
| 73 if (paintOrderListAfterPromote[i].nodeName === "DIV") |
| 74 divElementsAfterPromote.push(paintOrderListAfterPromote[i]); |
| 75 |
| 76 return {"beforePromote": divElementsBeforePromote, |
| 77 "afterPromote": divElementsAfterPromote}; |
| 78 } |
| 79 |
| 80 function comparePaintOrderLists(oldPaintOrder, newPaintOrder) |
| 81 { |
| 82 if (oldPaintOrder.length !== newPaintOrder.length) |
| 83 return false; |
| 84 |
| 85 for (var i = 0; i < oldPaintOrder.length; i++) |
| 86 if (oldPaintOrder[i] !== newPaintOrder[i]) |
| 87 return false; |
| 88 |
| 89 return true; |
| 90 } |
| 91 |
| 92 function compareStackingOrderWithPaintOrder(stackingOrder, paintOrder) |
| 93 { |
| 94 if (debugMode) { |
| 95 write("paint order:") |
| 96 for (var i = 0; i < paintOrder.length; i++) |
| 97 write(paintOrder[i].id + " " + paintOrder[i].className + " " + paintOr
der[paintOrder.length - i - 1].tagName); |
| 98 |
| 99 write("stacking order:") |
| 100 for (var i = 0; i < stackingOrder.length; i++) |
| 101 write(stackingOrder[i].id + " " + stackingOrder[i].className + " " + s
tackingOrder[i].tagName); |
| 102 } |
| 103 |
| 104 if (stackingOrder.length < paintOrder.length) |
| 105 return false; |
| 106 |
| 107 // We expect the stacking order list to contain more than the paint order |
| 108 // list sometimes because after we promote, the container's children won't |
| 109 // appear in the stacking context's ancestor's lists anymore (which is |
| 110 // expected and correct). They'll still be in the stacking order list. |
| 111 // The important part is that the order of the things present in the paint |
| 112 // order list is preserved in the stacking order list. |
| 113 for (var i = 0, j = 0; i < stackingOrder.length && j < paintOrder.length;
i++) |
| 114 if (stackingOrder[i] === paintOrder[paintOrder.length - j - 1]) |
| 115 j++; |
| 116 |
| 117 if (debugMode) |
| 118 write(stackingOrder.length + " " + i + " " + paintOrder.length + " " + j
); |
| 119 |
| 120 return j == paintOrder.length; |
| 121 } |
| 122 |
| 123 function countOccurrencesOfContainerInPaintOrderList(paintOrder) { |
| 124 var container = document.getElementById('container'); |
| 125 var occurrenceCount = 0; |
| 126 for (var i = 0; i < paintOrder.length; i++) |
| 127 if (paintOrder[i] === container) |
| 128 occurrenceCount++; |
| 129 |
| 130 return occurrenceCount; |
| 131 } |
| 132 |
| 133 function testPermutation(count) { |
| 134 var container = document.getElementById('container'); |
| 135 // Here we want to compare paint order lists before and after promotion |
| 136 // to the actual stacking order as determined by hit-testing. So we |
| 137 // first force the element not to promote, then compute its paint and |
| 138 // stacking order lists. We then force the element to opt in, and |
| 139 // generate the paint and stacking order lists after opt-in. |
| 140 // |
| 141 // The paint order lists should exactly match the stacking order lists |
| 142 // (modulo children that fall outside of the hit-testing area |
| 143 // on-screen), both before and after promotion. |
| 144 container.style.webkitTransform = 'translateZ(0px)'; |
| 145 document.body.offsetTop; |
| 146 |
| 147 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable
d(false); |
| 148 container.style.webkitTransform = ''; |
| 149 |
| 150 var oldStackingOrder = getStackingOrder(container); |
| 151 var oldPaintOrder = getPaintOrder(container); |
| 152 |
| 153 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable
d(true); |
| 154 container.style.webkitTransform = 'translateZ(0px)'; |
| 155 |
| 156 var newStackingOrder = getStackingOrder(container); |
| 157 var newPaintOrder = getPaintOrder(container); |
| 158 |
| 159 // The getPaintOrder() function should return a pair of paint orders. |
| 160 // One before promotion and one after. This pair of lists should remain |
| 161 // identical whether the element is actually currently promoted or not, |
| 162 // its purpose is to generate hypothetical pre- and post-lists to |
| 163 // determine if the element is promotable. |
| 164 if (!comparePaintOrderLists(oldPaintOrder, newPaintOrder)) |
| 165 write("iteration " + count + " FAIL - paint order lists not identical be
fore/after promotion"); |
| 166 |
| 167 if (!compareStackingOrderWithPaintOrder(oldStackingOrder, oldPaintOrder.be
forePromote)) |
| 168 write("iteration " + count + " FAIL - paint order list before promote do
esn't match stacking order"); |
| 169 |
| 170 if (!compareStackingOrderWithPaintOrder(newStackingOrder, oldPaintOrder.af
terPromote)) |
| 171 write("iteration " + count + " FAIL - paint order list after promote doe
sn't match stacking order"); |
| 172 |
| 173 var containerOccurrences = countOccurrencesOfContainerInPaintOrderList(old
PaintOrder.beforePromote); |
| 174 if (containerOccurrences !== 1) |
| 175 write("iteration " + count + " FAIL - paint order list before promote co
ntains " + containerOccurrences + " occurrences of container. Should be exactly
1."); |
| 176 |
| 177 containerOccurrences = countOccurrencesOfContainerInPaintOrderList(oldPain
tOrder.afterPromote); |
| 178 if (containerOccurrences !== 1) |
| 179 write("iteration " + count + " FAIL - paint order list after promote con
tains " + containerOccurrences + " occurrences of container. Should be exactly 1
."); |
| 180 |
| 181 if (debugMode) |
| 182 write(window.internals.paintOrderListsAsText(container)); |
| 183 } |
| 184 |
| 185 function doTest() |
| 186 { |
| 187 buildDom(); |
| 188 permute(testPermutation); |
| 189 } |
| 190 |
| 191 window.addEventListener('load', doTest, false); |
| 192 </script> |
| 193 </head> |
| 194 |
| 195 <body> |
| 196 </body> |
| 197 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 13467028:
Add an intermediate function to generate 2 paint-order lists. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk