chrome/test/data/webui/position_util_test.html

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