Skip to content

Commit 80bbebd

Browse files
kborcherskborchers
committed
Position: Added better collision detection for flip and fit, added visual tests for each and updated the unit tests to take the changes into account. In the process, I removed the rounding that was being done to the position since older jQuery couldn't handle the fractions. There was another pull for this same issue and I have merged the unit tests from that pull into this commit. Also added flipfit!
1 parent ac04462 commit 80bbebd

File tree

8 files changed

+588
-176
lines changed

8 files changed

+588
-176
lines changed

‎demos/position/default.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,11 +142,13 @@
142142
<select id="collision_horizontal">
143143
<option value="flip">flip</option>
144144
<option value="fit">fit</option>
145+
<option value="flipfit">flipfit</option>
145146
<option value="none">none</option>
146147
</select>
147148
<select id="collision_vertical">
148149
<option value="flip">flip</option>
149150
<option value="fit">fit</option>
151+
<option value="flipfit">flipfit</option>
150152
<option value="none">none</option>
151153
</select>
152154
</div>

‎tests/unit/position/position.html

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<script src="../testsuite.js"></script>
1717

1818
<script src="position_core.js"></script>
19-
<script src="position_core_within.js"></script>
19+
<script src="position_core_within.js"></script>
2020

2121
<script src="../swarminject.js"></script>
2222
</head>
@@ -36,30 +36,34 @@ <h2 id="qunit-userAgent"></h2>
3636
-->
3737

3838
<div id="qunit-fixture" style="top: 0; left: 0; z-index:1">
39-
<div id="within-container">
40-
<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
41-
<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
42-
<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
43-
44-
<div style="position: absolute; top: 0px; left: 0px">
45-
<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
46-
<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
47-
</div>
48-
49-
<div style="position: absolute; top: 200px; left: 100px;">
50-
<div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
51-
<div style="position: absolute; top: 100px; left: 50px;">
52-
<div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
53-
<div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div>
54-
</div>
55-
</div>
56-
57-
<div style="position: absolute; height: 5000px; width: 5000px;"></div>
58-
59-
<div id="bug-5280" style="height: 30px; width: 201px;">
60-
<div style="width: 50px; height: 10px;"></div>
61-
</div>
62-
</div>
39+
<div id="within-container">
40+
<div id="el1" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
41+
<div id="el2" style="position: absolute; width: 6px; height: 6px; line-height: 6px;"></div>
42+
<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
43+
44+
<div style="position: absolute; top: 0px; left: 0px">
45+
<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
46+
<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
47+
</div>
48+
49+
<div style="position: absolute; top: 200px; left: 100px;">
50+
<div id="el-offset-100-200" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
51+
<div style="position: absolute; top: 100px; left: 50px;">
52+
<div id="el-two-offset-150-300" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
53+
<div id="el-fixed" style="position: fixed; top: 200px; left: 200px;"></div>
54+
</div>
55+
</div>
56+
57+
<div style="position: absolute; height: 5000px; width: 5000px;"></div>
58+
59+
<div id="bug-5280" style="height: 30px; width: 201px;">
60+
<div style="width: 50px; height: 10px;"></div>
61+
</div>
62+
63+
<div id="fractions-parent" style="position: absolute; left: 10.7432222px; top: 10.532325px; height: 30px; width: 201px;">
64+
<div id="fractions-element"></div>
65+
</div>
66+
</div>
6367
</div>
6468

6569
</body>

‎tests/unit/position/position_core.js

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -332,28 +332,28 @@ test( "collision: fit, window scrolled", function() {
332332
test( "collision: flip, no offset", function() {
333333
collisionTest({
334334
collision: "flip"
335-
}, { top: -10, left: -10 }, "left top" );
335+
}, { top: $( window ).height(), left: $( window ).width() }, "left top" );
336336

337337
collisionTest2({
338338
collision: "flip"
339-
}, { top: $( window ).height(), left: $( window ).width() }, "right bottom" );
339+
}, { top: -10, left: -10 }, "right bottom" );
340340
});
341341

342342
test( "collision: flip, with offset", function() {
343343
collisionTest({
344344
collision: "flip",
345345
at: "right+2 bottom+3"
346-
}, { top: -13, left: -12 }, "left top, with offset added" );
346+
}, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "left top, with offset added" );
347347

348348
collisionTest2({
349349
collision: "flip",
350350
at: "left+2 top+3"
351-
}, { top: $( window ).height() - 3, left: $( window ).width() - 2 }, "bottom, positive offset" );
351+
}, { top: -7, left: -8 }, "bottom, positive offset" );
352352

