image-orientation-from-image-dynamic2.html (1796B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Images Module Level 3: change from image-orientation: from-image to none</title> 6 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> 8 <link rel="match" href="reference/image-orientation-none-ref.html"> 9 <meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123"> 10 <style> 11 body { 12 overflow: hidden; 13 } 14 img { 15 image-orientation: from-image; 16 } 17 div { 18 display: inline-block; 19 width: 100px; 20 vertical-align: top; 21 } 22 </style> 23 <script> 24 function runTest() { 25 for (var i = 1; i <= 9; i++) { 26 document.getElementById("img" + i).style.imageOrientation = "none"; 27 } 28 } 29 </script> 30 </head> 31 <body onload="runTest()"> 32 <p>The images should not rotate respecting their EXIF orientation because 33 image-orientation: none is specified.</p> 34 <div> 35 <img id="img1" src="support/exif-orientation-1-ul.jpg"/> 36 </div> 37 <div> 38 <img id="img2" src="support/exif-orientation-2-ur.jpg"/> 39 </div> 40 <div> 41 <img id="img3" src="support/exif-orientation-3-lr.jpg"/> 42 </div> 43 <div> 44 <img id="img4" src="support/exif-orientation-4-lol.jpg"/> 45 </div> 46 <div> 47 <img id="img5" src="support/exif-orientation-5-lu.jpg"/> 48 </div> 49 <div> 50 <img id="img6" src="support/exif-orientation-6-ru.jpg"/> 51 </div> 52 <div> 53 <img id="img7" src="support/exif-orientation-7-rl.jpg"/> 54 </div> 55 <div> 56 <img id="img8" src="support/exif-orientation-8-llo.jpg"/> 57 </div> 58 <div> 59 <img id="img9" src="support/exif-orientation-9-u.jpg"/> 60 </div> 61 </body> 62 </html>