test_popupReflowPos.xhtml (2961B)
1 <?xml version="1.0"?> 2 <?xml-stylesheet href="chrome://global/skin" type="text/css"?> 3 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?> 4 <window title="XUL Panel reflow placement test" 5 xmlns:html="http://www.w3.org/1999/xhtml" 6 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 7 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/> 8 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/> 9 10 <body xmlns="http://www.w3.org/1999/xhtml"> 11 </body> 12 13 <script><![CDATA[ 14 SimpleTest.waitForExplicitFinish(); 15 16 function openPopup() 17 { 18 synthesizeMouseAtCenter(document.getElementById("thebutton"), {}, window); 19 } 20 21 async function popupShown(event) 22 { 23 document.getElementById("parent").className = ""; 24 var popup = document.getElementById("thepopup"); 25 26 var buttonbcr = document.getElementById("thebutton").getBoundingClientRect(); 27 28 await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r))); 29 30 var popupbcr = popup.getOuterScreenRect(); 31 var popupMarginLeft = parseFloat(getComputedStyle(popup).marginLeft); 32 var popupMarginTop = parseFloat(getComputedStyle(popup).marginTop); 33 34 info(`button: ${buttonbcr.width}x${buttonbcr.height} @ (${buttonbcr.x}, ${buttonbcr.y}) screen (${buttonbcr.x + window.mozInnerScreenX}, ${buttonbcr.y + window.mozInnerScreenY})`); 35 info(`popup: ${popupbcr.width}x${popupbcr.height} @ (${popupbcr.x}, ${popupbcr.y})`); 36 37 ok(Math.abs(popupbcr.x - popupMarginLeft - window.mozInnerScreenX - buttonbcr.x) < 3, "x pos is correct"); 38 ok(Math.abs(popupbcr.y - popupMarginTop - window.mozInnerScreenY - buttonbcr.bottom) < 3, "y pos is correct"); 39 40 event.target.hidePopup(); 41 } 42 43 SimpleTest.waitForFocus(openPopup); 44 ]]></script> 45 46 <html:style> 47 .mbox { 48 display: inline-block; 49 width: 33%; 50 height: 50px; 51 background: green; 52 vertical-align: middle; 53 } 54 .orange { 55 background: orange; 56 } 57 .change > .mbox { 58 width: 60px; 59 } 60 </html:style> 61 62 <html:div style="width: 300px; height: 200px;"> 63 <html:div id="parent" class="change" style="background: red; border: 1px solid black; width: 300px; height: 200px;"> 64 <html:div class="mbox"></html:div> 65 <html:div class="mbox"></html:div> 66 <html:div class="mbox"></html:div> 67 <html:div class="mbox orange"> 68 69 <button label="Show" type="menu" id="thebutton"> 70 <menupopup id="thepopup" onpopupshown="popupShown(event)" onpopuphidden="SimpleTest.finish()"> 71 <menuitem label="New"/> 72 <menuitem label="Open"/> 73 <menuitem label="Save"/> 74 <menuseparator/> 75 <menuitem label="Exit"/> 76 </menupopup> 77 </button> 78 79 </html:div> 80 </html:div> 81 </html:div> 82 83 </window>