UNPKG

retinafy

Version:

Use JS to choose <img> src based on devicePixelRatio

alanshaw/retinafy

73 lines (58 loc) • 3.49 kB
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
var test = require("tap").test , retinafy = require("../") test("src is respolved as expected", function (t) { function createImg (attrs) { var el = { tagName: "IMG", getAttribute: function (attr) { return attrs[attr] } } Object.keys(attrs).forEach(function (attr) { el[attr] = attrs[attr] }) return el } // element, devicePixelRatio, expected src var data = [ [createImg({src: "src.jpg"}), undefined, "src.jpg"] , [createImg({src: "src.jpg"}), 1, "src.jpg"] , [createImg({src: "src.jpg"}), 1.5, "src.jpg"] , [createImg({src: "src.jpg"}), 2, "src.jpg"] , [createImg({"data-src": "data-src.jpg"}), undefined, "data-src.jpg"] , [createImg({"data-src": "data-src.jpg"}), 1, "data-src.jpg"] , [createImg({"data-src": "data-src.jpg"}), 1.5, "data-src.jpg"] , [createImg({"data-src": "data-src.jpg"}), 2, "data-src.jpg"] , [createImg({src: "src.gif", "data-src": "data-src.jpg"}), undefined, "data-src.jpg"] , [createImg({src: "src.gif", "data-src": "data-src.jpg"}), 1, "data-src.jpg"] , [createImg({src: "src.gif", "data-src": "data-src.jpg"}), 1.5, "data-src.jpg"] , [createImg({src: "src.gif", "data-src": "data-src.jpg"}), 2, "data-src.jpg"] , [createImg({src: "src.gif", "data-src-3x": "data-src-3x.jpg"}), undefined, "src.gif"] , [createImg({src: "src.gif", "data-src-3x": "data-src-3x.jpg"}), 1, "src.gif"] , [createImg({src: "src.gif", "data-src-3x": "data-src-3x.jpg"}), 1.5, "src.gif"] , [createImg({src: "src.gif", "data-src-3x": "data-src-3x.jpg"}), 2, "src.gif"] , [createImg({"data-src-1x": "data-src-1x.jpg"}), undefined, "data-src-1x.jpg"] , [createImg({"data-src-1x": "data-src-1x.jpg"}), 1, "data-src-1x.jpg"] , [createImg({"data-src-1x": "data-src-1x.jpg"}), 1.5, "data-src-1x.jpg"] , [createImg({"data-src-1x": "data-src-1x.jpg"}), 2, "data-src-1x.jpg"] , [createImg({src: "src.gif", "data-src-1x": "data-src-1x.jpg"}), undefined, "data-src-1x.jpg"] , [createImg({src: "src.gif", "data-src-1x": "data-src-1x.jpg"}), 1, "data-src-1x.jpg"] , [createImg({src: "src.gif", "data-src-1x": "data-src-1x.jpg"}), 1.5, "data-src-1x.jpg"] , [createImg({src: "src.gif", "data-src-1x": "data-src-1x.jpg"}), 2, "data-src-1x.jpg"] , [createImg({src: "src.gif", "data-src": "data-src.jpg", "data-src-1x": "data-src-1x.jpg"}), undefined, "data-src-1x.jpg"] , [createImg({src: "src.gif", "data-src": "data-src.jpg", "data-src-1x": "data-src-1x.jpg"}), 1, "data-src-1x.jpg"] , [createImg({src: "src.gif", "data-src": "data-src.jpg", "data-src-1x": "data-src-1x.jpg"}), 1.5, "data-src-1x.jpg"] , [createImg({src: "src.gif", "data-src": "data-src.jpg", "data-src-1x": "data-src-1x.jpg"}), 2, "data-src-1x.jpg"] , [createImg({src: "src.gif", "data-src-1_5x": "data-src-1_5x.jpg", "data-src-2x": "data-src-2x.jpg"}), undefined, "src.gif"] , [createImg({src: "src.gif", "data-src-1_5x": "data-src-1_5x.jpg", "data-src-2x": "data-src-2x.jpg"}), 1, "src.gif"] , [createImg({src: "src.gif", "data-src-1_5x": "data-src-1_5x.jpg", "data-src-2x": "data-src-2x.jpg"}), 1.5, "data-src-1_5x.jpg"] , [createImg({src: "src.gif", "data-src-1_5x": "data-src-1_5x.jpg", "data-src-2x": "data-src-2x.jpg"}), 2, "data-src-2x.jpg"] ] t.plan(data.length) data.forEach(function (d) { global.devicePixelRatio = d[1] retinafy(d[0]) t.equal(d[0].src, d[2]) }) t.end() })