Chromium Code Reviews Chromium Code Reviews
Issue 22620002:
Add layout tests for universal overflow scrolling (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| 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 var configurations = [ | |
| 157 { 'title' : 'absolute-grandchildren-not-contained', | |
| 158 'isFixedPositioned' : false, | |
| 159 'isContainingBlock' : false, | |
| 160 'hasSibling' : false, | |
| 161 'hasGrandchildren' : true, }, | |
|
Julien - ping for review
2013/08/23 18:28:30
Nit: It would be more readable if the open and clo
| |
| 162 { 'title' : 'absolute-grandchildren', | |
| 163 'isFixedPositioned' : false, | |
| 164 'isContainingBlock' : true, | |
| 165 'hasSibling' : false, | |
| 166 'hasGrandchildren' : true, }, | |
| 167 { 'title' : 'absolute-not-contained', | |
| 168 'isFixedPositioned' : false, | |
| 169 'isContainingBlock' : false, | |
| 170 'hasSibling' : false, | |
| 171 'hasGrandchildren' : false, }, | |
| 172 { 'title' : 'absolute-sibling-grandchildren-not-contained', | |
| 173 'isFixedPositioned' : false, | |
| 174 'isContainingBlock' : false, | |
| 175 'hasSibling' : true, | |
| 176 'hasGrandchildren' : true, }, | |
| 177 { 'title' : 'absolute-sibling-grandchildren', | |
| 178 'isFixedPositioned' : false, | |
| 179 'isContainingBlock' : true, | |
| 180 'hasSibling' : true, | |
| 181 'hasGrandchildren' : true, }, | |
| 182 { 'title' : 'absolute-sibling-not-contained', | |
| 183 'isFixedPositioned' : false, | |
| 184 'isContainingBlock' : false, | |
| 185 'hasSibling' : true, | |
| 186 'hasGrandchildren' : false, }, | |
| 187 { 'title' : 'absolute-sibling', | |
| 188 'isFixedPositioned' : false, | |
| 189 'isContainingBlock' : true, | |
| 190 'hasSibling' : true, | |
| 191 'hasGrandchildren' : false, }, | |
| 192 { 'title' : 'absolute', | |
| 193 'isFixedPositioned' : false, | |
| 194 'isContainingBlock' : true, | |
| 195 'hasSibling' : false, | |
| 196 'hasGrandchildren' : false, }, | |
| 197 { 'title' : 'fixed-sibling-grandchildren', | |
| 198 'isFixedPositioned' : true, | |
| 199 'isContainingBlock' : true, | |
| 200 'hasSibling' : true, | |
| 201 'hasGrandchildren' : true, }, | |
| 202 { 'title' : 'fixed-sibling', | |
| 203 'isFixedPositioned' : true, | |
| 204 'isContainingBlock' : true, | |
| 205 'hasSibling' : true, | |
| 206 'hasGrandchildren' : false, }, | |
| 207 { 'title' : 'fixed', | |
| 208 'isFixedPositioned' : true, | |
| 209 'isContainingBlock' : true, | |
| 210 'hasSibling' : false, | |
| 211 'hasGrandchildren' : false, }, | |
|
Julien - ping for review
2013/08/23 18:28:30
There is only 11 configurations which means that w
| |
| 212 ]; | |
| 213 | |
| 214 var description = [ "We check that scrolling is accelerated in the " | |
| 215 + "following configurations:\n" ]; | |
|
Julien - ping for review
2013/08/23 18:28:30
Nit: We don't have the 80 characters limit so this
| |
| 216 for (var i = 0; i < configurations.length; ++i) | |
| 217 testConfiguration(configurations[i], i, description); | |
| 218 | |
| 219 var containers = document.getElementsByClassName("overflow"); | |
| 220 for (var i = 0; i < containers.length; ++i) { | |
| 221 var container = containers[i]; | |
| 222 container.scrollTop = container.scrollHeight - container.clientHeight; | |
| 223 } | |
| 224 | |
| 225 addDomElement("pre", "", "console", "body", [], 0); | |
| 226 var pre = document.getElementById("console"); | |
| 227 | |
| 228 if (window.internals) { | |
| 229 var layerTreeAsText = internals.layerTreeAsText(document); | |
| 230 pre.style.left = "-80000px"; | |
| 231 pre.innerHTML = layerTreeAsText; | |
| 232 } else { | |
| 233 pre.innerHTML = description.join(""); | |
| 234 } | |
| 235 } | |
| 236 | |
| 237 window.onload = doTest; | |
| 238 | |
| 239 </script> | |
| 240 </head> | |
| 241 <body> | |
| 242 </body> | |
| 243 </html> | |
| OLD | NEW |
