wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-24 09:27:31 +09:00
Code Issues Projects Releases Packages Wiki Activity

import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

Browse source
This commit is contained in:
Roy Tam 2018-01-19 03:59:58 +08:00
commit dcd9973243
150858 changed files with 23884658 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
layout/reftests/canvas/1074733-1-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function bodyonload() {
var canvas=document.getElementById('test');
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'green';
ctx.fillRect(-1, 50, 151, 50); // left at -1
ctx.fillStyle = 'red';
ctx.rect(-1, 100, 151, 50); // left at -1
ctx.fill();
ctx.fillStyle = 'blue';
ctx.fillRect(0, 150, 150, 50); // left at 0
}
</script>
</head>
<body onload="bodyonload();">
<canvas id="test" width="200" height="200"></canvas>
</body>
</html>

23
layout/reftests/canvas/1074733-1.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function bodyonload() {
var canvas=document.getElementById('test');
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'green';
ctx.fillRect(150, 50, -151, 50); // left at -1
ctx.fillStyle = 'red';
ctx.rect(150, 100, -151, 50); // left at -1
ctx.fill();
ctx.fillStyle = 'blue';
ctx.fillRect(150, 150, -150, 50); // left at 0
}
</script>
</head>
<body onload="bodyonload();">
<canvas id="test" width="200" height="200"></canvas>
</body>
</html>

23
layout/reftests/canvas/1107096-invisibles-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function draw() {
var c = document.getElementById('cc');
var g = c.getContext('2d');
g.fillStyle = 'red';
g.fillRect(0, 0, 200, 200);
g.font = '24px arial, sans-serif';
g.fillStyle = '#fff';
g.fillText('__', 10, 30);
g.fillText('__', 10, 60);
g.fillText('__', 10, 90);
g.fillText('__', 10, 120);
}
</script>
</head>
<body onload='draw()'>
<canvas id='cc' width='200' height='200'></canvas>
</body>
</html>

23
layout/reftests/canvas/1107096-invisibles.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function draw() {
var c = document.getElementById('cc');
var g = c.getContext('2d');
g.fillStyle = 'red';
g.fillRect(0, 0, 200, 200);
g.font = '24px arial, sans-serif';
g.fillStyle = '#fff';
g.fillText('_\u00AD_', 10, 30); // soft hyphen
g.fillText('_\u200B_', 10, 60); // ZWSP
g.fillText('_\u200C_', 10, 90); // ZWNJ
g.fillText('_\u200D_', 10, 120);// ZWJ
}
</script>
</head>
<body onload='draw()'>
<canvas id='cc' width='200' height='200'></canvas>
</body>
</html>

20
layout/reftests/canvas/1151821-1-ref.html Normal file
View file

@ -0,0 +1,20 @@
<!docytpe html>
<html>
<head>
<meta charset="UTF-8" />
<script>
window.onload=function(){
var c=document.getElementById("myCanvas").getContext("2d");
c.fillStyle="green";
c.fillRect(0, 0,100,100);
}
</script>
</head>
<body>
<canvas id="myCanvas" height=50 width=100></canvas>
</body>
</html>

26
layout/reftests/canvas/1151821-1.html Normal file
View file

@ -0,0 +1,26 @@
<!docytpe html>
<html>
<head>
<meta charset="UTF-8" />
<script>
window.onload=function(){
var c=document.getElementById("myCanvas").getContext("2d");
c.fillStyle = "green";
c.fillRect(0, 0,100,100);
c.fillStyle = "red";
c.globalCompositeOperation = "destination-over";
c.rect(0, 0, 100, 100);
c.clip();
c.fillRect(0, 0, 100, 100);
}
</script>
</head>
<body>
<canvas id="myCanvas" height=50 width=100></canvas>
</body>
</html>

