image-orientation-background.html

Enable keyboard shortcuts

<!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>