image-orientation-none-cross-origin-svg.html (8758B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Images: image-orientation, CORS detection for SVG content</title> 6 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165"> 8 <link rel="match" href="reference/image-orientation-none-cross-origin-svg-ref.html"> 9 <script src="/common/get-host-info.sub.js"></script> 10 <script src="/common/reftest-wait.js"></script> 11 <script src="/common/rendering-utils.js"></script> 12 <style> 13 .image { 14 width: 40px; 15 height: 20px; 16 position: fixed; 17 } 18 </style> 19 <script> 20 function toCors(src) { 21 return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN) 22 } 23 24 window.onload = () => { 25 const images = [ 26 { 27 id_image: "cors_from_image", 28 id_foreign: "cors_from_foreign", 29 cors: true, 30 orientation: 'from-image', 31 shouldBeRotated: true, 32 left: '10px' 33 }, 34 { 35 id_image: "cors_none_image", 36 id_foreign: "cors_none_foreign", 37 cors: true, 38 orientation: 'none', 39 shouldBeRotated: true, 40 left: '60px' 41 }, 42 { 43 id_image: "same_from_image", 44 id_foreign: "same_from_foreign", 45 cors: false, 46 orientation: 'from-image', 47 shouldBeRotated: true, 48 left: '110px' 49 }, 50 { 51 id_image: "same_none_image", 52 id_foreign: "same_none_foreign", 53 cors: false, 54 orientation: 'none', 55 shouldBeRotated: false, 56 left: '160px' 57 }, 58 ]; 59 60 images.forEach(data => { 61 if (data.cors) { 62 image_src = document.getElementById("cors_img"); 63 image = document.getElementById(data.id_image); 64 image.setAttribute("href", image_src.src); 65 foreign = document.getElementById(data.id_foreign); 66 foreign.src = image_src.src; 67 } else { 68 image_src = document.getElementById("same_img"); 69 image = document.getElementById(data.id_image); 70 image.setAttribute("href", image_src.src); 71 foreign = document.getElementById(data.id_foreign); 72 foreign.src = image_src.src; 73 } 74 75 const canvas_svg_image = document.createElement('canvas'); 76 canvas_svg_image.className = "image"; 77 canvas_svg_image.width = canvas_svg_image.height = 1; 78 canvas_svg_image.style.left = data.left; 79 canvas_svg_image.style.top = "140px"; 80 // The source of image-orientation preference for canvas drawImage 81 // is currently not standardized. 82 // See https://github.com/w3c/csswg-drafts/issues/4666 83 canvas_svg_image.style.imageOrientation = data.orientation; 84 document.body.appendChild(canvas_svg_image); 85 ctx = canvas_svg_image.getContext('2d'); 86 sx = data.shouldBeRotated ? 80 : 0; 87 sy = data.shouldBeRotated ? 40 : 0; 88 ctx.drawImage(image, sx, sy, 1, 1, 0, 0, 1, 1); 89 90 const canvas_svg_foreign = document.createElement('canvas'); 91 canvas_svg_foreign.className = "image"; 92 canvas_svg_foreign.width = canvas_svg_foreign.height = 1; 93 canvas_svg_foreign.style.left = data.left; 94 canvas_svg_foreign.style.top = "170px"; 95 canvas_svg_foreign.style.imageOrientation = data.orientation; 96 document.body.appendChild(canvas_svg_foreign); 97 ctx = canvas_svg_foreign.getContext('2d'); 98 sx = data.shouldBeRotated ? 80 : 0; 99 sy = data.shouldBeRotated ? 40 : 0; 100 ctx.drawImage(foreign, sx, sy, 1, 1, 0, 0, 1, 1); 101 }) 102 waitForAtLeastOneFrame().then(() => { takeScreenshot() }); 103 } 104 105 </script> 106 </head> 107 <body> 108 <svg class="image" id="svg_cors_from" style="left: 10px; top: 50px; image-orientation: from-image;"> 109 <image id="cors_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image> 110 </svg> 111 <!-- This should be functionally identical to a plain <img> element. We test it here to verify 112 that SVG foreign object correctly tracks the security origin for the image. --> 113 <svg class="image" style="left: 10px; top: 80px; image-orientation: from-image;"> 114 <foreignObject x="-57" y="-27" width="100" height="50"> 115 <img id="cors_from_foreign" src="support/exif-orientation-3-lr.jpg"></img> 116 </foreignObject> 117 </svg> 118 <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can 119 never be cross origin. This just tests that we don't crash or do other strange things. --> 120 <img class="image" id="img_cors_from" src="support/svg-with-image-rotated.svg" style="left: 10px; top: 110px; image-orientation: from-image;"/> 121 122 <svg class="image" style="left: 60px; top: 50px; image-orientation: none;"> 123 <image id="cors_none_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image> 124 </svg> 125 <!-- This should be functionally identical to a plain <img> element. We test it here to verify 126 that SVG foreign object correctly tracks the security origin for the image. --> 127 <svg class="image" style="left: 60px; top: 80px; image-orientation: none;"> 128 <foreignObject x="-57" y="-27" width="100" height="50"> 129 <img id="cors_none_foreign" src="support/exif-orientation-3-lr.jpg"></img> 130 </foreignObject> 131 </svg> 132 <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can 133 never be cross origin. This just tests that we don't crash or do other strange things. --> 134 <img class="image" id="img_cors_none" src="support/svg-with-image-rotated.svg" style="left: 60px; top: 110px; image-orientation: none;"/> 135 136 <svg class="image" style="left: 110px; top: 50px; image-orientation: from-image;"> 137 <image id="same_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image> 138 </svg> 139 <!-- This should be functionally identical to a plain <img> element. We test it here to verify 140 that SVG foreign object correctly tracks the security origin for the image. --> 141 <svg class="image" style="left: 110px; top: 80px; image-orientation: from-image;"> 142 <foreignObject x="-57" y="-27" width="100" height="50"> 143 <img id="same_from_foreign" src="support/exif-orientation-3-lr.jpg"></img> 144 </foreignObject> 145 </svg> 146 <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can 147 never be cross origin. This just tests that we don't crash or do other strange things. --> 148 <img class="image" id="img_same_from" src="support/svg-with-image-rotated.svg" style="left: 110px; top: 110px; image-orientation: from-image;"/> 149 150 <svg class="image" style="left: 160px; top: 50px; image-orientation: none;"> 151 <image id="same_none_image" href="support/exif-orientation-3-lr.jpg" X="0" Y="0"></image> 152 </svg> 153 <!-- This should be functionally identical to a plain <img> element. We test it here to verify 154 that SVG foreign object correctly tracks the security origin for the image. --> 155 <svg class="image" style="left: 160px; top: 80px; image-orientation: none;"> 156 <foreignObject x="0" y="0" width="100" height="50"> 157 <img id="same_none_foreign" src="support/exif-orientation-3-lr.jpg"></img> 158 </foreignObject> 159 </svg> 160 <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can 161 never be cross origin. This just tests that we don't crash or do other strange things. --> 162 <img class="image" id="img_same_none" src="support/svg-with-image-rotated.svg" style="left: 160px; top: 110px; image-orientation: none;"/> 163 164 <!-- This is the easiest way to get a cross origin url for SVG <image> --> 165 <script> 166 const img = document.createElement('img') 167 img.src = "support/exif-orientation-3-lr.jpg" 168 img.id = "same_img"; 169 img.style.display = "none"; 170 document.body.appendChild(img) 171 const imgCors = document.createElement('img') 172 imgCors.src = img.src 173 imgCors.src = toCors(imgCors.src) 174 imgCors.id = "cors_img"; 175 imgCors.style.display = "none"; 176 document.body.appendChild(imgCors) 177 </script> 178 179 </body> 180 </html>