range-input-vertical-rtl-painting.html (1019B)
1 <!DOCTYPE html> 2 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 3 <link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)"> 4 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow"> 5 <title>Test that painting of input[type=range] does not happen outside of its bounds</title> 6 <meta charset="utf-8"> 7 <link rel="match" href="range-input-painting-ref.html"> 8 9 <style> 10 #container { 11 position: relative; 12 } 13 #cover { 14 position: absolute; 15 top: 0; 16 left: 0; 17 width: 100%; 18 height: 100%; 19 background-color: red; 20 } 21 @supports (writing-mode: vertical-lr) and (direction: rtl) { 22 #cover { 23 background-color: Canvas; 24 } 25 } 26 input { 27 appearance: none; 28 writing-mode: vertical-lr; 29 direction: rtl; 30 } 31 </style> 32 33 <p>The range input below should be fully covered.</p> 34 35 <div id="container"> 36 <input type="range"> 37 <div id="cover"></div> 38 </div>