react-datocms 4.0.5 → 4.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Image/__tests__/index.test.js +12 -0
- package/dist/cjs/Image/__tests__/index.test.js.map +1 -1
- package/dist/cjs/Image/index.js +7 -4
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/esm/Image/__tests__/index.test.js +12 -0
- package/dist/esm/Image/__tests__/index.test.js.map +1 -1
- package/dist/esm/Image/index.js +7 -4
- package/dist/esm/Image/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Image/__tests__/__snapshots__/index.test.tsx.snap +407 -0
- package/src/Image/__tests__/index.test.tsx +21 -0
- package/src/Image/index.tsx +8 -2
|
@@ -41,6 +41,12 @@ var minimalData = {
|
|
|
41
41
|
src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
|
|
42
42
|
width: 750
|
|
43
43
|
};
|
|
44
|
+
var minimalDataWithRelativeUrl = {
|
|
45
|
+
base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
|
|
46
|
+
height: 421,
|
|
47
|
+
src: '/205/image.png?ar=16%3A9&fit=crop&w=750',
|
|
48
|
+
width: 750
|
|
49
|
+
};
|
|
44
50
|
describe('Image', function () {
|
|
45
51
|
// intersectionThreshold is an hack to make tests work
|
|
46
52
|
// we need the library to generate a different IntersectionObserver for each test
|
|
@@ -66,6 +72,12 @@ describe('Image', function () {
|
|
|
66
72
|
wrapper.update();
|
|
67
73
|
expect(wrapper).toMatchSnapshot();
|
|
68
74
|
});
|
|
75
|
+
it('renders the image (relative URL)', function () {
|
|
76
|
+
var wrapper = (0, enzyme_1.mount)(React.createElement(index_1.Image, { data: minimalDataWithRelativeUrl, layout: layout, intersectionThreshold: 0.2 }));
|
|
77
|
+
(0, test_utils_1.mockAllIsIntersecting)(true);
|
|
78
|
+
wrapper.update();
|
|
79
|
+
expect(wrapper).toMatchSnapshot();
|
|
80
|
+
});
|
|
69
81
|
describe('image loaded', function () {
|
|
70
82
|
it('shows the image', function () {
|
|
71
83
|
var wrapper = (0, enzyme_1.mount)(React.createElement(index_1.Image, { data: data, layout: layout, intersectionThreshold: 0.3 }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Image/__tests__/index.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,iCAA+B;AAC/B,iCAA+B;AAC/B,kCAAiC;AACjC,qEAA+E;AAE/E,IAAM,IAAI,GAAG;IACX,GAAG,EAAE,cAAc;IACnB,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EACJ,igBAAigB;IACngB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,iCAAiC;IACxC,GAAG,EAAE,uEAAuE;IAC5E,MAAM,EACJ,8pBAA8pB;IAChqB,KAAK,EAAE,kCAAkC;IACzC,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,IAAM,WAAW,GAAG;IAClB,MAAM,EACJ,igBAAigB;IACngB,MAAM,EAAE,GAAG;IACX,GAAG,EAAE,uEAAuE;IAC5E,KAAK,EAAE,GAAG;CACX,CAAC;AAEF,QAAQ,CAAC,OAAO,EAAE;IAChB,sDAAsD;IACtD,iFAAiF;IACjF,wDAAwD;IAEvD,CAAC,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,CAAW,CAAC,OAAO,CAAC,UAAC,MAAM;QACrE,QAAQ,CAAC,iBAAU,MAAM,CAAE,EAAE;YAC3B,QAAQ,CAAC,aAAa,EAAE;gBACtB,EAAE,CAAC,2BAA2B,EAAE;oBAC9B,IAAM,OAAO,GAAG,IAAA,cAAK,EACnB,oBAAC,aAAK,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,GAAI,CAClE,CAAC;oBACF,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpC,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,SAAS,EAAE;gBAClB,EAAE,CAAC,mBAAmB,EAAE;oBACtB,IAAM,OAAO,GAAG,IAAA,cAAK,EACnB,oBAAC,aAAK,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,GAAI,CAClE,CAAC;oBACF,IAAA,kCAAqB,EAAC,IAAI,CAAC,CAAC;oBAC5B,OAAO,CAAC,MAAM,EAAE,CAAC;oBACjB,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpC,CAAC,CAAC,CAAC;gBAEH,EAAE,CAAC,kCAAkC,EAAE;oBACrC,IAAM,OAAO,GAAG,IAAA,cAAK,EACnB,oBAAC,aAAK,IACJ,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,MAAM,EACd,qBAAqB,EAAE,GAAG,GAC1B,CACH,CAAC;oBACF,IAAA,kCAAqB,EAAC,IAAI,CAAC,CAAC;oBAC5B,OAAO,CAAC,MAAM,EAAE,CAAC;oBACjB,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpC,CAAC,CAAC,CAAC;gBAEH,QAAQ,CAAC,cAAc,EAAE;oBACvB,EAAE,CAAC,iBAAiB,EAAE;wBACpB,IAAM,OAAO,GAAG,IAAA,cAAK,EACnB,oBAAC,aAAK,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,GAAG,GAAI,CAClE,CAAC;wBACF,IAAA,kCAAqB,EAAC,IAAI,CAAC,CAAC;wBAC5B,OAAO,CAAC,MAAM,EAAE,CAAC;wBACjB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;wBAC5C,OAAO,CAAC,MAAM,EAAE,CAAC;wBACjB,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpC,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Image/__tests__/index.test.tsx"],"names":[],"mappings":"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"}
|
package/dist/cjs/Image/index.js
CHANGED
|
@@ -64,13 +64,14 @@ var imageShowStrategy = function (_a) {
|
|
|
64
64
|
}
|
|
65
65
|
return true;
|
|
66
66
|
};
|
|
67
|
+
var bogusBaseUrl = 'https://example.com/';
|
|
67
68
|
var buildSrcSet = function (src, width, candidateMultipliers) {
|
|
68
69
|
if (!(src && width)) {
|
|
69
70
|
return undefined;
|
|
70
71
|
}
|
|
71
72
|
return candidateMultipliers
|
|
72
73
|
.map(function (multiplier) {
|
|
73
|
-
var url = new URL(src);
|
|
74
|
+
var url = new URL(src, bogusBaseUrl);
|
|
74
75
|
if (multiplier !== 1) {
|
|
75
76
|
url.searchParams.set('dpr', "".concat(multiplier));
|
|
76
77
|
var maxH = url.searchParams.get('max-h');
|
|
@@ -86,7 +87,7 @@ var buildSrcSet = function (src, width, candidateMultipliers) {
|
|
|
86
87
|
if (finalWidth < 50) {
|
|
87
88
|
return null;
|
|
88
89
|
}
|
|
89
|
-
return "".concat(url.toString(), " ").concat(finalWidth, "w");
|
|
90
|
+
return "".concat(url.toString().replace(bogusBaseUrl, '/'), " ").concat(finalWidth, "w");
|
|
90
91
|
})
|
|
91
92
|
.filter(Boolean)
|
|
92
93
|
.join(',');
|
|
@@ -127,7 +128,9 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
127
128
|
left: 0,
|
|
128
129
|
top: 0,
|
|
129
130
|
width: '100%',
|
|
130
|
-
height: '100%'
|
|
131
|
+
height: '100%',
|
|
132
|
+
maxWidth: 'none',
|
|
133
|
+
maxHeight: 'none'
|
|
131
134
|
};
|
|
132
135
|
var addImage = imageAddStrategy({
|
|
133
136
|
lazyLoad: lazyLoad,
|
|
@@ -147,7 +150,7 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
147
150
|
// hardware acceleration is triggered. This results in the browser trying to render the
|
|
148
151
|
// placeholder with your GPU, causing blurred edges. Solution: style the placeholder
|
|
149
152
|
// so the edges overflow the container
|
|
150
|
-
position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: '110%' }, placeholderStyle) })) : null;
|
|
153
|
+
position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: '110%', maxWidth: 'none', maxHeight: 'none' }, placeholderStyle) })) : null;
|
|
151
154
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
152
155
|
var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);
|
|
153
156
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\"></svg>");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAOe;AACf,2EAAwD;AACxD,qDAA0C;AAE1C,IAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAE5C,IAAM,+BAA+B,GAAG,KAAK;IAC3C,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,oBAAoB,CAAC;AAqG3C,IAAM,gBAAgB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA;IAClD,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,IAAI,MAAM,CAAC;KACzB;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,EAA2B;QAAzB,QAAQ,cAAA,EAAE,MAAM,YAAA;IAC3C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,UAClB,GAA8B,EAC9B,KAAyB,EACzB,oBAA8B;IAE9B,IAAI,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,EAAE;QACnB,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,oBAAoB;SACxB,GAAG,CAAC,UAAC,UAAU;QACd,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -20,6 +20,12 @@ var minimalData = {
|
|
|
20
20
|
src: 'https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750',
|
|
21
21
|
width: 750
|
|
22
22
|
};
|
|
23
|
+
var minimalDataWithRelativeUrl = {
|
|
24
|
+
base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
|
|
25
|
+
height: 421,
|
|
26
|
+
src: '/205/image.png?ar=16%3A9&fit=crop&w=750',
|
|
27
|
+
width: 750
|
|
28
|
+
};
|
|
23
29
|
describe('Image', function () {
|
|
24
30
|
// intersectionThreshold is an hack to make tests work
|
|
25
31
|
// we need the library to generate a different IntersectionObserver for each test
|
|
@@ -45,6 +51,12 @@ describe('Image', function () {
|
|
|
45
51
|
wrapper.update();
|
|
46
52
|
expect(wrapper).toMatchSnapshot();
|
|
47
53
|
});
|
|
54
|
+
it('renders the image (relative URL)', function () {
|
|
55
|
+
var wrapper = mount(React.createElement(Image, { data: minimalDataWithRelativeUrl, layout: layout, intersectionThreshold: 0.2 }));
|
|
56
|
+
mockAllIsIntersecting(true);
|
|
57
|
+
wrapper.update();
|
|
58
|
+
expect(wrapper).toMatchSnapshot();
|
|
59
|
+
});
|
|
48
60
|
describe('image loaded', function () {
|
|
49
61
|
it('shows the image', function () {
|
|
50
62
|
var wrapper = mount(React.createElement(Image, { data: data, layout: layout, intersectionThreshold: 0.3 }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Image/__tests__/index.test.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../../../../src/Image/__tests__/index.test.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/Image/index.js
CHANGED
|
@@ -42,13 +42,14 @@ var imageShowStrategy = function (_a) {
|
|
|
42
42
|
}
|
|
43
43
|
return true;
|
|
44
44
|
};
|
|
45
|
+
var bogusBaseUrl = 'https://example.com/';
|
|
45
46
|
var buildSrcSet = function (src, width, candidateMultipliers) {
|
|
46
47
|
if (!(src && width)) {
|
|
47
48
|
return undefined;
|
|
48
49
|
}
|
|
49
50
|
return candidateMultipliers
|
|
50
51
|
.map(function (multiplier) {
|
|
51
|
-
var url = new URL(src);
|
|
52
|
+
var url = new URL(src, bogusBaseUrl);
|
|
52
53
|
if (multiplier !== 1) {
|
|
53
54
|
url.searchParams.set('dpr', "".concat(multiplier));
|
|
54
55
|
var maxH = url.searchParams.get('max-h');
|
|
@@ -64,7 +65,7 @@ var buildSrcSet = function (src, width, candidateMultipliers) {
|
|
|
64
65
|
if (finalWidth < 50) {
|
|
65
66
|
return null;
|
|
66
67
|
}
|
|
67
|
-
return "".concat(url.toString(), " ").concat(finalWidth, "w");
|
|
68
|
+
return "".concat(url.toString().replace(bogusBaseUrl, '/'), " ").concat(finalWidth, "w");
|
|
68
69
|
})
|
|
69
70
|
.filter(Boolean)
|
|
70
71
|
.join(',');
|
|
@@ -105,7 +106,9 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
105
106
|
left: 0,
|
|
106
107
|
top: 0,
|
|
107
108
|
width: '100%',
|
|
108
|
-
height: '100%'
|
|
109
|
+
height: '100%',
|
|
110
|
+
maxWidth: 'none',
|
|
111
|
+
maxHeight: 'none'
|
|
109
112
|
};
|
|
110
113
|
var addImage = imageAddStrategy({
|
|
111
114
|
lazyLoad: lazyLoad,
|
|
@@ -125,7 +128,7 @@ export var Image = forwardRef(function (_a, ref) {
|
|
|
125
128
|
// hardware acceleration is triggered. This results in the browser trying to render the
|
|
126
129
|
// placeholder with your GPU, causing blurred edges. Solution: style the placeholder
|
|
127
130
|
// so the edges overflow the container
|
|
128
|
-
position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: '110%' }, placeholderStyle) })) : null;
|
|
131
|
+
position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: '110%', maxWidth: 'none', maxHeight: 'none' }, placeholderStyle) })) : null;
|
|
129
132
|
var width = data.width, aspectRatio = data.aspectRatio;
|
|
130
133
|
var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);
|
|
131
134
|
var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\"></svg>");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,UAAU,EACV,WAAW,EAEX,MAAM,EACN,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAE5C,IAAM,+BAA+B,GAAG,KAAK;IAC3C,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,oBAAoB,CAAC;AAqG3C,IAAM,gBAAgB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA;IAClD,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,IAAI,MAAM,CAAC;KACzB;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,EAA2B;QAAzB,QAAQ,cAAA,EAAE,MAAM,YAAA;IAC3C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,UAClB,GAA8B,EAC9B,KAAyB,EACzB,oBAA8B;IAE9B,IAAI,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,EAAE;QACnB,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,oBAAoB;SACxB,GAAG,CAAC,UAAC,UAAU;QACd,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,UAAU,EACV,WAAW,EAEX,MAAM,EACN,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAE5C,IAAM,+BAA+B,GAAG,KAAK;IAC3C,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,oBAAoB,CAAC;AAqG3C,IAAM,gBAAgB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA;IAClD,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,IAAI,MAAM,CAAC;KACzB;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,EAA2B;QAAzB,QAAQ,cAAA,EAAE,MAAM,YAAA;IAC3C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG,sBAAsB,CAAC;AAE5C,IAAM,WAAW,GAAG,UAClB,GAA8B,EAC9B,KAAyB,EACzB,oBAA8B;IAE9B,IAAI,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,EAAE;QACnB,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,oBAAoB;SACxB,GAAG,CAAC,UAAC,UAAU;QACd,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;QAEvC,IAAI,UAAU,KAAK,CAAC,EAAE;YACpB,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,UAAG,UAAU,CAAE,CAAC,CAAC;YAC7C,IAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAC3C,IAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAC3C,IAAI,IAAI,EAAE;gBACR,GAAG,CAAC,YAAY,CAAC,GAAG,CAClB,OAAO,EACP,UAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,CAAE,CAC7C,CAAC;aACH;YACD,IAAI,IAAI,EAAE;gBACR,GAAG,CAAC,YAAY,CAAC,GAAG,CAClB,OAAO,EACP,UAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,CAAE,CAC7C,CAAC;aACH;SACF;QAED,IAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC;QAElD,IAAI,UAAU,GAAG,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,UAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,cAAI,UAAU,MAAG,CAAC;IACvE,CAAC,CAAC;SACD,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAAG,UAAU,CAC7B,UACE,EAqBC,EACD,GAAG;;QArBD,SAAS,eAAA,EACT,sBAAoB,EAApB,cAAc,mBAAG,GAAG,KAAA,EACpB,oBAAoB,0BAAA,EACpB,qBAAqB,2BAAA,EACrB,kBAAkB,wBAAA,EAClB,gBAAgB,sBAAA,EAChB,gBAA4B,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAC5B,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,cAAoB,EAApB,MAAM,mBAAG,WAAW,KAAA,EACpB,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,sBAAqB,EAArB,cAAc,mBAAG,IAAI,KAAA,EACrB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,wBAAqD,EAArD,gBAAgB,mBAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAA,EACrD,oBAAoB,0BAAA,EACpB,gBAAgB,sBAAA;IAIlB,IAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC;IAE1C,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,IAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,IAAM,UAAU,GAAG;QACjB,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACX,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,8CAA8C;IAC9C,SAAS,CAAC;QACR,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACrB,OAAO;SACR;QAED,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,YAAY,EAAE;YAC9D,UAAU,EAAE,CAAC;SACd;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAED,IAAA,KAAoB,SAAS,CAAC;QAClC,SAAS,EAAE,qBAAqB,IAAI,oBAAoB,IAAI,CAAC;QAC7D,UAAU,EAAE,kBAAkB,IAAI,iBAAiB;QACnD,WAAW,EAAE,IAAI;QACjB,cAAc,EAAE,IAAI;KACrB,CAAC,EALK,OAAO,QAAA,EAAE,MAAM,QAKpB,CAAC;IAEH,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,IAAoB;QACnB,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,IAAI,GAAG,EAAE;YACN,GAA8C,CAAC,OAAO,GAAG,IAAI,CAAC;SAChE;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,IAAM,mBAAmB,GAAwB;QAC/C,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,MAAM;KAClB,CAAC;IAEF,IAAM,QAAQ,GAAG,gBAAgB,CAAC;QAChC,QAAQ,UAAA;QACR,MAAM,QAAA;QACN,MAAM,QAAA;KACP,CAAC,CAAC;IACH,IAAM,SAAS,GAAG,iBAAiB,CAAC;QAClC,QAAQ,UAAA;QACR,MAAM,QAAA;QACN,MAAM,QAAA;KACP,CAAC,CAAC;IAEH,IAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,CACpC,gCACE,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,KAAK,mCAAI,SAAS,EACvC,IAAI,EAAC,YAAY,GACjB,CACH,CAAC;IAEF,IAAM,aAAa,GAAG,CACpB,gCACE,MAAM,EACJ,MAAA,IAAI,CAAC,MAAM,mCAAI,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,gBAAgB,CAAC,EAEpE,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,KAAK,mCAAI,SAAS,GACvC,CACH,CAAC;IAEF,IAAM,UAAU,GACd,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAW,cAAc,OAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjE,IAAM,WAAW,GACf,cAAc,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAChD,6BACE,IAAI,EAAC,cAAc,iBACP,MAAM,EAClB,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,MAAA,IAAI,CAAC,MAAM,mCAAI,SAAS,EAC7B,SAAS,EAAE,oBAAoB,EAC/B,KAAK,aACH,eAAe,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,EAC1C,SAAS,WAAA,EACT,cAAc,gBAAA,EACd,UAAU,YAAA,EACV,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1B,8EAA8E;YAC9E,uFAAuF;YACvF,oFAAoF;YACpF,sCAAsC;YACtC,QAAQ,EAAE,UAAU,EACpB,IAAI,EAAE,KAAK,EACX,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,IACd,gBAAgB,IAErB,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAEH,IAAA,KAAK,GAAkB,IAAI,MAAtB,EAAE,WAAW,GAAK,IAAI,YAAT,CAAU;IACpC,IAAM,MAAM,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtE,IAAM,GAAG,GAAG,4DAAkD,KAAK,yBAAa,MAAM,cAAU,CAAC;IAEjG,IAAM,KAAK,GACT,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAClB,6BACE,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,MAAM;SACd,EACD,GAAG,EAAE,oCAA6B,MAAM,CAAC,GAAG,CAAC,CAAE,iBACnC,MAAM,EAClB,GAAG,EAAC,EAAE,GACN,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,CACL,6BACE,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,sBACH,QAAQ,EAAE,QAAQ,IACf,CAAC,MAAM,KAAK,MAAM;YACnB,CAAC,CAAC,mBAAmB;YACrB,CAAC,CAAC,MAAM,KAAK,WAAW;gBACxB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE;gBAC1D,CAAC,CAAC,MAAM,KAAK,OAAO;oBACpB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,OAAA,EAAE;oBACjC,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GACzC,KAAK;QAGT,KAAK;QACL,WAAW;QACX,QAAQ,IAAI,CACX;YACG,UAAU;YACV,aAAa;YACb,IAAI,CAAC,GAAG,IAAI,CACX,6BACE,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EACnB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EAC9B,MAAM,EAAE,UAAU,EAClB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,gBAAgB,EAC3B,KAAK,+BACH,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC1B,UAAU,YAAA,IACP,mBAAmB,KACtB,SAAS,WAAA,EACT,cAAc,gBAAA,KACX,YAAY,IAEjB,CACH,CACO,CACX;QACD;YACE;gBACG,UAAU;gBACV,aAAa;gBACb,IAAI,CAAC,GAAG,IAAI,CACX,6BACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EACnB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EAC9B,SAAS,EAAE,gBAAgB,EAC3B,KAAK,iCACA,mBAAmB,KACtB,SAAS,WAAA,EACT,cAAc,gBAAA,KACX,YAAY,GAEjB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAC5C,CACH,CACO,CACD,CACP,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
|
package/package.json
CHANGED
|
@@ -23,6 +23,8 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
|
|
|
23
23
|
Object {
|
|
24
24
|
"height": "100%",
|
|
25
25
|
"left": 0,
|
|
26
|
+
"maxHeight": "none",
|
|
27
|
+
"maxWidth": "none",
|
|
26
28
|
"overflow": "hidden",
|
|
27
29
|
"position": "absolute",
|
|
28
30
|
"top": 0,
|
|
@@ -40,6 +42,8 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
|
|
|
40
42
|
"backgroundColor": undefined,
|
|
41
43
|
"height": "110%",
|
|
42
44
|
"left": "-5%",
|
|
45
|
+
"maxHeight": "none",
|
|
46
|
+
"maxWidth": "none",
|
|
43
47
|
"objectFit": undefined,
|
|
44
48
|
"objectPosition": undefined,
|
|
45
49
|
"opacity": 1,
|
|
@@ -80,6 +84,8 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
|
|
|
80
84
|
Object {
|
|
81
85
|
"height": "100%",
|
|
82
86
|
"left": 0,
|
|
87
|
+
"maxHeight": "none",
|
|
88
|
+
"maxWidth": "none",
|
|
83
89
|
"overflow": "hidden",
|
|
84
90
|
"position": "absolute",
|
|
85
91
|
"top": 0,
|
|
@@ -97,6 +103,8 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
|
|
|
97
103
|
"backgroundColor": undefined,
|
|
98
104
|
"height": "110%",
|
|
99
105
|
"left": "-5%",
|
|
106
|
+
"maxHeight": "none",
|
|
107
|
+
"maxWidth": "none",
|
|
100
108
|
"objectFit": undefined,
|
|
101
109
|
"objectPosition": undefined,
|
|
102
110
|
"opacity": 0,
|
|
@@ -120,6 +128,8 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
|
|
|
120
128
|
Object {
|
|
121
129
|
"height": "100%",
|
|
122
130
|
"left": 0,
|
|
131
|
+
"maxHeight": "none",
|
|
132
|
+
"maxWidth": "none",
|
|
123
133
|
"objectFit": undefined,
|
|
124
134
|
"objectPosition": undefined,
|
|
125
135
|
"opacity": 1,
|
|
@@ -157,6 +167,8 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
|
|
|
157
167
|
Object {
|
|
158
168
|
"height": "100%",
|
|
159
169
|
"left": 0,
|
|
170
|
+
"maxHeight": "none",
|
|
171
|
+
"maxWidth": "none",
|
|
160
172
|
"overflow": "hidden",
|
|
161
173
|
"position": "absolute",
|
|
162
174
|
"top": 0,
|
|
@@ -174,6 +186,8 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
|
|
|
174
186
|
"backgroundColor": undefined,
|
|
175
187
|
"height": "110%",
|
|
176
188
|
"left": "-5%",
|
|
189
|
+
"maxHeight": "none",
|
|
190
|
+
"maxWidth": "none",
|
|
177
191
|
"objectFit": undefined,
|
|
178
192
|
"objectPosition": undefined,
|
|
179
193
|
"opacity": 1,
|
|
@@ -196,6 +210,89 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
|
|
|
196
210
|
Object {
|
|
197
211
|
"height": "100%",
|
|
198
212
|
"left": 0,
|
|
213
|
+
"maxHeight": "none",
|
|
214
|
+
"maxWidth": "none",
|
|
215
|
+
"objectFit": undefined,
|
|
216
|
+
"objectPosition": undefined,
|
|
217
|
+
"opacity": 0,
|
|
218
|
+
"position": "absolute",
|
|
219
|
+
"top": 0,
|
|
220
|
+
"transition": "opacity 500ms",
|
|
221
|
+
"width": "100%",
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
/>
|
|
225
|
+
</picture>
|
|
226
|
+
<noscript>
|
|
227
|
+
<picture />
|
|
228
|
+
</noscript>
|
|
229
|
+
</div>
|
|
230
|
+
</ForwardRef>
|
|
231
|
+
`;
|
|
232
|
+
|
|
233
|
+
exports[`Image layout=fill visible renders the image (relative URL) 1`] = `
|
|
234
|
+
<ForwardRef
|
|
235
|
+
data={
|
|
236
|
+
Object {
|
|
237
|
+
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
|
|
238
|
+
"height": 421,
|
|
239
|
+
"src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
240
|
+
"width": 750,
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
intersectionThreshold={0.2}
|
|
244
|
+
layout="fill"
|
|
245
|
+
>
|
|
246
|
+
<div
|
|
247
|
+
style={
|
|
248
|
+
Object {
|
|
249
|
+
"height": "100%",
|
|
250
|
+
"left": 0,
|
|
251
|
+
"maxHeight": "none",
|
|
252
|
+
"maxWidth": "none",
|
|
253
|
+
"overflow": "hidden",
|
|
254
|
+
"position": "absolute",
|
|
255
|
+
"top": 0,
|
|
256
|
+
"width": "100%",
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
>
|
|
260
|
+
<img
|
|
261
|
+
alt=""
|
|
262
|
+
aria-hidden="true"
|
|
263
|
+
role="presentation"
|
|
264
|
+
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
|
|
265
|
+
style={
|
|
266
|
+
Object {
|
|
267
|
+
"backgroundColor": undefined,
|
|
268
|
+
"height": "110%",
|
|
269
|
+
"left": "-5%",
|
|
270
|
+
"maxHeight": "none",
|
|
271
|
+
"maxWidth": "none",
|
|
272
|
+
"objectFit": undefined,
|
|
273
|
+
"objectPosition": undefined,
|
|
274
|
+
"opacity": 1,
|
|
275
|
+
"position": "absolute",
|
|
276
|
+
"top": "-5%",
|
|
277
|
+
"transition": "opacity 500ms",
|
|
278
|
+
"width": "110%",
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
/>
|
|
282
|
+
<picture>
|
|
283
|
+
<source
|
|
284
|
+
srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
285
|
+
/>
|
|
286
|
+
<img
|
|
287
|
+
alt=""
|
|
288
|
+
onLoad={[Function]}
|
|
289
|
+
src="/205/image.png?ar=16%3A9&fit=crop&w=750"
|
|
290
|
+
style={
|
|
291
|
+
Object {
|
|
292
|
+
"height": "100%",
|
|
293
|
+
"left": 0,
|
|
294
|
+
"maxHeight": "none",
|
|
295
|
+
"maxWidth": "none",
|
|
199
296
|
"objectFit": undefined,
|
|
200
297
|
"objectPosition": undefined,
|
|
201
298
|
"opacity": 0,
|
|
@@ -237,6 +334,8 @@ exports[`Image layout=fill visible renders the image 1`] = `
|
|
|
237
334
|
Object {
|
|
238
335
|
"height": "100%",
|
|
239
336
|
"left": 0,
|
|
337
|
+
"maxHeight": "none",
|
|
338
|
+
"maxWidth": "none",
|
|
240
339
|
"overflow": "hidden",
|
|
241
340
|
"position": "absolute",
|
|
242
341
|
"top": 0,
|
|
@@ -254,6 +353,8 @@ exports[`Image layout=fill visible renders the image 1`] = `
|
|
|
254
353
|
"backgroundColor": undefined,
|
|
255
354
|
"height": "110%",
|
|
256
355
|
"left": "-5%",
|
|
356
|
+
"maxHeight": "none",
|
|
357
|
+
"maxWidth": "none",
|
|
257
358
|
"objectFit": undefined,
|
|
258
359
|
"objectPosition": undefined,
|
|
259
360
|
"opacity": 1,
|
|
@@ -277,6 +378,8 @@ exports[`Image layout=fill visible renders the image 1`] = `
|
|
|
277
378
|
Object {
|
|
278
379
|
"height": "100%",
|
|
279
380
|
"left": 0,
|
|
381
|
+
"maxHeight": "none",
|
|
382
|
+
"maxWidth": "none",
|
|
280
383
|
"objectFit": undefined,
|
|
281
384
|
"objectPosition": undefined,
|
|
282
385
|
"opacity": 0,
|
|
@@ -344,6 +447,8 @@ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
|
|
|
344
447
|
"backgroundColor": undefined,
|
|
345
448
|
"height": "110%",
|
|
346
449
|
"left": "-5%",
|
|
450
|
+
"maxHeight": "none",
|
|
451
|
+
"maxWidth": "none",
|
|
347
452
|
"objectFit": undefined,
|
|
348
453
|
"objectPosition": undefined,
|
|
349
454
|
"opacity": 1,
|
|
@@ -409,6 +514,8 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
|
|
|
409
514
|
"backgroundColor": undefined,
|
|
410
515
|
"height": "110%",
|
|
411
516
|
"left": "-5%",
|
|
517
|
+
"maxHeight": "none",
|
|
518
|
+
"maxWidth": "none",
|
|
412
519
|
"objectFit": undefined,
|
|
413
520
|
"objectPosition": undefined,
|
|
414
521
|
"opacity": 0,
|
|
@@ -432,6 +539,8 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
|
|
|
432
539
|
Object {
|
|
433
540
|
"height": "100%",
|
|
434
541
|
"left": 0,
|
|
542
|
+
"maxHeight": "none",
|
|
543
|
+
"maxWidth": "none",
|
|
435
544
|
"objectFit": undefined,
|
|
436
545
|
"objectPosition": undefined,
|
|
437
546
|
"opacity": 1,
|
|
@@ -494,6 +603,8 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
|
|
|
494
603
|
"backgroundColor": undefined,
|
|
495
604
|
"height": "110%",
|
|
496
605
|
"left": "-5%",
|
|
606
|
+
"maxHeight": "none",
|
|
607
|
+
"maxWidth": "none",
|
|
497
608
|
"objectFit": undefined,
|
|
498
609
|
"objectPosition": undefined,
|
|
499
610
|
"opacity": 1,
|
|
@@ -516,6 +627,95 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
|
|
|
516
627
|
Object {
|
|
517
628
|
"height": "100%",
|
|
518
629
|
"left": 0,
|
|
630
|
+
"maxHeight": "none",
|
|
631
|
+
"maxWidth": "none",
|
|
632
|
+
"objectFit": undefined,
|
|
633
|
+
"objectPosition": undefined,
|
|
634
|
+
"opacity": 0,
|
|
635
|
+
"position": "absolute",
|
|
636
|
+
"top": 0,
|
|
637
|
+
"transition": "opacity 500ms",
|
|
638
|
+
"width": "100%",
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
/>
|
|
642
|
+
</picture>
|
|
643
|
+
<noscript>
|
|
644
|
+
<picture />
|
|
645
|
+
</noscript>
|
|
646
|
+
</div>
|
|
647
|
+
</ForwardRef>
|
|
648
|
+
`;
|
|
649
|
+
|
|
650
|
+
exports[`Image layout=fixed visible renders the image (relative URL) 1`] = `
|
|
651
|
+
<ForwardRef
|
|
652
|
+
data={
|
|
653
|
+
Object {
|
|
654
|
+
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
|
|
655
|
+
"height": 421,
|
|
656
|
+
"src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
657
|
+
"width": 750,
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
intersectionThreshold={0.2}
|
|
661
|
+
layout="fixed"
|
|
662
|
+
>
|
|
663
|
+
<div
|
|
664
|
+
style={
|
|
665
|
+
Object {
|
|
666
|
+
"overflow": "hidden",
|
|
667
|
+
"position": "relative",
|
|
668
|
+
"width": 750,
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
>
|
|
672
|
+
<img
|
|
673
|
+
alt=""
|
|
674
|
+
aria-hidden="true"
|
|
675
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
|
|
676
|
+
style={
|
|
677
|
+
Object {
|
|
678
|
+
"display": "block",
|
|
679
|
+
"width": "100%",
|
|
680
|
+
}
|
|
681
|
+
}
|
|
682
|
+
/>
|
|
683
|
+
<img
|
|
684
|
+
alt=""
|
|
685
|
+
aria-hidden="true"
|
|
686
|
+
role="presentation"
|
|
687
|
+
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
|
|
688
|
+
style={
|
|
689
|
+
Object {
|
|
690
|
+
"backgroundColor": undefined,
|
|
691
|
+
"height": "110%",
|
|
692
|
+
"left": "-5%",
|
|
693
|
+
"maxHeight": "none",
|
|
694
|
+
"maxWidth": "none",
|
|
695
|
+
"objectFit": undefined,
|
|
696
|
+
"objectPosition": undefined,
|
|
697
|
+
"opacity": 1,
|
|
698
|
+
"position": "absolute",
|
|
699
|
+
"top": "-5%",
|
|
700
|
+
"transition": "opacity 500ms",
|
|
701
|
+
"width": "110%",
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
/>
|
|
705
|
+
<picture>
|
|
706
|
+
<source
|
|
707
|
+
srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
708
|
+
/>
|
|
709
|
+
<img
|
|
710
|
+
alt=""
|
|
711
|
+
onLoad={[Function]}
|
|
712
|
+
src="/205/image.png?ar=16%3A9&fit=crop&w=750"
|
|
713
|
+
style={
|
|
714
|
+
Object {
|
|
715
|
+
"height": "100%",
|
|
716
|
+
"left": 0,
|
|
717
|
+
"maxHeight": "none",
|
|
718
|
+
"maxWidth": "none",
|
|
519
719
|
"objectFit": undefined,
|
|
520
720
|
"objectPosition": undefined,
|
|
521
721
|
"opacity": 0,
|
|
@@ -582,6 +782,8 @@ exports[`Image layout=fixed visible renders the image 1`] = `
|
|
|
582
782
|
"backgroundColor": undefined,
|
|
583
783
|
"height": "110%",
|
|
584
784
|
"left": "-5%",
|
|
785
|
+
"maxHeight": "none",
|
|
786
|
+
"maxWidth": "none",
|
|
585
787
|
"objectFit": undefined,
|
|
586
788
|
"objectPosition": undefined,
|
|
587
789
|
"opacity": 1,
|
|
@@ -605,6 +807,8 @@ exports[`Image layout=fixed visible renders the image 1`] = `
|
|
|
605
807
|
Object {
|
|
606
808
|
"height": "100%",
|
|
607
809
|
"left": 0,
|
|
810
|
+
"maxHeight": "none",
|
|
811
|
+
"maxWidth": "none",
|
|
608
812
|
"objectFit": undefined,
|
|
609
813
|
"objectPosition": undefined,
|
|
610
814
|
"opacity": 0,
|
|
@@ -673,6 +877,8 @@ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
|
|
|
673
877
|
"backgroundColor": undefined,
|
|
674
878
|
"height": "110%",
|
|
675
879
|
"left": "-5%",
|
|
880
|
+
"maxHeight": "none",
|
|
881
|
+
"maxWidth": "none",
|
|
676
882
|
"objectFit": undefined,
|
|
677
883
|
"objectPosition": undefined,
|
|
678
884
|
"opacity": 1,
|
|
@@ -739,6 +945,8 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
|
|
|
739
945
|
"backgroundColor": undefined,
|
|
740
946
|
"height": "110%",
|
|
741
947
|
"left": "-5%",
|
|
948
|
+
"maxHeight": "none",
|
|
949
|
+
"maxWidth": "none",
|
|
742
950
|
"objectFit": undefined,
|
|
743
951
|
"objectPosition": undefined,
|
|
744
952
|
"opacity": 0,
|
|
@@ -762,6 +970,8 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
|
|
|
762
970
|
Object {
|
|
763
971
|
"height": "100%",
|
|
764
972
|
"left": 0,
|
|
973
|
+
"maxHeight": "none",
|
|
974
|
+
"maxWidth": "none",
|
|
765
975
|
"objectFit": undefined,
|
|
766
976
|
"objectPosition": undefined,
|
|
767
977
|
"opacity": 1,
|
|
@@ -825,6 +1035,8 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
|
|
|
825
1035
|
"backgroundColor": undefined,
|
|
826
1036
|
"height": "110%",
|
|
827
1037
|
"left": "-5%",
|
|
1038
|
+
"maxHeight": "none",
|
|
1039
|
+
"maxWidth": "none",
|
|
828
1040
|
"objectFit": undefined,
|
|
829
1041
|
"objectPosition": undefined,
|
|
830
1042
|
"opacity": 1,
|
|
@@ -847,6 +1059,96 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
|
|
|
847
1059
|
Object {
|
|
848
1060
|
"height": "100%",
|
|
849
1061
|
"left": 0,
|
|
1062
|
+
"maxHeight": "none",
|
|
1063
|
+
"maxWidth": "none",
|
|
1064
|
+
"objectFit": undefined,
|
|
1065
|
+
"objectPosition": undefined,
|
|
1066
|
+
"opacity": 0,
|
|
1067
|
+
"position": "absolute",
|
|
1068
|
+
"top": 0,
|
|
1069
|
+
"transition": "opacity 500ms",
|
|
1070
|
+
"width": "100%",
|
|
1071
|
+
}
|
|
1072
|
+
}
|
|
1073
|
+
/>
|
|
1074
|
+
</picture>
|
|
1075
|
+
<noscript>
|
|
1076
|
+
<picture />
|
|
1077
|
+
</noscript>
|
|
1078
|
+
</div>
|
|
1079
|
+
</ForwardRef>
|
|
1080
|
+
`;
|
|
1081
|
+
|
|
1082
|
+
exports[`Image layout=intrinsic visible renders the image (relative URL) 1`] = `
|
|
1083
|
+
<ForwardRef
|
|
1084
|
+
data={
|
|
1085
|
+
Object {
|
|
1086
|
+
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
|
|
1087
|
+
"height": 421,
|
|
1088
|
+
"src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
1089
|
+
"width": 750,
|
|
1090
|
+
}
|
|
1091
|
+
}
|
|
1092
|
+
intersectionThreshold={0.2}
|
|
1093
|
+
layout="intrinsic"
|
|
1094
|
+
>
|
|
1095
|
+
<div
|
|
1096
|
+
style={
|
|
1097
|
+
Object {
|
|
1098
|
+
"maxWidth": 750,
|
|
1099
|
+
"overflow": "hidden",
|
|
1100
|
+
"position": "relative",
|
|
1101
|
+
"width": "100%",
|
|
1102
|
+
}
|
|
1103
|
+
}
|
|
1104
|
+
>
|
|
1105
|
+
<img
|
|
1106
|
+
alt=""
|
|
1107
|
+
aria-hidden="true"
|
|
1108
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
|
|
1109
|
+
style={
|
|
1110
|
+
Object {
|
|
1111
|
+
"display": "block",
|
|
1112
|
+
"width": "100%",
|
|
1113
|
+
}
|
|
1114
|
+
}
|
|
1115
|
+
/>
|
|
1116
|
+
<img
|
|
1117
|
+
alt=""
|
|
1118
|
+
aria-hidden="true"
|
|
1119
|
+
role="presentation"
|
|
1120
|
+
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
|
|
1121
|
+
style={
|
|
1122
|
+
Object {
|
|
1123
|
+
"backgroundColor": undefined,
|
|
1124
|
+
"height": "110%",
|
|
1125
|
+
"left": "-5%",
|
|
1126
|
+
"maxHeight": "none",
|
|
1127
|
+
"maxWidth": "none",
|
|
1128
|
+
"objectFit": undefined,
|
|
1129
|
+
"objectPosition": undefined,
|
|
1130
|
+
"opacity": 1,
|
|
1131
|
+
"position": "absolute",
|
|
1132
|
+
"top": "-5%",
|
|
1133
|
+
"transition": "opacity 500ms",
|
|
1134
|
+
"width": "110%",
|
|
1135
|
+
}
|
|
1136
|
+
}
|
|
1137
|
+
/>
|
|
1138
|
+
<picture>
|
|
1139
|
+
<source
|
|
1140
|
+
srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
1141
|
+
/>
|
|
1142
|
+
<img
|
|
1143
|
+
alt=""
|
|
1144
|
+
onLoad={[Function]}
|
|
1145
|
+
src="/205/image.png?ar=16%3A9&fit=crop&w=750"
|
|
1146
|
+
style={
|
|
1147
|
+
Object {
|
|
1148
|
+
"height": "100%",
|
|
1149
|
+
"left": 0,
|
|
1150
|
+
"maxHeight": "none",
|
|
1151
|
+
"maxWidth": "none",
|
|
850
1152
|
"objectFit": undefined,
|
|
851
1153
|
"objectPosition": undefined,
|
|
852
1154
|
"opacity": 0,
|
|
@@ -914,6 +1216,8 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
|
|
|
914
1216
|
"backgroundColor": undefined,
|
|
915
1217
|
"height": "110%",
|
|
916
1218
|
"left": "-5%",
|
|
1219
|
+
"maxHeight": "none",
|
|
1220
|
+
"maxWidth": "none",
|
|
917
1221
|
"objectFit": undefined,
|
|
918
1222
|
"objectPosition": undefined,
|
|
919
1223
|
"opacity": 1,
|
|
@@ -937,6 +1241,8 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
|
|
|
937
1241
|
Object {
|
|
938
1242
|
"height": "100%",
|
|
939
1243
|
"left": 0,
|
|
1244
|
+
"maxHeight": "none",
|
|
1245
|
+
"maxWidth": "none",
|
|
940
1246
|
"objectFit": undefined,
|
|
941
1247
|
"objectPosition": undefined,
|
|
942
1248
|
"opacity": 0,
|
|
@@ -1004,6 +1310,8 @@ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
|
|
|
1004
1310
|
"backgroundColor": undefined,
|
|
1005
1311
|
"height": "110%",
|
|
1006
1312
|
"left": "-5%",
|
|
1313
|
+
"maxHeight": "none",
|
|
1314
|
+
"maxWidth": "none",
|
|
1007
1315
|
"objectFit": undefined,
|
|
1008
1316
|
"objectPosition": undefined,
|
|
1009
1317
|
"opacity": 1,
|
|
@@ -1069,6 +1377,8 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
|
|
|
1069
1377
|
"backgroundColor": undefined,
|
|
1070
1378
|
"height": "110%",
|
|
1071
1379
|
"left": "-5%",
|
|
1380
|
+
"maxHeight": "none",
|
|
1381
|
+
"maxWidth": "none",
|
|
1072
1382
|
"objectFit": undefined,
|
|
1073
1383
|
"objectPosition": undefined,
|
|
1074
1384
|
"opacity": 0,
|
|
@@ -1092,6 +1402,8 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
|
|
|
1092
1402
|
Object {
|
|
1093
1403
|
"height": "100%",
|
|
1094
1404
|
"left": 0,
|
|
1405
|
+
"maxHeight": "none",
|
|
1406
|
+
"maxWidth": "none",
|
|
1095
1407
|
"objectFit": undefined,
|
|
1096
1408
|
"objectPosition": undefined,
|
|
1097
1409
|
"opacity": 1,
|
|
@@ -1154,6 +1466,8 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
|
|
|
1154
1466
|
"backgroundColor": undefined,
|
|
1155
1467
|
"height": "110%",
|
|
1156
1468
|
"left": "-5%",
|
|
1469
|
+
"maxHeight": "none",
|
|
1470
|
+
"maxWidth": "none",
|
|
1157
1471
|
"objectFit": undefined,
|
|
1158
1472
|
"objectPosition": undefined,
|
|
1159
1473
|
"opacity": 1,
|
|
@@ -1176,6 +1490,95 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
|
|
|
1176
1490
|
Object {
|
|
1177
1491
|
"height": "100%",
|
|
1178
1492
|
"left": 0,
|
|
1493
|
+
"maxHeight": "none",
|
|
1494
|
+
"maxWidth": "none",
|
|
1495
|
+
"objectFit": undefined,
|
|
1496
|
+
"objectPosition": undefined,
|
|
1497
|
+
"opacity": 0,
|
|
1498
|
+
"position": "absolute",
|
|
1499
|
+
"top": 0,
|
|
1500
|
+
"transition": "opacity 500ms",
|
|
1501
|
+
"width": "100%",
|
|
1502
|
+
}
|
|
1503
|
+
}
|
|
1504
|
+
/>
|
|
1505
|
+
</picture>
|
|
1506
|
+
<noscript>
|
|
1507
|
+
<picture />
|
|
1508
|
+
</noscript>
|
|
1509
|
+
</div>
|
|
1510
|
+
</ForwardRef>
|
|
1511
|
+
`;
|
|
1512
|
+
|
|
1513
|
+
exports[`Image layout=responsive visible renders the image (relative URL) 1`] = `
|
|
1514
|
+
<ForwardRef
|
|
1515
|
+
data={
|
|
1516
|
+
Object {
|
|
1517
|
+
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
|
|
1518
|
+
"height": 421,
|
|
1519
|
+
"src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
|
|
1520
|
+
"width": 750,
|
|
1521
|
+
}
|
|
1522
|
+
}
|
|
1523
|
+
intersectionThreshold={0.2}
|
|
1524
|
+
layout="responsive"
|
|
1525
|
+
>
|
|
1526
|
+
<div
|
|
1527
|
+
style={
|
|
1528
|
+
Object {
|
|
1529
|
+
"overflow": "hidden",
|
|
1530
|
+
"position": "relative",
|
|
1531
|
+
"width": "100%",
|
|
1532
|
+
}
|
|
1533
|
+
}
|
|
1534
|
+
>
|
|
1535
|
+
<img
|
|
1536
|
+
alt=""
|
|
1537
|
+
aria-hidden="true"
|
|
1538
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
|
|
1539
|
+
style={
|
|
1540
|
+
Object {
|
|
1541
|
+
"display": "block",
|
|
1542
|
+
"width": "100%",
|
|
1543
|
+
}
|
|
1544
|
+
}
|
|
1545
|
+
/>
|
|
1546
|
+
<img
|
|
1547
|
+
alt=""
|
|
1548
|
+
aria-hidden="true"
|
|
1549
|
+
role="presentation"
|
|
1550
|
+
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
|
|
1551
|
+
style={
|
|
1552
|
+
Object {
|
|
1553
|
+
"backgroundColor": undefined,
|
|
1554
|
+
"height": "110%",
|
|
1555
|
+
"left": "-5%",
|
|
1556
|
+
"maxHeight": "none",
|
|
1557
|
+
"maxWidth": "none",
|
|
1558
|
+
"objectFit": undefined,
|
|
1559
|
+
"objectPosition": undefined,
|
|
1560
|
+
"opacity": 1,
|
|
1561
|
+
"position": "absolute",
|
|
1562
|
+
"top": "-5%",
|
|
1563
|
+
"transition": "opacity 500ms",
|
|
1564
|
+
"width": "110%",
|
|
1565
|
+
}
|
|
1566
|
+
}
|
|
1567
|
+
/>
|
|
1568
|
+
<picture>
|
|
1569
|
+
<source
|
|
1570
|
+
srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
|
|
1571
|
+
/>
|
|
1572
|
+
<img
|
|
1573
|
+
alt=""
|
|
1574
|
+
onLoad={[Function]}
|
|
1575
|
+
src="/205/image.png?ar=16%3A9&fit=crop&w=750"
|
|
1576
|
+
style={
|
|
1577
|
+
Object {
|
|
1578
|
+
"height": "100%",
|
|
1579
|
+
"left": 0,
|
|
1580
|
+
"maxHeight": "none",
|
|
1581
|
+
"maxWidth": "none",
|
|
1179
1582
|
"objectFit": undefined,
|
|
1180
1583
|
"objectPosition": undefined,
|
|
1181
1584
|
"opacity": 0,
|
|
@@ -1242,6 +1645,8 @@ exports[`Image layout=responsive visible renders the image 1`] = `
|
|
|
1242
1645
|
"backgroundColor": undefined,
|
|
1243
1646
|
"height": "110%",
|
|
1244
1647
|
"left": "-5%",
|
|
1648
|
+
"maxHeight": "none",
|
|
1649
|
+
"maxWidth": "none",
|
|
1245
1650
|
"objectFit": undefined,
|
|
1246
1651
|
"objectPosition": undefined,
|
|
1247
1652
|
"opacity": 1,
|
|
@@ -1265,6 +1670,8 @@ exports[`Image layout=responsive visible renders the image 1`] = `
|
|
|
1265
1670
|
Object {
|
|
1266
1671
|
"height": "100%",
|
|
1267
1672
|
"left": 0,
|
|
1673
|
+
"maxHeight": "none",
|
|
1674
|
+
"maxWidth": "none",
|
|
1268
1675
|
"objectFit": undefined,
|
|
1269
1676
|
"objectPosition": undefined,
|
|
1270
1677
|
"opacity": 0,
|
|
@@ -26,6 +26,14 @@ const minimalData = {
|
|
|
26
26
|
width: 750,
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
+
const minimalDataWithRelativeUrl = {
|
|
30
|
+
base64:
|
|
31
|
+
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
|
|
32
|
+
height: 421,
|
|
33
|
+
src: '/205/image.png?ar=16%3A9&fit=crop&w=750',
|
|
34
|
+
width: 750,
|
|
35
|
+
};
|
|
36
|
+
|
|
29
37
|
describe('Image', () => {
|
|
30
38
|
// intersectionThreshold is an hack to make tests work
|
|
31
39
|
// we need the library to generate a different IntersectionObserver for each test
|
|
@@ -65,6 +73,19 @@ describe('Image', () => {
|
|
|
65
73
|
expect(wrapper).toMatchSnapshot();
|
|
66
74
|
});
|
|
67
75
|
|
|
76
|
+
it('renders the image (relative URL)', () => {
|
|
77
|
+
const wrapper = mount(
|
|
78
|
+
<Image
|
|
79
|
+
data={minimalDataWithRelativeUrl}
|
|
80
|
+
layout={layout}
|
|
81
|
+
intersectionThreshold={0.2}
|
|
82
|
+
/>,
|
|
83
|
+
);
|
|
84
|
+
mockAllIsIntersecting(true);
|
|
85
|
+
wrapper.update();
|
|
86
|
+
expect(wrapper).toMatchSnapshot();
|
|
87
|
+
});
|
|
88
|
+
|
|
68
89
|
describe('image loaded', () => {
|
|
69
90
|
it('shows the image', () => {
|
|
70
91
|
const wrapper = mount(
|
package/src/Image/index.tsx
CHANGED
|
@@ -146,6 +146,8 @@ const imageShowStrategy = ({ lazyLoad, loaded }: State) => {
|
|
|
146
146
|
return true;
|
|
147
147
|
};
|
|
148
148
|
|
|
149
|
+
const bogusBaseUrl = 'https://example.com/';
|
|
150
|
+
|
|
149
151
|
const buildSrcSet = (
|
|
150
152
|
src: string | null | undefined,
|
|
151
153
|
width: number | undefined,
|
|
@@ -157,7 +159,7 @@ const buildSrcSet = (
|
|
|
157
159
|
|
|
158
160
|
return candidateMultipliers
|
|
159
161
|
.map((multiplier) => {
|
|
160
|
-
const url = new URL(src);
|
|
162
|
+
const url = new URL(src, bogusBaseUrl);
|
|
161
163
|
|
|
162
164
|
if (multiplier !== 1) {
|
|
163
165
|
url.searchParams.set('dpr', `${multiplier}`);
|
|
@@ -183,7 +185,7 @@ const buildSrcSet = (
|
|
|
183
185
|
return null;
|
|
184
186
|
}
|
|
185
187
|
|
|
186
|
-
return `${url.toString()} ${finalWidth}w`;
|
|
188
|
+
return `${url.toString().replace(bogusBaseUrl, '/')} ${finalWidth}w`;
|
|
187
189
|
})
|
|
188
190
|
.filter(Boolean)
|
|
189
191
|
.join(',');
|
|
@@ -260,6 +262,8 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
260
262
|
top: 0,
|
|
261
263
|
width: '100%',
|
|
262
264
|
height: '100%',
|
|
265
|
+
maxWidth: 'none',
|
|
266
|
+
maxHeight: 'none',
|
|
263
267
|
};
|
|
264
268
|
|
|
265
269
|
const addImage = imageAddStrategy({
|
|
@@ -316,6 +320,8 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
|
|
|
316
320
|
top: '-5%',
|
|
317
321
|
width: '110%',
|
|
318
322
|
height: '110%',
|
|
323
|
+
maxWidth: 'none',
|
|
324
|
+
maxHeight: 'none',
|
|
319
325
|
...placeholderStyle,
|
|
320
326
|
}}
|
|
321
327
|
/>
|