Remove synchronous forks of drawImage tests, and enable proper asynchronous drawImage tests.

This commit is contained in:
Josh Matthews 2017-01-04 15:12:15 -05:00
parent 980eb5ac33
commit e0837134ff
54 changed files with 44 additions and 1136 deletions

View file

@ -6317,162 +6317,6 @@
{}
]
],
"mozilla/canvas/drawimage_html_image_1.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_1.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_1_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_10.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_10.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_10_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_11.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_11.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_11_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_12.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_12.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_12_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_13.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_13.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_13_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_2.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_2.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_2_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_3.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_3.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_3_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_4.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_4.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_4_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_5.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_5.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_5_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_6.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_6.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_6_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_7.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_7.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_7_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_8.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_8.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_8_ref.html",
"=="
]
],
{}
]
],
"mozilla/canvas/drawimage_html_image_9.html": [
[
"/_mozilla/mozilla/canvas/drawimage_html_image_9.html",
[
[
"/_mozilla/mozilla/canvas/drawimage_html_image_9_ref.html",
"=="
]
],
{}
]
],
"mozilla/details_ui_closed.html": [
[
"/_mozilla/mozilla/details_ui_closed.html",
@ -9529,71 +9373,6 @@
{}
]
],
"mozilla/canvas/drawimage_html_image_10_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_11_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_12_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_13_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_1_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_2_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_3_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_4_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_5_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_6_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_7_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_8_ref.html": [
[
{}
]
],
"mozilla/canvas/drawimage_html_image_9_ref.html": [
[
{}
]
],
"mozilla/click_prevent.html": [
[
{}
@ -25242,112 +25021,8 @@
"9fb338806987e20f1bac3c09231e1e5718ac4b23",
"testharness"
],
"mozilla/canvas/drawimage_html_image_1.html": [
"90ea4e0cfef9731726582e1867d1ced66b6bcc2b",
"reftest"
],
"mozilla/canvas/drawimage_html_image_10.html": [
"51a931987a4e22674014d9e9a3f298029f546bbe",
"reftest"
],
"mozilla/canvas/drawimage_html_image_10_ref.html": [
"9a70c803aaf5bd8a843b18d6d16779575d4dc6f8",
"support"
],
"mozilla/canvas/drawimage_html_image_11.html": [
"9b4da400d9486407b834f8f60416a11cfe68f6cf",
"reftest"
],
"mozilla/canvas/drawimage_html_image_11_ref.html": [
"b51c787c97490eed29787cadf62b0c5e5cbd9180",
"support"
],
"mozilla/canvas/drawimage_html_image_12.html": [
"a8b04a034bd5fecab74cef610b8320b8d41d5131",
"reftest"
],
"mozilla/canvas/drawimage_html_image_12_ref.html": [
"5529c622869289c1a64987216b525766003d5f8c",
"support"
],
"mozilla/canvas/drawimage_html_image_13.html": [
"9a47d53761733409f2582e13d5f1b1f9d9e9046e",
"reftest"
],
"mozilla/canvas/drawimage_html_image_13_ref.html": [
"30150e3530438d42704fda8b3623286658f6c724",
"support"
],
"mozilla/canvas/drawimage_html_image_1_ref.html": [
"9a70c803aaf5bd8a843b18d6d16779575d4dc6f8",
"support"
],
"mozilla/canvas/drawimage_html_image_2.html": [
"ed1d7f348d2966af1a95c75e49837a72c032b2c6",
"reftest"
],
"mozilla/canvas/drawimage_html_image_2_ref.html": [
"a95c84aace62371b4a58c381acaab51499cdeedb",
"support"
],
"mozilla/canvas/drawimage_html_image_3.html": [
"cc8ce7169bdf21905d73597931878422a1cf780c",
"reftest"
],
"mozilla/canvas/drawimage_html_image_3_ref.html": [
"59d699ac4347a4af4246c0333e14a91a201da15c",
"support"
],
"mozilla/canvas/drawimage_html_image_4.html": [
"45f850d0062a0cfe3c448420fa9e5fea88b2a90a",
"reftest"
],
"mozilla/canvas/drawimage_html_image_4_ref.html": [
"6204815172949961351ea34906f99d05063bc78f",
"support"
],
"mozilla/canvas/drawimage_html_image_5.html": [
"a023a6543b9207f86b3928859f903ca90f57e824",
"reftest"
],
"mozilla/canvas/drawimage_html_image_5_ref.html": [
"839c4941a71523e7b543080aae8722972b20ebbb",
"support"
],
"mozilla/canvas/drawimage_html_image_6.html": [
"f9509bb99560ce023f40a0b700b5950bf0a44dda",
"reftest"
],
"mozilla/canvas/drawimage_html_image_6_ref.html": [
"359acc11d83341062450e86162d831a9fc1ae158",
"support"
],
"mozilla/canvas/drawimage_html_image_7.html": [
"402c02c6aad4732f4fe31405c00a7acf24c71e10",
"reftest"
],
"mozilla/canvas/drawimage_html_image_7_ref.html": [
"53efd12eca32f7898ddeabdca9b2e61f952b296d",
"support"
],
"mozilla/canvas/drawimage_html_image_8.html": [
"17ffa3edbdb9bbf572710e1981732d299062c5ba",
"reftest"
],
"mozilla/canvas/drawimage_html_image_8_ref.html": [
"89f6e5589e3619835d67e8d919ab6a507fb3bbb5",
"support"
],
"mozilla/canvas/drawimage_html_image_9.html": [
"5f89f092758cac8462399555528d8135c6c46692",
"reftest"
],
"mozilla/canvas/drawimage_html_image_9_ref.html": [
"5e4587978bcf32905a2676da269a5a09d7938718",
"support"
],
"mozilla/canvas/fill_and_stroke_getters_setters.html": [
"4ae37c115dff4361db2be1849fa5143be19df438",
"0a56ed81ad6a34c2f86fcd2296665e5e0466d4b9",
"testharness"
],
"mozilla/caption.html": [

View file

@ -1,29 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_1_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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;
// 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>

View file

@ -1,33 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_10_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,19 +0,0 @@
<!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>

View file

@ -1,31 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_11_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,19 +0,0 @@
<!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>

View file

@ -1,31 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_12_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,32 +0,0 @@
<!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>

View file

@ -1,39 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_13_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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/#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>

View file

@ -1,20 +0,0 @@
<!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>

View file

@ -1,19 +0,0 @@
<!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>

View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_2_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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;
// 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>

View file

@ -1,23 +0,0 @@
<!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: 25px 25px;
background-repeat: no-repeat;
}
</style>
<body>
<div id="destination"></div>
</body>
</html>

View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_3_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,23 +0,0 @@
<!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>

View file

@ -1,31 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_4_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,29 +0,0 @@
<!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>

View file

@ -1,30 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_5_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,38 +0,0 @@
<!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;
}
#destination .img img{
width: 100%;
height: 100%;
}
</style>
<body>
<div id="destination">
<div class="img">
<img src="../2x2.png" />
</div>
</div>
</body>
</html>

View file

@ -1,31 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_6_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,25 +0,0 @@
<!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>

View file

@ -1,31 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_7_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,35 +0,0 @@
<!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>

View file

@ -1,31 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_8_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,35 +0,0 @@
<!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>

View file

@ -1,38 +0,0 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_html_image_9_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<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>

View file

@ -1,19 +0,0 @@
<!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>

View file

@ -16,12 +16,16 @@ function roundtrip(property, vals) {
}
}
var img = document.createElement('img');
img.src = '../2x2.png';
var pattern = ctx.createPattern(img, 'repeat');
async_test(function(t) {
var img = document.createElement('img');
img.src = '../2x2.png';
img.onload = t.step_func_done(function() {
var pattern = ctx.createPattern(img, 'repeat');
var gradient = ctx.createLinearGradient(0.0, 0.0, 1.0, 1.0);
var gradient = ctx.createLinearGradient(0.0, 0.0, 1.0, 1.0);
roundtrip('strokeStyle', ['#ff0000', gradient, pattern]);
roundtrip('fillStyle', ['#ff0000', gradient, pattern]);
roundtrip('strokeStyle', ['#ff0000', gradient, pattern]);
roundtrip('fillStyle', ['#ff0000', gradient, pattern]);
});
});
</script>