| <!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></p> |
| <div id="console"></div> |
| <script> |
| |
| var inputEventCounter = 0; |
| function handleInput() { |
| inputEventCounter++; |
| } |
| var lastInputEventCounter = inputEventCounter; |
| |
| var changeEventCounter = 0; |
| function handleChange() { |
| changeEventCounter++; |
| } |
| var lastChangeEventCounter = changeEventCounter; |
| |
| function dragMouseFromCenter() { |
| var centerX = input.offsetLeft + input.offsetWidth / 2; |
| var centerY = input.offsetTop + input.offsetHeight / 2; |
| eventSender.mouseMoveTo(centerX, centerY); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(input.offsetLeft + input.offsetWidth, centerY); |
| eventSender.mouseUp(); |
| } |
| |
| function dragMouseFromEdge() { |
| var centerY = input.offsetTop + input.offsetHeight / 2; |
| |
| eventSender.mouseMoveTo(input.offsetLeft + 1, centerY); |
| eventSender.mouseDown(); |
| eventSender.mouseMoveTo(input.offsetLeft + input.offsetWidth, centerY); |
| eventSender.mouseUp(); |
| } |
| |
| function testInput(dragsFromEdge) { |
| if (!window.eventSender) |
| return; |
| |
| var dragMouse = dragsFromEdge ? dragMouseFromEdge : dragMouseFromCenter; |
| |
| debug('readOnly=false, disabled=false'); |
| input.valueAsNumber = 50; |
| lastInputEventCounter = inputEventCounter; |
| lastChangeEventCounter = changeEventCounter; |
| dragMouse(); |
| shouldBeEqualToString('input.value', '100'); |
| shouldBeGreaterThanOrEqual('inputEventCounter', 'lastInputEventCounter + 1'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| |
| debug('readOnly=true'); |
| input.disabled = false; |
| input.readOnly = true; |
| input.valueAsNumber = 50; |
| lastInputEventCounter = inputEventCounter; |
| lastChangeEventCounter = changeEventCounter; |
| dragMouse(); |
| shouldBeEqualToString('input.value', '100'); |
| shouldBeGreaterThanOrEqual('inputEventCounter', 'lastInputEventCounter + 1'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| |
| debug('disabled=true'); |
| input.readOnly = false; |
| input.disabled = true; |
| input.valueAsNumber = 50; |
| lastInputEventCounter = inputEventCounter; |
| lastChangeEventCounter = changeEventCounter; |
| dragMouse(); |
| shouldBeEqualToString('input.value', '50'); |
| shouldBe('inputEventCounter', 'lastInputEventCounter'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| } |
| |
| var parent = document.createElement('div'); |
| document.body.appendChild(parent); |
| parent.innerHTML = '<input type=range id=range1 min=0 max=100 value=50>' + |
| '<input type=range id=range2 min=0 max=100 value=50>'; |
| |
| debug('Tests for range dragging from center.'); |
| var input = document.getElementById('range1'); |
| input.oninput = handleInput; |
| input.onchange = handleChange; |
| input.focus(); |
| testInput(false); |
| debug(''); |
| |
| debug('Tests for range dragging from edge'); |
| var input = document.getElementById('range2'); |
| input.oninput = handleInput; |
| input.onchange = handleChange; |
| input.focus(); |
| testInput(true); |
| debug(''); |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
