<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?> <window title="Popup in Content Positioning Tests" onload="setTimeout(nextTest, 0);" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> <!-- This test checks that popups in content areas don't extend past the content area. --> <hbox> <spacer width="100"/> <menu id="menu" label="Menu"> <menupopup style="margin:10px;" id="popup" onpopupshown="popupShown()" onpopuphidden="nextTest()"> <menuitem label="One"/> <menuitem label="Two"/> <menuitem label="Three"/> <menuitem label="A final longer label that is actually quite long. Very long indeed."/> </menupopup> </menu> </hbox> <script class="testbody" type="application/javascript"> <![CDATA[ SimpleTest.waitForExplicitFinish(); var step = ""; var originalHeight = -1; function nextTest() { // there are five tests here: // openPopupAtScreen - checks that opening a popup using openPopupAtScreen // constrains the popup to the content area // left and top - check with the left and top attributes set // open near bottom - open the menu near the bottom of the window // large menu - try with a menu that is very large and should be scaled // shorter menu again - try with a menu that is shorter again. It should have // the same height as the 'left and top' test var popup = $("popup"); var menu = $("menu"); switch (step) { case "": step = "openPopupAtScreen"; popup.openPopupAtScreen(1000, 1200); break; case "openPopupAtScreen": step = "left and top"; popup.setAttribute("left", "800"); popup.setAttribute("top", "2900"); synthesizeMouse(menu, 2, 2, { }); break; case "left and top": step = "open near bottom"; // request that the menu be opened with a target point near the bottom of the window, // so that the menu's top margin will push it completely outside the window. var bo = document.documentElement.boxObject; popup.setAttribute("top", bo.screenY + window.innerHeight - 5); synthesizeMouse(menu, 2, 2, { }); break; case "open near bottom": step = "large menu"; popup.removeAttribute("left"); popup.removeAttribute("top"); for (var i = 0; i < 80; i++) menu.appendItem("Test", ""); synthesizeMouse(menu, 2, 2, { }); break; case "large menu": step = "shorter menu again"; for (var i = 0; i < 80; i++) menu.removeItemAt(menu.itemCount - 1); synthesizeMouse(menu, 2, 2, { }); break; case "shorter menu again": SimpleTest.finish(); break; } } function popupShown() { var windowrect = document.documentElement.getBoundingClientRect(); var popuprect = $("popup").getBoundingClientRect(); // subtract one off the edge due to a rounding issue ok(popuprect.left >= windowrect.left, step + " left"); ok(popuprect.right - 1 <= windowrect.right, step + " right"); if (step == "left and top") { originalHeight = popuprect.bottom - popuprect.top; } else if (step == "open near bottom") { // check that the menu flipped up so it's above our requested point ok(popuprect.bottom - 1 <= windowrect.bottom - 5, step + " bottom"); } else if (step == "large menu") { // add 10 to account for the margin is(popuprect.top, $("menu").getBoundingClientRect().bottom + 10, step + " top"); ok(popuprect.bottom == windowrect.bottom || popuprect.bottom - 1 == windowrect.bottom, step + " bottom"); } else { ok(popuprect.top >= windowrect.top, step + " top"); ok(popuprect.bottom - 1 <= windowrect.bottom, step + " bottom"); if (step == "shorter menu again") is(popuprect.bottom - popuprect.top, originalHeight, step + " height shortened"); } $("menu").open = false; } ]]> </script> <body xmlns="http://www.w3.org/1999/xhtml"> <p id="display"> </p> <div id="content" style="display: none"> </div> <pre id="test"> </pre> </body> </window>