Skip to content

GitLab

T
tangled
Commit c9e5643d authored by yiyix's avatar yiyix Committed by Commit Bot
Browse files
Options

[Canvas new API] Add wpt tests for textLetterSpacing and textWordSpacing 

Add more wpt tests for textLetterSpacing and textWordSpacing. In this
new test, I use width to show how setting letter spacing and word
spacing can change the length of text in canvas.

Bug: 1137055

Change-Id: I707c6f4fe8a79ff3ff6d19bb98dc3d9573a8b3df
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2485480Reviewed-by: default avatarFernando Serboncini <fserb@chromium.org>
Commit-Queue: Yi Xu <yiyix@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819023}
parent 059ec54f
Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 8 deletions
third_party/blink/web_tests/external/wpt/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.spacing.html
View file @ c9e5643d
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<body class="show_output"> <body class="show_output">
<h1>2d.text.drawing.style.spacing</h1> <h1>2d.text.drawing.style.spacing</h1>
<p class="desc">Testing baselines</p> <p class="desc">Testing letter spacing and word spacing</p>
<p class="output">Actual output:</p> <p class="output">Actual output:</p>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<ul id="d"></ul> <ul id="d"></ul>
<script> <script>
var t = async_test("Testing baselines"); var t = async_test("Testing letter spacing and word spacing");
_addTest(function(canvas, ctx) { _addTest(function(canvas, ctx) {
_assertSame(ctx.textLetterSpacing, 0, "ctx.textLetterSpacing", "0"); _assertSame(ctx.textLetterSpacing, 0, "ctx.textLetterSpacing", "0");
......
third_party/blink/web_tests/external/wpt/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.spacing.measure.html 0 → 100644
View file @ c9e5643d
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.text.drawing.style.spacing.measure</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
<body class="show_output">
<h1>2d.text.drawing.style.spacing.measure</h1>
<p class="desc">Testing letter spacing and word spacing</p>
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<ul id="d"></ul>
<script>
var t = async_test("Testing letter spacing and word spacing");
_addTest(function(canvas, ctx) {
_assertSame(ctx.textLetterSpacing, 0, "ctx.textLetterSpacing", "0");
_assertSame(ctx.textWordSpacing, 0, "ctx.textWordSpacing", "0");
var width_normal = ctx.measureText('Hello World').width;
ctx.textLetterSpacing = 3;
_assertSame(ctx.textLetterSpacing, 3, "ctx.textLetterSpacing", "3");
_assertSame(ctx.textWordSpacing, 0, "ctx.textWordSpacing", "0");
var width_with_spacing = ctx.measureText('Hello World').width;
// Add letter spacing after each letter, so 11 * 3 = 33px longer.
_assertSame(width_with_spacing, width_normal + 33, "width_with_spacing", "width_normal + 33");
ctx.textWordSpacing = 5;
ctx.textLetterSpacing = 0;
_assertSame(ctx.textLetterSpacing, 0, "ctx.textLetterSpacing", "0");
_assertSame(ctx.textWordSpacing, 5, "ctx.textWordSpacing", "5");
// Add Word Spacing between "Hello" and "World", so it's 5px longer.
width_with_spacing = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal + 5, "width_with_spacing", "width_normal + 5");
ctx.textLetterSpacing = -2;
ctx.textWordSpacing = -1;
_assertSame(ctx.textLetterSpacing, -2, "ctx.textLetterSpacing", "-2");
_assertSame(ctx.textWordSpacing, -1, "ctx.textWordSpacing", "-1");
// Add Word Spacing and letter spacing, so it's -11*2 = -22px from
// letter spacing and -1px from word spacing.
width_with_spacing = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal - 23, "width_with_spacing", "width_normal - 23");
});
</script>
third_party/blink/web_tests/external/wpt/html/canvas/offscreen/text/2d.text.drawing.style.spacing.html
View file @ c9e5643d
...@@ -6,11 +6,11 @@ ...@@ -6,11 +6,11 @@
<script src="/html/canvas/resources/canvas-tests.js"></script> <script src="/html/canvas/resources/canvas-tests.js"></script>
<h1>2d.text.drawing.style.spacing</h1> <h1>2d.text.drawing.style.spacing</h1>
<p class="desc">Testing baselines</p> <p class="desc">Testing letter spacing and word spacing</p>
<script> <script>
var t = async_test("Testing baselines"); var t = async_test("Testing letter spacing and word spacing");
var t_pass = t.done.bind(t); var t_pass = t.done.bind(t);
var t_fail = t.step_func(function(reason) { var t_fail = t.step_func(function(reason) {
throw reason; throw reason;
......
third_party/blink/web_tests/external/wpt/html/canvas/offscreen/text/2d.text.drawing.style.spacing.measure.html 0 → 100644
View file @ c9e5643d
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>OffscreenCanvas test: 2d.text.drawing.style.spacing.measure</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<h1>2d.text.drawing.style.spacing.measure</h1>
<p class="desc">Testing letter spacing and word spacing</p>
<script>
var t = async_test("Testing letter spacing and word spacing");
var t_pass = t.done.bind(t);
var t_fail = t.step_func(function(reason) {
throw reason;
});
t.step(function() {
var offscreenCanvas = new OffscreenCanvas(100, 50);
var ctx = offscreenCanvas.getContext('2d');
_assertSame(ctx.textLetterSpacing, 0, "ctx.textLetterSpacing", "0");
_assertSame(ctx.textWordSpacing, 0, "ctx.textWordSpacing", "0");
var width_normal = ctx.measureText('Hello World').width;
ctx.textLetterSpacing = 3;
_assertSame(ctx.textLetterSpacing, 3, "ctx.textLetterSpacing", "3");
_assertSame(ctx.textWordSpacing, 0, "ctx.textWordSpacing", "0");
var width_with_spacing = ctx.measureText('Hello World').width;
// Add letter spacing after each letter, so 11 * 3 = 33px longer.
_assertSame(width_with_spacing, width_normal + 33, "width_with_spacing", "width_normal + 33");
ctx.textWordSpacing = 5;
ctx.textLetterSpacing = 0;
_assertSame(ctx.textLetterSpacing, 0, "ctx.textLetterSpacing", "0");
_assertSame(ctx.textWordSpacing, 5, "ctx.textWordSpacing", "5");
// Add Word Spacing between "Hello" and "World", so it's 5px longer.
width_with_spacing = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal + 5, "width_with_spacing", "width_normal + 5");
ctx.textLetterSpacing = -2;
ctx.textWordSpacing = -1;
_assertSame(ctx.textLetterSpacing, -2, "ctx.textLetterSpacing", "-2");
_assertSame(ctx.textWordSpacing, -1, "ctx.textWordSpacing", "-1");
// Add Word Spacing and letter spacing, so it's -11*2 = -22px from
// letter spacing and -1px from word spacing.
width_with_spacing = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal - 23, "width_with_spacing", "width_normal - 23");
t.done();
});
</script>
third_party/blink/web_tests/external/wpt/html/canvas/offscreen/text/2d.text.drawing.style.spacing.measure.worker.js 0 → 100644
View file @ c9e5643d
// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
// OffscreenCanvas test in a worker:2d.text.drawing.style.spacing.measure
// Description:Testing letter spacing and word spacing
// Note:
importScripts("/resources/testharness.js");
importScripts("/html/canvas/resources/canvas-tests.js");
var t = async_test("Testing letter spacing and word spacing");
var t_pass = t.done.bind(t);
var t_fail = t.step_func(function(reason) {
throw reason;
});
t.step(function() {
var offscreenCanvas = new OffscreenCanvas(100, 50);
var ctx = offscreenCanvas.getContext('2d');
_assertSame(ctx.textLetterSpacing, 0, "ctx.textLetterSpacing", "0");
_assertSame(ctx.textWordSpacing, 0, "ctx.textWordSpacing", "0");
var width_normal = ctx.measureText('Hello World').width;
ctx.textLetterSpacing = 3;
_assertSame(ctx.textLetterSpacing, 3, "ctx.textLetterSpacing", "3");
_assertSame(ctx.textWordSpacing, 0, "ctx.textWordSpacing", "0");
var width_with_spacing = ctx.measureText('Hello World').width;
// Add letter spacing after each letter, so 11 * 3 = 33px longer.
_assertSame(width_with_spacing, width_normal + 33, "width_with_spacing", "width_normal + 33");
ctx.textWordSpacing = 5;
ctx.textLetterSpacing = 0;
_assertSame(ctx.textLetterSpacing, 0, "ctx.textLetterSpacing", "0");
_assertSame(ctx.textWordSpacing, 5, "ctx.textWordSpacing", "5");
// Add Word Spacing between "Hello" and "World", so it's 5px longer.
width_with_spacing = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal + 5, "width_with_spacing", "width_normal + 5");
ctx.textLetterSpacing = -2;
ctx.textWordSpacing = -1;
_assertSame(ctx.textLetterSpacing, -2, "ctx.textLetterSpacing", "-2");
_assertSame(ctx.textWordSpacing, -1, "ctx.textWordSpacing", "-1");
// Add Word Spacing and letter spacing, so it's -11*2 = -22px from
// letter spacing and -1px from word spacing.
width_with_spacing = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal - 23, "width_with_spacing", "width_normal - 23");
t.done();
});
done();
third_party/blink/web_tests/external/wpt/html/canvas/offscreen/text/2d.text.drawing.style.spacing.worker.js
View file @ c9e5643d
// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. // DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
// OffscreenCanvas test in a worker:2d.text.drawing.style.spacing // OffscreenCanvas test in a worker:2d.text.drawing.style.spacing
// Description:Testing baselines // Description:Testing letter spacing and word spacing
// Note: // Note:
importScripts("/resources/testharness.js"); importScripts("/resources/testharness.js");
importScripts("/html/canvas/resources/canvas-tests.js"); importScripts("/html/canvas/resources/canvas-tests.js");
var t = async_test("Testing baselines"); var t = async_test("Testing letter spacing and word spacing");
var t_pass = t.done.bind(t); var t_pass = t.done.bind(t);
var t_fail = t.step_func(function(reason) { var t_fail = t.step_func(function(reason) {
throw reason; throw reason;
......
third_party/blink/web_tests/external/wpt/html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml
View file @ c9e5643d
...@@ -739,7 +739,7 @@ ...@@ -739,7 +739,7 @@
}); });
- name: 2d.text.drawing.style.spacing - name: 2d.text.drawing.style.spacing
desc: Testing baselines desc: Testing letter spacing and word spacing
testing: testing:
- 2d.text.drawing.style.spacing - 2d.text.drawing.style.spacing
code: | code: |
...@@ -759,6 +759,39 @@ ...@@ -759,6 +759,39 @@
@assert ctx.textLetterSpacing === -1; @assert ctx.textLetterSpacing === -1;
@assert ctx.textWordSpacing === -1; @assert ctx.textWordSpacing === -1;
- name: 2d.text.drawing.style.spacing.measure
desc: Testing letter spacing and word spacing
testing:
- 2d.text.drawing.style.spacing
code: |
@assert ctx.textLetterSpacing === 0;
@assert ctx.textWordSpacing === 0;
var width_normal = ctx.measureText('Hello World').width;
ctx.textLetterSpacing = 3;
@assert ctx.textLetterSpacing === 3;
@assert ctx.textWordSpacing === 0;
var width_with_spacing = ctx.measureText('Hello World').width;
// Add letter spacing after each letter, so 11 * 3 = 33px longer.
@assert width_with_spacing === width_normal + 33;
ctx.textWordSpacing = 5;
ctx.textLetterSpacing = 0;
@assert ctx.textLetterSpacing === 0;
@assert ctx.textWordSpacing === 5;
// Add Word Spacing between "Hello" and "World", so it's 5px longer.
width_with_spacing = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal + 5;
ctx.textLetterSpacing = -2;
ctx.textWordSpacing = -1;
@assert ctx.textLetterSpacing === -2;
@assert ctx.textWordSpacing === -1;
// Add Word Spacing and letter spacing, so it's -11*2 = -22px from
// letter spacing and -1px from word spacing.
width_with_spacing = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal - 23;
- name: 2d.text.drawing.style.fontKerning - name: 2d.text.drawing.style.fontKerning
desc: Testing basic functionalities of fontKerning for canvas desc: Testing basic functionalities of fontKerning for canvas
testing: testing:
......
third_party/blink/web_tests/external/wpt/html/canvas/tools/yaml/offscreen/text.yaml
View file @ c9e5643d
...@@ -1236,7 +1236,7 @@ ...@@ -1236,7 +1236,7 @@
}).then(t_pass, t_fail); }).then(t_pass, t_fail);
- name: 2d.text.drawing.style.spacing - name: 2d.text.drawing.style.spacing
desc: Testing baselines desc: Testing letter spacing and word spacing
testing: testing:
- 2d.text.drawing.style.spacing - 2d.text.drawing.style.spacing
code: | code: |
...@@ -1257,6 +1257,40 @@ ...@@ -1257,6 +1257,40 @@
@assert ctx.textWordSpacing === -1; @assert ctx.textWordSpacing === -1;
t.done(); t.done();
- name: 2d.text.drawing.style.spacing.measure
desc: Testing letter spacing and word spacing
testing:
- 2d.text.drawing.style.spacing
code: |
@assert ctx.textLetterSpacing === 0;
@assert ctx.textWordSpacing === 0;
var width_normal = ctx.measureText('Hello World').width;
ctx.textLetterSpacing = 3;
@assert ctx.textLetterSpacing === 3;
@assert ctx.textWordSpacing === 0;
var width_with_spacing = ctx.measureText('Hello World').width;
// Add letter spacing after each letter, so 11 * 3 = 33px longer.
@assert width_with_spacing === width_normal + 33;
ctx.textWordSpacing = 5;
ctx.textLetterSpacing = 0;
@assert ctx.textLetterSpacing === 0;
@assert ctx.textWordSpacing === 5;
// Add Word Spacing between "Hello" and "World", so it's 5px longer.
width_with_spacing = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal + 5;
ctx.textLetterSpacing = -2;
ctx.textWordSpacing = -1;
@assert ctx.textLetterSpacing === -2;
@assert ctx.textWordSpacing === -1;
// Add Word Spacing and letter spacing, so it's -11*2 = -22px from
// letter spacing and -1px from word spacing.
width_with_spacing = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal - 23;
t.done();
- name: 2d.text.drawing.style.fontKerning - name: 2d.text.drawing.style.fontKerning
desc: Testing basic functionalities of fontKerning for canvas desc: Testing basic functionalities of fontKerning for canvas
testing: testing:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment