1 files changed, 31 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas-update-with-border-object-fit.html b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas-update-with-border-object-fit.html
new file mode 100644
index 0000000000..b20db66eb9
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/replaced-elements/embedded-content-rendering-rules/canvas-update-with-border-object-fit.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>Verifies canvas with object-fit and border correctly updates</title>
+<link rel="match" href="canvas-update-with-border-object-fit-ref.html">
+<html class="reftest-wait">
+  <div style="width: 300px; height: 100px; background: black; border: 100px solid blue">
+    <canvas id="target" width="1000" height="1000"
+        style="object-fit: contain; object-position: center; width: 100%; height: 100%">
+    </canvas>
+  </div>
+</html>
+<script>
+var ctx = target.getContext("2d");
+ctx.fillStyle = "red";
+ctx.fillRect(0, 0, target.width, target.height);
+
+var x=0, y=0, step=500;
+ctx.fillStyle = "green";
+function drawRect() {
+  ctx.fillRect(x, y, step, step);
+  x += step;
+  if (x >= target.width) {
+    x = 0;
+    y += step;
+  }
+  if (y >= target.height)
+    document.documentElement.classList.remove("reftest-wait");
+  else
+    requestAnimationFrame(drawRect);
+}
+drawRect();
+</script>