-
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(). Bug: 341213359 Change-Id: Icd792b56e48f3ea5091e958671c19fcefe67fdec
- Loading branch information
1 parent
a52f979
commit 96c3947
Showing
47 changed files
with
2,120 additions
and
68 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.