Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-30 16:49:16 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #5433 - dmarcos:issue5290, r=jdm

Browse source
This commit is contained in:
bors-servo 2015-04-07 18:38:34 -05:00
commit 58637a1174
86 changed files with 1380 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

46
tests/html/test_canvas_drawimage.html → tests/html/test_canvas_drawimage_canvas.html
View file

@ -171,50 +171,6 @@ function renderExample(title) {
return container;
}
function drawImage() {
var args = Array.prototype.slice.call(arguments);
var div = renderExample('drawImage(' + args.toString() + ')');
var canvasEls = div.querySelectorAll('canvas');
var canvas1 = canvasEls[0];
var canvas2 = canvasEls[1];
canvas1.width = imageSource.width;
canvas1.height = imageSource.height;
var ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = "#00FFFF";
ctx1.fillRect(0, 0, imageSource.width, imageSource.height);
ctx1.fillStyle = "#000000";
ctx1.fillRect(5,5,40,40);
ctx1.clearRect(10,10,30,30);
ctx1.strokeRect(15,15,20,20);
canvas2.width = destCanvas.width;
canvas2.height = destCanvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = "#FF0000";
ctx2.fillRect(0, 0, destCanvas.width, destCanvas.height);
ctx2.imageSmoothingEnabled = smoothingEnabled;
args.unshift(canvas1);
try {
ctx2.drawImage.apply(ctx2, args);
}
catch(err) {
var title = div.querySelector('.example-title');
var error = document.createElement('h2');
error.setAttribute('class', 'example-title error');
div.insertBefore(error, title);
error.textContent += "Call Failed: " + err.message;
}
document.body.appendChild(div);
};
function drawImage() {
var args = Array.prototype.slice.call(arguments);
@ -260,4 +216,4 @@ function drawImage() {
</script>
</body>
</html>
</html>

209
tests/html/test_canvas_drawimage_html_image.html Normal file
View file

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style type=''>
html {
font-family: helvetica, sans-serif;
}
canvas, img {
margin: 10px;
border: 1px solid grey;
}
.example {
display: inline-block;
width: 280px;
margin-top: 50px;
margin-right: 50px;
}
.title {
text-align: center;
}
.description {
width: 100%;
}
.description div {
display: inline-block;
text-align: center;
font-size: 13px;
}
.description .source {
width: 100px;
}
.description .target {
width: 130px;
}
.example-title {
text-align: center;
font-size: 16px;
}
.error {
color: red;
}
</style>
<body>
<h1 class="title">DrawImage canvas to canvas</h1>
</body>
<script type="text/javascript">
var smoothingEnabled = false;
var examplesNum = 0;
var imageSource = {
width: 100,
height: 100
};
var destCanvas = {
width: 100,
height: 100
};
// 2 arguments, the dest origin is 0,0
// The source canvas will copied to the 0,0 position of the destination canvas
drawImage(0, 0);
// 2 arguments, the dest origin is not 0,0
// The source canvas will copied to the 25, 25 position of the destination canvas
drawImage(25, 25);
// 4 arguments, the source origin is not 0,0, the dest size is provided
// The source canvas will copied to the 50, 50 position of the destination canvas and
// on an area of 50x50 pixels
drawImage(50, 50, 50, 50);
// 4 arguments, the dest origin is not 0,0 and the dest size is provided but
// does not match the size of the source. The image will be distorted
// The source canvas will copied to the 50,50 position of the destination canvas
// and it will be shrunk to a and area of 25x25
drawImage(50, 50, 25, 25);
// The source canvas will copied to the 50,50 position of the destination canvas
// over an area of 50x25 pixels
// The copied image will be distorted along the x axis
drawImage(50, 50, 50, 25);
// 8 arguments, both destination and source origins are 0, 0
// An area of 25x25 pixels of the source image will be copied to
// an area of 25x25 pixels of the destination canvas
drawImage(0, 0, 25, 25, 0, 0, 25, 25);
// 8 arguments the destination origin is not 0,0
// An area of 25x25 pixels of the source image will be copied to
// an area of 25x25 pixels of the destination canvas in the position 25,25
drawImage(0, 0, 25, 25, 25, 25, 25, 25);
// The source rectangle overflows the source image
// The source area is clipped to fit the source image
// and the destination are is clipped in the same proportion
drawImage(25, 25, 50, 50, 0, 0, 50, 50);
// The destination rectangle has negative width and height
// An exception is raised and nothing is drawn
drawImage(25, 25, 50, 50, 0, 0, -100, -100);
// The destination rectangle is larger thant the destination canvas
// When the destination rectangle is outside the destination image (the scratch bitmap), the pixels
// that land outside the scratch bitmap are discarded, as if the destination was an infinite canvas
// whose rendering was clipped to the dimensions of the scratch bitmap.
drawImage(0, 0, 50, 50, 0, 0, 200, 200);
// The source rectangle is larger than the source canvas
// The source area is clipped to fit the source image
// and the destination are is clipped in the same proportion
drawImage(0, 0, 100, 100, 0, 0, 50, 50);
// Negative coorditanes of the source rectangle
// The source area is clipped to fit the source image
// and the destination are is clipped in the same proportion
drawImage(-25, -25, 50, 50, 0, 0, 50, 50);
// Example with non squared origin and source canvases
imageSource = {
width: 100,
height: 50
};
destCanvas = {
width: 100,
height: 50
};
//drawImage(0, 0);
function renderExample(title) {
var container = document.createElement('div');
container.id = 'example' + examplesNum++;
container.setAttribute('class', 'example');
var h2 = document.createElement('h2');
h2.textContent = title;
h2.setAttribute('class', 'example-title');
container.appendChild(h2);
var div1 = document.createElement('div');
var canvas1 = document.createElement('canvas');
var img = document.createElement('img');
img.src = 'rust-0.png';
div1.appendChild(img);
div1.appendChild(canvas1);
container.appendChild(div1);
var div2 = document.createElement('div');
div2.setAttribute('class', 'description');
var source = document.createElement('div');
source.textContent = ' Source (' + imageSource.width + ',' + imageSource.height + ')';
source.setAttribute('class', 'source');
var arrow = document.createElement('div');
arrow.textContent = ' -> ';
arrow.setAttribute('class', 'arrow');
var target = document.createElement('div');
target.textContent = 'Target (' + destCanvas.width + ',' + destCanvas.height + ')';
target.setAttribute('class', 'target');
div2.appendChild(source);
div2.appendChild(arrow);
div2.appendChild(target);
container.appendChild(div2);
return container;
}
function drawImage() {
var args = Array.prototype.slice.call(arguments);
var div = renderExample('drawImage(' + args.toString() + ')');
var canvas = div.querySelectorAll('canvas')[0];
var img = div.querySelectorAll('img')[0];
img.width = imageSource.width;
img.height = imageSource.height;
canvas.width = destCanvas.width;
canvas.height = destCanvas.height;
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, destCanvas.width, destCanvas.height);
ctx.imageSmoothingEnabled = smoothingEnabled;
args.unshift(img);
try {
ctx.drawImage.apply(ctx, args);
}
catch(err) {
var title = div.querySelector('.example-title');
var error = document.createElement('h2');
error.setAttribute('class', 'example-title error');
div.insertBefore(error, title);
error.textContent += "Call Failed: " + err.message;
}
document.body.appendChild(div);
}
</script>
</body>
</html>

0
tests/ref/2dcontext/drawimage_1.html → tests/ref/2dcontext/drawimage_canvas_1.html
View file

11
tests/ref/2dcontext/drawimage_10.html → tests/ref/2dcontext/drawimage_canvas_10.html
View file

@ -31,12 +31,13 @@ destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// The destination rectangle is larger thant the destination canvas
// When the destination rectangle is outside the destination image (the scratch bitmap), the pixels
// that land outside the scratch bitmap are discarded, as if the destination was an infinite canvas
// whose rendering was clipped to the dimensions of the scratch bitmap.
// The destination rectangle is larger than the destination canvas
// When the destination rectangle is outside the destination image (the scratch bitmap),
// the pixels that land outside the scratch bitmap are discarded,
// as if the destination was an infinite canvas whose rendering was
// clipped to the dimensions of the scratch bitmap.
destCtx.drawImage(sourceCanvas, 0, 0, 50, 50, 0, 0, 200, 200);
</script>
</body>
</html>
</html>

0
tests/ref/2dcontext/drawimage_10_ref.html → tests/ref/2dcontext/drawimage_canvas_10_ref.html
View file

0
tests/ref/2dcontext/drawimage_11.html → tests/ref/2dcontext/drawimage_canvas_11.html
View file

0
tests/ref/2dcontext/drawimage_11_ref.html → tests/ref/2dcontext/drawimage_canvas_11_ref.html
View file

4
tests/ref/2dcontext/drawimage_12.html → tests/ref/2dcontext/drawimage_canvas_12.html
View file

@ -31,9 +31,9 @@ destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// Negative coorditanes of the source rectangle
// Negative coordinates of the source rectangle
// The source area is clipped to fit the source image
// and the destination are is clipped in the same proportion
// and the destination area is clipped in the same proportion
destCtx.drawImage(sourceCanvas, -25, -25, 50, 50, 0, 0, 50, 50);
</script>

0
tests/ref/2dcontext/drawimage_12_ref.html → tests/ref/2dcontext/drawimage_canvas_12_ref.html
View file

0
tests/ref/2dcontext/drawimage_1_ref.html → tests/ref/2dcontext/drawimage_canvas_1_ref.html
View file

0
tests/ref/2dcontext/drawimage_2.html → tests/ref/2dcontext/drawimage_canvas_2.html
View file

0
tests/ref/2dcontext/drawimage_2_ref.html → tests/ref/2dcontext/drawimage_canvas_2_ref.html
View file

0
tests/ref/2dcontext/drawimage_3.html → tests/ref/2dcontext/drawimage_canvas_3.html
View file

0
tests/ref/2dcontext/drawimage_3_ref.html → tests/ref/2dcontext/drawimage_canvas_3_ref.html
View file

0
tests/ref/2dcontext/drawimage_4.html → tests/ref/2dcontext/drawimage_canvas_4.html
View file

0
tests/ref/2dcontext/drawimage_4_ref.html → tests/ref/2dcontext/drawimage_canvas_4_ref.html
View file

3
tests/ref/2dcontext/drawimage_5.html → tests/ref/2dcontext/drawimage_canvas_5.html
View file

@ -34,9 +34,8 @@ destCtx.imageSmoothingEnabled = smoothingEnabled;
// The source canvas will copied to the 50,50 position of the destination canvas
// over an area of 50x25 pixels
// The copied image will be distorted along the x axis
destCtx.drawImage(sourceCanvas, 50, 50, 50, 20);
</script>
</body>
</html>
</html>

0
tests/ref/2dcontext/drawimage_5_ref.html → tests/ref/2dcontext/drawimage_canvas_5_ref.html
View file

0
tests/ref/2dcontext/drawimage_6.html → tests/ref/2dcontext/drawimage_canvas_6.html
View file

0
tests/ref/2dcontext/drawimage_6_ref.html → tests/ref/2dcontext/drawimage_canvas_6_ref.html
View file

0
tests/ref/2dcontext/drawimage_7.html → tests/ref/2dcontext/drawimage_canvas_7.html
View file

0
tests/ref/2dcontext/drawimage_7_ref.html → tests/ref/2dcontext/drawimage_canvas_7_ref.html
View file

0
tests/ref/2dcontext/drawimage_8.html → tests/ref/2dcontext/drawimage_canvas_8.html
View file

0
tests/ref/2dcontext/drawimage_8_ref.html → tests/ref/2dcontext/drawimage_canvas_8_ref.html
View file

0
tests/ref/2dcontext/drawimage_9.html → tests/ref/2dcontext/drawimage_canvas_9.html
View file

0
tests/ref/2dcontext/drawimage_9_ref.html → tests/ref/2dcontext/drawimage_canvas_9_ref.html
View file

34
tests/ref/2dcontext/drawimage_html_image_1.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../rust-0.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// 2 arguments, the dest origin is 0,0
// The source canvas will copied to the 0,0 position of the destination canvas
destCtx.drawImage(sourceImg, 0, 0);
</script>
</body>
</html>

38
tests/ref/2dcontext/drawimage_html_image_10.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 128;
var sourceHeight = 128;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// The destination rectangle is larger than the destination canvas.
// When the destination rectangle is outside the destination image (the scratch bitmap),
// the pixels that land outside the scratch bitmap are discarded,
// as if the destination was an infinite canvas
// whose rendering was clipped to the dimensions of the scratch bitmap.
destCtx.drawImage(sourceImg, 0, 0, 512, 512, 0, 0, 256, 256);
</script>
</body>
</html>

19
tests/ref/2dcontext/drawimage_html_image_10_ref.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-image: url("../2x2.png");
}
</style>
<body>
<div id="destination"></div>
</body>
</html>

