third_party/WebKit/LayoutTests/fast/images/exif-orientation-css.html

   1 <html>
   2 <head>
   3 <script>
   4 if (window.testRunner) {
   5     testRunner.overridePreference('WebKitShouldRespectImageOrientation', 1);
   6     testRunner.dumpAsTextWithPixelResults();
   7 }
   8
   9 function log(str) {
  10     var li = document.createElement("li");
  11     li.appendChild(document.createTextNode(str));
  12     var console = document.getElementById("console");
  13     console.appendChild(li);
  14 }
  15
  16 function imageSize(el) {
  17     var computedStyle = window.getComputedStyle(el);
  18     return computedStyle.width + " by " + computedStyle.height;
  19 }
  20
  21
  22 function load() {
  23     for(var i = 1; i <= 13; i++)
  24         log("img" + i + " size = " + imageSize(document.getElementById("img" + i)))
  25 }
  26
  27 </script>
  28 <style>
  29 div.image { display: inline-block; border: 1px solid black; }
  30 div.container { display: inline-block; margin-right: 20px; margin-bottom: 10px; width: 100px; vertical-align: top; }
  31 img { width: 100px; height: 100px; background-repeat: no-repeat; }
  32 body { overflow: hidden; }
  33 </style>
  34 </head>
  35 <body onload="load()">
  36 <b>None of the images should be rotated. This test is only valid when run with testRunner (or with WebKitShouldRespectImageOrientation manually set to true).</b><br><br>
  37 <div class="container"><div class="image" id="img1" style="content: url(resources/exif-orientation-1-ul.jpg)"></div><br>Normal</div>
  38 <div class="container"><div class="image" id="img2" style="content: url(resources/exif-orientation-2-ur.jpg)"></div><br>Flipped horizontally</div>
  39 <div class="container"><div class="image" id="img3" style="content: url(resources/exif-orientation-3-lr.jpg)"></div><br>Rotated 180&deg;</div>
  40 <div class="container"><div class="image" id="img4" style="content: url(resources/exif-orientation-4-lol.jpg)"></div><br>Flipped vertically</div>
  41 <br>
  42 <div class="container"><div class="image" id="img5" style="content: url(resources/exif-orientation-5-lu.jpg)"></div><br>Rotated 90&deg; CCW and flipped vertically</div>
  43 <div class="container"><div class="image" id="img6" style="content: url(resources/exif-orientation-6-ru.jpg)"></div><br>Rotated 90&deg; CCW</div>
  44 <div class="container"><div class="image" id="img7" style="content: url(resources/exif-orientation-7-rl.jpg)"></div><br>Rotated 90&deg; CW and flipped vertically</div>
  45 <div class="container"><div class="image" id="img8" style="content: url(resources/exif-orientation-8-llo.jpg)"></div><br>Rotated 90&deg; CW</div>
  46 <br>
  47 <div class="container"><img id="img9" style="background-image: url(resources/exif-orientation-5-lu.jpg)"></img><br>Rotated 90&deg; CCW and flipped vertically</div>
  48 <div class="container"><img id="img10" style="background-image: url(resources/exif-orientation-6-ru.jpg)"></img><br>Rotated 90&deg; CCW</div>
  49 <div class="container"><img id="img11" style="background-image: url(resources/exif-orientation-7-rl.jpg)"></img><br>Rotated 90&deg; CW and flipped vertically</div>
  50 <div class="container"><img id="img12" style="background-image: url(resources/exif-orientation-8-llo.jpg)"></img><br>Rotated 90&deg; CW</div>
  51 <br>
  52 <div class="container"><div class="image" id="img13" style="content: url(resources/exif-orientation-9-u.jpg)"></div><br>Undefined (invalid value)</div>
  53 <br>
  54 <ul id="console"></ul>
  55 </body>
  56 </html>