Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(55)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video-flipY.html

Issue 1631733003: Implementing ImageBitmap option imageOrientation of flipY (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: support flipY and none at this moment Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-flipY-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video-flipY-expected.txt » ('j') | third_party/WebKit/Source/core/frame/ImageBitmap.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html> 2 <html>
3 <head> 3 <head>
4 <script src="../../resources/js-test.js"></script> 4 <script src="../../resources/js-test.js"></script>
5 </head> 5 </head>
6 <body> 6 <body>
7 <script> 7 <script>
8 8
9 description("Ensure correct behavior of drawImage with ImageBitmaps from video e lements."); 9 description("Ensure correct behavior of drawImage with ImageBitmaps from video e lements along with flipY option.");
10 window.jsTestIsAsync = true; 10 window.jsTestIsAsync = true;
11 11
12 function jsWrapperClass(node) 12 function jsWrapperClass(node)
13 { 13 {
14 // returns the ClassName of node 14 // returns the ClassName of node
15 if (!node) 15 if (!node)
16 return "[null]"; 16 return "[null]";
17 var string = Object.prototype.toString.apply(node); 17 var string = Object.prototype.toString.apply(node);
18 18
19 // string will be of the form [object ClassName] 19 // string will be of the form [object ClassName]
20 return string.substr(8, string.length - 9); 20 return string.substr(8, string.length - 9);
21 } 21 }
22 22
23 function shouldBeType(expression, className) 23 function shouldBeType(expression, className)
24 { 24 {
25 shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'"); 25 shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'");
26 } 26 }
27 27
28 function shouldBeOpaque(x, y) { 28 function shouldBeOpaque(x, y) {
29 d = ctx.getImageData(x, y, 1, 1).data; 29 d = ctx.getImageData(x, y, 1, 1).data;
30 shouldBe("d[3]", "255"); 30 if (d[3] == 255) {
31 testPassed("This pixel is opaque");
32 return;
33 }
34 testFailed("This pixel is expected to be opaque, but it is actually: " + d);
31 } 35 }
32 36
33 function shouldBeClear(x, y) { 37 function shouldBeClear(x, y) {
34 // should be transparent black pixels 38 // should be transparent black pixels
35 d = ctx.getImageData(x, y, 1, 1).data; 39 d = ctx.getImageData(x, y, 1, 1).data;
36 shouldBe("d[0]", "0"); 40 if (d[0] == 0 && d[1] == 0 && d[2] == 0 && d[3] == 0) {
37 shouldBe("d[1]", "0"); 41 testPassed("This pixel is transparent black");
38 shouldBe("d[2]", "0"); 42 return;
39 shouldBe("d[3]", "0"); 43 }
44 testFailed("This pixel is expected to be transparent black, but it is actual ly: " + d);
40 } 45 }
41 46
42 function clearContext() { 47 function clearContext() {
43 ctx.clearRect(0, 0, 500, 500); 48 ctx.clearRect(0, 0, 500, 500);
44 } 49 }
45 50
46 var bitmap; 51 var bitmap;
47 var video; 52 var video;
53 var options = ["none", "flipY"];
54 var optionIndex = 0;
48 55
49 var canvas = document.createElement("canvas"); 56 var canvas = document.createElement("canvas");
50 canvas.setAttribute("width", "500"); 57 canvas.setAttribute("width", "500");
51 canvas.setAttribute("height", "500"); 58 canvas.setAttribute("height", "500");
52 var ctx = canvas.getContext("2d"); 59 var ctx = canvas.getContext("2d");
53 60
54 video = document.createElement("video"); 61 video = document.createElement("video");
55 video.addEventListener("canplaythrough", videoLoaded, false); 62 video.addEventListener("canplaythrough", videoLoaded, false);
56 video.src = "../../compositing/resources/video.ogv"; 63 video.src = "../../compositing/resources/video.ogv";
57 64
58 function videoLoaded() { 65 function videoLoaded() {
66 if (optionIndex == options.length) {
67 finishJSTest();
68 return;
69 }
70 debug("Checking HTMLVideoElement with imageOrientation: " + options[optionI ndex] + ".");
59 var imageBitmaps = {}; 71 var imageBitmaps = {};
60 var p1 = createImageBitmap(video).then(function (image) { imageBitmaps.noCro p = image }); 72 var p1 = createImageBitmap(video, {imageOrientation: options[optionIndex]}). then(function (image) { imageBitmaps.noCrop = image });
61 var p2 = createImageBitmap(video, 0, 0, 100, 100).then(function (image) { i mageBitmaps.crop = image }); 73 var p2 = createImageBitmap(video, 0, 0, 100, 100, {imageOrientation: option s[optionIndex]}).then(function (image) { imageBitmaps.crop = image });
62 var p3 = createImageBitmap(video, 50, 50, 100, 100).then(function (image) { imageBitmaps.cropRight = image }); 74 var p3 = createImageBitmap(video, 50, 50, 100, 100, {imageOrientation: opti ons[optionIndex]}).then(function (image) { imageBitmaps.cropRight = image });
63 var p4 = createImageBitmap(video, 100, 100, 100, 100).then(function (image) { imageBitmaps.cropCenter = image }); 75 var p4 = createImageBitmap(video, 100, 100, 100, 100, {imageOrientation: op tions[optionIndex]}).then(function (image) { imageBitmaps.cropCenter = image });
64 var p5 = createImageBitmap(video, -100, -100, 600, 600).then(function (image ) { imageBitmaps.overCrop = image }); 76 var p5 = createImageBitmap(video, -100, -100, 600, 600, {imageOrientation: o ptions[optionIndex]}).then(function (image) { imageBitmaps.overCrop = image });
65 var p6 = createImageBitmap(video, 100, 100, 500, 500).then(function (image) { imageBitmaps.overCropRight = image }); 77 var p6 = createImageBitmap(video, 100, 100, 500, 500, {imageOrientation: opt ions[optionIndex]}).then(function (image) { imageBitmaps.overCropRight = image } );
66 var p7 = createImageBitmap(video, 100, 100, -100, -100).then(function (image ) { imageBitmaps.negativeCrop = image }); 78 var p7 = createImageBitmap(video, 100, 100, -100, -100, {imageOrientation: o ptions[optionIndex]}).then(function (image) { imageBitmaps.negativeCrop = image });
67 var p8 = createImageBitmap(video, -300, -300, 300, 300).then(function (image ) { imageBitmaps.empty = image }); 79 var p8 = createImageBitmap(video, -300, -300, 300, 300, {imageOrientation: o ptions[optionIndex]}).then(function (image) { imageBitmaps.empty = image });
68 var p9 = createImageBitmap(video, 400, 300, 300, 300).then(function (image) { imageBitmaps.emptyTwo = image }); 80 var p9 = createImageBitmap(video, 400, 300, 300, 300, {imageOrientation: opt ions[optionIndex]}).then(function (image) { imageBitmaps.emptyTwo = image });
69 81
70 Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() { 82 Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() {
71 checkNoCrop(imageBitmaps.noCrop); 83 checkNoCrop(imageBitmaps.noCrop);
72 checkCrop(imageBitmaps.crop); 84 checkCrop(imageBitmaps.crop);
73 checkCrop(imageBitmaps.cropRight); 85 checkCrop(imageBitmaps.cropRight);
74 checkCrop(imageBitmaps.cropCenter); 86 checkCrop(imageBitmaps.cropCenter);
75 checkOverCrop(imageBitmaps.overCrop); 87 checkOverCrop(imageBitmaps.overCrop);
76 checkOverCropRight(imageBitmaps.overCropRight); 88 checkOverCropRight(imageBitmaps.overCropRight);
77 checkCrop(imageBitmaps.negativeCrop); 89 checkCrop(imageBitmaps.negativeCrop);
78 checkEmpty(imageBitmaps.empty); 90 checkEmpty(imageBitmaps.empty);
79 checkEmpty(imageBitmaps.emptyTwo); 91 checkEmpty(imageBitmaps.emptyTwo);
80 finishJSTest(); 92 optionIndex++;
93 videoLoaded();
81 }, function() { 94 }, function() {
82 testFailed("Promise was rejected."); 95 testFailed("Promise was rejected.");
83 finishJSTest(); 96 finishJSTest();
84 }); 97 });
85 } 98 }
86 99
87 function checkNoCrop(imageBitmap) { 100 function checkNoCrop(imageBitmap) {
88 bitmap = imageBitmap; 101 bitmap = imageBitmap;
89 shouldBeType("bitmap", "ImageBitmap"); 102 shouldBeType("bitmap", "ImageBitmap");
90 103
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after
149 shouldBeClear(210, 210); 162 shouldBeClear(210, 210);
150 } 163 }
151 164
152 function checkOverCrop(imageBitmap) { 165 function checkOverCrop(imageBitmap) {
153 bitmap = imageBitmap; 166 bitmap = imageBitmap;
154 shouldBeType("bitmap", "ImageBitmap"); 167 shouldBeType("bitmap", "ImageBitmap");
155 168
156 // should be drawn to (100, 100), (452, 388) 169 // should be drawn to (100, 100), (452, 388)
157 clearContext(); 170 clearContext();
158 ctx.drawImage(imageBitmap, 0, 0); 171 ctx.drawImage(imageBitmap, 0, 0);
159 shouldBeClear(10, 10); 172 if (options[optionIndex] == "none") {
160 shouldBeClear(90, 90); 173 shouldBeClear(10, 10);
161 shouldBeOpaque(110, 110); 174 shouldBeClear(90, 90);
162 shouldBeOpaque(300, 200); 175 shouldBeOpaque(110, 110);
163 shouldBeOpaque(450, 380); 176 shouldBeOpaque(300, 200);
164 shouldBeClear(500, 50); 177 shouldBeOpaque(450, 380);
165 shouldBeClear(50, 350); 178 shouldBeClear(500, 50);
166 shouldBeClear(460, 390); 179 shouldBeClear(50, 350);
180 shouldBeClear(460, 390);
181 } else {
182 shouldBeClear(10, 590);
183 shouldBeClear(90, 510);
184 shouldBeOpaque(110, 490);
185 shouldBeOpaque(300, 400);
186 shouldBeOpaque(450, 220);
187 shouldBeClear(500, 550);
188 shouldBeClear(50, 250);
189 shouldBeClear(460, 210);
190 }
167 191
168 // should be drawn to (50, 50), (226, 194) 192 // should be drawn to (50, 50), (226, 194)
169 clearContext(); 193 clearContext();
170 ctx.drawImage(imageBitmap, 0, 0, 300, 300); 194 ctx.drawImage(imageBitmap, 0, 0, 300, 300);
171 shouldBeClear(10, 10); 195 if (options[optionIndex] == "none") {
172 shouldBeClear(40, 40); 196 shouldBeClear(10, 10);
173 shouldBeOpaque(60, 60); 197 shouldBeClear(40, 40);
174 shouldBeOpaque(220, 190); 198 shouldBeOpaque(60, 60);
175 shouldBeClear(230, 50); 199 shouldBeOpaque(220, 190);
176 shouldBeClear(50, 200); 200 shouldBeClear(230, 50);
177 shouldBeClear(230, 200); 201 shouldBeClear(50, 200);
202 shouldBeClear(230, 200);
203 } else {
204 shouldBeClear(10, 290);
205 shouldBeClear(40, 260);
206 shouldBeOpaque(60, 240);
207 shouldBeOpaque(220, 110);
208 shouldBeClear(230, 250);
209 shouldBeClear(50, 100);
210 shouldBeClear(230, 100);
211 }
178 } 212 }
179 213
180 function checkOverCropRight(imageBitmap) { 214 function checkOverCropRight(imageBitmap) {
181 bitmap = imageBitmap; 215 bitmap = imageBitmap;
182 shouldBeType("bitmap", "ImageBitmap"); 216 shouldBeType("bitmap", "ImageBitmap");
183 217
184 // should be drawn to (0, 0), (252, 188) 218 // should be drawn to (0, 0), (252, 188)
185 clearContext(); 219 clearContext();
186 ctx.drawImage(imageBitmap, 0, 0); 220 ctx.drawImage(imageBitmap, 0, 0);
187 shouldBeOpaque(10, 10); 221 if (options[optionIndex] == "none") {
188 shouldBeOpaque(100, 100); 222 shouldBeOpaque(10, 10);
189 shouldBeOpaque(200, 50); 223 shouldBeOpaque(100, 100);
190 shouldBeOpaque(50, 150); 224 shouldBeOpaque(200, 50);
191 shouldBeOpaque(250, 180); 225 shouldBeOpaque(50, 150);
192 shouldBeClear(360, 40); 226 shouldBeOpaque(250, 180);
193 shouldBeClear(80, 190); 227 shouldBeClear(360, 40);
194 shouldBeClear(260, 190); 228 shouldBeClear(80, 190);
229 shouldBeClear(260, 190);
230 } else {
231 shouldBeOpaque(10, 490);
232 shouldBeOpaque(100, 400);
233 shouldBeOpaque(200, 450);
234 shouldBeOpaque(50, 350);
235 shouldBeOpaque(250, 320);
236 shouldBeClear(360, 460);
237 shouldBeClear(80, 310);
238 shouldBeClear(260, 310);
239 }
195 } 240 }
196 241
197 function checkEmpty(imageBitmap) { 242 function checkEmpty(imageBitmap) {
198 bitmap = imageBitmap; 243 bitmap = imageBitmap;
199 shouldBeType("bitmap", "ImageBitmap"); 244 shouldBeType("bitmap", "ImageBitmap");
200 245
201 // nothing should be drawn 246 // nothing should be drawn
202 clearContext(); 247 clearContext();
203 ctx.drawImage(imageBitmap, 0, 0); 248 ctx.drawImage(imageBitmap, 0, 0);
204 shouldBeClear(10, 10); 249 shouldBeClear(10, 10);
205 shouldBeClear(90, 90); 250 shouldBeClear(90, 90);
206 shouldBeClear(110, 110); 251 shouldBeClear(110, 110);
207 shouldBeClear(210, 210); 252 shouldBeClear(210, 210);
208 } 253 }
209 254
210 </script> 255 </script>
211 </body> 256 </body>
212 </html> 257 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-flipY-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video-flipY-expected.txt » ('j') | third_party/WebKit/Source/core/frame/ImageBitmap.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698