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