36
tests/ref/2dcontext/drawimage_html_image_11.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 128;
var sourceHeight = 128;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// The source rectangle is larger than the source canvas
// The source area is clipped to fit the source image
// and the destination are is clipped in the same proportion
destCtx.drawImage(sourceImg, 0, 0, 2048, 2048, 0, 0, 800, 800);
</script>
</body>
</html>

19
tests/ref/2dcontext/drawimage_html_image_11_ref.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: #FA6FF2;
}
</style>
<body>
<div id="destination" height="100" width="100"></canvas>
</body>
</html>

36
tests/ref/2dcontext/drawimage_html_image_12.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 128;
var sourceHeight = 128;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// Negative coordinates of the source rectangle
// The source area is clipped to fit the source image
// and the destination area is clipped in the same proportion
destCtx.drawImage(sourceImg, -25, -25, 50, 50, 0, 0, 50, 50);
</script>
</body>
</html>

32
tests/ref/2dcontext/drawimage_html_image_12_ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
}
#img {
position: relative;
top: 0;
left: 0;
width: 25px;
height: 25px;
background-color: #FA6FF2;
}
</style>
<body>
<div id="destination">
<div id="img"><div>
</div>
</body>
</html>

44
tests/ref/2dcontext/drawimage_html_image_13.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 128;
var sourceHeight = 128;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// The source Image doesn't have a src url defined
// It should throw an exception because the HTMLImageElement is
// in the broken state
// https://html.spec.whatwg.org/multipage/scripting.html#check-the-usability-of-the-image-argument
try {
destCtx.drawImage(sourceImg, 0, 0);
// It makes the test fail if the exception is not thrown
destCtx.fillStyle = "#0000FF";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
}
catch(err) {
console.log("Exception: " + err.message);
}
</script>
</body>
</html>

