| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 .scroller { | 3 .scroller { |
| 4 width: 100px; | 4 width: 100px; |
| 5 height: 30px; | 5 height: 30px; |
| 6 overflow: scroll; | 6 overflow: scroll; |
| 7 } | 7 } |
| 8 .scroller::-webkit-scrollbar { | 8 .scroller::-webkit-scrollbar { |
| 9 width: 10px; | 9 width: 10px; |
| 10 height: 10px; | 10 height: 10px; |
| (...skipping 13 matching lines...) Expand all Loading... |
| 24 | 24 |
| 25 #t5 .scroller::-webkit-scrollbar:vertical { background-color: red; } | 25 #t5 .scroller::-webkit-scrollbar:vertical { background-color: red; } |
| 26 #t5.t5 .scroller::-webkit-scrollbar:vertical { background-color: green; } | 26 #t5.t5 .scroller::-webkit-scrollbar:vertical { background-color: green; } |
| 27 | 27 |
| 28 #t6 .scroller::-webkit-scrollbar-button:start { background-color: red; } | 28 #t6 .scroller::-webkit-scrollbar-button:start { background-color: red; } |
| 29 #t6.t6 .scroller::-webkit-scrollbar-button:start { background-color: green; } | 29 #t6.t6 .scroller::-webkit-scrollbar-button:start { background-color: green; } |
| 30 | 30 |
| 31 #t7 .scroller::-webkit-scrollbar-button:end { background-color: red; } | 31 #t7 .scroller::-webkit-scrollbar-button:end { background-color: red; } |
| 32 #t7.t7 .scroller::-webkit-scrollbar-button:end { background-color: green; } | 32 #t7.t7 .scroller::-webkit-scrollbar-button:end { background-color: green; } |
| 33 | 33 |
| 34 #t8 .scroller::-webkit-scrollbar-button:single-button { background-color: red; } | |
| 35 #t8.t8 .scroller::-webkit-scrollbar-button:single-button { background-color: gre
en; } | |
| 36 #t8 .scroller::-webkit-scrollbar-button:double-button { background-color: red; } | |
| 37 #t8.t8 .scroller::-webkit-scrollbar-button:double-button { background-color: gre
en; } | |
| 38 | |
| 39 </style> | 34 </style> |
| 40 <div id="t1"> | 35 <div id="t1"> |
| 41 <div> | 36 <div> |
| 42 <div class="scroller">FAIL</div> | 37 <div class="scroller">FAIL</div> |
| 43 </div> | 38 </div> |
| 44 <div></div><div></div><div></div><div></div><div></div><div></div><div></div
> | 39 <div></div><div></div><div></div><div></div><div></div><div></div><div></div
> |
| 45 </div> | 40 </div> |
| 46 <div id="t2"> | 41 <div id="t2"> |
| 47 <div> | 42 <div> |
| 48 <div class="scroller">FAIL</div> | 43 <div class="scroller">FAIL</div> |
| (...skipping 23 matching lines...) Expand all Loading... |
| 72 <div class="scroller">FAIL</div> | 67 <div class="scroller">FAIL</div> |
| 73 </div> | 68 </div> |
| 74 <div></div><div></div><div></div><div></div><div></div><div></div><div></div
> | 69 <div></div><div></div><div></div><div></div><div></div><div></div><div></div
> |
| 75 </div> | 70 </div> |
| 76 <div id="t7"> | 71 <div id="t7"> |
| 77 <div> | 72 <div> |
| 78 <div class="scroller">FAIL</div> | 73 <div class="scroller">FAIL</div> |
| 79 </div> | 74 </div> |
| 80 <div></div><div></div><div></div><div></div><div></div><div></div><div></div
> | 75 <div></div><div></div><div></div><div></div><div></div><div></div><div></div
> |
| 81 </div> | 76 </div> |
| 82 <div id="t8"> | |
| 83 <div> | |
| 84 <div class="scroller">FAIL</div> | |
| 85 </div> | |
| 86 <div></div><div></div><div></div><div></div><div></div><div></div><div></div
> | |
| 87 </div> | |
| 88 <script> | 77 <script> |
| 89 function invalidateScroller(testId, expectedCount) { | 78 function invalidateScroller(testId, expectedCount) { |
| 90 var testElement = document.getElementById(testId); | 79 var testElement = document.getElementById(testId); |
| 91 var scroller = testElement.querySelector(".scroller"); | 80 var scroller = testElement.querySelector(".scroller"); |
| 92 testElement.offsetTop; // Force recalc; | 81 testElement.offsetTop; // Force recalc; |
| 93 testElement.className = testId; | 82 testElement.className = testId; |
| 94 if (window.internals) { | 83 if (window.internals) { |
| 95 var count = internals.updateStyleAndReturnAffectedElementCount(); | 84 var count = internals.updateStyleAndReturnAffectedElementCount(); |
| 96 if (count == expectedCount) | 85 if (count == expectedCount) |
| 97 scroller.innerText = "PASS"; | 86 scroller.innerText = "PASS"; |
| 98 else | 87 else |
| 99 scroller.innerText = "FAIL: "+count; | 88 scroller.innerText = "FAIL: "+count; |
| 100 } | 89 } |
| 101 } | 90 } |
| 102 | 91 |
| 103 // Invalidation counts are 2 (#t<n> and .scroller) plus pseudo elements | 92 // Invalidation counts are 2 (#t<n> and .scroller) plus pseudo elements |
| 104 | 93 |
| 105 invalidateScroller("t1", 4); // pseudo count 2: 2 bars | 94 invalidateScroller("t1", 4); // pseudo count 2: 2 bars |
| 106 invalidateScroller("t2", 8); // pseudo count 6: 2 bars + 4 buttons | 95 invalidateScroller("t2", 8); // pseudo count 6: 2 bars + 4 buttons |
| 107 invalidateScroller("t3", 8); // pseudo count 6: 2 bars + 4 buttons | 96 invalidateScroller("t3", 8); // pseudo count 6: 2 bars + 4 buttons |
| 108 invalidateScroller("t4", 4); // pseudo count 6: 2 bars + 4 buttons | 97 invalidateScroller("t4", 4); // pseudo count 6: 2 bars + 4 buttons |
| 109 invalidateScroller("t5", 4); // pseudo count 2: 2 bars | 98 invalidateScroller("t5", 4); // pseudo count 2: 2 bars |
| 110 invalidateScroller("t6", 8); // pseudo count 6: 2 bars + 4 buttons | 99 invalidateScroller("t6", 8); // pseudo count 6: 2 bars + 4 buttons |
| 111 invalidateScroller("t7", 8); // pseudo count 6: 2 bars + 4 buttons | 100 invalidateScroller("t7", 8); // pseudo count 6: 2 bars + 4 buttons |
| 112 invalidateScroller("t8", 8); // pseudo count 6: 2 bars + 4 buttons | |
| 113 </script> | 101 </script> |
| OLD | NEW |