-
Notifications
You must be signed in to change notification settings - Fork 3.4k
/
tests.js
169 lines (133 loc) · 4.8 KB
/
tests.js
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
/*
Respond.js unit tests - based on qUnit
*/
window.onload = function(){
function getNormalizedUrl( filename ) {
var url = window.location.href;
return url.substr( 0, url.lastIndexOf( '/' ) + 1 ) + ( filename || '' );
}
// ajax doesn’t finish if you queue them while respond is already ajaxing
function queueRequest( callback ) {
var clearQueue = window.setInterval( function() {
if( !respond.queue.length ) {
window.clearInterval( clearQueue );
callback();
}
}, 50 );
}
if( !window.opener ){
document.documentElement.className = "launcher";
document.getElementById("launcher").innerHTML = '<p>Tests must run in a popup window. <a href="suite.html" id="suitelink">Open test suite</a></p>';
document.getElementById( "suitelink" ).onclick = function(){
window.open( location.href + "?" + Math.random(), 'win', 'width=800,height=600,scrollbars=1,resizable=1' );
return false;
};
}
else {
var testElem = document.getElementById("testelem");
//check if a particular style has applied properly
function widthApplied( val ){
return testElem.offsetWidth === val;
}
function heightApplied( val ){
return testElem.offsetHeight === val;
}
// A short snippet for detecting versions of IE in JavaScript - author: @padolsey
var ie = (function(){
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());
window.moveTo(0,0);
/* TESTS HERE */
asyncTest( 'Styles not nested in media queries apply as expected', function() {
window.resizeTo(200,600);
setTimeout(function(){
ok( widthApplied( 50 ), "testelem is 50px wide when window is 200px wide" );
start();
}, 900);
});
asyncTest( 'styles within min-width media queries apply properly', function() {
window.resizeTo(520,600);
setTimeout(function(){
ok( widthApplied( 150 ), 'testelem is 150px wide when window is 500px wide' );
start();
}, 900);
});
// This test is for a feature in IE7 and up
if( ie >= 7 ){
asyncTest( "attribute selectors still work (where supported) after respond runs its course", function() {
window.resizeTo(520,600);
setTimeout(function(){
ok( heightApplied( 200 ), "testelem is 200px tall when window is 500px wide" );
start();
}, 900);
});
}
asyncTest( 'styles within max-width media queries apply properly', function() {
window.resizeTo(300,600);
setTimeout(function(){
ok( heightApplied( 150 ), 'testelem is 150px tall when window is under 480px wide' );
start();
}, 900);
});
asyncTest( 'min and max-width media queries that use EM units apply properly', function() {
window.resizeTo(560,600);
setTimeout(function(){
ok( widthApplied( 12 ), 'testelem is 150px wide when window is 500px wide' );
start();
}, 900);
});
asyncTest( "styles within a min-width media query with an \"only\" keyword apply properly", function() {
window.resizeTo(650,600);
setTimeout(function(){
ok( widthApplied( 250 ), "testelem is 250px wide when window is 650px wide" );
start();
}, 900);
});
asyncTest( "styles within a media query with a one true query among other false queries apply properly", function() {
window.resizeTo(800,600);
setTimeout(function(){
ok( widthApplied( 350 ), "testelem is 350px wide when window is 750px wide" );
start();
}, 900);
});
asyncTest( "Styles within a false media query do not apply", function() {
window.resizeTo(800,600);
setTimeout(function(){
ok( !widthApplied( 500 ), "testelem is not 500px wide when window is 800px wide" );
start();
}, 900);
});
asyncTest( "stylesheets with a media query in a media attribute apply when they should", function() {
window.resizeTo(1300,600);
setTimeout(function(){
ok( widthApplied( 16 ), "testelem is 16px wide when window is 1300px wide" );
start();
}, 900);
});
asyncTest( "stylesheets with an EM-based media query in a media attribute apply when they should", function() {
window.resizeTo(1500,600);
setTimeout(function(){
ok( widthApplied( 25 ), "testelem is 25px wide when window is > 1400px wide" );
start();
}, 900);
});
// This test will only run on IE8 since the respond ajax stuff isn’t exposed yet
asyncTest( 'Test keyframe animation inside of media query', function() {
queueRequest( function() {
respond.ajax( getNormalizedUrl( 'test-with-keyframe.css' ),
function( data ) {
ok( data.replace( respond.regex.keyframes ).match( /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi ), 'A keyframe animation doesn\'t bust the media regex.' );
start();
});
});
});
}
};