DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (5b81998bb7ab)

VCS Links

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411
<?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="Popup Anchor Tests"
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <title>Popup Popup Tests</title>

  <panel id="testPanel"
         type="arrow"
         noautohide="true">
  </panel>

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

<script>
<![CDATA[
var anchor, panel, arrow;

function is_close(got, exp, msg) {
  // on some platforms we see differences of a fraction of a pixel - so
  // allow any difference of < 1 pixels as being OK.
  ok(Math.abs(got - exp) < 1, msg + ": " + got + " should be equal(-ish) to " + exp);
}

function isArrowPositionedOn(side, offset) {
  var arrowRect = arrow.getBoundingClientRect();
  var arrowMidX = (arrowRect.left + arrowRect.right) / 2;
  var arrowMidY = (arrowRect.top + arrowRect.bottom) / 2;
  var panelRect = panel.getBoundingClientRect();
  var panelMidX = (panelRect.left + panelRect.right) / 2;
  var panelMidY = (panelRect.top + panelRect.bottom) / 2;
  // First check the "flip" of the panel is correct.  If we are expecting the
  // arrow to be pointing to the left side of the anchor, the arrow must
  // also be on the left side of the panel (and vice-versa)
  // XXX - on OSX, the arrow seems to always be exactly in the center, hence
  // the 'equals' sign in the "<=" and ">=" comparisons.  NFI why though...
  switch (side) {
    case "left":
      ok(arrowMidX <= panelMidX, "arrow should be on the left of the panel");
      break;
    case "right":
      ok(arrowMidX >= panelMidX, "arrow should be on the right of the panel");
      break;
    case "top":
      ok(arrowMidY <= panelMidY, "arrow should be on the top of the panel");
      break;
    case "bottom":
      ok(arrowMidY >= panelMidY, "arrow should be on the bottom of the panel");
      break;
    default:
      ok(false, "invalid position " + where);
      break;
  }
  // Now check the arrow really is pointing where we expect.  The middle of
  // the arrow should be pointing exactly to the left (or right) side of the
  // anchor rect, +- any offsets.
  if (offset === null) // special case - explicit 'null' means 'don't check offset'
    return;
  offset = offset || 0; // no param means no offset expected.
  var anchorRect = anchor.getBoundingClientRect();
  var anchorPos = anchorRect[side];
  switch (side) {
    case "left":
    case "right":
      is_close(arrowMidX - anchorPos, offset, "arrow should be " + offset + "px from " + side + " side of anchor");
      is_close(panelRect.top, anchorRect.bottom, "top of panel should be at bottom of anchor");
      break;
    case "top":
    case "bottom":
      is_close(arrowMidY - anchorPos, offset, "arrow should be " + offset + "px from " + side + " side of anchor");
      is_close(panelRect.right, anchorRect.left, "right of panel should be left of anchor");
      break;
    default:
      ok(false, "unknown side " + side);
      break;
  }
}

function openSlidingPopup(position, callback) {
  panel.setAttribute("flip", "slide");
  _openPopup(position, callback);
}

function openPopup(position, callback) {
  panel.setAttribute("flip", "both");
  _openPopup(position, callback);
}

function _openPopup(position, callback) {
  // this is very ugly: the panel CSS sets the arrow's list-style-image based
  // on the 'side' attribute.  If the setting of the 'side' attribute causes
  // the image to change, we may get the popupshown event before the new
  // image has loaded - which causes the size of the arrow to be incorrect
  // for a brief moment - right when we are measuring it!
  // So we work around this in 2 steps:
  // * Force the 'side' attribute to a value which causes the CSS to not
  //   specify an image - then when the popup gets shown, the correct image
  //   is set, causing a load() event on the image element.
  // * Listen to *both* popupshown and the image load event.  When both have
  //   fired (the order is indeterminate) we start the test.
  panel.setAttribute("side", "noside");
  var numEvents = 0;
  function onEvent() {
    if (++numEvents == 2) // after both panel 'popupshown' and image 'load'
      callback();
  };
  panel.addEventListener("popupshown", function popupshown() {
    panel.removeEventListener("popupshown", popupshown);
    onEvent();
  });
  arrow.addEventListener("load", function imageload() {
    arrow.removeEventListener("load", imageload);
    onEvent();
  });
  panel.openPopup(anchor, position);
}

var tests = [
  // A panel with the anchor after_end - the anchor should not move on resize
  ['simpleResizeHorizontal', 'middle', function(next) {
    openPopup("after_end", function() {
      isArrowPositionedOn("right");
      var origPanelRect = panel.getBoundingClientRect();
      panel.sizeTo(100, 100);
      isArrowPositionedOn("right"); // should not have flipped, so still "right"
      panel.sizeTo(origPanelRect.width, origPanelRect.height);
      isArrowPositionedOn("right"); // should not have flipped, so still "right"
      next();
    });
  }],

  ['simpleResizeVertical', 'middle', function(next) {
    openPopup("start_after", function() {
      isArrowPositionedOn("bottom");
      var origPanelRect = panel.getBoundingClientRect();
      panel.sizeTo(100, 100);
      isArrowPositionedOn("bottom"); // should not have flipped
      panel.sizeTo(origPanelRect.width, origPanelRect.height);
      isArrowPositionedOn("bottom"); // should not have flipped
      next();
    });
  }],

  ['flippingResizeHorizontal', 'middle', function(next) {
    openPopup("after_end", function() {
      isArrowPositionedOn("right");
      panel.sizeTo(anchor.getBoundingClientRect().left + 50, 50);
      isArrowPositionedOn("left"); // check it flipped and has zero offset.
      next();
    });
  }],

  ['flippingResizeVertical', 'middle', function(next) {
    openPopup("start_after", function() {
      isArrowPositionedOn("bottom");
      panel.sizeTo(50, anchor.getBoundingClientRect().top + 50);
      isArrowPositionedOn("top"); // check it flipped and has zero offset.
      next();
    });
  }],

  ['simpleMoveToAnchorHorizontal', 'middle', function(next) {
    openPopup("after_end", function() {
      isArrowPositionedOn("right");
      panel.moveToAnchor(anchor, "after_end", 20, 0);
      // the anchor and the panel should have moved 20px right without flipping.
      isArrowPositionedOn("right", 20);
      panel.moveToAnchor(anchor, "after_end", -20, 0);
      // the anchor and the panel should have moved 20px left without flipping.
      isArrowPositionedOn("right", -20);
      next();
    });
  }],

  ['simpleMoveToAnchorVertical', 'middle', function(next) {
    openPopup("start_after", function() {
      isArrowPositionedOn("bottom");
      panel.moveToAnchor(anchor, "start_after", 0, 20);
      // the anchor and the panel should have moved 20px down without flipping.
      isArrowPositionedOn("bottom", 20);
      panel.moveToAnchor(anchor, "start_after", 0, -20);
      // the anchor and the panel should have moved 20px up without flipping.
      isArrowPositionedOn("bottom", -20);
      next();
    });
  }],

  // Do a moveToAnchor that causes the panel to flip horizontally
  ['flippingMoveToAnchorHorizontal', 'middle', function(next) {
    var anchorRight = anchor.getBoundingClientRect().right;
    // Size the panel such that it only just fits from the left-hand side of
    // the window to the right of the anchor - thus, it will fit when
    // anchored to the right-hand side of the anchor.
    panel.sizeTo(anchorRight - 10, 100);
    openPopup("after_end", function() {
      isArrowPositionedOn("right");
      // Ask for it to be anchored 1/2 way between the left edge of the window
      // and the anchor right - it can't fit with the panel on the left/arrow
      // on the right, so it must flip (arrow on the left, panel on the right)
      var offset = Math.floor(-anchorRight / 2);
      panel.moveToAnchor(anchor, "after_end", offset, 0);
      isArrowPositionedOn("left", offset); // should have flipped and have the offset.
      // resize back to original and move to a zero offset - it should flip back.
      panel.sizeTo(anchorRight - 10, 100);
      panel.moveToAnchor(anchor, "after_end", 0, 0);
      isArrowPositionedOn("right"); // should have flipped back and no offset
      next();
    });
  }],

  // Do a moveToAnchor that causes the panel to flip vertically
  ['flippingMoveToAnchorVertical', 'middle', function(next) {
    var anchorBottom = anchor.getBoundingClientRect().bottom;
    // See comments above in flippingMoveToAnchorHorizontal, but read
    // "top/bottom" instead of "left/right"
    panel.sizeTo(100, anchorBottom - 10);
    openPopup("start_after", function() {
      isArrowPositionedOn("bottom");
      var offset = Math.floor(-anchorBottom / 2);
      panel.moveToAnchor(anchor, "start_after", 0, offset);
      isArrowPositionedOn("top", offset);
      panel.sizeTo(100, anchorBottom - 10);
      panel.moveToAnchor(anchor, "start_after", 0, 0);
      isArrowPositionedOn("bottom");
      next();
    });
  }],

  ['veryWidePanel-after_end', 'middle', function(next) {
    openSlidingPopup("after_end", function() {
      var origArrowRect = arrow.getBoundingClientRect();
      // Now move it such that the arrow can't be at either end of the panel but
      // instead somewhere in the middle as that is the only way things fit,
      // meaning the arrow should "slide" down the panel.
      panel.sizeTo(window.innerWidth - 10, 60);
      is(panel.getBoundingClientRect().width, window.innerWidth - 10, "width is what we requested.")
      // the arrow should not have moved.
      var curArrowRect = arrow.getBoundingClientRect();
      is_close(curArrowRect.left, origArrowRect.left, "arrow should not have moved");
      is_close(curArrowRect.top, origArrowRect.top, "arrow should not have moved up or down");
      next();
    });
  }],

  ['veryWidePanel-before_start', 'middle', function(next) {
    openSlidingPopup("before_start", function() {
      var origArrowRect = arrow.getBoundingClientRect();
      // Now size it such that the arrow can't be at either end of the panel but
      // instead somewhere in the middle as that is the only way things fit.
      panel.sizeTo(window.innerWidth - 10, 60);
      is(panel.getBoundingClientRect().width, window.innerWidth - 10, "width is what we requested")
      // the arrow should not have moved.
      var curArrowRect = arrow.getBoundingClientRect();
      is_close(curArrowRect.left, origArrowRect.left, "arrow should not have moved");
      is_close(curArrowRect.top, origArrowRect.top, "arrow should not have moved up or down");
      next();
    });
  }],

  ['veryTallPanel-start_after', 'middle', function(next) {
    openSlidingPopup("start_after", function() {
      var origArrowRect = arrow.getBoundingClientRect();
      // Now move it such that the arrow can't be at either end of the panel but
      // instead somewhere in the middle as that is the only way things fit,
      // meaning the arrow should "slide" down the panel.
      panel.sizeTo(100, window.innerHeight - 10);
      is(panel.getBoundingClientRect().height, window.innerHeight - 10, "height is what we requested.")
      // the arrow should not have moved.
      var curArrowRect = arrow.getBoundingClientRect();
      is_close(curArrowRect.left, origArrowRect.left, "arrow should not have moved");
      is_close(curArrowRect.top, origArrowRect.top, "arrow should not have moved up or down");
      next();
    });
  }],

  ['veryTallPanel-start_before', 'middle', function(next) {
    openSlidingPopup("start_before", function() {
      var origArrowRect = arrow.getBoundingClientRect();
      // Now size it such that the arrow can't be at either end of the panel but
      // instead somewhere in the middle as that is the only way things fit.
      panel.sizeTo(100, window.innerHeight - 10);
      is(panel.getBoundingClientRect().height, window.innerHeight - 10, "height is what we requested")
      // the arrow should not have moved.
      var curArrowRect = arrow.getBoundingClientRect();
      is_close(curArrowRect.left, origArrowRect.left, "arrow should not have moved");
      is_close(curArrowRect.top, origArrowRect.top, "arrow should not have moved up or down");
      next();
    });
  }],

  // Tests against the anchor at the right-hand side of the window
  ['afterend', 'right', function(next) {
    openPopup("after_end", function() {
      // when we request too far to the right/bottom, the panel gets shrunk
      // and moved.  The amount it is shrunk by is how far it is moved.
      var panelRect = panel.getBoundingClientRect();
      // panel was requested 100px wide - calc offset based on actual width.
      var offset = panelRect.width - 100;
      isArrowPositionedOn("right", offset);
      next();
    });
  }],

  ['after_start', 'right', function(next) {
    openPopup("after_start", function() {
      // See above - we are still too far to the right, but the anchor is
      // on the other side.
      var panelRect = panel.getBoundingClientRect();
      var offset = panelRect.width - 100;
      isArrowPositionedOn("right", offset);
      next();
    });
  }],

  // Tests against the anchor at the left-hand side of the window
  ['after_start', 'left', function(next) {
    openPopup("after_start", function() {
      var panelRect = panel.getBoundingClientRect();
      is(panelRect.left, 0, "panel remains within the screen");
      // not sure how to determine the offset here, so given we have checked
      // the panel is as left as possible while still being inside the window,
      // we just don't check the offset.
      isArrowPositionedOn("left", null);
      next();
    });
  }],
]

function runTests() {
  var testIter = Iterator(tests);
  function runNextTest() {
    let name, anchorPos, test;
    try {
      let index;
      [index, [name, anchorPos, test]] = testIter.next();
    } catch (err if err instanceof StopIteration) {
      // out of tests
      panel.hidePopup();
      SimpleTest.finish();
      return;
    }
    SimpleTest.info("sub-test " + anchorPos + "." + name + " starting");
    // first arrange for the anchor to be where the test requires it.
    panel.hidePopup();
    panel.sizeTo(100, 50);
    // hide all the anchors here, then later we make one of them visible.
    document.getElementById("anchor-left-wrapper").style.display = "none";
    document.getElementById("anchor-middle-wrapper").style.display = "none";
    document.getElementById("anchor-right-wrapper").style.display = "none";
    switch(anchorPos) {
      case 'middle':
        anchor = document.getElementById("anchor-middle");
        document.getElementById("anchor-middle-wrapper").style.display = "block";
        break;
      case 'left':
        anchor = document.getElementById("anchor-left");
        document.getElementById("anchor-left-wrapper").style.display = "block";
        break;
      case 'right':
        anchor = document.getElementById("anchor-right");
        document.getElementById("anchor-right-wrapper").style.display = "block";
        break;
      default:
        SimpleTest.ok(false, "Bad anchorPos: " + anchorPos);
        runNextTest();
        return;
    }
    try {
      test(runNextTest);
    } catch (ex) {
      SimpleTest.ok(false, "sub-test " + anchorPos + "." + name + " failed: " + ex.toString() + "\n" + ex.stack);
      runNextTest();
    }
  }
  runNextTest();
}

SimpleTest.waitForExplicitFinish();

addEventListener("load", function() {
  // anchor is set by the test runner above
  panel = document.getElementById("testPanel");
  arrow = SpecialPowers.wrap(document).getAnonymousElementByAttribute(panel, "anonid", "arrow");
  // Cancel the arrow panel slide-in transition (bug 767133) so the size and
  // position are "stable" enough to test without jumping through hoops...
  arrow.style.transition = "none";
  runTests();
});

]]>
</script>

<body xmlns="http://www.w3.org/1999/xhtml">
<!-- Our tests assume at least 100px around the anchor on all sides, else the
     panel may flip when we don't expect it to
-->
<div id="anchor-middle-wrapper" style="margin: 100px 100px 100px 100px;">
  <p>The anchor --&gt; <span id="anchor-middle">v</span> &lt;--</p>
</div>
<div id="anchor-left-wrapper" style="text-align: left; display: none;">
  <p><span id="anchor-left">v</span> &lt;-- The anchor;</p>
</div>
<div id="anchor-right-wrapper" style="text-align: right; display: none;">
  <p>The anchor --&gt; <span id="anchor-right">v</span></p>
</div>
</body>

</window>