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