-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 1950455 [wpt PR 50942] - Implement ctx.strokeTextCluster(), a=tes…
…tonly Automatic update from web-platform-tests Implement ctx.strokeTextCluster() This CL creates a new method for CanvasRenderingContext2d that strokes a TextCluster object. Its fill counterpart, ctx.fillTextCluster(), was merged in https://crrev.com/c/5854270. This new method came to be from the discussion around the spec for the TextMetrics additions: whatwg/html#11000 The existing tests for fillTextCluster() were renamed to include the method name in the title, since before only "rendering" was mentioned. The new tests are explicitly named using strokeTextCluster(). A line that was duplicated on the tests for fillTextCluster() was also removed. Bug: 341213359 Change-Id: Icd792b56e48f3ea5091e958671c19fcefe67fdec Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6282180 Commit-Queue: Andres Ricardo Perez <[email protected]> Reviewed-by: Fernando Serboncini <[email protected]> Reviewed-by: Stephen Chenney <[email protected]> Cr-Commit-Position: refs/heads/main@{#1425171} -- wpt-commits: e515834325719ce9e2a15e2d41bfce49f020db7a wpt-pr: 50942
- Loading branch information
1 parent
b622c5d
commit 2064df7
Showing
53 changed files
with
2,660 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
...ering-font-change.tentative-expected.html → ...uster-font-change.tentative-expected.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
...ters-rendering-font-change.tentative.html → ...illTextCluster-font-change.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
76 changes: 76 additions & 0 deletions
76
.../html/canvas/element/text/2d.text.measure.strokeTextCluster-align.tentative-expected.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <!DOCTYPE html> | ||
| <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> | ||
| <meta charset="UTF-8"> | ||
| <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> | ||
| <title>Canvas test: 2d.text.measure.strokeTextCluster-align.tentative</title> | ||
| <h1>2d.text.measure.strokeTextCluster-align.tentative</h1> | ||
| <p class="desc">Test that strokeTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p> | ||
|
|
||
| <div class="grid-container" style="--grid-width: 3"> | ||
| <span> | ||
| <div>ctx_align_left</div> | ||
| <canvas class="grid-cell-content" id="canvas0" width="250" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas0"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = canvas.width / 2; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textAlign = 'left'; | ||
|
|
||
| // Rendering all clusters with the same (x, y) parameters must be | ||
| // equivalent to a strokeText() call at (x, y). | ||
| ctx.strokeText(text, x, y); | ||
| </script> | ||
| </span> | ||
|
|
||
| <span> | ||
| <div>ctx_align_center</div> | ||
| <canvas class="grid-cell-content" id="canvas1" width="250" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas1"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = canvas.width / 2; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textAlign = 'center'; | ||
|
|
||
| // Rendering all clusters with the same (x, y) parameters must be | ||
| // equivalent to a strokeText() call at (x, y). | ||
| ctx.strokeText(text, x, y); | ||
| </script> | ||
| </span> | ||
|
|
||
| <span> | ||
| <div>ctx_align_right</div> | ||
| <canvas class="grid-cell-content" id="canvas2" width="250" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas2"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = canvas.width / 2; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textAlign = 'right'; | ||
|
|
||
| // Rendering all clusters with the same (x, y) parameters must be | ||
| // equivalent to a strokeText() call at (x, y). | ||
| ctx.strokeText(text, x, y); | ||
| </script> | ||
| </span> | ||
|
|
||
| </div> |
89 changes: 89 additions & 0 deletions
89
...orm/tests/html/canvas/element/text/2d.text.measure.strokeTextCluster-align.tentative.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| <!DOCTYPE html> | ||
| <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> | ||
| <meta charset="UTF-8"> | ||
| <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> | ||
| <link rel="match" href="2d.text.measure.strokeTextCluster-align.tentative-expected.html"> | ||
| <title>Canvas test: 2d.text.measure.strokeTextCluster-align.tentative</title> | ||
| <h1>2d.text.measure.strokeTextCluster-align.tentative</h1> | ||
| <p class="desc">Test that strokeTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p> | ||
|
|
||
| <div class="grid-container" style="--grid-width: 3"> | ||
| <span> | ||
| <div>ctx_align_left</div> | ||
| <canvas class="grid-cell-content" id="canvas0" width="250" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas0"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = canvas.width / 2; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textAlign = 'left'; | ||
| 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); | ||
| } | ||
| </script> | ||
| </span> | ||
|
|
||
| <span> | ||
| <div>ctx_align_center</div> | ||
| <canvas class="grid-cell-content" id="canvas1" width="250" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas1"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = canvas.width / 2; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textAlign = 'center'; | ||
| 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); | ||
| } | ||
| </script> | ||
| </span> | ||
|
|
||
| <span> | ||
| <div>ctx_align_right</div> | ||
| <canvas class="grid-cell-content" id="canvas2" width="250" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas2"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = canvas.width / 2; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textAlign = 'right'; | ||
| 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); | ||
| } | ||
| </script> | ||
| </span> | ||
|
|
||
| </div> |
86 changes: 86 additions & 0 deletions
86
...ml/canvas/element/text/2d.text.measure.strokeTextCluster-baseline.tentative-expected.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| <!DOCTYPE html> | ||
| <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> | ||
| <meta charset="UTF-8"> | ||
| <link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css"> | ||
| <title>Canvas test: 2d.text.measure.strokeTextCluster-baseline.tentative</title> | ||
| <h1>2d.text.measure.strokeTextCluster-baseline.tentative</h1> | ||
| <p class="desc">Test that strokeTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.</p> | ||
|
|
||
| <div class="grid-container" style="--grid-width: 4"> | ||
| <span> | ||
| <div>ctx_baseline_top</div> | ||
| <canvas class="grid-cell-content" id="canvas0" width="180" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas0"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = 20; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textBaseline = 'top'; | ||
| ctx.strokeText(text, x, y); | ||
| </script> | ||
| </span> | ||
|
|
||
| <span> | ||
| <div>ctx_baseline_middle</div> | ||
| <canvas class="grid-cell-content" id="canvas1" width="180" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas1"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = 20; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textBaseline = 'middle'; | ||
| ctx.strokeText(text, x, y); | ||
| </script> | ||
| </span> | ||
|
|
||
| <span> | ||
| <div>ctx_baseline_bottom</div> | ||
| <canvas class="grid-cell-content" id="canvas2" width="180" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas2"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = 20; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textBaseline = 'bottom'; | ||
| ctx.strokeText(text, x, y); | ||
| </script> | ||
| </span> | ||
|
|
||
| <span> | ||
| <div>ctx_baseline_alphabetic</div> | ||
| <canvas class="grid-cell-content" id="canvas3" width="180" height="43"> | ||
| <p class="fallback">FAIL (fallback content)</p> | ||
| </canvas> | ||
| <script type="module"> | ||
| const canvas = document.getElementById("canvas3"); | ||
| const ctx = canvas.getContext('2d'); | ||
|
|
||
| ctx.font = '20px serif'; | ||
| const text = 'Test ☺️ א'; | ||
| const x = 20; | ||
| const y = canvas.height / 2; | ||
|
|
||
| ctx.textBaseline = 'alphabetic'; | ||
| ctx.strokeText(text, x, y); | ||
| </script> | ||
| </span> | ||
|
|
||
| </div> |
Oops, something went wrong.