canvas-update-with-border-object-fit.html (901B)
1 <!doctype html> 2 <title>Verifies canvas with object-fit and border correctly updates</title> 3 <link rel="match" href="canvas-update-with-border-object-fit-ref.html"> 4 <html class="reftest-wait"> 5 <div style="width: 300px; height: 100px; background: black; border: 100px solid blue"> 6 <canvas id="target" width="1000" height="1000" 7 style="object-fit: contain; object-position: center; width: 100%; height: 100%"> 8 </canvas> 9 </div> 10 </html> 11 <script> 12 var ctx = target.getContext("2d"); 13 ctx.fillStyle = "red"; 14 ctx.fillRect(0, 0, target.width, target.height); 15 16 var x=0, y=0, step=500; 17 ctx.fillStyle = "green"; 18 function drawRect() { 19 ctx.fillRect(x, y, step, step); 20 x += step; 21 if (x >= target.width) { 22 x = 0; 23 y += step; 24 } 25 if (y >= target.height) 26 document.documentElement.classList.remove("reftest-wait"); 27 else 28 requestAnimationFrame(drawRect); 29 } 30 drawRect(); 31 </script>