image-orientation-from-image-composited-dynamic2.html (1856B)
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 with will-change: transform</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 will-change: transform; 16 image-orientation: from-image; 17 } 18 div { 19 display: inline-block; 20 width: 100px; 21 vertical-align: top; 22 } 23 </style> 24 <script> 25 function runTest() { 26 for (var i = 1; i <= 9; i++) { 27 document.getElementById("img" + i).style.imageOrientation = "none"; 28 } 29 } 30 </script> 31 </head> 32 <body onload="runTest()"> 33 <p>The images should not rotate respecting their EXIF orientation because 34 image-orientation: none is specified.</p> 35 <div> 36 <img id="img1" src="support/exif-orientation-1-ul.jpg"/> 37 </div> 38 <div> 39 <img id="img2" src="support/exif-orientation-2-ur.jpg"/> 40 </div> 41 <div> 42 <img id="img3" src="support/exif-orientation-3-lr.jpg"/> 43 </div> 44 <div> 45 <img id="img4" src="support/exif-orientation-4-lol.jpg"/> 46 </div> 47 <div> 48 <img id="img5" src="support/exif-orientation-5-lu.jpg"/> 49 </div> 50 <div> 51 <img id="img6" src="support/exif-orientation-6-ru.jpg"/> 52 </div> 53 <div> 54 <img id="img7" src="support/exif-orientation-7-rl.jpg"/> 55 </div> 56 <div> 57 <img id="img8" src="support/exif-orientation-8-llo.jpg"/> 58 </div> 59 <div> 60 <img id="img9" src="support/exif-orientation-9-u.jpg"/> 61 </div> 62 </body> 63 </html>