LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited.html - Issue 1162793003: Add CSS image-orientation: from-image

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

« no previous file with comments | « LayoutTests/fast/css/image-orientation/image-orientation-from-image.html ('k') | LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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°</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° CCW and flipped vertically</div>

+<div><img id="img6" src="../../images/resources/exif-orientation-6-ru.jpg"><br>Rotated 90° CCW</div>

+<div><img id="img7" src="../../images/resources/exif-orientation-7-rl.jpg"><br>Rotated 90° CW and flipped vertically </div>

+<div><img id="img8" src="../../images/resources/exif-orientation-8-llo.jpg"><br>Rotated 90° 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>