plastic-image
Version:
iron-image extension supporting srcset and lazy loading
275 lines (267 loc) • 26.4 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="default">
<template>
<!-- NOTE: some of the items intentionally have
invalid srcset fields. The plastic-image element
logs these errors, which is intended, and you will see
these in the test log. The bad srcset values are used to
check if detection of bad srcset is working (eg
it should reject a spec with 2 width descriptors). -->
<plastic-image id="i51" 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>
<plastic-image id="i50" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8Aq6FfQ+F7JLPUYLG/uYRgSrbsjFTzjJYZI75H51R1j4qiG8WHTdJsJEMYc/JI5Gfow9+Pauz8X+GdJl8LWUjWn7yARhJBI4flTnLA5boOuelcvoOi6dq/h22uLuzhM4CqZYx5TP8AL/EUwW6Dk5pQzOtGCjF2KlgqTk21qf/Z"
sizing="contain" srcset="images/IMG_20170425_111558-150x150.jpg 150w, images/IMG_20170425_111558-300x225.jpg 300w,images/IMG_20170425_111558-768x576.jpg 768w"
style="height: 300px; width: 80%;">
</plastic-image>
<plastic-image id="i49" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19d8feKrTRLstqq28hiO1tkasM8Aj5ev5Gq1p4/8WS6RZSJrckmYly6QROWIGDk7Tznr71ieKEW6kjtpwJIiwO1uec4/qai8OItvZiKIbEBJCj8Kz5I3tYFJtH//2Q=="
sizing="contain" srcset="images/IMG_20170224_181033-150x150.jpg 150w,images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123 300w, images/IMG_20170224_181033-768x576.jpg 768w"
style="height: 200px; width: 300px;">
</plastic-image>
<plastic-image id="i49h" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19d8feKrTRLstqq28hiO1tkasM8Aj5ev5Gq1p4/8WS6RZSJrckmYly6QROWIGDk7Tznr71ieKEW6kjtpwJIiwO1uec4/qai8OItvZiKIbEBJCj8Kz5I3tYFJtH//2Q=="
sizing="contain" srcset="images/IMG_20170224_181033-150x150.jpg 150h,images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123 225h, images/IMG_20170224_181033-768x576.jpg 576h"
style="height: 200px; width: 300px;">
</plastic-image>
<plastic-image id="i49wh" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19d8feKrTRLstqq28hiO1tkasM8Aj5ev5Gq1p4/8WS6RZSJrckmYly6QROWIGDk7Tznr71ieKEW6kjtpwJIiwO1uec4/qai8OItvZiKIbEBJCj8Kz5I3tYFJtH//2Q=="
sizing="contain" srcset="images/IMG_20170224_181033-150x150.jpg 150w 150h,images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123 225h 300w, images/IMG_20170224_181033-768x576.jpg 768w 576h"
style="height: 200px; width: 310px;">
</plastic-image>
<plastic-image id="i49whm" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19d8feKrTRLstqq28hiO1tkasM8Aj5ev5Gq1p4/8WS6RZSJrckmYly6QROWIGDk7Tznr71ieKEW6kjtpwJIiwO1uec4/qai8OItvZiKIbEBJCj8Kz5I3tYFJtH//2Q=="
sizing="contain" srcset="images/IMG_20170224_181033-150x150.jpg 150w,images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123 225h 300w, images/IMG_20170224_181033-768x576.jpg 576h"
style="height: 200px; width: 300px;">
</plastic-image>
<plastic-image id="i49wd" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19d8feKrTRLstqq28hiO1tkasM8Aj5ev5Gq1p4/8WS6RZSJrckmYly6QROWIGDk7Tznr71ieKEW6kjtpwJIiwO1uec4/qai8OItvZiKIbEBJCj8Kz5I3tYFJtH//2Q=="
sizing="contain" srcset="images/IMG_20170224_181033-150x150.jpg 150w 1.0x,images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123 300w 2.0x, images/IMG_20170224_181033-768x576.jpg 4.0x 768w"
style="height: 200px; width: 310px;">
</plastic-image>
<plastic-image id="i49d" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19d8feKrTRLstqq28hiO1tkasM8Aj5ev5Gq1p4/8WS6RZSJrckmYly6QROWIGDk7Tznr71ieKEW6kjtpwJIiwO1uec4/qai8OItvZiKIbEBJCj8Kz5I3tYFJtH//2Q=="
sizing="contain" srcset="images/IMG_20170224_181033-150x150.jpg 1.0x,images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123 2.0x, images/IMG_20170224_181033-768x576.jpg 4.0x"
style="height: 200px; width: 310px;">
</plastic-image>
<plastic-image id="i49hd" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19d8feKrTRLstqq28hiO1tkasM8Aj5ev5Gq1p4/8WS6RZSJrckmYly6QROWIGDk7Tznr71ieKEW6kjtpwJIiwO1uec4/qai8OItvZiKIbEBJCj8Kz5I3tYFJtH//2Q=="
sizing="contain" srcset="images/IMG_20170224_181033-150x150.jpg 150h 1.0x,images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123 225h 2.0x, images/IMG_20170224_181033-768x576.jpg 4.0x 576h"
style="height: 200px; width: 310px;">
</plastic-image>
<plastic-image id="i49w2" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19d8feKrTRLstqq28hiO1tkasM8Aj5ev5Gq1p4/8WS6RZSJrckmYly6QROWIGDk7Tznr71ieKEW6kjtpwJIiwO1uec4/qai8OItvZiKIbEBJCj8Kz5I3tYFJtH//2Q=="
sizing="contain" srcset="images/IMG_20170224_181033-150x150.jpg 150w 1.0x 125w,images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123 225h 2.0x, images/IMG_20170224_181033-768x576.jpg 4.0x 576h"
style="height: 200px; width: 310px;">
</plastic-image>
<plastic-image id="i49h2" use-element-dim preload fade placeholder="data: image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gODIK/9sAQwAGBAQFBAQGBQUFBgYGBwkOCQkICAkSDQ0KDhUSFhYVEhQUFxohHBcYHxkUFB0nHR8iIyUlJRYcKSwoJCshJCUk/9sAQwEGBgYJCAkRCQkRJBgUGCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQk/8AAEQgACwAOAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A19d8feKrTRLstqq28hiO1tkasM8Aj5ev5Gq1p4/8WS6RZSJrckmYly6QROWIGDk7Tznr71ieKEW6kjtpwJIiwO1uec4/qai8OItvZiKIbEBJCj8Kz5I3tYFJtH//2Q=="
sizing="contain" srcset="images/IMG_20170224_181033-150x150.jpg 150h 1.0x 125h,images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123 225h 2.0x, images/IMG_20170224_181033-768x576.jpg 4.0x 576h"
style="height: 200px; width: 310px;">
</plastic-image>
</template>
</test-fixture>
<script type="module">
import '../../@polymer/polymer/polymer-element.js';
import '../plastic-image.js';
describe('plastic-image srcset parsing', () => {
let testFixture1, findSrcsetEntry, pimgs;
// IE does not have array.find
if (Array.prototype && Array.prototype.find) {
findSrcsetEntry = (arr, url) => {
return arr.find((item) => {
return item.url == url;
})
}
} else {
findSrcsetEntry = (arr, url) => {
let filtered = arr.filter((item) => {
return item.url == url;
});
if (filtered && filtered.length > 0) {
return filtered[0];
} else {
return undefined;
}
}
}
let selectedImgUrl = (el) => {
return el.bestMatchingImage(el.srcsetParse(el.srcset));
};
beforeEach(() => {
testFixture1 = fixture('default');
pimgs = {
i51: document.getElementById('i51'),
i50: document.getElementById('i50'),
i49: document.getElementById('i49'),
i49h: document.getElementById('i49h'),
i49whm: document.getElementById('i49whm'),
i49wh: document.getElementById('i49wh'),
i49wd: document.getElementById('i49wd'),
i49d: document.getElementById('i49d'),
i49hd: document.getElementById('i49hd'),
i49w2: document.getElementById('i49w2'),
i49h2: document.getElementById('i49h2')
};
});
context('basic srcset parsing', () => {
it('should parse a basic srcset', () => {
expect(pimgs['i51'].srcsetParse(pimgs['i51'].srcset).length).to.eql(2);
});
it('should tolerate extra spacing', () => {
let i50sa = pimgs['i50'].srcsetParse(pimgs['i50'].srcset);
expect(i50sa.length).to.eql(3);
let i50sa2 = findSrcsetEntry(i50sa,
'images/IMG_20170425_111558-300x225.jpg');
expect(i50sa2).to.not.be.a('undefined');
expect(i50sa2).to.have.property('width');
expect(i50sa2.width).to.eql(300);
});
it('should parse urls with query string and commas', () => {
let i49sa = pimgs['i49'].srcsetParse(pimgs['i49'].srcset);
expect(i49sa.length).to.eql(3);
let i49sa2 = findSrcsetEntry(i49sa,
'images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123');
expect(i49sa2).to.not.be.a('undefined');
expect(i49sa2).to.have.property('width');
expect(i49sa2.width).to.eql(300);
let i49sa3 = findSrcsetEntry(i49sa,
'images/IMG_20170224_181033-768x576.jpg');
expect(i49sa3).to.not.be.a('undefined');
expect(i49sa3).to.have.property('width');
expect(i49sa3.width).to.eql(768);
});
it('should parse a srcset based on height', () => {
let i49hsa = pimgs['i49h'].srcsetParse(pimgs['i49h'].srcset);
expect(i49hsa.length).to.eql(3);
let i49hsa2 = findSrcsetEntry(i49hsa,
'images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123');
expect(i49hsa2).to.not.be.a('undefined');
expect(i49hsa2).to.have.property('height');
expect(i49hsa2.height).to.eql(225);
});
it('should parse a srcset based on width and height', () => {
let i49whsa = pimgs['i49wh'].srcsetParse(pimgs['i49wh'].srcset);
expect(i49whsa.length).to.eql(3);
let i49whsa2 = findSrcsetEntry(i49whsa,
'images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123');
expect(i49whsa2).to.not.be.a('undefined');
expect(i49whsa2).to.have.property('height');
expect(i49whsa2).to.have.property('width');
expect(i49whsa2.height).to.eql(225);
expect(i49whsa2.width).to.eql(300);
let i49whsa1 = findSrcsetEntry(i49whsa,
'images/IMG_20170224_181033-150x150.jpg');
expect(i49whsa1).to.not.be.a('undefined');
expect(i49whsa1).to.have.property('height');
expect(i49whsa1).to.have.property('width');
expect(i49whsa1.height).to.eql(150);
expect(i49whsa1.width).to.eql(150);
});
it('should parse a srcset some height and some width descriptors', () => {
let i49whsa = pimgs.i49whm.srcsetParse(pimgs.i49whm.srcset);
expect(i49whsa.length).to.eql(3);
let i49whsa2 = findSrcsetEntry(i49whsa,
'images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123');
expect(i49whsa2).to.not.be.a('undefined');
expect(i49whsa2).to.have.property('height');
expect(i49whsa2).to.have.property('width');
expect(i49whsa2.height).to.eql(225);
expect(i49whsa2.width).to.eql(300);
let i49whsa1 = findSrcsetEntry(i49whsa,
'images/IMG_20170224_181033-150x150.jpg');
expect(i49whsa1).to.not.be.a('undefined');
expect(i49whsa1).to.not.have.property('height');
expect(i49whsa1).to.have.property('width');
expect(i49whsa1.width).to.eql(150);
let i49whsa3 = findSrcsetEntry(i49whsa,
'images/IMG_20170224_181033-768x576.jpg');
expect(i49whsa3).to.not.be.a('undefined');
expect(i49whsa3).to.not.have.property('width');
expect(i49whsa3).to.have.property('height');
expect(i49whsa3.height).to.eql(576);
});
it('should parse a srcset based on density', () => {
let i49whsa = pimgs.i49d.srcsetParse(pimgs.i49d.srcset);
expect(i49whsa.length).to.eql(3);
let i49whsa2 = findSrcsetEntry(i49whsa,
'images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123');
expect(i49whsa2).to.not.be.a('undefined');
expect(i49whsa2).to.have.property('density');
expect(i49whsa2).to.not.have.property('width');
expect(i49whsa2.density).to.eql(2.0);
});
it('should parse a srcset based on width and density', () => {
let i49whsa = pimgs.i49wd.srcsetParse(pimgs.i49wd.srcset);
expect(i49whsa.length).to.eql(3);
let i49whsa2 = findSrcsetEntry(i49whsa,
'images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123');
expect(i49whsa2).to.not.be.a('undefined');
expect(i49whsa2).to.have.property('density');
expect(i49whsa2).to.have.property('width');
expect(i49whsa2.density).to.eql(2.0);
expect(i49whsa2.width).to.eql(300);
});
it('should parse a srcset based on height and density', () => {
let i49whsa = pimgs.i49hd.srcsetParse(pimgs.i49hd.srcset);
expect(i49whsa.length).to.eql(3);
let i49whsa2 = findSrcsetEntry(i49whsa,
'images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123');
expect(i49whsa2).to.not.be.a('undefined');
expect(i49whsa2).to.have.property('density');
expect(i49whsa2).to.not.have.property('width');
expect(i49whsa2).to.have.property('height');
expect(i49whsa2.density).to.eql(2.0);
expect(i49whsa2.height).to.eql(225);
let i49whsa3 = findSrcsetEntry(i49whsa,
'images/IMG_20170224_181033-768x576.jpg');
expect(i49whsa3).to.not.be.a('undefined');
expect(i49whsa3).to.have.property('density');
expect(i49whsa3).to.not.have.property('width');
expect(i49whsa3).to.have.property('height');
expect(i49whsa3.density).to.eql(4.0);
expect(i49whsa3.height).to.eql(576);
});
it('should reject a spec with 2 width descriptors', () => {
let i = pimgs.i49w2.srcsetParse(pimgs.i49w2.srcset);
expect(i.length).to.eql(2);
let isa1 = findSrcsetEntry(i, 'images/IMG_20170224_181033-150x150.jpg');
expect(isa1).to.be.a('undefined');
});
it('should reject a spec with 2 height descriptors', () => {
let i = pimgs.i49h2.srcsetParse(pimgs.i49h2.srcset);
expect(i.length).to.eql(2);
let isa1 = findSrcsetEntry(i, 'images/IMG_20170224_181033-150x150.jpg');
expect(isa1).to.be.a('undefined');
});
});
context('width based selection', () => {
it('should pick the right image by width', () => {
expect(selectedImgUrl(pimgs['i51'])).to.eql(
'images/IMG_20170426_112820-225x300.jpg');
expect(selectedImgUrl(pimgs['i49'])).to.eql(
'images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123');
});
});
context('height based selection', () => {
it('should pick the right image by height', () => {
expect(selectedImgUrl(pimgs.i49h)).to.eql(
'images/IMG_20170224_181033-300x225.jpg?foo=y,bar=123');
});
});
context('width and height based selection', () => {
it('should pick the right image by width and height', () => {
expect(selectedImgUrl(pimgs.i49wh)).to.eql(
'images/IMG_20170224_181033-768x576.jpg');
});
});
//
// TODO: add tests for density, height and combinations of selectors
//
});
</script>
</body>
</html>