Home | History | Annotate | Download | only in ui 
      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <!-- TODO(arv): Check in Closue unit tests and make this run as part of the
      5      tests -->
      6 <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
      7 <script src="../../cr.js"></script>
      8 <script src="position_util.js"></script>
      9 <script>
     10 
     11 goog.require('goog.testing.PropertyReplacer');
     12 goog.require('goog.testing.jsunit');
     13 
     14 </script>
     15 <style>
     16 
     17 html, body {
     18   margin: 0;
     19   width: 100%;
     20   height: 100%;
     21 }
     22 
     23 #anchor {
     24   position: absolute;
     25   width: 10px;
     26   height: 10px;
     27   background: green;
     28 }
     29 
     30 #popup {
     31   position: absolute;
     32   top: 0;
     33   left: 0;
     34   width: 100px;
     35   height: 100px;
     36   background: red;
     37 }
     38 
     39 </style>
     40 </head>
     41 <body>
     42 
     43 <div id=anchor></div>
     44 <div id=popup></div>
     45 
     46 <script>
     47 
     48 var anchor = document.getElementById('anchor');
     49 var popup = document.getElementById('popup');
     50 var anchorParent = anchor.offsetParent;
     51 var pr = new goog.testing.PropertyReplacer;
     52 var availRect;
     53 
     54 function MockRect(w, h) {
     55   this.width = w;
     56   this.height = h;
     57   this.right = this.left + w;
     58   this.bottom = this.top + h;
     59 }
     60 MockRect.prototype = {
     61   left: 0,
     62   top: 0
     63 };
     64 
     65 function setUp() {
     66   anchor.style.top = '100px';
     67   anchor.style.left = '100px';
     68   availRect = new MockRect(200, 200);
     69   pr.set(anchorParent, 'getBoundingClientRect', function() {
     70     return availRect;
     71   });
     72 }
     73 
     74 function tearDown() {
     75   document.documentElement.dir = 'ltr';
     76   pr.reset();
     77 }
     78 
     79 function testAbovePrimary() {
     80   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
     81 
     82   assertEquals('auto', popup.style.top);
     83   assertEquals('100px', popup.style.bottom);
     84 
     85   anchor.style.top = '90px';
     86   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
     87   assertEquals('100px', popup.style.top);
     88   assertEquals('auto', popup.style.bottom);
     89 }
     90 
     91 function testBelowPrimary() {
     92   // ensure enough below
     93   anchor.style.top = '90px';
     94 
     95   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
     96 
     97   assertEquals('100px', popup.style.top);
     98   assertEquals('auto', popup.style.bottom);
     99 
    100   // ensure not enough below
    101   anchor.style.top = '100px';
    102 
    103   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
    104   assertEquals('auto', popup.style.top);
    105   assertEquals('100px', popup.style.bottom);
    106 }
    107 
    108 function testBeforePrimary() {
    109   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
    110 
    111   assertEquals('auto', popup.style.left);
    112   assertEquals('100px', popup.style.right);
    113 
    114   anchor.style.left = '90px';
    115   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
    116   assertEquals('100px', popup.style.left);
    117   assertEquals('auto', popup.style.right);
    118 }
    119 
    120 function testBeforePrimaryRtl() {
    121   document.documentElement.dir = 'rtl';
    122 
    123   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
    124 
    125   assertEquals('auto', popup.style.left);
    126   assertEquals('100px', popup.style.right);
    127 
    128   anchor.style.left = '90px';
    129 
    130   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
    131   assertEquals('100px', popup.style.left);
    132   assertEquals('auto', popup.style.right);
    133 }
    134 
    135 function testAfterPrimary() {
    136   // ensure enough to the right
    137   anchor.style.left = '90px';
    138 
    139   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
    140 
    141   assertEquals('100px', popup.style.left);
    142   assertEquals('auto', popup.style.right);
    143 
    144   // ensure not enough below
    145   anchor.style.left = '100px';
    146 
    147   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
    148   assertEquals('auto', popup.style.left);
    149   assertEquals('100px', popup.style.right);
    150 }
    151 
    152 function testAfterPrimaryRtl() {
    153   document.documentElement.dir = 'rtl';
    154 
    155   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
    156 
    157   assertEquals('auto', popup.style.left);
    158   assertEquals('100px', popup.style.right);
    159 
    160   // ensure not enough below
    161   anchor.style.left = '90px';
    162 
    163   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
    164   assertEquals('100px', popup.style.left);
    165   assertEquals('auto', popup.style.right);
    166 }
    167 
    168 function testAboveSecondary() {
    169   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
    170 
    171   assertEquals('100px', popup.style.left);
    172   assertEquals('auto', popup.style.right);
    173 
    174   anchor.style.left = '110px';
    175 
    176   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
    177 
    178   assertEquals('auto', popup.style.left);
    179   assertEquals('80px', popup.style.right);
    180 }
    181 
    182 function testAboveSecondaryRtl() {
    183   document.documentElement.dir = 'rtl';
    184 
    185   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
    186 
    187   assertEquals('auto', popup.style.left);
    188   assertEquals('90px', popup.style.right);
    189 
    190   anchor.style.left = '80px';
    191 
    192   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE);
    193 
    194   assertEquals('80px', popup.style.left);
    195   assertEquals('auto', popup.style.right);
    196 }
    197 
    198 function testAboveSecondarySwappedAlign() {
    199   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE, true);
    200 
    201   assertEquals('auto', popup.style.left);
    202   assertEquals('90px', popup.style.right);
    203 
    204   anchor.style.left = '80px';
    205 
    206   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.ABOVE, true);
    207 
    208   assertEquals('80px', popup.style.left);
    209   assertEquals('auto', popup.style.right);
    210 }
    211 
    212 function testBelowSecondary() {
    213   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
    214 
    215   assertEquals('100px', popup.style.left);
    216   assertEquals('auto', popup.style.right);
    217 
    218   anchor.style.left = '110px';
    219 
    220   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
    221 
    222   assertEquals('auto', popup.style.left);
    223   assertEquals('80px', popup.style.right);
    224 }
    225 
    226 function testBelowSecondaryRtl() {
    227   document.documentElement.dir = 'rtl';
    228 
    229   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
    230 
    231   assertEquals('auto', popup.style.left);
    232   assertEquals('90px', popup.style.right);
    233 
    234   anchor.style.left = '80px';
    235 
    236   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW);
    237 
    238   assertEquals('80px', popup.style.left);
    239   assertEquals('auto', popup.style.right);
    240 }
    241 
    242 function testBelowSecondarySwappedAlign() {
    243   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW, true);
    244 
    245   assertEquals('auto', popup.style.left);
    246   assertEquals('90px', popup.style.right);
    247 
    248   anchor.style.left = '80px';
    249 
    250   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BELOW, true);
    251 
    252   assertEquals('80px', popup.style.left);
    253   assertEquals('auto', popup.style.right);
    254 }
    255 
    256 function testBeforeSecondary() {
    257   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
    258 
    259   assertEquals('100px', popup.style.top);
    260   assertEquals('auto', popup.style.bottom);
    261 
    262   anchor.style.top = '110px';
    263 
    264   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.BEFORE);
    265 
    266   assertEquals('auto', popup.style.top);
    267   assertEquals('80px', popup.style.bottom);
    268 }
    269 
    270 function testAfterSecondary() {
    271   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
    272 
    273   assertEquals('100px', popup.style.top);
    274   assertEquals('auto', popup.style.bottom);
    275 
    276   anchor.style.top = '110px';
    277 
    278   cr.ui.positionPopupAroundElement(anchor, popup, cr.ui.AnchorType.AFTER);
    279 
    280   assertEquals('auto', popup.style.top);
    281   assertEquals('80px', popup.style.bottom);
    282 }
    283 
    284 function testPositionAtPoint() {
    285   cr.ui.positionPopupAtPoint(100, 100, popup);
    286 
    287   assertEquals('100px', popup.style.left);
    288   assertEquals('100px', popup.style.top);
    289   assertEquals('auto', popup.style.right);
    290   assertEquals('auto', popup.style.bottom);
    291 
    292   cr.ui.positionPopupAtPoint(100, 150, popup);
    293 
    294   assertEquals('100px', popup.style.left);
    295   assertEquals('auto', popup.style.top);
    296   assertEquals('auto', popup.style.right);
    297   assertEquals('50px', popup.style.bottom);
    298 
    299   cr.ui.positionPopupAtPoint(150, 150, popup);
    300 
    301   assertEquals('auto', popup.style.left);
    302   assertEquals('auto', popup.style.top);
    303   assertEquals('50px', popup.style.right);
    304   assertEquals('50px', popup.style.bottom);
    305 }
    306 
    307 </script>
    308 
    309 </body>
    310 </html>
    311