The Tor Browser: toolkit/content/tests/widgets/test_popupanchor.xul@129ffea94266 (annotated)

toolkit/content/tests/widgets/test_popupanchor.xul@129ffea94266 (annotated)

toolkit/content/tests/widgets/test_popupanchor.xul

Sat, 03 Jan 2015 20:18:00 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Sat, 03 Jan 2015 20:18:00 +0100
branch: TOR_BUG_3246
changeset 7: 129ffea94266
permissions: -rw-r--r--

Conditionally enable double key logic according to:
private browsing mode or privacy.thirdparty.isolate preference and
implement in GetCookieStringCommon and FindCookie where it counts...
With some reservations of how to convince FindCookie users to test
condition and pass a nullptr when disabling double key logic.

 <?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">
   <panel id="testPanel"
          type="arrow"
          animate="false"
          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>

The Tor Browser / annotate

toolkit/content/tests/widgets/test_popupanchor.xul@129ffea94266 (annotated)

toolkit/content/tests/widgets/test_popupanchor.xul