20
tests/ref/2dcontext/drawimage_html_image_13_ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div id="destination"></div>
</body>
</html>

19
tests/ref/2dcontext/drawimage_html_image_1_ref.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-image: url("../rust-0.png");
}
</style>
<body>
<div id="destination"></div>
</body>
</html>

35
tests/ref/2dcontext/drawimage_html_image_2.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../rust-0.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// 2 arguments, the dest origin is not 0,0
// The source image will copied to the 25, 25 position of the destination canvas
destCtx.drawImage(sourceImg, 25, 25);
</script>
</body>
</html>

23
tests/ref/2dcontext/drawimage_html_image_2_ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
background-image: url("../rust-0.png");
background-position: 25px 25px;
background-repeat: no-repeat;
}
</style>
<body>
<div id="destination"></div>
</body>
</html>

35
tests/ref/2dcontext/drawimage_html_image_3.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = true;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// 4 arguments, the source origin is not 0,0, the dest size is provided
// The source canvas will copied to the 50, 50 position of the destination canvas and
// on an area of 50x50 pixels
destCtx.drawImage(sourceImg, 50, 50, 50, 50);
</script>
</body>
</html>

23
tests/ref/2dcontext/drawimage_html_image_3_ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
background-image: url("../2x2.png");
background-position: 50px 50px;
background-repeat: no-repeat;
background-size: 50px 50px;
}
</style>
<body>
<div id="destination"></div>
</body>
</html>

36
tests/ref/2dcontext/drawimage_html_image_4.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// 4 arguments, the dest origin is not 0,0 and the dest size is provided but
// does not match the size of the source. The image will be distorted
// The source canvas will copied to the 50,50 position of the destination canvas
// and it will be shrunk to a and area of 16x16
destCtx.drawImage(sourceImg, 50, 50, 16, 16);
</script>
</body>
</html>

29
tests/ref/2dcontext/drawimage_html_image_4_ref.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
}
#destination img{
position: absolute;
top: 50px;
left: 50px;
width: 16px;
height: 16px;
}
</style>
<body>
<div id="destination">
<img src="../2x2.png" />
</div>
</body>
</html>

35
tests/ref/2dcontext/drawimage_html_image_5.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// The source canvas will copied to the 50,50 position of the destination canvas
// over an area of 64x32 pixels
// The copied image will be distorted along the x axis
destCtx.drawImage(sourceImg, 50, 50, 64, 32);
</script>
</body>
</html>

39
tests/ref/2dcontext/drawimage_html_image_5_ref.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
overflow: hidden;
}
#destination .img{
position: relative;
top: 50px;
left: 50px;
width: 64px;
height: 32px;
overflow: hidden;
}
#destination .img img{
width: 100%;
height: 100%;
}
</style>
<body>
<div id="destination">
<div class="img">
<img src="../2x2.png" />
</div>
</div>
</body>
</html>

36
tests/ref/2dcontext/drawimage_html_image_6.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// 8 arguments, both destination and source origins are 0, 0
// An area of 32x32 pixels of the source image will be copied to
// an area of 32x32 pixels of the destination canvas
destCtx.drawImage(sourceImg, 0, 0, 32, 32, 0, 0, 32, 32);
</script>
</body>
</html>

25
tests/ref/2dcontext/drawimage_html_image_6_ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
background-color: red;
background-image: url("../2x2.png");
background-position: -32px -32px;
background-size: 64px 64px;
background-repeat: no-repeat;
}
</style>
<body>
<div id="destination"></div>
</body>
</html>

36
tests/ref/2dcontext/drawimage_html_image_7.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// 8 arguments the destination origin is not 0,0
// An area of 32x32 pixels of the source image will be copied to
// an area of 32x32 pixels of the destination canvas in the position 32,32
destCtx.drawImage(sourceImg, 0, 0, 32, 32, 32, 32, 32, 32);
</script>
</body>
</html>

35
tests/ref/2dcontext/drawimage_html_image_7_ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
}
#img {
position: relative;
top: 32px;
left: 32px;
width: 32px;
height: 32px;
background-image: url("../2x2.png");
background-position: -32px -32px;
background-size: 64px 64px;
background-repeat: no-repeat;
}
</style>
<body>
<div id="destination">
<div id="img"><div>
</div>
</body>
</html>

36
tests/ref/2dcontext/drawimage_html_image_8.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// The source rectangle overflows the source image
// The source area is clipped to fit the source image
// and the destination are is clipped in the same proportion
destCtx.drawImage(sourceImg, 32, 32, 32, 32, 0, 0, 32, 32);
</script>
</body>
</html>

35
tests/ref/2dcontext/drawimage_html_image_8_ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
}
#img {
position: relative;
top: 0px;
left: 0px;
width: 32px;
height: 32px;
background-image: url("../2x2.png");
background-position: -32px -32px;
background-size: 64px 64px;
background-repeat: no-repeat;
}
</style>
<body>
<div id="destination">
<div id="img"><div>
</div>
</body>
</html>

