mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
Auto merge of #6508 - servo:dupe-canvas-tests, r=metajack
Duplicate some canvas tests in preparation for upstream changes. <!-- Reviewable:start --> [<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/6508) <!-- Reviewable:end -->
This commit is contained in:
bors-servo
commit
0d236288cc
42 changed files with 1104 additions and 1 deletions
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_1.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_10.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_11.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_12.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_13.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_2.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_3.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_4.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_5.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_6.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_7.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_8.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
[drawimage_html_image_9.html]
|
||||||
|
type: reftest
|
||||||
|
disabled: see _mozilla
|
||||||
|
|
@ -30598,4 +30598,4 @@
|
||||||
"rev": "075802c1d3387d07e31cd5887459d539b1297c8d",
|
"rev": "075802c1d3387d07e31cd5887459d539b1297c8d",
|
||||||
"url_base": "/",
|
"url_base": "/",
|
||||||
"version": 2
|
"version": 2
|
||||||
}
|
}
|
||||||
|
|
@ -74,6 +74,162 @@
|
||||||
],
|
],
|
||||||
"url": "/_mozilla/css/class-namespaces.html"
|
"url": "/_mozilla/css/class-namespaces.html"
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_1.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_1.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_1_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_1.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_10.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_10.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_10_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_10.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_11.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_11.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_11_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_11.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_12.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_12.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_12_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_12.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_13.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_13.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_13_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_13.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_2.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_2.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_2_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_2.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_3.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_3.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_3_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_3.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_4.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_4.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_4_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_4.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_5.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_5.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_5_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_5.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_6.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_6.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_6_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_6.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_7.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_7.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_7_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_7.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_8.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_8.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_8_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_8.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_9.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_9.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_9_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_9.html"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"testharness": {
|
"testharness": {
|
||||||
|
|
@ -631,6 +787,162 @@
|
||||||
],
|
],
|
||||||
"url": "/_mozilla/css/class-namespaces.html"
|
"url": "/_mozilla/css/class-namespaces.html"
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_1.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_1.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_1_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_1.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_10.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_10.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_10_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_10.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_11.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_11.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_11_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_11.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_12.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_12.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_12_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_12.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_13.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_13.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_13_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_13.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_2.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_2.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_2_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_2.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_3.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_3.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_3_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_3.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_4.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_4.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_4_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_4.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_5.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_5.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_5_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_5.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_6.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_6.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_6_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_6.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_7.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_7.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_7_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_7.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_8.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_8.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_8_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_8.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"mozilla/canvas/drawimage_html_image_9.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/canvas/drawimage_html_image_9.html",
|
||||||
|
"references": [
|
||||||
|
[
|
||||||
|
"/_mozilla/mozilla/canvas/drawimage_html_image_9_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_9.html"
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
BIN
tests/wpt/mozilla/tests/mozilla/2x2.png
Normal file
BIN
tests/wpt/mozilla/tests/mozilla/2x2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 770 KiB |
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!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/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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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: 25px 25px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
<div id="destination"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue