tor-browser

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

image-orientation-none-cross-origin.html (3859B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <head>
      4 <meta charset="utf-8">
      5 <title>CSS Images Module Level 3: image-orientation: none</title>
      6 <script src=/common/get-host-info.sub.js></script>
      7 <link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
      8 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
      9 <link rel="match" href="reference/image-orientation-none-cross-origin-ref.html">
     10 <style>
     11    body {
     12        overflow: hidden;
     13        image-orientation: none;
     14    }
     15    div {
     16        display: inline-block;
     17        width: 100px;
     18        vertical-align: top;
     19    }
     20 </style>
     21 </head>
     22 <body>
     23    <p>The following images should not be identical.</p>
     24    <p>The image should not rotate respecting their EXIF orientation because
     25       image-orientation: none is specified and the request is same origin.</p>
     26    <div><img src="support/exif-orientation-3-lr.jpg"/></div>
     27 
     28    <p>This image should rotate respecting their EXIF orientation because
     29       image-orientation: none should be effectively ignored for opaque (cross-origin) images.</p>
     30    <div><img id="corsImage" src="support/exif-orientation-3-lr.jpg"/></div>
     31 
     32    <p>The image should not rotate respecting their EXIF orientation because
     33       image-orientation: none is specified and the request is CORS anonymous.</p>
     34    <div><img id="corsAnonymousImg" crossorigin="anonymous" src="support/exif-orientation-3-lr.jpg"/></div>
     35 
     36    <p>The image should not rotate respecting their EXIF orientation because
     37       image-orientation: none is specified and the request is CORS
     38       use-credentials.</p>
     39    <div><img id="corsUseCredsImg" crossorigin="use-credentials" src="support/exif-orientation-3-lr.jpg"/></div>
     40 
     41    <p>The image should not rotate respecting their EXIF orientation because
     42       image-orientation: none is specified and the image source is a blob.</p>
     43    <div><img id="blobImage"/></div>
     44 
     45    <p>The image should not rotate respecting their EXIF orientation because
     46       image-orientation: none is specified and the image source is a data url.</p>
     47    <div><img id="dataImage"/></div>
     48 </body>
     49 <script>
     50  const testImage = 'support/exif-orientation-3-lr.jpg';
     51  let sPendingImagesToLoad = 5;
     52 
     53  function pendingImageLoaded() {
     54    if (!--sPendingImagesToLoad) {
     55      document.documentElement.removeAttribute('class');
     56    }
     57  }
     58 
     59  const img = document.getElementById('corsImage')
     60  img.onload = pendingImageLoaded;
     61  img.src = img.src.replace(new URL(img.src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
     62 
     63  const corsAnonImg = document.getElementById('corsAnonymousImg')
     64  corsAnonImg.onload = pendingImageLoaded;
     65  corsAnonImg.src = corsAnonImg.src.replace(new URL(corsAnonImg.src).origin,
     66                                            get_host_info().HTTP_REMOTE_ORIGIN)
     67    + "?pipe=header(Access-Control-Allow-Origin,*)";
     68 
     69  const corsUseCredsImg = document.getElementById('corsUseCredsImg')
     70  corsUseCredsImg.onload = pendingImageLoaded;
     71  corsUseCredsImg.src = corsUseCredsImg.src.replace(new URL(corsUseCredsImg.src).origin,
     72                                                    get_host_info().HTTP_REMOTE_ORIGIN)
     73    + "?pipe=header(Access-Control-Allow-Credentials,true)"
     74    + "|header(Access-Control-Allow-Origin," + location.origin + ")";
     75 
     76  const blobImg = document.getElementById('blobImage');
     77  fetch(testImage).then((resp) => {
     78    return resp.blob();
     79  }).then((blob) => {
     80    blobImg.onload = pendingImageLoaded;
     81    blobImg.src = URL.createObjectURL(blob);
     82  });
     83 
     84  const dataImg = document.getElementById('dataImage');
     85  fetch(testImage).then((resp) => {
     86    return resp.blob();
     87  }).then((blob) => {
     88    const reader = new FileReader();
     89 
     90    reader.addEventListener("load", () => {
     91      dataImg.onload = pendingImageLoaded;
     92      dataImg.src = reader.result;
     93    });
     94 
     95    reader.readAsDataURL(blob);
     96  });
     97 </script>
     98 </html>