<!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>
