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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | |
| 3 | |
| 4 <html lang="en"> | |
| 5 <head> | |
| 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
| 7 <title>Opting into composited scrolling</title> | |
| 8 <style type="text/css" media="screen"> | |
| 9 .container { | |
| 10 width: 200px; | |
| 11 height: 200px; | |
| 12 overflow: scroll; | |
| 13 margin: 20px; | |
| 14 border: 1px solid black; | |
| 15 background-color: #00FFFF; | |
| 16 } | |
| 17 | |
| 18 .scrolled { | |
| 19 width: 180px; | |
| 20 height: 30px; | |
| 21 margin: 10px; | |
| 22 top: 70px; | |
| 23 background-color: gray; | |
| 24 position: relative; | |
| 25 } | |
| 26 | |
| 27 .positioned { | |
| 28 width: 120px; | |
| 29 height: 240px; | |
| 30 position: absolute; | |
| 31 } | |
| 32 | |
| 33 #secondChild { | |
| 34 background-color: #CC9999; | |
| 35 top: 50px; | |
| 36 } | |
| 37 | |
| 38 #predecessor { | |
| 39 left: 20px; | |
| 40 top: 20px; | |
| 41 background-color: #990066; | |
| 42 } | |
| 43 | |
| 44 #successor { | |
| 45 left: 20px; | |
| 46 top: 20px; | |
| 47 background-color: #000066; | |
| 48 } | |
| 49 | |
| 50 #normalFlow { | |
| 51 width: 180px; | |
| 52 height: 30px; | |
| 53 margin: 10px; | |
| 54 top: -20px; | |
| 55 background-color: yellow; | |
| 56 } | |
| 57 </style> | |
| 58 <script type="text/javascript" charset="utf-8" src="automatically-opt-into-com posited-scrolling.js"></script> | |
| 59 <script type="text/javascript" charset="utf-8"> | |
| 60 function getPaintOrder(element) | |
| 61 { | |
| 62 var divElementsBeforePromote = []; | |
| 63 var divElementsAfterPromote = []; | |
| 64 // Force a style recalc. | |
| 65 document.body.offsetTop; | |
| 66 | |
| 67 // Force a layout. | |
| 68 window.internals.boundingBox(element); | |
| 69 | |
| 70 var paintOrderLists = window.internals.paintOrderLists(element); | |
| 71 var paintOrderListBeforePromote = paintOrderLists.listBeforePromote; | |
| 72 var paintOrderListAfterPromote = paintOrderLists.listAfterPromote; | |
| 73 | |
| 74 for (var i = 0; i < paintOrderListBeforePromote.length; ++i) | |
| 75 if (paintOrderListBeforePromote[i].nodeName === "DIV") | |
| 76 divElementsBeforePromote.push(paintOrderListBeforePromote[i]); | |
| 77 | |
| 78 for (var i = 0; i < paintOrderListAfterPromote.length; ++i) | |
| 79 if (paintOrderListAfterPromote[i].nodeName === "DIV") | |
| 80 divElementsAfterPromote.push(paintOrderListAfterPromote[i]); | |
| 81 | |
| 82 return {"beforePromote": divElementsBeforePromote, | |
| 83 "afterPromote": divElementsAfterPromote}; | |
| 84 } | |
| 85 | |
| 86 function comparePaintOrderLists(oldPaintOrder, newPaintOrder) | |
| 87 { | |
| 88 if (oldPaintOrder.length != newPaintOrder.length) | |
| 89 return false; | |
| 90 | |
| 91 for (var i = 0; i < oldPaintOrder.length; i++) | |
| 92 if (oldPaintOrder[i] != newPaintOrder[i]) | |
| 93 return false; | |
| 94 | |
| 95 return true; | |
| 96 } | |
| 97 | |
| 98 function compareStackingOrderWithPaintOrder(stackingOrder, paintOrder) | |
| 99 { | |
| 100 if (debugMode) { | |
| 101 write("paint order:") | |
| 102 for (var i = 0; i < paintOrder.length; i++) | |
| 103 write(paintOrder[i].id + " " + paintOrder[i].className + " " + paintOr der[paintOrder.length - i - 1].tagName); | |
| 104 | |
| 105 write("stacking order:") | |
| 106 for (var i = 0; i < stackingOrder.length; i++) | |
| 107 write(stackingOrder[i].id + " " + stackingOrder[i].className + " " + s tackingOrder[i].tagName); | |
| 108 } | |
| 109 | |
| 110 if (stackingOrder.length < paintOrder.length) | |
| 111 return false; | |
| 112 | |
| 113 for (var i = 0, j = 0; i < stackingOrder.length && j < paintOrder.length; i++) | |
| 114 if (stackingOrder[i] == paintOrder[paintOrder.length - j - 1]) | |
|
Ian Vollick
2013/04/16 19:17:41
This seems overly cryptic. Why not bail at the fir
hartmanng
2013/04/17 18:00:20
Yeah, it is a bit cryptic, but we expect the stack
| |
| 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'); | |
|
Ian Vollick
2013/04/16 19:17:41
Is it possible to share some of this duplicated co
hartmanng
2013/04/17 18:00:20
Yeah, we can definitely move 2 or 3 of these helpe
| |
| 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 didPass(count) { | |
| 134 var container = document.getElementById('container'); | |
| 135 // below, when we set webkitTransform to '', we want that to force a style recalculation. | |
| 136 // Making this not '' here will force this recalculation. | |
| 137 container.style.webkitTransform = 'translateZ(0px)'; | |
| 138 document.body.offsetTop; | |
| 139 | |
| 140 // force to not promote. | |
| 141 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable d(false); | |
| 142 container.style.webkitTransform = ''; | |
| 143 | |
| 144 var oldStackingOrder = getStackingOrder(container); | |
| 145 var oldPaintOrder = getPaintOrder(container); | |
| 146 | |
| 147 // force to promote. | |
| 148 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnable d(true); | |
| 149 container.style.webkitTransform = 'translateZ(0px)'; | |
| 150 | |
| 151 var newStackingOrder = getStackingOrder(container); | |
| 152 var newPaintOrder = getPaintOrder(container); | |
| 153 | |
| 154 if (!comparePaintOrderLists(oldPaintOrder, newPaintOrder)) | |
| 155 write("iteration " + count + " FAIL - paint order lists not identical be fore/after promotion"); | |
| 156 | |
| 157 if (!compareStackingOrderWithPaintOrder(oldStackingOrder, oldPaintOrder.be forePromote)) | |
| 158 write("iteration " + count + " FAIL - paint order list before promote do esn't match stacking order"); | |
| 159 | |
| 160 if (!compareStackingOrderWithPaintOrder(newStackingOrder, oldPaintOrder.af terPromote)) | |
| 161 write("iteration " + count + " FAIL - paint order list after promote doe sn't match stacking order"); | |
| 162 | |
| 163 var containerOccurrences = countOccurrencesOfContainerInPaintOrderList(old PaintOrder.beforePromote); | |
| 164 if (containerOccurrences != 1) | |
| 165 write("iteration " + count + " FAIL - paint order list before promote co ntains " + containerOccurrences + " occurrences of container. Should be exactly 1."); | |
| 166 | |
| 167 containerOccurrences = countOccurrencesOfContainerInPaintOrderList(oldPain tOrder.afterPromote); | |
| 168 if (containerOccurrences != 1) | |
| 169 write("iteration " + count + " FAIL - paint order list after promote con tains " + containerOccurrences + " occurrences of container. Should be exactly 1 ."); | |
| 170 | |
| 171 if (debugMode) | |
| 172 write(window.internals.paintOrderListsAsText(container)); | |
| 173 } | |
| 174 | |
| 175 function doTest() | |
| 176 { | |
| 177 buildDom(); | |
| 178 permute(didPass); | |
| 179 } | |
| 180 | |
| 181 window.addEventListener('load', doTest, false); | |
| 182 </script> | |
| 183 </head> | |
| 184 | |
| 185 <body> | |
| 186 </body> | |
| 187 </html> | |
| OLD | NEW |
