| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <script> | 3 <script> |
| 4 if (window.testRunner) { | 4 if (window.testRunner) { |
| 5 testRunner.dumpAsTextWithPixelResults(); | 5 testRunner.dumpAsTextWithPixelResults(); |
| 6 } | 6 } |
| 7 | 7 |
| 8 function log(str) { | 8 function log(str) { |
| 9 var li = document.createElement("li"); | 9 var li = document.createElement("li"); |
| 10 li.appendChild(document.createTextNode(str)); | 10 li.appendChild(document.createTextNode(str)); |
| 11 var console = document.getElementById("console"); | 11 var console = document.getElementById("console"); |
| 12 console.appendChild(li); | 12 console.appendChild(li); |
| 13 } | 13 } |
| 14 | 14 |
| 15 function imageSize(el) { | 15 function imageSize(el) { |
| 16 var computedStyle = window.getComputedStyle(el); | 16 var computedStyle = window.getComputedStyle(el); |
| 17 return computedStyle.width + " by " + computedStyle.height; | 17 return computedStyle.width + " by " + computedStyle.height; |
| 18 } | 18 } |
| 19 | 19 |
| 20 | 20 |
| 21 function load() { | 21 function load() { |
| 22 for (var i = 1; i <= 9; i++) | 22 for (var i = 1; i <= 9; i++) |
| 23 log("img" + i + " size = " + imageSize(document.getElementById("img" + i
))) | 23 log("img" + i + " size = " + imageSize(document.getElementById("img" + i
))) |
| 24 } | 24 } |
| 25 | 25 |
| 26 </script> | 26 </script> |
| 27 <style> | 27 <style> |
| 28 body { overflow: hidden; } | 28 body { overflow: hidden; } |
| 29 img { border: 1px solid black; image-orientation: from-image; } | 29 img { border: 1px solid black; } |
| 30 div { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 100
px; vertical-align: top; } | 30 div { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 100
px; vertical-align: top; } |
| 31 </style> | 31 </style> |
| 32 </head> | 32 </head> |
| 33 <body onload="load()"> | 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> | 34 <b>The images should not rotate respecting their EXIF orientation since no image
-orientation is specified.</b><br><br> |
| 35 <div><img id="img1" src="../../images/resources/exif-orientation-1-ul.jpg"><br>N
ormal</div> | 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> | 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> | 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> | 38 <div><img id="img4" src="../../images/resources/exif-orientation-4-lol.jpg"><br>
Flipped vertically</div> |
| 39 <br> | 39 <br> |
| 40 <div><img id="img5" src="../../images/resources/exif-orientation-5-lu.jpg"><br>R
otated 90° CCW and flipped vertically</div> | 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> | 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> | 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> | 43 <div><img id="img8" src="../../images/resources/exif-orientation-8-llo.jpg"><br>
Rotated 90° CW</div> |
| 44 <br> | 44 <br> |
| 45 <div><img id="img9" src="../../images/resources/exif-orientation-9-u.jpg"><br>Un
defined (invalid value)</div> | 45 <div><img id="img9" src="../../images/resources/exif-orientation-9-u.jpg"><br>Un
defined (invalid value)</div> |
| 46 <br> | 46 <br> |
| 47 <ul id="console"></ul> | 47 <ul id="console"></ul> |
| 48 </body> | 48 </body> |
| 49 </html> | 49 </html> |
| OLD | NEW |