range-snap-to-tick-marks-01.html (2303B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <meta name=viewport content=width=device-width> 4 <title>Snap to a 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> 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 snapToTickMarks() { 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 left = rect.left + 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 = (left + 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 promise_test(async function domDoesNotSnap() { 42 const startAt = -2; 43 range.value = startAt; 44 for (let expectedValue = startAt + 1; expectedValue <= 6; expectedValue++) { 45 range.stepUp(); 46 assert_equals(parseInt(range.value), expectedValue); 47 } 48 }); 49 promise_test(async function keyboardDoesNotSnap() { 50 const kArrowRight = "\uE014"; 51 range.focus(); 52 const startAt = -2; 53 range.value = startAt; 54 for (let expectedValue = startAt + 1; expectedValue <= 6; expectedValue++) { 55 await test_driver.send_keys(range, kArrowRight); 56 assert_equals(parseInt(range.value), expectedValue); 57 } 58 }); 59 </script>