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