43
tests/ref/2dcontext/drawimage_html_image_9.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 100;
var sourceHeight = 100;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceImg = document.createElement('img');
sourceImg.src = '../2x2.png'
sourceImg.width = sourceWidth;
sourceImg.height = sourceHeight;
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = smoothingEnabled;
// The destination rectangle has negative width and height
// An exception is raised and nothing is drawn
try {
destCtx.drawImage(sourceImg, 25, 50, 50, 0, 0, -100, -100);
// It makes the test fail if the exception is not thrown
destCtx.fillStyle = "#0000FF";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
}
catch(err) {
console.err("Exception Thrown");
}
</script>
</body>
</html>

19
tests/ref/2dcontext/drawimage_html_image_9_ref.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
#destination {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div id="destination"></div>
</body>
</html>

BIN
tests/ref/2x2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 770 KiB

38
tests/ref/basic.list
View file

@ -9,18 +9,32 @@
# Should be == with expected failure:
fragment=top != ../html/acid2.html acid2_ref.html
== 2dcontext/drawimage_1.html 2dcontext/drawimage_1_ref.html
== 2dcontext/drawimage_10.html 2dcontext/drawimage_10_ref.html
== 2dcontext/drawimage_11.html 2dcontext/drawimage_11_ref.html
== 2dcontext/drawimage_12.html 2dcontext/drawimage_12_ref.html
== 2dcontext/drawimage_2.html 2dcontext/drawimage_2_ref.html
== 2dcontext/drawimage_3.html 2dcontext/drawimage_3_ref.html
== 2dcontext/drawimage_4.html 2dcontext/drawimage_4_ref.html
== 2dcontext/drawimage_5.html 2dcontext/drawimage_5_ref.html
== 2dcontext/drawimage_6.html 2dcontext/drawimage_6_ref.html
== 2dcontext/drawimage_7.html 2dcontext/drawimage_7_ref.html
== 2dcontext/drawimage_8.html 2dcontext/drawimage_8_ref.html
== 2dcontext/drawimage_9.html 2dcontext/drawimage_9_ref.html
== 2dcontext/drawimage_canvas_1.html 2dcontext/drawimage_canvas_1_ref.html
== 2dcontext/drawimage_canvas_10.html 2dcontext/drawimage_canvas_10_ref.html
== 2dcontext/drawimage_canvas_11.html 2dcontext/drawimage_canvas_11_ref.html
== 2dcontext/drawimage_canvas_12.html 2dcontext/drawimage_canvas_12_ref.html
== 2dcontext/drawimage_canvas_2.html 2dcontext/drawimage_canvas_2_ref.html
== 2dcontext/drawimage_canvas_3.html 2dcontext/drawimage_canvas_3_ref.html
== 2dcontext/drawimage_canvas_4.html 2dcontext/drawimage_canvas_4_ref.html
== 2dcontext/drawimage_canvas_5.html 2dcontext/drawimage_canvas_5_ref.html
== 2dcontext/drawimage_canvas_6.html 2dcontext/drawimage_canvas_6_ref.html
== 2dcontext/drawimage_canvas_7.html 2dcontext/drawimage_canvas_7_ref.html
== 2dcontext/drawimage_canvas_8.html 2dcontext/drawimage_canvas_8_ref.html
== 2dcontext/drawimage_canvas_9.html 2dcontext/drawimage_canvas_9_ref.html
== 2dcontext/drawimage_html_image_1.html 2dcontext/drawimage_html_image_1_ref.html
== 2dcontext/drawimage_html_image_10.html 2dcontext/drawimage_html_image_10_ref.html
== 2dcontext/drawimage_html_image_11.html 2dcontext/drawimage_html_image_11_ref.html
== 2dcontext/drawimage_html_image_12.html 2dcontext/drawimage_html_image_12_ref.html
== 2dcontext/drawimage_html_image_2.html 2dcontext/drawimage_html_image_2_ref.html
== 2dcontext/drawimage_html_image_3.html 2dcontext/drawimage_html_image_3_ref.html
== 2dcontext/drawimage_html_image_4.html 2dcontext/drawimage_html_image_4_ref.html
== 2dcontext/drawimage_html_image_5.html 2dcontext/drawimage_html_image_5_ref.html
== 2dcontext/drawimage_html_image_6.html 2dcontext/drawimage_html_image_6_ref.html
== 2dcontext/drawimage_html_image_7.html 2dcontext/drawimage_html_image_7_ref.html
== 2dcontext/drawimage_html_image_8.html 2dcontext/drawimage_html_image_8_ref.html
== 2dcontext/drawimage_html_image_9.html 2dcontext/drawimage_html_image_9_ref.html
== 2dcontext/lineto_a.html 2dcontext/lineto_ref.html
== 2dcontext/transform_a.html 2dcontext/transform_ref.html

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.3arg.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.3arg.html]
type: testharness
[Canvas test: 2d.drawImage.3arg]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.5arg.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.5arg.html]
type: testharness
[Canvas test: 2d.drawImage.5arg]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.9arg.basic.html]
type: testharness
[Canvas test: 2d.drawImage.9arg.basic]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.9arg.destpos.html]
type: testharness
[Canvas test: 2d.drawImage.9arg.destpos]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.9arg.destsize.html]
type: testharness
[Canvas test: 2d.drawImage.9arg.destsize]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.9arg.sourcepos.html]
type: testharness
[Canvas test: 2d.drawImage.9arg.sourcepos]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.9arg.sourcesize.html]
type: testharness
[Canvas test: 2d.drawImage.9arg.sourcesize]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.apng.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.animated.apng.html]
type: testharness
[drawImage() of an APNG with no poster frame draws the first frame]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.animated.gif.html]
type: testharness
[drawImage() of an animated GIF draws the first frame]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.animated.poster.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.animated.poster.html]
type: testharness
[drawImage() of an APNG draws the poster frame]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.floatsource.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.floatsource.html]
type: testharness
[Canvas test: 2d.drawImage.floatsource]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.nonfinite.html]
type: testharness
[drawImage() with Infinity/NaN is ignored]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.nowrap.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.nowrap.html]
type: testharness
[Stretched images do not get pixels wrapping around the edges]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.transform.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.transform.html]
type: testharness
[Canvas test: 2d.drawImage.transform]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.zerocanvas.html]
type: testharness
[Canvas test: 2d.drawImage.zerocanvas]
expected: FAIL

