tor-browser

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

image-orientation-none-content-images-ref.html (2509B)


      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>CSS Images Module Level 3: image-orientation: none for content images</title>
      6 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
      7 <link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
      8 <style>
      9    div.image {
     10        display: inline-block;
     11    }
     12    div.container {
     13        display: inline-block;
     14        width: 100px;
     15        vertical-align: top;
     16    }
     17    img {
     18        width: 100px;
     19        height: 100px;
     20        background-repeat: no-repeat;
     21    }
     22    body {
     23        overflow: hidden;
     24    }
     25 </style>
     26 </head>
     27 <body>
     28    <p>The images should not rotate respecting their EXIF orientation because
     29       image-orientation: none is specified.</p>
     30    <div class="container">
     31        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
     32    </div>
     33    <div class="container">
     34        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
     35    </div>
     36    <div class="container">
     37        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
     38    </div>
     39    <div class="container">
     40        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
     41    </div>
     42    <br>
     43    <div class="container">
     44        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
     45    </div>
     46    <div class="container">
     47        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
     48    </div>
     49    <div class="container">
     50        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
     51    </div>
     52    <div class="container">
     53        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
     54    </div>
     55    <br>
     56    <div class="container">
     57        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
     58    </div>
     59    <div class="container">
     60        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
     61    </div>
     62    <div class="container">
     63        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
     64    </div>
     65    <div class="container">
     66        <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img>
     67    </div>
     68    <br>
     69    <div class="container">
     70        <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div>
     71    </div>
     72 </body>
     73 </html>