-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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}
- Loading branch information
1 parent
40f89b0
commit 7fb9660
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
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
html/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.