33
layout/reftests/canvas/1201272-1-ref.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function draw() {
var ctx = document.getElementById('c').getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 74, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(75, 75, 40, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
ctx.lineWidth = 10;
ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.arc(75, 75, 40, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
}
</script>
</head>
<body onload='draw()' style='background: white;'>
<canvas id='c' width='200' height='200'></canvas>
</body>
</html>

36
layout/reftests/canvas/1201272-1.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function draw() {
var ctx = document.getElementById('c').getContext('2d');
ctx.beginPath();
ctx.arc(75, 75, 74, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.globalCompositeOperation = 'destination-out';
ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
ctx.shadowBlur = 3;
ctx.beginPath();
ctx.arc(75, 75, 40, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.shadowBlur = 0;
ctx.globalCompositeOperation = 'source-over';
ctx.lineWidth = 10;
ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.arc(75, 75, 40, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
}
</script>
</head>
<body onload='draw()' style='background: white;'>
<canvas id='c' width='200' height='200'></canvas>
</body>
</html>

2
layout/reftests/canvas/1224976-1-ref.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE HTML>
<div style="background:black; width:10px; height:10px"></div>

10
layout/reftests/canvas/1224976-1.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE HTML>
<canvas id="c"></canvas>
<script>
var ctx = c.getContext('2d');
ctx.scale(0,1);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 10, 10);
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillRect(0, 0, 10, 10);
</script>

20
layout/reftests/canvas/1238795-1-ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function draw() {
var c = document.getElementById('c').getContext('2d');
c.fillStyle = 'red';
c.fillRect(0, 0, 200, 200);
c.fillStyle = 'lime';
c.fillRect(0, 0, 100, 100);
}
</script>
</head>
<body onload="draw();">
<canvas id='c' width='200' height='200'></canvas>
</body>
</html>

24
layout/reftests/canvas/1238795-1.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function draw() {
var c = document.getElementById('c').getContext('2d');
var img = document.getElementById("img");
c.fillStyle = 'red';
c.fillRect(0, 0, 200, 200);
c.rect(0, 0, 100, 100);
c.clip();
c.drawImage(img, 0, 0, 200, 200);
}
</script>
</head>
<body onload="draw();">
<canvas id='c' width='200' height='200'></canvas>
<img id="img" src="image_green-16x16.png" style="display:none">
</body>
</html>

17
layout/reftests/canvas/1303534-1-ref.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function draw() {
var c = document.getElementById('c').getContext('2d');
c.fillStyle = 'lime';
c.fillRect(0, 0, 200, 100);
}
</script>
</head>
<body onload="draw();">
<canvas id='c' width='200' height='100'></canvas>
</body>
</html>

25
layout/reftests/canvas/1303534-1.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function draw() {
var c = document.getElementById('c').getContext('2d');
var img = document.getElementById("img");
c.fillStyle = 'lime';
c.fillRect(0, 0, 200, 100);
c.rect(0, 0, 200, 100);
c.clip();
c.globalCompositeOperation = "multiply";
c.fillStyle = 'rgb(255, 255, 255)';
c.fillRect(0, 0, 200, 100);
}
</script>
</head>
<body onload="draw();">
<canvas id='c' width='200' height='100'></canvas>
</body>
</html>

39
layout/reftests/canvas/1304353-text-global-alpha-1-ref.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function do_test() {
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
g.addColorStop(0, "red");
g.addColorStop(1, "green");
ctx.fillStyle = g;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.font = "bold 24px sans-serif";
ctx.fillText('globalAlpha = 1.0', 20, 40);
// for reference, use a fill color with alpha instead of global alpha
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fillText('globalAlpha = 0.5', 20, 80);
ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
ctx.fillText('globalAlpha = 0.2', 20, 120);
};
</script>
</head>
<body onload="do_test()">
<canvas id="test"></canvas>
</body>
</html>

38
layout/reftests/canvas/1304353-text-global-alpha-1.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function do_test() {
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
g.addColorStop(0, "red");
g.addColorStop(1, "green");
ctx.fillStyle = g;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.font = "bold 24px sans-serif";
ctx.fillText('globalAlpha = 1.0', 20, 40);
ctx.globalAlpha = 0.5;
ctx.fillText('globalAlpha = 0.5', 20, 80);
ctx.globalAlpha = 0.2;
ctx.fillText('globalAlpha = 0.2', 20, 120);
};
</script>
</head>
<body onload="do_test()">
<canvas id="test"></canvas>
</body>
</html>

39
layout/reftests/canvas/1304353-text-global-alpha-2-ref.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function do_test() {
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
g.addColorStop(0, "red");
g.addColorStop(1, "green");
ctx.fillStyle = g;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "white";
ctx.font = "bold 24px sans-serif";
ctx.strokeText('globalAlpha = 1.0', 20, 40);
// for reference, use a stroke color with alpha instead of global alpha
ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
ctx.strokeText('globalAlpha = 0.5', 20, 80);
ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
ctx.strokeText('globalAlpha = 0.2', 20, 120);
};
</script>
</head>
<body onload="do_test()">
<canvas id="test"></canvas>
</body>
</html>

38
layout/reftests/canvas/1304353-text-global-alpha-2.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
function do_test() {
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
g.addColorStop(0, "red");
g.addColorStop(1, "green");
ctx.fillStyle = g;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "white";
ctx.font = "bold 24px sans-serif";
ctx.strokeText('globalAlpha = 1.0', 20, 40);
ctx.globalAlpha = 0.5;
ctx.strokeText('globalAlpha = 0.5', 20, 80);
ctx.globalAlpha = 0.2;
ctx.strokeText('globalAlpha = 0.2', 20, 120);
};
</script>
</head>
<body onload="do_test()">
<canvas id="test"></canvas>
</body>
</html>

21
layout/reftests/canvas/1304353-text-global-composite-op-1-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<script>
function test() {
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 300, 75);
ctx.font = "36px sans-serif";
ctx.fillStyle = "white";
ctx.fillText("HELLO", 50, 50);
ctx.fillStyle = "green";
ctx.fillText("WORLD", 50, 120);
}
</script>
</head>
<body onload="test()">
<canvas id="c" width="300" height="150" style="-moz-osx-font-smoothing:grayscale"></canvas>
</body>
</html

24
layout/reftests/canvas/1304353-text-global-composite-op-1.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<script>
function test() {
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "red";
ctx.font = "36px sans-serif";
ctx.globalCompositeOperation = "destination-out";
ctx.fillText("HELLO", 50, 50);
ctx.rect(0, 75, 300, 75);
ctx.clip();
ctx.globalCompositeOperation = "destination-atop";
ctx.fillText("WORLD", 50, 120);
}
</script>
</head>
<body onload="test()">
<canvas id="c" width="300" height="150" style="-moz-osx-font-smoothing:grayscale"></canvas>
</body>
</html

19
layout/reftests/canvas/672646-alpha-radial-gradient-ref.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html>
<head>
<style>
body {
background-color: blue;
}
</style>
<body>
<canvas id="mycanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var cx = document.getElementById('mycanvas').getContext('2d');
cx.beginPath();
cx.arc(100, 100, 80, 0, Math.PI*2, true);
cx.closePath();
cx.fillStyle = "white";
cx.fill();
</script>

24
layout/reftests/canvas/672646-alpha-radial-gradient.html Normal file
View file

@ -0,0 +1,24 @@
<!doctype html>
<head>
<style>
body {
background-color: blue;
}
</style>
<body>
<canvas id="mycanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var cx = document.getElementById('mycanvas').getContext('2d');
var g = cx.createRadialGradient(100, 100, 50, 100, 100, 75);
g.addColorStop(0, 'rgba(100%, 100%, 0%, 0.5)');
g.addColorStop(1, 'rgba(100%, 100%, 0%, 0)');
cx.fillStyle = g;
cx.fillRect(0, 0, 200, 200);
cx.beginPath();
cx.arc(100, 100, 80, 0, Math.PI*2, true);
cx.closePath();
cx.fillStyle = "white";
cx.fill();
</script>

11
layout/reftests/canvas/674003-alpha-radial-gradient-superlum-ref.html Normal file
View file

@ -0,0 +1,11 @@
<body bgcolor="orange">
<canvas width="300" height="300" id="testcase-canvas-dest"></canvas>
<script>
const kTransparent = "rgba(0%, 100%, 100%, 0.5)";
cx2 = document.getElementById('testcase-canvas-dest').getContext('2d');
cx2.fillStyle = kTransparent;
cx2.fillRect(0,0,100,20);
</script>
</window>

36
layout/reftests/canvas/674003-alpha-radial-gradient-superlum.html Normal file
View file

@ -0,0 +1,36 @@
<body bgcolor="orange">
<canvas width="300" height="300" id="testcase-canvas" style="display:none"></canvas>
<canvas width="300" height="300" id="testcase-canvas-dest"></canvas>
<script>
const kShadow = "rgba(00%, 0%, 0%, 1)";
const kTransparent = "rgba(0%, 100%, 100%, 0.5)";
var cx, g;
cx = document.getElementById('testcase-canvas').getContext('2d');
cx.fillStyle = kShadow;
cx.fillRect(100, 50, 150, 50);
g = cx.createLinearGradient(0, 50, 0, 0);
g.addColorStop(0, kShadow);
g.addColorStop(0.2, kTransparent);
g.addColorStop(1, kTransparent);
cx.fillStyle = g;
cx.fillRect(100, 0, 150, 50);
g = cx.createRadialGradient(100, 100, 50, 100, 100, 100);
g.addColorStop(0, kShadow);
g.addColorStop(0.2, kTransparent);
g.addColorStop(1, kTransparent);
cx.fillStyle = g;
cx.beginPath();
cx.arc(100, 100, 100, Math.PI * 0.5, Math.PI * 1.5);
cx.fill();
cx2 = document.getElementById('testcase-canvas-dest').getContext('2d');
// draw a chunk of the gradients from above onto testcase-canvas-dest
cx2.drawImage(document.getElementById('testcase-canvas'),45,20, 100,20 ,0,0, 100,20);
</script>
</window>

18
layout/reftests/canvas/693610-1-notref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p><canvas width="500" height="200" id="c"></canvas></p>
<script type="text/javascript">
const t1 = '你好';
const t2 = 'Hello';
var c = document.getElementById('c').getContext('2d');
c.font = 'serif';
c.fontSize = '15';
c.fillText(t1, 10, 100);
c.fillText(t2, 10, 100);
</script>
</body>
</html>

16
layout/reftests/canvas/693610-1.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p><canvas width="500" height="200" id="c"></canvas></p>
<script type="text/javascript">
const t = '你好Hello';
var c = document.getElementById('c').getContext('2d');
c.font = 'serif';
c.fontSize = '15';
c.fillText(t, 10, 100);
</script>
</body>
</html>

18
layout/reftests/canvas/726951-shadow-clips-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!doctype html>
<head>
<body>
<canvas id="mycanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var cx = document.getElementById('mycanvas').getContext('2d');
cx.beginPath();
cx.rect(10, 10, 50, 50);
cx.clip();
cx.beginPath();
cx.rect(0, 0, 50, 50);
cx.shadowColor = "black";
cx.shadowOffsetX = 10;
cx.shadowOffsetY = 10;
cx.fill();
</script>

18
layout/reftests/canvas/726951-shadow-clips.html Normal file
View file

@ -0,0 +1,18 @@
<!doctype html>
<head>
<body>
<canvas id="mycanvas" width="200" height="600"></canvas>
<script type="text/javascript">
var cx = document.getElementById('mycanvas').getContext('2d');
cx.beginPath();
cx.rect(10, 10, 50, 50);
cx.clip();
cx.beginPath();
cx.rect(0, 0, 50, 50);
cx.shadowColor = "black";
cx.shadowOffsetX = 10;
cx.shadowOffsetY = 10;
cx.fill();
</script>

28
layout/reftests/canvas/749467-1-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p><canvas width="500" height="200" id="c"></canvas></p>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 20;
ctx.strokeStyle = 'rgb(0,0,0)';
ctx.moveTo(10, 30);
ctx.lineTo(50, 50);
ctx.stroke();
ctx.lineTo(80, 80);
ctx.stroke();
</script>
</body>
</html>

31
layout/reftests/canvas/749467-1.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p><canvas width="500" height="200" id="c"></canvas></p>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 20;
ctx.strokeStyle = 'rgb(0,0,0)';
ctx.save();
ctx.moveTo(10, 30);
ctx.lineTo(50, 50);
ctx.stroke();
ctx.restore();
ctx.lineTo(80, 80);
ctx.stroke();
</script>
</body>
</html>

28
layout/reftests/canvas/784573-1-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p><canvas width="100" height="100" id="c"></canvas></p>
<script type="text/javascript">
var c = document.getElementById('c').getContext('2d');
c.shadowColor = '#f00';
c.shadowBlur = 4;
c.lineWidth = 2;
c.moveTo(80, 40);
c.lineTo(50, 70);
c.lineTo(20, 40);
c.lineTo(50, 10);
c.closePath();
c.stroke();
</script>
</body>
</html>

36
layout/reftests/canvas/784573-1.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
This tests that paths are stored in device space. This means that changing
the transform does not move the points already drawn.
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<p><canvas width="100" height="100" id="c"></canvas></p>
<script type="text/javascript">
var c = document.getElementById('c').getContext('2d');
c.shadowColor = '#f00';
c.shadowBlur = 4;
c.lineWidth = 2;
c.translate(50, 40);
var d = 30;
c.beginPath();
c.moveTo(d, 0);
for (var n = 0; n < 3; n++) {
c.rotate(3.14159 / 2);
c.lineTo(d, 0);
}
c.closePath();
c.stroke();
</script>
</body>
</html>

25
layout/reftests/canvas/802658-1-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!docytpe html>
<html>
<head>
<meta charset="UTF-8" />
<script>
window.onload=function(){
var c=document.getElementById("myCanvas").getContext("2d");
c.font="35px sans-serif";
c.shadowBlur=60;
c.shadowColor="blue";
c.fillText("ABCDEFG",100,100);
}
</script>
</head>
<body>
<canvas id="myCanvas" height=400 width=400 style="border:1px solid black"></canvas>
</body>
</html>

26
layout/reftests/canvas/802658-1.html Normal file
View file

@ -0,0 +1,26 @@
<!docytpe html>
<html>
<head>
<meta charset="UTF-8" />
<script>
window.onload=function(){
var c=document.getElementById("myCanvas").getContext("2d");
c.font="35px sans-serif";
c.translate(100,100);
c.shadowBlur=60;
c.shadowColor="blue";
c.fillText("ABCDEFG",0,0);
}
</script>
</head>
<body>
<canvas id="myCanvas" height=400 width=400 style="border:1px solid black"></canvas>
</body>
</html>

18
layout/reftests/canvas/ctm-1-ref.html Normal file
View file

@ -0,0 +1,18 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("c1").getContext("2d");
ctx.setTransform(10, 0, 0, 1, 0, 0);
ctx.fillRect(1, 1, 10, 10);
ctx.setTransform(1, 0, 0, 10, 0, 0);
ctx.fillRect(150, 1, 10, 10);
}
</script>
</head>
<body style="padding: 0px; margin: 0px;">
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

18
layout/reftests/canvas/ctm-1.html Normal file
View file

@ -0,0 +1,18 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("c1").getContext("2d");
ctx.mozCurrentTransform = [ 10, 0, 0, 1, 0, 0 ];
ctx.fillRect(1, 1, 10, 10);
ctx.mozCurrentTransformInverse = [ 1, 0, 0, .1, 0, 0 ];
ctx.fillRect(150, 1, 10, 10);
}
</script>
</head>
<body style="padding: 0px; margin: 0px;">
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

83
layout/reftests/canvas/ctm-sanity.html Normal file
View file

@ -0,0 +1,83 @@
<html>
<head>
<script type="text/javascript">
function assert(cond, msg) { if (!cond) { throw msg; } }
function isSameTM(m1, m2) {
// XXX this is probably the ugliest possible way to write this function,
// but it's intended to be lowest-common-denominator
if (!(m1.length === 6 && m1.length === m2.length)) {
return false;
}
for (var i = 0; i < m1.length; ++i) {
if (m1[i] !== m2[i]) {
return false;
}
}
return true;
}
window.onload = function() {
var IM = [ 1, 0, 0, 1, 0, 0 ];
try {
var ctx = document.getElementById("c1").getContext("2d");
assert(isSameTM(IM, ctx.mozCurrentTransform),
"currentTransform is identity by default");
assert(isSameTM(IM, ctx.mozCurrentTransformInverse),
"currentTransformInverse is identity by default");
var m = [ 1, 2, 3, 4, 5, 6 ];
ctx.mozCurrentTransform = m;
assert(isSameTM(m, ctx.mozCurrentTransform),
"currentTransform successfully set");
var badVals = [ -1,
"string",
{ obj: true },
[ "array of string" ],
[ -1 ],
[ "string", 1, 2, 3, 4, 5 ],
[ { obj: true }, 1, 2, 3, 4, 5 ],
];
for (var i = 0; i < badVals.length; ++i) {
var error = false;
try { ctx.mozCurrentTransform = badVals[i]; }
catch(e) { error = true; }
assert(error && isSameTM(m, ctx.mozCurrentTransform),
"Expected |currentTransform = "+ badVals[i] +"| to throw exception and not change .currentTransform");
error = false;
try { ctx.mozCurrentTransformInverse = badVals[i]; }
catch(e) { error = true; }
assert(error && isSameTM(m, ctx.mozCurrentTransform),
"Expected |currentTransformInverse = "+ badVals[i] +"| to throw exception and not change .currentTransform");
}
ctx.mozCurrentTransform = IM;
var noopVals = [ [ Number.NaN, 1, 2, 3, 4, 5 ],
[ Infinity, 1, 2, 3, 4, 5 ],
];
for (var i = 0; i < noopVals.length; ++i) {
ctx.mozCurrentTransform = noopVals[i];
assert(isSameTM(ctx.mozCurrentTransform, IM),
"Illegal float values result in no-ops (sigh)");
}
ctx.mozCurrentTransform = IM;
ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);
assert(isSameTM(ctx.mozCurrentTransform, m),
"setTransform() updates currentTransform");
} catch (e) {
document.body.innerHTML = "FAIL: "+ e.toString();
return;
}
document.body.innerHTML = "Pass";
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

53
layout/reftests/canvas/ctm-singular-sanity.html Normal file
View file

@ -0,0 +1,53 @@
<html>
<head>
<script type="text/javascript">
function assert(cond, msg) { if (!cond) { throw msg; } }
function isSameTM(m1, m2) {
// XXX this is probably the ugliest possible way to write this function,
// but it's intended to be lowest-common-denominator
if (!(m1.length === 6 && m1.length === m2.length)) {
return false;
}
for (var i = 0; i < m1.length; ++i) {
if (m1[i] !== m2[i]) {
return false;
}
}
return true;
}
window.onload = function() {
var IM = [ 1, 0, 0, 1, 0, 0 ];
try {
var ctx = document.getElementById("c1").getContext("2d");
var singular = [ 0, 0, 0, 0, 0, 0 ];
ctx.mozCurrentTransform = singular;
assert(isSameTM(singular, ctx.mozCurrentTransform),
"Expected setting CTM to a singular matrix to work");
var inv = ctx.mozCurrentTransformInverse;
assert(!isSameTM(inv, inv),
"Expected to get back matrix of NaN's from currentTransformInverse");
ctx.mozCurrentTransform = IM;
var m = [ 1, 2, 3, 4, 5, 6 ];
ctx.mozCurrentTransform = m;
ctx.mozCurrentTransformInverse = singular;
assert(isSameTM(m, ctx.mozCurrentTransform),
"Setting currentTransformInverse to a singular matrix is a no-op");
ctx.mozCurrentTransform = IM;
} catch (e) {
document.body.innerHTML = "FAIL: "+ e.toString();
return;
}
document.body.innerHTML = "Pass";
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

18
layout/reftests/canvas/dash-1-ref.svg Normal file
View file

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg"
width="300" height="300" viewBox="0 0 300 300" >
<style>
line { stroke: black; stroke-width: 5px; }
</style>
<line x1="50px" y1="50px" x2="250px" y2="50px"
style="stroke-dasharray: 5px, 10px">
</line>
<line x1="50px" y1="100px" x2="250px" y2="100px"
style="stroke-dasharray: 5px, 10px; stroke-dashoffset: 5px;">
</line>
<line x1="50px" y1="150px" x2="250px" y2="150px"
style="stroke-dasharray: 5px; stroke-dashoffset: 5px;">
</line>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 532 B

34
layout/reftests/canvas/dash-1.html Normal file
View file

@ -0,0 +1,34 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("c1").getContext("2d");
ctx.lineWidth = 5;
ctx.setLineDash([ 5, 10 ]); // 5 on, 10 off
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.stroke();
ctx.beginPath();
ctx.lineDashOffset = 5;
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();
ctx.beginPath();
ctx.lineDashOffset = 5;
ctx.setLineDash([ 5 ]); // 5 on, 5 off
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.stroke();
ctx.beginPath();
}
</script>
</head>
<body style="padding: 0px; margin: 0px;">
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

98
layout/reftests/canvas/dash-sanity.html Normal file
View file

@ -0,0 +1,98 @@
<html>
<head>
<script type="text/javascript">
function assert(cond, msg) { if (!cond) { throw msg; } }
window.onload = function() {
try {
var ctx = document.getElementById("c1").getContext("2d");
assert(0 === ctx.getLineDash().length,
"Default dash is [ ] (none)");
assert(0 === ctx.lineDashOffset,
"Default dashOffset is 0 (none)");
ctx.setLineDash([ 2 ]);
assert(2 === ctx.getLineDash().length &&
2 === ctx.getLineDash()[0] &&
2 === ctx.getLineDash()[1],
"dash = [ 2 ] works");
ctx.setLineDash([ 2 ]);
ctx.setLineDash([ ]);
assert(0 === ctx.getLineDash().length,
"dash = [ ] works");
ctx.setLineDash([ 2 ]);
ctx.setLineDash([ 0, 0, 0 ]);
assert(6 === ctx.getLineDash().length,
0 === ctx.getLineDash()[0] &&
0 === ctx.getLineDash()[1] &&
0 === ctx.getLineDash()[2] &&
0 === ctx.getLineDash()[3] &&
0 === ctx.getLineDash()[4] &&
0 === ctx.getLineDash()[5],
"dash = [ 0, 0, 0 ] works");
ctx.setLineDash([ 2 ]);
assert(0 === ctx.lineDashOffset, "dashOffset is 0");
ctx.lineDashOffset = 1;
assert(1 === ctx.lineDashOffset, "Setting dashOffset succeeded");
ctx.setLineDash([ ]);
assert(1 === ctx.lineDashOffset, "Changing dash does not reset dashOffset");
// NB: might want to add a |.dash = number| special case,
// don't test that it fails here. Might also want to add a
// |.dash = [0]| special case for resetting, so don't test
// that either.
var badVals = [ -1,
null,
undefined,
"",
"string",
{ obj: true },
function() {}
]
ctx.setLineDash([ 2 ]);
for (var i = 0; i < badVals.length; ++i) {
var error = false;
try { ctx.setLineDash(badVals[i]); }
catch(e) { error = true; }
assert(error &&
2 === ctx.getLineDash().length &&
2 === ctx.getLineDash()[0] &&
2 === ctx.getLineDash()[1],
"Expected setLineDash("+ badVals[i] +") to throw exception and not change dash");
}
var ignoredVals = [
[ "array of string" ],
[ -1 ],
[ 2, "string" ],
];
ctx.setLineDash([ 2 ]);
for (var i = 0; i < ignoredVals.length; ++i) {
ctx.setLineDash(ignoredVals[i]);
assert(2 === ctx.getLineDash().length &&
2 === ctx.getLineDash()[0] &&
2 === ctx.getLineDash()[1],
"Expected |setLineDash(" + ignoredVals[i] + ") to not change dash");
}
ctx.setLineDash([ 2 ]);
ctx.save();
ctx.setLineDash([ 1, 1, 1, 1 ]);
ctx.restore();
assert(2 === ctx.getLineDash().length &&
2 === ctx.getLineDash()[0] &&
2 === ctx.getLineDash()[1],
"dash was saved then restored");
} catch (e) {
document.body.innerHTML = "FAIL: "+ e.toString();
return;
}
document.body.innerHTML = "Pass";
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

7
layout/reftests/canvas/default-size-ref.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE HTML>
<html>
<body>
<canvas style="border: 1px solid black;" width="300" height="150">
</canvas>
</body>
</html>

7
layout/reftests/canvas/default-size.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE HTML>
<html>
<body>
<canvas style="border: 1px solid black;">
</canvas>
</body>
</html>

6
layout/reftests/canvas/empty-transaction-1-ref.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE HTML>
<html>
<body>
<div style="background:black; width:100px; height:100px;"></div>
</body>
</html>

14
layout/reftests/canvas/empty-transaction-1.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<body>
<canvas style="display:block" id="c" width="100" height="100"></canvas>
<script>
var ctx = document.getElementById("c").getContext("2d");
function doTest() {
document.documentElement.removeAttribute("class");
ctx.fillRect(0, 0, 100, 100);
}
window.addEventListener("MozReftestInvalidate", doTest, false);
</script>
</body>
</html>

15
layout/reftests/canvas/evenodd-fill-1.html Normal file
View file

@ -0,0 +1,15 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("c1").getContext("2d");
ctx.rect(50, 50, 200, 200);
ctx.rect(100, 100, 100, 100);
ctx.fill("evenodd");
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

19
layout/reftests/canvas/evenodd-fill-2.html Normal file
View file

@ -0,0 +1,19 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("c1").getContext("2d");
ctx.mozFillRule = "evenodd";
ctx.rect(50, 50, 200, 200);
ctx.rect(100, 100, 100, 100);
ctx.clip();
ctx.beginPath();
ctx.fillRect(0, 0, 300, 300);
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

26
layout/reftests/canvas/evenodd-fill-3.html Normal file
View file

@ -0,0 +1,26 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("c1").getContext("2d");
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 250);
ctx.lineTo(50, 250);
ctx.lineTo(50, 50);
ctx.moveTo(100, 100);
ctx.lineTo(100, 200);
ctx.lineTo(200, 200);
ctx.lineTo(200, 100);
ctx.lineTo(100, 100);
ctx.fill("evenodd");
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

17
layout/reftests/canvas/evenodd-fill-ref.html Normal file
View file

@ -0,0 +1,17 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("c1").getContext("2d");
ctx.rect(50, 50, 200, 50);
ctx.rect(50, 50, 50, 200);
ctx.rect(250, 250, -200, -50);
ctx.rect(250, 250, -50, -200);
ctx.fill();
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

43
layout/reftests/canvas/evenodd-fill-sanity.html Normal file
View file

@ -0,0 +1,43 @@
<html>
<head>
<script type="text/javascript">
function assert(cond, msg) { if (!cond) { throw msg; } }
window.onload = function() {
try {
var ctx = document.getElementById("c1").getContext("2d");
assert("nonzero" == ctx.mozFillRule,
"Default fillRule is 'nonzero'");
ctx.mozFillRule = "evenodd";
assert("evenodd" == ctx.mozFillRule,
"fillRule understands 'evenodd'");
ctx.mozFillRule = "nonzero";
ctx.mozFillRule = "garbageLSKJDF 29879234";
assert("nonzero" == ctx.mozFillRule,
"Garbage fillRule string has no effect");
ctx.mozFillRule = "evenodd";
ctx.mozFillRule = "garbageLSKJDF 29879234";
assert("evenodd" == ctx.mozFillRule,
"Garbage fillRule string has no effect");
ctx.mozFillRule = "nonzero";
ctx.save();
ctx.mozFillRule = "evenodd";
ctx.restore();
assert("nonzero" == ctx.mozFillRule,
"fillRule was saved then restored");
} catch (e) {
document.body.innerHTML = "FAIL: "+ e.toString();
return;
}
document.body.innerHTML = "Pass";
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

26
layout/reftests/canvas/image-rendering-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
-->
<html>
<head>
<title>reference image-rendering</title>
<style>
canvas { position:absolute;left:0px;top:0px; }
</style>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(50,50,200,200);
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(50,50,100,100);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

29
layout/reftests/canvas/image-rendering-test.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/licenses/publicdomain/
-->
<html reftest-zoom="2" class="reftest-wait">
<head>
<title>test image-rendering</title>
<style>
canvas { position:absolute;left:0px;top:0px; }
</style>
<script type="text/javascript">
document.addEventListener("MozReftestInvalidate", draw, false);
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(25,25,100,100);
ctx.fillStyle = "rgb(0,255,0)";
ctx.fillRect(25,25,50,50);
document.documentElement.removeAttribute('class');
}
</script>
</head>
<body>
<canvas style="image-rendering: -moz-crisp-edges; " id="canvas" width="300" height="300"></canvas>
</body>
</html>

7
layout/reftests/canvas/image-shadow-ref.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE HTML>
<html>
<body>
<div style="background:lime; width:16px; height:16px;"></div>
<div style="background:black; width:16px; height:10px;"></div>
</body>
</html>

18
layout/reftests/canvas/image-shadow.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE HTML>
<html>
<body onload="doTest()">
<canvas id="c" width="200" height="200" style="display:block"></canvas>
<img id="img" src="image_green-16x16.png" style="display:none">
<script>
var c = document.getElementById("c");
var img = document.getElementById("img");
var ctx = c.getContext("2d");
ctx.shadowColor = "black";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 10;
function doTest() {
ctx.drawImage(img, 0, 0);
}
</script>
</body>
</html>

BIN
layout/reftests/canvas/image_green-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 92 B

3
layout/reftests/canvas/linear-gradient-1-ref.html Normal file
View file

@ -0,0 +1,3 @@
<!doctype html>
<div style="width:300px; height: 150px; background: #0000ff"></div>
<div style="width:300px; height: 150px; background: #ff0000"></div>

14
layout/reftests/canvas/linear-gradient-1a.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html>
<body>
<canvas id="canvas" width="300" height="300">
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var grad = ctx.createLinearGradient(0,150,0,450);
grad.addColorStop(0, '#0000ff');
grad.addColorStop(0, '#ff0000');
ctx.fillStyle = grad;
ctx.fillRect(0,0,300,300);
</script>
</body>

14
layout/reftests/canvas/linear-gradient-1b.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html>
<body>
<canvas id="canvas" width="300" height="300">
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var grad = ctx.createLinearGradient(0,-150,0,150);
grad.addColorStop(1, '#0000ff');
grad.addColorStop(1, '#ff0000');
ctx.fillStyle = grad;
ctx.fillRect(0,0,300,300);
</script>
</body>

15
layout/reftests/canvas/nonzero-fill-1.html Normal file
View file

@ -0,0 +1,15 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("c1").getContext("2d");
ctx.rect(50, 50, 200, 200);
ctx.rect(100, 100, 100, 100);
ctx.fill();
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

26
layout/reftests/canvas/nonzero-fill-2.html Normal file
View file

@ -0,0 +1,26 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById("c1").getContext("2d");
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 250);
ctx.lineTo(50, 250);
ctx.lineTo(50, 50);
ctx.moveTo(100, 100);
ctx.lineTo(100, 200);
ctx.lineTo(200, 200);
ctx.lineTo(200, 100);
ctx.lineTo(100, 100);
ctx.fill();
}
</script>
</head>
<body>
<div><canvas id="c1" width="300" height="300"></canvas></div>
</body>
</html>

122
layout/reftests/canvas/reftest-stylo.list Normal file
View file

@ -0,0 +1,122 @@
# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
== default-size.html default-size.html
skip-if(B2G||Mulet) fuzzy-if(Android,8,1000) == size-1.html size-1.html
# Initial mulet triage: parity with B2G/B2G Desktop
== empty-transaction-1.html empty-transaction-1.html
== image-rendering-test.html image-rendering-test.html
== image-shadow.html image-shadow.html
skip-if(B2G||Mulet) asserts-if(cocoaWidget,0-2) == size-change-1.html size-change-1.html
# Initial mulet triage: parity with B2G/B2G Desktop
random-if(cocoaWidget) == subpixel-1.html subpixel-1.html
# see bug 1192616, re-enable once we're off the pandaboards
== text-ltr-left.html text-ltr-left.html
== text-ltr-right.html text-ltr-right.html
== text-rtl-left.html text-rtl-left.html
== text-rtl-right.html text-rtl-right.html
== text-ltr-start.html text-ltr-start.html
== text-ltr-end.html text-ltr-end.html
== text-ltr-left.html text-ltr-left.html
== text-rtl-start.html text-rtl-start.html
== text-rtl-end.html text-rtl-end.html
== text-rtl-left.html text-rtl-left.html
== text-ltr-left.html text-ltr-left.html
== text-ltr-alignment-test.html text-ltr-alignment-test.html
== text-rtl-alignment-test.html text-rtl-alignment-test.html
fuzzy-if((B2G||Mulet)&&azureSkiaGL,1,256) == text-horzline-with-bottom.html text-horzline-with-bottom.html
# Initial mulet triage: parity with B2G/B2G Desktop
fuzzy-if((B2G||Mulet)&&azureSkiaGL,1,256) fails-if(azureSkia&&OSX>=1008) == text-horzline-with-top.html text-horzline-with-top.html
# Initial mulet triage: parity with B2G/B2G Desktop
== text-big-stroke.html text-big-stroke.html
== text-big-stroke.html text-big-stroke.html
== text-context-state-test.html text-context-state-test.html
== text-font-inherit.html text-font-inherit.html
== text-space-replace-test.html text-space-replace-test.html
== text-no-frame-test.html text-no-frame-test.html
== text-no-frame-2-test.html text-no-frame-2-test.html
fuzzy-if(azureSkiaGL,10,400) == text-not-in-doc-test.html text-not-in-doc-test.html
== text-bidi-ltr-test.html text-bidi-ltr-test.html
== text-bidi-ltr-test.html text-bidi-ltr-test.html
# for bug 698185
== text-bidi-rtl-test.html text-bidi-rtl-test.html
skip-if(B2G||Mulet) == text-font-lang.html text-font-lang.html
# Initial mulet triage: parity with B2G/B2G Desktop
== text-measure.html text-measure.html
== text-small-caps-1.html text-small-caps-1.html
random-if(!d2d) == text-subpixel-1.html text-subpixel-1.html
== strokeText-path.html strokeText-path.html
# check that emoji character renders as something non-blank (for Apple Color Emoji font, bug 715798)
# apparently fails on some 10.7 systems for unknown reasons, bug 804522.
## Currently fails most places due to partial backout of bug 808288, see bug 837461.
## (Marking "random" rather than "fails" because it would pass for people
## if they have an Emoji font installed when running the tests.)
## WAS: random-if(OSX==1007) == text-emoji.html text-emoji.html
# With Skia canvas on OS X (bug 932958) it fails even on 10.8 and 10.10.
random-if(cocoaWidget&&azureSkia) random-if(!cocoaWidget||OSX==1006||OSX==1007) == text-emoji.html text-emoji.html
# azure quartz uses CGDrawLinearGradient instead of DrawShading
# so we have less control over degenerate behaviour as tested by this
# test
skip == linear-gradient-1a.html linear-gradient-1a.html
# this passes with cairo on 10.7 and 10.8 but not with azure for reasons unknown
skip == linear-gradient-1b.html linear-gradient-1b.html
== zero-dimensions.html zero-dimensions.html
== evenodd-fill-sanity.html evenodd-fill-sanity.html
== evenodd-fill-1.html evenodd-fill-1.html
== evenodd-fill-1.html evenodd-fill-1.html
random-if(azureSkiaGL) == evenodd-fill-2.html evenodd-fill-2.html
== evenodd-fill-3.html evenodd-fill-3.html
== dash-sanity.html dash-sanity.html
fuzzy-if(azureSkia||skiaContent,9,470) random-if(Android) == dash-1.html dash-1.html
# Bug 668412 (really is android-specific, not IPC-specific)
== ctm-sanity.html ctm-sanity.html
== ctm-singular-sanity.html ctm-singular-sanity.html
== ctm-1.html ctm-1.html
fails-if(azureQuartz&&OSX==1006) == 672646-alpha-radial-gradient.html 672646-alpha-radial-gradient.html
# Bug 673333
== 674003-alpha-radial-gradient-superlum.html 674003-alpha-radial-gradient-superlum.html
== 693610-1.html 693610-1.html
# bug 693610: multiple glyph runs should not be overprinted
== 726951-shadow-clips.html 726951-shadow-clips.html
== transformed-clip.html transformed-clip.html
fuzzy-if(azureSkia,1,15) fuzzy-if(skiaContent,1,20) == transformed-gradient.html transformed-gradient.html
== transformed-path.html transformed-path.html
== 749467-1.html 749467-1.html
# You get a little bit of rounding fuzz on OSX from transforming the paths between user space and device space
fuzzy-if(azureQuartz,2,128) fuzzy-if(d2d,12,21) fuzzy-if(skiaContent,12,7) fuzzy-if(d2d&&/^Windows\x20NT\x2010\.0/.test(http.oscpu),2,141) == 784573-1.html 784573-1.html
== 802658-1.html 802658-1.html
== 1074733-1.html 1074733-1.html
fuzzy-if(Mulet,45,2) == 1107096-invisibles.html 1107096-invisibles.html
== 1151821-1.html 1151821-1.html
== 1201272-1.html 1201272-1.html
== 1224976-1.html 1224976-1.html
== 1238795-1.html 1238795-1.html

