| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 | |
| 3 <html><head> | |
| 4 <style> | |
| 5 .filler { | |
| 6 background-color: #CC9900; | |
| 7 border-style: solid; | |
| 8 border-width: 1px; | |
| 9 width: 400px; | |
| 10 height: 100px; | |
| 11 } | |
| 12 | |
| 13 .negativechild { | |
| 14 z-index: -1; | |
| 15 position: relative; | |
| 16 } | |
| 17 | |
| 18 #parentscrollinglayer { | |
| 19 background-color: #CC9999; | |
| 20 height: 200px; | |
| 21 width: 500px; | |
| 22 overflow-y: scroll; | |
| 23 } | |
| 24 | |
| 25 #childscrollinglayer { | |
| 26 position: relative; | |
| 27 background-color: #990066; | |
| 28 height: 200px; | |
| 29 width: 300px; | |
| 30 overflow-x: scroll; | |
| 31 } | |
| 32 </style> | |
| 33 | |
| 34 <script src="resources/build-paint-order-lists.js"></script> | |
| 35 <script> | |
| 36 var debugMode = false; | |
| 37 | |
| 38 if (window.internals) | |
| 39 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable
d(true); | |
| 40 | |
| 41 if (window.testRunner) | |
| 42 testRunner.dumpAsText(); | |
| 43 | |
| 44 function write(str) | |
| 45 { | |
| 46 var pre = document.getElementById('console'); | |
| 47 var text = document.createTextNode(str + '\n'); | |
| 48 pre.appendChild(text); | |
| 49 } | |
| 50 | |
| 51 function getStackingOrder() | |
| 52 { | |
| 53 var divElements = []; | |
| 54 // Force a style recalc. | |
| 55 document.body.offsetTop; | |
| 56 | |
| 57 var stackingOrder = window.internals.nodesFromRect(document, 100, 75, 200,
200, 200, 200, false, false, false); | |
| 58 | |
| 59 for (var i = 0; i < stackingOrder.length; ++i) | |
| 60 if (stackingOrder[i].nodeName === "DIV") | |
| 61 divElements.push(stackingOrder[i]); | |
| 62 | |
| 63 return divElements; | |
| 64 } | |
| 65 | |
| 66 function compareStackingOrderWithPaintOrder(stackingOrder, paintOrder) | |
| 67 { | |
| 68 if (debugMode) { | |
| 69 write("paint:") | |
| 70 for (var i = 0; i < paintOrder.length; i++) | |
| 71 write(paintOrder[i].id + " " + paintOrder[i].className + " " + paintOr
der[i].tagName); | |
| 72 | |
| 73 write("stacking:") | |
| 74 for (var i = 0; i < stackingOrder.length; i++) | |
| 75 write(stackingOrder[i].id + " " + stackingOrder[i].className + " " + s
tackingOrder[i].tagName); | |
| 76 } | |
| 77 | |
| 78 for (var i = 0, j = 0; i < stackingOrder.length && j < paintOrder.length;
i++) { | |
| 79 // Ignore elements with class "filler negativechild". These elements are | |
| 80 // irrelevant to stacking order, since they do not overlap with the | |
| 81 // elements we care about. They exist in the paint order lists because | |
| 82 // they are still descendants of the same stacking context, but they | |
| 83 // will not affect visual layout. | |
| 84 while (j < paintOrder.length && paintOrder[paintOrder.length - j - 1].cl
assName === "filler negativechild") | |
| 85 j++; | |
| 86 | |
| 87 if (j >= paintOrder.length) | |
| 88 break; | |
| 89 | |
| 90 if (stackingOrder[i] === paintOrder[paintOrder.length - j - 1]) | |
| 91 j++; | |
| 92 } | |
| 93 | |
| 94 if (debugMode) | |
| 95 write(stackingOrder.length + " " + i + " " + paintOrder.length + " " + j
); | |
| 96 | |
| 97 return j === paintOrder.length; | |
| 98 } | |
| 99 | |
| 100 function doTest() | |
| 101 { | |
| 102 var parentscrollinglayer = document.getElementById('parentscrollinglayer')
; | |
| 103 var childscrollinglayer = document.getElementById('childscrollinglayer'); | |
| 104 | |
| 105 if (window.internals) { | |
| 106 var failure = false; | |
| 107 | |
| 108 // Here we want to compare paint order lists before and after promotion | |
| 109 // to the actual stacking order as determined by hit-testing. So we | |
| 110 // first force the element not to promote, then compute its paint and | |
| 111 // stacking order lists. We then force the element to opt in, and | |
| 112 // generate the paint and stacking order lists after opt-in. | |
| 113 // | |
| 114 // The paint order lists should exactly match the stacking order lists | |
| 115 // (modulo children that fall outside of the hit-testing area | |
| 116 // on-screen), both before and after promotion. | |
| 117 parentscrollinglayer.style.webkitTransform = 'translateZ(0px)'; | |
| 118 document.body.offsetTop; | |
| 119 | |
| 120 window.internals.setNeedsCompositedScrolling(parentscrollinglayer, | |
| 121 window.internals.COMPOSITED_SCROLLING_ALWAYS_OFF); | |
| 122 parentscrollinglayer.style.webkitTransform = ''; | |
| 123 | |
| 124 var oldStackingOrder = getStackingOrder(); | |
| 125 var oldPaintOrder = getPaintOrder(childscrollinglayer); | |
| 126 | |
| 127 window.internals.setNeedsCompositedScrolling(parentscrollinglayer, | |
| 128 window.internals.COMPOSITED_SCROLLING_ALWAYS_ON); | |
| 129 parentscrollinglayer.style.webkitTransform = 'translateZ(0px)'; | |
| 130 | |
| 131 var newStackingOrder = getStackingOrder(); | |
| 132 var newPaintOrder = getPaintOrder(childscrollinglayer); | |
| 133 | |
| 134 window.internals.setNeedsCompositedScrolling(parentscrollinglayer, | |
| 135 window.internals.DO_NOT_FORCE_COMPOSITED_SCROLLING); | |
| 136 | |
| 137 // The getPaintOrder() function should return a pair of paint orders. | |
| 138 // One before promotion and one after. This pair of lists should remain | |
| 139 // identical whether the element is actually currently promoted or not, | |
| 140 // its purpose is to generate hypothetical pre- and post-lists to | |
| 141 // determine if the element is promotable. | |
| 142 if (!comparePaintOrderLists(oldPaintOrder, newPaintOrder)) { | |
| 143 failure = true; | |
| 144 write("FAIL - paint order lists not identical before/after promotion")
; | |
| 145 } | |
| 146 | |
| 147 if (!compareStackingOrderWithPaintOrder(oldStackingOrder, oldPaintOrder.
beforePromote)) { | |
| 148 failure = true; | |
| 149 write("FAIL - paint order list before promote doesn't match stacking o
rder"); | |
| 150 } | |
| 151 | |
| 152 if (!compareStackingOrderWithPaintOrder(newStackingOrder, oldPaintOrder.
afterPromote)) { | |
| 153 failure = true; | |
| 154 write("FAIL - paint order list after promote doesn't match stacking or
der"); | |
| 155 } | |
| 156 | |
| 157 var childScrollingLayerOccurrences = countOccurrencesOfElementInPaintOrd
erList(oldPaintOrder.beforePromote, childscrollinglayer); | |
| 158 if (childScrollingLayerOccurrences !== 1) { | |
| 159 failure = true; | |
| 160 write("FAIL - paint order list before promote contains " + childScroll
ingLayerOccurrences + " occurrences of child scrolling layer. Should be exactly
1."); | |
| 161 } | |
| 162 | |
| 163 childScrollingLayerOccurrences = countOccurrencesOfElementInPaintOrderLi
st(oldPaintOrder.afterPromote, childscrollinglayer); | |
| 164 if (childScrollingLayerOccurrences !== 1) { | |
| 165 failure = true; | |
| 166 write("FAIL - paint order list after promote contains " + childScrolli
ngLayerOccurrences + " occurrences of child scrolling layer. Should be exactly 1
."); | |
| 167 } | |
| 168 | |
| 169 if(!failure) | |
| 170 write("PASS - did not crash."); | |
| 171 } | |
| 172 } | |
| 173 | |
| 174 window.addEventListener('load', doTest, false); | |
| 175 </script> | |
| 176 </head> | |
| 177 <body> | |
| 178 <div class="filler"></div> | |
| 179 <div id="parentscrollinglayer"> | |
| 180 <div id="childscrollinglayer"> | |
| 181 <div class="filler"></div> | |
| 182 </div> | |
| 183 <div class="filler"></div> | |
| 184 <div class="filler"></div> | |
| 185 </div> | |
| 186 <div id="fillerchild1" class="filler negativechild"></div> | |
| 187 <div id="fillerchild2" class="filler negativechild"></div> | |
| 188 <div id="fillerchild3" class="filler negativechild"></div> | |
| 189 <div id="fillerchild4" class="filler negativechild"></div> | |
| 190 <pre id="console"></pre> | |
| 191 </body> | |
| 192 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 244193002:
Enable universal accelerated overflow scroll (Closed)
Base URL: svn://svn.chromium.org/blink/trunk