1972885.html (1173B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Test for Bug 1972885</title> 5 <style> 6 body { 7 margin: 0; 8 } 9 canvas { 10 /* Height would round up to 101px, but subpixel snaps to 100. */ 11 margin-top: 1.6px; 12 width: 100px; 13 height: 100.5px; 14 } 15 </style> 16 <canvas id="canvas"></canvas> 17 <script> 18 function draw(canvas, width, height) { 19 const ctx = canvas.getContext('2d'); 20 canvas.width = width; 21 canvas.height = height; 22 const imgData = ctx.createImageData(width, height); 23 const u32View = new Uint32Array(imgData.data.buffer); 24 u32View.fill(0xFFFFFFFF); 25 for (let y = 0; y < height; y += 2) { 26 for (let x = 0; x < width; x++) { 27 u32View[y * width + x] = 0xFF000000; 28 } 29 } 30 ctx.putImageData(imgData, 0, 0); 31 } 32 33 const ro = new ResizeObserver((entries) => { 34 for (const entry of entries) { 35 if (entry.target !== canvas) { 36 continue; 37 } 38 draw( 39 canvas, 40 entry.devicePixelContentBoxSize[0].inlineSize, 41 entry.devicePixelContentBoxSize[0].blockSize); 42 } 43 document.documentElement.removeAttribute("class"); 44 }); 45 46 // Get the properly subpixel snapped size through ResizeObserver. 47 ro.observe(canvas); 48 </script>