third_party/WebKit/LayoutTests/compositing/overflow/universal-accelerated-overflow-scroll.html

   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: purple;
  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.setPreferCompositingToLCDTextEnabled(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", description, indent);
 102     positionElement(configurationElement, parameters.left, parameters.top);
 103     if (parameters.hasSibling) {
 104         addDomElement("div", "", ancestorElement, parentElement, description, indent);
 105         indent++;
 106         var siblingElement = "sibling-" + parameters.title;
 107         addDomElement("div", "positionFixed sibling", siblingElement, ancestorElement, 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, description, indent);
 117     indent++;
 118
 119     parentElement = containerElement;
 120     if (parameters.hasGrandchildren) {
 121         var scrollingContainerElement = "scrollingContainer-" + parameters.title;
 122         addDomElement("div", "", scrollingContainerElement, parentElement, description, 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, parentElement, 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, parentElement, 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.dumpAsTextWithPixelResults();
 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 for
 158         // the positioned descendant. For the fixed-pos case, the containing block
 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>