1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/tests/mochitest/general/test_focusrings.xul Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,186 @@
1.4 +<?xml version="1.0"?>
1.5 +<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
1.6 +<?xml-stylesheet href="/tests/SimpleTest/test.css" type="text/css"?>
1.7 +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
1.8 +
1.9 +<script type="application/javascript"
1.10 + src="/tests/SimpleTest/SimpleTest.js"></script>
1.11 +<script type="application/javascript"
1.12 + src="/tests/SimpleTest/EventUtils.js"></script>
1.13 +<script type="application/javascript"
1.14 + src="/tests/SimpleTest/WindowSnapshot.js"></script>
1.15 +
1.16 +<html:style xmlns:html="http://www.w3.org/1999/xhtml" type="text/css">
1.17 +* { outline: none; }
1.18 +#l1:-moz-focusring, #l3:-moz-focusring, #b1:-moz-focusring { outline: 2px solid red; }
1.19 +#l2:focus, #b2:focus { outline: 2px solid red; }
1.20 +</html:style>
1.21 +
1.22 +<script>
1.23 +<![CDATA[
1.24 +
1.25 +SimpleTest.waitForExplicitFinish();
1.26 +
1.27 +function setOrRestoreTabFocus(newValue) {
1.28 + const prefSvcContractID = "@mozilla.org/preferences-service;1";
1.29 + const prefSvcIID = SpecialPowers.Ci.nsIPrefService;
1.30 + var prefs = SpecialPowers.Cc[prefSvcContractID].getService(prefSvcIID)
1.31 + .getBranch("accessibility.");
1.32 + if (!newValue) {
1.33 + if (prefs.prefHasUserValue("tabfocus")) {
1.34 + prefs.clearUserPref("tabfocus");
1.35 + }
1.36 + } else {
1.37 + prefs.setIntPref("tabfocus", newValue);
1.38 + }
1.39 +}
1.40 +
1.41 +function snapShot(element) {
1.42 + var rect = element.getBoundingClientRect();
1.43 + adjustedRect = { left: rect.left - 6, top: rect.top - 6,
1.44 + width: rect.width + 12, height: rect.height + 12 }
1.45 + return SpecialPowers.snapshotRect(window, adjustedRect, "transparent");
1.46 +}
1.47 +
1.48 +function runTest()
1.49 +{
1.50 + setOrRestoreTabFocus(7);
1.51 +
1.52 + var isMac = (navigator.platform.indexOf("Mac") >= 0);
1.53 + var isWin = (navigator.platform.indexOf("Win") >= 0);
1.54 +
1.55 + function checkFocus(element, visible, testid)
1.56 + {
1.57 + var outline = getComputedStyle(element, "").outlineWidth;
1.58 + is(outline, visible ? "2px" : "0px", testid);
1.59 + }
1.60 +
1.61 + // make sure that a focus ring appears on the focused button
1.62 + if (navigator.platform.indexOf("Mac") >= 0) {
1.63 + var focusedButton = $("b3");
1.64 + ok(compareSnapshots(snapShot(focusedButton), snapShot($("b2")), true)[0], "unfocused shows no ring");
1.65 + focusedButton.focus();
1.66 + ok(compareSnapshots(snapShot(focusedButton), snapShot($("b2")), false)[0], "focus shows ring");
1.67 + }
1.68 +
1.69 + checkFocus($("l1"), false, "initial appearance");
1.70 +
1.71 + // we can't really test the situation on Windows where a dialog doesn't show
1.72 + // focus rings until a key is pressed, as the default state depends on what
1.73 + // kind of real user input, mouse or key, was last entered. But we can handle
1.74 + // the test regardless of which user input last occurred.
1.75 + $("l1").focus();
1.76 + var expectedVisible = (!isWin || getComputedStyle($("l1"), "").outlineWidth == "2px");
1.77 + testHTMLElements(htmlElements, isMac, isWin && !expectedVisible);
1.78 +
1.79 + if (isMac) {
1.80 + var prefs = SpecialPowers.Cc["@mozilla.org/preferences-service;1"].
1.81 + getService(SpecialPowers.Ci.nsIPrefBranch);
1.82 + prefs.setBoolPref("accessibility.mouse_focuses_formcontrol", true);
1.83 +
1.84 + testHTMLElements(htmlElementsMacPrefSet, true, false);
1.85 +
1.86 + prefs.setBoolPref("accessibility.mouse_focuses_formcontrol", false);
1.87 + }
1.88 +
1.89 + $("l1").focus();
1.90 + checkFocus($("l1"), expectedVisible, "appearance on list after focus() with :moz-focusring");
1.91 + $("l2").focus();
1.92 +
1.93 + checkFocus($("l2"), true, "appearance on list after focus() with :focus");
1.94 +
1.95 + is(getComputedStyle($("l1"), "").outlineWidth, "0px", "appearance on previous list after focus() with :focus");
1.96 +
1.97 + synthesizeMouse($("l1"), 4, 4, { });
1.98 + checkFocus($("l1"), expectedVisible, "appearance on list after mouse focus with :moz-focusring");
1.99 + synthesizeMouse($("l2"), 4, 4, { });
1.100 + checkFocus($("l2"), true, "appearance on list after mouse focus with :focus");
1.101 +
1.102 + synthesizeMouse($("b1"), 4, 4, { });
1.103 + checkFocus($("b1"), !isMac && expectedVisible, "appearance on button after mouse focus with :moz-focusring");
1.104 + if (navigator.platform.indexOf("Mac") >= 0) {
1.105 + ok(compareSnapshots(snapShot($("b1")), snapShot($("b2")), false)[0], "focus after mouse shows no ring");
1.106 + }
1.107 +
1.108 + synthesizeMouse($("b2"), 4, 4, { });
1.109 + checkFocus($("b2"), !isMac, "appearance on button after mouse focus with :focus");
1.110 +
1.111 + // after a key is pressed, the focus ring will always be visible
1.112 + $("l2").focus();
1.113 + synthesizeKey("VK_TAB", { });
1.114 + checkFocus($("l3"), true, "appearance on list after tab focus");
1.115 +
1.116 + setOrRestoreTabFocus(0);
1.117 + SimpleTest.finish();
1.118 +}
1.119 +
1.120 +var htmlElements = [
1.121 + "<button id='elem'>Button</button>",
1.122 + "<input id='elem' class='canfocus'>",
1.123 + "<input id='elem' type='password' class='canfocus'>",
1.124 + "<input id='elem' type='button'>",
1.125 + "<input id='elem' type='checkbox'>",
1.126 + "<textarea id='elem' class='canfocus'></textarea>",
1.127 + "<select id='elem' class='canfocus'><option>One</select>",
1.128 + "<select id='elem' rows='5' class='canfocus'><option>One</select>",
1.129 + "<div id='elem' tabindex='0' class='canfocus' style='width: 10px; height: 10px;'></div>",
1.130 + "<a href='about:blank' class='canfocus' onclick='return false;'>about:blank</a>",
1.131 +];
1.132 +
1.133 +var htmlElementsMacPrefSet = [
1.134 + "<button id='elem' class='canfocus'>Button</button>",
1.135 + "<input id='elem' class='canfocus'>",
1.136 + "<input id='elem' type='button' class='canfocus'>",
1.137 + "<input id='elem' type='checkbox' class='canfocus'>",
1.138 +];
1.139 +
1.140 +function testHTMLElements(list, isMac, expectedNoRingsOnWin)
1.141 +{
1.142 + var childwin = frames[0];
1.143 + var childdoc = childwin.document;
1.144 + var container = childdoc.getElementById("container");
1.145 + for (var e = 0; e < list.length; e++) {
1.146 + container.innerHTML = list[e];
1.147 +
1.148 + var elem = container.firstChild;
1.149 +
1.150 + var shouldFocus = !isMac || (elem.className == "canfocus");
1.151 + var ringSize = (shouldFocus ? (expectedNoRingsOnWin ? 2 : 1) : 0) + "px";
1.152 + if (elem.localName == "a")
1.153 + ringSize = "0px";
1.154 +
1.155 + synthesizeMouse(elem, 8, 8, { }, childwin);
1.156 + is(childdoc.activeElement, shouldFocus ? elem : childdoc.body, "mouse click on " + list[e]);
1.157 + is(childwin.getComputedStyle(elem, "").outlineWidth, ringSize, "mouse click on " + list[e] + " ring");
1.158 +
1.159 + if (childdoc.activeElement)
1.160 + childdoc.activeElement.blur();
1.161 +
1.162 + ringSize = (elem.localName == "a" ? "0" : (expectedNoRingsOnWin ? 2 : 1)) + "px";
1.163 +
1.164 + elem.focus();
1.165 + is(childdoc.activeElement, elem, "focus() on " + list[e]);
1.166 + is(childwin.getComputedStyle(elem, "").outlineWidth, ringSize,
1.167 + "focus() on " + list[e] + " ring");
1.168 +
1.169 + childdoc.activeElement.blur();
1.170 + }
1.171 +}
1.172 +
1.173 +SimpleTest.waitForFocus(runTest);
1.174 +
1.175 +]]>
1.176 +</script>
1.177 +
1.178 +<listbox id="l1" class="plain" height="20"/>
1.179 +<listbox id="l2" class="plain" height="20"/>
1.180 +<listbox id="l3" class="plain" height="20"/>
1.181 +<button id="b1" label="Button"/>
1.182 +<button id="b2" label="Button"/>
1.183 +<button id="b3" label="Button"/>
1.184 +
1.185 +<iframe id="child" src="data:text/html,<html><style>* { outline: none; -moz-appearance: none; } %23elem:focus { outline: 2px solid red; } %23elem:-moz-focusring { outline: 1px solid blue; }</style><div id='container'></html>"/>
1.186 +
1.187 +<body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>
1.188 +
1.189 +</window>
