src/third_party/WebKit/LayoutTests/compositing/overflow/automatically-opt-into-composited-scrolling-after-style-change.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     #predecessor {
   6       width: 70px;
   7       height: 70px;
   8       left: 25px;
   9       top: 25px;
  10       z-index: 2;
  11       background-color: red;
  12       position: absolute;
  13       display: none;
  14     }
  15
  16     #container {
  17       width: 500px;
  18       height: 500px;
  19       position: absolute;
  20     }
  21
  22     #content {
  23       width: 1px;
  24       height: 1px;
  25       background-color: yellow;
  26       position: relative;
  27     }
  28
  29     #contentPredecessor {
  30       z-index: 3;
  31       width: 50px;
  32       height: 50px;
  33       background-color: blue;
  34       position: relative;
  35       display: none;
  36     }
  37
  38     #contentSuccessor {
  39       width: 1000px;
  40       height: 1000px;
  41       background-color: green;
  42       position: relative;
  43       display: none;
  44     }
  45   </style>
  46
  47   <script>
  48     var debug = false;
  49
  50     if (window.testRunner)
  51       testRunner.dumpAsText();
  52
  53     if (window.internals) {
  54       window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
  55       window.internals.settings.setCompositorDrivenAcceleratedScrollingEnabled(false);
  56     }
  57
  58     function writeResult(iteration, expectedResult)
  59     {
  60       document.body.offsetTop;
  61
  62       if (!window.internals)
  63         return;
  64
  65       if (debug)
  66         writeDebug(iteration);
  67
  68       var result = document.getElementById('result');
  69       result.innerText += "iteration " + iteration + ": ";
  70
  71       var container = document.getElementById('container');
  72       var containerOptedIn = window.internals.needsCompositedScrolling(container);
  73       if (containerOptedIn === expectedResult)
  74         result.innerText += "PASS, ";
  75       else
  76         result.innerText += "FAIL, ";
  77
  78       if (containerOptedIn)
  79         result.innerText += "container is composited.\n";
  80       else
  81         result.innerText += "container is not composited.\n";
  82     }
  83
  84     function writeDebug(iteration)
  85     {
  86       var result = document.getElementById('result');
  87       var content = document.getElementById('content');
  88       var container = document.getElementById('container');
  89       var contentPredecessor = document.getElementById('contentPredecessor');
  90       var contentSuccessor = document.getElementById('contentSuccessor');
  91
  92       var elements = [container, contentPredecessor, content, contentSuccessor];
  93
  94       for (var i = 0; i < elements.length; i++) {
  95         var element = elements[i];
  96         var computedStyle = getComputedStyle(element);
  97
  98         result.innerText += "iteration " + iteration + ":\n";
  99         result.innerText += "\telement: " + element.id + "\n";
 100         result.innerText += "\theight: " + computedStyle.height + "\n";
 101         result.innerText += "\twidth: " + computedStyle.width + "\n";
 102         result.innerText += "\toverflowX: " + computedStyle.overflowX + "\n";
 103         result.innerText += "\toverflowY: " + computedStyle.overflowY + "\n";
 104         result.innerText += "\tdisplay: " + computedStyle.display + "\n";
 105         result.innerText += "\tzIndex: " + computedStyle.zIndex + "\n";
 106       }
 107     }
 108
 109     function doSuccessorTest(test, testIndex)
 110     {
 111       container = document.getElementById('container');
 112       contentSuccessor = document.getElementById('contentSuccessor');
 113
 114       content.style.width = test['width'];
 115       content.style.height = test['height'];
 116       container.style.overflowX = test['overflowX'];
 117       container.style.overflowY = test['overflowY'];
 118       contentSuccessor.style.display = test['display'];
 119
 120       var descendantCausesOverflow = test['width'] === '1000px' || test['height'] === '1000px' || test['display'] === 'block';
 121       var containerScrolls = test['overflowX'] === 'scroll' || test['overflowY'] === 'scroll';
 122
 123       var shouldOptIn = descendantCausesOverflow && containerScrolls;
 124
 125       writeResult(testIndex, shouldOptIn);
 126     }
 127
 128     function doPredecessorTest(test, testIndex)
 129     {
 130       container = document.getElementById('container');
 131       contentPredecessor = document.getElementById('contentPredecessor');
 132
 133       contentPredecessor.style.display = test['display'];
 134       container.style.zIndex = test['zIndex'];
 135
 136       var containerIsAStackingContext = test['zIndex'] === '1';
 137       var predecessorIsInvisible = test['display'] === 'none';
 138
 139       // If the contentPredecessor is visible and the container is not a stacking
 140       // context, then a non-descendant appears between our descendants; we
 141       // fail the contiguity check and we should not opt in. If we are a
 142       // stacking context or the predecessor is gone, we can opt in.
 143       var shouldOptIn = containerIsAStackingContext || predecessorIsInvisible;
 144
 145       writeResult(testIndex, shouldOptIn);
 146     }
 147
 148     function runTests()
 149     {
 150       var successorTests = [
 151         { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },
 152         { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },
 153         { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },
 154         { 'width': '1px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },
 155         { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' },
 156         { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' },
 157         { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' },
 158         { 'width': '1px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' },
 159         { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },
 160         { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },
 161         { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },
 162         { 'width': '1px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },
 163         { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' },
 164         { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' },
 165         { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' },
 166         { 'width': '1px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' },
 167         { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },
 168         { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },
 169         { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },
 170         { 'width': '1000px', 'height': '1px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },
 171         { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' },
 172         { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' },
 173         { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' },
 174         { 'width': '1000px', 'height': '1px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' },
 175         { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'none' },
 176         { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'visible', 'display': 'block' },
 177         { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'none' },
 178         { 'width': '1000px', 'height': '1000px', 'overflowX': 'visible', 'overflowY': 'scroll', 'display': 'block' },
 179         { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'none' },
 180         { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'visible', 'display': 'block' },
 181         { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'none' },
 182         { 'width': '1000px', 'height': '1000px', 'overflowX': 'scroll', 'overflowY': 'scroll', 'display': 'block' }
 183       ];
 184
 185      var predecessorTests = [
 186         { 'display': 'block', 'zIndex': '1' },
 187         { 'display': 'block', 'zIndex': 'auto' },
 188         { 'display': 'none', 'zIndex': '1' },
 189         { 'display': 'none', 'zIndex': 'auto' },
 190      ];
 191
 192       var testIndex = 0;
 193       writeResult(testIndex++, false);
 194
 195       for (var i = 0; i < successorTests.length; i++)
 196         doSuccessorTest(successorTests[i], testIndex++);
 197
 198       content.style.height = '1000px';
 199       content.style.width = '1000px';
 200       container.style.overflowX = 'scroll';
 201       container.style.overflowY = 'scroll';
 202       contentSuccessor.style.display = 'none';
 203       predecessor.style.display = 'block';
 204
 205       writeResult(testIndex++, true);
 206
 207       for (var i = 0; i < predecessorTests.length; i++)
 208         doPredecessorTest(predecessorTests[i], testIndex++);
 209     }
 210
 211     window.addEventListener('load', runTests, false);
 212   </script>
 213 </head>
 214
 215 <body>
 216   <div id="predecessor"></div>
 217   <div id="container">
 218     <div id="contentPredecessor"></div>
 219     <div id="content"></div>
 220     <div id="contentSuccessor"></div>
 221   </div>
 222   <pre id="result"></pre>
 223 </body>
 224 </html>