113
layout/reftests/canvas/reftest.list Normal file
View file

@ -0,0 +1,113 @@
== default-size.html default-size-ref.html
fuzzy-if(Android,8,1000) == size-1.html size-1-ref.html
== empty-transaction-1.html empty-transaction-1-ref.html
== image-rendering-test.html image-rendering-ref.html
== image-shadow.html image-shadow-ref.html
asserts-if(cocoaWidget,0-2) == size-change-1.html size-change-1-ref.html
random-if(cocoaWidget) == subpixel-1.html about:blank # see bug 1192616, re-enable once we're off the pandaboards
!= text-ltr-left.html text-blank.html
!= text-ltr-right.html text-blank.html
!= text-rtl-left.html text-blank.html
!= text-rtl-right.html text-blank.html
== text-ltr-start.html text-ltr-left.html
== text-ltr-end.html text-ltr-right.html
!= text-ltr-left.html text-ltr-right.html
== text-rtl-start.html text-rtl-right.html
== text-rtl-end.html text-rtl-left.html
!= text-rtl-left.html text-rtl-right.html
== text-ltr-left.html text-rtl-left.html
== text-ltr-alignment-test.html text-ltr-alignment-ref.html
== text-rtl-alignment-test.html text-rtl-alignment-ref.html
== text-horzline-with-bottom.html text-horzline.html
fails-if(azureSkia&&OSX>=1008) == text-horzline-with-top.html text-horzline.html
!= text-big-stroke.html text-blank.html
!= text-big-stroke.html text-big-fill.html
== text-context-state-test.html text-context-state-ref.html
== text-font-inherit.html text-big-fill.html
== text-space-replace-test.html text-space-replace-ref.html
== text-no-frame-test.html text-no-frame-ref.html
== text-no-frame-2-test.html text-not-in-doc-ref.html
fuzzy-if(azureSkiaGL,10,400) == text-not-in-doc-test.html text-not-in-doc-ref.html
== text-bidi-ltr-test.html text-bidi-ltr-ref.html
!= text-bidi-ltr-test.html text-bidi-ltr-notref.html # for bug 698185
== text-bidi-rtl-test.html text-bidi-rtl-ref.html
!= text-font-lang.html text-font-lang-notref.html
== text-measure.html text-measure-ref.html
== text-small-caps-1.html text-small-caps-1-ref.html
random-if(!d2d) != text-subpixel-1.html text-subpixel-1-ref.html
== strokeText-path.html strokeText-path-ref.html
# check that emoji character renders as something non-blank (for Apple Color Emoji font, bug 715798)
# apparently fails on some 10.7 systems for unknown reasons, bug 804522.
## Currently fails most places due to partial backout of bug 808288, see bug 837461.
## (Marking "random" rather than "fails" because it would pass for people
## if they have an Emoji font installed when running the tests.)
## WAS: random-if(OSX==1007) != text-emoji.html text-emoji-notref.html
# With Skia canvas on OS X (bug 932958) it fails even on 10.8 and 10.10.
random-if(cocoaWidget&&azureSkia) random-if(!cocoaWidget||OSX==1006||OSX==1007) != text-emoji.html text-emoji-notref.html
# azure quartz uses CGDrawLinearGradient instead of DrawShading
# so we have less control over degenerate behaviour as tested by this
# test
fails-if((azureSkia&&!azureSkiaGL)||azureQuartz||(azureSkiaGL&&Android)) == linear-gradient-1a.html linear-gradient-1-ref.html
# this passes with cairo on 10.7 and 10.8 but not with azure for reasons unknown
fails-if((azureSkia&&!azureSkiaGL)||azureQuartz||(azureSkiaGL&&Android)) == linear-gradient-1b.html linear-gradient-1-ref.html
== zero-dimensions.html zero-dimensions-ref.html
!= evenodd-fill-1.html nonzero-fill-1.html
== evenodd-fill-1.html evenodd-fill-ref.html
== dash-sanity.html data:text/html,<body>Pass
fuzzy-if(azureSkia||skiaContent,9,470) random-if(Android) == dash-1.html dash-1-ref.svg # Bug 668412 (really is android-specific, not IPC-specific)
== ctm-sanity.html data:text/html,<body>Pass
== ctm-singular-sanity.html data:text/html,<body>Pass
== ctm-1.html ctm-1-ref.html
fails-if(azureQuartz&&OSX==1006) == 672646-alpha-radial-gradient.html 672646-alpha-radial-gradient-ref.html # Bug 673333
== 674003-alpha-radial-gradient-superlum.html 674003-alpha-radial-gradient-superlum-ref.html
!= 693610-1.html 693610-1-notref.html # bug 693610: multiple glyph runs should not be overprinted
== 726951-shadow-clips.html 726951-shadow-clips-ref.html
== transformed-clip.html transformed-clip-ref.html
fuzzy-if(azureSkia,1,15) fuzzy-if(skiaContent,1,20) == transformed-gradient.html transformed-gradient-ref.html
== transformed-path.html transformed-path.html
== 749467-1.html 749467-1-ref.html
# You get a little bit of rounding fuzz on OSX from transforming the paths between user space and device space
fuzzy-if(azureQuartz,2,128) fuzzy-if(d2d,12,21) fuzzy-if(skiaContent,12,7) fuzzy-if(d2d&&/^Windows\x20NT\x2010\.0/.test(http.oscpu),2,141) == 784573-1.html 784573-1-ref.html
== 802658-1.html 802658-1-ref.html
== 1074733-1.html 1074733-1-ref.html
== 1107096-invisibles.html 1107096-invisibles-ref.html
== 1151821-1.html 1151821-1-ref.html
== 1201272-1.html 1201272-1-ref.html
== 1224976-1.html 1224976-1-ref.html
== 1238795-1.html 1238795-1-ref.html
== 1303534-1.html 1303534-1-ref.html
== 1304353-text-global-alpha-1.html 1304353-text-global-alpha-1-ref.html
fuzzy-if(winWidget,1,14) == 1304353-text-global-alpha-2.html 1304353-text-global-alpha-2-ref.html
fuzzy-if(winWidget,94,1575) fuzzy-if(cocoaWidget,1,24) == 1304353-text-global-composite-op-1.html 1304353-text-global-composite-op-1-ref.html

