| 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]) |
| 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 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 |
|---|
Chromium Code Reviews
Issue 13467028:
Add an intermediate function to generate 2 paint-order lists. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk