diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/html/canvas/element/text-styles | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/text-styles')
28 files changed, 1082 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.align.default.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.align.default.html new file mode 100644 index 0000000000..5c725d4a93 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.align.default.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.align.default</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.align.default</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +_assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.align.invalid.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.align.invalid.html new file mode 100644 index 0000000000..7c69b5ae34 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.align.invalid.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.align.invalid</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.align.invalid</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +ctx.textAlign = 'start'; +ctx.textAlign = 'bogus'; +_assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + +ctx.textAlign = 'start'; +ctx.textAlign = 'END'; +_assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + +ctx.textAlign = 'start'; +ctx.textAlign = 'end '; +_assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + +ctx.textAlign = 'start'; +ctx.textAlign = 'end\0'; +_assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.align.valid.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.align.valid.html new file mode 100644 index 0000000000..c8fb253a7b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.align.valid.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.align.valid</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.align.valid</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +ctx.textAlign = 'start'; +_assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + +ctx.textAlign = 'end'; +_assertSame(ctx.textAlign, 'end', "ctx.textAlign", "'end'"); + +ctx.textAlign = 'left'; +_assertSame(ctx.textAlign, 'left', "ctx.textAlign", "'left'"); + +ctx.textAlign = 'right'; +_assertSame(ctx.textAlign, 'right', "ctx.textAlign", "'right'"); + +ctx.textAlign = 'center'; +_assertSame(ctx.textAlign, 'center', "ctx.textAlign", "'center'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.baseline.default.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.baseline.default.html new file mode 100644 index 0000000000..8e442254f7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.baseline.default.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.baseline.default</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.baseline.default</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +_assertSame(ctx.textBaseline, 'alphabetic', "ctx.textBaseline", "'alphabetic'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.baseline.invalid.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.baseline.invalid.html new file mode 100644 index 0000000000..1b31ce1be0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.baseline.invalid.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.baseline.invalid</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.baseline.invalid</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +ctx.textBaseline = 'top'; +ctx.textBaseline = 'bogus'; +_assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + +ctx.textBaseline = 'top'; +ctx.textBaseline = 'MIDDLE'; +_assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + +ctx.textBaseline = 'top'; +ctx.textBaseline = 'middle '; +_assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + +ctx.textBaseline = 'top'; +ctx.textBaseline = 'middle\0'; +_assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.baseline.valid.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.baseline.valid.html new file mode 100644 index 0000000000..3e1cb35811 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.baseline.valid.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.baseline.valid</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.baseline.valid</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +ctx.textBaseline = 'top'; +_assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + +ctx.textBaseline = 'hanging'; +_assertSame(ctx.textBaseline, 'hanging', "ctx.textBaseline", "'hanging'"); + +ctx.textBaseline = 'middle'; +_assertSame(ctx.textBaseline, 'middle', "ctx.textBaseline", "'middle'"); + +ctx.textBaseline = 'alphabetic'; +_assertSame(ctx.textBaseline, 'alphabetic', "ctx.textBaseline", "'alphabetic'"); + +ctx.textBaseline = 'ideographic'; +_assertSame(ctx.textBaseline, 'ideographic', "ctx.textBaseline", "'ideographic'"); + +ctx.textBaseline = 'bottom'; +_assertSame(ctx.textBaseline, 'bottom', "ctx.textBaseline", "'bottom'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.alphabetic.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.alphabetic.html new file mode 100644 index 0000000000..5bbd90f637 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.alphabetic.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.baseline.alphabetic</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.alphabetic</h1> +<p class="desc"></p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'alphabetic'; + ctx.fillText('CC', 0, 37.5); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.bottom.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.bottom.html new file mode 100644 index 0000000000..311be39f4f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.bottom.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.baseline.bottom</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.bottom</h1> +<p class="desc">textBaseline bottom is the bottom of the em square (not the bounding box)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("textBaseline bottom is the bottom of the em square (not the bounding box)"); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'bottom'; + ctx.fillText('CC', 0, 50); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.hanging.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.hanging.html new file mode 100644 index 0000000000..65aa7cd176 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.hanging.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.baseline.hanging</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.hanging</h1> +<p class="desc"></p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'hanging'; + ctx.fillText('CC', 0, 12.5); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.ideographic.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.ideographic.html new file mode 100644 index 0000000000..84f126200a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.ideographic.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.baseline.ideographic</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.ideographic</h1> +<p class="desc"></p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'ideographic'; + ctx.fillText('CC', 0, 31.25); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.middle.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.middle.html new file mode 100644 index 0000000000..a09a2f3153 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.middle.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.baseline.middle</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.middle</h1> +<p class="desc">textBaseline middle is the middle of the em square (not the bounding box)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("textBaseline middle is the middle of the em square (not the bounding box)"); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'middle'; + ctx.fillText('CC', 0, 25); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.top.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.top.html new file mode 100644 index 0000000000..b0c72c41ea --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.baseline.top.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.baseline.top</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.top</h1> +<p class="desc">textBaseline top is the top of the em square (not the bounding box)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("textBaseline top is the top of the em square (not the bounding box)"); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'top'; + ctx.fillText('CC', 0, 0); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.end.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.end.html new file mode 100644 index 0000000000..57de14adc2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.end.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.space.collapse.end</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.space.collapse.end</h1> +<p class="desc">Space characters at the end of a line are collapsed (per CSS)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Space characters at the end of a line are collapsed (per CSS)"); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textAlign = 'right'; + ctx.fillText('EE ', 100, 37.5); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.other.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.other.html new file mode 100644 index 0000000000..e593b9769e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.other.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.space.collapse.other</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.space.collapse.other</h1> +<p class="desc">Space characters are converted to U+0020, and collapsed (per CSS)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Space characters are converted to U+0020, and collapsed (per CSS)"); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.fillText('E \x09\x0a\x0c\x0d \x09\x0a\x0c\x0dEE', -100, 37.5); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.space.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.space.html new file mode 100644 index 0000000000..6e24007b1c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.space.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.space.collapse.space</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.space.collapse.space</h1> +<p class="desc">Space characters are converted to U+0020, and collapsed (per CSS)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Space characters are converted to U+0020, and collapsed (per CSS)"); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.fillText('E EE', -100, 37.5); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.start.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.start.html new file mode 100644 index 0000000000..5ec776e324 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.draw.space.collapse.start.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.space.collapse.start</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.space.collapse.start</h1> +<p class="desc">Space characters at the start of a line are collapsed (per CSS)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("Space characters at the start of a line are collapsed (per CSS)"); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.fillText(' EE', 0, 37.5); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.default.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.default.html new file mode 100644 index 0000000000..135c9bd84a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.default.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.default</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.font.default</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +_assertSame(ctx.font, '10px sans-serif', "ctx.font", "'10px sans-serif'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.basic.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.basic.html new file mode 100644 index 0000000000..57db32b688 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.basic.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.basic</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.font.parse.basic</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +ctx.font = '20px serif'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20PX SERIF'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.complex.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.complex.html new file mode 100644 index 0000000000..cd6235ed3e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.complex.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.complex</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.font.parse.complex</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +ctx.font = 'small-caps italic 400 12px/2 Unknown Font, sans-serif'; +_assertSame(ctx.font, 'italic small-caps 12px "Unknown Font", sans-serif', "ctx.font", "'italic small-caps 12px \"Unknown Font\", sans-serif'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.family.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.family.html new file mode 100644 index 0000000000..f5c24bdd50 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.family.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.family</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.font.parse.family</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +ctx.font = '20px cursive,fantasy,monospace,sans-serif,serif,UnquotedFont,"QuotedFont\\\\\\","'; +_assertSame(ctx.font, '20px cursive, fantasy, monospace, sans-serif, serif, UnquotedFont, "QuotedFont\\\\\\","', "ctx.font", "'20px cursive, fantasy, monospace, sans-serif, serif, UnquotedFont, \"QuotedFont\\\\\\\\\\\\\",\"'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.invalid.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.invalid.html new file mode 100644 index 0000000000..e2735440ed --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.invalid.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.invalid</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.font.parse.invalid</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +ctx.font = '20px serif'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = ''; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = 'bogus'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = 'inherit'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = '10px {bogus}'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = '10px initial'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = '10px default'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = '10px inherit'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = '10px revert'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = 'var(--x)'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = 'var(--x, 10px serif)'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +ctx.font = '20px serif'; +ctx.font = '1em serif; background: green; margin: 10px'; +_assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.size.percentage.default.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.size.percentage.default.html new file mode 100644 index 0000000000..65bb5549c4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.size.percentage.default.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.size.percentage.default</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.font.parse.size.percentage.default</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +var canvas2 = document.createElement('canvas'); +var ctx2 = canvas2.getContext('2d'); +ctx2.font = '1000% serif'; +_assertSame(ctx2.font, '100px serif', "ctx2.font", "'100px serif'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.size.percentage.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.size.percentage.html new file mode 100644 index 0000000000..18476b3b7a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.size.percentage.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.size.percentage</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.font.parse.size.percentage</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50" style="font-size: 144px"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.font = '50% serif'; +_assertSame(ctx.font, '72px serif', "ctx.font", "'72px serif'"); +canvas.setAttribute('style', 'font-size: 100px'); +_assertSame(ctx.font, '72px serif', "ctx.font", "'72px serif'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.system.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.system.html new file mode 100644 index 0000000000..707be4ee10 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.system.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.system</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.font.parse.system</h1> +<p class="desc">System fonts must be computed to explicit values</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("System fonts must be computed to explicit values"); +_addTest(function(canvas, ctx) { + +ctx.font = 'message-box'; +_assertDifferent(ctx.font, 'message-box', "ctx.font", "'message-box'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.tiny.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.tiny.html new file mode 100644 index 0000000000..e5215f1bc5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.parse.tiny.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.tiny</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.font.parse.tiny</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +ctx.font = '1px sans-serif'; +_assertSame(ctx.font, '1px sans-serif', "ctx.font", "'1px sans-serif'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.relative_size.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.relative_size.html new file mode 100644 index 0000000000..8040d38916 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.font.relative_size.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.relative_size</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.font.relative_size</h1> +<p class="desc"></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(""); +_addTest(function(canvas, ctx) { + +var canvas2 = document.createElement('canvas'); +var ctx2 = canvas2.getContext('2d'); +ctx2.font = '1em sans-serif'; +_assertSame(ctx2.font, '10px sans-serif', "ctx2.font", "'10px sans-serif'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.measure.width.space.html b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.measure.width.space.html new file mode 100644 index 0000000000..4d7ee4ef75 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/2d.text.measure.width.space.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.width.space</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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.measure.width.space</h1> +<p class="desc">Space characters are converted to U+0020 and collapsed (per CSS)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<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("Space characters are converted to U+0020 and collapsed (per CSS)"); +_addTest(function(canvas, ctx) { + +deferTest(); +var f = new FontFace("CanvasTest", "/fonts/CanvasTest.ttf"); +document.fonts.add(f); +document.fonts.ready.then(() => { + step_timeout(t.step_func_done(function () { + ctx.font = '50px CanvasTest'; + _assertSame(ctx.measureText('A B').width, 150, "ctx.measureText('A B').width", "150"); + _assertSame(ctx.measureText('A B').width, 200, "ctx.measureText('A B').width", "200"); + _assertSame(ctx.measureText('A \x09\x0a\x0c\x0d \x09\x0a\x0c\x0dB').width, 150, "ctx.measureText('A \\x09\\x0a\\x0c\\x0d \\x09\\x0a\\x0c\\x0dB').width", "150"); + _assert(ctx.measureText('A \x0b B').width >= 200, "ctx.measureText('A \\x0b B').width >= 200"); + + _assertSame(ctx.measureText(' AB').width, 100, "ctx.measureText(' AB').width", "100"); + _assertSame(ctx.measureText('AB ').width, 100, "ctx.measureText('AB ').width", "100"); + }), 500); +}); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text-styles/parent-style-relative-units.html b/testing/web-platform/tests/html/canvas/element/text-styles/parent-style-relative-units.html new file mode 100644 index 0000000000..ee44c0b750 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text-styles/parent-style-relative-units.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Canvas test: CanvasTextDrawingStyles.font with canvas relative units</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-font"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<canvas id="canvas" style="font-size: 30px; line-height: 40px"></canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext("2d"); + + test(() => { + ctx.font = "2em serif"; + assert_equals(ctx.font, "60px serif"); + }, "Font-size based on canvas element font-size"); + + test(() => { + // Line-height should be forced to normal, but also irrelevant for resolving + // lh-units for font-size. + ctx.font = "2lh/100 serif"; + assert_equals(ctx.font, "80px serif"); + }, "Font-size based on canvas element line-height"); +</script> |