9
layout/reftests/canvas/size-1-ref.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE HTML>
<html>
<body>
<div style="background:lime; width:100px; height:30000px;"></div>
<script>
window.scrollTo(0, 100000);
</script>
</body>
</html>

12
layout/reftests/canvas/size-1.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE HTML>
<html>
<body>
<canvas style="display:block" id="c" width="100" height="30000"></canvas>
<script>
var ctx = document.getElementById("c").getContext("2d");
ctx.fillStyle = "lime";
ctx.fillRect(0, 0, 100, 30000);
window.scrollTo(0, 100000);
</script>
</body>
</html>

6
layout/reftests/canvas/size-change-1-ref.html Normal file
View file

@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div style="width:200px; height:200px; background:lime"></div>
</body>
</html>

22
layout/reftests/canvas/size-change-1.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class="reftest-wait">
<body>
<canvas width="100" height="100" id="c"></canvas>
<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0,0,100,100);
function finishTest() {
c.width = 200;
c.height = 200;
ctx.fillStyle = "lime";
ctx.fillRect(0,0,200,200);
document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", finishTest, false);
</script>
</body>
</html>

23
layout/reftests/canvas/strokeText-path-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"><!--
window.onload = function () {
var canvas = document.getElementById('testCanvas'),
context = canvas.getContext('2d');
// draw some text
context.font = 'bold 40px sans-serif';
context.strokeText("Hello world!", 10, 50);
};
// --></script>
</head>
<body>
<p>You should see only see "Hello world!" below, without any additional
line. JavaScript is required.</p>
<p><canvas id="testCanvas" width="400" height="300">You need Canvas
support.</canvas></p>
</body>
</html>

33
layout/reftests/canvas/strokeText-path.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"><!--
window.onload = function () {
var canvas = document.getElementById('testCanvas'),
context = canvas.getContext('2d');
// draw a path
context.beginPath();
context.moveTo(10, 10);
context.lineTo(200, 10);
context.lineTo(200, 200);
context.stroke();
context.closePath();
context.clearRect(0, 0, canvas.width, canvas.height);
// draw some text
context.font = 'bold 40px sans-serif';
context.strokeText("Hello world!", 10, 50);
};
// --></script>
</head>
<body>
<p>You should see only see "Hello world!" below, without any additional
line. JavaScript is required.</p>
<p><canvas id="testCanvas" width="400" height="300">You need Canvas
support.</canvas></p>
</body>
</html>

14
layout/reftests/canvas/subpixel-1.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas"></canvas>
<script>
var c = canvas.getContext('2d');
c.font = "8pt sans-serif";
c.textAlign = "center";
c.textBaseline = "middle";
c.fillStyle = "white";
c.fillText("Test Text", canvas.width / 2, canvas.height / 2);
</script>
</body>
</html>

22
layout/reftests/canvas/text-bidi-ltr-notref.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure bidi is resolved correctly</title>
</head>
<body>
<canvas id="c" width="256" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// Bug 698185 caused the RTL and trailing LTR runs to be lost
// var str = "hello\u05E9\u05DC\u05D5\u05DDgoodbye";
var str = "hello";
ctx.fillStyle = 'black';
ctx.font = '10px sans-serif';
ctx.fillText(str, 128, 32);
</script>
</body>
</html>

20
layout/reftests/canvas/text-bidi-ltr-ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure bidi is resolved correctly</title>
</head>
<body>
<canvas id="c" width="256" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = "hello\u202D\u05DD\u05D5\u05DC\u05E9\u202Cgoodbye";
ctx.fillStyle = 'black';
ctx.font = '10px sans-serif';
ctx.fillText(str, 128, 32);
</script>
</body>
</html>

20
layout/reftests/canvas/text-bidi-ltr-test.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure bidi is resolved correctly</title>
</head>
<body>
<canvas id="c" width="256" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = "hello\u05E9\u05DC\u05D5\u05DDgoodbye";
ctx.fillStyle = 'black';
ctx.font = '10px sans-serif';
ctx.fillText(str, 128, 32);
</script>
</body>
</html>

20
layout/reftests/canvas/text-bidi-rtl-ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure bidi is resolved correctly</title>
</head>
<body>
<canvas id="c" width="256" height="64" style="direction:rtl"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = "goodbye\u202D\u05DD\u05D5\u05DC\u05E9\u202Chello";
ctx.fillStyle = 'black';
ctx.font = '10px sans-serif';
ctx.fillText(str, 128, 32);
</script>
</body>
</html>

20
layout/reftests/canvas/text-bidi-rtl-test.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure bidi is resolved correctly</title>
</head>
<body>
<canvas id="c" width="256" height="64" style="direction:rtl"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = "hello\u05E9\u05DC\u05D5\u05DDgoodbye";
ctx.fillStyle = 'black';
ctx.font = '10px sans-serif';
ctx.fillText(str, 128, 32);
</script>
</body>
</html>

22
layout/reftests/canvas/text-big-fill.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure fillText and strokeText look different</title>
</head>
<body>
<canvas id="c" width="128" height="64"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'text';
ctx.fillStyle = 'black';
ctx.strokeStyle = 'black';
ctx.font = 'bold 64px sans-serif';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(str, 0, 0);
</script>
</body>
</html>

22
layout/reftests/canvas/text-big-stroke.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure fillText and strokeText look different</title>
</head>
<body>
<canvas id="c" width="128" height="64"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'text';
ctx.fillStyle = 'black';
ctx.strokeStyle = 'black';
ctx.font = 'bold 64px sans-serif';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.strokeText(str, 0, 0);
</script>
</body>
</html>

14
layout/reftests/canvas/text-blank.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Blank Canvas</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
</script>
</body>
</html>

32
layout/reftests/canvas/text-context-state-ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<title>text to ensure text attributes are saved in the context state</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.font = '16px sans-serif';
ctx.fillText('yet another thing', 0, 0);
ctx.textAlign = 'right';
ctx.textBaseline = 'alphabetic';
ctx.font = '24px serif';
ctx.fillText('other thing', 128, 40);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.font = '10px sans-serif';
ctx.fillText('something', 80, 60);
</script>
</body>
</html>

40
layout/reftests/canvas/text-context-state-test.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE HTML>
<html>
<head>
<title>text to ensure text attributes are saved in the context state</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.font = '16px sans-serif';
ctx.save();
ctx.textAlign = 'right';
ctx.textBaseline = 'alphabetic';
ctx.font = '24px serif';
ctx.save();
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.font = '10px sans-serif';
ctx.fillText('something', 80, 60);
ctx.restore();
ctx.fillText('other thing', 128, 40);
ctx.restore();
ctx.fillText('yet another thing', 0, 0);
</script>
</body>
</html>

28
layout/reftests/canvas/text-emoji-notref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test for Unicode emoji in canvas</title>
<script type="text/javascript">
function test(canvasID) {
var canvas = document.getElementById(canvasID);
var ctx = canvas.getContext('2d');
var str = 'Hello';
ctx.font = '2em sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(str, 10, 10);
};
</script>
</head>
<body>
<div lang="en" style="margin:20px; height:100px;">
<canvas id="c1" width="400" height="50"></canvas>
<script type="text/javascript">
test("c1");
</script>
</div>
</body>
</html>

28
layout/reftests/canvas/text-emoji.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test for Unicode emoji in canvas</title>
<script type="text/javascript">
function test(canvasID) {
var canvas = document.getElementById(canvasID);
var ctx = canvas.getContext('2d');
var str = 'Hello \uD83D\uDE0E'; // U+1F60E
ctx.font = '2em sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(str, 10, 10);
};
</script>
</head>
<body>
<div lang="en" style="margin:20px; height:100px;">
<canvas id="c1" width="400" height="50"></canvas>
<script type="text/javascript">
test("c1");
</script>
</div>
</body>
</html>

21
layout/reftests/canvas/text-font-inherit.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure font inherits CSS values</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="font:32px sans-serif;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'text';
ctx.fillStyle = 'black';
ctx.font = 'bold 2em sans-serif';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(str, 0, 0);
</script>
</body>
</html>

50
layout/reftests/canvas/text-font-lang-notref.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test for language-sensitive font prefs on canvas</title>
<script type="text/javascript">
function test(canvasID) {
var canvas = document.getElementById(canvasID);
var ctx = canvas.getContext('2d');
var str = 'Hello world! \u4F60\u597D\u5417\uFF1F';
ctx.font = '2em sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(str, 10, 10);
};
</script>
</head>
<body>
<div lang="en" style="margin:20px; height:100px;">
<canvas id="c1" width="400" height="50"></canvas>
<script type="text/javascript">
test("c1");
</script>
</div>
<div lang="en" style="margin:20px; height:100px;">
<canvas id="c2" width="400" height="50"></canvas>
<script type="text/javascript">
test("c2");
</script>
</div>
<div lang="en" style="margin:20px; height:100px;">
<canvas id="c3" width="400" height="50"></canvas>
<script type="text/javascript">
test("c3");
</script>
</div>
<div lang="en" style="margin:20px; height:100px;">
<canvas id="c4" width="400" height="50"></canvas>
<script type="text/javascript">
test("c4");
</script>
</div>
</body>
</html>

56
layout/reftests/canvas/text-font-lang.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test for language-sensitive font prefs on canvas</title>
<script type="text/javascript">
function test(canvasID) {
var canvas = document.getElementById(canvasID);
var ctx = canvas.getContext('2d');
var str = 'Hello world! \u4F60\u597D\u5417\uFF1F';
ctx.font = '2em sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(str, 10, 10);
};
</script>
</head>
<body>
<!--
In the reference, all divs are tagged with lang="en".
The expectation is that at least some of them will resolve
"sans-serif" to different fonts according to language.
-->
<div lang="ar" style="margin:20px; height:100px;">
<canvas id="c1" width="400" height="50"></canvas>
<script type="text/javascript">
test("c1");
</script>
</div>
<div lang="ja" style="margin:20px; height:100px;">
<canvas id="c2" width="400" height="50"></canvas>
<script type="text/javascript">
test("c2");
</script>
</div>
<div lang="zh-TW" style="margin:20px; height:100px;">
<canvas id="c3" width="400" height="50"></canvas>
<script type="text/javascript">
test("c3");
</script>
</div>
<div lang="en" style="margin:20px; height:100px;">
<canvas id="c4" width="400" height="50"></canvas>
<script type="text/javascript">
test("c4");
</script>
</div>
</body>
</html>

27
layout/reftests/canvas/text-horzline-with-bottom.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure bottom basline-anchored text doesn't intersect horz line</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(0,32);
ctx.lineTo(128,32);
ctx.stroke();
ctx.font = '20px sans-serif';
ctx.textBaseline = 'bottom';
ctx.fillText('TEXT', 64, 32);
</script>
</body>
</html>

27
layout/reftests/canvas/text-horzline-with-top.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure top basline-anchored text doesn't intersect horz line</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(0,32);
ctx.lineTo(128,32);
ctx.stroke();
ctx.font = '30px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('TEXT', 64, 32);
</script>
</body>
</html>

20
layout/reftests/canvas/text-horzline.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Horizontal Line</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(0,32);
ctx.lineTo(128,32);
ctx.stroke();
</script>
</body>
</html>

29
layout/reftests/canvas/text-ltr-alignment-ref.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure left/right and start/end are offset by text width for ltr text</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.font = '20px sans-serif';
ctx.textBaseline = 'top';
var str = 'TEXT';
var wid = ctx.measureText(str).width;
ctx.textAlign = 'left';
ctx.fillText(str, 64, 0);
ctx.textAlign = 'start';
ctx.fillText(str, 64, 20);
ctx.textAlign = 'center';
ctx.fillText(str, 64, 40);
</script>
</body>
</html>

29
layout/reftests/canvas/text-ltr-alignment-test.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure left/right and start/end are offset by text width for ltr text</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.font = '20px sans-serif';
ctx.textBaseline = 'top';
var str = 'TEXT';
var wid = ctx.measureText(str).width;
ctx.textAlign = 'right';
ctx.fillText(str, 64+wid, 0);
ctx.textAlign = 'end';
ctx.fillText(str, 64+wid, 20);
ctx.textAlign = 'left';
ctx.fillText(str, 64-wid/2, 40);
</script>
</body>
</html>

19
layout/reftests/canvas/text-ltr-end.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<title>end-aligned ltr text</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'text';
ctx.fillStyle = 'black';
ctx.textAlign = 'end';
ctx.fillText(str, 64, 32);
</script>
</body>
</html>

19
layout/reftests/canvas/text-ltr-left.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<title>left-aligned ltr text</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'text';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.fillText(str, 64, 32);
</script>
</body>
</html>

19
layout/reftests/canvas/text-ltr-right.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<title>right-aligned ltr text</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'text';
ctx.fillStyle = 'black';
ctx.textAlign = 'right';
ctx.fillText(str, 64, 32);
</script>
</body>
</html>

19
layout/reftests/canvas/text-ltr-start.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<title>start-aligned ltr text</title>
</head>
<body>
<canvas id="c" width="128" height="64" style="direction:ltr"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'text';
ctx.fillStyle = 'black';
ctx.textAlign = 'start';
ctx.fillText(str, 64, 32);
</script>
</body>
</html>

15
layout/reftests/canvas/text-measure-ref.html Normal file
View file

@ -0,0 +1,15 @@
<html>
<script>
function load() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "bold 12px sans-serif";
ctx.scale(4, 4);
var str = "HeHeHeHe";
ctx.fillText(str, 0, 15);
}
</script>
<body onload="load();">
<canvas id="canvas" width="400" height="200"></canvas>
</body>
</html>