5
tests/wpt/metadata/2dcontext/drawing-images-to-the-canvas/2d.drawImage.zerosource.html.ini
View file

@ -1,5 +0,0 @@
[2d.drawImage.zerosource.html]
type: testharness
[drawImage with zero-sized source rectangle throws INDEX_SIZE_ERR]
expected: FAIL

5
tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.1.html.ini
View file

@ -1,5 +0,0 @@
[2d.shadow.canvas.transparent.1.html]
type: testharness
[Shadows are not drawn for transparent canvases]
expected: FAIL

1
tests/wpt/metadata/2dcontext/shadows/2d.shadow.canvas.transparent.2.html.ini
View file

@ -2,4 +2,3 @@
type: testharness
[Shadows are not drawn for transparent parts of canvases]
expected: FAIL

5
tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.section.html.ini
View file

@ -1,5 +0,0 @@
[2d.shadow.image.section.html]
type: testharness
[Shadows are not drawn for areas outside image source rectangles]
expected: FAIL

5
tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.1.html.ini
View file

@ -1,5 +0,0 @@
[2d.shadow.image.transparent.1.html]
type: testharness
[Shadows are not drawn for transparent images]
expected: FAIL

1
tests/wpt/metadata/2dcontext/shadows/2d.shadow.image.transparent.2.html.ini
View file

@ -2,4 +2,3 @@
type: testharness
[Shadows are not drawn for transparent parts of images]
expected: FAIL

4
tests/wpt/metadata/2dcontext/shadows/canvas_shadows_002.htm.ini Normal file
View file

@ -0,0 +1,4 @@
[canvas_shadows_002.html]
type: testharness
[Shadows must be drawn for images]
expected: FAIL