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

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 .scroller::-webkit-scrollbar {
   5     height: 5px;
   6 }
   7
   8 .scroller {
   9     width: 200px;
  10     height: 10px;
  11     overflow-x: scroll;
  12 }
  13
  14 .scroller > div {
  15     width: 400px;
  16 }
  17
  18 .t1 .scroller::-webkit-scrollbar,
  19 .t2 + .scroller::-webkit-scrollbar,
  20 .t3 .scroller::-webkit-scrollbar-button,
  21 .t4 + .scroller::-webkit-scrollbar-button,
  22 .t5 .scroller::-webkit-scrollbar-corner,
  23 .t6 + .scroller::-webkit-scrollbar-corner,
  24 .t7 .scroller::-webkit-scrollbar-thumb,
  25 .t8 + .scroller::-webkit-scrollbar-thumb,
  26 .t9 .scroller::-webkit-scrollbar-track,
  27 .t10 + .scroller::-webkit-scrollbar-track,
  28 .t11 .scroller::-webkit-scrollbar-track-piece,
  29 .t12 + .scroller::-webkit-scrollbar-track-piece,
  30 .t13 .scroller::-webkit-resizer,
  31 .t14 + .scroller::-webkit-resizer {
  32     background-color: green;
  33 }
  34
  35 .t13 .scroller, .t14 + .scroller {
  36     resize: both;
  37 }
  38 </style>
  39 <div>
  40     <div id="scrollerParent">
  41         <div>
  42             <div id="scroller1" class="scroller">
  43                 <div>
  44                     <span></span>
  45                     <span></span>
  46                     <span></span>
  47                     <span></span>
  48                 </div>
  49             </div>
  50             <div></div>
  51         </div>
  52     </div>
  53 </div>
  54 <div>
  55     <div id="scrollerSibling"></div>
  56     <div id="scroller2" class="scroller">
  57         <div>
  58             <span></span>
  59             <span></span>
  60             <span></span>
  61             <span></span>
  62         </div>
  63     </div>
  64     <div>
  65         <div></div>
  66     </div>
  67 <script>
  68 description("Style invalidation for scrollbar pseudo elements.");
  69
  70 var transparent = "rgba(0, 0, 0, 0)";
  71 var green = "rgb(0, 128, 0)";
  72
  73 function testScrollbarPseudo(pseudoElm, scroller, classElement, testClass, expectedCount) {
  74
  75     var computedString = "getComputedStyle(" + scroller + ", '" + pseudoElm + "').backgroundColor";
  76
  77     shouldBe(computedString, "transparent");
  78
  79     document.body.offsetTop; // force recalc
  80     classElement.className = testClass;
  81
  82     if (window.internals)
  83         shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "" + expectedCount);
  84
  85     shouldBe(computedString, "green");
  86     classElement.className = "";
  87 }
  88
  89 // The expected affected element counts below need an explanation:
  90 //
  91 // The descendant selector tests invalidate 2 normal dom elements:
  92 // #scrollerParent, #scroller1
  93 //
  94 // The sibling selector tests invalidate 7 normal dom elements:
  95 // #scrollerSibling, #scroller2, the div child of #scroller2 and its 4 spans
  96 //
  97 // In addition there the pseudo element selectors add the following pseudo elements
  98 // on the #scroller1 and #scroller2 elements:
  99 //
 100 // ::-webkit-scrollbar: 1 scrollbar pseudo element (in total 3 and 8)
 101 // ::-webkit-scrollbar-button: 1 scrollbar + 4 buttons (in total 7 and 12)
 102 // ::-webkit-scrollbar-corner: 1 scrollbar + 1 corner (in total 4 and 9)
 103 // ::-webkit-scrollbar-thumb: 1 scrollbar + 1 thumb (in total 4 and 9)
 104 // ::-webkit-scrollbar-track: 1 scrollbar + 1 track (in total 4 and 9)
 105 // ::-webkit-scrollbar-track-piece: 1 scrollbar + 2 track pieces (in total 5 and 10)
 106 // ::-webkit-resizer: 1 scrollbar + 1 resizer (in total 4 and 9)
 107
 108 testScrollbarPseudo("::-webkit-scrollbar", "scroller1", scrollerParent, "t1", 3);
 109 testScrollbarPseudo("::-webkit-scrollbar", "scroller2", scrollerSibling, "t2", 8);
 110 testScrollbarPseudo("::-webkit-scrollbar-button", "scroller1", scrollerParent, "t3", 7);
 111 testScrollbarPseudo("::-webkit-scrollbar-button", "scroller2", scrollerSibling, "t4", 12);
 112 testScrollbarPseudo("::-webkit-scrollbar-corner", "scroller1", scrollerParent, "t5", 4);
 113 testScrollbarPseudo("::-webkit-scrollbar-corner", "scroller2", scrollerSibling, "t6", 9);
 114 testScrollbarPseudo("::-webkit-scrollbar-thumb", "scroller1", scrollerParent, "t7", 4);
 115 testScrollbarPseudo("::-webkit-scrollbar-thumb", "scroller2", scrollerSibling, "t8", 9);
 116 testScrollbarPseudo("::-webkit-scrollbar-track", "scroller1", scrollerParent, "t9", 4);
 117 testScrollbarPseudo("::-webkit-scrollbar-track", "scroller2", scrollerSibling, "t10", 9);
 118 testScrollbarPseudo("::-webkit-scrollbar-track-piece", "scroller1", scrollerParent, "t11", 5);
 119 testScrollbarPseudo("::-webkit-scrollbar-track-piece", "scroller2", scrollerSibling, "t12", 10);
 120 testScrollbarPseudo("::-webkit-resizer", "scroller1", scrollerParent, "t13", 4);
 121 testScrollbarPseudo("::-webkit-resizer", "scroller2", scrollerSibling, "t14", 9);
 122 </script>