mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1742859 [wpt PR 31735] - Add tests for letterspacing and wordspacing with different units, a=testonly 

Automatic update from web-platform-tests
Add tests for letterspacing and wordspacing with different units

After changing letterspacing and wordspacing to accept strings,
test if they work with different length units, ex: px, mm, cm, inch, em.

Bug: 1263632

Change-Id: I2944ff56e1bfd796b0c6481d7f0f67775d9ce8b5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3297936
Commit-Queue: Yi Xu <yiyix@chromium.org>
Reviewed-by: Juanmi Huertas <juanmihd@chromium.org>
Cr-Commit-Position: refs/heads/main@{#945872}

--

wpt-commits: d613c3c794c784a2c6116c586422cc13cfc9d505
wpt-pr: 31735
This commit is contained in:
Yi Xu 2021-11-30 04:27:35 +00:00 коммит произвёл moz-wptsync-bot
Родитель 1d558b3260
Коммит 875a38d0ac
17 изменённых файлов: 801 добавлений и 195 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

46
testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.letterSpacing.change.font.html Normal file
Просмотреть файл

@ -0,0 +1,46 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.text.drawing.style.letterSpacing.change.font</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.letterSpacing.change.font</h1>
<p class="desc">Set letter spacing and word spacing to font dependent value and verify it works after font change.</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("Set letter spacing and word spacing to font dependent value and verify it works after font change.");
_addTest(function(canvas, ctx) {
_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
// Get the width for 'Hello World' at default size, 10px.
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '1em';
_assertSame(ctx.letterSpacing, '1em', "ctx.letterSpacing", "'1em'");
// 1em = 10px. Add 10px after each letter in "Hello World",
// makes it 110px longer.
var width_with_spacing = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal + 110, "width_with_spacing", "width_normal + 110");
// Changing font to 20px. Without resetting the spacing, 1em letterSpacing
// is now 20px, so it's suppose to be 220px longer without any letterSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World').width;
// Now calculate the reference spacing for "Hello World" with no spacing.
ctx.letterSpacing = '0em';
width_normal = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal + 220, "width_with_spacing", "width_normal + 220");
});
</script>

54
testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.letterSpacing.measure.html Normal file
Просмотреть файл

@ -0,0 +1,54 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.text.drawing.style.letterSpacing.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.letterSpacing.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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
var width_normal = ctx.measureText('Hello World').width;
function test_letter_spacing(value, difference_spacing, epsilon) {
ctx.letterSpacing = value;
_assertSame(ctx.letterSpacing, value, "ctx.letterSpacing", "value");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
width_with_letter_spacing = ctx.measureText('Hello World').width;
assert_approx_equals(width_with_letter_spacing, width_normal + difference_spacing, epsilon, "letter spacing doesn't work.");
}
// The first value is the letter Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 11 letters
// in 'hello world', so the length difference is always letterSpacing * 11.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 33, 0],
['5px', 55, 0],
['-2px', -22, 0],
['1em', 110, 0],
['1in', 1056, 0],
['-0.1cm', -41.65, 0.2],
['-0.6mm', -24,95, 0.2]]
for (const test_case of test_cases) {
test_letter_spacing(test_case[0], test_case[1], test_case[2]);
}
});
</script>

53
testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.spacing.measure.html
Просмотреть файл

@ -1,53 +0,0 @@
<!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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '3px';
_assertSame(ctx.letterSpacing, '3px', "ctx.letterSpacing", "'3px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
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.wordSpacing = '5px';
ctx.letterSpacing = '0px';
_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '5px', "ctx.wordSpacing", "'5px'");
// 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.letterSpacing = '-2px';
ctx.wordSpacing = '-1px';
_assertSame(ctx.letterSpacing, '-2px', "ctx.letterSpacing", "'-2px'");
_assertSame(ctx.wordSpacing, '-1px', "ctx.wordSpacing", "'-1px'");
// 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>

46
testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.wordSpacing.change.font.html Normal file
Просмотреть файл

