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 |