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

Side by Side 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 unified diff | Download patch
OLDNEW
(Empty)
1 <html>
2 <head>
3 <script>
4 if (window.testRunner) {
5 testRunner.dumpAsTextWithPixelResults();
6 }
7
8 function log(str) {
9 var li = document.createElement("li");
10 li.appendChild(document.createTextNode(str));
11 var console = document.getElementById("console");
12 console.appendChild(li);
13 }
14
15 function imageSize(el) {
16 var computedStyle = window.getComputedStyle(el);
17 return computedStyle.width + " by " + computedStyle.height;
18 }
19
20
21 function load() {
22 for (var i = 1; i <= 9; i++)
23 log("img" + i + " size = " + imageSize(document.getElementById("img" + i )))
24 }
25
26 </script>
27 <style>
28 body { overflow: hidden; }
29 img { transform: translateZ(0); image-orientation: from-image; }
30 div { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 100 px; vertical-align: top; }
31 </style>
32 </head>
33 <body onload="load()">
34 <b>The images should be rotated respecting their EXIF orientation by use of imag e-orientation: from-image.</b><br><br>
35 <div><img id="img1" src="../../images/resources/exif-orientation-1-ul.jpg"><br>N ormal</div>
36 <div><img id="img2" src="../../images/resources/exif-orientation-2-ur.jpg"><br>F lipped horizontally</div>
37 <div><img id="img3" src="../../images/resources/exif-orientation-3-lr.jpg"><br>R otated 180&deg;</div>
38 <div><img id="img4" src="../../images/resources/exif-orientation-4-lol.jpg"><br> Flipped vertically</div>
39 <br>
40 <div><img id="img5" src="../../images/resources/exif-orientation-5-lu.jpg"><br>R otated 90&deg; CCW and flipped vertically</div>
41 <div><img id="img6" src="../../images/resources/exif-orientation-6-ru.jpg"><br>R otated 90&deg; CCW</div>
42 <div><img id="img7" src="../../images/resources/exif-orientation-7-rl.jpg"><br>R otated 90&deg; CW and flipped vertically </div>
43 <div><img id="img8" src="../../images/resources/exif-orientation-8-llo.jpg"><br> Rotated 90&deg; CW</div>
44 <br>
45 <div><img id="img9" src="../../images/resources/exif-orientation-9-u.jpg"><br>Un defined (invalid value)</div>
46 <br>
47 <ul id="console"></ul>
48 </body>
49 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698