@ -0,0 +1,46 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.text.drawing.style.wordSpacing.change.font</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.wordSpacing.change.font</h1>
<p class="desc">Set word spacing and word spacing to font dependent value and verify it works after font change.</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("Set word spacing and word spacing to font dependent value and verify it works after font change.");
_addTest(function(canvas, ctx) {
_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
// Get the width for 'Hello World, again' at default size, 10px.
var width_normal = ctx.measureText('Hello World, again').width;
ctx.wordSpacing = '1em';
_assertSame(ctx.wordSpacing, '1em', "ctx.wordSpacing", "'1em'");
// 1em = 10px. Add 10px after each word in "Hello World, again",
// makes it 20px longer.
var width_with_spacing = ctx.measureText('Hello World, again').width;
_assertSame(width_with_spacing, width_normal + 20, "width_with_spacing", "width_normal + 20");
// Changing font to 20px. Without resetting the spacing, 1em wordSpacing
// is now 20px, so it's suppose to be 40px longer without any wordSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World, again').width;
// Now calculate the reference spacing for "Hello World, again" with no spacing.
ctx.wordSpacing = '0em';
width_normal = ctx.measureText('Hello World, again').width;
_assertSame(width_with_spacing, width_normal + 40, "width_with_spacing", "width_normal + 40");
});
</script>

54
testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.wordSpacing.measure.html Normal file
Просмотреть файл

@ -0,0 +1,54 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.text.drawing.style.wordSpacing.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.wordSpacing.measure</h1>
<p class="desc">Testing if word spacing is working properly</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 if word spacing is working properly");
_addTest(function(canvas, ctx) {
_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
var width_normal = ctx.measureText('Hello World, again').width;
function test_word_spacing(value, difference_spacing, epsilon) {
ctx.wordSpacing = value;
_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, value, "ctx.wordSpacing", "value");
width_with_word_spacing = ctx.measureText('Hello World, again').width;
assert_approx_equals(width_with_word_spacing, width_normal + difference_spacing, epsilon, "word spacing doesn't work.");
}
// The first value is the word Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 2 words
// in 'Hello World, again', so the length difference is always wordSpacing * 2.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 6, 0],
['5px', 10, 0],
['-2px', -4, 0],
['1em', 20, 0],
['1in', 192, 0],
['-0.1cm', -7.57, 0.2],
['-0.6mm', -4.54, 0.2]]
for (const test_case of test_cases) {
test_word_spacing(test_case[0], test_case[1], test_case[2]);
}
});
</script>

46
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.letterSpacing.change.font.html Normal file
Просмотреть файл

@ -0,0 +1,46 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>OffscreenCanvas test: 2d.text.drawing.style.letterSpacing.change.font</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.letterSpacing.change.font</h1>
<p class="desc">Set letter spacing and word spacing to font dependent value and verify it works after font change.</p>
<script>
var t = async_test("Set letter spacing and word spacing to font dependent value and verify it works after font change.");
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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
// Get the width for 'Hello World' at default size, 10px.
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '1em';
_assertSame(ctx.letterSpacing, '1em', "ctx.letterSpacing", "'1em'");
// 1em = 10px. Add 10px after each letter in "Hello World",
// makes it 110px longer.
var width_with_spacing = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal + 110, "width_with_spacing", "width_normal + 110");
// Changing font to 20px. Without resetting the spacing, 1em letterSpacing
// is now 20px, so it's suppose to be 220px longer without any letterSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World').width;
// Now calculate the reference spacing for "Hello World" with no spacing.
ctx.letterSpacing = '0em';
width_normal = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal + 220, "width_with_spacing", "width_normal + 220");
t.done();
});
</script>

42
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.letterSpacing.change.font.worker.js Normal file
Просмотреть файл

