Commit 98591f54 authored by xidachen's avatar xidachen Committed by Commit bot

Rewrite canvas/philip/tests/2d.text.draw.text.metrics.html test

Currently this layout test canvas/philip/tests/2d.text.draw.text.metrics.html
gets different results on linux platform comparing to all the other
platforms. But when I open the test file directly on chrome, the result
is exactly the same as the results on the other platform. The reason is
that the content shell test runner has some flags enabled.

This CL rewrite the test in a more reasonable way.

BUG=277215

Review-Url: https://codereview.chromium.org/2232243002
Cr-Commit-Position: refs/heads/master@{#412571}
parent ff055014
......@@ -161,6 +161,10 @@ crbug.com/593514 virtual/gpu/fast/canvas/OffscreenCanvas-2d-gradients-in-worker.
crbug.com/593514 virtual/gpu/fast/canvas/OffscreenCanvas-2d-drawImage-in-worker.html [ Failure ]
crbug.com/593514 virtual/gpu/fast/canvas/OffscreenCanvas-2d-imageSmoothing-in-worker.html [ Failure ]
crbug.com/277215 fast/canvas/canvas-textMetrics-width.html [ NeedsRebaseline ]
crbug.com/277215 virtual/gpu/fast/canvas/canvas-textMetrics-width.html [ NeedsRebaseline ]
crbug.com/277215 virtual/display_list_2d_canvas/fast/canvas/canvas-textMetrics-width.html [ NeedsRebaseline ]
crbug.com/417782 [ Linux Win ] virtual/rootlayerscrolls/fast/scrolling/fractional-scroll-offset-fixed-position-non-composited.html [ Failure ]
crbug.com/492664 [ Linux ] imported/csswg-test/css-writing-modes-3/box-offsets-rel-pos-vlr-005.xht [ Failure ]
crbug.com/492664 [ Linux ] imported/csswg-test/css-writing-modes-3/box-offsets-rel-pos-vrl-004.xht [ Failure ]
......
Baseline: top
Width: 212.7197265625
Alphabetic Baseline: 45
Hanging Baseline: 9
Ideographic Baseline: 57
Font Bounding Box Ascent: 0
Font Bounding Box Descent: 57
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 213
Actual Bounding Box Ascent (high): -45
Actual Bounding Box Ascent (low): -45
Actual Bounding Box Descent (high): 95
Actual Bounding Box Descent (low): 95
Baseline: hanging
Width: 212.7197265625
Alphabetic Baseline: 36
Hanging Baseline: 0
Ideographic Baseline: 48
Font Bounding Box Ascent: 9
Font Bounding Box Descent: 48
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 213
Actual Bounding Box Ascent (high): -36
Actual Bounding Box Ascent (low): -36
Actual Bounding Box Descent (high): 86
Actual Bounding Box Descent (low): 86
Baseline: middle
Width: 212.7197265625
Alphabetic Baseline: 16
Hanging Baseline: -20
Ideographic Baseline: 28
Font Bounding Box Ascent: 29
Font Bounding Box Descent: 28
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 213
Actual Bounding Box Ascent (high): -16
Actual Bounding Box Ascent (low): -16
Actual Bounding Box Descent (high): 66
Actual Bounding Box Descent (low): 66
Baseline: alphabetic
Width: 212.7197265625
Alphabetic Baseline: 0
Hanging Baseline: -36
Ideographic Baseline: 12
Font Bounding Box Ascent: 45
Font Bounding Box Descent: 12
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 213
Actual Bounding Box Ascent (high): 0
Actual Bounding Box Ascent (low): 0
Actual Bounding Box Descent (high): 50
Actual Bounding Box Descent (low): 50
Baseline: ideographic
Width: 212.7197265625
Alphabetic Baseline: -12
Hanging Baseline: -48
Ideographic Baseline: 0
Font Bounding Box Ascent: 57
Font Bounding Box Descent: 0
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 213
Actual Bounding Box Ascent (high): 12
Actual Bounding Box Ascent (low): 12
Actual Bounding Box Descent (high): 38
Actual Bounding Box Descent (low): 38
Baseline: bottom
Width: 212.7197265625
Alphabetic Baseline: -12
Hanging Baseline: -48
Ideographic Baseline: 0
Font Bounding Box Ascent: 57
Font Bounding Box Descent: 0
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 213
Actual Bounding Box Ascent (high): 12
Actual Bounding Box Ascent (low): 12
Actual Bounding Box Descent (high): 38
Actual Bounding Box Descent (low): 38
Cannot automatically verify result
<!DOCTYPE html>
<title>Canvas test: 2d.text.draw.text.metrics</title>
<script src="../tests.js"></script>
<link rel="stylesheet" href="../tests.css">
<style>
@font-face {
font-family: Libertine;
src: url("../../../third_party/Libertine/LinLibertine_R.woff");
}
</style>
<body>
<p id="passtext">Pass</p>
<p id="failtext">Fail</p>
<p class="output">These images should be identical:</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="green-100x50.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
function _printTextMetrics(ctx) {
var someText = "Some Text";
var highText = "M";
var lowText = "q";
var textMetrics = ctx.measureText(someText);
var highTextMetrics = ctx.measureText(highText);
var lowTextMetrics = ctx.measureText(lowText);
var w = textMetrics.width;
var ab = textMetrics.alphabeticBaseline;
var hb = textMetrics.hangingBaseline;
var ib = textMetrics.ideographicBaseline;
var fa = textMetrics.fontBoundingBoxAscent;
var fd = textMetrics.fontBoundingBoxDescent;
var ea = textMetrics.emHeightAscent;
var ed = textMetrics.emHeightDescent;
var lb = textMetrics.actualBoundingBoxLeft;
var rb = textMetrics.actualBoundingBoxRight;
var ah = highTextMetrics.actualBoundingBoxAscent;
var al = lowTextMetrics.actualBoundingBoxAscent;
var dh = highTextMetrics.actualBoundingBoxDescent;
var dl = lowTextMetrics.actualBoundingBoxDescent;
_warn("Width: " + w);
_warn("Alphabetic Baseline: " + ab);
_warn("Hanging Baseline: " + hb);
_warn("Ideographic Baseline: " + ib);
_warn("Font Bounding Box Ascent: " + fa);
_warn("Font Bounding Box Descent: " + fd);
_warn("eM Height Ascent: " + ea);
_warn("eM Height Descent: " + ed);
_warn("Actual Bounding Box Left: " + lb);
_warn("Actual Bounding Box Right: " + rb);
_warn("Actual Bounding Box Ascent (high): " + ah);
_warn("Actual Bounding Box Ascent (low): " + al);
_warn("Actual Bounding Box Descent (high): " + dh);
_warn("Actual Bounding Box Descent (low): " + dl);
}
function measureMetrics(ctx) {
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, 100, 50);
ctx.fillStyle = '#0f0';
ctx.textBaseline="top";
_warn("Baseline: top");
_printTextMetrics(ctx);
ctx.textBaseline="hanging";
_warn("Baseline: hanging");
_printTextMetrics(ctx);
ctx.textBaseline="middle";
_warn("Baseline: middle");
_printTextMetrics(ctx);
ctx.textBaseline="alphabetic";
_warn("Baseline: alphabetic");
_printTextMetrics(ctx);
ctx.textBaseline="ideographic";
_warn("Baseline: ideographic");
_printTextMetrics(ctx);
ctx.textBaseline="bottom";
_warn("Baseline: bottom");
_printTextMetrics(ctx);
endTest();
}
function handleError() {
_warn("Unable to load required test font.");
endTest();
}
_addTest(function(canvas, ctx) {
ctx.font = '50px Libertine';
deferTest();
document.fonts.load(ctx.font)
.then(function() { measureMetrics(ctx) }, handleError);
});
</script>
<!DOCTYPE HTML>
<head>
<style>
@font-face {
font-family: Libertine;
src: url('../../third_party/Libertine/LinLibertine_R.woff');
}
</style>
</head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
function testTextMetrics(textMetrics, expected)
{
var w = textMetrics.width;
var ab = textMetrics.alphabeticBaseline;
var hb = textMetrics.hangingBaseline;
var ib = textMetrics.ideographicBaseline;
var fa = textMetrics.fontBoundingBoxAscent;
var fd = textMetrics.fontBoundingBoxDescent;
var ea = textMetrics.emHeightAscent;
var ed = textMetrics.emHeightDescent;
var lb = textMetrics.actualBoundingBoxLeft;
var rb = textMetrics.actualBoundingBoxRight;
var aa = textMetrics.actualBoundingBoxAscent;
var ad = textMetrics.actualBoundingBoxDescent;
var epsilon = 0.000001;
assert_equals(rb, Math.round(w), "testing width");
assert_approx_equals(ab, expected[0], epsilon, "testing alphabeticBaseline");
assert_approx_equals(hb, expected[1], epsilon, "testing hangingBaseline");
assert_approx_equals(ib, expected[2], epsilon, "testing ideographicBaseline");
assert_approx_equals(fa, expected[3], epsilon, "testing fontBoundingBoxAscent");
assert_approx_equals(fd, expected[4], epsilon, "testing fontBoundingBoxDescent");
assert_approx_equals(ea, expected[5], epsilon, "testing emHeightAscent");
assert_approx_equals(ed, expected[6], epsilon, "testing emHeightDescent");
assert_approx_equals(lb, expected[7], epsilon, "testing actualBoundingBoxLeft");
assert_approx_equals(aa, expected[8], epsilon, "testing actualBoundingBoxAscent");
assert_approx_equals(ad, expected[9], epsilon, "testing actualBoundingBoxDescent");
}
function measureMetrics(ctx)
{
var text = "Hello World";
ctx.textBaseline = "top";
var textMetrics = ctx.measureText(text);
var expected = [45, 9, 57, 0, 57, 0, 0, 0, -45, 95];
testTextMetrics(textMetrics, expected);
ctx.textBaseline = "hanging";
var textMetrics = ctx.measureText(text);
expected = [36, 0, 48, 9, 48, 0, 0, 0, -36, 86];
testTextMetrics(textMetrics, expected);
ctx.textBaseline = "middle";
var textMetrics = ctx.measureText(text);
expected = [16, -20, 28, 29, 28, 0, 0, 0, -16, 66];
testTextMetrics(textMetrics, expected);
ctx.textBaseline = "alphabetic";
var textMetrics = ctx.measureText(text);
expected = [0, -36, 12, 45, 12, 0, 0, 0, 0, 50];
testTextMetrics(textMetrics, expected);
ctx.textBaseline = "ideographic";
var textMetrics = ctx.measureText(text);
expected = [-12, -48, 0, 57, 0, 0, 0, 0, 12, 38];
testTextMetrics(textMetrics, expected);
ctx.textBaseline = "bottom";
var textMetrics = ctx.measureText(text);
expected = [-12, -48, 0, 57, 0, 0, 0, 0, 12, 38];
testTextMetrics(textMetrics, expected);
}
async_test(function() {
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
var ctx = canvas.getContext('2d');
ctx.font = '50px Libertine';
// Kick off loading of the font
ctx.fillText(" ", 0, 0);
document.fonts.addEventListener('loadingdone', function() {
measureMetrics(ctx);
});
this.done();
}, "Test all attributes of TextMetrics.");
</script>
<!DOCTYPE html>
<head>
<style>
@font-face {
font-family: Ahem;
src: url('../../resources/Ahem.ttf');
}
</style>
</head>
<body>
<p>On success, the red text "Hello World" should be tightly contained inside the two thin red lines.</p>
<canvas id="canvas" width="300" height="50"></canvas>
<script>
if (window.testRunner)
testRunner.dumpAsTextWithPixelResults();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var text = "Hello World";
ctx.font = "50px Ahem";
ctx.fillStyle = '#FF0000';
ctx.textBaseline = "top";
ctx.fillText(text, 1, 0);
var textMetrics = ctx.measureText(text);
ctx.fillRect(0, 0, 1, 50);
ctx.fillRect(Math.ceil(textMetrics.width), 0, 1, 50);
</script>
</body>
Baseline: top
Width: 211.5087890625
Alphabetic Baseline: 45
Hanging Baseline: 9
Ideographic Baseline: 57
Font Bounding Box Ascent: 0
Font Bounding Box Descent: 57
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 212
Actual Bounding Box Ascent (high): -45
Actual Bounding Box Ascent (low): -45
Actual Bounding Box Descent (high): 95
Actual Bounding Box Descent (low): 95
Baseline: hanging
Width: 211.5087890625
Alphabetic Baseline: 36
Hanging Baseline: 0
Ideographic Baseline: 48
Font Bounding Box Ascent: 9
Font Bounding Box Descent: 48
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 212
Actual Bounding Box Ascent (high): -36
Actual Bounding Box Ascent (low): -36
Actual Bounding Box Descent (high): 86
Actual Bounding Box Descent (low): 86
Baseline: middle
Width: 211.5087890625
Alphabetic Baseline: 16
Hanging Baseline: -20
Ideographic Baseline: 28
Font Bounding Box Ascent: 29
Font Bounding Box Descent: 28
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 212
Actual Bounding Box Ascent (high): -16
Actual Bounding Box Ascent (low): -16
Actual Bounding Box Descent (high): 66
Actual Bounding Box Descent (low): 66
Baseline: alphabetic
Width: 211.5087890625
Alphabetic Baseline: 0
Hanging Baseline: -36
Ideographic Baseline: 12
Font Bounding Box Ascent: 45
Font Bounding Box Descent: 12
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 212
Actual Bounding Box Ascent (high): 0
Actual Bounding Box Ascent (low): 0
Actual Bounding Box Descent (high): 50
Actual Bounding Box Descent (low): 50
Baseline: ideographic
Width: 211.5087890625
Alphabetic Baseline: -12
Hanging Baseline: -48
Ideographic Baseline: 0
Font Bounding Box Ascent: 57
Font Bounding Box Descent: 0
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 212
Actual Bounding Box Ascent (high): 12
Actual Bounding Box Ascent (low): 12
Actual Bounding Box Descent (high): 38
Actual Bounding Box Descent (low): 38
Baseline: bottom
Width: 211.5087890625
Alphabetic Baseline: -12
Hanging Baseline: -48
Ideographic Baseline: 0
Font Bounding Box Ascent: 57
Font Bounding Box Descent: 0
eM Height Ascent: 0
eM Height Descent: 0
Actual Bounding Box Left: 0
Actual Bounding Box Right: 212
Actual Bounding Box Ascent (high): 12
Actual Bounding Box Ascent (low): 12
Actual Bounding Box Descent (high): 38
Actual Bounding Box Descent (low): 38
Cannot automatically verify result
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment