OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 .scroller { | |
4 border: 2px solid cyan; | |
5 height: 50px; | |
6 overflow: scroll; | |
7 width: 8px; | |
8 margin-left: 10px; | |
9 margin-top: 5px; | |
10 display: inline-block; | |
11 } | |
12 .selfpainting { | |
13 position: relative; | |
14 } | |
15 .rounded { | |
16 border-radius: 8px; | |
17 } | |
18 .composited { | |
19 will-change: transform; | |
20 } | |
21 .outlined { | |
22 outline: 6px solid yellow; | |
23 } | |
24 .space { | |
25 width: 1px; | |
26 height: 100px; | |
27 } | |
28 .clipline { | |
29 display: inline-block; | |
30 width: 0px; | |
31 height: 50px; | |
32 border-left: 1px dotted black; | |
33 margin-left: -12px; | |
34 margin-right: 12px; | |
35 top: -2px; | |
36 position: relative; | |
37 } | |
38 </style> | |
39 Every scrollbar should be cut off at the dotted line.<br> | |
40 <div class="scroller"><div class="space"></div></div><div class="clipline"></div
> | |
41 <div class="scroller selfpainting"><div class="space"></div></div><div class="cl
ipline"></div> | |
42 <div class="scroller composited"><div class="space"></div></div><div class="clip
line"></div> | |
43 <div class="scroller composited outlined"><div class="space"></div></div><div cl
ass="clipline"></div> | |
44 <div class="rounded scroller"><div class="space"></div></div><div class="cliplin
e"></div> | |
45 <div class="rounded scroller selfpainting "><div class="space"></div></div><div
class="clipline"></div> | |
46 <div class="rounded scroller composited"><div class="space"></div></div><div cla
ss="clipline"></div> | |
47 <div class="rounded scroller composited outlined"><div class="space"></div></div
><div class="clipline"></div> | |
48 <script> | |
49 if (window.testRunner) | |
50 testRunner.dumpAsTextWithPixelResults(); | |
51 </script> | |
OLD | NEW |