@ -0,0 +1,42 @@
// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
// OffscreenCanvas test in a worker:2d.text.drawing.style.letterSpacing.change.font
// Description:Set letter spacing and word spacing to font dependent value and verify it works after font change.
// Note:
importScripts("/resources/testharness.js");
importScripts("/html/canvas/resources/canvas-tests.js");
var t = async_test("Set letter spacing and word spacing to font dependent value and verify it works after font change.");
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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
// Get the width for 'Hello World' at default size, 10px.
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '1em';
_assertSame(ctx.letterSpacing, '1em', "ctx.letterSpacing", "'1em'");
// 1em = 10px. Add 10px after each letter in "Hello World",
// makes it 110px longer.
var width_with_spacing = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal + 110, "width_with_spacing", "width_normal + 110");
// Changing font to 20px. Without resetting the spacing, 1em letterSpacing
// is now 20px, so it's suppose to be 220px longer without any letterSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World').width;
// Now calculate the reference spacing for "Hello World" with no spacing.
ctx.letterSpacing = '0em';
width_normal = ctx.measureText('Hello World').width;
_assertSame(width_with_spacing, width_normal + 220, "width_with_spacing", "width_normal + 220");
t.done();
});
done();

54
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.letterSpacing.measure.html Normal file
Просмотреть файл

@ -0,0 +1,54 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>OffscreenCanvas test: 2d.text.drawing.style.letterSpacing.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.letterSpacing.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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
var width_normal = ctx.measureText('Hello World').width;
function test_letter_spacing(value, difference_spacing, epsilon) {
ctx.letterSpacing = value;
_assertSame(ctx.letterSpacing, value, "ctx.letterSpacing", "value");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
width_with_letter_spacing = ctx.measureText('Hello World').width;
assert_approx_equals(width_with_letter_spacing, width_normal + difference_spacing, epsilon, "letter spacing doesn't work.");
}
// The first value is the letter Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 11 letters
// in 'hello world', so the length difference is always letterSpacing * 11.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 33, 0],
['5px', 55, 0],
['-2px', -22, 0],
['1em', 110, 0],
['1in', 1056, 0],
['-0.1cm', -41.65, 0.2],
['-0.6mm', -24,95, 0.2]]
for (const test_case of test_cases) {
test_letter_spacing(test_case[0], test_case[1], test_case[2]);
}
t.done();
});
</script>

50
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.letterSpacing.measure.worker.js Normal file
Просмотреть файл

@ -0,0 +1,50 @@
// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
// OffscreenCanvas test in a worker:2d.text.drawing.style.letterSpacing.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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
var width_normal = ctx.measureText('Hello World').width;
function test_letter_spacing(value, difference_spacing, epsilon) {
ctx.letterSpacing = value;
_assertSame(ctx.letterSpacing, value, "ctx.letterSpacing", "value");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
width_with_letter_spacing = ctx.measureText('Hello World').width;
assert_approx_equals(width_with_letter_spacing, width_normal + difference_spacing, epsilon, "letter spacing doesn't work.");
}
// The first value is the letter Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 11 letters
// in 'hello world', so the length difference is always letterSpacing * 11.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 33, 0],
['5px', 55, 0],
['-2px', -22, 0],
['1em', 110, 0],
['1in', 1056, 0],
['-0.1cm', -41.65, 0.2],
['-0.6mm', -24,95, 0.2]]
for (const test_case of test_cases) {
test_letter_spacing(test_case[0], test_case[1], test_case[2]);
}
t.done();
});
done();

53
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.spacing.measure.html
Просмотреть файл

@ -1,53 +0,0 @@
<!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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '3px';
_assertSame(ctx.letterSpacing, '3px', "ctx.letterSpacing", "'3px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
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.wordSpacing = '5px';
ctx.letterSpacing = '0px';
_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '5px', "ctx.wordSpacing", "'5px'");
// 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.letterSpacing = '-2px';
ctx.wordSpacing = '-1px';
_assertSame(ctx.letterSpacing, '-2px', "ctx.letterSpacing", "'-2px'");
_assertSame(ctx.wordSpacing, '-1px', "ctx.wordSpacing", "'-1px'");
// 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>

49
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.spacing.measure.worker.js
Просмотреть файл

@ -1,49 +0,0 @@
// 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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '3px';
_assertSame(ctx.letterSpacing, '3px', "ctx.letterSpacing", "'3px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
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.wordSpacing = '5px';
ctx.letterSpacing = '0px';
_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '5px', "ctx.wordSpacing", "'5px'");
// 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.letterSpacing = '-2px';
ctx.wordSpacing = '-1px';
_assertSame(ctx.letterSpacing, '-2px', "ctx.letterSpacing", "'-2px'");
_assertSame(ctx.wordSpacing, '-1px', "ctx.wordSpacing", "'-1px'");
// 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();

