scrollbar-clamping-1.html 834 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE HTML>
  2. <title>Test of reduction of border-radius for scrollbars (border drawing)</title>
  3. <style>
  4. .contain { height: 130px; position: relative }
  5. .test {
  6. position: absolute;
  7. top: 0;
  8. left: 0;
  9. border: medium solid blue;
  10. border-width: 2px 4px 8px 10px;
  11. height: 100px;
  12. width: 200px;
  13. border-radius: 12px / 15px;
  14. }
  15. .cover {
  16. position: absolute;
  17. width: 200px;
  18. height: 100px;
  19. top: 2px;
  20. left: 10px;
  21. background: blue;
  22. }
  23. #x, #xy { overflow-x: scroll }
  24. #y, #xy { overflow-y: scroll }
  25. </style>
  26. <div class="contain">
  27. <div class="test" id="x"></div>
  28. <div class="cover" style="border-top-right-radius: 5px"></div>
  29. </div>
  30. <div class="contain">
  31. <div class="test" id="y"></div>
  32. <div class="cover"></div>
  33. </div>
  34. <div class="contain">
  35. <div class="test" id="xy"></div>
  36. <div class="cover"></div>
  37. </div>