third_party/WebKit/LayoutTests/fast/css/invalidation/scrollbar-pseudo-classes.html

   1 <!DOCTYPE html>
   2 <style>
   3 .scroller {
   4     width: 100px;
   5     height: 30px;
   6     overflow: scroll;
   7 }
   8 .scroller::-webkit-scrollbar {
   9     width: 10px;
  10     height: 10px;
  11 }
  12
  13 #t1 .scroller::-webkit-scrollbar:corner-present { background-color: red; }
  14 #t1.t1 .scroller::-webkit-scrollbar:corner-present { background-color: green; }
  15
  16 #t2 .scroller::-webkit-scrollbar-button:decrement { background-color: red; }
  17 #t2.t2 .scroller::-webkit-scrollbar-button:decrement { background-color: green; }
  18
  19 #t3 .scroller::-webkit-scrollbar-button:increment { background-color: red; }
  20 #t3.t3 .scroller::-webkit-scrollbar-button:increment { background-color: green; }
  21
  22 #t4 .scroller::-webkit-scrollbar:horizontal { background-color: red; }
  23 #t4.t4 .scroller::-webkit-scrollbar:horizontal { background-color: green; }
  24
  25 #t5 .scroller::-webkit-scrollbar:vertical { background-color: red; }
  26 #t5.t5 .scroller::-webkit-scrollbar:vertical { background-color: green; }
  27
  28 #t6 .scroller::-webkit-scrollbar-button:start { background-color: red; }
  29 #t6.t6 .scroller::-webkit-scrollbar-button:start { background-color: green; }
  30
  31 #t7 .scroller::-webkit-scrollbar-button:end { background-color: red; }
  32 #t7.t7 .scroller::-webkit-scrollbar-button:end { background-color: green; }
  33
  34 </style>
  35 <div id="t1">
  36     <div>
  37         <div class="scroller">FAIL</div>
  38     </div>
  39     <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  40 </div>
  41 <div id="t2">
  42     <div>
  43         <div class="scroller">FAIL</div>
  44     </div>
  45     <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  46 </div>
  47 <div id="t3">
  48     <div>
  49         <div class="scroller">FAIL</div>
  50     </div>
  51     <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  52 </div>
  53 <div id="t4">
  54     <div>
  55         <div class="scroller">FAIL</div>
  56     </div>
  57     <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  58 </div>
  59 <div id="t5">
  60     <div>
  61         <div class="scroller">FAIL</div>
  62     </div>
  63     <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  64 </div>
  65 <div id="t6">
  66     <div>
  67         <div class="scroller">FAIL</div>
  68     </div>
  69     <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  70 </div>
  71 <div id="t7">
  72     <div>
  73         <div class="scroller">FAIL</div>
  74     </div>
  75     <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  76 </div>
  77 <script>
  78 function invalidateScroller(testId, expectedCount) {
  79     var testElement = document.getElementById(testId);
  80     var scroller = testElement.querySelector(".scroller");
  81     testElement.offsetTop; // Force recalc;
  82     testElement.className = testId;
  83     if (window.internals) {
  84         var count = internals.updateStyleAndReturnAffectedElementCount();
  85         if (count == expectedCount)
  86             scroller.innerText = "PASS";
  87         else
  88             scroller.innerText = "FAIL: "+count;
  89     }
  90 }
  91
  92 // Invalidation counts are 2 (#t<n> and .scroller) plus pseudo elements
  93
  94 invalidateScroller("t1", 3); // pseudo count 2: 2 bars
  95 invalidateScroller("t2", 7); // pseudo count 6: 2 bars + 4 buttons
  96 invalidateScroller("t3", 7); // pseudo count 6: 2 bars + 4 buttons
  97 invalidateScroller("t4", 3); // pseudo count 6: 2 bars + 4 buttons
  98 invalidateScroller("t5", 3); // pseudo count 2: 2 bars
  99 invalidateScroller("t6", 7); // pseudo count 6: 2 bars + 4 buttons
 100 invalidateScroller("t7", 7); // pseudo count 6: 2 bars + 4 buttons
 101 </script>