<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <?xml-stylesheet href="/tests/SimpleTest/test.css" type="text/css"?> <window title="Arrow Panels" style="padding: 10px;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/> <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/> <stack flex="1"> <label id="topleft" value="Top Left Corner" left="15" top="15"/> <label id="topright" value="Top Right" right="15" top="15"/> <label id="bottomleft" value="Bottom Left Corner" left="15" bottom="15"/> <label id="bottomright" value="Bottom Right" right="15" bottom="15"/> <!-- Our SimpleTest/TestRunner.js runs tests inside an iframe which sizes are W=500 H=300. 'left' and 'top' values need to be set so that the panel (popup) has enough room to display on its 4 sides. --> <label id="middle" value="+/- Centered" left="225" top="135"/> <iframe id="frame" type="content" src="data:text/html,<input id='input'>" width="100" height="100" left="225" top="120"/> </stack> <panel id="panel" type="arrow" animate="false" onpopupshown="checkPanelPosition(this)" onpopuphidden="runNextTest.next()"> <box width="115" height="65"/> </panel> <panel id="bigpanel" type="arrow" animate="false" onpopupshown="checkBigPanel(this)" onpopuphidden="runNextTest.next()"> <box width="125" height="3000"/> </panel> <panel id="animatepanel" type="arrow" onpopupshown="animatedPopupShown = true;" onpopuphidden="animatedPopupHidden = true; runNextTest.next();"> <label value="Animate Closed" height="40"/> </panel> <script type="application/javascript"> <![CDATA[ SimpleTest.waitForExplicitFinish(); const isOSXYosemite = navigator.userAgent.indexOf("Mac OS X 10.10") != -1; var expectedAnchor = null; var expectedSide = "", expectedAnchorEdge = "", expectedPack = "", expectedAlignment = ""; var zoomFactor = 1; var animatedPopupShown = false; var animatedPopupHidden = false; var runNextTest; function startTest() { runNextTest = nextTest(); runNextTest.next(); } function nextTest() { var panel = $("panel"); function openPopup(position, anchor, expected, anchorEdge, pack, alignment) { expectedAnchor = anchor instanceof Node ? anchor : $(anchor); expectedSide = expected; expectedAnchorEdge = anchorEdge; expectedPack = pack; expectedAlignment = alignment == undefined ? position : alignment; panel.removeAttribute("side"); panel.openPopup(expectedAnchor, position, 0, 0, false, false, null); } for (var iter = 0; iter < 2; iter++) { openPopup("after_start", "topleft", "top", "left", "start"); yield; openPopup("after_start", "bottomleft", "bottom", "left", "start", "before_start"); yield; openPopup("before_start", "topleft", "top", "left", "start", "after_start"); yield; openPopup("before_start", "bottomleft", "bottom", "left", "start"); yield; openPopup("after_start", "middle", "top", "left", "start"); yield; openPopup("before_start", "middle", "bottom", "left", "start"); yield; openPopup("after_start", "topright", "top", "right", "end", "after_end"); yield; openPopup("after_start", "bottomright", "bottom", "right", "end", "before_end"); yield; openPopup("before_start", "topright", "top", "right", "end", "after_end"); yield; openPopup("before_start", "bottomright", "bottom", "right", "end", "before_end"); yield; openPopup("after_end", "middle", "top", "right", "end"); yield; openPopup("before_end", "middle", "bottom", "right", "end"); yield; openPopup("start_before", "topleft", "left", "top", "start", "end_before"); yield; openPopup("start_before", "topright", "right", "top", "start"); yield; openPopup("end_before", "topleft", "left", "top", "start"); yield; openPopup("end_before", "topright", "right", "top", "start", "start_before"); yield; openPopup("start_before", "middle", "right", "top", "start"); yield; openPopup("end_before", "middle", "left", "top", "start"); yield; openPopup("start_before", "bottomleft", "left", "bottom", "end", "end_after"); yield; openPopup("start_before", "bottomright", "right", "bottom", "end", "start_after"); yield; openPopup("end_before", "bottomleft", "left", "bottom", "end", "end_after"); yield; openPopup("end_before", "bottomright", "right", "bottom", "end", "start_after"); yield; openPopup("start_after", "middle", "right", "bottom", "end"); yield; openPopup("end_after", "middle", "left", "bottom", "end"); yield; openPopup("topcenter bottomleft", "bottomleft", "bottom", "center left", "start", "before_start"); yield; openPopup("bottomcenter topleft", "topleft", "top", "center left", "start", "after_start"); yield; openPopup("topcenter bottomright", "bottomright", "bottom", "center right", "end", "before_end"); yield; openPopup("bottomcenter topright", "topright", "top", "center right", "end", "after_end"); yield; openPopup("topcenter bottomleft", "middle", "bottom", "center left", "start", "before_start"); yield; openPopup("bottomcenter topleft", "middle", "top", "center left", "start", "after_start"); yield; openPopup("leftcenter topright", "middle", "right", "center top", "start", "start_before"); yield; openPopup("rightcenter bottomleft", "middle", "left", "center bottom", "end", "end_after"); yield; /* XXXndeakin disable these parts of the test which often cause problems, see bug 626563 openPopup("after_start", frames[0].document.getElementById("input"), "top", "left", "start"); yield; setScale(frames[0], 1.5); openPopup("after_start", frames[0].document.getElementById("input"), "top", "left", "start"); yield; setScale(frames[0], 2.5); openPopup("before_start", frames[0].document.getElementById("input"), "bottom", "left", "start"); yield; setScale(frames[0], 1); */ $("bigpanel").openPopup($("topleft"), "after_start", 0, 0, false, false, null, "start"); yield; // switch to rtl mode document.documentElement.style.direction = "rtl"; $("topleft").setAttribute("right", "15"); $("topright").setAttribute("left", "15"); $("bottomleft").setAttribute("right", "15"); $("bottomright").setAttribute("left", "15"); $("topleft").removeAttribute("left"); $("topright").removeAttribute("right"); $("bottomleft").removeAttribute("left"); $("bottomright").removeAttribute("right"); } // Test that a transition occurs when opening or closing the popup. The transition is // disabled on Linux. if (navigator.platform.indexOf("Linux") == -1) { function transitionEnded(event) { if ($("animatepanel").state != "open") { is($("animatepanel").state, "showing", "state is showing during transitionend"); ok(!animatedPopupShown, "popupshown not fired yet") } else { is($("animatepanel").state, "open", "state is open after transitionend"); ok(animatedPopupShown, "popupshown now fired") SimpleTest.executeSoon(() => runNextTest.next()); } } // Check that the transition occurs for an arrow panel with animate="true" window.addEventListener("transitionend", transitionEnded, false); $("animatepanel").openPopup($("topleft"), "after_start", 0, 0, false, false, null, "start"); is($("animatepanel").state, "showing", "state is showing"); yield; window.removeEventListener("transitionend", transitionEnded, false); synthesizeKey("VK_ESCAPE", { }); ok(!animatedPopupHidden, "animated popup not hidden yet"); yield; } SimpleTest.finish() yield; } function setScale(win, scale) { var wn = win.QueryInterface(Components.interfaces.nsIInterfaceRequestor) .getInterface(Components.interfaces.nsIWebNavigation); var shell = wn.QueryInterface(Components.interfaces.nsIDocShell); var docViewer = shell.contentViewer; docViewer.fullZoom = scale; zoomFactor = scale; } function checkPanelPosition(panel) { let anchor = panel.anchorNode; let adj = 0, hwinpos = 0, vwinpos = 0; if (anchor.ownerDocument != document) { var framerect = anchor.ownerDocument.defaultView.frameElement.getBoundingClientRect(); hwinpos = framerect.left; vwinpos = framerect.top; } // Positions are reversed in rtl yet the coordinates used in the computations // are not, so flip the expected label side and anchor edge. var isRTL = (window.getComputedStyle(panel).direction == "rtl"); if (isRTL) { var flipLeftRight = val => val == "left" ? "right" : "left"; expectedAnchorEdge = expectedAnchorEdge.replace(/(left|right)/, flipLeftRight); expectedSide = expectedSide.replace(/(left|right)/, flipLeftRight); } var panelRect = panel.getBoundingClientRect(); var anchorRect = anchor.getBoundingClientRect(); var contentBO = panel.firstChild.boxObject; var contentRect = { top: contentBO.y, left: contentBO.x, bottom: contentBO.y + contentBO.height, right: contentBO.x + contentBO.width }; switch (expectedSide) { case "top": ok(contentRect.top > vwinpos + anchorRect.bottom * zoomFactor + 5, "panel content is below"); break; case "bottom": ok(contentRect.bottom < vwinpos + anchorRect.top * zoomFactor - 5, "panel content is above"); break; case "left": ok(contentRect.left > hwinpos + anchorRect.right * zoomFactor + 5, "panel content is right"); break; case "right": ok(contentRect.right < hwinpos + anchorRect.left * zoomFactor - 5, "panel content is left"); break; } let iscentered = false; if (expectedAnchorEdge.indexOf("center ") == 0) { expectedAnchorEdge = expectedAnchorEdge.substring(7); iscentered = true; } switch (expectedAnchorEdge) { case "top": adj = vwinpos + parseInt(getComputedStyle(panel, "").marginTop); if (iscentered) adj += Math.round(anchorRect.height) / 2; isWithinHalfPixel(panelRect.top, anchorRect.top * zoomFactor + adj, "anchored on top"); break; case "bottom": adj = vwinpos + parseInt(getComputedStyle(panel, "").marginBottom); if (iscentered) adj += Math.round(anchorRect.height) / 2; isWithinHalfPixel(panelRect.bottom, anchorRect.bottom * zoomFactor - adj, "anchored on bottom"); break; case "left": adj = hwinpos + parseInt(getComputedStyle(panel, "").marginLeft); if (iscentered) adj += Math.round(anchorRect.width) / 2; isWithinHalfPixel(panelRect.left, anchorRect.left * zoomFactor + adj, "anchored on left "); break; case "right": adj = hwinpos + parseInt(getComputedStyle(panel, "").marginRight); if (iscentered) adj += Math.round(anchorRect.width) / 2; if (!isOSXYosemite) isWithinHalfPixel(panelRect.right, anchorRect.right * zoomFactor - adj, "anchored on right"); break; } is(anchor, expectedAnchor, "anchor"); var arrow = document.getAnonymousElementByAttribute(panel, "anonid", "arrow"); is(arrow.getAttribute("side"), expectedSide, "panel arrow side"); is(arrow.hidden, false, "panel hidden"); is(arrow.parentNode.pack, expectedPack, "panel arrow pack"); is(panel.alignmentPosition, expectedAlignment, "panel alignmentPosition"); panel.hidePopup(); } function isWithinHalfPixel(a, b, desc) { ok(Math.abs(a - b) <= 0.5, desc); } function checkBigPanel(panel) { ok(panel.firstChild.getBoundingClientRect().height < 2800, "big panel height"); panel.hidePopup(); } SimpleTest.waitForFocus(startTest); ]]> </script> <body xmlns="http://www.w3.org/1999/xhtml"/> </window>