third_party/WebKit/LayoutTests/canvas/philip/tests/2d.text.draw.text.metrics.html - Issue 2232243002: Rewrite canvas/philip/tests/2d.text.draw.text.metrics.html test

Side by Side Diff: third_party/WebKit/LayoutTests/canvas/philip/tests/2d.text.draw.text.metrics.html

Issue 2232243002: Rewrite canvas/philip/tests/2d.text.draw.text.metrics.html test (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: needs to be a async_test Created 4 years, 4 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/canvas/philip/tests/2d.text.draw.text.metrics-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE html>

2 <title>Canvas test: 2d.text.draw.text.metrics</title>

3 <script src="../tests.js"></script>

4 <link rel="stylesheet" href="../tests.css">

5 <style>

6 @font-face {

7 font-family: Libertine;

8 src: url("../../../third_party/Libertine/LinLibertine_R.woff");

9 }

10 </style>

11 <body>

12 <p id="passtext">Pass</p>

13 <p id="failtext">Fail</p>

14 <p class="output">These images should be identical:</p>

15 <canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL ( fallback content)</p></canvas>

16 <p class="output expectedtext">Expected output:<p><img src="green-100x50.png" cl ass="output expected" id="expected" alt="">

17 <ul id="d"></ul>

18 <script>

19 function _printTextMetrics(ctx) {

20 var someText = "Some Text";

21 var highText = "M";

22 var lowText = "q";

23 var textMetrics = ctx.measureText(someText);

24 var highTextMetrics = ctx.measureText(highText);

25 var lowTextMetrics = ctx.measureText(lowText);

26 var w = textMetrics.width;

27 var ab = textMetrics.alphabeticBaseline;

28 var hb = textMetrics.hangingBaseline;

29 var ib = textMetrics.ideographicBaseline;

30 var fa = textMetrics.fontBoundingBoxAscent;

31 var fd = textMetrics.fontBoundingBoxDescent;

32 var ea = textMetrics.emHeightAscent;

33 var ed = textMetrics.emHeightDescent;

34 var lb = textMetrics.actualBoundingBoxLeft;

35 var rb = textMetrics.actualBoundingBoxRight;

36

37 var ah = highTextMetrics.actualBoundingBoxAscent;

38 var al = lowTextMetrics.actualBoundingBoxAscent;

39 var dh = highTextMetrics.actualBoundingBoxDescent;

40 var dl = lowTextMetrics.actualBoundingBoxDescent;

41

42 _warn("Width: " + w);

43 _warn("Alphabetic Baseline: " + ab);

44 _warn("Hanging Baseline: " + hb);

45 _warn("Ideographic Baseline: " + ib);

46 _warn("Font Bounding Box Ascent: " + fa);

47 _warn("Font Bounding Box Descent: " + fd);

48 _warn("eM Height Ascent: " + ea);

49 _warn("eM Height Descent: " + ed);

50 _warn("Actual Bounding Box Left: " + lb);

51 _warn("Actual Bounding Box Right: " + rb);

52 _warn("Actual Bounding Box Ascent (high): " + ah);

53 _warn("Actual Bounding Box Ascent (low): " + al);

54 _warn("Actual Bounding Box Descent (high): " + dh);

55 _warn("Actual Bounding Box Descent (low): " + dl);

56 }

57

58

59 function measureMetrics(ctx) {

60 ctx.fillStyle = '#f00';

61 ctx.fillRect(0, 0, 100, 50);

62 ctx.fillStyle = '#0f0';

63

64 ctx.textBaseline="top";

65 _warn("Baseline: top");

66 _printTextMetrics(ctx);

67

68 ctx.textBaseline="hanging";

69 _warn("Baseline: hanging");

70 _printTextMetrics(ctx);

71

72 ctx.textBaseline="middle";

73 _warn("Baseline: middle");

74 _printTextMetrics(ctx);

75

76 ctx.textBaseline="alphabetic";

77 _warn("Baseline: alphabetic");

78 _printTextMetrics(ctx);

79

80 ctx.textBaseline="ideographic";

81 _warn("Baseline: ideographic");

82 _printTextMetrics(ctx);

83

84 ctx.textBaseline="bottom";

85 _warn("Baseline: bottom");

86 _printTextMetrics(ctx);

87

88 endTest();

89 }

90

91 function handleError() {

92 _warn("Unable to load required test font.");

93 endTest();

94 }

95

96 _addTest(function(canvas, ctx) {

97 ctx.font = '50px Libertine';

98 deferTest();

99 document.fonts.load(ctx.font)

100 .then(function() { measureMetrics(ctx) }, handleError);

101 });

102 </script>

103

OLD	NEW