| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| .scroller::-webkit-scrollbar { |
| height: 5px; |
| } |
| |
| .scroller { |
| width: 200px; |
| height: 10px; |
| overflow-x: scroll; |
| } |
| |
| .scroller > div { |
| width: 400px; |
| } |
| |
| .t1 .scroller::-webkit-scrollbar, |
| .t2 + .scroller::-webkit-scrollbar, |
| .t3 .scroller::-webkit-scrollbar-button, |
| .t4 + .scroller::-webkit-scrollbar-button, |
| .t5 .scroller::-webkit-scrollbar-corner, |
| .t6 + .scroller::-webkit-scrollbar-corner, |
| .t7 .scroller::-webkit-scrollbar-thumb, |
| .t8 + .scroller::-webkit-scrollbar-thumb, |
| .t9 .scroller::-webkit-scrollbar-track, |
| .t10 + .scroller::-webkit-scrollbar-track, |
| .t11 .scroller::-webkit-scrollbar-track-piece, |
| .t12 + .scroller::-webkit-scrollbar-track-piece, |
| .t13 .scroller::-webkit-resizer, |
| .t14 + .scroller::-webkit-resizer { |
| background-color: green; |
| } |
| |
| .t13 .scroller, .t14 + .scroller { |
| resize: both; |
| } |
| </style> |
| <div> |
| <div id="scrollerParent"> |
| <div> |
| <div id="scroller1" class="scroller"> |
| <div> |
| <span></span> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| <div></div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <div id="scrollerSibling"></div> |
| <div id="scroller2" class="scroller"> |
| <div> |
| <span></span> |
| <span></span> |
| <span></span> |
| <span></span> |
| </div> |
| </div> |
| <div> |
| <div></div> |
| </div> |
| <script> |
| description("Style invalidation for scrollbar pseudo elements."); |
| |
| var transparent = "rgba(0, 0, 0, 0)"; |
| var green = "rgb(0, 128, 0)"; |
| |
| function testScrollbarPseudo(pseudoElm, scroller, classElement, testClass, expectedCount) { |
| |
| var computedString = "getComputedStyle(" + scroller + ", '" + pseudoElm + "').backgroundColor"; |
| |
| shouldBe(computedString, "transparent"); |
| |
| document.body.offsetTop; // force recalc |
| classElement.className = testClass; |
| |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "" + expectedCount); |
| |
| shouldBe(computedString, "green"); |
| classElement.className = ""; |
| } |
| |
| // The expected affected element counts below need an explanation: |
| // |
| // The descendant selector tests invalidate 2 normal dom elements: |
| // #scrollerParent, #scroller1 |
| // |
| // The sibling selector tests invalidate 7 normal dom elements: |
| // #scrollerSibling, #scroller2, the div child of #scroller2 and its 4 spans |
| // |
| // In addition there the pseudo element selectors add the following pseudo elements |
| // on the #scroller1 and #scroller2 elements: |
| // |
| // ::-webkit-scrollbar: 1 scrollbar pseudo element (in total 3 and 8) |
| // ::-webkit-scrollbar-button: 1 scrollbar + 4 buttons (in total 7 and 12) |
| // ::-webkit-scrollbar-corner: 1 scrollbar + 1 corner (in total 4 and 9) |
| // ::-webkit-scrollbar-thumb: 1 scrollbar + 1 thumb (in total 4 and 9) |
| // ::-webkit-scrollbar-track: 1 scrollbar + 1 track (in total 4 and 9) |
| // ::-webkit-scrollbar-track-piece: 1 scrollbar + 2 track pieces (in total 5 and 10) |
| // ::-webkit-resizer: 1 scrollbar + 1 resizer (in total 4 and 9) |
| |
| testScrollbarPseudo("::-webkit-scrollbar", "scroller1", scrollerParent, "t1", 2); |
| testScrollbarPseudo("::-webkit-scrollbar", "scroller2", scrollerSibling, "t2", 2); |
| testScrollbarPseudo("::-webkit-scrollbar-button", "scroller1", scrollerParent, "t3", 6); |
| testScrollbarPseudo("::-webkit-scrollbar-button", "scroller2", scrollerSibling, "t4", 6); |
| testScrollbarPseudo("::-webkit-scrollbar-corner", "scroller1", scrollerParent, "t5", 3); |
| testScrollbarPseudo("::-webkit-scrollbar-corner", "scroller2", scrollerSibling, "t6", 3); |
| testScrollbarPseudo("::-webkit-scrollbar-thumb", "scroller1", scrollerParent, "t7", 3); |
| testScrollbarPseudo("::-webkit-scrollbar-thumb", "scroller2", scrollerSibling, "t8", 3); |
| testScrollbarPseudo("::-webkit-scrollbar-track", "scroller1", scrollerParent, "t9", 3); |
| testScrollbarPseudo("::-webkit-scrollbar-track", "scroller2", scrollerSibling, "t10", 3); |
| testScrollbarPseudo("::-webkit-scrollbar-track-piece", "scroller1", scrollerParent, "t11", 4); |
| testScrollbarPseudo("::-webkit-scrollbar-track-piece", "scroller2", scrollerSibling, "t12", 4); |
| testScrollbarPseudo("::-webkit-resizer", "scroller1", scrollerParent, "t13", 3); |
| testScrollbarPseudo("::-webkit-resizer", "scroller2", scrollerSibling, "t14", 3); |
| </script> |
