range-snap-to-tick-marks-02.html (1683B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <meta name=viewport content=width=device-width> 4 <title>Snap to an RTL 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 <input type=range list=tickmarks min=-5 max=35 dir=rtl> 14 <datalist id=tickmarks> 15 <option value=0></option> 16 <option value=3></option> 17 </datalist> 18 <script> 19 const range = document.querySelector("input[type=range]"); 20 const step = 1; 21 promise_test(async function snapToRTLTickMarks() { 22 const assertions = [[-3, "-3"], [-2, "0"], [1, "0"], [2, "3"], [5, "3"], [6, "6"]]; 23 const rect = range.getBoundingClientRect(); 24 const padding = 10; 25 const right = rect.right - padding; 26 const width = rect.width - 2 * padding; 27 const actions = new test_driver.Actions(); 28 const min = parseInt(range.min); 29 const max = parseInt(range.max); 30 for (const assertion of assertions) { 31 const moveTo = (right - width * (assertion[0] - min) / (max - min)) | 0; 32 const expected = assertion[1]; 33 await actions 34 .pointerMove(moveTo, rect.top) 35 .pointerDown() 36 .pointerUp() 37 .send(); 38 assert_equals(range.value, expected); 39 } 40 }); 41 </script>