Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(191)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/components/iron-fit-behavior/test/iron-fit-behavior.html

Issue 2113853002: Run bower update (Closed) Base URL: https://github.com/catapult-project/catapult@polymer10-migration
Patch Set: Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/polymer/components/iron-fit-behavior/iron-fit-behavior.html ('k') | third_party/polymer/components/iron-flex-layout/.bower.json » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 @license 3 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
8 Code distributed by Google as part of the polymer project is also 8 Code distributed by Google as part of the polymer project is also
9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
10 --> 10 -->
(...skipping 21 matching lines...) Expand all
32 position: absolute; 32 position: absolute;
33 top: 0; 33 top: 0;
34 left: 0; 34 left: 0;
35 } 35 }
36 36
37 .scrolling { 37 .scrolling {
38 overflow: auto; 38 overflow: auto;
39 } 39 }
40 40
41 .sized-x { 41 .sized-x {
42 width: 200px; 42 width: 100px;
43 } 43 }
44 44
45 .sized-y { 45 .sized-y {
46 height: 200px; 46 height: 100px;
47 }
48
49 .sized-xy {
50 width: 200px;
51 height: 200px;
52 } 47 }
53 48
54 .positioned-left { 49 .positioned-left {
55 position: absolute; 50 position: absolute;
56 left: 100px; 51 left: 100px;
57 } 52 }
58 53
59 .positioned-right { 54 .positioned-right {
60 position: absolute; 55 position: absolute;
61 right: 100px; 56 right: 100px;
(...skipping 14 matching lines...) Expand all
76 } 71 }
77 72
78 .with-max-height { 73 .with-max-height {
79 max-height: 500px; 74 max-height: 500px;
80 } 75 }
81 76
82 .with-margin { 77 .with-margin {
83 margin: 20px; 78 margin: 20px;
84 } 79 }
85 80
81 .constrain {
82 position: fixed;
83 top: 20px;
84 left: 20px;
85 width: 150px;
86 height: 150px;
87 border: 1px solid black;
88 box-sizing: border-box;
89 }
90
91 .sizer {
92 width: 9999px;
93 height: 9999px;
94 }
95
86 </style> 96 </style>
87 97
88 </head> 98 </head>
89 <body> 99 <body>
90 100
101 <div class="constrain"></div>
91 102
92 <test-fixture id="absolute"> 103 <test-fixture id="absolute">
93 <template> 104 <template>
94 <test-fit auto-fit-on-attach class="absolute"> 105 <test-fit auto-fit-on-attach class="absolute">
95 Absolutely positioned 106 Absolutely positioned
96 </test-fit> 107 </test-fit>
97 </template> 108 </template>
98 </test-fixture> 109 </test-fixture>
99 110
100 <test-fixture id="sized-xy"> 111 <test-fixture id="sized-xy">
101 <template> 112 <template>
102 <test-fit auto-fit-on-attach class="sized-x sized-y"> 113 <test-fit auto-fit-on-attach class="sized-x sized-y">
103 Sized (x/y), auto center/center 114 Sized (x/y), auto center/center
104 </test-fit> 115 </test-fit>
105 </template> 116 </template>
106 </test-fixture> 117 </test-fixture>
107 118
108 <test-fixture id="sized-x"> 119 <test-fixture id="sized-x">
109 <template> 120 <template>
110 <test-fit auto-fit-on-attach class="sized-x"> 121 <test-fit auto-fit-on-attach class="sized-x">
111 Sized (x), auto center/center 122 Sized (x), auto center/center
112 </test-fit> 123 </test-fit>
113 </template> 124 </template>
114 </test-fixture> 125 </test-fixture>
115 126
116 <test-fixture id="with-max-width">
117 <template>
118 <div class="constrain" style="position: fixed; top: 20px; left: 100px; w idth: 50vw; height: 50vh; border: 1px solid black;">
119 <test-fit auto-fit-on-attach class="with-max-width el">
120 with-max-width, auto center/center
121 </test-fit>
122 </div>
123 </template>
124 </test-fixture>
125
126 <test-fixture id="positioned-xy"> 127 <test-fixture id="positioned-xy">
127 <template> 128 <template>
128 <test-fit auto-fit-on-attach class="sized-x positioned-left positioned-t op"> 129 <test-fit auto-fit-on-attach class="sized-x positioned-left positioned-t op">
129 Sized (x/y), positioned/positioned 130 Sized (x/y), positioned/positioned
130 </test-fit> 131 </test-fit>
131 </template> 132 </template>
132 </test-fixture> 133 </test-fixture>
133 134
134 <test-fixture id="inline-positioned-xy"> 135 <test-fixture id="inline-positioned-xy">
135 <template> 136 <template>
136 <test-fit auto-fit-on-attach class="sized-x sized-y" style="position:abs olute;left:100px;top:100px;"> 137 <test-fit auto-fit-on-attach class="sized-x sized-y" style="position:abs olute;left:100px;top:100px;">
137 Sized (x/y), positioned/positioned 138 Sized (x/y), positioned/positioned
138 </test-fit> 139 </test-fit>
139 </template> 140 </template>
140 </test-fixture> 141 </test-fixture>
141 142
142 <test-fixture id="sectioned"> 143 <test-fixture id="sectioned">
143 <template> 144 <template>
144 <test-fit auto-fit-on-attach class="sized-x"> 145 <test-fit auto-fit-on-attach class="sized-x">
145 <div> 146 <div>
146 Sized (x), auto center/center with scrolling section 147 Sized (x), auto center/center with scrolling section
147 </div> 148 </div>
148 <div class="internal"></div> 149 <div class="internal"></div>
149 </test-fit> 150 </test-fit>
150 </template> 151 </template>
151 </test-fixture> 152 </test-fixture>
152 153
153 <test-fixture id="constrain-target"> 154 <test-fixture id="constrain-target">
154 <template> 155 <template>
155 <div class="constrain" style="position: fixed; top: 20px; left: 100px; w idth: 50vw; height: 50vh; border: 1px solid black;"> 156 <div class="constrain">
156 <test-fit auto-fit-on-attach class="el sized-xy"> 157 <test-fit auto-fit-on-attach class="el sized-x sized-y">
157 <div> 158 <div>
158 Auto center/center to parent element 159 Auto center/center to parent element
159 </div> 160 </div>
160 </test-fit> 161 </test-fit>
161 </div> 162 </div>
162 </template> 163 </template>
163 </test-fixture> 164 </test-fixture>
164 165
165 <test-fixture id="offscreen-container"> 166 <test-fixture id="offscreen-container">
166 <template> 167 <template>
167 <div style="position: fixed; top: -1px; left: 0;"> 168 <div style="position: fixed; top: -1px; left: 0;">
168 <test-fit auto-fit-on-attach class="el sized-x"> 169 <test-fit auto-fit-on-attach class="el sized-x">
169 <div> 170 <div>
170 Sized (x), auto center/center, container is offscreen 171 Sized (x), auto center/center, container is offscreen
171 </div> 172 </div>
172 </test-fit> 173 </test-fit>
173 </div> 174 </div>
174 </template> 175 </template>
175 </test-fixture> 176 </test-fixture>
176 177
178 <test-fixture id="scrollable">
179 <template>
180 <test-fit auto-fit-on-attach class="scrolling">
181 scrollable
182 <div class="sizer"></div>
183 </test-fit>
184 </template>
185 </test-fixture>
186
177 <template id="ipsum"> 187 <template id="ipsum">
178 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 188 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, qu is nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
179 </template> 189 </template>
180 190
181 <script> 191 <script>
182 192
183 function makeScrolling(el) { 193 function makeScrolling(el) {
184 el.classList.add('scrolling'); 194 el.classList.add('scrolling');
185 var template = document.getElementById('ipsum'); 195 var template = document.getElementById('ipsum');
186 for (var i = 0; i < 20; i++) { 196 for (var i = 0; i < 20; i++) {
187 el.appendChild(template.content.cloneNode(true)); 197 el.appendChild(template.content.cloneNode(true));
188 } 198 }
189 } 199 }
190 200
201 function intersects(r1, r2) {
202 return !(r2.left >= r1.right || r2.right <= r1.left || r2.top >= r1.bott om || r2.bottom <= r1.top);
203 }
204
191 suite('manual positioning', function() { 205 suite('manual positioning', function() {
192 206
193 test('css positioned element is not re-positioned', function() { 207 test('css positioned element is not re-positioned', function() {
194 var el = fixture('positioned-xy'); 208 var el = fixture('positioned-xy');
195 var rect = el.getBoundingClientRect(); 209 var rect = el.getBoundingClientRect();
196 assert.equal(rect.top, 100, 'top is unset'); 210 assert.equal(rect.top, 100, 'top is unset');
197 assert.equal(rect.left, 100, 'left is unset'); 211 assert.equal(rect.left, 100, 'left is unset');
198 212
199 }); 213 });
200 214
(...skipping 154 matching lines...) Expand 10 before | Expand all | Expand 10 after
355 test('scrolling sizingTarget is constrained to viewport height', functio n() { 369 test('scrolling sizingTarget is constrained to viewport height', functio n() {
356 el = fixture('sectioned'); 370 el = fixture('sectioned');
357 var internal = Polymer.dom(el).querySelector('.internal'); 371 var internal = Polymer.dom(el).querySelector('.internal');
358 el.sizingTarget = internal; 372 el.sizingTarget = internal;
359 makeScrolling(internal); 373 makeScrolling(internal);
360 el.refit(); 374 el.refit();
361 var rect = el.getBoundingClientRect(); 375 var rect = el.getBoundingClientRect();
362 assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height'); 376 assert.isTrue(rect.height <= window.innerHeight, 'height is less than or equal to viewport height');
363 }); 377 });
364 378
379 test('scrolling sizingTarget preserves scrolling position', function() {
380 el = fixture('scrollable');
381 el.scrollTop = 20;
382 el.scrollLeft = 20;
383 el.refit();
384 assert.equal(el.scrollTop, 20, 'scrollTop ok');
385 assert.equal(el.scrollLeft, 20, 'scrollLeft ok');
386 });
387
365 }); 388 });
366 389
367 suite('fit to element', function() { 390 suite('fit to element', function() {
368 391
369 test('element fits in another element', function() { 392 test('element fits in another element', function() {
370 var constrain = fixture('constrain-target'); 393 var constrain = fixture('constrain-target');
371 var el = Polymer.dom(constrain).querySelector('.el') 394 var el = Polymer.dom(constrain).querySelector('.el')
372 makeScrolling(el); 395 makeScrolling(el);
373 el.fitInto = constrain; 396 el.fitInto = constrain;
374 el.refit(); 397 el.refit();
375 var rect = el.getBoundingClientRect(); 398 var rect = el.getBoundingClientRect();
376 var crect = constrain.getBoundingClientRect(); 399 var crect = constrain.getBoundingClientRect();
377 assert.isTrue(rect.height <= crect.height, 'width is less than or equa l to fitInto width'); 400 assert.isTrue(rect.height <= crect.height, 'width is less than or equa l to fitInto width');
378 assert.isTrue(rect.height <= crect.height, 'height is less than or equ al to fitInto height'); 401 assert.isTrue(rect.height <= crect.height, 'height is less than or equ al to fitInto height');
379 }); 402 });
380 403
381 test('element centers in another element', function() { 404 test('element centers in another element', function() {
382 var constrain = fixture('constrain-target'); 405 var constrain = fixture('constrain-target');
383 var el = Polymer.dom(constrain).querySelector('.el') 406 var el = Polymer.dom(constrain).querySelector('.el');
384 makeScrolling(el); 407 makeScrolling(el);
385 el.fitInto = constrain; 408 el.fitInto = constrain;
386 el.refit(); 409 el.refit();
387 var rect = el.getBoundingClientRect(); 410 var rect = el.getBoundingClientRect();
388 var crect = constrain.getBoundingClientRect(); 411 var crect = constrain.getBoundingClientRect();
389 assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto'); 412 assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto');
390 assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto'); 413 assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto');
391 }); 414 });
392 415
393 test('element with max-width centers in another element', function() { 416 test('element with max-width centers in another element', function() {
394 var constrain = fixture('with-max-width'); 417 var constrain = document.querySelector('.constrain');
395 var el = Polymer.dom(constrain).querySelector('.el'); 418 var el = fixture('sized-xy');
419 el.classList.add('with-max-width');
396 el.fitInto = constrain; 420 el.fitInto = constrain;
397 el.refit(); 421 el.refit();
398 var rect = el.getBoundingClientRect(); 422 var rect = el.getBoundingClientRect();
399 var crect = constrain.getBoundingClientRect(); 423 var crect = constrain.getBoundingClientRect();
400 assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto'); 424 assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto');
401 assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto'); 425 assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto');
402 }); 426 });
403 427
404 }); 428 });
405 429
430 suite('horizontal/vertical align', function() {
431 var parent, parentRect;
432 var el, elRect;
433 var fitRect = {
434 left: 0,
435 top: 0,
436 right: window.innerWidth,
437 bottom: window.innerHeight,
438 width: window.innerWidth,
439 height: window.innerHeight
440 };
441
442 setup(function() {
443 parent = fixture('constrain-target');
444 parentRect = parent.getBoundingClientRect();
445 el = Polymer.dom(parent).querySelector('.el');
446 elRect = el.getBoundingClientRect();
447 });
448
449 test('intersects works', function() {
450 var base = {top: 0, bottom: 1, left:0, right: 1};
451 assert.isTrue(intersects(base, base), 'intersects itself');
452 assert.isFalse(intersects(base, {top:1, bottom: 2, left: 0, right: 1}) , 'no intersect on edge');
453 assert.isFalse(intersects(base, {top:-2, bottom: -1, left: 0, right: 1 }), 'no intersect on edge (negative values)');
454 assert.isFalse(intersects(base, {top:2, bottom: 3, left: 0, right: 1}) , 'no intersect');
455 });
456
457 suite('when verticalAlign is top', function() {
458 test('element is aligned to the positionTarget top', function() {
459 el.verticalAlign = 'top';
460 el.refit();
461 var rect = el.getBoundingClientRect();
462 assert.equal(rect.top, parentRect.top, 'top ok');
463 assert.equal(rect.height, elRect.height, 'no cropping');
464 });
465
466 test('element is aligned to the positionTarget top without overlapping it', function() {
467 // Allow enough space on the parent's bottom & right.
468 parent.style.width = '10px';
469 parent.style.height = '10px';
470 parentRect = parent.getBoundingClientRect();
471 el.verticalAlign = 'top';
472 el.noOverlap = true;
473 el.refit();
474 var rect = el.getBoundingClientRect();
475 assert.isFalse(intersects(rect, parentRect), 'no overlap');
476 assert.equal(rect.height, elRect.height, 'no cropping');
477 });
478
479 test('element margin is considered as offset', function() {
480 el.verticalAlign = 'top';
481 el.style.marginTop = '10px';
482 el.refit();
483 var rect = el.getBoundingClientRect();
484 assert.equal(rect.top, parentRect.top + 10, 'top ok');
485 assert.equal(rect.height, elRect.height, 'no cropping');
486
487 el.style.marginTop = '-10px';
488 el.refit();
489 rect = el.getBoundingClientRect();
490 assert.equal(rect.top, parentRect.top - 10, 'top ok');
491 assert.equal(rect.height, elRect.height, 'no cropping');
492 });
493
494 test('verticalOffset is applied', function() {
495 el.verticalAlign = 'top';
496 el.verticalOffset = 10;
497 el.refit();
498 var rect = el.getBoundingClientRect();
499 assert.equal(rect.top, parentRect.top + 10, 'top ok');
500 assert.equal(rect.height, elRect.height, 'no cropping');
501 });
502
503 test('max-height is updated', function() {
504 parent.style.top = '-10px';
505 el.verticalAlign = 'top';
506 el.refit();
507 var rect = el.getBoundingClientRect();
508 assert.equal(rect.top, 0, 'top ok');
509 assert.isBelow(rect.height, elRect.height, 'height ok');
510 });
511
512 test('min-height is preserved: element is displayed even if partially' , function() {
513 parent.style.top = '-10px';
514 el.verticalAlign = 'top';
515 el.style.minHeight = elRect.height + 'px';
516 el.refit();
517 var rect = el.getBoundingClientRect();
518 assert.equal(rect.height, elRect.height, 'min-height ok');
519 assert.isTrue(intersects(rect, fitRect), 'partially visible');
520 });
521
522 test('dynamicAlign will prefer bottom align if it minimizes the croppi ng', function() {
523 parent.style.top = '-10px';
524 parentRect = parent.getBoundingClientRect();
525 el.verticalAlign = 'top';
526 el.dynamicAlign = true;
527 el.refit();
528 var rect = el.getBoundingClientRect();
529 assert.equal(rect.bottom, parentRect.bottom, 'bottom ok');
530 assert.equal(rect.height, elRect.height, 'no cropping');
531 });
532 });
533
534 suite('when verticalAlign is bottom', function() {
535 test('element is aligned to the positionTarget bottom', function() {
536 el.verticalAlign = 'bottom';
537 el.refit();
538 var rect = el.getBoundingClientRect();
539 assert.equal(rect.bottom, parentRect.bottom, 'bottom ok');
540 assert.equal(rect.height, elRect.height, 'no cropping');
541 });
542
543 test('element is aligned to the positionTarget bottom without overlapp ing it', function() {
544 el.verticalAlign = 'bottom';
545 el.noOverlap = true;
546 el.refit();
547 var rect = el.getBoundingClientRect();
548 assert.isFalse(intersects(rect, parentRect), 'no overlap');
549 assert.equal(rect.height, elRect.height, 'no cropping');
550 });
551
552 test('element margin is considered as offset', function() {
553 el.verticalAlign = 'bottom';
554 el.style.marginBottom = '10px';
555 el.refit();
556 var rect = el.getBoundingClientRect();
557 assert.equal(rect.bottom, parentRect.bottom - 10, 'bottom ok');
558 assert.equal(rect.height, elRect.height, 'no cropping');
559
560 el.style.marginBottom = '-10px';
561 el.refit();
562 rect = el.getBoundingClientRect();
563 assert.equal(rect.bottom, parentRect.bottom + 10, 'bottom ok');
564 assert.equal(rect.height, elRect.height, 'no cropping');
565 });
566
567 test('verticalOffset is applied', function() {
568 el.verticalAlign = 'bottom';
569 el.verticalOffset = 10;
570 el.refit();
571 var rect = el.getBoundingClientRect();
572 assert.equal(rect.bottom, parentRect.bottom - 10, 'bottom ok');
573 assert.equal(rect.height, elRect.height, 'no cropping');
574 });
575
576 test('element max-height is updated', function() {
577 parent.style.top = (100 - parentRect.height) + 'px';
578 el.verticalAlign = 'bottom';
579 el.refit();
580 var rect = el.getBoundingClientRect();
581 assert.equal(rect.bottom, 100, 'bottom ok');
582 assert.equal(rect.height, 100, 'height ok');
583 });
584
585 test('min-height is preserved: element is displayed even if partially' , function() {
586 parent.style.top = (elRect.height - 10 - parentRect.height) + 'px';
587 el.verticalAlign = 'bottom';
588 el.style.minHeight = elRect.height + 'px';
589 el.refit();
590 var rect = el.getBoundingClientRect();
591 assert.equal(rect.height, elRect.height, 'min-height ok');
592 assert.isTrue(intersects(rect, fitRect), 'partially visible');
593 });
594
595 test('dynamicAlign will prefer top align if it minimizes the cropping' , function() {
596 parent.style.top = (window.innerHeight - elRect.height) + 'px';
597 parentRect = parent.getBoundingClientRect();
598 el.verticalAlign = 'bottom';
599 el.dynamicAlign = true;
600 el.refit();
601 var rect = el.getBoundingClientRect();
602 assert.equal(rect.top, parentRect.top, 'top ok');
603 assert.equal(rect.height, elRect.height, 'no cropping');
604 });
605 });
606
607 suite('when verticalAlign is auto', function() {
608 test('element is aligned to the positionTarget top', function() {
609 el.verticalAlign = 'auto';
610 el.refit();
611 var rect = el.getBoundingClientRect();
612 assert.equal(rect.top, parentRect.top, 'auto aligned to top');
613 assert.equal(rect.height, elRect.height, 'no cropping');
614 });
615
616 test('element is aligned to the positionTarget top without overlapping it', function() {
617 // Allow enough space on the parent's bottom & right.
618 parent.style.width = '10px';
619 parent.style.height = '10px';
620 parentRect = parent.getBoundingClientRect();
621 el.verticalAlign = 'auto';
622 el.noOverlap = true;
623 el.refit();
624 var rect = el.getBoundingClientRect();
625 assert.equal(rect.height, elRect.height, 'no cropping');
626 assert.isFalse(intersects(rect, parentRect), 'no overlap');
627 });
628
629 test('bottom is preferred to top if it diminishes the cropped area', f unction() {
630 // This would cause a cropping of the element, so it should automati cally
631 // align to the bottom to avoid it.
632 parent.style.top = '-10px';
633 parentRect = parent.getBoundingClientRect();
634 el.verticalAlign = 'auto';
635 el.refit();
636 var rect = el.getBoundingClientRect();
637 assert.equal(rect.bottom, parentRect.bottom, 'auto aligned to bottom ');
638 assert.equal(rect.height, elRect.height, 'no cropping');
639 });
640
641 test('bottom is preferred to top if it diminishes the cropped area, wi thout overlapping positionTarget', function() {
642 // This would cause a cropping of the element, so it should automati cally
643 // align to the bottom to avoid it.
644 parent.style.top = '-10px';
645 parentRect = parent.getBoundingClientRect();
646 el.verticalAlign = 'auto';
647 el.noOverlap = true;
648 el.refit();
649 var rect = el.getBoundingClientRect();
650 assert.equal(rect.height, elRect.height, 'no cropping');
651 assert.isFalse(intersects(rect, parentRect), 'no overlap');
652 });
653 });
654
655 suite('when horizontalAlign is left', function() {
656 test('element is aligned to the positionTarget left', function() {
657 el.horizontalAlign = 'left';
658 el.refit();
659 var rect = el.getBoundingClientRect();
660 assert.equal(rect.left, parentRect.left, 'left ok');
661 assert.equal(rect.width, elRect.width, 'no cropping');
662 });
663
664 test('element is aligned to the positionTarget left without overlappin g it', function() {
665 // Make space at the parent's right.
666 parent.style.width = '10px';
667 parentRect = parent.getBoundingClientRect();
668 el.horizontalAlign = 'left';
669 el.noOverlap = true;
670 el.refit();
671 var rect = el.getBoundingClientRect();
672 assert.isFalse(intersects(rect, parentRect), 'no overlap');
673 assert.equal(rect.width, elRect.width, 'no cropping');
674 });
675
676 test('element margin is considered as offset', function() {
677 el.horizontalAlign = 'left';
678 el.style.marginLeft = '10px';
679 el.refit();
680 var rect = el.getBoundingClientRect();
681 assert.equal(rect.left, parentRect.left + 10, 'left ok');
682 assert.equal(rect.width, elRect.width, 'no cropping');
683
684 el.style.marginLeft = '-10px';
685 el.refit();
686 rect = el.getBoundingClientRect();
687 assert.equal(rect.left, parentRect.left - 10, 'left ok');
688 assert.equal(rect.width, elRect.width, 'no cropping');
689 });
690
691 test('horizontalOffset is applied', function() {
692 el.horizontalAlign = 'left';
693 el.horizontalOffset = 10;
694 el.refit();
695 var rect = el.getBoundingClientRect();
696 assert.equal(rect.left, parentRect.left + 10, 'left ok');
697 assert.equal(rect.width, elRect.width, 'no cropping');
698 });
699
700 test('element max-width is updated', function() {
701 parent.style.left = '-10px';
702 el.horizontalAlign = 'left';
703 el.refit();
704 var rect = el.getBoundingClientRect();
705 assert.equal(rect.left, 0, 'left ok');
706 assert.isBelow(rect.width, elRect.width, 'width ok');
707 });
708
709 test('min-width is preserved: element is displayed even if partially', function() {
710 parent.style.left = '-10px';
711 el.style.minWidth = elRect.width + 'px';
712 el.horizontalAlign = 'left';
713 el.refit();
714 var rect = el.getBoundingClientRect();
715 assert.equal(rect.width, elRect.width, 'min-width ok');
716 assert.isTrue(intersects(rect, fitRect), 'partially visible');
717 });
718
719 test('dynamicAlign will prefer right align if it minimizes the croppin g', function() {
720 parent.style.left = '-10px';
721 parentRect = parent.getBoundingClientRect();
722 el.horizontalAlign = 'left';
723 el.dynamicAlign = true;
724 el.refit();
725 var rect = el.getBoundingClientRect();
726 assert.equal(rect.right, parentRect.right, 'right ok');
727 assert.equal(rect.height, elRect.height, 'no cropping');
728 });
729
730 });
731
732 suite('when horizontalAlign is right', function() {
733 test('element is aligned to the positionTarget right', function() {
734 el.horizontalAlign = 'right';
735 el.refit();
736 var rect = el.getBoundingClientRect();
737 assert.equal(rect.right, parentRect.right, 'right ok');
738 assert.equal(rect.width, elRect.width, 'no cropping');
739 });
740
741 test('element is aligned to the positionTarget right without overlappi ng it', function() {
742 // Make space at the parent's left.
743 parent.style.left = elRect.width + 'px';
744 parentRect = parent.getBoundingClientRect();
745 el.horizontalAlign = 'right';
746 el.noOverlap = true;
747 el.refit();
748 var rect = el.getBoundingClientRect();
749 assert.isFalse(intersects(rect, parentRect), 'no overlap');
750 assert.equal(rect.width, elRect.width, 'no cropping');
751 });
752
753 test('element margin is considered as offset', function() {
754 el.horizontalAlign = 'right';
755 el.style.marginRight = '10px';
756 el.refit();
757 var rect = el.getBoundingClientRect();
758 assert.equal(rect.right, parentRect.right - 10, 'right ok');
759 assert.equal(rect.width, elRect.width, 'no cropping');
760
761 el.style.marginRight = '-10px';
762 el.refit();
763 rect = el.getBoundingClientRect();
764 assert.equal(rect.right, parentRect.right + 10, 'right ok');
765 assert.equal(rect.width, elRect.width, 'no cropping');
766 });
767
768 test('horizontalOffset is applied', function() {
769 el.horizontalAlign = 'right';
770 el.horizontalOffset = 10;
771 el.refit();
772 var rect = el.getBoundingClientRect();
773 assert.equal(rect.right, parentRect.right - 10, 'right ok');
774 assert.equal(rect.width, elRect.width, 'no cropping');
775 });
776
777 test('element max-width is updated', function() {
778 parent.style.left = (100 - parentRect.width) + 'px';
779 el.horizontalAlign = 'right';
780 el.refit();
781 var rect = el.getBoundingClientRect();
782 assert.equal(rect.right, 100, 'right ok');
783 assert.equal(rect.width, 100, 'width ok');
784 });
785
786 test('min-width is preserved: element is displayed even if partially', function() {
787 parent.style.left = (elRect.width - 10 - parentRect.width) + 'px';
788 el.horizontalAlign = 'right';
789 el.style.minWidth = elRect.width + 'px';
790 el.refit();
791 var rect = el.getBoundingClientRect();
792 assert.equal(rect.width, elRect.width, 'min-width ok');
793 assert.isTrue(intersects(rect, fitRect), 'partially visible');
794 });
795
796 test('dynamicAlign will prefer left align if it minimizes the cropping ', function() {
797 parent.style.left = (window.innerWidth - elRect.width) + 'px';
798 parentRect = parent.getBoundingClientRect();
799 el.horizontalAlign = 'right';
800 el.dynamicAlign = true;
801 el.refit();
802 var rect = el.getBoundingClientRect();
803 assert.equal(rect.left, parentRect.left, 'left ok');
804 assert.equal(rect.height, elRect.height, 'no cropping');
805 });
806
807 });
808
809 suite('when horizontalAlign is auto', function() {
810 test('element is aligned to the positionTarget left', function() {
811 el.horizontalAlign = 'auto';
812 el.refit();
813 var rect = el.getBoundingClientRect();
814 assert.equal(rect.left, parentRect.left, 'auto aligned to left');
815 assert.equal(rect.width, elRect.width, 'no cropping');
816 });
817
818 test('element is aligned to the positionTarget left without overlappin g positionTarget', function() {
819 // Make space at the parent's left.
820 parent.style.left = elRect.width + 'px';
821 parentRect = parent.getBoundingClientRect();
822 el.horizontalAlign = 'auto';
823 el.noOverlap = true;
824 el.refit();
825 var rect = el.getBoundingClientRect();
826 assert.equal(rect.width, elRect.width, 'no cropping');
827 assert.isFalse(intersects(rect, parentRect), 'no overlap');
828 });
829
830 test('right is preferred to left if it diminishes the cropped area', f unction() {
831 // This would cause a cropping of the element, so it should automati cally
832 // align to the right to avoid it.
833 parent.style.left = '-10px';
834 parentRect = parent.getBoundingClientRect();
835 el.horizontalAlign = 'auto';
836 el.refit();
837 var rect = el.getBoundingClientRect();
838 assert.equal(rect.right, parentRect.right, 'auto aligned to right');
839 assert.equal(rect.width, elRect.width, 'no cropping');
840 });
841
842 test('right is preferred to left if it diminishes the cropped area, wi thout overlapping positionTarget', function() {
843 // Make space at the parent's right.
844 parent.style.width = '10px';
845 parentRect = parent.getBoundingClientRect();
846 el.horizontalAlign = 'auto';
847 el.noOverlap = true;
848 el.refit();
849 var rect = el.getBoundingClientRect();
850 assert.equal(rect.width, elRect.width, 'no cropping');
851 assert.isFalse(intersects(rect, parentRect), 'no overlap');
852 });
853 });
854
855 suite('prefer horizontal overlap to vertical overlap', function() {
856 setup(function() {
857 el.noOverlap = true;
858 el.dynamicAlign = true;
859 // Make space around the positionTarget.
860 parent.style.top = elRect.height + 'px';
861 parent.style.left = elRect.width + 'px';
862 parent.style.width = '10px';
863 parent.style.height = '10px';
864 parentRect = parent.getBoundingClientRect();
865 });
866
867 test('top-left aligns to target bottom-left', function() {
868 el.verticalAlign = 'top';
869 el.horizontalAlign = 'left';
870 el.refit();
871 var rect = el.getBoundingClientRect();
872 assert.equal(rect.left, parentRect.left, 'left ok');
873 assert.equal(rect.top, parentRect.bottom, 'top ok');
874 });
875
876 test('top-right aligns to target bottom-right', function() {
877 el.verticalAlign = 'top';
878 el.horizontalAlign = 'right';
879 el.refit();
880 var rect = el.getBoundingClientRect();
881 assert.equal(rect.right, parentRect.right, 'right ok');
882 assert.equal(rect.top, parentRect.bottom, 'top ok');
883 });
884
885 test('bottom-left aligns to target top-left', function() {
886 el.verticalAlign = 'bottom';
887 el.horizontalAlign = 'left';
888 el.refit();
889 var rect = el.getBoundingClientRect();
890 assert.equal(rect.left, parentRect.left, 'left ok');
891 assert.equal(rect.bottom, parentRect.top, 'bottom ok');
892 });
893
894 test('bottom-right aligns to target top-right', function() {
895 el.verticalAlign = 'bottom';
896 el.horizontalAlign = 'right';
897 el.refit();
898 var rect = el.getBoundingClientRect();
899 assert.equal(rect.right, parentRect.right, 'right ok');
900 assert.equal(rect.bottom, parentRect.top, 'bottom ok');
901 });
902
903 });
904
905 });
406 </script> 906 </script>
407 907
408 </body> 908 </body>
409 </html> 909 </html>
OLDNEW
« no previous file with comments | « third_party/polymer/components/iron-fit-behavior/iron-fit-behavior.html ('k') | third_party/polymer/components/iron-flex-layout/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698