<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="support/canvas.js"></script>
+ <script src="common/canvas-tests.js"></script>
+
+ <style>
+ @font-face {
+ font-family: CanvasTest;
+ src: url("fonts/CanvasTest.ttf");
+ }
+ </style>
</head>
<body>
<div id="log"></div>
+ <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="canvas" width="300" height="200" style="border:1px solid #c3c3c3; font-kerning:none;">
Your browser does not support the canvas element.
</canvas>
+
<script>
- test( function () {
+ promise_test(async t => {
var canvas = document.getElementById("canvas");
- ctx = canvas.getContext("2d");
- tm1 = ctx.measureText("f");
- tm = ctx.measureText("fff")
- // font shape has been changed, UX changed font file on some TV branch
- assert_equals(parseFloat(tm.width.toFixed(4)), parseFloat((tm1.width * 3).toFixed(4)), "the fixed 4 float is not equal");
- });
+ var ctx = canvas.getContext("2d");
+
+ await document.fonts.ready;
+ ctx.font = '50px CanvasTest';
+ var tm = ctx.measureText('A');
+ if (tm.width === null || tm.width === undefined) {
+ throw new Error('measureText returned null or undefined');
+ }
+ _assertSame(tm.width, 50, "ctx.measureText('A').width", "50");
+ _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>
</body>
</html>
projects / test / tct / web / api.git / commitdiff