| <!DOCTYPE html> |
| <style> |
| .scroller { |
| border: 2px solid cyan; |
| height: 50px; |
| overflow: scroll; |
| width: 8px; |
| margin-left: 10px; |
| margin-top: 5px; |
| display: inline-block; |
| } |
| .selfpainting { |
| position: relative; |
| } |
| .rounded { |
| border-radius: 8px; |
| } |
| .composited { |
| will-change: transform; |
| } |
| .outlined { |
| outline: 6px solid yellow; |
| } |
| .space { |
| width: 1px; |
| height: 100px; |
| } |
| .clipline { |
| display: inline-block; |
| width: 0px; |
| height: 50px; |
| border-left: 1px dotted black; |
| margin-left: -12px; |
| margin-right: 12px; |
| top: -2px; |
| position: relative; |
| } |
| </style> |
| Every scrollbar should be cut off at the dotted line.<br> |
| <div class="scroller"><div class="space"></div></div><div class="clipline"></div> |
| <div class="scroller selfpainting"><div class="space"></div></div><div class="clipline"></div> |
| <div class="scroller composited"><div class="space"></div></div><div class="clipline"></div> |
| <div class="scroller composited outlined"><div class="space"></div></div><div class="clipline"></div> |
| <div class="rounded scroller"><div class="space"></div></div><div class="clipline"></div> |
| <div class="rounded scroller selfpainting "><div class="space"></div></div><div class="clipline"></div> |
| <div class="rounded scroller composited"><div class="space"></div></div><div class="clipline"></div> |
| <div class="rounded scroller composited outlined"><div class="space"></div></div><div class="clipline"></div> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsTextWithPixelResults(); |
| </script> |
