Index: third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video-flipY.html |
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video-flipY.html |
similarity index 54% |
copy from third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video.html |
copy to third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video-flipY.html |
index 92beba443a4b64180bc74165badff5c67d8f7e96..678c0504170da8a6612db3d736b237c8ae01f362 100644 |
--- a/third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video.html |
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video-flipY.html |
@@ -6,7 +6,7 @@ |
<body> |
<script> |
-description("Ensure correct behavior of drawImage with ImageBitmaps from video elements."); |
+description("Ensure correct behavior of drawImage with ImageBitmaps from video elements along with flipY option."); |
window.jsTestIsAsync = true; |
function jsWrapperClass(node) |
@@ -27,16 +27,21 @@ function shouldBeType(expression, className) |
function shouldBeOpaque(x, y) { |
d = ctx.getImageData(x, y, 1, 1).data; |
- shouldBe("d[3]", "255"); |
+ if (d[3] == 255) { |
+ testPassed("This pixel is opaque"); |
+ return; |
+ } |
+ testFailed("This pixel is expected to be opaque, but it is actually: " + d); |
} |
function shouldBeClear(x, y) { |
// should be transparent black pixels |
d = ctx.getImageData(x, y, 1, 1).data; |
- shouldBe("d[0]", "0"); |
- shouldBe("d[1]", "0"); |
- shouldBe("d[2]", "0"); |
- shouldBe("d[3]", "0"); |
+ if (d[0] == 0 && d[1] == 0 && d[2] == 0 && d[3] == 0) { |
+ testPassed("This pixel is transparent black"); |
+ return; |
+ } |
+ testFailed("This pixel is expected to be transparent black, but it is actually: " + d); |
} |
function clearContext() { |
@@ -45,6 +50,8 @@ function clearContext() { |
var bitmap; |
var video; |
+var options = ["none", "flipY"]; |
+var optionIndex = 0; |
var canvas = document.createElement("canvas"); |
canvas.setAttribute("width", "500"); |
@@ -56,16 +63,21 @@ video.addEventListener("canplaythrough", videoLoaded, false); |
video.src = "../../compositing/resources/video.ogv"; |
function videoLoaded() { |
+ if (optionIndex == options.length) { |
+ finishJSTest(); |
+ return; |
+ } |
+ debug("Checking HTMLVideoElement with imageOrientation: " + options[optionIndex] + "."); |
var imageBitmaps = {}; |
- var p1 = createImageBitmap(video).then(function (image) { imageBitmaps.noCrop = image }); |
- var p2 = createImageBitmap(video, 0, 0, 100, 100).then(function (image) { imageBitmaps.crop = image }); |
- var p3 = createImageBitmap(video, 50, 50, 100, 100).then(function (image) { imageBitmaps.cropRight = image }); |
- var p4 = createImageBitmap(video, 100, 100, 100, 100).then(function (image) { imageBitmaps.cropCenter = image }); |
- var p5 = createImageBitmap(video, -100, -100, 600, 600).then(function (image) { imageBitmaps.overCrop = image }); |
- var p6 = createImageBitmap(video, 100, 100, 500, 500).then(function (image) { imageBitmaps.overCropRight = image }); |
- var p7 = createImageBitmap(video, 100, 100, -100, -100).then(function (image) { imageBitmaps.negativeCrop = image }); |
- var p8 = createImageBitmap(video, -300, -300, 300, 300).then(function (image) { imageBitmaps.empty = image }); |
- var p9 = createImageBitmap(video, 400, 300, 300, 300).then(function (image) { imageBitmaps.emptyTwo = image }); |
+ var p1 = createImageBitmap(video, {imageOrientation: options[optionIndex]}).then(function (image) { imageBitmaps.noCrop = image }); |
+ var p2 = createImageBitmap(video, 0, 0, 100, 100, {imageOrientation: options[optionIndex]}).then(function (image) { imageBitmaps.crop = image }); |
+ var p3 = createImageBitmap(video, 50, 50, 100, 100, {imageOrientation: options[optionIndex]}).then(function (image) { imageBitmaps.cropRight = image }); |
+ var p4 = createImageBitmap(video, 100, 100, 100, 100, {imageOrientation: options[optionIndex]}).then(function (image) { imageBitmaps.cropCenter = image }); |
+ var p5 = createImageBitmap(video, -100, -100, 600, 600, {imageOrientation: options[optionIndex]}).then(function (image) { imageBitmaps.overCrop = image }); |
+ var p6 = createImageBitmap(video, 100, 100, 500, 500, {imageOrientation: options[optionIndex]}).then(function (image) { imageBitmaps.overCropRight = image }); |
+ var p7 = createImageBitmap(video, 100, 100, -100, -100, {imageOrientation: options[optionIndex]}).then(function (image) { imageBitmaps.negativeCrop = image }); |
+ var p8 = createImageBitmap(video, -300, -300, 300, 300, {imageOrientation: options[optionIndex]}).then(function (image) { imageBitmaps.empty = image }); |
+ var p9 = createImageBitmap(video, 400, 300, 300, 300, {imageOrientation: options[optionIndex]}).then(function (image) { imageBitmaps.emptyTwo = image }); |
Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() { |
checkNoCrop(imageBitmaps.noCrop); |
@@ -77,7 +89,8 @@ function videoLoaded() { |
checkCrop(imageBitmaps.negativeCrop); |
checkEmpty(imageBitmaps.empty); |
checkEmpty(imageBitmaps.emptyTwo); |
- finishJSTest(); |
+ optionIndex++; |
+ videoLoaded(); |
}, function() { |
testFailed("Promise was rejected."); |
finishJSTest(); |
@@ -156,25 +169,46 @@ function checkOverCrop(imageBitmap) { |
// should be drawn to (100, 100), (452, 388) |
clearContext(); |
ctx.drawImage(imageBitmap, 0, 0); |
- shouldBeClear(10, 10); |
- shouldBeClear(90, 90); |
- shouldBeOpaque(110, 110); |
- shouldBeOpaque(300, 200); |
- shouldBeOpaque(450, 380); |
- shouldBeClear(500, 50); |
- shouldBeClear(50, 350); |
- shouldBeClear(460, 390); |
+ if (options[optionIndex] == "none") { |
+ shouldBeClear(10, 10); |
+ shouldBeClear(90, 90); |
+ shouldBeOpaque(110, 110); |
+ shouldBeOpaque(300, 200); |
+ shouldBeOpaque(450, 380); |
+ shouldBeClear(500, 50); |
+ shouldBeClear(50, 350); |
+ shouldBeClear(460, 390); |
+ } else { |
+ shouldBeClear(10, 590); |
+ shouldBeClear(90, 510); |
+ shouldBeOpaque(110, 490); |
+ shouldBeOpaque(300, 400); |
+ shouldBeOpaque(450, 220); |
+ shouldBeClear(500, 550); |
+ shouldBeClear(50, 250); |
+ shouldBeClear(460, 210); |
+ } |
// should be drawn to (50, 50), (226, 194) |
clearContext(); |
ctx.drawImage(imageBitmap, 0, 0, 300, 300); |
- shouldBeClear(10, 10); |
- shouldBeClear(40, 40); |
- shouldBeOpaque(60, 60); |
- shouldBeOpaque(220, 190); |
- shouldBeClear(230, 50); |
- shouldBeClear(50, 200); |
- shouldBeClear(230, 200); |
+ if (options[optionIndex] == "none") { |
+ shouldBeClear(10, 10); |
+ shouldBeClear(40, 40); |
+ shouldBeOpaque(60, 60); |
+ shouldBeOpaque(220, 190); |
+ shouldBeClear(230, 50); |
+ shouldBeClear(50, 200); |
+ shouldBeClear(230, 200); |
+ } else { |
+ shouldBeClear(10, 290); |
+ shouldBeClear(40, 260); |
+ shouldBeOpaque(60, 240); |
+ shouldBeOpaque(220, 110); |
+ shouldBeClear(230, 250); |
+ shouldBeClear(50, 100); |
+ shouldBeClear(230, 100); |
+ } |
} |
function checkOverCropRight(imageBitmap) { |
@@ -184,14 +218,25 @@ function checkOverCropRight(imageBitmap) { |
// should be drawn to (0, 0), (252, 188) |
clearContext(); |
ctx.drawImage(imageBitmap, 0, 0); |
- shouldBeOpaque(10, 10); |
- shouldBeOpaque(100, 100); |
- shouldBeOpaque(200, 50); |
- shouldBeOpaque(50, 150); |
- shouldBeOpaque(250, 180); |
- shouldBeClear(360, 40); |
- shouldBeClear(80, 190); |
- shouldBeClear(260, 190); |
+ if (options[optionIndex] == "none") { |
+ shouldBeOpaque(10, 10); |
+ shouldBeOpaque(100, 100); |
+ shouldBeOpaque(200, 50); |
+ shouldBeOpaque(50, 150); |
+ shouldBeOpaque(250, 180); |
+ shouldBeClear(360, 40); |
+ shouldBeClear(80, 190); |
+ shouldBeClear(260, 190); |
+ } else { |
+ shouldBeOpaque(10, 490); |
+ shouldBeOpaque(100, 400); |
+ shouldBeOpaque(200, 450); |
+ shouldBeOpaque(50, 350); |
+ shouldBeOpaque(250, 320); |
+ shouldBeClear(360, 460); |
+ shouldBeClear(80, 310); |
+ shouldBeClear(260, 310); |
+ } |
} |
function checkEmpty(imageBitmap) { |