third_party/WebKit/LayoutTests/fast/repaint/scroll-stacking-context-backface-visiblity-leaves-traces.html

   1 <!DOCTYPE html>
   2 <style>
   3 #searchbar {
   4     bottom: 0; /* Useful for seeing the issue visually. */
   5     position: fixed;
   6 }
   7 #recentlink {
   8     background: purple;
   9     width: 150px;
  10     height: 150px;
  11 }
  12 header {
  13     padding: 10px;
  14     position: relative;
  15     z-index: 50;
  16     -webkit-backface-visibility: hidden;
  17 }
  18 </style>
  19 To manually test, just scroll down, there should be no purple trace.
  20 <header>
  21     <div id="searchbar">
  22         <div id="recentlink"></div>
  23     </div>
  24 </header>
  25
  26 <!-- Used to have some overflowing content to scroll -->
  27 <div style="height: 5000px"></div>
  28
  29 <script src="resources/text-based-repaint.js" type="text/javascript"></script>
  30 <script>
  31 window.scrollTo(0, 1000);
  32
  33 window.testIsAsync = true;
  34 if (window.testRunner)
  35     testRunner.waitUntilDone();
  36
  37 function repaintTest()
  38 {
  39     window.scrollBy(0, 400);
  40     finishRepaintTest();
  41 }
  42
  43 // We need to skip 2 frames for the bug to show under DRT.
  44 window.requestAnimationFrame(function() {
  45     window.requestAnimationFrame(function() {
  46         runRepaintTest();
  47     });
  48 });
  49 </script>
  50