19
layout/reftests/canvas/text-measure.html Normal file
View file

@ -0,0 +1,19 @@
<html>
<script>
function load() {
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "bold 12px sans-serif";
ctx.scale(4, 4);
var str = "HeHeHeHe";
var x = 0;
for (var i = 0; i < str.length; ++i) {
ctx.fillText(str[i], x, 15);
x += ctx.measureText(str[i]).width;
}
}
</script>
<body onload="load();">
<canvas id="canvas" width="400" height="200"></canvas>
</body>
</html>

29
layout/reftests/canvas/text-no-frame-2-test.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure non-framed canvas inherits properties</title>
</head>
<body>
<div style="font: 20px sans-serif;">
<div style="display: none;">
<canvas id="c" width="512" height="256"></canvas>
</div>
<canvas id="d" width="512" height="256"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'BLEARGH!';
ctx.font = '1em sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText(str, 256, 128);
var canvas2 = document.getElementById('d');
var ctx = canvas2.getContext('2d');
ctx.drawImage(canvas, 0, 0);
</script>
</body>
</html>

21
layout/reftests/canvas/text-no-frame-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure non-framed canvas inherits properties</title>
</head>
<body>
<div style="font: 40px sans-serif">
<canvas id="c" width="512" height="256" style="direction: rtl;"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'BLEARGH!';
ctx.font = '1em sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText(str, 256, 128);
</script>
</body>
</html>

