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