test_popup_scaled.xhtml

Enable keyboard shortcuts

<?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="Popups in Scaled Content"

        onload="setTimeout(runTests, 0);"

        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

<!-- This test checks that the position is correct in two cases:

      - a popup anchored at an element in a scaled document

      - a popup opened at a screen coordinate in a scaled window

-->

<iframe id="frame" width="60" height="140"

        src="data:text/html,&lt;html&gt;&lt;body&gt;&lt;input size='4' id='one'&gt;&lt;input size='4' id='two'&gt;&lt;/body&gt;&lt;/html&gt;"/>

<menupopup id="popup" onpopupshown="shown()" onpopuphidden="nextTest()">

  <menuitem label="One"/>

</menupopup>

<script class="testbody" type="application/javascript">

<![CDATA[

var screenTest = false;

var screenx = -1, screeny = -1;

SimpleTest.waitForExplicitFinish();

function runTests()

  setScale($("frame").contentWindow, 2);

  var anchor = $("frame").contentDocument.getElementById("two");

  anchor.getBoundingClientRect(); // flush to update display after scale change

  $("popup").openPopup(anchor, "after_start");

function setScale(win, scale)

  SpecialPowers.setFullZoom(win, scale);

function shown()

  var popup = $("popup");

  var marginLeft = parseFloat(getComputedStyle(popup).marginLeft);

  var marginTop = parseFloat(getComputedStyle(popup).marginTop);

  if (screenTest) {

    is(popup.screenX - marginLeft, screenx, "screen left position");

    is(popup.screenY - marginTop, screeny, "screen top position");

  } else {

    var anchor = $("frame").contentDocument.getElementById("two");

    is(Math.round(anchor.getBoundingClientRect().left * 2),

       Math.round(popup.getBoundingClientRect().left - marginLeft), "anchored left position");

    is(Math.round(anchor.getBoundingClientRect().bottom * 2),

       Math.round(popup.getBoundingClientRect().top - marginTop), "anchored top position");

  popup.hidePopup();

function nextTest()

  if (screenTest) {

    setScale(window, 1);

    SimpleTest.finish();

  else {

    screenTest = true;

    var rootElement = document.documentElement;

    setScale(window, 2);

    // - the iframe will be at 4×, but out here css pixels are only 2× device pixels

    requestAnimationFrame(() => requestAnimationFrame(() => {

      screenx = rootElement.screenX + 20;

      screeny = rootElement.screenY + 20;

      $("popup").openPopupAtScreen(screenx, screeny);

    }));

]]>

</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>