| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| description('Test if change event fires properly when color chooser changes. Bug 66848 <br> To manually test this, click on the input color element in the top left corner and change the value from the color chooser. See if the number of "value changed" messages matches the number of times you changed the color.'); |
| jsTestIsAsync = true; |
| |
| var input = document.createElement('input'); |
| input.type = 'color'; |
| input.value = '#000000'; |
| document.body.appendChild(input); |
| |
| input.style.position = 'absolute'; |
| input.style.left = '0'; |
| input.style.top = '0'; |
| input.style.width = '20px'; |
| input.style.height = '20px'; |
| |
| var onChange = 0; |
| |
| input.oninput = function() { |
| debug("input event dispatched - value is: " + input.value); |
| }; |
| |
| eventSender.mouseMoveTo(10, 10); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| |
| // Test that incorrect element arguments are (not) handled. |
| shouldThrow("internals.selectColorInColorChooser({}, '#ff0000');"); |
| shouldThrow("internals.selectColorInColorChooser(document, '#ff0000');"); |
| |
| function step1() { |
| // input.onchange should be called |
| input.onchange = step2; |
| internals.selectColorInColorChooser(input, '#ff0000'); |
| internals.endColorChooser(input); |
| shouldBe('input.value', '"#ff0000"'); |
| } |
| |
| function step2() { |
| debug("change event dispatched - value changed to " + input.value); |
| // input.onchange should not be called |
| input.onchange = () => { |
| testFailed("Change event should not be dispatched."); |
| }; |
| internals.selectColorInColorChooser(input, '#ff0000'); |
| internals.endColorChooser(input); |
| shouldBe('input.value', '"#ff0000"'); |
| step3(); |
| } |
| |
| function step3() { |
| debug('Change event is only dispatched, when color chooser is closed'); |
| input.onchange = step4; |
| internals.selectColorInColorChooser(input, '#ff0002'); |
| internals.endColorChooser(input); |
| } |
| |
| function step4() { |
| testPassed('Change event was dispatched.'); |
| finishJSTest(); |
| } |
| |
| step1(); |
| </script> |
| </body> |
| </html> |