27
layout/reftests/canvas/text-no-frame-test.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure non-framed canvas inherits properties</title>
</head>
<body>
<div style="font: 40px sans-serif; direction: rtl;">
<canvas id="c" width="512" height="256" style="display: none;"></canvas>
</div>
<canvas id="d" width="512" height="256"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'BLEARGH!';
ctx.font = '1em sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText(str, 256, 128);
var canvas2 = document.getElementById('d');
var ctx = canvas2.getContext('2d');
ctx.drawImage(canvas, 0, 0);
</script>
</body>
</html>

21
layout/reftests/canvas/text-not-in-doc-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure canvas not in doc gets default properties</title>
</head>
<body>
<div style="font: 10px sans-serif; direction: ltr">
<canvas id="c" width="512" height="256"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var str = 'BLEARGH!';
ctx.font = '2em sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText(str, 256, 128);
</script>
</body>
</html>

26
layout/reftests/canvas/text-not-in-doc-test.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test to ensure canvas not in doc gets default properties</title>
</head>
<body>
<canvas id="d" width="512" height="256"></canvas>
<script type="text/javascript">
var canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 526;
var ctx = canvas.getContext('2d');
var str = 'BLEARGH!';
ctx.font = '2em sans-serif';
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.fillText(str, 256, 128);
var canvas2 = document.getElementById('d');
var ctx = canvas2.getContext('2d');
ctx.drawImage(canvas, 0, 0);
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more