content-dpr-various-elements-ref.html (1527B)
1 <html> 2 <head> 3 <title>Content-DPR: various elements</title> 4 <link rel="author" title="Noam Rosenthal" href="noam@webkit.org"> 5 <meta name="assert" content="Assert that content-dpr is taken into account for images in all relevant elements (input/canvas/svg/video-poster)"> 6 <style> 7 .row { 8 display: flex; 9 } 10 11 .row > * { 12 object-fit: none; 13 object-position: top left; 14 margin: 5px; 15 width: 100px; 16 height: 100px; 17 background: yellow; 18 } 19 </style> 20 <script> 21 document.addEventListener("DOMContentLoaded", () => { 22 const canvas = document.getElementById('canvas') 23 const image = new Image() 24 image.onload = () => { 25 const ctx = canvas.getContext('2d') 26 ctx.drawImage(image, 0, 0, 50, 50) 27 } 28 image.src = "resources/square.png" 29 }); 30 </script> 31 </head> 32 <body> 33 <p>There following green boxes should all be 50px by 50px (cover 25% of the yellow boxes)</p> 34 <div class="row"> 35 <div> 36 <img src="resources/square.png" width="50" height="50" /> 37 </div> 38 <div> 39 <video poster="resources/square.png" width="50" height="50"></video> 40 </div> 41 <svg xmlns="http://www.w3.org/2000/svg" ><image href="resources/square.png" width="50" height="50" /></svg> 42 <div> 43 <input type="image" src="resources/square.png" width="50" height="50" /> 44 </div> 45 <canvas id="canvas" width="100" height="100"> 46 </div> 47 </body> 48 </html>