range-snap-to-tick-marks-03.html (1820B)
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 direction: rtl; /* so the range progresses upwards, not downwards */ 17 } 18 </style> 19 <input type=range list=tickmarks min=-5 max=35> 20 <datalist id=tickmarks> 21 <option value=0></option> 22 <option value=3></option> 23 </datalist> 24 <script> 25 const range = document.querySelector("input[type=range]"); 26 promise_test(async function snapToVerticalTickMarks() { 27 const assertions = [[-3, "-3"], [-2, "0"], [1, "0"], [2, "3"], [5, "3"], [6, "6"]]; 28 const rect = range.getBoundingClientRect(); 29 const padding = 10; 30 const bottom = rect.bottom - padding; 31 const height = rect.height - 2 * padding; 32 const actions = new test_driver.Actions(); 33 const min = parseInt(range.min); 34 const max = parseInt(range.max); 35 for (const assertion of assertions) { 36 const moveTo = (bottom - height * (assertion[0] - min) / (max - min)) | 0; 37 const expected = assertion[1]; 38 await actions 39 .pointerMove(rect.left, moveTo) 40 .pointerDown() 41 .pointerUp() 42 .send(); 43 assert_equals(range.value, expected); 44 } 45 }); 46 </script>