Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(354)

Unified Diff: LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited.html

Issue 1162793003: Add CSS image-orientation: from-image (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: add converter Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited.html
diff --git a/LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited.html b/LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited.html
new file mode 100644
index 0000000000000000000000000000000000000000..f49f5d67c363371253a6cde70a766e2f6e3d2530
--- /dev/null
+++ b/LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited.html
@@ -0,0 +1,49 @@
+<html>
+<head>
+<script>
+if (window.testRunner) {
+ testRunner.dumpAsTextWithPixelResults();
+}
+
+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 <= 9; i++)
+ log("img" + i + " size = " + imageSize(document.getElementById("img" + i)))
+}
+
+</script>
+<style>
+body { overflow: hidden; }
+img { transform: translateZ(0); image-orientation: from-image; }
+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 by use of image-orientation: from-image.</b><br><br>
+<div><img id="img1" src="../../images/resources/exif-orientation-1-ul.jpg"><br>Normal</div>
+<div><img id="img2" src="../../images/resources/exif-orientation-2-ur.jpg"><br>Flipped horizontally</div>
+<div><img id="img3" src="../../images/resources/exif-orientation-3-lr.jpg"><br>Rotated 180&deg;</div>
+<div><img id="img4" src="../../images/resources/exif-orientation-4-lol.jpg"><br>Flipped vertically</div>
+<br>
+<div><img id="img5" src="../../images/resources/exif-orientation-5-lu.jpg"><br>Rotated 90&deg; CCW and flipped vertically</div>
+<div><img id="img6" src="../../images/resources/exif-orientation-6-ru.jpg"><br>Rotated 90&deg; CCW</div>
+<div><img id="img7" src="../../images/resources/exif-orientation-7-rl.jpg"><br>Rotated 90&deg; CW and flipped vertically </div>
+<div><img id="img8" src="../../images/resources/exif-orientation-8-llo.jpg"><br>Rotated 90&deg; CW</div>
+<br>
+<div><img id="img9" src="../../images/resources/exif-orientation-9-u.jpg"><br>Undefined (invalid value)</div>
+<br>
+<ul id="console"></ul>
+</body>
+</html>

Powered by Google App Engine
This is Rietveld 408576698