mirror of
https://github.com/servo/servo.git
synced 2025-08-05 13:40:08 +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",
|
||||
"url_base": "/",
|
||||
"version": 2
|
||||
}
|
||||
}
|
||||
|
|
@ -74,6 +74,162 @@
|
|||
],
|
||||
"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": {
|
||||
|
|
@ -631,6 +787,162 @@
|
|||
],
|
||||
"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