third_party/WebKit/LayoutTests/fast/css/image-orientation/image-orientation-from-image-composited.html

   1 <html>
   2 <head>
   3 <script>
   4 if (window.testRunner) {
   5     testRunner.dumpAsTextWithPixelResults();
   6 }
   7
   8 function log(str) {
   9     var li = document.createElement("li");
  10     li.appendChild(document.createTextNode(str));
  11     var console = document.getElementById("console");
  12     console.appendChild(li);
  13 }
  14
  15 function imageSize(el) {
  16     var computedStyle = window.getComputedStyle(el);
  17     return computedStyle.width + " by " + computedStyle.height;
  18 }
  19
  20
  21 function load() {
  22     for (var i = 1; i <= 9; i++)
  23         log("img" + i + " size = " + imageSize(document.getElementById("img" + i)))
  24 }
  25
  26 </script>
  27 <style>
  28 body { overflow: hidden; }
  29 img { transform: translateZ(0); image-orientation: from-image; }
  30 div { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 100px; vertical-align: top; }
  31 </style>
  32 </head>
  33 <body onload="load()">
  34 <b>The images should be rotated respecting their EXIF orientation by use of image-orientation: from-image.</b><br><br>
  35 <div><img id="img1" src="../../images/resources/exif-orientation-1-ul.jpg"><br>Normal</div>
  36 <div><img id="img2" src="../../images/resources/exif-orientation-2-ur.jpg"><br>Flipped horizontally</div>
  37 <div><img id="img3" src="../../images/resources/exif-orientation-3-lr.jpg"><br>Rotated 180&deg;</div>
  38 <div><img id="img4" src="../../images/resources/exif-orientation-4-lol.jpg"><br>Flipped vertically</div>
  39 <br>
  40 <div><img id="img5" src="../../images/resources/exif-orientation-5-lu.jpg"><br>Rotated 90&deg; CCW and flipped vertically</div>
  41 <div><img id="img6" src="../../images/resources/exif-orientation-6-ru.jpg"><br>Rotated 90&deg; CCW</div>
  42 <div><img id="img7" src="../../images/resources/exif-orientation-7-rl.jpg"><br>Rotated 90&deg; CW and flipped vertically </div>
  43 <div><img id="img8" src="../../images/resources/exif-orientation-8-llo.jpg"><br>Rotated 90&deg; CW</div>
  44 <br>
  45 <div><img id="img9" src="../../images/resources/exif-orientation-9-u.jpg"><br>Undefined (invalid value)</div>
  46 <br>
  47 <ul id="console"></ul>
  48 </body>
  49 </html>