46
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.wordSpacing.change.font.html Normal file
Просмотреть файл

@ -0,0 +1,46 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>OffscreenCanvas test: 2d.text.drawing.style.wordSpacing.change.font</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.wordSpacing.change.font</h1>
<p class="desc">Set word spacing and word spacing to font dependent value and verify it works after font change.</p>
<script>
var t = async_test("Set word spacing and word spacing to font dependent value and verify it works after font change.");
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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
// Get the width for 'Hello World, again' at default size, 10px.
var width_normal = ctx.measureText('Hello World, again').width;
ctx.wordSpacing = '1em';
_assertSame(ctx.wordSpacing, '1em', "ctx.wordSpacing", "'1em'");
// 1em = 10px. Add 10px after each word in "Hello World, again",
// makes it 20px longer.
var width_with_spacing = ctx.measureText('Hello World, again').width;
_assertSame(width_with_spacing, width_normal + 20, "width_with_spacing", "width_normal + 20");
// Changing font to 20px. Without resetting the spacing, 1em wordSpacing
// is now 20px, so it's suppose to be 40px longer without any wordSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World, again').width;
// Now calculate the reference spacing for "Hello World, again" with no spacing.
ctx.wordSpacing = '0em';
width_normal = ctx.measureText('Hello World, again').width;
_assertSame(width_with_spacing, width_normal + 40, "width_with_spacing", "width_normal + 40");
t.done();
});
</script>

42
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.wordSpacing.change.font.worker.js Normal file
Просмотреть файл

@ -0,0 +1,42 @@
// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
// OffscreenCanvas test in a worker:2d.text.drawing.style.wordSpacing.change.font
// Description:Set word spacing and word spacing to font dependent value and verify it works after font change.
// Note:
importScripts("/resources/testharness.js");
importScripts("/html/canvas/resources/canvas-tests.js");
var t = async_test("Set word spacing and word spacing to font dependent value and verify it works after font change.");
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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
// Get the width for 'Hello World, again' at default size, 10px.
var width_normal = ctx.measureText('Hello World, again').width;
ctx.wordSpacing = '1em';
_assertSame(ctx.wordSpacing, '1em', "ctx.wordSpacing", "'1em'");
// 1em = 10px. Add 10px after each word in "Hello World, again",
// makes it 20px longer.
var width_with_spacing = ctx.measureText('Hello World, again').width;
_assertSame(width_with_spacing, width_normal + 20, "width_with_spacing", "width_normal + 20");
// Changing font to 20px. Without resetting the spacing, 1em wordSpacing
// is now 20px, so it's suppose to be 40px longer without any wordSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World, again').width;
// Now calculate the reference spacing for "Hello World, again" with no spacing.
ctx.wordSpacing = '0em';
width_normal = ctx.measureText('Hello World, again').width;
_assertSame(width_with_spacing, width_normal + 40, "width_with_spacing", "width_normal + 40");
t.done();
});
done();

54
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.wordSpacing.measure.html Normal file
Просмотреть файл

@ -0,0 +1,54 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>OffscreenCanvas test: 2d.text.drawing.style.wordSpacing.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.wordSpacing.measure</h1>
<p class="desc">Testing if word spacing is working properly</p>
<script>
var t = async_test("Testing if word spacing is working properly");
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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
var width_normal = ctx.measureText('Hello World, again').width;
function test_word_spacing(value, difference_spacing, epsilon) {
ctx.wordSpacing = value;
_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, value, "ctx.wordSpacing", "value");
width_with_word_spacing = ctx.measureText('Hello World, again').width;
assert_approx_equals(width_with_word_spacing, width_normal + difference_spacing, epsilon, "word spacing doesn't work.");
}
// The first value is the word Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 2 words
// in 'Hello World, again', so the length difference is always wordSpacing * 2.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 6, 0],
['5px', 10, 0],
['-2px', -4, 0],
['1em', 20, 0],
['1in', 192, 0],
['-0.1cm', -7.57, 0.2],
['-0.6mm', -4.54, 0.2]]
for (const test_case of test_cases) {
test_word_spacing(test_case[0], test_case[1], test_case[2]);
}
t.done();
});
</script>

