layout/reftests/invalidation/fast-scrolling.html

   1 <!DOCTYPE html>
   2 <html lang="en" class="reftest-wait" reftest-async-scroll>
   3 <meta charset="utf-8">
   4 <title>Bug 1164227 - Testcase for the invalid region simplification bug</title>
   5
   6 <style>
   7
   8 #scrollbox {
   9   width: 400px;
  10   height: 500px;
  11   overflow: auto;
  12   margin: 80px;
  13   border: 1px solid black;
  14 }
  15
  16 .contents {
  17   height: 600px;
  18   background: white;
  19   padding: 20px;
  20   position: relative;
  21 }
  22
  23 .boxes > div {
  24   box-sizing: border-box;
  25   width: 10px;
  26   height: 10px;
  27   border: 1px solid black;
  28   float: left;
  29   margin-left: -2px;
  30 }
  31
  32 .boxes > div:nth-child(odd) {
  33   transform: translateY(500px);
  34 }
  35
  36 .reftest-no-paint {
  37   position: absolute;
  38   top: 250px;
  39   left: 30px;
  40   width: 200px;
  41   height: 50px;
  42   border: 1px solid red;
  43 }
  44 </style>
  45
  46 <div id="scrollbox"
  47      reftest-displayport-x="0"
  48      reftest-displayport-y="0"
  49      reftest-displayport-w="400"
  50      reftest-displayport-h="500">
  51
  52   <div class="contents">
  53
  54     <div class="boxes">
  55       <div style="margin-top: 0px"></div>
  56       <div style="margin-top: 1px"></div>
  57       <div style="margin-top: 2px"></div>
  58       <div style="margin-top: 3px"></div>
  59       <div style="margin-top: 4px"></div>
  60       <div style="margin-top: 5px"></div>
  61       <div style="margin-top: 6px"></div>
  62       <div style="margin-top: 7px"></div>
  63       <div style="margin-top: 8px"></div>
  64       <div style="margin-top: 9px"></div>
  65       <div style="margin-top: 10px"></div>
  66       <div style="margin-top: 11px"></div>
  67       <div style="margin-top: 12px"></div>
  68       <div style="margin-top: 13px"></div>
  69       <div style="margin-top: 14px"></div>
  70       <div style="margin-top: 15px"></div>
  71       <div style="margin-top: 16px"></div>
  72       <div style="margin-top: 17px"></div>
  73       <div style="margin-top: 18px"></div>
  74       <div style="margin-top: 19px"></div>
  75       <div style="margin-top: 20px"></div>
  76       <div style="margin-top: 21px"></div>
  77       <div style="margin-top: 22px"></div>
  78       <div style="margin-top: 23px"></div>
  79       <div style="margin-top: 24px"></div>
  80       <div style="margin-top: 25px"></div>
  81       <div style="margin-top: 26px"></div>
  82       <div style="margin-top: 27px"></div>
  83       <div style="margin-top: 28px"></div>
  84       <div style="margin-top: 29px"></div>
  85       <div style="margin-top: 30px"></div>
  86       <div style="margin-top: 31px"></div>
  87       <div style="margin-top: 32px"></div>
  88       <div style="margin-top: 33px"></div>
  89       <div style="margin-top: 34px"></div>
  90       <div style="margin-top: 35px"></div>
  91       <div style="margin-top: 36px"></div>
  92       <div style="margin-top: 37px"></div>
  93       <div style="margin-top: 38px"></div>
  94       <div style="margin-top: 39px"></div>
  95     </div>
  96
  97     <div class="reftest-no-paint"></div>
  98
  99   </div>
 100
 101 </div>
 102
 103 <script>
 104
 105 var scrollbox = document.querySelector("#scrollbox");
 106 scrollbox.scrollTop = 100;
 107
 108 window.addEventListener("MozReftestInvalidate", function (e) {
 109   scrollbox.scrollTop = 0;
 110   document.documentElement.removeAttribute("class");
 111 });
 112
 113 </script>