<!DOCTYPE> <head> <style> body { border: 0px; margin: 0px; padding: 0px; } div { width: 100px; height: 200px; border: 50px solid black; margin: 50px; padding: 50px; /* This is deliberately an image with a non-neutral inherent orientation to */ /* ensure that the inherent orientation is irrelevant. */ background-image: url(image-exif-90-deg-flip.jpg); background-position: center; background-repeat: no-repeat; } </style> </head> <body> <div></div> <script> var fromImage = location.search == "from-image"; // Construct a style. var style; if (fromImage) { style = "div { image-orientation: from-image; }\n"; } else { style = "div { image-orientation: none; }\n"; } // Apply the style to the document. var sheet = document.createElement('style'); sheet.innerHTML = style; document.body.appendChild(sheet); </script> </body>