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

Submit the drawImage reftests to wpt.

Browse source
This commit is contained in:
Ms2ger 2015-05-04 00:30:02 +02:00
parent b43a2ed807
commit b845ab4725
53 changed files with 662 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

608
tests/wpt/metadata/MANIFEST.json
View file

@ -20178,8 +20178,612 @@
},
"local_changes": {
"deleted": [],
"items": {},
"reftest_nodes": {}
"items": {
"reftest": {
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html"
}
]
}
},
"reftest_nodes": {
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html"
}
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html": [
{
"path": "2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html",
"references": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9_ref.html",
"=="
]
],
"url": "/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html"
}
]
}
},
"reftest_nodes": {
"2dcontext/building-paths/canvas_complexshapes_arcto_001.htm": [

BIN
tests/wpt/web-platform-tests/2dcontext/2x2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 770 KiB

34
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_1_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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(sourceCanvas, 0, 0);
</script>

38
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_10_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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(sourceCanvas, 0, 0, 50, 50, 0, 0, 200, 200);
</script>

26
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_10_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(0, 0, 100, 100);
destCtx.fillStyle = "#000000";
destCtx.fillRect(20, 20, 80, 80);
</script>
</body>
</html>

36
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_11_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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(sourceCanvas, 0, 0, 100, 100, 0, 0, 50, 50);
</script>

26
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_11_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(0, 0, 25, 25);
destCtx.fillStyle = "#000000";
destCtx.fillRect(2, 2, 20, 20);
</script>
</body>
</html>

36
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_12_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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(sourceCanvas, -25, -25, 50, 50, 0, 0, 50, 50);
</script>

26
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_12_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(0, 0, 25, 25);
destCtx.fillStyle = "#000000";
destCtx.fillRect(5, 5, 20, 20);
</script>
</body>
</html>

31
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_1_ref.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
canvas {
display: block;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var sourceWidth = 50;
var sourceHeight = 50;
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(0, 0, sourceWidth, sourceHeight);
destCtx.fillStyle = "#000000";
destCtx.fillRect(5, 5, 40, 40);
</script>
</body>
</html>

35
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_2_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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 canvas will copied to the 25, 25 position of the destination canvas
destCtx.drawImage(sourceCanvas, 25, 25);
</script>

31
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_2_ref.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
canvas {
display: block;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var sourceWidth = 50;
var sourceHeight = 50;
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(25, 25, sourceWidth, sourceHeight);
destCtx.fillStyle = "#000000";
destCtx.fillRect(30, 30, 40, 40);
</script>
</body>
</html>

36
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_3_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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(sourceCanvas, 50, 50, 50, 50);
</script>

31
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_3_ref.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
canvas {
display: block;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var sourceWidth = 50;
var sourceHeight = 50;
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(50, 50, sourceWidth, sourceHeight);
destCtx.fillStyle = "#000000";
destCtx.fillRect(55, 55, 40, 40);
</script>
</body>
</html>

37
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_4_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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 20x20
destCtx.drawImage(sourceCanvas, 50, 50, 20, 20);
</script>

26
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_4_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(50, 50, 20, 20);
destCtx.fillStyle = "#000000";
destCtx.fillRect(52, 52, 16, 16);
</script>
</body>
</html>

36
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_5_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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 50x25 pixels
// The copied image will be distorted along the x axis
destCtx.drawImage(sourceCanvas, 50, 50, 50, 20);
</script>

26
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_5_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(50, 50, 50, 20);
destCtx.fillStyle = "#000000";
destCtx.fillRect(55, 52, 40, 16);
</script>
</body>
</html>

36
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_6_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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 25x25 pixels of the source image will be copied to
// an area of 25x25 pixels of the destination canvas
destCtx.drawImage(sourceCanvas, 0, 0, 25, 25, 0, 0, 25, 25);
</script>

26
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_6_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(0, 0, 25, 25);
destCtx.fillStyle = "#000000";
destCtx.fillRect(5, 5, 20, 20);
</script>
</body>
</html>

36
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_7_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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 25x25 pixels of the source image will be copied to
// an area of 25x25 pixels of the destination canvas in the position 25,25
destCtx.drawImage(sourceCanvas, 0, 0, 25, 25, 25, 25, 25, 25);
</script>

26
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_7_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(25, 25, 25, 25);
destCtx.fillStyle = "#000000";
destCtx.fillRect(30, 30, 20, 20);
</script>
</body>
</html>

36
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_8_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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(sourceCanvas, 25, 25, 50, 50, 0, 0, 50, 50);
</script>

26
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_8_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.fillStyle = "#00FFFF";
destCtx.fillRect(0, 0, 25, 25);
destCtx.fillStyle = "#000000";
destCtx.fillRect(0, 0, 20, 20);
</script>
</body>
</html>

44
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel=match href=drawimage_canvas_9_ref.html>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script>
var sourceWidth = 50;
var sourceHeight = 50;
var smoothingEnabled = false;
var destCanvas = document.getElementById('dest');
var sourceCanvas = document.createElement('canvas');
sourceCanvas.width = sourceWidth;
sourceCanvas.height = sourceHeight;
var sourceCtx = sourceCanvas.getContext('2d');
sourceCtx.fillStyle = "#00FFFF";
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
sourceCtx.fillStyle = "#000000";
sourceCtx.fillRect(5,5,40,40);
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(sourceCanvas, 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>

22
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_9_ref.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="dest" height="100" width="100"></canvas>
<script type="text/javascript">
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
</script>
</body>
</html>

29
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1.html Normal file
View file

@ -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>

33
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10.html Normal file
View file

@ -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>

19
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10_ref.html Normal file
View file

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

31
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11.html Normal file
View file

@ -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>

19
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_11_ref.html Normal file
View file

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

31
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12.html Normal file
View file

@ -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>

32
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_12_ref.html Normal file
View file

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

39
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13.html Normal file
View file

@ -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>

20
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_13_ref.html Normal file
View file

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

19
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_ref.html Normal file
View file

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

30
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2.html Normal file
View file

@ -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>

23
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2_ref.html Normal file
View file

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

30
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3.html Normal file
View file

@ -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>

23
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3_ref.html Normal file
View file

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

31
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4.html Normal file
View file

@ -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>

29
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4_ref.html Normal file
View file

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

30
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5.html Normal file
View file

@ -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>

39
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5_ref.html Normal file
View file

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

31
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6.html Normal file
View file

@ -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>

25
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_6_ref.html Normal file
View file

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

31
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7.html Normal file
View file

@ -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>

35
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_7_ref.html Normal file
View file

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

31
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8.html Normal file
View file

@ -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>

35
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_8_ref.html Normal file
View file

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

38
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9.html Normal file
View file

@ -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>

19
tests/wpt/web-platform-tests/2dcontext/drawing-images-to-the-canvas/drawimage_html_image_9_ref.html Normal file
View file

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