tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

image-orientation-from-image-content-images-ref.html (3152B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>CSS Images Module Level 3: image-orientation: from-image for content images</title>
      5 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
      6 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
      7 <style>
      8    div.image {
      9        display: inline-block;
     10    }
     11    div.container {
     12        display: inline-block;
     13        width: 100px;
     14        vertical-align: top;
     15    }
     16    img {
     17        width: 100px;
     18        height: 100px;
     19        background-repeat: no-repeat;
     20    }
     21    body {
     22        overflow: hidden;
     23    }
     24 </style>
     25 </head>
     26 <body >
     27    <p>The images should rotate respecting their EXIF orientation because
     28       image-orientation: from-image is specified.
     29    </p>
     30    <div class="container">
     31        <div class="image" style="content: url(../support/exif-orientation-1-ul-pre-rotated.jpg)"></div>
     32        <br>Normal
     33    </div>
     34    <div class="container">
     35        <div class="image" style="content: url(../support/exif-orientation-2-ur-pre-rotated.jpg)"></div>
     36        <br>Flipped horizontally
     37    </div>
     38    <div class="container">
     39        <div class="image" style="content: url(../support/exif-orientation-3-lr-pre-rotated.jpg)"></div>
     40        <br>Rotated 180&deg;
     41    </div>
     42    <div class="container">
     43        <div class="image" style="content: url(../support/exif-orientation-4-lol-pre-rotated.jpg)"></div>
     44        <br>Flipped vertically
     45    </div>
     46    <br>
     47    <div class="container">
     48        <div class="image" style="content: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></div>
     49        <br>Rotated 90&deg; CCW and flipped vertically
     50    </div>
     51    <div class="container">
     52        <div class="image" style="content: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></div>
     53        <br>Rotated 90&deg; CW
     54    </div>
     55    <div class="container">
     56        <div class="image" style="content: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></div>
     57        <br>Rotated 90&deg; CW and flipped vertically
     58    </div>
     59    <div class="container">
     60        <div class="image" style="content: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></div>
     61        <br>Rotated 90&deg; CCW
     62    </div>
     63    <br>
     64    <div class="container">
     65        <img style="background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></img>
     66        <br>Rotated 90&deg; CCW and flipped vertically
     67    </div>
     68    <div class="container">
     69        <img style="background-image: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></img>
     70        <br>Rotated 90&deg; CW
     71    </div>
     72    <div class="container">
     73        <img style="background-image: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></img>
     74        <br>Rotated 90&deg; CW and flipped vertically
     75    </div>
     76    <div class="container">
     77        <img style="background-image: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></img>
     78        <br>Rotated 90&deg; CCW
     79    </div>
     80    <br>
     81    <div class="container">
     82        <div class="image" style="content: url(../support/exif-orientation-9-u-pre-rotated.jpg)"></div>
     83        <br>Undefined (invalid value)
     84    </div>
     85 </body>
     86 </html>