range-appearance-border-padding.html

<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../resources/common.js"></script>
<body>
<ul>
  <li>Range value=50 with padding: <input type="range" min="0" max="100" value="50" style="padding:20px" /> </li>
  <li>Range value=30 with padding-left: <input type="range" min="0" max="100" value="30" style="padding-left:20px" /> </li>
  <li>Range value=50 with border and padding: <input type="range" min="0" max="100" value="50" style="border: 15px solid blue; padding:20px" /> </li>
  <li>Range vertical value=30 with border and padding
    LTR: <input type="range" min="0" max="100" value="30" style="border: 15px solid blue; padding:20px; writing-mode: vertical-lr" />
    RTL: <input type="range" min="0" max="100" value="30" style="border: 15px solid blue; padding:20px; writing-mode: vertical-lr; direction: rtl" />
  </li>
  <li>Range RTL value=30: <input type="range" min="0" max="100" value="30" style="direction: rtl" /> </li>
  <li>Range RTL value=80 with border and padding: <input type="range" min="0" max="100" value="80" style="border: 15px solid blue; padding:20px; direction: rtl" /> </li>
</ul>
chromium/third_party/blink/web_tests/fast/forms/range/range-appearance-border-padding.html
