Test purpose
- Setup the canvas element so it picks up its parent element's dimension updates
- Import a responsive image (with a srcset attribute) from the DOM
- Create a Picture entity and set it to cover the canvas
- Change the browser's viewport size
- Check that when the browser selects a different srcset image, the canvas displays that image
- Check that the canvas always displays the entire image, not a part of it
Known issue: Webkit based browsers (for example: Safari) will load an appropriately sized image initially, but does not respond by uploading additional images as the browser dimensiopns change.
Annotated code
