зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
1d558b3260
Коммит
875a38d0ac
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
|
@ -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();
|
|
@ -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>
|
|
@ -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();
|
|
@ -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>
|
|
@ -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();
|
|
@ -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>
|
|
@ -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();
|
|
@ -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>
|
|
@ -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();
|
|
@ -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';
|
||||
@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;
|
||||
function test_letter_spacing(value, difference_spacing, epsilon) {
|
||||
ctx.letterSpacing = value;
|
||||
@assert ctx.letterSpacing === value;
|
||||
@assert 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.");
|
||||
}
|
||||
|
||||
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
|
||||
|
|
|
@ -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';
|
||||
@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;
|
||||
function test_letter_spacing(value, difference_spacing, epsilon) {
|
||||
ctx.letterSpacing = value;
|
||||
@assert ctx.letterSpacing === value;
|
||||
@assert 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.");
|
||||
}
|
||||
|
||||
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
|
||||
|
|
Загрузка…
Ссылка в новой задаче