Test that fillTextCluster() renders in the font used originally when the text was measured, even if the font set on the context has changed since.
FAIL (fallback content)
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-options.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-options.tentative.html
similarity index 92%
rename from testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-options.tentative.html
rename to testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-options.tentative.html
index 645013528e817..06dfc5b6b0605 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-options.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-options.tentative.html
@@ -1,12 +1,12 @@
OffscreenCanvas test: 2d.text.measure.text-clusters-rendering-options.tentative
+OffscreenCanvas test: 2d.text.measure.fillTextCluster-options.tentative
-2d.text.measure.text-clusters-rendering-options.tentative
+2d.text.measure.fillTextCluster-options.tentative
Test that fillTextCluster() correctly applies the options passed as a dictionary.
@@ -42,7 +42,6 @@ 2d.text.measure.text-clusters-rendering-options.tentative
_assertPixelApprox(canvas, 45,45, 0,255,0,255, 2);
_assertPixelApprox(canvas, 55,5, 255,0,0,255, 2);
_assertPixelApprox(canvas, 5,55, 255,0,0,255, 2);
- _assertPixelApprox(canvas, 5,55, 255,0,0,255, 2);
_assertPixelApprox(canvas, 55,55, 255,0,0,255, 2);
// Override the x and y values of the cluster.
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-options.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-options.tentative.worker.js
similarity index 94%
rename from testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-options.tentative.worker.js
rename to testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-options.tentative.worker.js
index f55d2c4655641..bb334eb07097d 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-options.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-options.tentative.worker.js
@@ -1,5 +1,5 @@
// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
-// OffscreenCanvas test in a worker:2d.text.measure.text-clusters-rendering-options.tentative
+// OffscreenCanvas test in a worker:2d.text.measure.fillTextCluster-options.tentative
// Description:Test that fillTextCluster() correctly applies the options passed as a dictionary.
// Note:
@@ -36,7 +36,6 @@ promise_test(async t => {
_assertPixelApprox(canvas, 45,45, 0,255,0,255, 2);
_assertPixelApprox(canvas, 55,5, 255,0,0,255, 2);
_assertPixelApprox(canvas, 5,55, 255,0,0,255, 2);
- _assertPixelApprox(canvas, 5,55, 255,0,0,255, 2);
_assertPixelApprox(canvas, 55,55, 255,0,0,255, 2);
// Override the x and y values of the cluster.
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-range.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-range.tentative.html
similarity index 94%
rename from testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-range.tentative.html
rename to testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-range.tentative.html
index 9bd2a026618c2..83568f8c30542 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-range.tentative.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-range.tentative.html
@@ -1,12 +1,12 @@
OffscreenCanvas test: 2d.text.measure.text-clusters-range.tentative
+OffscreenCanvas test: 2d.text.measure.fillTextCluster-range.tentative
-2d.text.measure.text-clusters-range.tentative
+2d.text.measure.fillTextCluster-range.tentative
Test that getTextClusters() and fillTextCluster() correctly render different ranges of the input text.
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-range.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-range.tentative.worker.js
similarity index 96%
rename from testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-range.tentative.worker.js
rename to testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-range.tentative.worker.js
index db76d19edf362..b36fb20a8665e 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-range.tentative.worker.js
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.fillTextCluster-range.tentative.worker.js
@@ -1,5 +1,5 @@
// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
-// OffscreenCanvas test in a worker:2d.text.measure.text-clusters-range.tentative
+// OffscreenCanvas test in a worker:2d.text.measure.fillTextCluster-range.tentative
// Description:Test that getTextClusters() and fillTextCluster() correctly render different ranges of the input text.
// Note:
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-align.tentative-expected.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-align.tentative-expected.html
new file mode 100644
index 0000000000000..b725ad3ef13a9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-align.tentative-expected.html
@@ -0,0 +1,76 @@
+
+
+Canvas test: 2d.text.measure.strokeTextCluster-align.tentative
+2d.text.measure.strokeTextCluster-align.tentative
+Test that strokeTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.
+
+
+
+ ctx_align_left
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_align_center
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_align_right
+
+ FAIL (fallback content)
+
+
+
+
+
Canvas test: 2d.text.measure.strokeTextCluster-align.tentative
+2d.text.measure.strokeTextCluster-align.tentative
+Test that strokeTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.
+
+
+
+ ctx_align_left
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_align_center
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_align_right
+
+ FAIL (fallback content)
+
+
+
+
+
Canvas test: 2d.text.measure.strokeTextCluster-align.tentative
+2d.text.measure.strokeTextCluster-align.tentative
+Test that strokeTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.
+
+
+
+
+ ctx_align_left
+
+ FAIL (fallback content)
+
+
+
+
+
+
+ ctx_align_center
+
+ FAIL (fallback content)
+
+
+
+
+
+
+ ctx_align_right
+
+ FAIL (fallback content)
+
+
+
+
+
+
Canvas test: 2d.text.measure.strokeTextCluster-baseline.tentative
+2d.text.measure.strokeTextCluster-baseline.tentative
+Test that strokeTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.
+
+
+
+ ctx_baseline_top
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_baseline_middle
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_baseline_bottom
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_baseline_alphabetic
+
+ FAIL (fallback content)
+
+
+
+
+
Canvas test: 2d.text.measure.strokeTextCluster-baseline.tentative
+2d.text.measure.strokeTextCluster-baseline.tentative
+Test that strokeTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.
+
+
+
+ ctx_baseline_top
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_baseline_middle
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_baseline_bottom
+
+ FAIL (fallback content)
+
+
+
+
+
+ ctx_baseline_alphabetic
+
+ FAIL (fallback content)
+
+
+
+
+
Canvas test: 2d.text.measure.strokeTextCluster-baseline.tentative
+2d.text.measure.strokeTextCluster-baseline.tentative
+Test that strokeTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.
+
+
+
+
+ ctx_baseline_top
+
+ FAIL (fallback content)
+
+
+
+
+
+
+ ctx_baseline_middle
+
+ FAIL (fallback content)
+
+
+
+
+
+
+ ctx_baseline_bottom
+
+ FAIL (fallback content)
+
+
+
+
+
+
+ ctx_baseline_alphabetic
+
+ FAIL (fallback content)
+
+
+
+
+
+
Canvas test: 2d.text.measure.strokeTextCluster-drawing-styles-change.tentative
+2d.text.measure.strokeTextCluster-drawing-styles-change.tentative
+Test that strokeTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.
+
+
+
+ letter_spacing
+
+ FAIL (fallback content)
+
+
+
+
+
+ word_spacing
+
+ FAIL (fallback content)
+
+
+
+
+
+ font_kerning
+
+ FAIL (fallback content)
+
+
+
+
+
+ font_variant_caps
+
+ FAIL (fallback content)
+
+
+
+
+
Canvas test: 2d.text.measure.strokeTextCluster-drawing-styles-change.tentative
+2d.text.measure.strokeTextCluster-drawing-styles-change.tentative
+Test that strokeTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.
+
+
+
+ letter_spacing
+
+ FAIL (fallback content)
+
+
+
+
+
+ word_spacing
+
+ FAIL (fallback content)
+
+
+
+
+
+ font_kerning
+
+ FAIL (fallback content)
+
+
+
+
+
+ font_variant_caps
+
+ FAIL (fallback content)
+
+
+
+
+
Canvas test: 2d.text.measure.strokeTextCluster-drawing-styles-change.tentative
+2d.text.measure.strokeTextCluster-drawing-styles-change.tentative
+Test that strokeTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.
+
+
+
+
+ letter_spacing
+
+ FAIL (fallback content)
+
+
+
+
+
+
+ word_spacing
+
+ FAIL (fallback content)
+
+
+
+
+
+
+ font_kerning
+
+ FAIL (fallback content)
+
+
+
+
+
+
+ font_variant_caps
+
+ FAIL (fallback content)
+
+
+
+
+
+
Canvas test: 2d.text.measure.strokeTextCluster-font-change.tentative
+2d.text.measure.strokeTextCluster-font-change.tentative
+Test that strokeTextCluster() renders in the font used originally when the text was measured, even if the font set on the context has changed since.
+
+ FAIL (fallback content)
+
+
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-font-change.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-font-change.tentative.html
new file mode 100644
index 0000000000000..4644f7ae8202c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-font-change.tentative.html
@@ -0,0 +1,30 @@
+
+
+Canvas test: 2d.text.measure.strokeTextCluster-font-change.tentative
+2d.text.measure.strokeTextCluster-font-change.tentative
+Test that strokeTextCluster() renders in the font used originally when the text was measured, even if the font set on the context has changed since.
+
+ FAIL (fallback content)
+
+
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-font-change.tentative.w.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-font-change.tentative.w.html
new file mode 100644
index 0000000000000..c8b78d86db5a4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-font-change.tentative.w.html
@@ -0,0 +1,44 @@
+
+
+Canvas test: 2d.text.measure.strokeTextCluster-font-change.tentative
+2d.text.measure.strokeTextCluster-font-change.tentative
+Test that strokeTextCluster() renders in the font used originally when the text was measured, even if the font set on the context has changed since.
+
+ FAIL (fallback content)
+
+
+
+
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-options.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-options.tentative.html
new file mode 100644
index 0000000000000..8b1bec5aadf67
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-options.tentative.html
@@ -0,0 +1,72 @@
+
+
+OffscreenCanvas test: 2d.text.measure.strokeTextCluster-options.tentative
+
+
+
+
+2d.text.measure.strokeTextCluster-options.tentative
+Test that strokeTextCluster() correctly applies the options passed as a dictionary.
+
+
+
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-options.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-options.tentative.worker.js
new file mode 100644
index 0000000000000..6a06656aaee9b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-options.tentative.worker.js
@@ -0,0 +1,65 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.text.measure.strokeTextCluster-options.tentative
+// Description:Test that strokeTextCluster() correctly applies the options passed as a dictionary.
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+promise_test(async t => {
+ var canvas = new OffscreenCanvas(100, 300);
+ var ctx = canvas.getContext('2d');
+
+ var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+ f.load();
+ self.fonts.add(f);
+ await self.fonts.ready;
+
+ ctx.font = '50px CanvasTest';
+ ctx.textAlign = 'left';
+ ctx.textBaseline = 'top';
+ const text = 'E';
+ const tm = ctx.measureText(text);
+ const cluster = tm.getTextClusters()[0];
+
+ // Background color.
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.strokeStyle = '#0f0';
+ ctx.lineWidth = 12;
+
+ // Override the align and baseline of the cluster.
+ ctx.strokeTextCluster(cluster, 50, 50, {align: 'right', baseline: 'bottom'});
+ _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 45,5, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 45,45, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 5,95, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 50,95, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 95,50, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 95,5, 255,0,0,255, 2);
+
+ // Override the x and y values of the cluster.
+ ctx.strokeTextCluster(cluster, 0, 100, {x: 10, y: 10});
+ _assertPixelApprox(canvas, 15,115, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 55,115, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 15,155, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 55,155, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 1,101, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 1,151, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 51,101, 255,0,0,255, 2);
+
+ // Override the align, baseline, x, and y values of the cluster.
+ ctx.strokeTextCluster(cluster, 50, 250,
+ {align: 'right', baseline: 'bottom', x: 10, y: 10});
+ _assertPixelApprox(canvas, 15,215, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 55,215, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 15,255, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 55,255, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 5,295, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 50,295, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 95,250, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 95,25, 255,0,0,255, 2);
+}, "Test that strokeTextCluster() correctly applies the options passed as a dictionary.");
+done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-range.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-range.tentative.html
new file mode 100644
index 0000000000000..a566d26d91f9a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-range.tentative.html
@@ -0,0 +1,67 @@
+
+
+OffscreenCanvas test: 2d.text.measure.strokeTextCluster-range.tentative
+
+
+
+
+2d.text.measure.strokeTextCluster-range.tentative
+Test that getTextClusters() and strokeTextCluster() correctly render different ranges of the input text.
+
+
+
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-range.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-range.tentative.worker.js
new file mode 100644
index 0000000000000..6b6d3b0e442b3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.measure.strokeTextCluster-range.tentative.worker.js
@@ -0,0 +1,60 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.text.measure.strokeTextCluster-range.tentative
+// Description:Test that getTextClusters() and strokeTextCluster() correctly render different ranges of the input text.
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+promise_test(async t => {
+ var canvas = new OffscreenCanvas(400, 300);
+ var ctx = canvas.getContext('2d');
+
+ // Renders all the clusters in the list from position (x, y).
+ function renderClusters(clusters, x, y) {
+ for (const cluster of clusters) {
+ ctx.strokeTextCluster(cluster, x, y);
+ }
+ }
+
+ var f = new FontFace("CanvasTest", "url('/fonts/CanvasTest.ttf')");
+ f.load();
+ self.fonts.add(f);
+ await self.fonts.ready;
+
+ ctx.font = '50px CanvasTest';
+ ctx.textAlign = 'left';
+ ctx.textBaseline = 'top';
+ const text = 'EEEEE';
+ let tm = ctx.measureText(text);
+
+ // Background color.
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.strokeStyle = '#0f0';
+ ctx.lineWidth = 12;
+
+ // Without the first character.
+ renderClusters(tm.getTextClusters(1, 5), 0, 0);
+ _assertPixelApprox(canvas, 5,5, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 55,5, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 105,5, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 155,5, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 205,5, 0,255,0,255, 2);
+ // Without the last character.
+ renderClusters(tm.getTextClusters(0, 4), 0, 100);
+ _assertPixelApprox(canvas, 5,105, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 55,105, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 105,105, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 155,105, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 245,105, 255,0,0,255, 2);
+ // Only the middle character.
+ renderClusters(tm.getTextClusters(2, 3), 0, 200);
+ _assertPixelApprox(canvas, 5,205, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 55,205, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 105,205, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 195,205, 255,0,0,255, 2);
+ _assertPixelApprox(canvas, 245,205, 255,0,0,255, 2);
+}, "Test that getTextClusters() and strokeTextCluster() correctly render different ranges of the input text.");
+done();
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml/text.yaml b/testing/web-platform/tests/html/canvas/tools/yaml/text.yaml
index 27e705821b16c..d0c608739a004 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml/text.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml/text.yaml
@@ -2097,7 +2097,7 @@
variants:
- *load-font-variant-definition
-- name: 2d.text.measure.text-clusters-rendering-align.tentative
+- name: 2d.text.measure.fillTextCluster-align.tentative
desc: >-
Test that fillTextCluster() correctly positions the text, taking into
account the textAlign from the context at the time the text was measured.
@@ -2138,7 +2138,48 @@
ctx_align_right:
ctx_align: right
-- name: 2d.text.measure.text-clusters-rendering-baseline.tentative
+- name: 2d.text.measure.strokeTextCluster-align.tentative
+ desc: >-
+ Test that strokeTextCluster() correctly positions the text, taking into
+ account the textAlign from the context at the time the text was measured.
+ size: [250, 43]
+ code: |
+ ctx.font = '20px serif';
+ const text = 'Test ☺️ א';
+ const x = canvas.width / 2;
+ const y = canvas.height / 2;
+
+ ctx.textAlign = '{{ ctx_align }}';
+ let tm = ctx.measureText(text);
+ const clusters = tm.getTextClusters();
+
+ // Rendering all clusters with the same (x, y) parameters must be
+ // equivalent to a strokeText() call at (x, y).
+ for (const cluster of clusters) {
+ ctx.strokeTextCluster(cluster, x, y);
+ }
+ reference: |
+ ctx.font = '20px serif';
+ const text = 'Test ☺️ א';
+ const x = canvas.width / 2;
+ const y = canvas.height / 2;
+
+ ctx.textAlign = '{{ ctx_align }}';
+
+ // Rendering all clusters with the same (x, y) parameters must be
+ // equivalent to a strokeText() call at (x, y).
+ ctx.strokeText(text, x, y);
+ variants_layout:
+ [single_file]
+ variants:
+ - ctx_align_left:
+ ctx_align: left
+ ctx_align_center:
+ ctx_align: center
+ ctx_align_right:
+ ctx_align: right
+
+- name: 2d.text.measure.fillTextCluster-baseline.tentative
desc: >-
Test that fillTextCluster() correctly positions the text, taking into
account the textBaseline from the context at the time the text was measured.
@@ -2178,7 +2219,47 @@
ctx_baseline_alphabetic:
ctx_baseline: alphabetic
-- name: 2d.text.measure.text-clusters-rendering-font-change.tentative
+- name: 2d.text.measure.strokeTextCluster-baseline.tentative
+ desc: >-
+ Test that strokeTextCluster() correctly positions the text, taking into
+ account the textBaseline from the context at the time the text was measured.
+ size: [180, 43]
+ code: |
+ ctx.font = '20px serif';
+ const text = 'Test ☺️ א';
+ const x = 20;
+ const y = canvas.height / 2;
+
+ ctx.textBaseline = '{{ ctx_baseline }}';
+ let tm = ctx.measureText(text);
+ const clusters = tm.getTextClusters();
+
+ // Rendering all clusters with the same (x, y) parameters must be
+ // equivalent to a strokeText() call at (x, y).
+ for (const cluster of clusters) {
+ ctx.strokeTextCluster(cluster, x, y);
+ }
+ reference: |
+ ctx.font = '20px serif';
+ const text = 'Test ☺️ א';
+ const x = 20;
+ const y = canvas.height / 2;
+
+ ctx.textBaseline = '{{ ctx_baseline }}';
+ ctx.strokeText(text, x, y);
+ variants_layout:
+ [single_file]
+ variants:
+ - ctx_baseline_top:
+ ctx_baseline: top
+ ctx_baseline_middle:
+ ctx_baseline: middle
+ ctx_baseline_bottom:
+ ctx_baseline: bottom
+ ctx_baseline_alphabetic:
+ ctx_baseline: alphabetic
+
+- name: 2d.text.measure.fillTextCluster-font-change.tentative
desc: >-
Test that fillTextCluster() renders in the font used originally when the
text was measured, even if the font set on the context has changed since.
@@ -2206,7 +2287,35 @@
const y = 100;
ctx.fillText(text, x, y);
-- name: 2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative
+- name: 2d.text.measure.strokeTextCluster-font-change.tentative
+ desc: >-
+ Test that strokeTextCluster() renders in the font used originally when the
+ text was measured, even if the font set on the context has changed since.
+ size: [500, 200]
+ code: |
+ ctx.font = '50px sans-serif';
+ const text = 'Hello ♦️ World!';
+ let tm = ctx.measureText(text);
+ const clusters = tm.getTextClusters();
+
+ ctx.font = '80px serif';
+
+ const x = 100;
+ const y = 100;
+ for (const cluster of clusters) {
+ ctx.strokeTextCluster(cluster, x, y);
+ }
+ reference: |
+ ctx.font = '50px sans-serif';
+ const text = 'Hello ♦️ World!';
+ let tm = ctx.measureText(text);
+ const clusters = tm.getTextClusters();
+
+ const x = 100;
+ const y = 100;
+ ctx.strokeText(text, x, y);
+
+- name: 2d.text.measure.fillTextCluster-drawing-styles-change.tentative
desc: >-
Test that fillTextCluster() renders using the drawing styles as they were
when `ctx.measureText()` was called, regardless of any changes in the
@@ -2264,7 +2373,65 @@
modified_value: |-
ctx.fontVariantCaps = 'all-small-caps';
-- name: 2d.text.measure.text-clusters-range.tentative
+- name: 2d.text.measure.strokeTextCluster-drawing-styles-change.tentative
+ desc: >-
+ Test that strokeTextCluster() renders using the drawing styles as they were
+ when `ctx.measureText()` was called, regardless of any changes in the
+ context since.
+ size: [250, 80]
+ code: |
+ ctx.font = '20px serif';
+ const text = 'Test ♦️ find';
+
+ {{ original_value }}
+
+ let tm = ctx.measureText(text);
+ const clusters = tm.getTextClusters();
+
+ {{ modified_value }}
+
+ for (const cluster of clusters) {
+ ctx.strokeTextCluster(cluster, 10, 25);
+ }
+
+ ctx.strokeText(text, 10, 50);
+ reference: |
+ ctx.font = '20px serif';
+ const text = 'Test ♦️ find';
+
+ {{ original_value }}
+
+ ctx.strokeText(text, 10, 25);
+
+ {{ modified_value }}
+
+ ctx.strokeText(text, 10, 50);
+ variants_layout:
+ [single_file]
+ grid_width: 2
+ variants:
+ - letter_spacing:
+ original_value: |-
+ ctx.letterSpacing = '2px';
+ modified_value: |-
+ ctx.letterSpacing = '6px';
+ word_spacing:
+ original_value: |-
+ ctx.wordSpacing = '2px';
+ modified_value: |-
+ ctx.wordSpacing = '10px';
+ font_kerning:
+ original_value: |-
+ ctx.fontKerning = 'none';
+ modified_value: |-
+ ctx.fontKerning = 'normal';
+ font_variant_caps:
+ original_value: |-
+ ctx.fontVariantCaps = 'small-caps';
+ modified_value: |-
+ ctx.fontVariantCaps = 'all-small-caps';
+
+- name: 2d.text.measure.fillTextCluster-range.tentative
desc: >-
Test that getTextClusters() and fillTextCluster() correctly render
different ranges of the input text.
@@ -2318,7 +2485,62 @@
variants:
- *load-font-variant-definition
-- name: 2d.text.measure.text-clusters-rendering-options.tentative
+- name: 2d.text.measure.strokeTextCluster-range.tentative
+ desc: >-
+ Test that getTextClusters() and strokeTextCluster() correctly render
+ different ranges of the input text.
+ test_type: promise
+ fonts:
+ - CanvasTest
+ size: [400, 300]
+ code: |
+ // Renders all the clusters in the list from position (x, y).
+ function renderClusters(clusters, x, y) {
+ for (const cluster of clusters) {
+ ctx.strokeTextCluster(cluster, x, y);
+ }
+ }
+
+ {{ load_font }}
+
+ ctx.font = '50px CanvasTest';
+ ctx.textAlign = 'left';
+ ctx.textBaseline = 'top';
+ const text = 'EEEEE';
+ let tm = ctx.measureText(text);
+
+ // Background color.
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.strokeStyle = '#0f0';
+ ctx.lineWidth = 12;
+
+ // Without the first character.
+ renderClusters(tm.getTextClusters(1, 5), 0, 0);
+ @assert pixel 5,5 ==~ 255,0,0,255;
+ @assert pixel 55,5 ==~ 0,255,0,255;
+ @assert pixel 105,5 ==~ 0,255,0,255;
+ @assert pixel 155,5 ==~ 0,255,0,255;
+ @assert pixel 205,5 ==~ 0,255,0,255;
+ // Without the last character.
+ renderClusters(tm.getTextClusters(0, 4), 0, 100);
+ @assert pixel 5,105 ==~ 0,255,0,255;
+ @assert pixel 55,105 ==~ 0,255,0,255;
+ @assert pixel 105,105 ==~ 0,255,0,255;
+ @assert pixel 155,105 ==~ 0,255,0,255;
+ @assert pixel 245,105 ==~ 255,0,0,255;
+ // Only the middle character.
+ renderClusters(tm.getTextClusters(2, 3), 0, 200);
+ @assert pixel 5,205 ==~ 255,0,0,255;
+ @assert pixel 55,205 ==~ 255,0,0,255;
+ @assert pixel 105,205 ==~ 0,255,0,255;
+ @assert pixel 195,205 ==~ 255,0,0,255;
+ @assert pixel 245,205 ==~ 255,0,0,255;
+ variants:
+ - *load-font-variant-definition
+
+- name: 2d.text.measure.fillTextCluster-options.tentative
desc: >-
Test that fillTextCluster() correctly applies the options passed as a
dictionary.
@@ -2350,7 +2572,6 @@
@assert pixel 45,45 ==~ 0,255,0,255;
@assert pixel 55,5 ==~ 255,0,0,255;
@assert pixel 5,55 ==~ 255,0,0,255;
- @assert pixel 5,55 ==~ 255,0,0,255;
@assert pixel 55,55 ==~ 255,0,0,255;
// Override the x and y values of the cluster.
@@ -2376,6 +2597,66 @@
variants:
- *load-font-variant-definition
+- name: 2d.text.measure.strokeTextCluster-options.tentative
+ desc: >-
+ Test that strokeTextCluster() correctly applies the options passed as a
+ dictionary.
+ test_type: promise
+ fonts:
+ - CanvasTest
+ size: [100, 300]
+ code: |
+ {{ load_font }}
+
+ ctx.font = '50px CanvasTest';
+ ctx.textAlign = 'left';
+ ctx.textBaseline = 'top';
+ const text = 'E';
+ const tm = ctx.measureText(text);
+ const cluster = tm.getTextClusters()[0];
+
+ // Background color.
+ ctx.fillStyle = '#f00';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.strokeStyle = '#0f0';
+ ctx.lineWidth = 12;
+
+ // Override the align and baseline of the cluster.
+ ctx.strokeTextCluster(cluster, 50, 50, {align: 'right', baseline: 'bottom'});
+ @assert pixel 5,5 ==~ 0,255,0,255;
+ @assert pixel 45,5 ==~ 0,255,0,255;
+ @assert pixel 5,45 ==~ 0,255,0,255;
+ @assert pixel 45,45 ==~ 0,255,0,255;
+ @assert pixel 5,95 ==~ 255,0,0,255;
+ @assert pixel 50,95 ==~ 255,0,0,255;
+ @assert pixel 95,50 ==~ 255,0,0,255;
+ @assert pixel 95,5 ==~ 255,0,0,255;
+
+ // Override the x and y values of the cluster.
+ ctx.strokeTextCluster(cluster, 0, 100, {x: 10, y: 10});
+ @assert pixel 15,115 ==~ 0,255,0,255;
+ @assert pixel 55,115 ==~ 0,255,0,255;
+ @assert pixel 15,155 ==~ 0,255,0,255;
+ @assert pixel 55,155 ==~ 0,255,0,255;
+ @assert pixel 1,101 ==~ 255,0,0,255;
+ @assert pixel 1,151 ==~ 255,0,0,255;
+ @assert pixel 51,101 ==~ 255,0,0,255;
+
+ // Override the align, baseline, x, and y values of the cluster.
+ ctx.strokeTextCluster(cluster, 50, 250,
+ {align: 'right', baseline: 'bottom', x: 10, y: 10});
+ @assert pixel 15,215 ==~ 0,255,0,255;
+ @assert pixel 55,215 ==~ 0,255,0,255;
+ @assert pixel 15,255 ==~ 0,255,0,255;
+ @assert pixel 55,255 ==~ 0,255,0,255;
+ @assert pixel 5,295 ==~ 255,0,0,255;
+ @assert pixel 50,295 ==~ 255,0,0,255;
+ @assert pixel 95,250 ==~ 255,0,0,255;
+ @assert pixel 95,25 ==~ 255,0,0,255;
+ variants:
+ - *load-font-variant-definition
+
- name: 2d.text.drawing.style.absolute.spacing
desc: Testing letter spacing and word spacing with absolute length
code: |