50
testing/web-platform/tests/html/canvas/offscreen/text/2d.text.drawing.style.wordSpacing.measure.worker.js Normal file
Просмотреть файл

@ -0,0 +1,50 @@
// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
// OffscreenCanvas test in a worker:2d.text.drawing.style.wordSpacing.measure
// Description:Testing if word spacing is working properly
// Note:
importScripts("/resources/testharness.js");
importScripts("/html/canvas/resources/canvas-tests.js");
var t = async_test("Testing if word spacing is working properly");
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.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
var width_normal = ctx.measureText('Hello World, again').width;
function test_word_spacing(value, difference_spacing, epsilon) {
ctx.wordSpacing = value;
_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
_assertSame(ctx.wordSpacing, value, "ctx.wordSpacing", "value");
width_with_word_spacing = ctx.measureText('Hello World, again').width;
assert_approx_equals(width_with_word_spacing, width_normal + difference_spacing, epsilon, "word spacing doesn't work.");
}
// The first value is the word Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 2 words
// in 'Hello World, again', so the length difference is always wordSpacing * 2.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 6, 0],
['5px', 10, 0],
['-2px', -4, 0],
['1em', 20, 0],
['1in', 192, 0],
['-0.1cm', -7.57, 0.2],
['-0.6mm', -4.54, 0.2]]
for (const test_case of test_cases) {
test_word_spacing(test_case[0], test_case[1], test_case[2]);
}
t.done();
});
done();

125
testing/web-platform/tests/html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml
Просмотреть файл