353353
collisionTest2({
354354
collision: "flip",
355355
at: "left-2 top-3"
356-
}, { top: $( window ).height() + 3, left: $( window ).width() + 2 }, "right bottom, negative offset" );
356+
}, { top: -13, left: -12 }, "right bottom, negative offset" );
357357
});
358358

359359
test( "collision: none, no offset", function() {
@@ -427,12 +427,12 @@ test( "collision: flip, with margin", function() {
427427
collisionTest({
428428
collision: "flip",
429429
at: "left top"
430-
}, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "left top" );
430+
}, { top: 0, left: 0 }, "left top" );
431431

432432
collisionTest2({
433433
collision: "flip",
434434
at: "right bottom"
435-
}, { top: 0, left: 0 }, "right bottom" );
435+
}, { top: $( window ).height() - 10, left: $( window ).width() - 10 }, "right bottom" );
436436
});
437437

438438
test( "addClass: flipped left", function() {
@@ -443,15 +443,15 @@ test( "addClass: flipped left", function() {
443443
at: "right center"
444444
});
445445

446-
same( elem.hasClass( 'ui-flipped-left' ), true, 'Has ui-flipped-left class' );
446+
same( elem.hasClass( 'ui-flipped-left' ), false, 'Has ui-flipped-left class' );
447447

448448
elem.position( {
449449
my: "right center",
450450
of: window,
451451
collision: "flip",
452452
at: "left center"
453453
})
454-
454+
455455
same( elem.hasClass( 'ui-flipped-left' ), false, 'Removed ui-flipped-left class' );
456456
});
457457

@@ -463,8 +463,8 @@ test( "addClass: flipped top", function() {
463463
at: "right bottom"
464464
});
465465

466-
same( elem.hasClass( 'ui-flipped-top' ), true, 'Has ui-flipped-top class' );
467-
466+
same( elem.hasClass( 'ui-flipped-top' ), false, 'Has ui-flipped-top class' );
467+
468468
elem.position( {
469469
my: "left bottom",
470470
of: window,
@@ -483,7 +483,7 @@ test( "addClass: flipped right", function() {
483483
at: "left center"
484484
});
485485

486-
same( elem.hasClass( 'ui-flipped-right' ), true, 'Has ui-flipped-right class' );
486+
same( elem.hasClass( 'ui-flipped-right' ), false, 'Has ui-flipped-right class' );
487487

488488
elem.position( {
489489
my: "left center",
@@ -504,8 +504,8 @@ test( "addClass: flipped bottom", function() {
504504
at: "right top"
505505
});
506506

507-
same( elem.hasClass( 'ui-flipped-bottom' ), true, 'Has ui-flipped-bottom class' );
508-
507+
same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Has ui-flipped-bottom class' );
508+
509509
elem.position( {
510510
my: "left top",
511511
of: window,
@@ -516,22 +516,32 @@ test( "addClass: flipped bottom", function() {
516516
same( elem.hasClass( 'ui-flipped-bottom' ), false, 'Removed ui-flipped-bottom class' );
517517
});
518518

519-
//test( "bug #5280: consistent results (avoid fractional values)", function() {
520-
// var wrapper = $( "#bug-5280" ),
521-
// elem = wrapper.children(),
522-
// offset1 = elem.position({
523-
// my: "center",
524-
// at: "center",
525-
// of: wrapper,
526-
// collision: "none"
527-
// }).offset(),
528-
// offset2 = elem.position({
529-
// my: "center",
530-
// at: "center",
531-
// of: wrapper,
532-
// collision: "none"
533-
// }).offset();
534-
// same( offset1, offset2 );
535-
//});
519+
test( "fractions", function() {
520+
$( "#fractions-element" ).position({
521+
my: "left top",
522+
at: "left top",
523+
of: "#fractions-parent",
524+
collision: "none"
525+
});
526+
same( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" );
527+
});
528+
529+
test( "bug #5280: consistent results (avoid fractional values)", function() {
530+
var wrapper = $( "#bug-5280" ),
531+
elem = wrapper.children(),
532+
offset1 = elem.position({
533+
my: "center",
534+
at: "center",
535+
of: wrapper,
536+
collision: "none"
537+
}).offset(),
538+
offset2 = elem.position({
539+
my: "center",
540+
at: "center",
541+
of: wrapper,
542+
collision: "none"
543+
}).offset();
544+
same( offset1, offset2 );
545+
});
536546

537547
}( jQuery ) );

0 commit comments

Comments
 (0)