From ea5911192aa59087f635be659882a368fc6a2d8c Mon Sep 17 00:00:00 2001
From: Yi Xu <yiyix@google.com>
Date: Mon, 8 Jan 2024 11:59:45 -0800
Subject: [PATCH] Remove empty closed paths

As discussed in the github issue,
https://github.com/whatwg/html/issues/1079, it's generally agreed to
skip drawing line caps for closed paths. This is a follow up cl of:
https://chromium-review.googlesource.com/c/chromium/src/+/4864061.

In this cl, it verifies if each closed path is empty, then it removes
the empty closed subpaths from path. As the subpaths are removed, the
corresponding line caps are skipped.

Bug: 644067

Change-Id: I14c5c4819a31eb9249d01574ff1b5c60826c3b9e
---
 ...h.stroke.prune.closePath.arc-expected.html |  25 +++
 .../2d.path.stroke.prune.closePath.arc.html   |  35 ++++
 ....prune.closePath.bezierCurve-expected.html |  25 +++
 ...th.stroke.prune.closePath.bezierCurve.html |  35 ++++
 ....stroke.prune.closePath.line-expected.html |  25 +++
 .../2d.path.stroke.prune.closePath.line.html  |  35 ++++
 ...une.closePath.quadraticCurve-expected.html |  25 +++
 ...stroke.prune.closePath.quadraticCurve.html |  35 ++++
 ...h.stroke.prune.closePath.arc-expected.html |  25 +++
 .../2d.path.stroke.prune.closePath.arc.html   |  38 +++++
 .../2d.path.stroke.prune.closePath.arc.w.html |  52 ++++++
 ....prune.closePath.bezierCurve-expected.html |  25 +++
 ...th.stroke.prune.closePath.bezierCurve.html |  38 +++++
 ....stroke.prune.closePath.bezierCurve.w.html |  52 ++++++
 ....stroke.prune.closePath.line-expected.html |  25 +++
 .../2d.path.stroke.prune.closePath.line.html  |  38 +++++
 ...2d.path.stroke.prune.closePath.line.w.html |  52 ++++++
 ...une.closePath.quadraticCurve-expected.html |  25 +++
 ...stroke.prune.closePath.quadraticCurve.html |  38 +++++
 ...roke.prune.closePath.quadraticCurve.w.html |  52 ++++++
 html/canvas/tools/yaml-new/path-objects.yaml  | 151 ++++++++++++++++++
 21 files changed, 851 insertions(+)
 create mode 100644 html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
 create mode 100644 html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc.html
 create mode 100644 html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
 create mode 100644 html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
 create mode 100644 html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line-expected.html
 create mode 100644 html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line.html
 create mode 100644 html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
 create mode 100644 html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.w.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.w.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line-expected.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.w.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
 create mode 100644 html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.w.html