@ -775,7 +775,7 @@
}
@nonfinite test_word_spacing(<0 NaN Infinity -Infinity>);
- name: 2d.text.drawing.style.spacing.measure
- name: 2d.text.drawing.style.letterSpacing.measure
desc: Testing letter spacing and word spacing
testing:
- 2d.text.drawing.style.spacing
@ -784,29 +784,116 @@
@assert ctx.wordSpacing === '0px';
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '3px';
@assert ctx.letterSpacing === '3px';
function test_letter_spacing(value, difference_spacing, epsilon) {
ctx.letterSpacing = value;
@assert ctx.letterSpacing === value;
@assert ctx.wordSpacing === '0px';
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;
width_with_letter_spacing = ctx.measureText('Hello World').width;
assert_approx_equals(width_with_letter_spacing, width_normal + difference_spacing, epsilon, "letter spacing doesn't work.");
}
ctx.wordSpacing = '5px';
ctx.letterSpacing = '0px';
// The first value is the letter Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 11 letters
// in 'hello world', so the length difference is always letterSpacing * 11.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 33, 0],
['5px', 55, 0],
['-2px', -22, 0],
['1em', 110, 0],
['1in', 1056, 0],
['-0.1cm', -41.65, 0.2],
['-0.6mm', -24,95, 0.2]]
for (const test_case of test_cases) {
test_letter_spacing(test_case[0], test_case[1], test_case[2]);
}
- name: 2d.text.drawing.style.wordSpacing.measure
desc: Testing if word spacing is working properly
testing:
- 2d.text.drawing.style.spacing
code: |
@assert ctx.letterSpacing === '0px';
@assert ctx.wordSpacing === '5px';
// 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;
@assert ctx.wordSpacing === '0px';
var width_normal = ctx.measureText('Hello World, again').width;
ctx.letterSpacing = '-2px';
ctx.wordSpacing = '-1px';
@assert ctx.letterSpacing === '-2px';
@assert ctx.wordSpacing === '-1px';
// Add Word Spacing and letter spacing, so it's -11*2 = -22px from
// letter spacing and -1px from word spacing.
function test_word_spacing(value, difference_spacing, epsilon) {
ctx.wordSpacing = value;
@assert ctx.letterSpacing === '0px';
@assert ctx.wordSpacing === value;
width_with_word_spacing = ctx.measureText('Hello World, again').width;
assert_approx_equals(width_with_word_spacing, width_normal + difference_spacing, epsilon, "word spacing doesn't work.");
}
// The first value is the word Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 2 words
// in 'Hello World, again', so the length difference is always wordSpacing * 2.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 6, 0],
['5px', 10, 0],
['-2px', -4, 0],
['1em', 20, 0],
['1in', 192, 0],
['-0.1cm', -7.57, 0.2],
['-0.6mm', -4.54, 0.2]]
for (const test_case of test_cases) {
test_word_spacing(test_case[0], test_case[1], test_case[2]);
}
- name: 2d.text.drawing.style.letterSpacing.change.font
desc: Set letter spacing and word spacing to font dependent value and verify it works after font change.
testing:
- 2d.text.drawing.style.spacing
code: |
@assert ctx.letterSpacing === '0px';
@assert ctx.wordSpacing === '0px';
// Get the width for 'Hello World' at default size, 10px.
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '1em';
@assert ctx.letterSpacing === '1em';
// 1em = 10px. Add 10px after each letter in "Hello World",
// makes it 110px longer.
var width_with_spacing = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal + 110;
// Changing font to 20px. Without resetting the spacing, 1em letterSpacing
// is now 20px, so it's suppose to be 220px longer without any letterSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal - 23;
// Now calculate the reference spacing for "Hello World" with no spacing.
ctx.letterSpacing = '0em';
width_normal = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal + 220;
- name: 2d.text.drawing.style.wordSpacing.change.font
desc: Set word spacing and word spacing to font dependent value and verify it works after font change.
testing:
- 2d.text.drawing.style.spacing
code: |
@assert ctx.letterSpacing === '0px';
@assert ctx.wordSpacing === '0px';
// Get the width for 'Hello World, again' at default size, 10px.
var width_normal = ctx.measureText('Hello World, again').width;
ctx.wordSpacing = '1em';
@assert ctx.wordSpacing === '1em';
// 1em = 10px. Add 10px after each word in "Hello World, again",
// makes it 20px longer.
var width_with_spacing = ctx.measureText('Hello World, again').width;
@assert width_with_spacing === width_normal + 20;
// Changing font to 20px. Without resetting the spacing, 1em wordSpacing
// is now 20px, so it's suppose to be 40px longer without any wordSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World, again').width;
// Now calculate the reference spacing for "Hello World, again" with no spacing.
ctx.wordSpacing = '0em';
width_normal = ctx.measureText('Hello World, again').width;
@assert width_with_spacing === width_normal + 40;
- name: 2d.text.drawing.style.fontKerning
desc: Testing basic functionalities of fontKerning for canvas

128
testing/web-platform/tests/html/canvas/tools/yaml/offscreen/text.yaml
Просмотреть файл

