diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas')
27 files changed, 1035 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas.html new file mode 100644 index 0000000000..36bd085136 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas.html @@ -0,0 +1,203 @@ +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<canvas id="dest" height="100" width="100"></canvas> + +<script> +var sourceCanvasWidth = sourceCanvasHeight = 50; +var destCanvasWidth = destCanvasHeight = 100; +var blueRect = {x: 0, y: 0, w: 50, h: 50}; +var blackRect = {x: 5, y: 5, w: 40, h: 40}; +var redPixel = [255, 0, 0, 255]; +var bluePixel = [0, 0, 255, 255]; +var blackPixel = [0, 0, 0, 255]; +var transparentBlackPixel = [0, 0, 0, 0]; + +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.imageSmoothingEnabled = false; + +function checkPixel(location, expected) { + var actual = destCtx.getImageData(location[0], location[1], 1, 1).data; + assert_array_equals(actual, expected); +} + +function PreparePixelTests(blueCheck, blackCheck, redCheck, testDescription) { + var pixelTests = []; + for (var i = 0; i < blueCheck.length; i++) { + var message = testDescription + 'Pixel ' + blueCheck[i][0] + ',' + blueCheck[i][1] + ' should be blue.'; + pixelTests.push([message, blueCheck[i], bluePixel]); + } + for (var i = 0; i < blackCheck.length; i++) { + var message = testDescription + 'Pixel ' + blackCheck[i][0] + ',' + blackCheck[i][1] + ' should be black.'; + pixelTests.push([message, blackCheck[i], blackPixel]); + } + for (var i = 0; i < redCheck.length; i++) { + var message = testDescription + 'Pixel ' + redCheck[i][0] + ',' + redCheck[i][1] + ' should be red.'; + pixelTests.push([message, redCheck[i], redPixel]); + } + pixelTests.push([testDescription + 'Pixel outside canvas should be transparent black.\n', [100, 100], transparentBlackPixel]); + return pixelTests; +} + +function drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription) { + destCtx.fillStyle = 'red'; + destCtx.fillRect(0, 0, destCanvasWidth, destCanvasHeight); + + var sourceCanvas = document.createElement('canvas'); + sourceCanvas.width = sourceCanvasWidth; + sourceCanvas.height = sourceCanvasHeight; + var sourceCtx = sourceCanvas.getContext('2d'); + sourceCtx.fillStyle = 'blue'; + sourceCtx.fillRect(blueRect.x, blueRect.y, blueRect.w, blueRect.h); + sourceCtx.fillStyle = 'black'; + sourceCtx.fillRect(blackRect.x, blackRect.y, blackRect.w, blackRect.h); + if (typeof sourceRect.x !== 'undefined') + destCtx.drawImage(sourceCanvas, sourceRect.x, sourceRect.y, sourceRect.w, sourceRect.h, + destRect.x, destRect.y, destRect.w, destRect.h); + else if (typeof destRect.w !== 'undefined') + destCtx.drawImage(sourceCanvas, destRect.x, destRect.y, destRect.w, destRect.h); + else + destCtx.drawImage(sourceCanvas, destRect.x, destRect.y); + var pixelTests = PreparePixelTests(blueCheck, blackCheck, redCheck, testDescription); + generate_tests(checkPixel, pixelTests); +} + +var testDescription; +var sourceRect = {}, destRect = {}; +var blueCheck, blackCheck, redCheck; + +// 2 arguments, the dest origin is 0,0 +// The source canvas will be copied to the 0,0 position of the destination canvas +testDescription = 'Test scenario 1: dx = 0, dy = 0 --- '; +destRect = {x: 0, y: 0}; +blueCheck = [[0,0], [0,49], [49,0], [49,49]]; +blackCheck = [[5,5], [5,44], [44,5], [44,44]]; +redCheck = [[50,0], [0,50], [50,50], [99,99]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 2 arguments, the dest origin is not 0,0 +// The source canvas will copied to the 25, 25 position of the destination canvas +testDescription = 'Test scenario 2: dx = 25, dy = 25 --- '; +destRect = {x: 25, y: 25}; +blueCheck = [[25,25], [25,74], [74,25], [74,74]]; +blackCheck = [[30,30], [30,69], [69,30], [69,69]]; +redCheck = [[24,24], [24,75], [75,24], [75,75]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 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 +testDescription = 'Test scenario 3: dx = 50, dy = 50, dw = 50, dh = 50 --- '; +destRect = {x: 50, y: 50, w: 50, h: 50}; +blueCheck = [[50,50], [50,99], [99,50], [99,99]]; +blackCheck = [[55,55], [55,94], [94,55], [94,94]]; +redCheck = [[0,0], [49,49], [49,99], [99,49]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 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 +testDescription = 'Test scenario 4: dx = 50, dy = 50, dw = 20, dh = 20 --- '; +destRect = {x: 50, y: 50, w: 20, h: 20}; +blueCheck = [[50,50], [50,69], [69,50], [69,69]]; +blackCheck = [[52,52], [52,67], [67,52], [67,67]]; +redCheck = [[49,49], [49,70], [70,49], [70,70]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 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 +testDescription = 'Test scenario 5: dx = 50, dy = 50, dw = 50, dh = 20 --- '; +destRect = {x: 50, y: 50, w: 50, h: 20}; +blueCheck = [[50,50], [50,69], [99,50], [99,69]]; +blackCheck = [[55,52], [55,67], [94,52], [94,67]]; +redCheck = [[49,49], [49, 69], [99,49], [99,70]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 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); +testDescription = 'Test scenario 6: sx = 0, sy = 0, sw = 25, sh = 25, dx = 0, dy = 0, dw = 25, dh = 25 --- '; +sourceRect = {x: 0, y: 0, w: 25, h: 25}; +destRect = {x: 0, y: 0, w: 25, h: 25}; +blueCheck = [[0,0], [4,4], [0,24], [24,0]]; +blackCheck = [[5,5], [5,24], [24,5], [24,24]]; +redCheck = [[25,25], [25, 99], [99,25], [99,99]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 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 +testDescription = 'Test scenario 7: sx = 0, sy = 0, sw = 25, sh = 25, dx = 25, dy = 25, dw = 25, dh = 25 --- '; +sourceRect = {x: 0, y: 0, w: 25, h: 25}; +destRect = {x: 25, y: 25, w: 25, h: 25}; +blueCheck = [[25,25], [25,49], [49,25], [29,29]]; +blackCheck = [[30,30], [30,49], [49,30], [49,49]]; +redCheck = [[24,24], [24, 50], [50,24], [50,50]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 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 +testDescription = 'Test scenario 8: sx = 25, sy = 25, sw = 50, sh = 50, dx = 0, dy = 0, dw = 50, dh = 50 --- '; +sourceRect = {x: 25, y: 25, w: 50, h: 50}; +destRect = {x: 0, y: 0, w: 50, h: 50}; +blueCheck = [[0,20], [20,0], [20,20], [24,24]]; +blackCheck = [[0,0], [0,19], [19,0], [19,19]]; +redCheck = [[0,25], [25, 0], [25,25], [99,99]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// The destination rectangle has negative width and height. When the source +// rectangle is outside the source image, the source rectangle must be clipped +// to the source image and the destination rectangle must be clipped in the same +// proportion. +testDescription = 'Test scenario 9: sx = 0, sy = 0, sw = 50, sh = 50, dx = 100, dy = 100, dw = -50, dh = -50 --- '; +sourceRect = {x: 0, y: 0, w: 50, h: 50}; +destRect = {x: 100, y: 100, w: -50, h: -50}; +blueCheck = [[50,50], [50,99], [99,50], [99,99]]; +blackCheck = [[55,55], [55,94], [94,55], [94,94]]; +redCheck = [[0,0], [49,49], [0,99], [99,0]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 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. +testDescription = 'Test scenario 10: sx = 0, sy = 0, sw = 50, sh = 50, dx = 0, dy = 0, dw = 200, dh = 200 --- '; +sourceRect = {x: 0, y: 0, w: 50, h: 50}; +destRect = {x: 0, y: 0, w: 200, h: 200}; +blueCheck = [[0,0], [0,99], [99,0], [19,19]]; +blackCheck = [[20,20], [20,99], [99,20], [99,99]]; +redCheck = []; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 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 +testDescription = 'Test scenario 11: sx = 0, sy = 0, sw = 100, sh = 100, dx = 0, dy = 0, dw = 50, dh = 50 --- '; +sourceRect = {x: 0, y: 0, w: 100, h: 100}; +destRect = {x: 0, y: 0, w: 50, h: 50}; +blueCheck = [[0,0], [1,1], [23,23], [24,24]]; +blackCheck = [[3,3], [3,21], [21,3], [21,21]]; +redCheck = [[0,25], [25, 0], [25,25], [99,99]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +// 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. In this specific test: +// - source is clipped by 20 from top and left. +// - destination will get proportionally clipped by 50 from top and left as we +// are scaling the source image 2.5 times. +// - the rect will be drawn from 70,70 to 100,100. +testDescription = 'Test scenario 12: sx = -20, sy = -20, sw = 50, sh = 50, dx = 20, dy = 20, dw = 125, dh = 125 --- '; +sourceRect = {x: -20, y: -20, w: 50, h: 50}; +destRect = {x: 20, y: 20, w: 125, h: 125}; +blueCheck = [[70,70], [70,99], [99,70], [82,82]]; +blackCheck = [[84,84], [84,99], [99,84], [99,99]]; +redCheck = [[0,69], [69, 0], [69,69]]; +drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription); + +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self.html new file mode 100644 index 0000000000..83cf53583c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self.html @@ -0,0 +1,17 @@ +<link rel="match" href="drawimage_canvas_self_ref.html"> +<canvas id="dest" height="100" width="100"></canvas> +<script> +var canvasWidth = canvasHeight = 100; +var destWidth = canvasWidth / 4; +var destHeight = canvasHeight / 4; +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); + +destCtx.fillStyle = 'red'; +destCtx.fillRect(0, 0, canvasWidth, canvasHeight); +destCtx.fillStyle = 'green'; +destCtx.fillRect(0, 0, canvasWidth / 2, canvasHeight / 2); +destCtx.drawImage(destCanvas, + 0, 0, destWidth, destHeight, + canvasWidth / 2, canvasHeight / 2, destWidth, destHeight); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html new file mode 100644 index 0000000000..9f297cacdc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html @@ -0,0 +1,11 @@ +<canvas id="dest" height="100" width="100"></canvas> +<script> +var canvasWidth = canvasHeight = 100; +var destCanvas = document.getElementById('dest'); +var destCtx = destCanvas.getContext('2d'); +destCtx.fillStyle = 'red'; +destCtx.fillRect(0, 0, canvasWidth, canvasHeight); +destCtx.fillStyle = 'green'; +destCtx.fillRect(0, 0, canvasWidth / 2, canvasHeight / 2); +destCtx.fillRect(canvasWidth / 2, canvasHeight / 2, canvasWidth / 4, canvasHeight / 4); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_crossorigin.sub.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_crossorigin.sub.html new file mode 100644 index 0000000000..3d57d9f064 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_crossorigin.sub.html @@ -0,0 +1,61 @@ +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + function draw_and_read_image(img, should_throw) { + let c = document.createElement('canvas'); + document.body.appendChild(c); + let ctx = c.getContext('2d'); + ctx.drawImage(img, 0, 0); + + function get_image_data() { + ctx.getImageData(0, 0, 4, 4); + } + + if (should_throw) { + assert_throws_dom('SecurityError', get_image_data); + } else { + get_image_data(); + } + + document.body.removeChild(c); + } + + async_test(t => { + let img = new Image(); + img.src = "/images/green.png"; + img.crossOrigin = "anonymous"; + img.onload = t.step_func_done(() => { + draw_and_read_image(img, false); + }); + img.onerror = t.unreached_func(); + }, "Can get pixels of canvas with same origin image drawn"); + + async_test(t => { + let img = new Image(); + img.src = "http://{{hosts[][www]}}:{{ports[http][0]}}/images/green.png?pipe=header(Access-Control-Allow-Origin,*)"; + img.crossOrigin = "anonymous"; + img.onload = t.step_func_done(() => { + draw_and_read_image(img, false); + }); + img.onerror = t.unreached_func(); + }, "Can get pixels of canvas with CORS enabled cross origin image drawn"); + + async_test(t => { + let img = new Image(); + img.src = "http://{{hosts[][www]}}:{{ports[http][0]}}/images/green.png?pipe=header(Access-Control-Allow-Origin,*)"; + img.onload = t.step_func_done(() => { + draw_and_read_image(img, true); + }); + img.onerror = t.unreached_func(); + }, "Can't get pixels of canvas with CORS enabled cross origin image drawn from non-CORS element"); + + async_test(t => { + let img = new Image(); + img.src = "http://{{hosts[][www]}}:{{ports[http][0]}}/images/green.png"; + + img.onload = t.step_func_done(() => { + draw_and_read_image(img, true); + }); + img.onerror = t.unreached_func(); + }, "Can't get pixels of canvas with non-CORS enabled cross origin image drawn"); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html new file mode 100644 index 0000000000..59a7d64465 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html @@ -0,0 +1,268 @@ +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<canvas id="dest" height="100" width="100"></canvas> + +<script> +var sourceWidth = sourceHeight = 100; +var destCanvasWidth = destCanvasHeight = 100; +var redPixel = [255, 0, 0, 255]; +var lightPixel = [253, 140, 245, 255]; +var grayPixel = [41, 122, 115, 255]; +var transparentBlackPixel = [0, 0, 0, 0]; + +var destCanvas = document.getElementById('dest'); +var sourceImg = document.createElement('img'); +sourceImg.src = '/html/canvas/resources/2x2.png'; +sourceImg.width = sourceWidth; +sourceImg.height = sourceHeight; +var destCtx = destCanvas.getContext('2d'); +destCtx.imageSmoothingEnabled = false; + +function checkPixel(location, expected) { + var actual = destCtx.getImageData(location[0], location[1], 1, 1).data; + assert_array_equals(actual, expected); +} + +function PreparePixelTests(lightPixelCheck, grayPixelCheck, redCheck, testDescription) { + var pixelTests = []; + for (var i = 0; i < lightPixelCheck.length; i++) { + var message = testDescription + 'Pixel ' + lightPixelCheck[i][0] + ',' + lightPixelCheck[i][1] + ' should be light purple.'; + pixelTests.push([message, lightPixelCheck[i], lightPixel]); + } + for (var i = 0; i < grayPixelCheck.length; i++) { + var message = testDescription + 'Pixel ' + grayPixelCheck[i][0] + ',' + grayPixelCheck[i][1] + ' should be gray.'; + pixelTests.push([message, grayPixelCheck[i], grayPixel]); + } + for (var i = 0; i < redCheck.length; i++) { + var message = testDescription + 'Pixel ' + redCheck[i][0] + ',' + redCheck[i][1] + ' should be red.'; + pixelTests.push([message, redCheck[i], redPixel]); + } + pixelTests.push([testDescription + 'Pixel outside canvas should be transparent black.\n', [100, 100], transparentBlackPixel]); + return pixelTests; +} + +function drawCustomImageOnCanvas(sourceImage, sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription) { + destCtx.fillStyle = 'red'; + destCtx.fillRect(0, 0, destCanvasWidth, destCanvasHeight); + if (typeof sourceRect.x !== 'undefined') + destCtx.drawImage(sourceImage, sourceRect.x, sourceRect.y, sourceRect.w, sourceRect.h, + destRect.x, destRect.y, destRect.w, destRect.h); + else if (typeof destRect.w !== 'undefined') + destCtx.drawImage(sourceImage, destRect.x, destRect.y, destRect.w, destRect.h); + else + destCtx.drawImage(sourceImage, destRect.x, destRect.y); + var pixelTests = PreparePixelTests(lightPixelCheck, grayPixelCheck, redCheck, testDescription); + generate_tests(checkPixel, pixelTests); +} + +function drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription) { + drawCustomImageOnCanvas(sourceImg, sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +var testDescription; +var sourceRect = {}, destRect = {}; +var lightPixelCheck, grayPixelCheck, redCheck; + +// 2 arguments, the dest origin is 0,0 +// The source image will copied to the 0,0 position of the destination canvas +function runDrawImageTest_dX0_dY0() { + testDescription = 'Test scenario 1: dx = 0, dy = 0 --- '; + destRect = {x: 0, y: 0}; + lightPixelCheck = [[0,0], [0,99], [99,0], [99,99]]; + grayPixelCheck = []; + redCheck = []; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// 2 arguments, the dest origin is not 0,0 +// The source canvas will copied to the 25,25 position of the destination canvas +function runDrawImageTest_dX25_dY25() { + testDescription = 'Test scenario 2: dx = 25, dy = 25 --- '; + destRect = {x: 25, y: 25}; + lightPixelCheck = [[25,25], [25,99], [99,25], [99,99]]; + grayPixelCheck = []; + redCheck = [[0,0], [24,24], [0,25], [25,0], [0,99], [99,0]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// 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 +function runDrawImageTest_dX50_dY50_dW50_dH50() { + testDescription = 'Test scenario 3: dx = 50, dy = 50, dw = 50, dh = 50 --- '; + destRect = {x: 50, y: 50, w: 50, h: 50}; + lightPixelCheck = [[50,50], [99,99]]; + grayPixelCheck = [[50,99], [99,50]]; + redCheck = [[0,0], [49,49], [0,50], [50,0], [0,99], [99,0]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// 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 +function runDrawImageTest_dX50_dY50_dW16_dH16() { + testDescription = 'Test scenario 4: dx = 50, dy = 50, dw = 16, dh = 16 --- '; + destRect = {x: 50, y: 50, w: 16, h: 16}; + lightPixelCheck = [[50,50], [65,65]]; + grayPixelCheck = [[50,65], [65,50]]; + redCheck = [[0,0], [49,49], [49,66], [66,49], [66,66], [99,99]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// 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 +function runDrawImageTest_dX50_dY50_dW64_dH32() { + testDescription = 'Test scenario 5: dx = 50, dy = 50, dw = 64, dh = 32 --- '; + destRect = {x: 50, y: 50, w: 64, h: 32}; + lightPixelCheck = [[50,50], [99,81]]; + grayPixelCheck = [[50,81], [99,50]]; + redCheck = [[0,0], [49,49], [49,82], [99,49], [99,82], [99,99]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// 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 +function runDrawImageTest_sX0_sY0_sW32_sH32_dX0_dY0_dW32_dH32() { + testDescription = 'Test scenario 6: sx = 0, sy = 0, sw = 32, sh = 32, dx = 0, dy = 0, dw = 32, dh = 32 --- '; + sourceRect = {x: 0, y: 0, w: 32, h: 32}; + destRect = {x: 0, y: 0, w: 32, h: 32}; + lightPixelCheck = [[0,0], [0,31], [31,0], [31,31]]; + grayPixelCheck = []; + redCheck = [[0,32], [32,0], [32,32], [99,99]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// 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 +function runDrawImageTest_sX0_sY0_sW32_sH32_dX32_dY32_dW32_dH32() { + testDescription = 'Test scenario 7: sx = 0, sy = 0, sw = 32, sh = 32, dx = 32, dy = 32, dw = 32, dh = 32 --- '; + sourceRect = {x: 0, y: 0, w: 32, h: 32}; + destRect = {x: 32, y: 32, w: 32, h: 32}; + lightPixelCheck = [[32,32], [32,63], [63,32], [63,63]]; + grayPixelCheck = []; + redCheck = [[0,0], [31,31], [31,64], [64,31], [64,64], [99,99]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// 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 +function runDrawImageTest_sX32_sY32_sW32_sH32_dX0_dY0_dW32_dH32() { + testDescription = 'Test scenario 8: sx = 32, sy = 32, sw = 32, sh = 32, dx = 0, dy = 0, dw = 32, dh = 32 --- '; + sourceRect = {x: 32, y: 32, w: 32, h: 32}; + destRect = {x: 0, y: 0, w: 32, h: 32}; + lightPixelCheck = [[0,0], [0,31], [31,0], [31,31]]; + grayPixelCheck = []; + redCheck = [[0,32], [32,0], [32,32], [99,99]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// The destination rectangle has negative width and height. When the source +// rectangle is outside the source image, the source rectangle must be clipped +// to the source image and the destination rectangle must be clipped in the same +// proportion. +function runDrawImageTest_sX0_sY0_sW32_sH32_dX32_dY32_dWm32_dHm32() { + testDescription = 'Test scenario 9: sx = 32, sy = 32, sw = 32, sh = 32, dx = 32, dy = 32, dw = -32, dh = -32 --- '; + sourceRect = {x: 32, y: 32, w: 32, h: 32}; + destRect = {x: 0, y: 0, w: 32, h: 32}; + lightPixelCheck = [[0,0], [0,31], [31,0], [31,31]]; + grayPixelCheck = []; + redCheck = [[0,32], [32,0], [32,32], [99,99]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// 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. +function runDrawImageTest_sX0_sY0_sW512_sH512_dX0_dY0_dW256_dH256() { + testDescription = 'Test scenario 10: sx = 0, sy = 0, sw = 512, sh = 512, dx = 0, dy = 0, dw = 256, dh = 256 --- '; + sourceRect = {x: 0, y: 0, w: 512, h: 512}; + destRect = {x: 0, y: 0, w: 256, h: 256}; + lightPixelCheck = [[0,0], [0,99], [99,0], [99,99]]; + grayPixelCheck = []; + redCheck = []; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// The source rectangle is larger than the source canvas +// The source area is clipped to fit the source image +// and the destination area is clipped in the same proportion +function runDrawImageTest_sX0_sY0_sW2048_sH2048_dX0_dY0_dW800_dH800() { + testDescription = 'Test scenario 11: sx = 0, sy = 0, sw = 2048, sh = 2048, dx = 0, dy = 0, dw = 800, dh = 800 --- '; + sourceRect = {x: 0, y: 0, w: 2048, h: 2048}; + destRect = {x: 0, y: 0, w: 800, h: 800}; + lightPixelCheck = [[0,0], [0,99], [99,0], [99,99]]; + grayPixelCheck = []; + redCheck = []; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// 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 +function runDrawImageTest_sXm20_sYm20_sW50_sH50_dX20_dY20_dW125_dH125() { + testDescription = 'Test scenario 12: sx = -20, sy = -20, sw = 50, sh = 50, dx = 20, dy = 20, dw = 125, dh = 125 --- '; + sourceRect = {x: -20, y: -20, w: 50, h: 50}; + destRect = {x: 20, y: 20, w: 125, h: 125}; + lightPixelCheck = [[70,70], [70,99], [99,70], [99,99]]; + grayPixelCheck = []; + redCheck = [[0,0], [0,99], [99,0], [69,69], [69, 99], [99,69]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// The source Image doesn't have a src url defined. +// No exception is thrown and nothing is drawn. +function runDrawImageTestImageWithuotSource() { + testDescription = 'Test scenario 13: draw an image element that does not have a source --- '; + var sourceImage = document.createElement('img'); + sourceRect = {x: 0, y: 0, w: 50, h: 50}; + destRect = {x: 0, y: 0, w: 100, h: 100}; + lightPixelCheck = []; + grayPixelCheck = []; + redCheck = [[0,0], [0,99], [99,0], [99,69]]; + drawCustomImageOnCanvas(sourceImage, sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + +// Clipping the source and down scaling to the destination +function runDrawImageTest_sX64_sY64_sW384_sH384_dX0_dY0_dW32_dH64() { + testDescription = 'Test scenario 14: sx = 64, sy = 64, sw = 384, sh = 384, dx = 0, dy = 0, dw = 32, dh = 64 --- '; + sourceRect = {x: 64, y: 64, w: 384, h: 384}; + destRect = {x: 0, y: 0, w: 32, h: 64}; + lightPixelCheck = [[0,0], [15,31], [17,33], [31,63]]; + grayPixelCheck = [[16,0], [31,31], [0, 33], [15,63]]; + redCheck = [[0,64], [32,0], [32,64], [99,99]]; + drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription); +} + + +function runDrawImageTests() { + runDrawImageTest_dX0_dY0(); + runDrawImageTest_dX25_dY25(); + runDrawImageTest_dX50_dY50_dW50_dH50(); + runDrawImageTest_dX50_dY50_dW16_dH16(); + runDrawImageTest_dX50_dY50_dW64_dH32(); + runDrawImageTest_sX0_sY0_sW32_sH32_dX0_dY0_dW32_dH32(); + runDrawImageTest_sX0_sY0_sW32_sH32_dX32_dY32_dW32_dH32(); + runDrawImageTest_sX32_sY32_sW32_sH32_dX0_dY0_dW32_dH32(); + runDrawImageTest_sX0_sY0_sW32_sH32_dX32_dY32_dWm32_dHm32(); + runDrawImageTest_sX0_sY0_sW512_sH512_dX0_dY0_dW256_dH256(); + runDrawImageTest_sX0_sY0_sW2048_sH2048_dX0_dY0_dW800_dH800(); + runDrawImageTest_sXm20_sYm20_sW50_sH50_dX20_dY20_dW125_dH125(); + runDrawImageTestImageWithuotSource(); + runDrawImageTest_sX64_sY64_sW384_sH384_dX0_dY0_dW32_dH64(); +} + +async_test(t => { + window.onload = function() { + t.step(runDrawImageTests); + t.done(); + } +}, 'Draw 100x100 image to 100x100 canvas at 0,0.'); + +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html new file mode 100644 index 0000000000..ea3300bef2 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset=utf-8> +<title>Load a 100x100 image to a SVG image and draw it to a 100x100 canvas.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/canvas/resources/canvas-tests.js"></script> +<div id="log"></div> +<canvas id="dest" height="100" width="100"></canvas> +<script> +async_test(t => { + var sourceImg = document.createElementNS('http://www.w3.org/2000/svg', 'image'); + sourceImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '/html/canvas/resources/2x2.png'); + sourceImg.width = 100; + sourceImg.height = 100; + + window.onload = t.step_func_done(() => { + var destCanvas = document.getElementById('dest'); + var destCtx = destCanvas.getContext('2d'); + destCtx.fillStyle = "#FF0000"; + destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height); + destCtx.imageSmoothingEnabled = false; + // 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); + _assertPixel(destCanvas, 0, 0, 253, 140, 245, 255); + _assertPixel(destCanvas, 0, 99, 253, 140, 245, 255); + _assertPixel(destCanvas, 99, 0, 253, 140, 245, 255); + _assertPixel(destCanvas, 99, 99, 253, 140, 245, 255); + }); +}); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_with_foreign_object_does_not_taint.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_with_foreign_object_does_not_taint.html new file mode 100644 index 0000000000..f29b2bf5a8 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_with_foreign_object_does_not_taint.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Draw an SVG image with a foreignObject to a canvas</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +function loadImage(url) { + return new Promise(resolve => { + const image = new window.Image(); + image.onload = () => { + resolve(image); + }; + image.src = url; + }); +} + +promise_test(async (t) => { + // Load a data URL for an SVG image with a foreign object. + const url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject></foreignObject></svg>'; + const image = await loadImage(url); + + // Draw the image to a canvas. + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + canvas.width = image.width; + canvas.height = image.height; + context.drawImage(image, 0, 0); + + // The canvas should not be tainted, so the following shouldn't throw. + assert_true(canvas.toDataURL().length > 0); +}, 'Canvas should not be tainted after drawing SVG including <foreignObject>'); +</script> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none-ref.html new file mode 100644 index 0000000000..320a9b8108 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference for drawImage from a createImageBitmap source with image orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> + <img id="img-element" style="image-orientation: none;" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none.tentative.html new file mode 100644 index 0000000000..39ed4a25dc --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from an element source with image orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-from-bitmap-orientation-none-ref.html"> + <script> + image = new Image(); + image.src = "/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"; + + let imageLoadPromise = new Promise(resolve => { + image.onload = resolve; + }); + let contentLoadedPromise = new Promise(resolve => { + window.addEventListener('DOMContentLoaded', resolve); + }); + Promise.all([imageLoadPromise, contentLoadedPromise]).then( function() { + const can = document.getElementById('bitmap-canvas'); + can.height = 50; + can.width = 100; + can.getContext('2d').drawImage(image, 0, 0); + }) + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> + <canvas id="bitmap-canvas" style="image-orientation: none;"></canvas> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-ref.html new file mode 100644 index 0000000000..261d6a0b7c --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference for drawImage from a createImageBitmap source with image orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none-ref.html new file mode 100644 index 0000000000..3a78aad068 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference for drawImage from a createImageBitmap source with image orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> + <img id="img-element" style="image-orientation: none;" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none.tentative.html new file mode 100644 index 0000000000..3b16241c97 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none.tentative.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from an element source with image orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-from-bitmap-swap-width-height-orientation-none-ref.html"> + <script> + image = new Image(); + image.src = "/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"; + + let imageLoadPromise = new Promise(resolve => { + image.onload = resolve; + }); + let contentLoadedPromise = new Promise(resolve => { + window.addEventListener('DOMContentLoaded', resolve); + }); + Promise.all([imageLoadPromise, contentLoadedPromise]).then( async function() { + const bitmap = await createImageBitmap(image); + const can = document.getElementById('bitmap-canvas'); + can.height = 50; + can.width = 100; + can.getContext('2d').drawImage(bitmap, 0, 0); + }) + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> + <canvas id="bitmap-canvas" style="image-orientation: none;"></canvas> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-ref.html new file mode 100644 index 0000000000..247d7f4049 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference for drawImage from a createImageBitmap source with image orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height.tentative.html new file mode 100644 index 0000000000..744ca54f47 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height.tentative.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from an element source with image orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-from-bitmap-swap-width-height-ref.html"> + <script> + image = new Image(); + image.src = "/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"; + + let imageLoadPromise = new Promise(resolve => { + image.onload = resolve; + }); + let contentLoadedPromise = new Promise(resolve => { + window.addEventListener('DOMContentLoaded', resolve); + }); + Promise.all([imageLoadPromise, contentLoadedPromise]).then( async function() { + const bitmap = await createImageBitmap(image); + const can = document.getElementById('bitmap-canvas'); + can.height = 100; + can.width = 50; + can.getContext('2d').drawImage(bitmap, 0, 0); + }) + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> + <canvas id="bitmap-canvas"></canvas> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap.tentative.html new file mode 100644 index 0000000000..632a170b88 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap.tentative.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from an element source with image orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-from-bitmap-ref.html"> + <script> + image = new Image(); + image.src = "/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"; + + let imageLoadPromise = new Promise(resolve => { + image.onload = resolve; + }); + let contentLoadedPromise = new Promise(resolve => { + window.addEventListener('DOMContentLoaded', resolve); + }); + Promise.all([imageLoadPromise, contentLoadedPromise]).then( function() { + const can = document.getElementById('bitmap-canvas'); + can.height = 50; + can.width = 100; + can.getContext('2d').drawImage(image, 0, 0); + }) + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> + <canvas id="bitmap-canvas"></canvas> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob-ref.html new file mode 100644 index 0000000000..2bd6037835 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from a blob with image orientation: from-image, reference</title> +</head> +<body> + <img id="img-element" style="width: 150px; height: 300px;" src="/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg"> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob.tentative.html new file mode 100644 index 0000000000..330b3cbfe5 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob.tentative.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from a blob with image orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-from-blob-ref.html"> + <script> + function makeBlob() { + return new Promise(function(resolve, reject) { + var xhr = new XMLHttpRequest(); + xhr.open("GET", '/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg'); + xhr.responseType = 'blob'; + xhr.send(); + xhr.onload = function() { + resolve(xhr.response); + }; + }); + } + + window.onload = function() { + var cfb = document.getElementById("canvasWithFileBitmap"); + makeBlob().then(function(blob){createImageBitmap(blob).then(bitmap => { + cfb.getContext("2d").drawImage(bitmap, 0, 0, 150, 150 * bitmap.height / bitmap.width); + window.requestAnimationFrame(() => { + document.documentElement.removeAttribute("class"); + }); + }); + }); + } +</script> +</head> +<body> + <canvas id="canvasWithFileBitmap" width="150" height="300"></canvas> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none-ref.html new file mode 100644 index 0000000000..b847b9eb73 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference for drawImage from an element source with image orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> + <img id="img-element" style="image-orientation: none;" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none.tentative.html new file mode 100644 index 0000000000..61563da738 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from an element source with image orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-from-element-orientation-none-ref.html"> + <script> + window.onload = () => { + const img = document.getElementById('img-element'); + + const can = document.getElementById('bitmap-canvas'); + can.height = img.height; + can.width = img.width; + can.getContext('2d').drawImage(img, 0, 0); + }; + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> + <canvas id="bitmap-canvas" style="image-orientation: none;"></canvas> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-ref.html new file mode 100644 index 0000000000..3f4d1e5ff4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference for drawImage from an element source with image orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none-ref.html new file mode 100644 index 0000000000..b26154b40a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference drawImage from an element source with image orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> + <img id="img-element" style="image-orientation: none;" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none.tentative.html new file mode 100644 index 0000000000..290d7acf3a --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from an element source with image orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-from-element-swap-width-height-orientation-none-ref.html"> + <script> + window.onload = () => { + const img = document.getElementById('img-element'); + + const can = document.getElementById('bitmap-canvas'); + can.height = 50; + can.width = 100; + can.getContext('2d').drawImage(img, 0, 0); + }; + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> + <canvas id="bitmap-canvas" style="image-orientation: none;"></canvas> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-ref.html new file mode 100644 index 0000000000..21f0f88b88 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference drawImage from an element source with image orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height.tentative.html new file mode 100644 index 0000000000..20d59358b4 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from an element source with image orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-from-element-swap-width-height-ref.html"> + <script> + window.onload = () => { + const img = document.getElementById('img-element'); + + const can = document.getElementById('bitmap-canvas'); + can.height = 100; + can.width = 50; + can.getContext('2d').drawImage(img, 0, 0); + }; + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg"> + <canvas id="bitmap-canvas"></canvas> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element.tentative.html new file mode 100644 index 0000000000..62cdf20c79 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>createImageBitmap and drawImage from an element source with image orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-from-element-ref.html"> + <script> + window.onload = () => { + const img = document.getElementById('img-element'); + + const can = document.getElementById('bitmap-canvas'); + can.height = img.height; + can.width = img.width; + can.getContext('2d').drawImage(img, 0, 0); + }; + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> + <canvas id="bitmap-canvas"></canvas> +</body> +</html> diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect-ref.html new file mode 100644 index 0000000000..19ffcc39c9 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>reference for drawImage with image orientation: from-image and a sub-image source rect</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> + <script> + window.onload = () => { + const img = document.getElementById('img-element'); + + const can = document.getElementById('bitmap-canvas'); + can.height = img.height; + can.width = img.width; + can.getContext('2d').drawImage(img, 40, 20, 50, 25, 0, 0, can.width, can.height); + }; + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg"> + <canvas id="bitmap-canvas"></canvas> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect.tentative.html new file mode 100644 index 0000000000..d889e39302 --- /dev/null +++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect.tentative.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>drawImage with image orientation: from-image and a sub-image source rect</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="drawImage-with-src-rect-ref.html"> +<meta name=fuzzy content="0-3;0-200"> + <script> + window.onload = () => { + const img = document.getElementById('img-element'); + + const can = document.getElementById('bitmap-canvas'); + can.height = img.height; + can.width = img.width; + can.getContext('2d').drawImage(img, 40, 20, 50, 25, 0, 0, can.width, can.height); + }; + </script> +</head> +<body> + <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg"> + <canvas id="bitmap-canvas"></canvas> +</body> +</html> |