Bug 1090168 - Reftests for textBaseline support in <canvas> vertical writing-mode text. r=jdaggett
authorJonathan Kew <jkew@mozilla.com>
Thu, 13 Nov 2014 08:58:05 +0000
changeset 215483 7abada342a017e5eba9aad79b6c581c3a8e08026
parent 215482 618d8f44d9e29ce6513f2833bf2f633f5dd56784
child 215484 6ec811674d955e1a17562b40fd3cda9b8292c492
push id27817
push usercbook@mozilla.com
push dateThu, 13 Nov 2014 15:21:11 +0000
treeherdermozilla-central@ae27ae77e32f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdaggett
bugs1090168
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1090168 - Reftests for textBaseline support in <canvas> vertical writing-mode text. r=jdaggett
layout/reftests/writing-mode/1090168-1-notref.html
layout/reftests/writing-mode/1090168-1-ref.html
layout/reftests/writing-mode/1090168-1.html
layout/reftests/writing-mode/1090168-2-ref.html
layout/reftests/writing-mode/1090168-2.html
layout/reftests/writing-mode/1090168-3-ref.html
layout/reftests/writing-mode/1090168-3.html
layout/reftests/writing-mode/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1090168-1-notref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+<script type="text/javascript">
+var testFont = '40px sans-serif';
+
+function test(x, y, text, style, rotation) {
+  var canvas = document.createElement("canvas");
+  canvas.width = 400;
+  canvas.height = 400;
+  canvas.style.cssText = 'position:absolute;' + style;
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  var ctx = canvas.getContext('2d');
+  ctx.globalAlpha = 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
+  ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
+  ctx.stroke();
+  ctx.globalAlpha = 1.0;
+  ctx.font = testFont;
+  if (rotation != 0) {
+    ctx.translate(x,y);
+    ctx.rotate(rotation);
+    ctx.translate(-x,-y);
+  }
+  ctx.fillText(text, x, y);
+}
+
+// Testcase: vertical text with orientation:sideways-right
+// test(100,  50, 'Hello', 'writing-mode:vertical-lr;text-orientation:sideways-right', 0);
+
+// Reference: horizontal text with 90° rotation
+// test(100,  50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2);
+
+// Non-reference: vertical text with orientation:mixed
+test(100,  50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1090168-1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+<script type="text/javascript">
+var testFont = '40px sans-serif';
+
+function test(x, y, text, style, rotation) {
+  var canvas = document.createElement("canvas");
+  canvas.width = 400;
+  canvas.height = 400;
+  canvas.style.cssText = 'position:absolute;' + style;
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  var ctx = canvas.getContext('2d');
+  ctx.globalAlpha = 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
+  ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
+  ctx.stroke();
+  ctx.globalAlpha = 1.0;
+  ctx.font = testFont;
+  if (rotation != 0) {
+    ctx.translate(x,y);
+    ctx.rotate(rotation);
+    ctx.translate(-x,-y);
+  }
+  ctx.fillText(text, x, y);
+}
+
+// Testcase: vertical text with orientation:sideways-right
+// test(100,  50, 'Hello', 'writing-mode:vertical-lr;text-orientation:sideways-right', 0);
+
+// Reference: horizontal text with 90° rotation
+test(100,  50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2);
+
+// Non-reference: vertical text with orientation:mixed
+// test(100,  50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1090168-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+<script type="text/javascript">
+var testFont = '40px sans-serif';
+
+function test(x, y, text, style, rotation) {
+  var canvas = document.createElement("canvas");
+  canvas.width = 400;
+  canvas.height = 400;
+  canvas.style.cssText = 'position:absolute;' + style;
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  var ctx = canvas.getContext('2d');
+  ctx.globalAlpha = 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
+  ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
+  ctx.stroke();
+  ctx.globalAlpha = 1.0;
+  ctx.font = testFont;
+  if (rotation != 0) {
+    ctx.translate(x,y);
+    ctx.rotate(rotation);
+    ctx.translate(-x,-y);
+  }
+  ctx.fillText(text, x, y);
+}
+
+// Testcase: vertical text with orientation:sideways-right
+test(100,  50, 'Hello', 'writing-mode:vertical-lr;text-orientation:sideways-right', 0);
+
+// Reference: horizontal text with 90° rotation
+// test(100,  50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2);
+
+// Non-reference: vertical text with orientation:mixed
+// test(100,  50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0);
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1090168-2-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+<script type="text/javascript">
+var testFont = '40px sans-serif';
+
+function test(x, y, text, style, rotation, baseline) {
+  var canvas = document.createElement("canvas");
+  canvas.width = 400;
+  canvas.height = 400;
+  canvas.style.cssText = 'position:absolute;' + style;
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  var ctx = canvas.getContext('2d');
+  ctx.globalAlpha = 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
+  ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
+  ctx.stroke();
+  ctx.globalAlpha = 1.0;
+  ctx.font = testFont;
+  if (rotation != 0) {
+    ctx.translate(x,y);
+    ctx.rotate(rotation);
+    ctx.translate(-x,-y);
+  }
+  if (baseline != '') {
+    ctx.textBaseline = baseline;
+  }
+  ctx.fillText(text, x, y);
+}
+
+// Testcase: vertical text with orientation:mixed
+// test(100,  50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0, '');
+
+// Reference: horizontal text with 90° rotation and textBaseline=middle
+test(100,  50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2, 'middle');
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1090168-2.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+<script type="text/javascript">
+var testFont = '40px sans-serif';
+
+function test(x, y, text, style, rotation, baseline) {
+  var canvas = document.createElement("canvas");
+  canvas.width = 400;
+  canvas.height = 400;
+  canvas.style.cssText = 'position:absolute;' + style;
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  var ctx = canvas.getContext('2d');
+  ctx.globalAlpha = 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
+  ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
+  ctx.stroke();
+  ctx.globalAlpha = 1.0;
+  ctx.font = testFont;
+  if (rotation != 0) {
+    ctx.translate(x,y);
+    ctx.rotate(rotation);
+    ctx.translate(-x,-y);
+  }
+  if (baseline != '') {
+    ctx.textBaseline = baseline;
+  }
+  ctx.fillText(text, x, y);
+}
+
+// Testcase: vertical text with orientation:mixed
+test(100,  50, 'Hello', 'writing-mode:vertical-lr;text-orientation:mixed', 0, '');
+
+// Reference: horizontal text with 90° rotation and textBaseline=middle
+// test(100,  50, 'Hello', 'writing-mode:horizontal-tb', Math.PI/2, 'middle');
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1090168-3-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+<script type="text/javascript">
+var testFont = '40px sans-serif';
+
+function test(x, y, text, style, rotation, baseline) {
+  var canvas = document.createElement("canvas");
+  canvas.width = 400;
+  canvas.height = 400;
+  canvas.style.cssText = 'position:absolute;' + style;
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  var ctx = canvas.getContext('2d');
+  ctx.globalAlpha = 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
+  ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
+  ctx.stroke();
+  ctx.globalAlpha = 1.0;
+  ctx.font = testFont;
+  if (rotation != 0) {
+    ctx.translate(x,y);
+    ctx.rotate(rotation);
+    ctx.translate(-x,-y);
+  }
+  if (baseline != '') {
+    ctx.textBaseline = baseline;
+  }
+  ctx.fillText(text, x, y);
+}
+
+// Testcase: vertical text with various textBaselines
+// test(100,  50, 'Top', 'writing-mode:vertical-lr', 0, 'top');
+// test(150,  50, 'Middle', 'writing-mode:vertical-lr', 0, 'middle');
+// test(200,  50, 'Alphabetic', 'writing-mode:vertical-lr', 0, 'alphabetic');
+// test(250,  50, 'Bottom', 'writing-mode:vertical-lr', 0, 'bottom');
+
+// Reference: horizontal text with 90° rotation and the same baselines
+test(100,  50, 'Top', 'writing-mode:horizontal-tb', Math.PI/2, 'top');
+test(150,  50, 'Middle', 'writing-mode:horizontal-tb', Math.PI/2, 'middle');
+test(200,  50, 'Alphabetic', 'writing-mode:horizontal-tb', Math.PI/2, 'alphabetic');
+test(250,  50, 'Bottom', 'writing-mode:horizontal-tb', Math.PI/2, 'bottom');
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/1090168-3.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+<script type="text/javascript">
+var testFont = '40px sans-serif';
+
+function test(x, y, text, style, rotation, baseline) {
+  var canvas = document.createElement("canvas");
+  canvas.width = 400;
+  canvas.height = 400;
+  canvas.style.cssText = 'position:absolute;' + style;
+  document.getElementsByTagName('body')[0].appendChild(canvas);
+  var ctx = canvas.getContext('2d');
+  ctx.globalAlpha = 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x - 20, y); ctx.lineTo(x + 20, y);
+  ctx.moveTo(x, y - 20); ctx.lineTo(x, y + 20);
+  ctx.stroke();
+  ctx.globalAlpha = 1.0;
+  ctx.font = testFont;
+  if (rotation != 0) {
+    ctx.translate(x,y);
+    ctx.rotate(rotation);
+    ctx.translate(-x,-y);
+  }
+  if (baseline != '') {
+    ctx.textBaseline = baseline;
+  }
+  ctx.fillText(text, x, y);
+}
+
+// Testcase: vertical text with various textBaselines
+test(100,  50, 'Top', 'writing-mode:vertical-lr', 0, 'top');
+test(150,  50, 'Middle', 'writing-mode:vertical-lr', 0, 'middle');
+test(200,  50, 'Alphabetic', 'writing-mode:vertical-lr', 0, 'alphabetic');
+test(250,  50, 'Bottom', 'writing-mode:vertical-lr', 0, 'bottom');
+
+// Reference: horizontal text with 90° rotation and the same baselines
+// test(100,  50, 'Top', 'writing-mode:horizontal-tb', Math.PI/2, 'top');
+// test(150,  50, 'Middle', 'writing-mode:horizontal-tb', Math.PI/2, 'middle');
+// test(200,  50, 'Alphabetic', 'writing-mode:horizontal-tb', Math.PI/2, 'alphabetic');
+// test(250,  50, 'Bottom', 'writing-mode:horizontal-tb', Math.PI/2, 'bottom');
+
+</script>
--- a/layout/reftests/writing-mode/reftest.list
+++ b/layout/reftests/writing-mode/reftest.list
@@ -4,10 +4,14 @@
 == 1082844.html 1082844-ref.html
 == 1083748.html 1083748-ref.html
 == 1083892-1.html 1083892-1-ref.html
 == 1086883-1a.html 1086883-1-ref.html
 == 1086883-1b.html 1086883-1-ref.html
 == 1088025-1.html 1088025-1-ref.html
 == 1089388-1.html 1089388-1-ref.html
 == 1089388-2.html 1089388-2-ref.html
+== 1090168-1.html 1090168-1-ref.html
+!= 1090168-1.html 1090168-1-notref.html
+== 1090168-2.html 1090168-2-ref.html
+== 1090168-3.html 1090168-3-ref.html
 == 1094914-1a.html 1094914-1-ref.html
 == 1094914-1b.html 1094914-1-ref.html