diff options
Diffstat (limited to 'testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas')
33 files changed, 1152 insertions, 0 deletions
diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/.gitkeep b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/.gitkeep diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.center.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.center.html new file mode 100644 index 000000000..bcbdbd665 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, "95,45", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.end.ltr.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.end.ltr.html new file mode 100644 index 000000000..681085859 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, "95,45", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.end.rtl.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.end.rtl.html new file mode 100644 index 000000000..1ccd2bccb --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, "95,45", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.left.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.left.html new file mode 100644 index 000000000..5e7418e36 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, "95,45", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.right.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.right.html new file mode 100644 index 000000000..81e3acf36 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, "95,45", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.start.ltr.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.start.ltr.html new file mode 100644 index 000000000..f47ef78a7 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, "95,45", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.start.rtl.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.align.start.rtl.html new file mode 100644 index 000000000..cc09b9e4d --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, "95,45", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.baseline.alphabetic.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.baseline.alphabetic.html new file mode 100644 index 000000000..bdb65ab90 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.baseline.alphabetic.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. --> +<title>Canvas test: 2d.text.draw.baseline.alphabetic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.alphabetic</h1> +<p class="desc"></p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + +ctx.font = '50px CanvasTest'; +deferTest(); +setTimeout(t.step_func_done(function () { + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'alphabetic'; + ctx.fillText('CC', 0, 37.5); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, "95,45", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.basic-manual.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.basic-manual.html new file mode 100644 index 000000000..5a4be6d37 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.basic.png b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.basic.png Binary files differnew file mode 100644 index 000000000..deaef2c95 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.basic.png diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.NaN.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.NaN.html new file mode 100644 index 000000000..28647ac55 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.bound.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.bound.html new file mode 100644 index 000000000..3282f273e --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.fontface.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.fontface.html new file mode 100644 index 000000000..d138047f6 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large-manual.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large-manual.html new file mode 100644 index 000000000..5f599c84d --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large.png b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large.png Binary files differnew file mode 100644 index 000000000..deaef2c95 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.large.png diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.negative.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.negative.html new file mode 100644 index 000000000..a6ec4f290 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.small.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.small.html new file mode 100644 index 000000000..d0364d872 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.zero.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.maxWidth.zero.html new file mode 100644 index 000000000..176e43197 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.rtl-manual.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.rtl-manual.html new file mode 100644 index 000000000..1066b837d --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.rtl.png b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.rtl.png Binary files differnew file mode 100644 index 000000000..deaef2c95 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.rtl.png diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.unaffected.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fill.unaffected.html new file mode 100644 index 000000000..a7ddee418 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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, "50,25", "0,255,0,255"); +_assertPixel(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fontface.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fontface.html new file mode 100644 index 000000000..7bfbb7feb --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fontface.notinpage.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fontface.notinpage.html new file mode 100644 index 000000000..6c4eb4919 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fontface.repeat.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.fontface.repeat.html new file mode 100644 index 000000000..30cfb4c7f --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(t.step_func_done(function () { + ctx.fillText('AA', 0, 50); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, "5,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, "95,5", "0,255,0,255", 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.kern.consistent-manual.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.kern.consistent-manual.html new file mode 100644 index 000000000..12618f4f6 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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/2dcontext/drawing-text-to-the-canvas/2d.text.draw.space.basic.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.space.basic.html new file mode 100644 index 000000000..046ce7c7a --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.space.collapse.nonspace.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.space.collapse.nonspace.html new file mode 100644 index 000000000..9dd441ade --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(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, "25,25", "0,255,0,255", 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, "75,25", "0,255,0,255", 2); +}), 500); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.stroke.basic-manual.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.stroke.basic-manual.html new file mode 100644 index 000000000..f9eac1f62 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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/2dcontext/drawing-text-to-the-canvas/2d.text.draw.stroke.basic.png b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.stroke.basic.png Binary files differnew file mode 100644 index 000000000..fe1b43b46 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.stroke.basic.png diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.stroke.unaffected.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.draw.stroke.unaffected.html new file mode 100644 index 000000000..1da4d9277 --- /dev/null +++ b/testing/web-platform/tests/2dcontext/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 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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, "50,25", "0,255,0,255"); +_assertPixel(canvas, 5,45, 0,255,0,255, "5,45", "0,255,0,255"); + + +}); +</script> + diff --git a/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.measure.width.basic.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.measure.width.basic.html new file mode 100644 index 000000000..40b43dece --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.measure.width.basic.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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"></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(""); +_addTest(function(canvas, ctx) { + +deferTest(); +setTimeout(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/2dcontext/drawing-text-to-the-canvas/2d.text.measure.width.empty.html b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.measure.width.empty.html new file mode 100644 index 000000000..67a9b405a --- /dev/null +++ b/testing/web-platform/tests/2dcontext/drawing-text-to-the-canvas/2d.text.measure.width.empty.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by 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="/common/canvas-tests.js"></script> +<link rel="stylesheet" href="/common/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(); +setTimeout(t.step_func_done(function () { + ctx.font = '50px CanvasTest'; + _assertSame(ctx.measureText("").width, 0, "ctx.measureText(\"\").width", "0"); +}), 500); + + +}); +</script> + |
