range-snap-to-tick-marks-04.html (1944B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <meta name=viewport content=width=device-width> 4 <title>Snap to a vertical slider's tick marks by clicking near them</title> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-range-control"> 6 <link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1803118"> 7 <link rel=author href="mailto:zach@zrhoffman.net" title="Zach Hoffman"> 8 <script src=/resources/testharness.js></script> 9 <script src=/resources/testharnessreport.js></script> 10 <script src=/resources/testdriver.js></script> 11 <script src=/resources/testdriver-actions.js></script> 12 <script src=/resources/testdriver-vendor.js></script> 13 <style> 14 input[type=range] { 15 writing-mode: vertical-lr; 16 } 17 </style> 18 <input type=range list=tickmarks min=-5 max=35> 19 <datalist id=tickmarks> 20 <option value=0></option> 21 <option value=3></option> 22 </datalist> 23 <script> 24 const range = document.querySelector("input[type=range]"); 25 promise_test(async function snapToVerticalTickMarks() { 26 // Same assertions as range-snap-to-tick-marks-03, but without direction:rtl the range 27 // will progress downwards instead of upwards, so the coord calculation is reversed 28 // in the y-direction. 29 const assertions = [[-3, "-3"], [-2, "0"], [1, "0"], [2, "3"], [5, "3"], [6, "6"]]; 30 const rect = range.getBoundingClientRect(); 31 const padding = 10; 32 const top = rect.top + padding; 33 const height = rect.height - 2 * padding; 34 const actions = new test_driver.Actions(); 35 const min = parseInt(range.min); 36 const max = parseInt(range.max); 37 for (const assertion of assertions) { 38 const moveTo = (top + height * (assertion[0] - min) / (max - min)) | 0; 39 const expected = assertion[1]; 40 await actions 41 .pointerMove(rect.left, moveTo) 42 .pointerDown() 43 .pointerUp() 44 .send(); 45 assert_equals(range.value, expected); 46 } 47 }); 48 </script>