/object_embed_fallback.html
Last active Oct 12, 2015
picture fallbacks (object, embed, img)
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title><picture> with different fallbacks</title> | |
| </head> | |
| <body> | |
| <h1><picture> with different fallbacks</h1> | |
| <p>Don't forget to check which resources are loaded, regardless of what is displayed.</p> | |
| <h2>Test 1: <object></h2> | |
| <picture alt="1a"> | |
| <source src="http://responsiveimages.org/img/logo.png" alt="1b"> | |
| <object type="image/jpeg" data="http://placekitten.com/600/220"></object> | |
| </picture> | |
| <ul> | |
| <li>RICG logo = Support for <picture></li> | |
| <li>Kitten = Support for image in <embed> src</li> | |
| <li>Nothing = No support</li> | |
| </ul> | |
| <h2>Test 2: <embed></h2> | |
| <picture> | |
| <source src="http://responsiveimages.org/img/logo.png"> | |
| <embed type="image/jpeg" src="http://placekitten.com/600/221"> | |
| </picture> | |
| <ul> | |
| <li>RICG logo = Support for <picture></li> | |
| <li>Kitten = Support for image in <embed> src</li> | |
| <li>Nothing = No support</li> | |
| </ul> | |
| <h2>Test 3: <object> and <embed></h2> | |
| <picture> | |
| <source src="http://responsiveimages.org/img/logo.png"> | |
| <object type="image/jpeg" data="http://placekitten.com/600/222"> | |
| <embed type="image/jpeg" src="http://placekitten.com/600/223"> | |
| </object> | |
| </picture> | |
| <ul> | |
| <li>RICG logo = Support for <picture></li> | |
| <li>Kitten = Support for image in <embed> src, within an <object></li> | |
| <li>Nothing = No support</li> | |
| </ul> | |
| <h2>Test 4: <object> and <img></h2> | |
| <picture> | |
| <source src="http://responsiveimages.org/img/logo.png"> | |
| <object type="image/jpeg" data="http://placekitten.com/600/224"> | |
| <img src="http://placekitten.com/600/225" alt="kitten"> | |
| </object> | |
| </picture> | |
| <ul> | |
| <li>RICG logo = Support for <picture></li> | |
| <li>Kitten = Support <img> within an <object></li> | |
| <li>Nothing = No support</li> | |
| </ul> | |
| <h2>Test 5: <img></h2> | |
| <picture> | |
| <source src="http://responsiveimages.org/img/logo.png"> | |
| <img src="http://placekitten.com/600/226" alt="kitten"> | |
| </picture> | |
| <ul> | |
| <li>RICG logo = Support for <picture></li> | |
| <li>Kitten = Support <img></li> | |
| <li>Nothing = No support</li> | |
| </ul> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment