Remove empty closed paths

As discussed in the github issue, whatwg/html#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
web-platform-tests · Jan 12, 2024 · a7c0a56 · a7c0a56
1 parent 138a1e3
commit a7c0a56
Show file tree

Hide file tree

Showing 21 changed files with 851 additions and 0 deletions.
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
@@ -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.arc(20, 20, 15, 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
@@ -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.arc(20, 20, 15, 0, Math.PI);
+  ctx.closePath();
+
+  ctx.moveTo(40, 40);
+  ctx.lineTo(40, 40);
+  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
@@ -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
@@ -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(5, 5);
+  ctx.lineTo(5, 5);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.bezierCurveTo(10, 30, 40, 50, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(20, 40);
+  ctx.lineTo(20, 40);
+  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
@@ -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
@@ -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(45, 45);
+  ctx.lineTo(45, 45);
+  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
@@ -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
@@ -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(5, 5);
+  ctx.lineTo(5, 5);
+  ctx.closePath();
+
+  ctx.moveTo(10, 10);
+  ctx.quadraticCurveTo(80, 10, 100, 50);
+  ctx.closePath();
+
+  ctx.moveTo(40, 40);
+  ctx.lineTo(40, 40);
+  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
@@ -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.arc(20, 20, 15, 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
@@ -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.arc(20, 20, 15, 0, Math.PI);
+  ctx.closePath();
+
+  ctx.moveTo(40, 40);
+  ctx.lineTo(40, 40);
+  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
@@ -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.arc(20, 20, 15, 0, Math.PI);
+    ctx.closePath();
+
+    ctx.moveTo(40, 40);
+    ctx.lineTo(40, 40);
+    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
@@ -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>