diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/text')
104 files changed, 3808 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.align.default.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.default.html new file mode 100644 index 0000000000..d32f7831d0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.default.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.align.default</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.align.default</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.align.invalid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.invalid.html new file mode 100644 index 0000000000..7b7f33766a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.invalid.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.align.invalid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.align.invalid</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.textAlign = 'start'; + ctx.textAlign = 'bogus'; + _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + + ctx.textAlign = 'start'; + ctx.textAlign = 'END'; + _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + + ctx.textAlign = 'start'; + ctx.textAlign = 'end '; + _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + + ctx.textAlign = 'start'; + ctx.textAlign = 'end\0'; + _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.align.valid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.valid.html new file mode 100644 index 0000000000..a568530f3b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.valid.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.align.valid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.align.valid</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.textAlign = 'start'; + _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'"); + + ctx.textAlign = 'end'; + _assertSame(ctx.textAlign, 'end', "ctx.textAlign", "'end'"); + + ctx.textAlign = 'left'; + _assertSame(ctx.textAlign, 'left', "ctx.textAlign", "'left'"); + + ctx.textAlign = 'right'; + _assertSame(ctx.textAlign, 'right', "ctx.textAlign", "'right'"); + + ctx.textAlign = 'center'; + _assertSame(ctx.textAlign, 'center', "ctx.textAlign", "'center'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.default.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.default.html new file mode 100644 index 0000000000..08e8512c66 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.default.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.baseline.default</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.baseline.default</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + _assertSame(ctx.textBaseline, 'alphabetic', "ctx.textBaseline", "'alphabetic'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.invalid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.invalid.html new file mode 100644 index 0000000000..e527a77288 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.invalid.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.baseline.invalid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.baseline.invalid</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.textBaseline = 'top'; + ctx.textBaseline = 'bogus'; + _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + + ctx.textBaseline = 'top'; + ctx.textBaseline = 'MIDDLE'; + _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + + ctx.textBaseline = 'top'; + ctx.textBaseline = 'middle '; + _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + + ctx.textBaseline = 'top'; + ctx.textBaseline = 'middle\0'; + _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.valid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.valid.html new file mode 100644 index 0000000000..238f6ff7dc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.valid.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.baseline.valid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.baseline.valid</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.textBaseline = 'top'; + _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'"); + + ctx.textBaseline = 'hanging'; + _assertSame(ctx.textBaseline, 'hanging', "ctx.textBaseline", "'hanging'"); + + ctx.textBaseline = 'middle'; + _assertSame(ctx.textBaseline, 'middle', "ctx.textBaseline", "'middle'"); + + ctx.textBaseline = 'alphabetic'; + _assertSame(ctx.textBaseline, 'alphabetic', "ctx.textBaseline", "'alphabetic'"); + + ctx.textBaseline = 'ideographic'; + _assertSame(ctx.textBaseline, 'ideographic', "ctx.textBaseline", "'ideographic'"); + + ctx.textBaseline = 'bottom'; + _assertSame(ctx.textBaseline, 'bottom', "ctx.textBaseline", "'bottom'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.center.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.center.html new file mode 100644 index 0000000000..723ebe8764 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.center.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "textAlign center is the center of the em squares (not the bounding box)"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.ltr.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.ltr.html new file mode 100644 index 0000000000..d29da833cc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.ltr.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "textAlign end with ltr is the right edge"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.rtl.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.rtl.html new file mode 100644 index 0000000000..09a9658ac0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.rtl.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "textAlign end with rtl is the left edge"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.left.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.left.html new file mode 100644 index 0000000000..dda5318fbf --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.left.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "textAlign left is the left of the first em square (not the bounding box)"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.right.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.right.html new file mode 100644 index 0000000000..2b3217278a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.right.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "textAlign right is the right of the last em square (not the bounding box)"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.ltr.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.ltr.html new file mode 100644 index 0000000000..8e14642fc2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.ltr.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "textAlign start with ltr is the left edge"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.rtl.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.rtl.html new file mode 100644 index 0000000000..fe1ccd1137 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.rtl.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "textAlign start with rtl is the right edge"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.alphabetic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.alphabetic.html new file mode 100644 index 0000000000..a45db596d0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.alphabetic.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.draw.baseline.alphabetic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.alphabetic</h1> +<p class="desc"></p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'alphabetic'; + ctx.fillText('CC', 0, 37.5); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); + +}, ""); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.bottom.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.bottom.html new file mode 100644 index 0000000000..ed1bf002a1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.bottom.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.draw.baseline.bottom</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.bottom</h1> +<p class="desc">textBaseline bottom is the bottom of the em square (not the bounding box)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'bottom'; + ctx.fillText('CC', 0, 50); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); + +}, "textBaseline bottom is the bottom of the em square (not the bounding box)"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.hanging.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.hanging.html new file mode 100644 index 0000000000..2f274b4199 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.hanging.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.draw.baseline.hanging</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.hanging</h1> +<p class="desc"></p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'hanging'; + ctx.fillText('CC', 0, 12.5); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); + +}, ""); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.ideographic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.ideographic.html new file mode 100644 index 0000000000..8d6a12e262 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.ideographic.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.draw.baseline.ideographic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.ideographic</h1> +<p class="desc"></p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'ideographic'; + ctx.fillText('CC', 0, 31.25); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); + +}, ""); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.middle.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.middle.html new file mode 100644 index 0000000000..5b021a5877 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.middle.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.draw.baseline.middle</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.middle</h1> +<p class="desc">textBaseline middle is the middle of the em square (not the bounding box)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'middle'; + ctx.fillText('CC', 0, 25); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); + +}, "textBaseline middle is the middle of the em square (not the bounding box)"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.top.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.top.html new file mode 100644 index 0000000000..2011514d33 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.top.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.draw.baseline.top</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.baseline.top</h1> +<p class="desc">textBaseline top is the top of the em square (not the bounding box)</p> + + +<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span> +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> +<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt=""> +<ul id="d"></ul> +<script> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textBaseline = 'top'; + ctx.fillText('CC', 0, 0); + _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2); + _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2); + +}, "textBaseline top is the top of the em square (not the bounding box)"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic-manual.html new file mode 100644 index 0000000000..d3f5df9d01 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic-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.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/text/2d.text.draw.fill.basic.png b/testing/web-platform/tests/html/canvas/element/text/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/text/2d.text.draw.fill.basic.png diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.NaN.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.NaN.html new file mode 100644 index 0000000000..9705d28830 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.NaN.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.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/text/2d.text.draw.fill.maxWidth.bound.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.html new file mode 100644 index 0000000000..c5f7dcf119 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "fillText handles maxWidth based on line size, not bounding box size"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.fontface.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.fontface.html new file mode 100644 index 0000000000..7df5553815 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.fontface.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "fillText works on @font-face fonts"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large-manual.html new file mode 100644 index 0000000000..96bb2e7de1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large-manual.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.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/text/2d.text.draw.fill.maxWidth.large.png b/testing/web-platform/tests/html/canvas/element/text/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/text/2d.text.draw.fill.maxWidth.large.png diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.negative.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.negative.html new file mode 100644 index 0000000000..ad50d57608 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.negative.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.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/text/2d.text.draw.fill.maxWidth.small.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.small.html new file mode 100644 index 0000000000..75866af406 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.small.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.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/text/2d.text.draw.fill.maxWidth.zero.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.zero.html new file mode 100644 index 0000000000..a175a57879 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.zero.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.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/text/2d.text.draw.fill.rtl-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl-manual.html new file mode 100644 index 0000000000..6917d7ed6c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl-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.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/text/2d.text.draw.fill.rtl.png b/testing/web-platform/tests/html/canvas/element/text/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/text/2d.text.draw.fill.rtl.png diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.unaffected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.unaffected.html new file mode 100644 index 0000000000..94ed31d199 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.unaffected.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.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/text/2d.text.draw.fontface.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.html new file mode 100644 index 0000000000..c46ac2084e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.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</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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '67px CanvasTest'; + 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); + +}, ""); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.notinpage.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.notinpage.html new file mode 100644 index 0000000000..92891fb04f --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.notinpage.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '67px CanvasTest'; + 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); + +}, "@font-face fonts should work even if they are not used in the page"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.repeat.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.repeat.html new file mode 100644 index 0000000000..d597540b97 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.repeat.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.font = '67px CanvasTest'; + ctx.fillStyle = '#0f0'; + ctx.fillText('AA', 0, 50); + + await new Promise(resolve => t.step_timeout(resolve, 500)); + 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); + +}, "Draw with the font immediately, then wait a bit until and draw again. (This crashes some version of WebKit.)"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.kern.consistent-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.kern.consistent-manual.html new file mode 100644 index 0000000000..1840ef01b1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.kern.consistent-manual.html @@ -0,0 +1,35 @@ +<!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/text/2d.text.draw.space.basic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.basic.html new file mode 100644 index 0000000000..d4447402aa --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.basic.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "U+0020 is rendered the correct size (1em wide)"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.end.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.end.html new file mode 100644 index 0000000000..5a14dbd514 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.end.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.end</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.space.collapse.end</h1> +<p class="desc">Space characters at the end of a line are NOT 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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.textAlign = 'right'; + ctx.fillText('EE ', 100, 37.5); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 255,0,0,255, 2); + +}, "Space characters at the end of a line are NOT collapsed"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.nonspace.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.nonspace.html new file mode 100644 index 0000000000..1fc4203b90 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.nonspace.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + 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); + +}, "Non-space characters are not converted to U+0020 and collapsed"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.other.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.other.html new file mode 100644 index 0000000000..ffc82929b5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.other.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.space.collapse.other</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.space.collapse.other</h1> +<p class="desc">Space characters are converted to U+0020, and are NOT 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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.fillText('E \x09\x0a\x0c\x0d \x09\x0a\x0c\x0dEE', 0, 37.5); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 255,0,0,255, 2); + +}, "Space characters are converted to U+0020, and are NOT collapsed"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.space.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.space.html new file mode 100644 index 0000000000..64c14d1a54 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.space.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.space.collapse.space</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.space.collapse.space</h1> +<p class="desc">Space characters are converted to U+0020, and are NOT 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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.fillText('E EE', 0, 37.5); + _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2); + _assertPixelApprox(canvas, 75,25, 255,0,0,255, 2); + +}, "Space characters are converted to U+0020, and are NOT collapsed"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.start.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.start.html new file mode 100644 index 0000000000..272432c3be --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.start.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.space.collapse.start</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.draw.space.collapse.start</h1> +<p class="desc">Space characters at the start of a line are NOT 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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.fillStyle = '#f00'; + ctx.fillRect(0, 0, 100, 50); + ctx.fillStyle = '#0f0'; + ctx.fillText(' EE', 0, 37.5); + _assertPixelApprox(canvas, 25,25, 255,0,0,255, 2); + _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2); + +}, "Space characters at the start of a line are NOT collapsed"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic-manual.html new file mode 100644 index 0000000000..1db0f0694e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.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.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/text/2d.text.draw.stroke.basic.png b/testing/web-platform/tests/html/canvas/element/text/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/text/2d.text.draw.stroke.basic.png diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.unaffected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.unaffected.html new file mode 100644 index 0000000000..76a36476ee --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.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.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/text/2d.text.drawing.style.absolute.spacing.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.absolute.spacing.html new file mode 100644 index 0000000000..1207f84e2b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.absolute.spacing.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.drawing.style.absolute.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.absolute.spacing</h1> +<p class="desc">Testing letter spacing and word spacing with absolute length</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 absolute length"); +_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 = '10PX'; + _assertSame(ctx.letterSpacing, '1px', "ctx.letterSpacing", "'1px'"); + _assertSame(ctx.wordSpacing, '10px', "ctx.wordSpacing", "'10px'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.font-relative.spacing.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.font-relative.spacing.html new file mode 100644 index 0000000000..a232ec1602 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.font-relative.spacing.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.drawing.style.font-relative.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.font-relative.spacing</h1> +<p class="desc">Testing letter spacing and word spacing with font-relative length</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 font-relative length"); +_addTest(function(canvas, ctx) { + + _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'"); + _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'"); + + ctx.letterSpacing = '1EX'; + ctx.wordSpacing = '1EM'; + _assertSame(ctx.letterSpacing, '1ex', "ctx.letterSpacing", "'1ex'"); + _assertSame(ctx.wordSpacing, '1em', "ctx.wordSpacing", "'1em'"); + + ctx.letterSpacing = '1ch'; + ctx.wordSpacing = '1ic'; + _assertSame(ctx.letterSpacing, '1ch', "ctx.letterSpacing", "'1ch'"); + _assertSame(ctx.wordSpacing, '1ic', "ctx.wordSpacing", "'1ic'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.html new file mode 100644 index 0000000000..6de9c6eb50 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.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.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/text/2d.text.drawing.style.fontKerning.with.uppercase.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.with.uppercase.html new file mode 100644 index 0000000000..991f35af0d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.with.uppercase.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.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, "auto", "ctx.fontKerning", "\"auto\""); + ctx.fontKerning = "normal"; + _assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\""); + ctx.fontKerning = "Auto"; + _assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\""); + ctx.fontKerning = "auto"; + ctx.fontKerning = "noRmal"; + _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\""); + ctx.fontKerning = "auto"; + ctx.fontKerning = "NoRMal"; + _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\""); + ctx.fontKerning = "auto"; + ctx.fontKerning = "NORMAL"; + _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\""); + + ctx.fontKerning = "None"; + _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\""); + ctx.fontKerning = "none"; + _assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\""); + ctx.fontKerning = "Auto"; + _assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\""); + ctx.fontKerning = "auto"; + ctx.fontKerning = "nOne"; + _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\""); + ctx.fontKerning = "auto"; + ctx.fontKerning = "nonE"; + _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\""); + ctx.fontKerning = "auto"; + ctx.fontKerning = "NONE"; + _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\""); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontStretch.settings.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontStretch.settings.html new file mode 100644 index 0000000000..b19eced891 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontStretch.settings.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.drawing.style.fontStretch.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.fontStretch.settings</h1> +<p class="desc">Testing value setting of fontStretch 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 value setting of fontStretch in Canvas"); +_addTest(function(canvas, ctx) { + + // Setting textRendering with lower cases + ctx.fontStretch = "ultra-condensed"; + _assertSame(ctx.fontStretch, "ultra-condensed", "ctx.fontStretch", "\"ultra-condensed\""); + + ctx.fontStretch = "extra-condensed"; + _assertSame(ctx.fontStretch, "extra-condensed", "ctx.fontStretch", "\"extra-condensed\""); + + ctx.fontStretch = "condensed"; + _assertSame(ctx.fontStretch, "condensed", "ctx.fontStretch", "\"condensed\""); + + ctx.fontStretch = "semi-condensed"; + _assertSame(ctx.fontStretch, "semi-condensed", "ctx.fontStretch", "\"semi-condensed\""); + + ctx.fontStretch = "normal"; + _assertSame(ctx.fontStretch, "normal", "ctx.fontStretch", "\"normal\""); + + ctx.fontStretch = "semi-expanded"; + _assertSame(ctx.fontStretch, "semi-expanded", "ctx.fontStretch", "\"semi-expanded\""); + + ctx.fontStretch = "expanded"; + _assertSame(ctx.fontStretch, "expanded", "ctx.fontStretch", "\"expanded\""); + + ctx.fontStretch = "extra-expanded"; + _assertSame(ctx.fontStretch, "extra-expanded", "ctx.fontStretch", "\"extra-expanded\""); + + ctx.fontStretch = "ultra-expanded"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + + // Setting fontStretch with lower cases and upper cases word, + // these values should be ignored. + ctx.fontStretch = "ulTra-condensed"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + + ctx.fontStretch = "Extra-condensed"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + + ctx.fontStretch = "cOndensed"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + + ctx.fontStretch = "Semi-Condensed"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + + ctx.fontStretch = "normaL"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + + ctx.fontStretch = "semi-Expanded"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + + ctx.fontStretch = "Expanded"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + + ctx.fontStretch = "eXtra-expanded"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + + ctx.fontStretch = "abcd"; + _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\""); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontVariant.settings.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontVariant.settings.html new file mode 100644 index 0000000000..cff5ad183a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontVariant.settings.html @@ -0,0 +1,78 @@ +<!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 fontVariant 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 fontVariant 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 mixed-case values is not valid + ctx.fontVariantCaps = "nORmal"; + _assertSame(ctx.fontVariantCaps, "titling-caps", "ctx.fontVariantCaps", "\"titling-caps\""); + + ctx.fontVariantCaps = "normal"; + _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + + ctx.fontVariantCaps = "smaLL-caps"; + _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + + ctx.fontVariantCaps = "all-small-CAPS"; + _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + + ctx.fontVariantCaps = "pEtitE-caps"; + _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + + ctx.fontVariantCaps = "All-Petite-Caps"; + _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + + ctx.fontVariantCaps = "uNIcase"; + _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + + ctx.fontVariantCaps = "titling-CAPS"; + _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\""); + + // Setting fontVariantCaps with non-existing font variant. + ctx.fontVariantCaps = "titling-caps"; + ctx.fontVariantCaps = "abcd"; + _assertSame(ctx.fontVariantCaps, "titling-caps", "ctx.fontVariantCaps", "\"titling-caps\""); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.invalid.spacing.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.invalid.spacing.html new file mode 100644 index 0000000000..a0b8340b2c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.invalid.spacing.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.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'); + test_word_spacing('initial'); + test_word_spacing('inherit'); + test_word_spacing('normal'); + test_word_spacing('none'); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.change.font.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.change.font.html new file mode 100644 index 0000000000..daff0cf9d6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.change.font.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.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; + assert_approx_equals(width_with_spacing, width_normal + 110, 0.1, "letter-spacing error"); + + // 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; + assert_approx_equals(width_with_spacing, width_normal + 220, 0.1, "letter-spacing error after font change"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.measure.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.measure.html new file mode 100644 index 0000000000..0e4848b6fe --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/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 with different length 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 with different length units"); +_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.1], + ['5px', 55, 0.1], + ['-2px', -22, 0.1], + ['1em', 110, 0.1], + ['-0.1em', -11, 0.1], + ['1in', 1056, 0.1], + ['-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/text/2d.text.drawing.style.measure.direction.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.direction.html new file mode 100644 index 0000000000..abe696b196 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.direction.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.drawing.style.measure.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.drawing.style.measure.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/text/2d.text.drawing.style.measure.rtl.text.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.rtl.text.html new file mode 100644 index 0000000000..e521b09236 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.rtl.text.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.drawing.style.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"> +<body class="show_output"> + +<h1>2d.text.drawing.style.measure.rtl.text</h1> +<p class="desc">Measurement should follow canvas direction instead 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 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/text/2d.text.drawing.style.measure.textAlign.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.textAlign.html new file mode 100644 index 0000000000..2d5a4718c5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.textAlign.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.drawing.style.measure.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.drawing.style.measure.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/text/2d.text.drawing.style.nonfinite.spacing.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.nonfinite.spacing.html new file mode 100644 index 0000000000..5ba20208e5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.nonfinite.spacing.html @@ -0,0 +1,37 @@ +<!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/text/2d.text.drawing.style.textRendering.settings.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.textRendering.settings.html new file mode 100644 index 0000000000..dee856842a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.textRendering.settings.html @@ -0,0 +1,80 @@ +<!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 correct case. + _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\""); + + ctx.textRendering = "auto"; + _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + + // Setting textRendering with incorrect case is ignored. + ctx.textRendering = "OPtimizeSpeed"; + _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + + ctx.textRendering = "OPtimizELEgibility"; + _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + + ctx.textRendering = "GeometricPrecision"; + _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + + ctx.textRendering = "optimizespeed"; + _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + + ctx.textRendering = "optimizelegibility"; + _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + + ctx.textRendering = "geometricprecision"; + _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + + ctx.textRendering = "optimizeLegibility"; + _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\""); + + ctx.textRendering = "AUTO"; + _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\""); + + ctx.textRendering = "Auto"; + _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\""); + + // Setting textRendering with non-existing font variant. + ctx.textRendering = "abcd"; + _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\""); + + ctx.textRendering = "normal"; + _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\""); + + ctx.textRendering = ""; + _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\""); + + ctx.textRendering = "auto"; + _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\""); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.change.font.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.change.font.html new file mode 100644 index 0000000000..8bad1a0447 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.change.font.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.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/text/2d.text.drawing.style.wordSpacing.measure.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.measure.html new file mode 100644 index 0000000000..2562477d94 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/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 word spacing with different length 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 word spacing with different length units"); +_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.1], + ['5px', 10, 0.1], + ['-2px', -4, 0.1], + ['1em', 20, 0.1], + ['-0.5em', -10, 0.1], + ['1in', 192, 0.1], + ['-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/text/2d.text.font.default.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.default.html new file mode 100644 index 0000000000..c6ac084843 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.default.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.default</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.default</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + _assertSame(ctx.font, '10px sans-serif', "ctx.font", "'10px sans-serif'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.basic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.basic.html new file mode 100644 index 0000000000..70efec7743 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.basic.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.basic</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.parse.basic</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.font = '20px serif'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20PX SERIF'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex.html new file mode 100644 index 0000000000..12e1d60e56 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.complex</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.parse.complex</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.font = 'small-caps italic 400 12px/2 Unknown Font, sans-serif'; + _assert(['italic small-caps 12px "Unknown Font", sans-serif', 'italic small-caps 12px Unknown Font, sans-serif'].includes(ctx.font), "['italic small-caps 12px \"Unknown Font\", sans-serif', 'italic small-caps 12px Unknown Font, sans-serif'].includes(ctx.font)"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex2.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex2.html new file mode 100644 index 0000000000..d85765fcd3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex2.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.complex2</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.parse.complex2</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.font = 'small-caps italic 400 12px/2 "Unknown Font #2", sans-serif'; + _assertSame(ctx.font, 'italic small-caps 12px "Unknown Font #2", sans-serif', "ctx.font", "'italic small-caps 12px \"Unknown Font #2\", sans-serif'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.family.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.family.html new file mode 100644 index 0000000000..c53bedbffc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.family.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.family</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.parse.family</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.font = '20px cursive,fantasy,monospace,sans-serif,serif,UnquotedFont,"QuotedFont\\\\\\","'; + _assertSame(ctx.font, '20px cursive, fantasy, monospace, sans-serif, serif, UnquotedFont, "QuotedFont\\\\\\","', "ctx.font", "'20px cursive, fantasy, monospace, sans-serif, serif, UnquotedFont, \"QuotedFont\\\\\\\\\\\\\",\"'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.invalid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.invalid.html new file mode 100644 index 0000000000..4fef0b4846 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.invalid.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.invalid</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.parse.invalid</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.font = '20px serif'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = ''; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = 'bogus'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = 'inherit'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = '10px {bogus}'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = '10px initial'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = '10px default'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = '10px inherit'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = '10px revert'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = 'var(--x)'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = 'var(--x, 10px serif)'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + + ctx.font = '20px serif'; + ctx.font = '1em serif; background: green; margin: 10px'; + _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.default.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.default.html new file mode 100644 index 0000000000..cb245f18a2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.default.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.size.percentage.default</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.parse.size.percentage.default</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + var canvas2 = document.createElement('canvas'); + var ctx2 = canvas2.getContext('2d'); + ctx2.font = '1000% serif'; + _assertSame(ctx2.font, '100px serif', "ctx2.font", "'100px serif'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.html new file mode 100644 index 0000000000..520231a804 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.size.percentage</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.parse.size.percentage</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"style="font-size: 144px"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.font = '50% serif'; + _assertSame(ctx.font, '72px serif', "ctx.font", "'72px serif'"); + canvas.setAttribute('style', 'font-size: 100px'); + _assertSame(ctx.font, '72px serif', "ctx.font", "'72px serif'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.system.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.system.html new file mode 100644 index 0000000000..10fa0cb36d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.system.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.system</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.parse.system</h1> +<p class="desc">System fonts must be computed to explicit values</p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test("System fonts must be computed to explicit values"); +_addTest(function(canvas, ctx) { + + ctx.font = 'message-box'; + _assertDifferent(ctx.font, 'message-box', "ctx.font", "'message-box'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.tiny.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.tiny.html new file mode 100644 index 0000000000..10c9d2a0e0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.tiny.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.parse.tiny</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.parse.tiny</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.font = '1px sans-serif'; + _assertSame(ctx.font, '1px sans-serif', "ctx.font", "'1px sans-serif'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.relative_size.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.relative_size.html new file mode 100644 index 0000000000..97b9718b14 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.relative_size.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.relative_size</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.relative_size</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + var canvas2 = document.createElement('canvas'); + var ctx2 = canvas2.getContext('2d'); + ctx2.font = '1em sans-serif'; + _assertSame(ctx2.font, '10px sans-serif', "ctx2.font", "'10px sans-serif'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.weight.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.weight.html new file mode 100644 index 0000000000..05816b7254 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.weight.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.font.weight</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<body class="show_output"> + +<h1>2d.text.font.weight</h1> +<p class="desc"></p> + + +<p class="output">Actual output:</p> +<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas> + +<ul id="d"></ul> +<script> +var t = async_test(""); +_addTest(function(canvas, ctx) { + + ctx.font = 'italic 400 12px serif'; + _assertSame(ctx.font, 'italic 12px serif', "ctx.font", "'italic 12px serif'"); + + ctx.font = 'italic 300 12px serif'; + _assertSame(ctx.font, 'italic 300 12px serif', "ctx.font", "'italic 300 12px serif'"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1-expected.html new file mode 100644 index 0000000000..e2cef0d77a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1-expected.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.fontVariantCaps1</title> +<h1>2d.text.fontVariantCaps1</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + ctx.font = "small-caps 32px serif"; + ctx.fillText("Hello World", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1.html new file mode 100644 index 0000000000..56acfc61f4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.text.fontVariantCaps1-expected.html"> +<title>Canvas test: 2d.text.fontVariantCaps1</title> +<h1>2d.text.fontVariantCaps1</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + ctx.font = "32px serif"; + ctx.fontVariantCaps = "small-caps"; + // This should render the same as font = "small-caps 32px serif". + ctx.fillText("Hello World", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps2.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps2.html new file mode 100644 index 0000000000..56efbb6fd3 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps2.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.fontVariantCaps2</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.fontVariantCaps2</h1> +<p class="desc">Testing small caps setting in fontVariant</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 small caps setting in fontVariant"); +_addTest(function(canvas, ctx) { + + ctx.font = "small-caps 32px serif"; + // "mismatch" test, to verify that small-caps does change the rendering. + smallCaps_len = ctx.measureText("Hello World").width; + + ctx.font = "32px serif"; + normalCaps_len = ctx.measureText("Hello World").width; + _assert(smallCaps_len != normalCaps_len, "smallCaps_len != normalCaps_len"); + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3-expected.html new file mode 100644 index 0000000000..cf2d5ae119 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3-expected.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.fontVariantCaps3</title> +<h1>2d.text.fontVariantCaps3</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + ctx.font = "small-caps 32px serif"; + ctx.fillText("hello world", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3.html new file mode 100644 index 0000000000..c3d80d3e56 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.text.fontVariantCaps3-expected.html"> +<title>Canvas test: 2d.text.fontVariantCaps3</title> +<h1>2d.text.fontVariantCaps3</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + ctx.font = "32px serif"; + ctx.fontVariantCaps = "all-small-caps"; + // This should render the same as using font = "small-caps 32px serif" + // with all the underlying text in lowercase. + ctx.fillText("Hello World", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4-expected.html new file mode 100644 index 0000000000..3813fd3684 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4-expected.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.fontVariantCaps4</title> +<h1>2d.text.fontVariantCaps4</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + ctx.font = "small-caps 32px serif"; + ctx.fillText("hello world", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4.html new file mode 100644 index 0000000000..1ee9053b4d --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.text.fontVariantCaps4-expected.html"> +<title>Canvas test: 2d.text.fontVariantCaps4</title> +<h1>2d.text.fontVariantCaps4</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + ctx.font = "small-caps 32px serif"; + // fontVariantCaps overrides the small-caps setting from the font attribute + // (spec unclear, cf. https://github.com/whatwg/html/issues/8103) + ctx.fontVariantCaps = "all-small-caps"; + ctx.fillText("Hello World", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5-expected.html new file mode 100644 index 0000000000..4bda4ec4b5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5-expected.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.fontVariantCaps5</title> +<h1>2d.text.fontVariantCaps5</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + ctx.font = "small-caps 32px serif"; + ctx.fillText("Hello World", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5.html new file mode 100644 index 0000000000..d80de4ea31 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.text.fontVariantCaps5-expected.html"> +<title>Canvas test: 2d.text.fontVariantCaps5</title> +<h1>2d.text.fontVariantCaps5</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + ctx.font = "small-caps 32px serif"; + // fontVariantCaps 'normal' does not override the setting from the font attribute. + // (spec unclear, cf. https://github.com/whatwg/html/issues/8103) + ctx.fontVariantCaps = "normal"; + ctx.fillText("Hello World", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6-expected.html new file mode 100644 index 0000000000..af9c736aea --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6-expected.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.fontVariantCaps6</title> +<h1>2d.text.fontVariantCaps6</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + ctx.font = "32px serif"; + ctx.fillText("Hello World", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6.html new file mode 100644 index 0000000000..c17fac18b7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<link rel="match" href="2d.text.fontVariantCaps6-expected.html"> +<title>Canvas test: 2d.text.fontVariantCaps6</title> +<h1>2d.text.fontVariantCaps6</h1> +<p class="desc">Testing small caps setting in fontVariant</p> +<canvas id="canvas" width="100" height="50"> + <p class="fallback">FAIL (fallback content)</p> +</canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + // fontVariantCaps is reset when the font attribute is set. + // (spec unclear, cf. https://github.com/whatwg/html/issues/8103) + ctx.fontVariantCaps = "all-small-caps"; + ctx.font = "32px serif"; + ctx.fillText("Hello World", 20, 100); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.actualBoundingBox.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.actualBoundingBox.html new file mode 100644 index 0000000000..d0672b23dc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.actualBoundingBox.html @@ -0,0 +1,61 @@ +<!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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + 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"); + +}, "Testing actualBoundingBox"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.advances.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.advances.html new file mode 100644 index 0000000000..84f04dd677 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.advances.html @@ -0,0 +1,52 @@ +<!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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + 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)+"\"]"); + +}, "Testing width advances"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.baselines.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.baselines.html new file mode 100644 index 0000000000..9d947eb361 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.baselines.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(Math.abs(ctx.measureText('A').alphabeticBaseline), 0, "Math.abs(ctx.measureText('A').alphabeticBaseline)", "0"); + _assertSame(ctx.measureText('A').ideographicBaseline, 6.25, "ctx.measureText('A').ideographicBaseline", "6.25"); + _assertSame(ctx.measureText('A').hangingBaseline, 25, "ctx.measureText('A').hangingBaseline", "25"); + + _assertSame(Math.abs(ctx.measureText('ABCD').alphabeticBaseline), 0, "Math.abs(ctx.measureText('ABCD').alphabeticBaseline)", "0"); + _assertSame(ctx.measureText('ABCD').ideographicBaseline, 6.25, "ctx.measureText('ABCD').ideographicBaseline", "6.25"); + _assertSame(ctx.measureText('ABCD').hangingBaseline, 25, "ctx.measureText('ABCD').hangingBaseline", "25"); + +}, "Testing baselines"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-low-ascent.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-low-ascent.html new file mode 100644 index 0000000000..7b6874d10b --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-low-ascent.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.measure.emHeights-low-ascent</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-ascent256; + src: url("/fonts/CanvasTest-ascent256.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.measure.emHeights-low-ascent</h1> +<p class="desc">Testing emHeights with reduced ascent metric</p> + + +<span style="font-family: CanvasTest-ascent256; 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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '40px CanvasTest-ascent256'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(ctx.measureText('A').emHeightAscent, 20, "ctx.measureText('A').emHeightAscent", "20"); + _assertSame(ctx.measureText('A').emHeightDescent, 20, "ctx.measureText('A').emHeightDescent", "20"); + _assertSame(ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent, 40, "ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent", "40"); + + _assertSame(ctx.measureText('ABCD').emHeightAscent, 20, "ctx.measureText('ABCD').emHeightAscent", "20"); + _assertSame(ctx.measureText('ABCD').emHeightDescent, 20, "ctx.measureText('ABCD').emHeightDescent", "20"); + _assertSame(ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent, 40, "ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent", "40"); + +}, "Testing emHeights with reduced ascent metric"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-zero-descent.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-zero-descent.html new file mode 100644 index 0000000000..c3ce994fa1 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-zero-descent.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.measure.emHeights-zero-descent</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-descent0; + src: url("/fonts/CanvasTest-descent0.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.measure.emHeights-zero-descent</h1> +<p class="desc">Testing emHeights with zero descent metric</p> + + +<span style="font-family: CanvasTest-descent0; 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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '40px CanvasTest-descent0'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(ctx.measureText('A').emHeightAscent, 40, "ctx.measureText('A').emHeightAscent", "40"); + _assertSame(ctx.measureText('A').emHeightDescent, 0, "ctx.measureText('A').emHeightDescent", "0"); + _assertSame(ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent, 40, "ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent", "40"); + + _assertSame(ctx.measureText('ABCD').emHeightAscent, 40, "ctx.measureText('ABCD').emHeightAscent", "40"); + _assertSame(ctx.measureText('ABCD').emHeightDescent, 0, "ctx.measureText('ABCD').emHeightDescent", "0"); + _assertSame(ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent, 40, "ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent", "40"); + +}, "Testing emHeights with zero descent metric"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights.html new file mode 100644 index 0000000000..0db4c30801 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '40px CanvasTest'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(ctx.measureText('A').emHeightAscent, 30, "ctx.measureText('A').emHeightAscent", "30"); + _assertSame(ctx.measureText('A').emHeightDescent, 10, "ctx.measureText('A').emHeightDescent", "10"); + _assertSame(ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent, 40, "ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent", "40"); + + _assertSame(ctx.measureText('ABCD').emHeightAscent, 30, "ctx.measureText('ABCD').emHeightAscent", "30"); + _assertSame(ctx.measureText('ABCD').emHeightDescent, 10, "ctx.measureText('ABCD').emHeightDescent", "10"); + _assertSame(ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent, 40, "ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent", "40"); + +}, "Testing emHeights"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-reduced-ascent.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-reduced-ascent.html new file mode 100644 index 0000000000..653d26d820 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-reduced-ascent.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.measure.fontBoundingBox-reduced-ascent</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-ascent256; + src: url("/fonts/CanvasTest-ascent256.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.measure.fontBoundingBox-reduced-ascent</h1> +<p class="desc">Testing fontBoundingBox for OffscreenCanvas with reduced ascent metric</p> + + +<span style="font-family: CanvasTest-ascent256; 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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '40px CanvasTest-ascent256'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 10, "ctx.measureText('A').fontBoundingBoxAscent", "10"); + _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 10, "ctx.measureText('A').fontBoundingBoxDescent", "10"); + + _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 10, "ctx.measureText('ABCD').fontBoundingBoxAscent", "10"); + _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 10, "ctx.measureText('ABCD').fontBoundingBoxDescent", "10"); + +}, "Testing fontBoundingBox for OffscreenCanvas with reduced ascent metric"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-zero-descent.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-zero-descent.html new file mode 100644 index 0000000000..785c0bc186 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-zero-descent.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.measure.fontBoundingBox-zero-descent</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-descent0; + src: url("/fonts/CanvasTest-descent0.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.measure.fontBoundingBox-zero-descent</h1> +<p class="desc">Testing fontBoundingBox for OffscreenCanvas with zero descent metric</p> + + +<span style="font-family: CanvasTest-descent0; 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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '40px CanvasTest-descent0'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 30, "ctx.measureText('A').fontBoundingBoxAscent", "30"); + _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 0, "ctx.measureText('A').fontBoundingBoxDescent", "0"); + + _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 30, "ctx.measureText('ABCD').fontBoundingBoxAscent", "30"); + _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 0, "ctx.measureText('ABCD').fontBoundingBoxDescent", "0"); + +}, "Testing fontBoundingBox for OffscreenCanvas with zero descent metric"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.ahem.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.ahem.html new file mode 100644 index 0000000000..0044f4d1e7 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.ahem.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + 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"); + +}, "Testing fontBoundingBox for font ahem"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.html new file mode 100644 index 0000000000..9e7e190754 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.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.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 measurements</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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '40px CanvasTest'; + ctx.direction = 'ltr'; + ctx.align = 'left' + _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 30, "ctx.measureText('A').fontBoundingBoxAscent", "30"); + _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 10, "ctx.measureText('A').fontBoundingBoxDescent", "10"); + + _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 30, "ctx.measureText('ABCD').fontBoundingBoxAscent", "30"); + _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 10, "ctx.measureText('ABCD').fontBoundingBoxDescent", "10"); + +}, "Testing fontBoundingBox measurements"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.basic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.basic.html new file mode 100644 index 0000000000..36dc468b4e --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.basic.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.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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + 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"); + +}, "The width of character is same as font used"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.empty.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.empty.html new file mode 100644 index 0000000000..39ddad9789 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.empty.html @@ -0,0 +1,37 @@ +<!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> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + _assertSame(ctx.measureText("").width, 0, "ctx.measureText(\"\").width", "0"); + +}, "The empty string has zero width"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.space.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.space.html new file mode 100644 index 0000000000..7fd8095e28 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.space.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.measure.width.space</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css"> +<style> +@font-face { + font-family: CanvasTest; + src: url("/fonts/CanvasTest.ttf"); +} +</style> +<body class="show_output"> + +<h1>2d.text.measure.width.space</h1> +<p class="desc">Space characters are converted to U+0020 and NOT 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> + +<ul id="d"></ul> +<script> +promise_test(async t => { + + var canvas = document.getElementById('c'); + var ctx = canvas.getContext('2d'); + + await document.fonts.ready; + ctx.font = '50px CanvasTest'; + _assertSame(ctx.measureText('A B').width, 150, "ctx.measureText('A B').width", "150"); + _assertSame(ctx.measureText('A B').width, 200, "ctx.measureText('A B').width", "200"); + _assertSame(ctx.measureText('A \x09\x0a\x0c\x0d \x09\x0a\x0c\x0dB').width, 650, "ctx.measureText('A \\x09\\x0a\\x0c\\x0d \\x09\\x0a\\x0c\\x0dB').width", "650"); + _assert(ctx.measureText('A \x0b B').width >= 200, "ctx.measureText('A \\x0b B').width >= 200"); + + _assertSame(ctx.measureText(' AB').width, 150, "ctx.measureText(' AB').width", "150"); + _assertSame(ctx.measureText('AB ').width, 150, "ctx.measureText('AB ').width", "150"); + +}, "Space characters are converted to U+0020 and NOT collapsed"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.setFont.mathFont.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.setFont.mathFont.html new file mode 100644 index 0000000000..370104f1b8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.setFont.mathFont.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. --> +<title>Canvas test: 2d.text.setFont.mathFont</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.setFont.mathFont</h1> +<p class="desc">crbug.com/1212190, make sure offscreencanvas doesn't crash with Math Font</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("crbug.com/1212190, make sure offscreencanvas doesn't crash with Math Font"); +_addTest(function(canvas, ctx) { + + ctx.font = "math serif"; + +}); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/direction-inherit-rtl.html b/testing/web-platform/tests/html/canvas/element/text/direction-inherit-rtl.html new file mode 100644 index 0000000000..0ad92181a0 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/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/text/direction-ltr.html b/testing/web-platform/tests/html/canvas/element/text/direction-ltr.html new file mode 100644 index 0000000000..42a39ac589 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/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/text/direction-rtl.html b/testing/web-platform/tests/html/canvas/element/text/direction-rtl.html new file mode 100644 index 0000000000..3cc67c69f5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/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/text/parent-style-relative-units.html b/testing/web-platform/tests/html/canvas/element/text/parent-style-relative-units.html new file mode 100644 index 0000000000..b9a6b314c6 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/parent-style-relative-units.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Canvas test: CanvasTextDrawingStyles.font with canvas relative units</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-font"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<canvas id="canvas" style="font-size: 30px; line-height: 40px"></canvas> +<script> + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext("2d"); + + test(() => { + ctx.font = "2em serif"; + assert_equals(ctx.font, "60px serif"); + }, "Font-size based on canvas element font-size"); + + test(() => { + // Line-height should be forced to normal, but also irrelevant for resolving + // lh-units for font-size. + ctx.font = "2lh/100 serif"; + assert_equals(ctx.font, "80px serif"); + }, "Font-size based on canvas element line-height"); +</script> + diff --git a/testing/web-platform/tests/html/canvas/element/text/reference/direction-default-ref.html b/testing/web-platform/tests/html/canvas/element/text/reference/direction-default-ref.html new file mode 100644 index 0000000000..cef6df259c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/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/text/reference/direction-rtl-ref.html b/testing/web-platform/tests/html/canvas/element/text/reference/direction-rtl-ref.html new file mode 100644 index 0000000000..010526d667 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/text/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> |
