blob: 7be79332974c8813befb478e7e79ea5e197c59cd [file] [log] [blame]
<!DOCTYPE html>
<meta name="fuzzy" content="maxDifference=0-42;totalPixels=11350-12250" />
<style>
div.container {
display: inline-block;
margin-right: 20px;
margin-bottom: 10px;
width: 100px;
vertical-align: top;
}
div.horizontal {
width: 102px;
height: 52px;
}
div.vertical {
width: 52px;
height: 102px;
}
svg {
border: 1px solid black;
}
svg.horizontal {
width: 100px;
height: 50px;
}
svg.vertical {
width: 50px;
height: 100px;
}
</style>
<body>
<b>The images of the SVG &lt;feimage&gt; elements should be rotated respecting their EXIF orientation.</b>
<br>
<br>
<div class="container">
<div class="horizontal">
<svg class="horizontal">
<filter id="img1">
<feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-1-ul.jpg"/>
</filter>
<rect width="100%" height="100%" style="filter:url(#img1);"/>
</svg>
</div>
<br>Normal
</div>
<div class="container">
<div class="horizontal">
<svg class="horizontal">
<filter id="img2">
<feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-2-ur.jpg"/>
</filter>
<rect width="100%" height="100%" style="filter:url(#img2);"/>
</svg>
</div>
<br>Flipped horizontally
</div>
<div class="container">
<div class="horizontal">
<svg class="horizontal">
<filter id="img3">
<feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-3-lr.jpg"/>
</filter>
<rect width="100%" height="100%" style="filter:url(#img3);"/>
</svg>
</div>
<br>Rotated 180&deg;
</div>
<div class="container">
<div class="horizontal">
<svg class="horizontal">
<filter id="img4">
<feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-4-lol.jpg"/>
</filter>
<rect width="100%" height="100%" style="filter:url(#img4);"/>
</svg>
</div>
<br>Flipped vertically
</div>
<br>
<div class="container">
<div class="vertical">
<svg class="vertical">
<filter id="img5">
<feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-5-lu.jpg"/>
</filter>
<rect width="100%" height="100%" style="filter:url(#img5);"/>
</svg>
</div>
<br>Rotated 90&deg; CCW and flipped vertically
</div>
<div class="container">
<div class="vertical">
<svg class="vertical">
<filter id="img6">
<feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-6-ru.jpg"/>
</filter>
<rect width="100%" height="100%" style="filter:url(#img6);"/>
</svg>
</div>
<br>Rotated 90&deg; CCW
</div>
<div class="container">
<div class="vertical">
<svg class="vertical">
<filter id="img7">
<feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-7-rl.jpg"/>
</filter>
<rect width="100%" height="100%" style="filter:url(#img7);"/>
</svg>
</div>
<br>Rotated 90&deg; CW and flipped vertically
</div>
<div class="container">
<div class="vertical">
<svg class="vertical">
<filter id="img8">
<feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-8-llo.jpg"/>
</filter>
<rect width="100%" height="100%" style="filter:url(#img8);"/>
</svg>
</div>
<br>Rotated 90&deg; CW
</div>
<br>
<div class="container">
<div class="horizontal">
<svg class="horizontal">
<filter id="img9">
<feimage x="0" y="0" width="100%" height="100%" href="resources/exif-orientation-9-u.jpg"/>
</filter>
<rect width="100%" height="100%" style="filter:url(#img9);"/>
</svg>
</div>
<br>Undefined (invalid value)
</div>
<br>
</body>