blob: 98cff09a472f4b910c1f9ede5650eeba23052de1 [file] [log] [blame]
<html>
<head>
<script>
if (window.internals)
internals.settings.setShouldRespectImageOrientation(true);
if (window.testRunner)
testRunner.dumpAsText(true);
function log(str) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(str));
var console = document.getElementById("console");
console.appendChild(li);
}
function imageSize(el) {
var computedStyle = window.getComputedStyle(el);
return computedStyle.width + " by " + computedStyle.height;
}
function load() {
for(var i = 1; i <= 7; i++)
log("img" + i + " size = " + imageSize(document.getElementById("img" + i)))
}
</script>
<style>
img { -webkit-transform: translateZ(0); }
div { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 100px; vertical-align: top; }
</style>
</head>
<body onload="load()">
<b>The images should be rotated respecting their EXIF orientation. This test can only be run with testRunner (or by manually setting WebKitShouldRespectImageOrientation to true).</b><br><br>
<div><img id="img1" src="resources/exif-orientation-2-ur.jpg"><br>Flipped horizontally</div>
<div><img id="img2" src="resources/exif-orientation-3-lr.jpg"><br>Rotated 180&deg;</div>
<div><img id="img3" src="resources/exif-orientation-4-lol.jpg"><br>Flipped vertically</div>
<br>
<div><img id="img4" src="resources/exif-orientation-5-lu.jpg"><br>Rotated 90&deg; CCW and flipped vertically</div>
<div><img id="img5" src="resources/exif-orientation-6-ru.jpg"><br>Rotated 90&deg; CCW</div>
<div><img id="img6" src="resources/exif-orientation-7-rl.jpg"><br>Rotated 90&deg; CW and flipped vertically </div>
<div><img id="img7" src="resources/exif-orientation-8-llo.jpg"><br>Rotated 90&deg; CW</div>
<br>
<ul id="console"></ul>
</body>
</html>