Skip to content

Commit b6524f7

Browse files
ericfericf
committed
Merge branch 'doesMQMatch' of github.com:tilomitra/css-media-match into match-impl
Conflicts: index.js
2 parents 45272e8 + fa2bd00 commit b6524f7

File tree

2 files changed

+320
-2
lines changed

2 files changed

+320
-2
lines changed

‎package.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Determines if a given CSS Media Query matches a set of values.",
55
"main": "index.js",
66
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
7+
"test": "node_modules/.bin/mocha -R spec"
88
},
99
"repository": {
1010
"type": "git",
@@ -22,5 +22,9 @@
2222
"bugs": {
2323
"url": "https://github.com/ericf/css-media-match/issues"
2424
},
25-
"homepage": "https://github.com/ericf/css-media-match"
25+
"homepage": "https://github.com/ericf/css-media-match",
26+
"devDependencies": {
27+
"mocha": "~1.16.2",
28+
"chai": "~1.8.1"
29+
}
2630
}

‎test/unit-tests.js

+314
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
var assert = require('chai').assert,
2+
doesMQMatch = require('../').match;
3+
4+
describe('#doesMQMatch() media `type`', function () {
5+
describe('Type', function(){
6+
it('should return true for a correct match', function(){
7+
assert.equal(doesMQMatch('screen and (color)', {type: 'screen', color: 1}), true);
8+
});
9+
10+
it('should return true for when type === all', function(){
11+
assert.equal(doesMQMatch('screen and (min-width: 48em)', {type: 'all', width: 1000}), true);
12+
});
13+
14+
it('should return false for an incorrect match', function(){
15+
assert.equal(doesMQMatch('screen and (min-width: 48em)', {type: 'handheld'}), false);
16+
});
17+
18+
it('should return true when no type values are passed in', function(){
19+
assert.equal(doesMQMatch('screen and (min-width: 48em)', {width: 1000}), true);
20+
});
21+
});
22+
});
23+
24+
25+
describe('#doesMQMatch() `not` operator', function () {
26+
describe('Type', function(){
27+
it('should return false when it matches up', function(){
28+
assert.equal(doesMQMatch('not screen and (color)', {type: 'screen', color: 1}), false);
29+
});
30+
31+
it('should not disrupt an OR query', function(){
32+
assert.equal(doesMQMatch('not screen and (color), screen and (min-height: 48em)', {type: 'screen', height: 1000}), true);
33+
});
34+
35+
it('should return false for when type === all', function(){
36+
assert.equal(doesMQMatch('not all and (min-width: 48em)', {type: 'all', width: 1000}), false);
37+
});
38+
39+
it('should return true for inverted value', function(){
40+
assert.equal(doesMQMatch('not screen and (min-width: 48em)', {width: '24em'}), true);
41+
});
42+
});
43+
});
44+
45+
describe('#doesMQMatch() Media Features', function(){
46+
describe('Width', function(){
47+
it('should return true for a width higher than a min-width', function(){
48+
assert.equal(doesMQMatch('(min-width: 48em)', {width: '80em'}), true);
49+
});
50+
51+
it('should return false for a width higher than a min-width', function(){
52+
assert.equal(doesMQMatch('(min-width: 48em)', {width: '20em'}), false);
53+
});
54+
55+
it('should return false when no width values are passed in', function(){
56+
assert.equal(doesMQMatch('(min-width: 48em)', {resolution: 72}), false);
57+
});
58+
59+
it('should return true with multiple properties', function(){
60+
assert.equal(doesMQMatch('(min-width: 48em) and (color)', {width: '60em'}), true);
61+
});
62+
63+
it('should convert units properly', function(){
64+
assert.equal(doesMQMatch('(min-width: 30em) and (color)', {width: 1024}), true);
65+
});
66+
});
67+
68+
describe('Height', function(){
69+
it('should return true for a height higher than a min-height', function(){
70+
assert.equal(doesMQMatch('(min-height: 48em)', {height: '80em'}), true);
71+
});
72+
73+
it('should return false for a height higher than a min-height', function(){
74+
assert.equal(doesMQMatch('(min-height: 48em)', {height: '20em'}), false);
75+
});
76+
77+
it('should return false when no height values are passed in', function(){
78+
assert.equal(doesMQMatch('(min-height: 48em)', {resolution: 72}), false);
79+
});
80+
81+
it('should return true with multiple properties', function(){
82+
assert.equal(doesMQMatch('(min-height: 48em) and (color)', {height: '60em'}), true);
83+
});
84+
85+
it('should convert units properly', function(){
86+
assert.equal(doesMQMatch('(min-height: 30em) and (color)', {height: 1024}), true);
87+
});
88+
});
89+
90+
91+
describe('Device-Width', function(){
92+
it('should return true for a device-width higher than a min-device-width', function(){
93+
assert.equal(doesMQMatch('(min-device-width: 48em)', {'device-width': '80em'}), true);
94+
});
95+
96+
it('should return false for a device-width higher than a min-device-width', function(){
97+
assert.equal(doesMQMatch('(min-device-width: 48em)', {'device-width': '20em'}), false);
98+
});
99+
100+
it('should return false when no device-width values are passed in', function(){
101+
assert.equal(doesMQMatch('(min-device-width: 48em)', {resolution: 72}), false);
102+
});
103+
104+
it('should return true with multiple properties', function(){
105+
assert.equal(doesMQMatch('(min-device-width: 48em) and (color)', {'device-width': '60em'}), true);
106+
});
107+
108+
it('should convert units properly', function(){
109+
assert.equal(doesMQMatch('(min-device-width: 30em) and (color)', {'device-width': 1024}), true);
110+
});
111+
});
112+
113+
describe('Device-Height', function(){
114+
it('should return true for a device-height higher than a min-device-height', function(){
115+
assert.equal(doesMQMatch('(min-device-height: 48em)', {'device-height': '80em'}), true);
116+
});
117+
118+
it('should return false for a device-height higher than a min-device-height', function(){
119+
assert.equal(doesMQMatch('(min-device-height: 48em)', {'device-height': '20em'}), false);
120+
});
121+
122+
it('should return false when no device-height values are passed in', function(){
123+
assert.equal(doesMQMatch('(min-device-height: 48em)', {resolution: 72}), false);
124+
});
125+
126+
it('should return true with multiple properties', function(){
127+
assert.equal(doesMQMatch('(min-device-height: 48em) and (color)', {'device-height': '60em'}), true);
128+
});
129+
130+
it('should convert units properly', function(){
131+
assert.equal(doesMQMatch('(min-device-height: 30em) and (color)', {'device-height': 1024}), true);
132+
});
133+
});
134+
135+
136+
137+
describe('Color', function () {
138+
it('should return true for a color higher than a min-color', function(){
139+
assert.equal(doesMQMatch('(min-color: 2)', {color: 3 }), true);
140+
});
141+
142+
it('should return false for a color higher than a max-color', function(){
143+
assert.equal(doesMQMatch('(max-color: 2)', {color: 4 }), false);
144+
});
145+
146+
it('should return false if color isnt passed in', function(){
147+
assert.equal(doesMQMatch('max-width: 767px and (color)', {width: 300}), false);
148+
});
149+
150+
it('should work for undefined color values', function(){
151+
assert.equal(doesMQMatch('(color)', {color: 4 }), true);
152+
assert.equal(doesMQMatch('(color)', {color: 0 }), false);
153+
});
154+
});
155+
156+
describe('Color-Index', function () {
157+
it('should return true for a color-index higher than a min-color-index', function(){
158+
assert.equal(doesMQMatch('(min-color-index: 1)', {'color-index': 256 }), true);
159+
});
160+
161+
it('should return false for a color-index higher than a max-color-index', function(){
162+
assert.equal(doesMQMatch('(max-color-index: 256)', {'color-index': 512 }), false);
163+
});
164+
165+
it('should return false if color-index isnt passed in', function(){
166+
assert.equal(doesMQMatch('max-width: 767px and (color-index)', {width: 300}), false);
167+
});
168+
169+
it('should work for undefined color-index values', function(){
170+
assert.equal(doesMQMatch('(color-index)', {'color-index': 1 }), true);
171+
assert.equal(doesMQMatch('(color-index)', {'color-index': 0 }), false);
172+
});
173+
});
174+
175+
176+
describe('Monochrome', function () {
177+
it('should return true for a monochrome higher than a min-monochrome', function(){
178+
assert.equal(doesMQMatch('(min-monochrome: 1)', {monochrome: 3 }), true);
179+
});
180+
181+
it('should return false for a monochrome higher than a max-monochrome', function(){
182+
assert.equal(doesMQMatch('(max-monochrome: 3)', {monochrome: 4 }), false);
183+
});
184+
185+
it('should return false if monochrome isnt passed in', function(){
186+
assert.equal(doesMQMatch('max-width: 767px and (monochrome)', {width: 300}), false);
187+
});
188+
189+
it('should work for undefined monochrome values', function(){
190+
assert.equal(doesMQMatch('(monochrome)', {'monochrome': 3 }), true);
191+
assert.equal(doesMQMatch('(monochrome)', {'monochrome': 0 }), false);
192+
});
193+
});
194+
195+
196+
describe('Resolution', function () {
197+
it('should return true for a resolution higher than a min-resolution', function(){
198+
assert.equal(doesMQMatch('(min-resolution: 50dpi)', {resolution: 72 }), true);
199+
});
200+
201+
it('should return false for a resolution higher than a max-resolution', function(){
202+
assert.equal(doesMQMatch('(max-resolution: 72dpi)', {resolution: 300 }), false);
203+
});
204+
205+
it('should return false if resolution isnt passed in', function(){
206+
assert.equal(doesMQMatch('(max-resolution: 72dpi)', {width: 300}), false);
207+
});
208+
209+
it('should convert units properly', function(){
210+
assert.equal(doesMQMatch('(min-resolution: 72dpi)', {resolution: '75dpcm' }), false);
211+
});
212+
});
213+
214+
describe('Aspect-Ratio', function () {
215+
it('should return true for an aspect-ratio higher than a min-aspect-ratio', function(){
216+
assert.equal(doesMQMatch('(min-aspect-ratio: 4/3)', {'aspect-ratio': '16/9' }), true);
217+
});
218+
219+
it('should return false for an aspect-ratio higher than a max-aspect-ratio', function(){
220+
assert.equal(doesMQMatch('(max-aspect-ratio: 4/3)', {'aspect-ratio': '16/9' }), false);
221+
});
222+
223+
it('should return false if aspect-ratio isnt passed in', function(){
224+
assert.equal(doesMQMatch('(max-aspect-ratio: 72dpi)', {width: 300}), false);
225+
});
226+
227+
it('should work with strings and numbers', function(){
228+
assert.equal(doesMQMatch('(min-aspect-ratio: 2560/1440)', {'aspect-ratio': 4/3 }), false);
229+
});
230+
});
231+
232+
describe('Scan', function () {
233+
it('should return true for a correct match', function(){
234+
assert.equal(doesMQMatch('tv and (scan: progressive)', {scan: 'progressive' }), true);
235+
});
236+
237+
it('should return false for an incorrect match', function(){
238+
assert.equal(doesMQMatch('tv and (scan: progressive)', {scan: 'interlace' }), false);
239+
});
240+
});
241+
242+
describe('Orientation', function () {
243+
it('should return true for a correct match', function(){
244+
assert.equal(doesMQMatch('screen and (orientation: portrait)', {orientation: 'portrait' }), true);
245+
});
246+
247+
it('should return false for an incorrect match', function(){
248+
assert.equal(doesMQMatch('screen and (orientation: landscape)', {orientation: 'portrait' }), false);
249+
});
250+
251+
it('should return false if orientation isnt passed in', function(){
252+
assert.equal(doesMQMatch('screen and (orientation: landscape)', {width: '50em' }), false);
253+
});
254+
});
255+
256+
describe('Grid', function () {
257+
it('should return true for a correct match', function(){
258+
assert.equal(doesMQMatch('handheld and (grid)', {grid: true }), true);
259+
});
260+
261+
it('should return false if grid isnt passed in', function(){
262+
assert.equal(doesMQMatch('tv and (grid)', {scan: 'interlace' }), false);
263+
});
264+
265+
it('should return false if grid is explictly set to false', function(){
266+
assert.equal(doesMQMatch('tv and (grid)', {scan: 'interlace', grid: false }), false);
267+
});
268+
});
269+
});
270+
271+
describe('#doesMQMatch() Integration Tests', function () {
272+
describe('Real World Use Cases (mostly AND)', function(){
273+
it('should return true because of width and type match', function(){
274+
assert.equal(doesMQMatch('screen and (min-width: 767px)', {type: 'screen', width: 980}), true);
275+
});
276+
277+
it('should return true because of width is within bounds', function(){
278+
assert.equal(doesMQMatch('screen and (min-width: 767px) and (max-width: 979px)', {type: 'screen', width: 800}), true);
279+
});
280+
281+
it('should return false because width is out of bounds', function(){
282+
assert.equal(doesMQMatch('screen and (min-width: 767px) and (max-width: 979px)', {type: 'screen', width: 980}), false);
283+
});
284+
285+
it('should return false since monochrome is not specified', function(){
286+
assert.equal(doesMQMatch('screen and (monochrome)', {width: 980}), false);
287+
});
288+
289+
it('should return true since color > 0', function(){
290+
assert.equal(doesMQMatch('screen and (color)', {type: 'all', color: 1}), true);
291+
});
292+
293+
it('should return false since color = 0', function(){
294+
assert.equal(doesMQMatch('screen and (color)', {type: 'all', color: 0}), false);
295+
});
296+
297+
});
298+
299+
describe('Grouped Media Queries (OR)', function(){
300+
it('should return true because of color', function(){
301+
assert.equal(doesMQMatch('screen and (min-width: 767px), screen and (color)', {type: 'screen', color: 1}), true);
302+
});
303+
304+
it('should return true because of width and type', function(){
305+
assert.equal(doesMQMatch('screen and (max-width: 1200px), handheld and (monochrome)', {type: 'screen', width: 1100}), true);
306+
});
307+
308+
it('should return false because of monochrome mis-match', function(){
309+
assert.equal(doesMQMatch('screen and (max-width: 1200px), handheld and (monochrome)', {type: 'screen', monochrome: 0}), false);
310+
});
311+
312+
});
313+
});
314+

0 commit comments

Comments
 (0)