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| 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="resources/automatically-opt-into-composited-scrolling.js"></scrip t> | |
| 56 <script> | |
| 57 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.
| |
| 58 { | |
| 59 var divElementsBeforePromote = []; | |
| 60 var divElementsAfterPromote = []; | |
| 61 // Force a style recalc. | |
| 62 document.body.offsetTop; | |
| 63 | |
| 64 var paintOrderListBeforePromote = window.internals.paintOrderListBeforePro mote(element); | |
| 65 var paintOrderListAfterPromote = window.internals.paintOrderListAfterPromo te(element); | |
| 66 | |
| 67 for (var i = 0; i < paintOrderListBeforePromote.length; ++i) | |
| 68 if (paintOrderListBeforePromote[i].nodeName === "DIV") | |
| 69 divElementsBeforePromote.push(paintOrderListBeforePromote[i]); | |
| 70 | |
| 71 for (var i = 0; i < paintOrderListAfterPromote.length; ++i) | |
| 72 if (paintOrderListAfterPromote[i].nodeName === "DIV") | |
| 73 divElementsAfterPromote.push(paintOrderListAfterPromote[i]); | |
| 74 | |
| 75 return {"beforePromote": divElementsBeforePromote, | |
| 76 "afterPromote": divElementsAfterPromote}; | |
| 77 } | |
| 78 | |
| 79 function comparePaintOrderLists(oldPaintOrder, newPaintOrder) | |
| 80 { | |
| 81 if (oldPaintOrder.length !== newPaintOrder.length) | |
| 82 return false; | |
| 83 | |
| 84 for (var i = 0; i < oldPaintOrder.length; i++) | |
| 85 if (oldPaintOrder[i] !== newPaintOrder[i]) | |
| 86 return false; | |
| 87 | |
| 88 return true; | |
| 89 } | |
| 90 | |
| 91 function compareStackingOrderWithPaintOrder(stackingOrder, paintOrder) | |
| 92 { | |
| 93 if (debugMode) { | |
| 94 write("paint order:") | |
| 95 for (var i = 0; i < paintOrder.length; i++) | |
| 96 write(paintOrder[i].id + " " + paintOrder[i].className + " " + paintOr der[paintOrder.length - i - 1].tagName); | |
| 97 | |
| 98 write("stacking order:") | |
| 99 for (var i = 0; i < stackingOrder.length; i++) | |
| 100 write(stackingOrder[i].id + " " + stackingOrder[i].className + " " + s tackingOrder[i].tagName); | |
| 101 } | |
| 102 | |
| 103 if (stackingOrder.length < paintOrder.length) | |
| 104 return false; | |
| 105 | |
| 106 // We expect the stacking order list to contain more than the paint order | |
| 107 // list sometimes because after we promote, the container's children won't | |
| 108 // appear in the stacking context's ancestor's lists anymore (which is | |
| 109 // expected and correct). They'll still be in the stacking order list. | |
| 110 // The important part is that the order of the things present in the paint | |
| 111 // order list is preserved in the stacking order list. | |
| 112 for (var i = 0, j = 0; i < stackingOrder.length && j < paintOrder.length; i++) | |
| 113 if (stackingOrder[i] === paintOrder[paintOrder.length - j - 1]) | |
| 114 j++; | |
| 115 | |
| 116 if (debugMode) | |
| 117 write(stackingOrder.length + " " + i + " " + paintOrder.length + " " + j ); | |
| 118 | |
| 119 return j == paintOrder.length; | |
| 120 } | |
| 121 | |
| 122 function countOccurrencesOfContainerInPaintOrderList(paintOrder) { | |
| 123 var container = document.getElementById('container'); | |
| 124 var occurrenceCount = 0; | |
| 125 for (var i = 0; i < paintOrder.length; i++) | |
| 126 if (paintOrder[i] === container) | |
| 127 occurrenceCount++; | |
| 128 | |
| 129 return occurrenceCount; | |
| 130 } | |
| 131 | |
| 132 function testPermutation(count) { | |
| 133 var container = document.getElementById('container'); | |
| 134 // Here we want to compare paint order lists before and after promotion | |
| 135 // to the actual stacking order as determined by hit-testing. So we | |
| 136 // first force the element not to promote, then compute its paint and | |
| 137 // stacking order lists. We then force the element to opt in, and | |
| 138 // generate the paint and stacking order lists after opt-in. | |
| 139 // | |
| 140 // The paint order lists should exactly match the stacking order lists | |
| 141 // (modulo children that fall outside of the hit-testing area | |
| 142 // on-screen), both before and after promotion. | |
| 143 container.style.webkitTransform = 'translateZ(0px)'; | |
| 144 document.body.offsetTop; | |
| 145 | |
| 146 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable d(false); | |
| 147 container.style.webkitTransform = ''; | |
| 148 | |
| 149 var oldStackingOrder = getStackingOrder(container); | |
| 150 var oldPaintOrder = getPaintOrder(container); | |
| 151 | |
| 152 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable d(true); | |
| 153 container.style.webkitTransform = 'translateZ(0px)'; | |
| 154 | |
| 155 var newStackingOrder = getStackingOrder(container); | |
| 156 var newPaintOrder = getPaintOrder(container); | |
| 157 | |
| 158 // The getPaintOrder() function should return a pair of paint orders. | |
| 159 // One before promotion and one after. This pair of lists should remain | |
| 160 // identical whether the element is actually currently promoted or not, | |
| 161 // its purpose is to generate hypothetical pre- and post-lists to | |
| 162 // determine if the element is promotable. | |
| 163 if (!comparePaintOrderLists(oldPaintOrder, newPaintOrder)) | |
| 164 write("iteration " + count + " FAIL - paint order lists not identical be fore/after promotion"); | |
| 165 | |
| 166 if (!compareStackingOrderWithPaintOrder(oldStackingOrder, oldPaintOrder.be forePromote)) | |
| 167 write("iteration " + count + " FAIL - paint order list before promote do esn't match stacking order"); | |
| 168 | |
| 169 if (!compareStackingOrderWithPaintOrder(newStackingOrder, oldPaintOrder.af terPromote)) | |
| 170 write("iteration " + count + " FAIL - paint order list after promote doe sn't match stacking order"); | |
| 171 | |
| 172 var containerOccurrences = countOccurrencesOfContainerInPaintOrderList(old PaintOrder.beforePromote); | |
| 173 if (containerOccurrences !== 1) | |
| 174 write("iteration " + count + " FAIL - paint order list before promote co ntains " + containerOccurrences + " occurrences of container. Should be exactly 1."); | |
| 175 | |
| 176 containerOccurrences = countOccurrencesOfContainerInPaintOrderList(oldPain tOrder.afterPromote); | |
| 177 if (containerOccurrences !== 1) | |
| 178 write("iteration " + count + " FAIL - paint order list after promote con tains " + containerOccurrences + " occurrences of container. Should be exactly 1 ."); | |
| 179 } | |
| 180 | |
| 181 function doTest() | |
| 182 { | |
| 183 buildDom(); | |
| 184 permute(testPermutation); | |
| 185 } | |
| 186 | |
| 187 window.addEventListener('load', doTest, false); | |
| 188 </script> | |
| 189 </head> | |
| 190 | |
| 191 <body> | |
| 192 </body> | |
| 193 </html> | |
| OLD | NEW |
