<!DOCTYPE HTML> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=962251 --> <head> <meta charset="utf-8"> <title>Test for Bug 962251</title> <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> <script type="application/javascript"> SimpleTest.waitForExplicitFinish(); function Test_ElementsInTheSameDocument() { var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); button1.focus(); is(button1.id, document.activeElement.id, "How did we call focus on button1 and it did" + " not become the active element?"); var getBlurEvent = false; button1.addEventListener("blur", function onBlur(aEvent) { button1.removeEventListener("blur", onBlur); is(aEvent.target.id, "button1", "Button1 should lose focus."); ok(aEvent.relatedTarget, "The relatedTarget should not be null."); is(aEvent.relatedTarget.id, "button2", "The relatedTarget should be button2."); getBlurEvent = true; }); button2.addEventListener("focus", function onFocus(aEvent) { button2.removeEventListener("focus", onFocus); ok(getBlurEvent, "Must get blur event first."); is(aEvent.target.id, "button2", "Button2 should be focused."); ok(aEvent.relatedTarget, "The relatedTarget should not be null."); is(aEvent.relatedTarget.id, "button1", "The relatedTarget should be button1."); button2.blur(); }); button2.addEventListener("blur", function onBlur(aEvent) { button2.removeEventListener("blur", onBlur); is(aEvent.target.id, "button2", "Button2 should lose focus."); ok(aEvent.relatedTarget === null, "The relatedTarget should be null."); runTests(); }); button2.focus(); } function Test_ElementsInDifferentDocument() { var button2 = document.getElementById("button2"); button2.focus(); button2.addEventListener("blur", function onBlur(aEvent) { button2.removeEventListener("blur", onBlur); is(aEvent.target.id, "button2", "Button2 should lose focus."); ok(aEvent.relatedTarget === null, "The relatedTarget should be null, since it's in another document."); }); var iframe = document.createElement("iframe"); iframe.id = "iframe"; iframe.src = "iframe_bug962251.html"; window.addEventListener("message", function onMessage(aEvent) { window.removeEventListener("message", onMessage); if (aEvent.data == "runNextTest") { runTests(); } }); document.getElementById("content").appendChild(iframe); } function Test_FocusEventOnWindow() { var iframe1 = document.createElement("iframe"); iframe1.id = "iframe1"; iframe1.src = "about:blank"; document.getElementById("content").appendChild(iframe1); document.getElementById("button2").focus(); var iframe = document.getElementById("iframe"); var expectedEventTarget = [iframe.contentDocument, iframe.contentWindow]; var expectedEventTarget1 = [iframe1.contentDocument, iframe1.contentWindow]; iframe.contentWindow.addEventListener("focus", function onFocus(aEvent) { var eventTarget = expectedEventTarget.shift(); ok(aEvent.target === eventTarget, "Get expected focus event target."); ok(aEvent.relatedTarget === null, "relatedTarget should be null."); if (!expectedEventTarget.length) { iframe.contentWindow.removeEventListener("focus", onFocus, true); runTests(); } }, true); iframe1.contentWindow.addEventListener("focus", function onFocus(aEvent) { var eventTarget = expectedEventTarget1.shift(); ok(aEvent.target === eventTarget, "Get expected focus event target."); ok(aEvent.relatedTarget === null, "relatedTarget should be null."); if (!expectedEventTarget1.length) { iframe1.contentWindow.removeEventListener("focus", onFocus, true); // Append items for blur event listener expectedEventTarget1.push(iframe1.contentDocument); expectedEventTarget1.push(iframe1.contentWindow); iframe.contentWindow.focus(); } }, true); iframe1.contentWindow.addEventListener("blur", function onBlur(aEvent) { var eventTarget = expectedEventTarget1.shift(); ok(aEvent.target === eventTarget, "Get expected blur event target."); ok(aEvent.relatedTarget === null, "relatedTarget should be null."); if (!expectedEventTarget1.length) { iframe1.contentWindow.removeEventListener("blur", onBlur, true); } }, true); iframe1.contentWindow.focus(); } function Test_SetFocusInBlurEvent() { var button1 = document.getElementById("button1"); var button2 = document.getElementById("button2"); var button3 = document.getElementById("button3"); button1.focus(); is(button1.id, document.activeElement.id, "document.activeElement.id is button1"); button1.addEventListener("blur", function onBlur(aEvent) { button1.removeEventListener("blur", onBlur); info("button1 blur"); is(aEvent.relatedTarget.id, button2.id, "relatedTarget.id should be button2."); button3.focus(); }); button1.addEventListener("focus", function onFocus(aEvent) { button1.removeEventListener("focus", onFocus); info("button1 focus"); }); button2.addEventListener("blur", function onBlur(aEvent) { button2.removeEventListener("blur", onBlur); info("button2 blur"); }); button2.addEventListener("focus", function onFocus(aEvent) { button2.removeEventListener("focus", onFocus); info("button2 focus"); }); button3.addEventListener("blur", function onBlur(aEvent) { button3.removeEventListener("blur", onBlur); info("button3 blur"); }); button3.addEventListener("focus", function onFocus(aEvent) { button3.removeEventListener("focus", onFocus); info("button3 focus"); ok(aEvent.relatedTarget === null, "aEvent.relatedTarget is null."); runTests(); }); button2.focus(); } function Test_ListenFocusBlurEventOnWindow1() { var button2 = document.getElementById("button2"); button2.focus(); var iframe = document.getElementById("iframe"); var input = iframe.contentDocument.getElementById("textinput"); var expectedEventTarget = [button2, document, window]; var expectedEventTarget1 = [iframe.contentDocument, iframe.contentWindow, input]; window.addEventListener("blur", function onBlur(aEvent) { var item = expectedEventTarget.shift(); ok(aEvent.target === item, "Get an expected blur event."); ok(aEvent.relatedTarget === null, "relatedTarget should be null."); if (!expectedEventTarget.length) { iframe.contentWindow.removeEventListener("blur", onBlur, true); } }, true); iframe.contentWindow.addEventListener("focus", function onFocus(aEvent) { var item = expectedEventTarget1.shift(); ok(aEvent.target === item, "Get an expected focus event."); ok(aEvent.relatedTarget === null, "relatedTarget should be null."); if (!expectedEventTarget1.length) { iframe.contentWindow.removeEventListener("focus", onFocus, true); runTests(); } }, true); input.focus(); } function Test_ListenFocusBlurEventOnWindow2() { var iframe = document.getElementById("iframe"); var input = iframe.contentDocument.getElementById("textinput"); var input1 = iframe.contentDocument.getElementById("textinput1"); ok(iframe.contentDocument.activeElement === input, "Current focused element should be input."); iframe.contentWindow.addEventListener("focus", function onFocus(aEvent) { iframe.contentWindow.removeEventListener("focus", onFocus, true); ok(aEvent.target === input1, "Input1 is focused."); ok(aEvent.relatedTarget === input, "relatedTarget should be input."); runTests(); }, true); iframe.contentWindow.addEventListener("blur", function onBlur(aEvent) { iframe.contentWindow.removeEventListener("blur", onBlur, true); ok(aEvent.target === input, "Input is not focused."); ok(aEvent.relatedTarget === input1, "relatedTarget should be input1."); }, true); input1.focus(); } function Test_ListenFocusBlurEventOnWindow3() { var iframe = document.getElementById("iframe"); var input1 = iframe.contentDocument.getElementById("textinput1"); ok(iframe.contentDocument.activeElement === input1, "Current focused element should be input1."); iframe.contentWindow.addEventListener("blur", function onBlur(aEvent) { iframe.contentWindow.removeEventListener("blur", onBlur, true); ok(aEvent.target === input1, "Input1 is not focused."); ok(aEvent.relatedTarget === null, "relatedTarget should be null."); runTests(); }, true); input1.blur(); } var tests = [ Test_ElementsInTheSameDocument, Test_ElementsInDifferentDocument, Test_FocusEventOnWindow, Test_SetFocusInBlurEvent, Test_ListenFocusBlurEventOnWindow1, Test_ListenFocusBlurEventOnWindow2, Test_ListenFocusBlurEventOnWindow3 ]; function runTests() { if (!tests.length) { SimpleTest.finish(); return; } var test = tests.shift(); window.setTimeout(function () { test(); }); } </script> </head> <body onload="runTests();"> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=962251">Mozilla Bug 962251</a> <p id="display"></p> <div id="content"> <button id="button1">1</button> <button id="button2">2</button> <button id="button3">3</button> </div> <pre id="test"> </pre> </body> </html>