image-orientation-background.html (997B)
1 <!DOCTYPE> 2 <head> 3 <style> 4 body { 5 border: 0px; 6 margin: 0px; 7 padding: 0px; 8 } 9 div { 10 width: 100px; 11 height: 200px; 12 border: 50px solid black; 13 margin: 50px; 14 padding: 50px; 15 16 /* This is deliberately an image with a non-neutral inherent orientation to */ 17 /* ensure that the inherent orientation is irrelevant. */ 18 background-image: url(image-exif-90-deg-flip.jpg); 19 background-position: center; 20 background-repeat: no-repeat; 21 } 22 </style> 23 </head> 24 <body> 25 <div></div> 26 27 <script> 28 var fromImage = location.search == "from-image"; 29 30 // Construct a style. 31 var style; 32 if (fromImage) { 33 style = "div { image-orientation: from-image; }\n"; 34 } else { 35 style = "div { image-orientation: none; }\n"; 36 } 37 38 // Apply the style to the document. 39 var sheet = document.createElement('style'); 40 sheet.innerHTML = style; 41 document.body.appendChild(sheet); 42 </script> 43 </body>