@ -1298,7 +1298,7 @@
t.done();
- name: 2d.text.drawing.style.spacing.measure
- name: 2d.text.drawing.style.letterSpacing.measure
desc: Testing letter spacing and word spacing
testing:
- 2d.text.drawing.style.spacing
@ -1307,29 +1307,119 @@
@assert ctx.wordSpacing === '0px';
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '3px';
@assert ctx.letterSpacing === '3px';
function test_letter_spacing(value, difference_spacing, epsilon) {
ctx.letterSpacing = value;
@assert ctx.letterSpacing === value;
@assert ctx.wordSpacing === '0px';
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;
width_with_letter_spacing = ctx.measureText('Hello World').width;
assert_approx_equals(width_with_letter_spacing, width_normal + difference_spacing, epsilon, "letter spacing doesn't work.");
}
ctx.wordSpacing = '5px';
ctx.letterSpacing = '0px';
// The first value is the letter Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 11 letters
// in 'hello world', so the length difference is always letterSpacing * 11.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 33, 0],
['5px', 55, 0],
['-2px', -22, 0],
['1em', 110, 0],
['1in', 1056, 0],
['-0.1cm', -41.65, 0.2],
['-0.6mm', -24,95, 0.2]]
for (const test_case of test_cases) {
test_letter_spacing(test_case[0], test_case[1], test_case[2]);
}
t.done();
- name: 2d.text.drawing.style.wordSpacing.measure
desc: Testing if word spacing is working properly
testing:
- 2d.text.drawing.style.spacing
code: |
@assert ctx.letterSpacing === '0px';
@assert ctx.wordSpacing === '5px';
// 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;
@assert ctx.wordSpacing === '0px';
var width_normal = ctx.measureText('Hello World, again').width;
ctx.letterSpacing = '-2px';
ctx.wordSpacing = '-1px';
@assert ctx.letterSpacing === '-2px';
@assert ctx.wordSpacing === '-1px';
// Add Word Spacing and letter spacing, so it's -11*2 = -22px from
// letter spacing and -1px from word spacing.
function test_word_spacing(value, difference_spacing, epsilon) {
ctx.wordSpacing = value;
@assert ctx.letterSpacing === '0px';
@assert ctx.wordSpacing === value;
width_with_word_spacing = ctx.measureText('Hello World, again').width;
assert_approx_equals(width_with_word_spacing, width_normal + difference_spacing, epsilon, "word spacing doesn't work.");
}
// The first value is the word Spacing to be set, the second value the
// change in length of string 'Hello World', note that there are 2 words
// in 'Hello World, again', so the length difference is always wordSpacing * 2.
// and the third value is the acceptable differencee for the length change,
// note that unit such as 1cm/1mm doesn't map to an exact pixel value.
test_cases = [['3px', 6, 0],
['5px', 10, 0],
['-2px', -4, 0],
['1em', 20, 0],
['1in', 192, 0],
['-0.1cm', -7.57, 0.2],
['-0.6mm', -4.54, 0.2]]
for (const test_case of test_cases) {
test_word_spacing(test_case[0], test_case[1], test_case[2]);
}
t.done();
- name: 2d.text.drawing.style.letterSpacing.change.font
desc: Set letter spacing and word spacing to font dependent value and verify it works after font change.
testing:
- 2d.text.drawing.style.spacing
code: |
@assert ctx.letterSpacing === '0px';
@assert ctx.wordSpacing === '0px';
// Get the width for 'Hello World' at default size, 10px.
var width_normal = ctx.measureText('Hello World').width;
ctx.letterSpacing = '1em';
@assert ctx.letterSpacing === '1em';
// 1em = 10px. Add 10px after each letter in "Hello World",
// makes it 110px longer.
var width_with_spacing = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal + 110;
// Changing font to 20px. Without resetting the spacing, 1em letterSpacing
// is now 20px, so it's suppose to be 220px longer without any letterSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal - 23;
// Now calculate the reference spacing for "Hello World" with no spacing.
ctx.letterSpacing = '0em';
width_normal = ctx.measureText('Hello World').width;
@assert width_with_spacing === width_normal + 220;
t.done();
- name: 2d.text.drawing.style.wordSpacing.change.font
desc: Set word spacing and word spacing to font dependent value and verify it works after font change.
testing:
- 2d.text.drawing.style.spacing
code: |
@assert ctx.letterSpacing === '0px';
@assert ctx.wordSpacing === '0px';
// Get the width for 'Hello World, again' at default size, 10px.
var width_normal = ctx.measureText('Hello World, again').width;
ctx.wordSpacing = '1em';
@assert ctx.wordSpacing === '1em';
// 1em = 10px. Add 10px after each word in "Hello World, again",
// makes it 20px longer.
var width_with_spacing = ctx.measureText('Hello World, again').width;
@assert width_with_spacing === width_normal + 20;
// Changing font to 20px. Without resetting the spacing, 1em wordSpacing
// is now 20px, so it's suppose to be 40px longer without any wordSpacing set.
ctx.font = '20px serif';
width_with_spacing = ctx.measureText('Hello World, again').width;
// Now calculate the reference spacing for "Hello World, again" with no spacing.
ctx.wordSpacing = '0em';
width_normal = ctx.measureText('Hello World, again').width;
@assert width_with_spacing === width_normal + 40;
t.done();
- name: 2d.text.drawing.style.fontKerning