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