diff --git a/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc-expected.html b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
new file mode 100644
index 00000000000000..a78a280014edd4
--- /dev/null
+++ b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(75, 20, 0, Math.PI);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc.html b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc.html
new file mode 100644
index 00000000000000..71876a029c7783
--- /dev/null
+++ b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.arc.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.arc-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(75, 20, 0, Math.PI);
+  ctx.closePath();
+
+  ctx.moveTo(50, 50);
+  ctx.lineTo(50, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
new file mode 100644
index 00000000000000..4b867f821fa70f
--- /dev/null
+++ b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
new file mode 100644
index 00000000000000..e75aeb9529f053
--- /dev/null
+++ b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.bezierCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(20, 50);
+  ctx.lineTo(20, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line-expected.html b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line-expected.html
new file mode 100644
index 00000000000000..87a99c79380036
--- /dev/null
+++ b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line.html b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line.html
new file mode 100644
index 00000000000000..5237c7ad199c53
--- /dev/null
+++ b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.line.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.line-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+
+  ctx.moveTo(50, 50);
+  ctx.lineTo(50, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
new file mode 100644
index 00000000000000..03635b01483857
--- /dev/null
+++ b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(80, 10, 100, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
new file mode 100644
index 00000000000000..cd786944c50876
--- /dev/null
+++ b/html/canvas/element/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.quadraticCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(80, 10, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(50, 50);
+  ctx.lineTo(50, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc-expected.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
new file mode 100644
index 00000000000000..a78a280014edd4
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(75, 20, 0, Math.PI);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.html
new file mode 100644
index 00000000000000..f0e5ce2919c953
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.arc-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(75, 20, 0, Math.PI);
+  ctx.closePath();
+
+  ctx.moveTo(50, 50);
+  ctx.lineTo(50, 50);
+  ctx.closePath();
+  ctx.stroke();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.w.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.w.html
new file mode 100644
index 00000000000000..86f13ec6b357ea
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.arc.w.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.path.stroke.prune.closePath.arc-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.arc</title>
+<h1>2d.path.stroke.prune.closePath.arc</h1>
+<p class="desc">Test if zero-lengthed closePath before and after arc are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 50);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.quadraticCurveTo(75, 20, 0, Math.PI);
+    ctx.closePath();
+
+    ctx.moveTo(50, 50);
+    ctx.lineTo(50, 50);
+    ctx.closePath();
+    ctx.stroke();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
new file mode 100644
index 00000000000000..4b867f821fa70f
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
new file mode 100644
index 00000000000000..1a42127db18887
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.bezierCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(20, 50);
+  ctx.lineTo(20, 50);
+  ctx.closePath();
+  ctx.stroke();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.w.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.w.html
new file mode 100644
index 00000000000000..8cf6726a92e8f5
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.bezierCurve.w.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.path.stroke.prune.closePath.bezierCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.bezierCurve</title>
+<h1>2d.path.stroke.prune.closePath.bezierCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after bezier curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 50);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+    ctx.closePath();
+
+    ctx.moveTo(20, 50);
+    ctx.lineTo(20, 50);
+    ctx.closePath();
+    ctx.stroke();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line-expected.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line-expected.html
new file mode 100644
index 00000000000000..87a99c79380036
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.html
new file mode 100644
index 00000000000000..b5a998072768bc
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.line-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.lineTo(40, 40);
+  ctx.closePath();
+
+  ctx.moveTo(50, 50);
+  ctx.lineTo(50, 50);
+  ctx.closePath();
+  ctx.stroke();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.w.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.w.html
new file mode 100644
index 00000000000000..94f8f5041f1bdc
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.line.w.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.path.stroke.prune.closePath.line-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.line</title>
+<h1>2d.path.stroke.prune.closePath.line</h1>
+<p class="desc">Test if zero-lengthed closePath before and after line are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 50);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+
+    ctx.moveTo(50, 50);
+    ctx.lineTo(50, 50);
+    ctx.closePath();
+    ctx.stroke();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
new file mode 100644
index 00000000000000..03635b01483857
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve-expected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(80, 10, 100, 50);
+  ctx.closePath();
+  ctx.stroke();
+</script>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
new file mode 100644
index 00000000000000..344bcbc7596240
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.path.stroke.prune.closePath.quadraticCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(80, 10, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(50, 50);
+  ctx.lineTo(50, 50);
+  ctx.closePath();
+  ctx.stroke();
+
+  const outputCanvas = document.getElementById("canvas");
+  outputCanvas.getContext('2d').drawImage(canvas, 0, 0);
+</script>
diff --git a/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.w.html b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.w.html
new file mode 100644
index 00000000000000..417691c4703354
--- /dev/null
+++ b/html/canvas/offscreen/path-objects/2d.path.stroke.prune.closePath.quadraticCurve.w.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.path.stroke.prune.closePath.quadraticCurve-expected.html">
+<title>Canvas test: 2d.path.stroke.prune.closePath.quadraticCurve</title>
+<h1>2d.path.stroke.prune.closePath.quadraticCurve</h1>
+<p class="desc">Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script id='myWorker' type='text/worker'>
+  self.onmessage = function(e) {
+    const canvas = new OffscreenCanvas(100, 50);
+    const ctx = canvas.getContext('2d');
+
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.quadraticCurveTo(80, 10, 100, 50);
+    ctx.closePath();
+
+    ctx.moveTo(50, 50);
+    ctx.lineTo(50, 50);
+    ctx.closePath();
+    ctx.stroke();
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage(bitmap, bitmap);
+  };
+</script>
+<script>
+  const blob = new Blob([document.getElementById('myWorker').textContent]);
+  const worker = new Worker(URL.createObjectURL(blob));
+  worker.addEventListener('message', msg => {
+    const outputCtx = document.getElementById("canvas").getContext('2d');
+    outputCtx.drawImage(msg.data, 0, 0);
+    document.documentElement.classList.remove("reftest-wait");
+  });
+  worker.postMessage(null);
+</script>
+</html>
diff --git a/html/canvas/tools/yaml-new/path-objects.yaml b/html/canvas/tools/yaml-new/path-objects.yaml
index 673c9085744279..3691915067e0a2 100644
--- a/html/canvas/tools/yaml-new/path-objects.yaml
+++ b/html/canvas/tools/yaml-new/path-objects.yaml
@@ -2879,6 +2879,157 @@
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
 
+- name: 2d.path.stroke.prune.closePath.line
+  desc: Test if zero-lengthed closePath before and after line are ignored corrected.
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+
+    ctx.moveTo(50, 50);
+    ctx.lineTo(50, 50);
+    ctx.closePath();
+    ctx.stroke();
+  reference: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.moveTo(10, 10);
+    ctx.lineTo(40, 40);
+    ctx.closePath();
+    ctx.stroke();
+
+- name: 2d.path.stroke.prune.closePath.bezierCurve
+  desc: Test if zero-lengthed closePath before and after bezier curve are ignored corrected.
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+    ctx.closePath();
+
+    ctx.moveTo(20, 50);
+    ctx.lineTo(20, 50);
+    ctx.closePath();
+    ctx.stroke();
+  reference: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.moveTo(10, 10);
+    ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+    ctx.closePath();
+    ctx.stroke();
+
+- name: 2d.path.stroke.prune.closePath.quadraticCurve
+  desc: Test if zero-lengthed closePath before and after quadratic curve are ignored corrected.
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.quadraticCurveTo(80, 10, 100, 50);
+    ctx.closePath();
+
+    ctx.moveTo(50, 50);
+    ctx.lineTo(50, 50);
+    ctx.closePath();
+    ctx.stroke();
+  reference: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.moveTo(10, 10);
+    ctx.quadraticCurveTo(80, 10, 100, 50);
+    ctx.closePath();
+    ctx.stroke();
+
+- name: 2d.path.stroke.prune.closePath.arc
+  desc: Test if zero-lengthed closePath before and after arc are ignored corrected.
+  code: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.beginPath();
+    ctx.moveTo(50, 25);
+    ctx.lineTo(50, 25);
+    ctx.closePath();
+
+    ctx.moveTo(10, 10);
+    ctx.quadraticCurveTo(75, 20, 0, Math.PI);
+    ctx.closePath();
+
+    ctx.moveTo(50, 50);
+    ctx.lineTo(50, 50);
+    ctx.closePath();
+    ctx.stroke();
+  reference: |
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 100, 50);
+
+    ctx.strokeStyle = '#f00';
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    ctx.moveTo(10, 10);
+    ctx.quadraticCurveTo(75, 20, 0, Math.PI);
+    ctx.closePath();
+    ctx.stroke();
 
 - name: 2d.path.transformation.basic
   code: |