1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
( function ( mw, $ ) {
// Simulate square element with 20px long edges placed at (20, 20) on the page
var
DEFAULT_VIEWPORT = {
top: 0,
left: 0,
right: 100,
bottom: 100
};
QUnit.module( 'mediawiki.viewport', QUnit.newMwEnvironment( {
setup: function () {
this.el = $( '<div />' )
.appendTo( '#qunit-fixture' )
.width( 20 )
.height( 20 )
.offset( {
top: 20,
left: 20
} )
.get( 0 );
this.sandbox.stub( mw.viewport, 'makeViewportFromWindow' )
.returns( DEFAULT_VIEWPORT );
}
} ) );
QUnit.test( 'isElementInViewport', function ( assert ) {
var viewport = $.extend( {}, DEFAULT_VIEWPORT );
assert.ok( mw.viewport.isElementInViewport( this.el, viewport ),
'It should return true when the element is fully enclosed in the viewport' );
viewport.right = 20;
viewport.bottom = 20;
assert.ok( mw.viewport.isElementInViewport( this.el, viewport ),
'It should return true when only the top-left of the element is within the viewport' );
viewport.top = 40;
viewport.left = 40;
viewport.right = 50;
viewport.bottom = 50;
assert.ok( mw.viewport.isElementInViewport( this.el, viewport ),
'It should return true when only the bottom-right is within the viewport' );
viewport.top = 30;
viewport.left = 30;
viewport.right = 35;
viewport.bottom = 35;
assert.ok( mw.viewport.isElementInViewport( this.el, viewport ),
'It should return true when the element encapsulates the viewport' );
viewport.top = 0;
viewport.left = 0;
viewport.right = 19;
viewport.bottom = 19;
assert.notOk( mw.viewport.isElementInViewport( this.el, viewport ),
'It should return false when the element is not within the viewport' );
assert.ok( mw.viewport.isElementInViewport( this.el ),
'It should default to the window object if no viewport is given' );
} );
QUnit.test( 'isElementInViewport with scrolled page', function ( assert ) {
var viewport = {
top: 2000,
left: 0,
right: 1000,
bottom: 2500
},
el = $( '<div />' )
.appendTo( '#qunit-fixture' )
.width( 20 )
.height( 20 )
.offset( {
top: 2300,
left: 20
} )
.get( 0 );
window.scrollTo( viewport.left, viewport.top );
assert.ok( mw.viewport.isElementInViewport( el, viewport ),
'It should return true when the element is fully enclosed in the ' +
'viewport even when the page is scrolled down' );
window.scrollTo( 0, 0 );
} );
QUnit.test( 'isElementCloseToViewport', function ( assert ) {
var
viewport = {
top: 90,
left: 90,
right: 100,
bottom: 100
},
distantElement = $( '<div />' )
.appendTo( '#qunit-fixture' )
.width( 20 )
.height( 20 )
.offset( {
top: 220,
left: 20
} )
.get( 0 );
assert.ok( mw.viewport.isElementCloseToViewport( this.el, 60, viewport ),
'It should return true when the element is within the given threshold away' );
assert.notOk( mw.viewport.isElementCloseToViewport( this.el, 20, viewport ),
'It should return false when the element is further than the given threshold away' );
assert.notOk( mw.viewport.isElementCloseToViewport( distantElement ),
'It should default to a threshold of 50px and the window\'s viewport' );
} );
}( mediaWiki, jQuery ) );
|
