| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 body { |
| 6 height: 2000px; |
| 7 } |
| 8 |
| 9 .positionFixed { |
| 10 position: fixed; |
| 11 } |
| 12 |
| 13 .positionAbsolute { |
| 14 position: absolute; |
| 15 } |
| 16 |
| 17 .overflow { |
| 18 width: 100px; |
| 19 height: 100px; |
| 20 border: 2px solid black; |
| 21 overflow: scroll; |
| 22 } |
| 23 |
| 24 .scrolled { |
| 25 background-color: blue; |
| 26 width: 75px; |
| 27 height: 24px; |
| 28 margin: 4px; |
| 29 position: relative; |
| 30 } |
| 31 |
| 32 .onTop { |
| 33 z-index: 2; |
| 34 } |
| 35 |
| 36 pre { |
| 37 position: absolute; |
| 38 top: 400px; |
| 39 z-index: -1; |
| 40 } |
| 41 |
| 42 .positioned { |
| 43 background-color: gray; |
| 44 width: 80px; |
| 45 height: 40px; |
| 46 top: 65px; |
| 47 left: 25px; |
| 48 } |
| 49 |
| 50 .sibling { |
| 51 background-color: green; |
| 52 width: 50px; |
| 53 height: 100px; |
| 54 top: 10px; |
| 55 left: 5px; |
| 56 z-index: 1; |
| 57 } |
| 58 </style> |
| 59 <script> |
| 60 if (window.internals) |
| 61 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(
true); |
| 62 |
| 63 function addDomElement(elementType, className, id, parent, description, indent) |
| 64 { |
| 65 var element = document.createElement(elementType); |
| 66 element.setAttribute("class", className); |
| 67 element.setAttribute("id", id); |
| 68 if (parent === "body") |
| 69 document.body.appendChild(element); |
| 70 else |
| 71 document.getElementById(parent).appendChild(element); |
| 72 |
| 73 if (elementType === "div") { |
| 74 for (var i = 0; i < indent; ++i) |
| 75 description.push(" "); |
| 76 description.push("+ "); |
| 77 description.push(id); |
| 78 if (className) { |
| 79 description.push(", class: "); |
| 80 description.push(className); |
| 81 } |
| 82 description.push("\n"); |
| 83 } |
| 84 |
| 85 return element; |
| 86 } |
| 87 |
| 88 function positionElement(id, left, top) { |
| 89 var element = document.getElementById(id); |
| 90 element.style.left = left + "px"; |
| 91 element.style.top = top + "px"; |
| 92 } |
| 93 |
| 94 function buildDom(description, indent, parameters) |
| 95 { |
| 96 var configurationElement = parameters.title; |
| 97 var containerElement = "container-" + parameters.title; |
| 98 var ancestorElement = "ancestor-" + parameters.title; |
| 99 var parentElement = configurationElement; |
| 100 |
| 101 addDomElement("div", "positionAbsolute", configurationElement, "body", descr
iption, indent); |
| 102 positionElement(configurationElement, parameters.left, parameters.top); |
| 103 if (parameters.hasSibling) { |
| 104 addDomElement("div", "", ancestorElement, parentElement, description, in
dent); |
| 105 indent++; |
| 106 var siblingElement = "sibling-" + parameters.title; |
| 107 addDomElement("div", "positionFixed sibling", siblingElement, ancestorEl
ement, description, indent); |
| 108 positionElement(siblingElement, parameters.left + 5, parameters.top + 10
); |
| 109 parentElement = ancestorElement; |
| 110 } |
| 111 |
| 112 var overflowClass = parameters.isContainingBlock |
| 113 ? "positionAbsolute overflow" |
| 114 : "overflow"; |
| 115 |
| 116 addDomElement("div", overflowClass, containerElement, parentElement, descrip
tion, indent); |
| 117 indent++; |
| 118 |
| 119 parentElement = containerElement; |
| 120 if (parameters.hasGrandchildren) { |
| 121 var scrollingContainerElement = "scrollingContainer-" + parameters.title
; |
| 122 addDomElement("div", "", scrollingContainerElement, parentElement, descr
iption, indent); |
| 123 indent++; |
| 124 parentElement = scrollingContainerElement; |
| 125 } |
| 126 |
| 127 var positionedClass = parameters.isFixedPositioned |
| 128 ? "positionFixed" |
| 129 : "positionAbsolute"; |
| 130 |
| 131 var positionedElement = "positioned-" + parameters.title; |
| 132 addDomElement("div", positionedClass + " positioned", positionedElement, par
entElement, description, indent); |
| 133 if (parameters.isFixedPositioned) |
| 134 positionElement(positionedElement, parameters.left + 25, parameters.top
+ 65); |
| 135 |
| 136 for (var i = 0; i < 5; ++i) { |
| 137 var scrolledClass = "scrolled"; |
| 138 if ((i % 2) == 0) |
| 139 scrolledClass += " onTop"; |
| 140 addDomElement("div", scrolledClass, "scrolled-" + parameters.title, pare
ntElement, description, indent); |
| 141 } |
| 142 } |
| 143 |
| 144 function testConfiguration(configuration, index, description) { |
| 145 description.push("\n" + (index + 1) + ". '" + configuration.title + "'\n"); |
| 146 var configurationsPerRow = 4; |
| 147 configuration.top = 10 + 120 * (Math.floor(index / configurationsPerRow)); |
| 148 configuration.left = 10 + 120 * (index % configurationsPerRow); |
| 149 buildDom(description, 0, configuration); |
| 150 } |
| 151 |
| 152 function doTest() { |
| 153 if (window.internals) |
| 154 testRunner.dumpAsText(true); |
| 155 |
| 156 // Some configurations are as not meaningful for fixed-pos. For example,
we |
| 157 // alternate between having the scroll container be a containing block f
or |
| 158 // the positioned descendant. For the fixed-pos case, the containing blo
ck |
| 159 // will be the viewport. |
| 160 var configurations = [ |
| 161 { |
| 162 'title': 'absolute-grandchildren-not-contained', |
| 163 'isFixedPositioned': false, |
| 164 'isContainingBlock': false, |
| 165 'hasSibling': false, |
| 166 'hasGrandchildren': true, |
| 167 }, |
| 168 { |
| 169 'title': 'absolute-grandchildren', |
| 170 'isFixedPositioned': false, |
| 171 'isContainingBlock': true, |
| 172 'hasSibling': false, |
| 173 'hasGrandchildren': true, |
| 174 }, |
| 175 { |
| 176 'title': 'absolute-not-contained', |
| 177 'isFixedPositioned': false, |
| 178 'isContainingBlock': false, |
| 179 'hasSibling': false, |
| 180 'hasGrandchildren': false, |
| 181 }, |
| 182 { |
| 183 'title': 'absolute-sibling-grandchildren-not-contained', |
| 184 'isFixedPositioned': false, |
| 185 'isContainingBlock': false, |
| 186 'hasSibling': true, |
| 187 'hasGrandchildren': true, |
| 188 }, |
| 189 { |
| 190 'title': 'absolute-sibling-grandchildren', |
| 191 'isFixedPositioned': false, |
| 192 'isContainingBlock': true, |
| 193 'hasSibling': true, |
| 194 'hasGrandchildren': true, |
| 195 }, |
| 196 { |
| 197 'title': 'absolute-sibling-not-contained', |
| 198 'isFixedPositioned': false, |
| 199 'isContainingBlock': false, |
| 200 'hasSibling': true, |
| 201 'hasGrandchildren': false, |
| 202 }, |
| 203 { |
| 204 'title': 'absolute-sibling', |
| 205 'isFixedPositioned': false, |
| 206 'isContainingBlock': true, |
| 207 'hasSibling': true, |
| 208 'hasGrandchildren': false, |
| 209 }, |
| 210 { |
| 211 'title': 'absolute', |
| 212 'isFixedPositioned': false, |
| 213 'isContainingBlock': true, |
| 214 'hasSibling': false, |
| 215 'hasGrandchildren': false, |
| 216 }, |
| 217 { |
| 218 'title': 'fixed-sibling-grandchildren', |
| 219 'isFixedPositioned': true, |
| 220 'isContainingBlock': true, |
| 221 'hasSibling': true, |
| 222 'hasGrandchildren': true, |
| 223 }, |
| 224 { |
| 225 'title': 'fixed-sibling', |
| 226 'isFixedPositioned': true, |
| 227 'isContainingBlock': true, |
| 228 'hasSibling': true, |
| 229 'hasGrandchildren': false, |
| 230 }, |
| 231 { |
| 232 'title': 'fixed-grandchildren', |
| 233 'isFixedPositioned': true, |
| 234 'isContainingBlock': true, |
| 235 'hasSibling': false, |
| 236 'hasGrandchildren': true, |
| 237 }, |
| 238 { |
| 239 'title': 'fixed', |
| 240 'isFixedPositioned': true, |
| 241 'isContainingBlock': true, |
| 242 'hasSibling': false, |
| 243 'hasGrandchildren': false, |
| 244 }, |
| 245 ]; |
| 246 |
| 247 var description = [ "We check that scrolling is accelerated in the following
configurations:\n" ]; |
| 248 for (var i = 0; i < configurations.length; ++i) |
| 249 testConfiguration(configurations[i], i, description); |
| 250 |
| 251 var containers = document.getElementsByClassName("overflow"); |
| 252 for (var i = 0; i < containers.length; ++i) { |
| 253 var container = containers[i]; |
| 254 container.scrollTop = container.scrollHeight - container.clientHeight; |
| 255 } |
| 256 |
| 257 addDomElement("pre", "", "console", "body", [], 0); |
| 258 var pre = document.getElementById("console"); |
| 259 |
| 260 if (window.internals) { |
| 261 var layerTreeAsText = internals.layerTreeAsText(document); |
| 262 pre.style.left = "-80000px"; |
| 263 pre.innerHTML = layerTreeAsText; |
| 264 } else { |
| 265 pre.innerHTML = description.join(""); |
| 266 } |
| 267 } |
| 268 |
| 269 window.onload = doTest; |
| 270 |
| 271 </script> |
| 272 </head> |
| 273 <body> |
| 274 </body> |
| 275 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 22620002:
Add layout tests for universal overflow scrolling (Closed)
Base URL: svn://svn.chromium.org/blink/trunk