| <!DOCTYPE html> |
| <style> |
| .scroller { |
| width: 100px; |
| height: 30px; |
| overflow: scroll; |
| } |
| .scroller::-webkit-scrollbar { |
| width: 10px; |
| height: 10px; |
| } |
| |
| #t1 .scroller::-webkit-scrollbar:corner-present { background-color: red; } |
| #t1.t1 .scroller::-webkit-scrollbar:corner-present { background-color: green; } |
| |
| #t2 .scroller::-webkit-scrollbar-button:decrement { background-color: red; } |
| #t2.t2 .scroller::-webkit-scrollbar-button:decrement { background-color: green; } |
| |
| #t3 .scroller::-webkit-scrollbar-button:increment { background-color: red; } |
| #t3.t3 .scroller::-webkit-scrollbar-button:increment { background-color: green; } |
| |
| #t4 .scroller::-webkit-scrollbar:horizontal { background-color: red; } |
| #t4.t4 .scroller::-webkit-scrollbar:horizontal { background-color: green; } |
| |
| #t5 .scroller::-webkit-scrollbar:vertical { background-color: red; } |
| #t5.t5 .scroller::-webkit-scrollbar:vertical { background-color: green; } |
| |
| #t6 .scroller::-webkit-scrollbar-button:start { background-color: red; } |
| #t6.t6 .scroller::-webkit-scrollbar-button:start { background-color: green; } |
| |
| #t7 .scroller::-webkit-scrollbar-button:end { background-color: red; } |
| #t7.t7 .scroller::-webkit-scrollbar-button:end { background-color: green; } |
| |
| </style> |
| <div id="t1"> |
| <div> |
| <div class="scroller">FAIL</div> |
| </div> |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div> |
| </div> |
| <div id="t2"> |
| <div> |
| <div class="scroller">FAIL</div> |
| </div> |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div> |
| </div> |
| <div id="t3"> |
| <div> |
| <div class="scroller">FAIL</div> |
| </div> |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div> |
| </div> |
| <div id="t4"> |
| <div> |
| <div class="scroller">FAIL</div> |
| </div> |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div> |
| </div> |
| <div id="t5"> |
| <div> |
| <div class="scroller">FAIL</div> |
| </div> |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div> |
| </div> |
| <div id="t6"> |
| <div> |
| <div class="scroller">FAIL</div> |
| </div> |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div> |
| </div> |
| <div id="t7"> |
| <div> |
| <div class="scroller">FAIL</div> |
| </div> |
| <div></div><div></div><div></div><div></div><div></div><div></div><div></div> |
| </div> |
| <script> |
| function invalidateScroller(testId, expectedCount) { |
| var testElement = document.getElementById(testId); |
| var scroller = testElement.querySelector(".scroller"); |
| testElement.offsetTop; // Force recalc; |
| testElement.className = testId; |
| if (window.internals) { |
| var count = internals.updateStyleAndReturnAffectedElementCount(); |
| if (count == expectedCount) |
| scroller.innerText = "PASS"; |
| else |
| scroller.innerText = "FAIL: "+count; |
| } |
| } |
| |
| // Invalidation counts are 2 (#t<n> and .scroller) plus pseudo elements |
| |
| invalidateScroller("t1", 3); // pseudo count 2: 2 bars |
| invalidateScroller("t2", 7); // pseudo count 6: 2 bars + 4 buttons |
| invalidateScroller("t3", 7); // pseudo count 6: 2 bars + 4 buttons |
| invalidateScroller("t4", 3); // pseudo count 6: 2 bars + 4 buttons |
| invalidateScroller("t5", 3); // pseudo count 2: 2 bars |
| invalidateScroller("t6", 7); // pseudo count 6: 2 bars + 4 buttons |
| invalidateScroller("t7", 7); // pseudo count 6: 2 bars + 4 buttons |
| </script> |
