Chromium Code Reviews Chromium Code Reviews
Issue 1162793003:
Add CSS image-orientation: from-image (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| (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++) | |
|
Noel Gordon
2015/06/19 07:41:24
nit: for (var ...
rwlbuis
2015/06/19 16:03:15
Done.
| |
| 23 log("img" + i + " size = " + imageSize(document.getElementById("img" + i ))) | |
| 24 } | |
| 25 | |
| 26 </script> | |
| 27 <style> | |
| 28 body { overflow: hidden; } | |
| 29 img { border: 1px solid black; 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°</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° CCW and flipped vertically</div> | |
| 41 <div><img id="img6" src="../../images/resources/exif-orientation-6-ru.jpg"><br>R otated 90° CCW</div> | |
| 42 <div><img id="img7" src="../../images/resources/exif-orientation-7-rl.jpg"><br>R otated 90° CW and flipped vertically </div> | |
| 43 <div><img id="img8" src="../../images/resources/exif-orientation-8-llo.jpg"><br> Rotated 90° 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> | |
| OLD | NEW |
