src/third_party/WebKit/LayoutTests/compositing/overflow/do-not-repaint-if-scrolling-composited-layers.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <script>
   5     if (window.testRunner)
   6         window.testRunner.dumpAsText();
   7
   8     if (window.internals)
   9         window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(false);
  10
  11     function hasScrollbarRepaint(layerTree)
  12     {
  13         return hasScrollbarRepaintHelper(JSON.parse(layerTree));
  14     }
  15
  16     function hasScrollbarRepaintHelper(jsonLayerTree) {
  17         var repaintRects = jsonLayerTree["repaintRects"];
  18         if (repaintRects) {
  19             for (var i = 0; i < repaintRects.length; ++i) {
  20                 var width = repaintRects[i][2];
  21                 var height = repaintRects[i][3];
  22                 if (width != 15 || height != 285)
  23                     return true;
  24             }
  25         }
  26         var children = jsonLayerTree["children"];
  27         if (children) {
  28             for (var i = 0; i < children.length; i++) {
  29                 if (hasScrollbarRepaintHelper(children[i]))
  30                     return true;
  31             }
  32         }
  33         return false;
  34     }
  35
  36     function testRepaint() {
  37         var result = "";
  38         for (var testIteration = 0; testIteration < 3; ++testIteration) {
  39             var container = document.getElementById("container");
  40             var marquee = document.getElementById("marquee");
  41             var span = document.getElementById("span");
  42
  43             var toScroll = container;
  44             if (testIteration == 0) {
  45                 var selection = getSelection();
  46
  47                 var range = document.createRange();
  48                 range.selectNode(document.getElementById("selection-start"));
  49                 selection.addRange(range);
  50
  51                 range = document.createRange();
  52                 range.selectNode(document.getElementById("selection-end"));
  53                 selection.addRange(range);
  54             } else if (testIteration == 1) {
  55                 marquee.style.display = "block";
  56                 toScroll = marquee;
  57             } else {
  58                 span.style.display = "inline";
  59             }
  60
  61             document.body.offsetTop;
  62
  63             if (window.internals)
  64                 window.internals.startTrackingRepaints(document);
  65
  66             toScroll.scrollTop = 100;
  67
  68             if (window.internals) {
  69                 if (hasScrollbarRepaint(window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS)))
  70                     result += "PASS repainted when expected\n";
  71                 else
  72                     result += "FAIL did not repaint when expected\n";
  73                 window.internals.stopTrackingRepaints(document);
  74             }
  75
  76             // Do all cleanup here (so as not to affect repaint rects).
  77             toScroll.scrollTop = 0;
  78             span.style.display = "none";
  79             marquee.style.display = "none";
  80             getSelection().removeAllRanges();
  81         }
  82
  83         return result;
  84     }
  85
  86     function testNoRepaint() {
  87         var result = "";
  88         var container = document.getElementById("container");
  89
  90         document.body.offsetTop;
  91
  92         if (window.internals)
  93             window.internals.startTrackingRepaints(document);
  94
  95         container.scrollTop = 100;
  96
  97         if (window.internals) {
  98             if (!hasScrollbarRepaint(window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS)))
  99                 result += "PASS did not repaint as expected\n";
 100             else
 101                 result += "FAIL repainted when unexpected\n";
 102             window.internals.stopTrackingRepaints(document);
 103         }
 104
 105         container.scrollTop = 0;
 106
 107         return result;
 108     }
 109
 110     function testOverflowHidden() {
 111         var result = "";
 112         var container = document.getElementById("container");
 113
 114         container.style.overflow = "hidden";
 115         document.body.offsetTop;
 116
 117         if (window.internals)
 118             window.internals.startTrackingRepaints(document);
 119
 120         container.scrollTop = 100;
 121
 122         if (window.internals) {
 123             if (hasScrollbarRepaint(window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS)))
 124                 result += "PASS repainted when expected\n";
 125             else
 126                 result += "FAIL did not repaint when expected\n";
 127
 128             window.internals.stopTrackingRepaints(document);
 129         }
 130
 131         container.scrollTop = 0;
 132
 133         return result;
 134     }
 135
 136     function doTests() {
 137         var marquee = document.getElementById("marquee");
 138         marquee.stop();
 139         var result = testRepaint();
 140         result += testNoRepaint();
 141         result += testOverflowHidden();
 142         var pre = document.createElement('pre');
 143         document.body.appendChild(pre);
 144         pre.innerHTML = result;
 145         if (!window.internals)
 146             document.getElementById("description").style.display = "block";
 147     }
 148
 149     window.onload = doTests;
 150 </script>
 151 <style>
 152     #target::selection { background-color: green; }
 153
 154     #container {
 155         width:100px;
 156         height:300px;
 157         border: 1px black solid;
 158         overflow: scroll;
 159         -webkit-backface-visibility: hidden;
 160         position: relative;
 161     }
 162
 163     #fixed {
 164         width: 50px;
 165         height: 50px;
 166         position: fixed;
 167         top: 200px;
 168         left: 200px;
 169         background-color: blue;
 170         -webkit-backface-visibility: hidden;
 171     }
 172
 173     .scrolled {
 174         width: 50px;
 175         height: 50px;
 176         margin: 10px;
 177         position: relative;
 178         background-color: green;
 179         -webkit-backface-visibility: hidden;
 180     }
 181
 182     #span {
 183         display: none;
 184     }
 185
 186     #description {
 187         display: none;
 188     }
 189
 190     marquee {
 191         width: 60px;
 192         height: 60px;
 193         -webkit-backface-visibility: hidden;
 194         position: relative;
 195     }
 196 </style>
 197 </head>
 198 <body>
 199     <pre id="description">
 200       This test ensures that if the only thing that scrolls is a composited layer,
 201       we do not repaint. It passes if we repaint when we have to draw the selection
 202       block gaps or if we have content that is not in a composited layer. It also
 203       checks that we do not repaint when all the content is in a composited layer.
 204     </pre>
 205     <div id="container">
 206         <span id="span">Hello!</span>
 207         <div id="fixed"></div>
 208         <div class="scrolled" id="selection-start"></div>
 209         <div class="scrolled" id="selection-end"></div>
 210         <div class="scrolled"></div>
 211         <div class="scrolled"></div>
 212         <div class="scrolled"></div>
 213         <div class="scrolled"></div>
 214         <div class="scrolled"></div>
 215         <div class="scrolled"></div>
 216         <div class="scrolled"></div>
 217     </div>
 218     <marquee id="marquee" direction="up" scrollamount="1">
 219         <p>Lorem ipsum dolor amet</p>
 220         <p>Lorem ipsum dolor amet</p>
 221         <p>Lorem ipsum dolor amet</p>
 222         <p>Lorem ipsum dolor amet</p>
 223         <p>Lorem ipsum dolor amet</p>
 224         <p>Lorem ipsum dolor amet</p>
 225         <p>Lorem ipsum dolor amet</p>
 226     </marquee>
 227 </body>
 228 </html>