plastic-image
Version:
iron-image extension supporting srcset and lazy loading
116 lines (106 loc) • 7.2 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="../../@polymer/polymer/polymer-element.js"></script>
<script type="module" src="../plastic-image.js"></script>
<script src="../../wct-browser-legacy/browser.js"></script>
<script src="../../chai/chai.js"></script>
</head>
<body>
<test-fixture id="lazyFixture">
<template>
<div id="hugeSpacer" style="width:100%;height:3000px;box-sizing:border-box">I'm a huge spacer</div>
<plastic-image id="wp01" lazy-load preload fade use-element-dim sizing="contain" style="height: 200px; width: 300px;" srcset="images/20160827_055746-150x150.jpg 150w,images/20160827-055746-150x150.webp 150w,images/20160827_055746-300x169.jpg 300w,images/20160827-055746-300x169.webp 300w,images/20160827_055746-768x432.jpg 768w,images/20160827-055746-768x432.webp 768w"
placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACAAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A8p8A/EK70MfZbvVJ0tAuF8qJGcHju3br611Go/EPS7pkY+K7tMDBV7ZevrxHRRXdSzKtTVt/W/8AmeRUwVOc3fr6f5H/2Q==">
</plastic-image>
<plastic-image id="i51" lazy-load preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgAEwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8AxPGPj298dxz7khtLS0ZQtsgH3+hZmwCTyeOg/PPNPHJcRK6OqKPlLMOCfQV2WgfCSyiguRcX91G1xgsUfHIwcjnnn1/lXNeM9L07QGX7PcSxRysAkpA3MAMEc4PXnjjn6V5FSuqsr3uz01SlSprSx6Rqc8senyMjspWMkY7HHWuO1u2gvr7N1BFNsQBQ6Ahclug6dqKK5aO5310f/9k="
sizing="contain" srcset="images/IMG_20170426_112820-150x150.jpg 150w, images/IMG_20170426_112820-225x300.jpg 225w"
style="height: 400px; width: 400px;">
</plastic-image>
</template>
</test-fixture>
<script type="module">
import '../../@polymer/polymer/polymer-element.js';
import '../plastic-image.js';
describe('plastic-image lazy load', () => {
let testFixture1, findSrcsetEntry, i51, wp01, hugeSpacer;
beforeEach(() => {
testFixture1 = fixture('lazyFixture');
window.scroll(0, 0);
i51 = document.querySelector('#i51');
wp01 = document.querySelector('#wp01');
hugeSpacer = document.querySelector('#hugeSpacer');
});
context('scroll', () => {
it('should not be loading before scroll', () => {
expect(wp01._lazyLoadPending).to.eql(true);
});
it('should be loading after scroll', () => {
window.scroll(0, 3050);
return new Promise((resolve, reject) => {
// this hack is for browsers that could be loading the polyfill
// which creates a delay before the intersection observer is created.
// Also, Edge and IE don't dispatch scroll events reliably, so if
// polyfilled, there is a polling process to detect intersections.
setTimeout(() => {
resolve(wp01._lazyLoadPending);
}, 250);
})
.then((llp) => {
expect(llp).to.eql(false); // lazy load is no longer pending
});
});
});
context('layout', () => {
it('should not be loading before layout changes', () => {
expect(wp01._lazyLoadPending).to.eql(true);
});
it('should be loading after layout changes', () => {
hugeSpacer.style.height = "10px";
return new Promise((resolve, reject) => {
// this hack is for browsers that could be loading the polyfill
// which creates a delay before the intersection observer is created.
setTimeout(() => {
resolve(wp01._lazyLoadPending);
}, 250);
})
.then((llp) => {
expect(llp).to.eql(false); // lazy load is no longer pending
});
})
});
context('layout 2', () => {
it('should not be loading before layout changes 2', () => {
return new Promise((resolve, reject) => {
// this hack is for browsers that could be loading the polyfill
// which creates a delay before the intersection observer is created.
setTimeout(() => {
resolve(wp01._lazyLoadPending);
}, 250);
})
.then((llp) => {
expect(llp).to.eql(true); // lazy load is pending
});
});
it('should be loading after layout changes 2', () => {
hugeSpacer.style.height = "10px";
return new Promise((resolve, reject) => {
// this hack is for browsers using the polyfill and polling
// which creates a delay before the intersection observer picks up
// layout changes
setTimeout(() => {
resolve(wp01._lazyLoadPending);
}, 200);
})
.then((llp) => {
expect(llp).to.eql(false); // lazy load is no longer pending
});
})
});
});
</script>
</body>
</html>