devicepixel.html (2650B)
1 <!doctype html> 2 <link rel="match" href="devicepixel-ref.html"> 3 <meta name="assert" content="Device pixel content box sizes and pixel snapping are correct in Resize Observer callback"> 4 <!-- 5 This test verifies that the device pixel content box sizes available 6 in a resize observer callback are correct. Resize observer notifications 7 are delivered as the element is loaded. A box is then drawn using the 8 available dimensions in device pixels. The result is compared to the reference 9 which uses div and border to draw a box. 10 --> 11 12 <style> 13 #canvas2D { 14 width: 100%; 15 height: 100%; 16 } 17 #canvas2DPadding14 { 18 width: 100%; 19 height: 100%; 20 } 21 #outer { 22 padding-top: 1.7px; 23 width: 300.8px; 24 height: 250.1px; 25 } 26 #outer2 { 27 padding-top: 1.4px; 28 width: 300.8px; 29 height: 250.1px; 30 } 31 32 </style> 33 <body> 34 <div id="outer"> 35 <canvas id="canvas2D"></canvas> 36 </div> 37 <div id="outer2"> 38 <canvas id="canvas2DPadding14"></canvas> 39 </div> 40 </body> 41 42 <script> 43 // Create a box using device pixel content box dimensions 44 function paint2D(ctx, snappedSize) { 45 ctx.beginPath(); 46 // Use a linewidth of 2. Because the rectangle is drawn at 0,0 with 47 // its dimensions being the same as canvas dimensions, linewidth as it 48 // is drawn on the canvas will be 1. 49 ctx.lineWidth = window.devicePixelRatio * 2; 50 ctx.strokeStyle = "green"; 51 ctx.rect(0, 0, snappedSize.inlineSize, snappedSize.blockSize); 52 ctx.stroke(); 53 } 54 55 function updateCanvasSize2D(canvas2D, ctx, snappedSize) { 56 canvas2D.width = snappedSize.inlineSize; 57 canvas2D.height = snappedSize.blockSize; 58 paint2D(ctx, snappedSize); 59 } 60 61 (function() { 62 let canvas2D = document.querySelector("#canvas2D"); 63 let canvas2DPadding14 = document.querySelector("#canvas2DPadding14"); 64 65 function observeSizes() { 66 let ro = new ResizeObserver( entries => { 67 for (entry of entries) { 68 let size = entry.devicePixelContentBoxSize[0]; 69 if (entry.target == canvas2D) { 70 let canvas2D = document.querySelector("#canvas2D"); 71 let ctx = canvas2D.getContext("2d"); 72 updateCanvasSize2D(canvas2D, ctx, size); 73 } else if (entry.target == canvas2DPadding14){ 74 let canvas2DPadding14 = document.querySelector("#canvas2DPadding14"); 75 let ctx = canvas2DPadding14.getContext("2d"); 76 updateCanvasSize2D(canvas2DPadding14, ctx, size); 77 } 78 } 79 }); 80 ro.observe(canvas2D, {box: "device-pixel-content-box"}); 81 ro.observe(canvas2DPadding14, {box: "device-pixel-content-box"}); 82 } 83 observeSizes(); 84 })(); 85 </script>