| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <p id="description">Test for dragging operations of <input type=range> when <code>readonly</code> or <code>disabled</code> are toggled.</p> |
| <div id="console"></div> |
| <input type="range" id="range1" min="0" max="100" value="50"> |
| <input type="range" id="range2" min="0" max="100" value="50"> |
| <script> |
| |
| var changeEventCounter = 0; |
| function handleChange() { |
| changeEventCounter++; |
| } |
| |
| var inputEventCounter = 0; |
| var lastInputEventCounter = inputEventCounter; |
| function handleInput() { |
| inputEventCounter++; |
| } |
| |
| var input = null; |
| |
| function testInput(id, field) { |
| if (!window.eventSender) |
| return; |
| |
| input = document.getElementById(id); |
| input.onchange = handleChange; |
| input.oninput = handleInput; |
| input.focus(); |
| |
| var centerY = input.offsetTop + input.offsetHeight / 2; |
| var centerX = input.offsetLeft + input.offsetWidth / 2; |
| var leftEdgeX = input.offsetLeft + 1; |
| var rightEdgeX = input.offsetLeft + input.offsetWidth - 1; |
| |
| function dragToLeftEdge() { eventSender.mouseMoveTo(leftEdgeX, centerY); } |
| function dragToRightEdge() { eventSender.mouseMoveTo(rightEdgeX, centerY); } |
| function dragToCenter() { eventSender.mouseMoveTo(centerX, centerY); } |
| |
| function startDragFromCenter() { |
| eventSender.mouseMoveTo(centerX, centerY); |
| eventSender.mouseDown(); |
| } |
| |
| function stopDrag() { |
| eventSender.mouseUp(); |
| } |
| |
| startDragFromCenter(); |
| |
| // Drag from center, to right edge, to left edge. |
| debug('readOnly=false, disabled=false'); |
| input.valueAsNumber = 50; |
| lastInputEventCounter = inputEventCounter; |
| dragToRightEdge(); |
| shouldBe('input.value', '"100"'); |
| shouldBeGreaterThanOrEqual('inputEventCounter', 'lastInputEventCounter + 1'); |
| lastInputEventCounter = inputEventCounter; |
| dragToLeftEdge(); |
| shouldBe('input.value', '"0"'); |
| shouldBeGreaterThanOrEqual('inputEventCounter', 'lastInputEventCounter + 1'); |
| |
| // Toggle (readonly | disabled). |
| debug(field + '=true'); |
| input[field] = true; |
| |
| // Attempt to drag to right edge. Should not change. |
| lastInputEventCounter = inputEventCounter; |
| dragToRightEdge(); |
| |
| if (field == 'disabled') { |
| shouldBeEqualToString('input.value', '0'); |
| shouldBe('inputEventCounter', 'lastInputEventCounter'); |
| } else { |
| shouldBeEqualToString('input.value', '100'); |
| shouldBe('inputEventCounter', 'lastInputEventCounter + 1'); |
| } |
| stopDrag(); |
| } |
| |
| |
| // We want all mouse moves sent immediately. |
| window.eventSender.dragMode = false; |
| |
| debug('Tests for range dragging while it toggles to be readonly.'); |
| testInput('range1', 'readOnly'); |
| debug(''); |
| |
| debug('Tests for range dragging while it toggles to be disabled.'); |
| testInput('range2', 'disabled'); |
| debug(''); |
| |
| shouldBe('changeEventCounter', '1'); |
| debug(''); |
| |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
