michael@0: var gInvalidFormPopup = document.getElementById('invalid-form-popup'); michael@0: ok(gInvalidFormPopup, michael@0: "The browser should have a popup to show when a form is invalid"); michael@0: michael@0: function checkPopupShow() michael@0: { michael@0: ok(gInvalidFormPopup.state == 'showing' || gInvalidFormPopup.state == 'open', michael@0: "[Test " + testId + "] The invalid form popup should be shown"); michael@0: } michael@0: michael@0: function checkPopupHide() michael@0: { michael@0: ok(gInvalidFormPopup.state != 'showing' && gInvalidFormPopup.state != 'open', michael@0: "[Test " + testId + "] The invalid form popup should not be shown"); michael@0: } michael@0: michael@0: function checkPopupMessage(doc) michael@0: { michael@0: is(gInvalidFormPopup.firstChild.textContent, michael@0: doc.getElementById('i').validationMessage, michael@0: "[Test " + testId + "] The panel should show the message from validationMessage"); michael@0: } michael@0: michael@0: let gObserver = { michael@0: QueryInterface : XPCOMUtils.generateQI([Ci.nsIFormSubmitObserver]), michael@0: michael@0: notifyInvalidSubmit : function (aFormElement, aInvalidElements) michael@0: { michael@0: } michael@0: }; michael@0: michael@0: var testId = -1; michael@0: michael@0: function nextTest() michael@0: { michael@0: testId++; michael@0: if (testId >= tests.length) { michael@0: finish(); michael@0: return; michael@0: } michael@0: executeSoon(tests[testId]); michael@0: } michael@0: michael@0: function test() michael@0: { michael@0: waitForExplicitFinish(); michael@0: waitForFocus(nextTest); michael@0: } michael@0: michael@0: var tests = [ michael@0: michael@0: /** michael@0: * In this test, we check that no popup appears if the form is valid. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: let doc = gBrowser.contentDocument; michael@0: michael@0: doc.getElementById('s').click(); michael@0: michael@0: executeSoon(function() { michael@0: checkPopupHide(); michael@0: michael@0: // Clean-up michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that, when an invalid form is submitted, michael@0: * the invalid element is focused and a popup appears. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gInvalidFormPopup.addEventListener("popupshown", function() { michael@0: gInvalidFormPopup.removeEventListener("popupshown", arguments.callee, false); michael@0: michael@0: let doc = gBrowser.contentDocument; michael@0: is(doc.activeElement, doc.getElementById('i'), michael@0: "First invalid element should be focused"); michael@0: michael@0: checkPopupShow(); michael@0: checkPopupMessage(doc); michael@0: michael@0: // Clean-up and next test. michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }, false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: gBrowser.contentDocument.getElementById('s').click(); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that, when an invalid form is submitted, michael@0: * the first invalid element is focused and a popup appears. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gInvalidFormPopup.addEventListener("popupshown", function() { michael@0: gInvalidFormPopup.removeEventListener("popupshown", arguments.callee, false); michael@0: michael@0: let doc = gBrowser.contentDocument; michael@0: is(doc.activeElement, doc.getElementById('i'), michael@0: "First invalid element should be focused"); michael@0: michael@0: checkPopupShow(); michael@0: checkPopupMessage(doc); michael@0: michael@0: // Clean-up and next test. michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }, false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: gBrowser.contentDocument.getElementById('s').click(); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that, we hide the popup by interacting with the michael@0: * invalid element if the element becomes valid. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gInvalidFormPopup.addEventListener("popupshown", function() { michael@0: gInvalidFormPopup.removeEventListener("popupshown", arguments.callee, false); michael@0: michael@0: let doc = gBrowser.contentDocument; michael@0: is(doc.activeElement, doc.getElementById('i'), michael@0: "First invalid element should be focused"); michael@0: michael@0: checkPopupShow(); michael@0: checkPopupMessage(doc); michael@0: michael@0: EventUtils.synthesizeKey("a", {}); michael@0: michael@0: executeSoon(function () { michael@0: checkPopupHide(); michael@0: michael@0: // Clean-up and next test. michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }); michael@0: }, false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: gBrowser.contentDocument.getElementById('s').click(); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that, we don't hide the popup by interacting with the michael@0: * invalid element if the element is still invalid. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gInvalidFormPopup.addEventListener("popupshown", function() { michael@0: gInvalidFormPopup.removeEventListener("popupshown", arguments.callee, false); michael@0: michael@0: let doc = gBrowser.contentDocument; michael@0: is(doc.activeElement, doc.getElementById('i'), michael@0: "First invalid element should be focused"); michael@0: michael@0: checkPopupShow(); michael@0: checkPopupMessage(doc); michael@0: michael@0: EventUtils.synthesizeKey("a", {}); michael@0: michael@0: executeSoon(function () { michael@0: checkPopupShow(); michael@0: michael@0: // Clean-up and next test. michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }); michael@0: }, false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: gBrowser.contentDocument.getElementById('s').click(); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that we can hide the popup by blurring the invalid michael@0: * element. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gInvalidFormPopup.addEventListener("popupshown", function() { michael@0: gInvalidFormPopup.removeEventListener("popupshown", arguments.callee, false); michael@0: michael@0: let doc = gBrowser.contentDocument; michael@0: is(doc.activeElement, doc.getElementById('i'), michael@0: "First invalid element should be focused"); michael@0: michael@0: checkPopupShow(); michael@0: checkPopupMessage(doc); michael@0: michael@0: doc.getElementById('i').blur(); michael@0: michael@0: executeSoon(function () { michael@0: checkPopupHide(); michael@0: michael@0: // Clean-up and next test. michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }); michael@0: }, false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: gBrowser.contentDocument.getElementById('s').click(); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that we can hide the popup by pressing TAB. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gInvalidFormPopup.addEventListener("popupshown", function() { michael@0: gInvalidFormPopup.removeEventListener("popupshown", arguments.callee, false); michael@0: michael@0: let doc = gBrowser.contentDocument; michael@0: is(doc.activeElement, doc.getElementById('i'), michael@0: "First invalid element should be focused"); michael@0: michael@0: checkPopupShow(); michael@0: checkPopupMessage(doc); michael@0: michael@0: EventUtils.synthesizeKey("VK_TAB", {}); michael@0: michael@0: executeSoon(function () { michael@0: checkPopupHide(); michael@0: michael@0: // Clean-up and next test. michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }); michael@0: }, false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: gBrowser.contentDocument.getElementById('s').click(); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that the popup will hide if we move to another tab. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gInvalidFormPopup.addEventListener("popupshown", function() { michael@0: gInvalidFormPopup.removeEventListener("popupshown", arguments.callee, false); michael@0: michael@0: let doc = gBrowser.contentDocument; michael@0: is(doc.activeElement, doc.getElementById('i'), michael@0: "First invalid element should be focused"); michael@0: michael@0: checkPopupShow(); michael@0: checkPopupMessage(doc); michael@0: michael@0: // Create a new tab and move to it. michael@0: gBrowser.selectedTab = gBrowser.addTab("about:blank", {skipAnimation: true}); michael@0: michael@0: executeSoon(function() { michael@0: checkPopupHide(); michael@0: michael@0: // Clean-up and next test. michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }); michael@0: }, false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: gBrowser.contentDocument.getElementById('s').click(); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that nothing happen (no focus nor popup) if the michael@0: * invalid form is submitted in another tab than the current focused one michael@0: * (submitted in background). michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gObserver.notifyInvalidSubmit = function() { michael@0: executeSoon(function() { michael@0: let doc = tab.linkedBrowser.contentDocument; michael@0: isnot(doc.activeElement, doc.getElementById('i'), michael@0: "We should not focus the invalid element when the form is submitted in background"); michael@0: michael@0: checkPopupHide(); michael@0: michael@0: // Clean-up michael@0: Services.obs.removeObserver(gObserver, "invalidformsubmit"); michael@0: gObserver.notifyInvalidSubmit = function () {}; michael@0: gBrowser.removeTab(tab); michael@0: michael@0: nextTest(); michael@0: }); michael@0: }; michael@0: michael@0: Services.obs.addObserver(gObserver, "invalidformsubmit", false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(e) { michael@0: // Ignore load events from the iframe. michael@0: if (tab.linkedBrowser.contentDocument == e.target) { michael@0: let browser = e.currentTarget; michael@0: browser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: isnot(gBrowser.selectedTab.linkedBrowser, browser, michael@0: "This tab should have been loaded in background"); michael@0: browser.contentDocument.getElementById('s').click(); michael@0: } michael@0: }, true); michael@0: michael@0: tab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that the author defined error message is shown. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gInvalidFormPopup.addEventListener("popupshown", function() { michael@0: gInvalidFormPopup.removeEventListener("popupshown", arguments.callee, false); michael@0: michael@0: let doc = gBrowser.contentDocument; michael@0: is(doc.activeElement, doc.getElementById('i'), michael@0: "First invalid element should be focused"); michael@0: michael@0: checkPopupShow(); michael@0: michael@0: is(gInvalidFormPopup.firstChild.textContent, "foo", michael@0: "The panel should show the author defined error message"); michael@0: michael@0: // Clean-up and next test. michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }, false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: gBrowser.contentDocument.getElementById('s').click(); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: /** michael@0: * In this test, we check that the message is correctly updated when it changes. michael@0: */ michael@0: function() michael@0: { michael@0: let uri = "data:text/html,"; michael@0: let tab = gBrowser.addTab(); michael@0: michael@0: gInvalidFormPopup.addEventListener("popupshown", function() { michael@0: gInvalidFormPopup.removeEventListener("popupshown", arguments.callee, false); michael@0: michael@0: let doc = gBrowser.contentDocument; michael@0: let input = doc.getElementById('i'); michael@0: is(doc.activeElement, input, "First invalid element should be focused"); michael@0: michael@0: checkPopupShow(); michael@0: michael@0: is(gInvalidFormPopup.firstChild.textContent, input.validationMessage, michael@0: "The panel should show the current validation message"); michael@0: michael@0: input.addEventListener('input', function() { michael@0: input.removeEventListener('input', arguments.callee, false); michael@0: michael@0: executeSoon(function() { michael@0: // Now, the element suffers from another error, the message should have michael@0: // been updated. michael@0: is(gInvalidFormPopup.firstChild.textContent, input.validationMessage, michael@0: "The panel should show the current validation message"); michael@0: michael@0: // Clean-up and next test. michael@0: gBrowser.removeTab(gBrowser.selectedTab); michael@0: nextTest(); michael@0: }); michael@0: }, false); michael@0: michael@0: EventUtils.synthesizeKey('f', {}); michael@0: }, false); michael@0: michael@0: tab.linkedBrowser.addEventListener("load", function(aEvent) { michael@0: tab.linkedBrowser.removeEventListener("load", arguments.callee, true); michael@0: michael@0: gBrowser.contentDocument.getElementById('s').click(); michael@0: }, true); michael@0: michael@0: gBrowser.selectedTab = tab; michael@0: gBrowser.selectedTab.linkedBrowser.loadURI(uri); michael@0: }, michael@0: michael@0: ];