diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas')
56 files changed, 2226 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.center.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.center.html new file mode 100644 index 0000000000..71a7cae30a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.center.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.align.center</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.align.center</h1> +<p class="desc">textAlign center is the center of the em squares (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("textAlign center is the center of the em squares (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.textAlign = 'center'; + ctx.fillText('DD', 50, 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/drawing-text-to-the-canvas/2d.text.draw.align.end.ltr.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.end.ltr.html new file mode 100644 index 0000000000..5bd7aa10b0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.end.ltr.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.align.end.ltr</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.align.end.ltr</h1> +<p class="desc">textAlign end with ltr is the right edge</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" dir="ltr"><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("textAlign end with ltr is the right edge"); +_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 = 'end'; + ctx.fillText('DD', 100, 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/drawing-text-to-the-canvas/2d.text.draw.align.end.rtl.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.end.rtl.html new file mode 100644 index 0000000000..d37a29c558 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.end.rtl.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.align.end.rtl</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.align.end.rtl</h1> +<p class="desc">textAlign end with rtl is the left edge</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" dir="rtl"><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("textAlign end with rtl is the left edge"); +_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 = 'end'; + ctx.fillText('DD', 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/drawing-text-to-the-canvas/2d.text.draw.align.left.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.left.html new file mode 100644 index 0000000000..5a4bdb6abb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.left.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.align.left</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.align.left</h1> +<p class="desc">textAlign left is the left of the first 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("textAlign left is the left of the first 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.textAlign = 'left'; + ctx.fillText('DD', 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/drawing-text-to-the-canvas/2d.text.draw.align.right.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.right.html new file mode 100644 index 0000000000..29e009e722 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.right.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.align.right</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.align.right</h1> +<p class="desc">textAlign right is the right of the last 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("textAlign right is the right of the last 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.textAlign = 'right'; + ctx.fillText('DD', 100, 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/drawing-text-to-the-canvas/2d.text.draw.align.start.ltr.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.start.ltr.html new file mode 100644 index 0000000000..d74a4b89e4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.start.ltr.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.align.start.ltr</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.align.start.ltr</h1> +<p class="desc">textAlign start with ltr is the left edge</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" dir="ltr"><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("textAlign start with ltr is the left edge"); +_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 = 'start'; + ctx.fillText('DD', 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/drawing-text-to-the-canvas/2d.text.draw.align.start.rtl.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.start.rtl.html new file mode 100644 index 0000000000..8dd671cf20 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.align.start.rtl.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.align.start.rtl</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.align.start.rtl</h1> +<p class="desc">textAlign start with rtl is the right edge</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" dir="rtl"><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("textAlign start with rtl is the right edge"); +_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 = 'start'; + ctx.fillText('DD', 100, 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/drawing-text-to-the-canvas/2d.text.draw.fill.basic-manual.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.basic-manual.html new file mode 100644 index 0000000000..3652a2191d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.basic-manual.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fill.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.draw.fill.basic</h1> +<p class="desc">fillText draws filled text</p> + + +<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="2d.text.draw.fill.basic.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("fillText draws filled text"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#000'; +ctx.fillRect(0, 0, 100, 50); +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; +ctx.font = '35px Arial, sans-serif'; +ctx.fillText('PASS', 5, 35); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.basic.png b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.basic.png Binary files differnew file mode 100644 index 0000000000..70d7b046cb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.basic.png diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.NaN.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.NaN.html new file mode 100644 index 0000000000..d33df3c78c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.NaN.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fill.maxWidth.NaN</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.draw.fill.maxWidth.NaN</h1> +<p class="desc">fillText handles maxWidth correctly</p> + + +<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("fillText handles maxWidth correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.fillStyle = '#f00'; +ctx.font = '35px Arial, sans-serif'; +ctx.fillText('fail fail fail fail fail', 5, 35, NaN); +_assertGreen(ctx, 100, 50); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.bound.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.bound.html new file mode 100644 index 0000000000..50c6729349 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.bound.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fill.maxWidth.bound</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.fill.maxWidth.bound</h1> +<p class="desc">fillText handles maxWidth based on line size, not bounding box size</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("fillText handles maxWidth based on line size, not bounding box size"); +_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('DD', 0, 37.5, 100); + _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); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.fontface.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.fontface.html new file mode 100644 index 0000000000..1e133a6736 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.fontface.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fill.maxWidth.fontface</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.fill.maxWidth.fontface</h1> +<p class="desc">fillText works on @font-face fonts</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("fillText works on @font-face fonts"); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#0f0'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#f00'; + ctx.fillText('EEEE', -50, 37.5, 40); + _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); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large-manual.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large-manual.html new file mode 100644 index 0000000000..761679ecf8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large-manual.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.draw.fill.maxWidth.large</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.draw.fill.maxWidth.large</h1> +<p class="desc">fillText handles maxWidth correctly</p> + + +<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="2d.text.draw.fill.maxWidth.large.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("fillText handles maxWidth correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#000'; +ctx.fillRect(0, 0, 100, 50); +ctx.fillStyle = '#0f0'; +ctx.font = '35px Arial, sans-serif'; +ctx.fillText('PASS', 5, 35, 200); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large.png b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large.png Binary files differnew file mode 100644 index 0000000000..70d7b046cb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large.png diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.negative.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.negative.html new file mode 100644 index 0000000000..b9febd1150 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.negative.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fill.maxWidth.negative</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.draw.fill.maxWidth.negative</h1> +<p class="desc">fillText handles maxWidth correctly</p> + + +<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("fillText handles maxWidth correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.fillStyle = '#f00'; +ctx.font = '35px Arial, sans-serif'; +ctx.fillText('fail fail fail fail fail', 5, 35, -1); +_assertGreen(ctx, 100, 50); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.small.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.small.html new file mode 100644 index 0000000000..0d7b8ff2fb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.small.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fill.maxWidth.small</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.draw.fill.maxWidth.small</h1> +<p class="desc">fillText handles maxWidth correctly</p> + + +<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("fillText handles maxWidth correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.fillStyle = '#f00'; +ctx.font = '35px Arial, sans-serif'; +ctx.fillText('fail fail fail fail fail', -100, 35, 90); +_assertGreen(ctx, 100, 50); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.zero.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.zero.html new file mode 100644 index 0000000000..64a3fdc5a7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.zero.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fill.maxWidth.zero</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.draw.fill.maxWidth.zero</h1> +<p class="desc">fillText handles maxWidth correctly</p> + + +<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("fillText handles maxWidth correctly"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.fillStyle = '#f00'; +ctx.font = '35px Arial, sans-serif'; +ctx.fillText('fail fail fail fail fail', 5, 35, 0); +_assertGreen(ctx, 100, 50); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.rtl-manual.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.rtl-manual.html new file mode 100644 index 0000000000..07eeeb497a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.rtl-manual.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fill.rtl</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.draw.fill.rtl</h1> +<p class="desc">fillText respects Right-To-Left Override characters</p> + + +<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="2d.text.draw.fill.rtl.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("fillText respects Right-To-Left Override characters"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#000'; +ctx.fillRect(0, 0, 100, 50); +ctx.fillStyle = '#0f0'; +ctx.strokeStyle = '#f00'; +ctx.font = '35px Arial, sans-serif'; +ctx.fillText('\u202eFAIL \xa0 \xa0 SSAP', 5, 35); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.rtl.png b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.rtl.png Binary files differnew file mode 100644 index 0000000000..70d7b046cb --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.rtl.png diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.unaffected.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.unaffected.html new file mode 100644 index 0000000000..cb1e7dbae0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fill.unaffected.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fill.unaffected</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.draw.fill.unaffected</h1> +<p class="desc">fillText does not start a new path or subpath</p> + + +<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("fillText does not start a new path or subpath"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); + +ctx.moveTo(0, 0); +ctx.lineTo(100, 0); + +ctx.font = '35px Arial, sans-serif'; +ctx.fillText('FAIL', 5, 35); + +ctx.lineTo(100, 50); +ctx.lineTo(0, 50); +ctx.fillStyle = '#0f0'; +ctx.fill(); + +_assertPixel(canvas, 50,25, 0,255,0,255); +_assertPixel(canvas, 5,45, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fontface.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fontface.html new file mode 100644 index 0000000000..9adcf3560d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fontface.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fontface</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.fontface</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 = '67px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.fillText('AA', 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); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fontface.notinpage.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fontface.notinpage.html new file mode 100644 index 0000000000..6ccb0c020a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fontface.notinpage.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.fontface.notinpage</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.fontface.notinpage</h1> +<p class="desc">@font-face fonts should work even if they are not used in the page</p> + + +<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("@font-face fonts should work even if they are not used in the page"); +_addTest(function(canvas, ctx) { + +ctx.font = '67px CanvasTest'; +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.fillText('AA', 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); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fontface.repeat.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fontface.repeat.html new file mode 100644 index 0000000000..457c48c3d1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.fontface.repeat.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.fontface.repeat</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.fontface.repeat</h1> +<p class="desc">Draw with the font immediately, then wait a bit until and draw again. (This crashes some version of WebKit.)</p> + + +<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("Draw with the font immediately, then wait a bit until and draw again. (This crashes some version of WebKit.)"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); +ctx.font = '67px CanvasTest'; +ctx.fillStyle = '#0f0'; +ctx.fillText('AA', 0, 50); +deferTest(); +step_timeout(t.step_func_done(function () { + ctx.fillText('AA', 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); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.kern.consistent-manual.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.kern.consistent-manual.html new file mode 100644 index 0000000000..f27c2a7c24 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.kern.consistent-manual.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.kern.consistent</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.draw.kern.consistent</h1> +<p class="desc">Stroked and filled text should have exactly the same kerning so it overlaps</p> + + +<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("Stroked and filled text should have exactly the same kerning so it overlaps"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 50); +ctx.fillStyle = '#f00'; +ctx.strokeStyle = '#0f0'; +ctx.lineWidth = 3; +ctx.font = '20px Arial, sans-serif'; +ctx.fillText('VAVAVAVAVAVAVA', -50, 25); +ctx.fillText('ToToToToToToTo', -50, 45); +ctx.strokeText('VAVAVAVAVAVAVA', -50, 25); +ctx.strokeText('ToToToToToToTo', -50, 45); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.space.basic.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.space.basic.html new file mode 100644 index 0000000000..26f8114e20 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.space.basic.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.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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.space.basic</h1> +<p class="desc">U+0020 is rendered the correct size (1em wide)</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("U+0020 is rendered the correct size (1em wide)"); +_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/drawing-text-to-the-canvas/2d.text.draw.space.collapse.nonspace.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.space.collapse.nonspace.html new file mode 100644 index 0000000000..e105ec358e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.space.collapse.nonspace.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.nonspace</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.nonspace</h1> +<p class="desc">Non-space characters are not converted to U+0020 and collapsed</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("Non-space characters are not converted to U+0020 and collapsed"); +_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\x0b EE', -150, 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/drawing-text-to-the-canvas/2d.text.draw.stroke.basic-manual.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.stroke.basic-manual.html new file mode 100644 index 0000000000..4481a0d25a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.stroke.basic-manual.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.stroke.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.draw.stroke.basic</h1> +<p class="desc">strokeText draws stroked text</p> + + +<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="2d.text.draw.stroke.basic.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test("strokeText draws stroked text"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#000'; +ctx.fillRect(0, 0, 100, 50); +ctx.strokeStyle = '#0f0'; +ctx.fillStyle = '#f00'; +ctx.lineWidth = 1; +ctx.font = '35px Arial, sans-serif'; +ctx.strokeText('PASS', 5, 35); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.stroke.basic.png b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.stroke.basic.png Binary files differnew file mode 100644 index 0000000000..fb3b5b830d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.stroke.basic.png diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.stroke.unaffected.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.stroke.unaffected.html new file mode 100644 index 0000000000..728765c1fe --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.draw.stroke.unaffected.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.stroke.unaffected</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.draw.stroke.unaffected</h1> +<p class="desc">strokeText does not start a new path or subpath</p> + + +<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("strokeText does not start a new path or subpath"); +_addTest(function(canvas, ctx) { + +ctx.fillStyle = '#f00'; +ctx.fillRect(0, 0, 100, 50); + +ctx.moveTo(0, 0); +ctx.lineTo(100, 0); + +ctx.font = '35px Arial, sans-serif'; +ctx.strokeStyle = '#f00'; +ctx.strokeText('FAIL', 5, 35); + +ctx.lineTo(100, 50); +ctx.lineTo(0, 50); +ctx.fillStyle = '#0f0'; +ctx.fill(); + +_assertPixel(canvas, 50,25, 0,255,0,255); +_assertPixel(canvas, 5,45, 0,255,0,255); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontKerning.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontKerning.html new file mode 100644 index 0000000000..f6c3826317 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontKerning.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.drawing.style.fontKerning</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.fontKerning</h1> +<p class="desc">Testing basic functionalities of fontKerning for canvas</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 basic functionalities of fontKerning for canvas"); +_addTest(function(canvas, ctx) { + +_assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\""); +ctx.fontKerning = "normal"; +_assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\""); +width_normal = ctx.measureText("TAWATAVA").width; +ctx.fontKerning = "none"; +_assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\""); +width_none = ctx.measureText("TAWATAVA").width; +_assert(width_normal < width_none, "width_normal < width_none"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontKerning.with.uppercase.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontKerning.with.uppercase.html new file mode 100644 index 0000000000..db62fbe81a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontKerning.with.uppercase.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.drawing.style.fontKerning.with.uppercase</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.fontKerning.with.uppercase</h1> +<p class="desc">Testing basic functionalities of fontKerning for canvas</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 basic functionalities of fontKerning for canvas"); +_addTest(function(canvas, ctx) { + +_assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\""); +ctx.fontKerning = "Normal"; +_assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\""); +ctx.fontKerning = "Auto"; +ctx.fontKerning = "normal"; +_assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\""); +ctx.fontKerning = "Auto"; +ctx.fontKerning = "noRmal"; +_assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\""); +ctx.fontKerning = "Auto"; +ctx.fontKerning = "NoRMal"; +_assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\""); +ctx.fontKerning = "Auto"; +ctx.fontKerning = "NORMAL"; +_assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\""); + +ctx.fontKerning = "None"; +_assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\""); +ctx.fontKerning = "Auto"; +ctx.fontKerning = "none"; +_assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\""); +ctx.fontKerning = "Auto"; +ctx.fontKerning = "nOne"; +_assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\""); +ctx.fontKerning = "Auto"; +ctx.fontKerning = "nonE"; +_assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\""); +ctx.fontKerning = "Auto"; +ctx.fontKerning = "NONE"; +_assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\""); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontVariant.settings.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontVariant.settings.html new file mode 100644 index 0000000000..6fdd1454b2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.fontVariant.settings.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.drawing.style.fontVariant.settings</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.fontVariant.settings</h1> +<p class="desc">Testing basic functionalities of fontKerning for canvas</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 basic functionalities of fontKerning for canvas"); +_addTest(function(canvas, ctx) { + +// Setting fontVariantCaps with lower cases +_assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + +ctx.fontVariantCaps = "normal"; +_assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + +ctx.fontVariantCaps = "small-caps"; +_assertSame(ctx.fontVariantCaps, "small-caps", "ctx.fontVariantCaps", "\"small-caps\""); + +ctx.fontVariantCaps = "all-small-caps"; +_assertSame(ctx.fontVariantCaps, "all-small-caps", "ctx.fontVariantCaps", "\"all-small-caps\""); + +ctx.fontVariantCaps = "petite-caps"; +_assertSame(ctx.fontVariantCaps, "petite-caps", "ctx.fontVariantCaps", "\"petite-caps\""); + +ctx.fontVariantCaps = "all-petite-caps"; +_assertSame(ctx.fontVariantCaps, "all-petite-caps", "ctx.fontVariantCaps", "\"all-petite-caps\""); + +ctx.fontVariantCaps = "unicase"; +_assertSame(ctx.fontVariantCaps, "unicase", "ctx.fontVariantCaps", "\"unicase\""); + +ctx.fontVariantCaps = "titling-caps"; +_assertSame(ctx.fontVariantCaps, "titling-caps", "ctx.fontVariantCaps", "\"titling-caps\""); + +// Setting fontVariantCaps with lower cases and upper cases word. +ctx.fontVariantCaps = "nORmal"; +_assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + +ctx.fontVariantCaps = "smaLL-caps"; +_assertSame(ctx.fontVariantCaps, "small-caps", "ctx.fontVariantCaps", "\"small-caps\""); + +ctx.fontVariantCaps = "all-small-CAPS"; +_assertSame(ctx.fontVariantCaps, "all-small-caps", "ctx.fontVariantCaps", "\"all-small-caps\""); + +ctx.fontVariantCaps = "pEtitE-caps"; +_assertSame(ctx.fontVariantCaps, "petite-caps", "ctx.fontVariantCaps", "\"petite-caps\""); + +ctx.fontVariantCaps = "All-Petite-Caps"; +_assertSame(ctx.fontVariantCaps, "all-petite-caps", "ctx.fontVariantCaps", "\"all-petite-caps\""); + +ctx.fontVariantCaps = "uNIcase"; +_assertSame(ctx.fontVariantCaps, "unicase", "ctx.fontVariantCaps", "\"unicase\""); + +ctx.fontVariantCaps = "titling-CAPS"; +_assertSame(ctx.fontVariantCaps, "titling-caps", "ctx.fontVariantCaps", "\"titling-caps\""); + +// Setting fontVariantCaps with non-existing font variant. +ctx.fontVariantCaps = "abcd"; +_assertSame(ctx.fontVariantCaps, "titling-caps", "ctx.fontVariantCaps", "\"titling-caps\""); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.invalid.spacing.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.invalid.spacing.html new file mode 100644 index 0000000000..61ca6d4a91 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.invalid.spacing.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.drawing.style.invalid.spacing</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.invalid.spacing</h1> +<p class="desc">Testing letter spacing and word spacing with invalid units</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 with invalid units"); +_addTest(function(canvas, ctx) { + +_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'"); +_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'"); + +function test_word_spacing(value) { + ctx.wordSpacing = value; + ctx.letterSpacing = value; + _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'"); + _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'"); +} +test_word_spacing('0s'); +test_word_spacing('1min'); +test_word_spacing('1deg'); +test_word_spacing('1pp'); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.letterSpacing.change.font.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.letterSpacing.change.font.html new file mode 100644 index 0000000000..5b42b89e32 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.letterSpacing.change.font.html @@ -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> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.letterSpacing.measure.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.letterSpacing.measure.html new file mode 100644 index 0000000000..fadfaaf201 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.letterSpacing.measure.html @@ -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> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.nonfinite.spacing.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.nonfinite.spacing.html new file mode 100644 index 0000000000..f197d22afa --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.nonfinite.spacing.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.drawing.style.nonfinite.spacing</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.nonfinite.spacing</h1> +<p class="desc">Testing letter spacing and word spacing with nonfinite inputs</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 with nonfinite inputs"); +_addTest(function(canvas, ctx) { + +_assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'"); +_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'"); + +function test_word_spacing(value) { + ctx.wordSpacing = value; + ctx.letterSpacing = value; + _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'"); + _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'"); +} +test_word_spacing(NaN); +test_word_spacing(Infinity); +test_word_spacing(-Infinity); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.spacing.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.spacing.html new file mode 100644 index 0000000000..b5a411e1db --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.spacing.html @@ -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.spacing</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</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'"); + +ctx.letterSpacing = '3px'; +_assertSame(ctx.letterSpacing, '3px', "ctx.letterSpacing", "'3px'"); +_assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'"); + +ctx.wordSpacing = '5px'; +_assertSame(ctx.letterSpacing, '3px', "ctx.letterSpacing", "'3px'"); +_assertSame(ctx.wordSpacing, '5px', "ctx.wordSpacing", "'5px'"); + +ctx.letterSpacing = '-1px'; +ctx.wordSpacing = '-1px'; +_assertSame(ctx.letterSpacing, '-1px', "ctx.letterSpacing", "'-1px'"); +_assertSame(ctx.wordSpacing, '-1px', "ctx.wordSpacing", "'-1px'"); + +ctx.letterSpacing = '1PX'; +ctx.wordSpacing = '1EM'; +_assertSame(ctx.letterSpacing, '1px', "ctx.letterSpacing", "'1px'"); +_assertSame(ctx.wordSpacing, '1em', "ctx.wordSpacing", "'1em'"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.textRendering.settings.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.textRendering.settings.html new file mode 100644 index 0000000000..f6634ee1a0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.textRendering.settings.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.drawing.style.textRendering.settings</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.textRendering.settings</h1> +<p class="desc">Testing basic functionalities of textRendering in Canvas</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 basic functionalities of textRendering in Canvas"); +_addTest(function(canvas, ctx) { + +// Setting textRendering with lower cases +_assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + +ctx.textRendering = "auto"; +_assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + +ctx.textRendering = "optimizespeed"; +_assertSame(ctx.textRendering, "optimizeSpeed", "ctx.textRendering", "\"optimizeSpeed\""); + +ctx.textRendering = "optimizelegibility"; +_assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\""); + +ctx.textRendering = "geometricprecision"; +_assertSame(ctx.textRendering, "geometricPrecision", "ctx.textRendering", "\"geometricPrecision\""); + +// Setting textRendering with lower cases and upper cases word. +ctx.textRendering = "aUto"; +_assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + +ctx.textRendering = "OPtimizeSpeed"; +_assertSame(ctx.textRendering, "optimizeSpeed", "ctx.textRendering", "\"optimizeSpeed\""); + +ctx.textRendering = "OPtimizELEgibility"; +_assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\""); + +ctx.textRendering = "GeometricPrecision"; +_assertSame(ctx.textRendering, "geometricPrecision", "ctx.textRendering", "\"geometricPrecision\""); + +// Setting textRendering with non-existing font variant. +ctx.textRendering = "abcd"; +_assertSame(ctx.textRendering, "geometricPrecision", "ctx.textRendering", "\"geometricPrecision\""); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.wordSpacing.change.font.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.wordSpacing.change.font.html new file mode 100644 index 0000000000..d29bc8ec20 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.wordSpacing.change.font.html @@ -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> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.wordSpacing.measure.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.wordSpacing.measure.html new file mode 100644 index 0000000000..4cd3c237cd --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.drawing.style.wordSpacing.measure.html @@ -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> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.actualBoundingBox.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.actualBoundingBox.html new file mode 100644 index 0000000000..44cff25d1a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.actualBoundingBox.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.actualBoundingBox</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.actualBoundingBox</h1> +<p class="desc">Testing actualBoundingBox</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("Testing actualBoundingBox"); +_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'; + ctx.direction = 'ltr'; + ctx.align = 'left' + ctx.baseline = 'alphabetic' + // Different platforms may render text slightly different. + // Values that are nominally expected to be zero might actually vary by a pixel or so + // if the UA accounts for antialiasing at glyph edges, so we allow a slight deviation. + _assert(Math.abs(ctx.measureText('A').actualBoundingBoxLeft) <= 1, "Math.abs(ctx.measureText('A').actualBoundingBoxLeft) <= 1"); + _assert(ctx.measureText('A').actualBoundingBoxRight >= 50, "ctx.measureText('A').actualBoundingBoxRight >= 50"); + _assert(ctx.measureText('A').actualBoundingBoxAscent >= 35, "ctx.measureText('A').actualBoundingBoxAscent >= 35"); + _assert(Math.abs(ctx.measureText('A').actualBoundingBoxDescent) <= 1, "Math.abs(ctx.measureText('A').actualBoundingBoxDescent) <= 1"); + + _assert(ctx.measureText('D').actualBoundingBoxLeft >= 48, "ctx.measureText('D').actualBoundingBoxLeft >= 48"); + _assert(ctx.measureText('D').actualBoundingBoxLeft <= 52, "ctx.measureText('D').actualBoundingBoxLeft <= 52"); + _assert(ctx.measureText('D').actualBoundingBoxRight >= 75, "ctx.measureText('D').actualBoundingBoxRight >= 75"); + _assert(ctx.measureText('D').actualBoundingBoxRight <= 80, "ctx.measureText('D').actualBoundingBoxRight <= 80"); + _assert(ctx.measureText('D').actualBoundingBoxAscent >= 35, "ctx.measureText('D').actualBoundingBoxAscent >= 35"); + _assert(ctx.measureText('D').actualBoundingBoxAscent <= 40, "ctx.measureText('D').actualBoundingBoxAscent <= 40"); + _assert(ctx.measureText('D').actualBoundingBoxDescent >= 12, "ctx.measureText('D').actualBoundingBoxDescent >= 12"); + _assert(ctx.measureText('D').actualBoundingBoxDescent <= 15, "ctx.measureText('D').actualBoundingBoxDescent <= 15"); + + _assert(Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft) <= 1, "Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft) <= 1"); + _assert(ctx.measureText('ABCD').actualBoundingBoxRight >= 200, "ctx.measureText('ABCD').actualBoundingBoxRight >= 200"); + _assert(ctx.measureText('ABCD').actualBoundingBoxAscent >= 85, "ctx.measureText('ABCD').actualBoundingBoxAscent >= 85"); + _assert(ctx.measureText('ABCD').actualBoundingBoxDescent >= 37, "ctx.measureText('ABCD').actualBoundingBoxDescent >= 37"); + }), 500); +}); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.advances.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.advances.html new file mode 100644 index 0000000000..e7039c7879 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.advances.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.advances</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.advances</h1> +<p class="desc">Testing width advances</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("Testing width advances"); +_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'; + ctx.direction = 'ltr'; + ctx.align = 'left' + // Some platforms may return '-0'. + _assertSame(Math.abs(ctx.measureText('Hello').advances[0]), 0, "Math.abs(ctx.measureText('Hello').advances[\""+(0)+"\"])", "0"); + // Different platforms may render text slightly different. + _assert(ctx.measureText('Hello').advances[1] >= 36, "ctx.measureText('Hello').advances[\""+(1)+"\"] >= 36"); + _assert(ctx.measureText('Hello').advances[2] >= 58, "ctx.measureText('Hello').advances[\""+(2)+"\"] >= 58"); + _assert(ctx.measureText('Hello').advances[3] >= 70, "ctx.measureText('Hello').advances[\""+(3)+"\"] >= 70"); + _assert(ctx.measureText('Hello').advances[4] >= 80, "ctx.measureText('Hello').advances[\""+(4)+"\"] >= 80"); + + var tm = ctx.measureText('Hello'); + _assertSame(ctx.measureText('Hello').advances[0], tm.advances[0], "ctx.measureText('Hello').advances[\""+(0)+"\"]", "tm.advances[\""+(0)+"\"]"); + _assertSame(ctx.measureText('Hello').advances[1], tm.advances[1], "ctx.measureText('Hello').advances[\""+(1)+"\"]", "tm.advances[\""+(1)+"\"]"); + _assertSame(ctx.measureText('Hello').advances[2], tm.advances[2], "ctx.measureText('Hello').advances[\""+(2)+"\"]", "tm.advances[\""+(2)+"\"]"); + _assertSame(ctx.measureText('Hello').advances[3], tm.advances[3], "ctx.measureText('Hello').advances[\""+(3)+"\"]", "tm.advances[\""+(3)+"\"]"); + _assertSame(ctx.measureText('Hello').advances[4], tm.advances[4], "ctx.measureText('Hello').advances[\""+(4)+"\"]", "tm.advances[\""+(4)+"\"]"); + }), 500); +}); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.baselines.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.baselines.html new file mode 100644 index 0000000000..812949e25f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.baselines.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.baselines</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.baselines</h1> +<p class="desc">Testing baselines</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("Testing baselines"); +_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'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(Math.abs(ctx.measureText('A').getBaselines().alphabetic), 0, "Math.abs(ctx.measureText('A').getBaselines().alphabetic)", "0"); + _assertSame(ctx.measureText('A').getBaselines().ideographic, -39, "ctx.measureText('A').getBaselines().ideographic", "-39"); + _assertSame(ctx.measureText('A').getBaselines().hanging, 68, "ctx.measureText('A').getBaselines().hanging", "68"); + + _assertSame(Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic), 0, "Math.abs(ctx.measureText('ABCD').getBaselines().alphabetic)", "0"); + _assertSame(ctx.measureText('ABCD').getBaselines().ideographic, -39, "ctx.measureText('ABCD').getBaselines().ideographic", "-39"); + _assertSame(ctx.measureText('ABCD').getBaselines().hanging, 68, "ctx.measureText('ABCD').getBaselines().hanging", "68"); + }), 500); +}); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.boundingBox.direction.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.boundingBox.direction.html new file mode 100644 index 0000000000..4387b6ca97 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.boundingBox.direction.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.boundingBox.direction</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.measure.boundingBox.direction</h1> +<p class="desc">Measurement should follow text direction</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("Measurement should follow text direction"); +_addTest(function(canvas, ctx) { + +ctx.direction = "ltr"; +metrics = ctx.measureText('hello'); +_assert(metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight"); + +ctx.direction = "rtl"; +metrics = ctx.measureText('hello'); +_assert(metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.boundingBox.textAlign.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.boundingBox.textAlign.html new file mode 100644 index 0000000000..65c030936b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.boundingBox.textAlign.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.boundingBox.textAlign</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.measure.boundingBox.textAlign</h1> +<p class="desc">Measurement should be related to textAlignment</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("Measurement should be related to textAlignment"); +_addTest(function(canvas, ctx) { + +ctx.textAlign = "right"; +metrics = ctx.measureText('hello'); +_assert(metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight"); + +ctx.textAlign = "left" +metrics = ctx.measureText('hello'); +_assert(metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.emHeights.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.emHeights.html new file mode 100644 index 0000000000..7a4b779543 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.emHeights.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.emHeights</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.emHeights</h1> +<p class="desc">Testing emHeights</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("Testing emHeights"); +_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'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(ctx.measureText('A').emHeightAscent, 37.5, "ctx.measureText('A').emHeightAscent", "37.5"); + _assertSame(ctx.measureText('A').emHeightDescent, 12.5, "ctx.measureText('A').emHeightDescent", "12.5"); + _assertSame(ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent, 50, "ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent", "50"); + + _assertSame(ctx.measureText('ABCD').emHeightAscent, 37.5, "ctx.measureText('ABCD').emHeightAscent", "37.5"); + _assertSame(ctx.measureText('ABCD').emHeightDescent, 12.5, "ctx.measureText('ABCD').emHeightDescent", "12.5"); + _assertSame(ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent, 50, "ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent", "50"); + }), 500); +}); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.fontBoundingBox.ahem.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.fontBoundingBox.ahem.html new file mode 100644 index 0000000000..7af141ac8e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.fontBoundingBox.ahem.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.fontBoundingBox.ahem</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: Ahem; + src: url("/fonts/Ahem.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.measure.fontBoundingBox.ahem</h1> +<p class="desc">Testing fontBoundingBox for font ahem</p> + + +<span style="font-family: Ahem; 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("Testing fontBoundingBox for font ahem"); +_addTest(function(canvas, ctx) { + +deferTest(); +var f = new FontFace("Ahem", "/fonts/Ahem.ttf"); +document.fonts.add(f); +document.fonts.ready.then(() => { + step_timeout(t.step_func_done(function () { + ctx.font = '50px Ahem'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 40, "ctx.measureText('A').fontBoundingBoxAscent", "40"); + _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 10, "ctx.measureText('A').fontBoundingBoxDescent", "10"); + + _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 40, "ctx.measureText('ABCD').fontBoundingBoxAscent", "40"); + _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 10, "ctx.measureText('ABCD').fontBoundingBoxDescent", "10"); + }), 500); +}); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.fontBoundingBox.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.fontBoundingBox.html new file mode 100644 index 0000000000..6cdd7b8cf3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.fontBoundingBox.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.fontBoundingBox</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.fontBoundingBox</h1> +<p class="desc">Testing fontBoundingBox</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("Testing fontBoundingBox"); +_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'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 85, "ctx.measureText('A').fontBoundingBoxAscent", "85"); + _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 39, "ctx.measureText('A').fontBoundingBoxDescent", "39"); + + _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 85, "ctx.measureText('ABCD').fontBoundingBoxAscent", "85"); + _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 39, "ctx.measureText('ABCD').fontBoundingBoxDescent", "39"); + }), 500); +}); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.rtl.text.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.rtl.text.html new file mode 100644 index 0000000000..539eab0715 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.rtl.text.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.rtl.text</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.rtl.text</h1> +<p class="desc">Measurement should follow canvas direction instead text direction</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("Measurement should follow canvas direction instead text direction"); +_addTest(function(canvas, ctx) { + +metrics = ctx.measureText('اَلْعَرَبِيَّةُ'); +_assert(metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight"); + +metrics = ctx.measureText('hello'); +_assert(metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight"); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.width.basic.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.width.basic.html new file mode 100644 index 0000000000..4c528ed06a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.width.basic.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.width.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"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.measure.width.basic</h1> +<p class="desc">The width of character is same as font used</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("The width of character is same as font used"); +_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').width, 50, "ctx.measureText('A').width", "50"); + _assertSame(ctx.measureText('AA').width, 100, "ctx.measureText('AA').width", "100"); + _assertSame(ctx.measureText('ABCD').width, 200, "ctx.measureText('ABCD').width", "200"); + + ctx.font = '100px CanvasTest'; + _assertSame(ctx.measureText('A').width, 100, "ctx.measureText('A').width", "100"); + }), 500); +}); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.width.empty.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.width.empty.html new file mode 100644 index 0000000000..8368631422 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/2d.text.measure.width.empty.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.width.empty</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.empty</h1> +<p class="desc">The empty string has zero width</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("The empty string has zero width"); +_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("").width, 0, "ctx.measureText(\"\").width", "0"); + }), 500); +}); + + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/direction-inherit-rtl.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/direction-inherit-rtl.html new file mode 100644 index 0000000000..0ad92181a0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/direction-inherit-rtl.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>HTML Canvas Test: the 'direction' property</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"> +<link rel="match" href="reference/direction-rtl-ref.html"> +<meta name="assert" content="text rendering respects the direction property"> +<style> +canvas { + margin: 10px; + border: 1px solid gray; +} +</style> + +<canvas id="c" width="300" height="300" dir="rtl"></canvas> + +<script> +let ctx = c.getContext("2d"); +ctx.direction = "inherit"; +ctx.font = "16px sans-serif"; +ctx.textAlign = "left"; +ctx.fillText("Hello World!", 150, 50); +ctx.textAlign = "right"; +ctx.fillText("Hello World!", 150, 100); +ctx.textAlign = "start"; +ctx.fillText("Hello World!", 150, 150); +ctx.textAlign = "end"; +ctx.fillText("Hello World!", 150, 200); +ctx.textAlign = "center"; +ctx.fillText("Hello World!", 150, 250); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/direction-ltr.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/direction-ltr.html new file mode 100644 index 0000000000..42a39ac589 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/direction-ltr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>HTML Canvas Test: the 'direction' property</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"> +<link rel="match" href="reference/direction-default-ref.html"> +<meta name="assert" content="text rendering respects the direction property"> +<style> +canvas { + margin: 10px; + border: 1px solid gray; +} +</style> + +<canvas id="c" width="300" height="300" dir="rtl"></canvas> + +<script> +let ctx = c.getContext("2d"); +ctx.direction = "ltr"; +ctx.font = "16px sans-serif"; +ctx.textAlign = "left"; +ctx.fillText("Hello World!", 150, 50); +ctx.textAlign = "right"; +ctx.fillText("Hello World!", 150, 100); +ctx.textAlign = "start"; +ctx.fillText("Hello World!", 150, 150); +ctx.textAlign = "end"; +ctx.fillText("Hello World!", 150, 200); +ctx.textAlign = "center"; +ctx.fillText("Hello World!", 150, 250); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/direction-rtl.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/direction-rtl.html new file mode 100644 index 0000000000..3cc67c69f5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/direction-rtl.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>HTML Canvas Test: the 'direction' property</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"> +<link rel="match" href="reference/direction-rtl-ref.html"> +<meta name="assert" content="text rendering respects the direction property"> +<style> +canvas { + margin: 10px; + border: 1px solid gray; +} +</style> + +<canvas id="c" width="300" height="300"></canvas> + +<script> +let ctx = c.getContext("2d"); +ctx.direction = "rtl"; +ctx.font = "16px sans-serif"; +ctx.textAlign = "left"; +ctx.fillText("Hello World!", 150, 50); +ctx.textAlign = "right"; +ctx.fillText("Hello World!", 150, 100); +ctx.textAlign = "start"; +ctx.fillText("Hello World!", 150, 150); +ctx.textAlign = "end"; +ctx.fillText("Hello World!", 150, 200); +ctx.textAlign = "center"; +ctx.fillText("Hello World!", 150, 250); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/reference/direction-default-ref.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/reference/direction-default-ref.html new file mode 100644 index 0000000000..cef6df259c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/reference/direction-default-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>HTML Canvas Reference: the 'direction' property</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<style> +canvas { + margin: 10px; + border: 1px solid gray; +} +</style> + +<canvas id="c" width="300" height="300"></canvas> + +<script> +let ctx = c.getContext("2d"); +ctx.font = "16px sans-serif"; +ctx.textAlign = "left"; +ctx.fillText("Hello World!", 150, 50); +ctx.textAlign = "right"; +ctx.fillText("Hello World!", 150, 100); +ctx.textAlign = "start"; +ctx.fillText("Hello World!", 150, 150); +ctx.textAlign = "end"; +ctx.fillText("Hello World!", 150, 200); +ctx.textAlign = "center"; +ctx.fillText("Hello World!", 150, 250); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/reference/direction-rtl-ref.html b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/reference/direction-rtl-ref.html new file mode 100644 index 0000000000..010526d667 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/drawing-text-to-the-canvas/reference/direction-rtl-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>HTML Canvas Reference: the 'direction' property</title> +<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> +<style> +canvas { + margin: 10px; + border: 1px solid gray; +} +</style> + +<canvas id="c" width="300" height="300"></canvas> + +<script> +let ctx = c.getContext("2d"); +ctx.font = "16px sans-serif"; +ctx.textAlign = "left"; +ctx.fillText("!Hello World", 150, 50); +ctx.textAlign = "right"; +ctx.fillText("!Hello World", 150, 100); +ctx.textAlign = "right"; +ctx.fillText("!Hello World", 150, 150); +ctx.textAlign = "left"; +ctx.fillText("!Hello World", 150, 200); +ctx.textAlign = "center"; +ctx.fillText("!Hello World", 150, 250); +</script> |
