| OLD | NEW |
| 1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file |
| 2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
| 3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
| 4 | 4 |
| 5 library canvas_rendering_context_2d_test; | 5 library canvas_rendering_context_2d_test; |
| 6 | 6 |
| 7 import 'dart:html'; | 7 import 'dart:html'; |
| 8 import 'dart:math'; | 8 import 'dart:math'; |
| 9 | 9 |
| 10 import 'package:unittest/html_individual_config.dart'; | 10 import 'package:unittest/html_individual_config.dart'; |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 54 otherContext = null; | 54 otherContext = null; |
| 55 video = null; | 55 video = null; |
| 56 } | 56 } |
| 57 | 57 |
| 58 List<int> readPixel(int x, int y) { | 58 List<int> readPixel(int x, int y) { |
| 59 var imageData = context.getImageData(x, y, 1, 1); | 59 var imageData = context.getImageData(x, y, 1, 1); |
| 60 return imageData.data; | 60 return imageData.data; |
| 61 } | 61 } |
| 62 | 62 |
| 63 /// Returns true if the pixel has some data in it, false otherwise. | 63 /// Returns true if the pixel has some data in it, false otherwise. |
| 64 bool isPixelFilled(int x, int y) => readPixel(x,y).any((p) => p != 0); | 64 bool isPixelFilled(int x, int y) => readPixel(x, y).any((p) => p != 0); |
| 65 | 65 |
| 66 String pixelDataToString(List<int> data, int x, int y) { | 66 String pixelDataToString(List<int> data, int x, int y) { |
| 67 return '[${data.join(", ")}]'; | 67 return '[${data.join(", ")}]'; |
| 68 } | 68 } |
| 69 | 69 |
| 70 String _filled(bool v) => v ? "filled" : "unfilled"; | 70 String _filled(bool v) => v ? "filled" : "unfilled"; |
| 71 | 71 |
| 72 void expectPixelFilled(int x, int y, [bool filled = true]) { | 72 void expectPixelFilled(int x, int y, [bool filled = true]) { |
| 73 expect(isPixelFilled(x, y), filled, reason: | 73 expect(isPixelFilled(x, y), filled, |
| 74 'Pixel at ($x, $y) was expected to' | 74 reason: 'Pixel at ($x, $y) was expected to' |
| 75 ' be: <${_filled(filled)}> but was: <${_filled(!filled)}> with data: ' | 75 ' be: <${_filled(filled)}> but was: <${_filled(!filled)}> with data: ' |
| 76 '${pixelDataToString(readPixel(x, y), x, y)}'); | 76 '${pixelDataToString(readPixel(x, y), x, y)}'); |
| 77 } | 77 } |
| 78 | 78 |
| 79 void expectPixelUnfilled(int x, int y) { | 79 void expectPixelUnfilled(int x, int y) { |
| 80 expectPixelFilled(x, y, false); | 80 expectPixelFilled(x, y, false); |
| 81 } | 81 } |
| 82 | 82 |
| 83 main() { | 83 main() { |
| 84 useHtmlIndividualConfiguration(); | 84 useHtmlIndividualConfiguration(); |
| 85 | 85 |
| 86 group('pixel_manipulation', () { | 86 group('pixel_manipulation', () { |
| (...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 146 }); | 146 }); |
| 147 | 147 |
| 148 test('strokeStyle', () { | 148 test('strokeStyle', () { |
| 149 context.strokeStyle = "blue"; | 149 context.strokeStyle = "blue"; |
| 150 context.lineWidth = 10; | 150 context.lineWidth = 10; |
| 151 context.strokeRect(0, 0, canvas.width, canvas.height); | 151 context.strokeRect(0, 0, canvas.width, canvas.height); |
| 152 expect(readPixel(2, 2), [0, 0, 255, 255]); | 152 expect(readPixel(2, 2), [0, 0, 255, 255]); |
| 153 }); | 153 }); |
| 154 | 154 |
| 155 test('fillStyle linearGradient', () { | 155 test('fillStyle linearGradient', () { |
| 156 var gradient = context.createLinearGradient(0,0,20,20); | 156 var gradient = context.createLinearGradient(0, 0, 20, 20); |
| 157 gradient.addColorStop(0,'red'); | 157 gradient.addColorStop(0, 'red'); |
| 158 gradient.addColorStop(1,'blue'); | 158 gradient.addColorStop(1, 'blue'); |
| 159 context.fillStyle = gradient; | 159 context.fillStyle = gradient; |
| 160 context.fillRect(0, 0, canvas.width, canvas.height); | 160 context.fillRect(0, 0, canvas.width, canvas.height); |
| 161 expect(context.fillStyle is CanvasGradient, isTrue); | 161 expect(context.fillStyle is CanvasGradient, isTrue); |
| 162 }); | 162 }); |
| 163 | 163 |
| 164 test('putImageData', () { | 164 test('putImageData', () { |
| 165 context.fillStyle = 'green'; | 165 context.fillStyle = 'green'; |
| 166 context.fillRect(0, 0, canvas.width, canvas.height); | 166 context.fillRect(0, 0, canvas.width, canvas.height); |
| 167 | 167 |
| 168 ImageData expectedData = context.getImageData(0, 0, 10, 10); | 168 ImageData expectedData = context.getImageData(0, 0, 10, 10); |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 202 drawnData.data[7 * 4 + 3] = 255; | 202 drawnData.data[7 * 4 + 3] = 255; |
| 203 | 203 |
| 204 // Use a dirty rectangle to limit what pixels are drawn. | 204 // Use a dirty rectangle to limit what pixels are drawn. |
| 205 context.putImageData(drawnData, 0, 0, 1, 0, 5, 5); | 205 context.putImageData(drawnData, 0, 0, 1, 0, 5, 5); |
| 206 | 206 |
| 207 // Expect the data to be all green, as we skip all drawn pixels. | 207 // Expect the data to be all green, as we skip all drawn pixels. |
| 208 ImageData expectedData = context.createImageData(10, 10); | 208 ImageData expectedData = context.createImageData(10, 10); |
| 209 for (int i = 0; i < expectedData.data.length; i++) { | 209 for (int i = 0; i < expectedData.data.length; i++) { |
| 210 switch (i % 4) { | 210 switch (i % 4) { |
| 211 case 0: | 211 case 0: |
| 212 expectedData.data[i] = 0; | 212 expectedData.data[i] = 0; |
| 213 break; | 213 break; |
| 214 case 1: | 214 case 1: |
| 215 expectedData.data[i] = 128; | 215 expectedData.data[i] = 128; |
| 216 break; | 216 break; |
| 217 case 2: | 217 case 2: |
| 218 expectedData.data[i] = 0; | 218 expectedData.data[i] = 0; |
| 219 break; | 219 break; |
| 220 case 3: | 220 case 3: |
| 221 expectedData.data[i] = 255; | 221 expectedData.data[i] = 255; |
| 222 break; | 222 break; |
| 223 } | 223 } |
| 224 } | 224 } |
| 225 // Third pixel was copied. | 225 // Third pixel was copied. |
| 226 expectedData.data[2 * 4 + 0] = 25; | 226 expectedData.data[2 * 4 + 0] = 25; |
| 227 expectedData.data[2 * 4 + 1] = 65; | 227 expectedData.data[2 * 4 + 1] = 65; |
| 228 expectedData.data[2 * 4 + 2] = 255; | 228 expectedData.data[2 * 4 + 2] = 255; |
| 229 expectedData.data[2 * 4 + 3] = 255; | 229 expectedData.data[2 * 4 + 3] = 255; |
| 230 | 230 |
| 231 // Make sure that our data is all green. | 231 // Make sure that our data is all green. |
| 232 var resultingData = context.getImageData(0, 0, 10, 10); | 232 var resultingData = context.getImageData(0, 0, 10, 10); |
| 233 expect(resultingData.data, expectedData.data); | 233 expect(resultingData.data, expectedData.data); |
| 234 }); | 234 }); |
| 235 | 235 |
| 236 test('putImageData throws with wrong number of arguments', () { | 236 test('putImageData throws with wrong number of arguments', () { |
| 237 ImageData expectedData = context.getImageData(0, 0, 10, 10); | 237 ImageData expectedData = context.getImageData(0, 0, 10, 10); |
| 238 | 238 |
| 239 // TODO(antonm): in Dartium ArgumentError should be thrown too. | 239 // TODO(antonm): in Dartium ArgumentError should be thrown too. |
| 240 expect(() => context.putImageData(expectedData, 0, 0, 1), | 240 expect(() => context.putImageData(expectedData, 0, 0, 1), throws); |
| 241 throws); | 241 expect(() => context.putImageData(expectedData, 0, 0, 1, 1), throws); |
| 242 expect(() => context.putImageData(expectedData, 0, 0, 1, 1), | 242 expect(() => context.putImageData(expectedData, 0, 0, 1, 1, 5), throws); |
| 243 throws); | |
| 244 expect(() => context.putImageData(expectedData, 0, 0, 1, 1, 5), | |
| 245 throws); | |
| 246 }); | 243 }); |
| 247 }); | 244 }); |
| 248 | 245 |
| 249 group('arc', () { | 246 group('arc', () { |
| 250 setUp(setupFunc); | 247 setUp(setupFunc); |
| 251 tearDown(tearDownFunc); | 248 tearDown(tearDownFunc); |
| 252 | 249 |
| 253 test('default arc should be clockwise', () { | 250 test('default arc should be clockwise', () { |
| 254 context.beginPath(); | 251 context.beginPath(); |
| 255 final r = 10; | 252 final r = 10; |
| 256 | 253 |
| 257 // Center of arc. | 254 // Center of arc. |
| 258 final cx = 20; | 255 final cx = 20; |
| 259 final cy = 20; | 256 final cy = 20; |
| 260 // Arc centered at (20, 20) with radius 10 will go clockwise | 257 // Arc centered at (20, 20) with radius 10 will go clockwise |
| 261 // from (20 + r, 20) to (20, 20 + r), which is 1/4 of a circle. | 258 // from (20 + r, 20) to (20, 20 + r), which is 1/4 of a circle. |
| 262 context.arc(cx, cy, r, 0, PI/2); | 259 context.arc(cx, cy, r, 0, PI / 2); |
| 263 | 260 |
| 264 context.strokeStyle = 'green'; | 261 context.strokeStyle = 'green'; |
| 265 context.lineWidth = 2; | 262 context.lineWidth = 2; |
| 266 context.stroke(); | 263 context.stroke(); |
| 267 | 264 |
| 268 // Center should not be filled. | 265 // Center should not be filled. |
| 269 expectPixelUnfilled(cx, cy); | 266 expectPixelUnfilled(cx, cy); |
| 270 | 267 |
| 271 // (cx + r, cy) should be filled. | 268 // (cx + r, cy) should be filled. |
| 272 expectPixelFilled(cx + r, cy, true); | 269 expectPixelFilled(cx + r, cy, true); |
| 273 // (cx, cy + r) should be filled. | 270 // (cx, cy + r) should be filled. |
| 274 expectPixelFilled(cx, cy + r, true); | 271 expectPixelFilled(cx, cy + r, true); |
| 275 // (cx - r, cy) should be empty. | 272 // (cx - r, cy) should be empty. |
| 276 expectPixelFilled(cx - r, cy, false); | 273 expectPixelFilled(cx - r, cy, false); |
| 277 // (cx, cy - r) should be empty. | 274 // (cx, cy - r) should be empty. |
| 278 expectPixelFilled(cx, cy - r, false); | 275 expectPixelFilled(cx, cy - r, false); |
| 279 | 276 |
| 280 // (cx + r/SQRT2, cy + r/SQRT2) should be filled. | 277 // (cx + r/SQRT2, cy + r/SQRT2) should be filled. |
| 281 expectPixelFilled((cx + r/SQRT2).toInt(), (cy + r/SQRT2).toInt(), true); | 278 expectPixelFilled( |
| 279 (cx + r / SQRT2).toInt(), (cy + r / SQRT2).toInt(), true); |
| 282 | 280 |
| 283 // (cx - r/SQRT2, cy - r/SQRT2) should be empty. | 281 // (cx - r/SQRT2, cy - r/SQRT2) should be empty. |
| 284 expectPixelFilled((cx - r/SQRT2).toInt(), (cy + r/SQRT2).toInt(), false); | 282 expectPixelFilled( |
| 283 (cx - r / SQRT2).toInt(), (cy + r / SQRT2).toInt(), false); |
| 285 | 284 |
| 286 // (cx + r/SQRT2, cy + r/SQRT2) should be empty. | 285 // (cx + r/SQRT2, cy + r/SQRT2) should be empty. |
| 287 expectPixelFilled((cx - r/SQRT2).toInt(), (cy - r/SQRT2).toInt(), false); | 286 expectPixelFilled( |
| 287 (cx - r / SQRT2).toInt(), (cy - r / SQRT2).toInt(), false); |
| 288 | 288 |
| 289 // (cx - r/SQRT2, cy - r/SQRT2) should be empty. | 289 // (cx - r/SQRT2, cy - r/SQRT2) should be empty. |
| 290 expectPixelFilled((cx + r/SQRT2).toInt(), (cy - r/SQRT2).toInt(), false); | 290 expectPixelFilled( |
| 291 (cx + r / SQRT2).toInt(), (cy - r / SQRT2).toInt(), false); |
| 291 }); | 292 }); |
| 292 | 293 |
| 293 test('arc anticlockwise', () { | 294 test('arc anticlockwise', () { |
| 294 context.beginPath(); | 295 context.beginPath(); |
| 295 final r = 10; | 296 final r = 10; |
| 296 | 297 |
| 297 // Center of arc. | 298 // Center of arc. |
| 298 final cx = 20; | 299 final cx = 20; |
| 299 final cy = 20; | 300 final cy = 20; |
| 300 // Arc centered at (20, 20) with radius 10 will go anticlockwise | 301 // Arc centered at (20, 20) with radius 10 will go anticlockwise |
| 301 // from (20 + r, 20) to (20, 20 + r), which is 3/4 of a circle. | 302 // from (20 + r, 20) to (20, 20 + r), which is 3/4 of a circle. |
| 302 // Because of the way arc work, when going anti-clockwise, the end points | 303 // Because of the way arc work, when going anti-clockwise, the end points |
| 303 // are not included, so small values are added to radius to make a little | 304 // are not included, so small values are added to radius to make a little |
| 304 // more than a 3/4 circle. | 305 // more than a 3/4 circle. |
| 305 context.arc(cx, cy, r, .1, PI/2 - .1, true); | 306 context.arc(cx, cy, r, .1, PI / 2 - .1, true); |
| 306 | 307 |
| 307 context.strokeStyle = 'green'; | 308 context.strokeStyle = 'green'; |
| 308 context.lineWidth = 2; | 309 context.lineWidth = 2; |
| 309 context.stroke(); | 310 context.stroke(); |
| 310 | 311 |
| 311 // Center should not be filled. | 312 // Center should not be filled. |
| 312 expectPixelUnfilled(cx, cy); | 313 expectPixelUnfilled(cx, cy); |
| 313 | 314 |
| 314 // (cx + r, cy) should be filled. | 315 // (cx + r, cy) should be filled. |
| 315 expectPixelFilled(cx + r, cy, true); | 316 expectPixelFilled(cx + r, cy, true); |
| 316 // (cx, cy + r) should be filled. | 317 // (cx, cy + r) should be filled. |
| 317 expectPixelFilled(cx, cy + r, true); | 318 expectPixelFilled(cx, cy + r, true); |
| 318 // (cx - r, cy) should be filled. | 319 // (cx - r, cy) should be filled. |
| 319 expectPixelFilled(cx - r, cy, true); | 320 expectPixelFilled(cx - r, cy, true); |
| 320 // (cx, cy - r) should be filled. | 321 // (cx, cy - r) should be filled. |
| 321 expectPixelFilled(cx, cy - r, true); | 322 expectPixelFilled(cx, cy - r, true); |
| 322 | 323 |
| 323 // (cx + r/SQRT2, cy + r/SQRT2) should be empty. | 324 // (cx + r/SQRT2, cy + r/SQRT2) should be empty. |
| 324 expectPixelFilled((cx + r/SQRT2).toInt(), (cy + r/SQRT2).toInt(), false); | 325 expectPixelFilled( |
| 326 (cx + r / SQRT2).toInt(), (cy + r / SQRT2).toInt(), false); |
| 325 | 327 |
| 326 // (cx - r/SQRT2, cy - r/SQRT2) should be filled. | 328 // (cx - r/SQRT2, cy - r/SQRT2) should be filled. |
| 327 expectPixelFilled((cx - r/SQRT2).toInt(), (cy + r/SQRT2).toInt(), true); | 329 expectPixelFilled( |
| 330 (cx - r / SQRT2).toInt(), (cy + r / SQRT2).toInt(), true); |
| 328 | 331 |
| 329 // (cx + r/SQRT2, cy + r/SQRT2) should be filled. | 332 // (cx + r/SQRT2, cy + r/SQRT2) should be filled. |
| 330 expectPixelFilled((cx - r/SQRT2).toInt(), (cy - r/SQRT2).toInt(), true); | 333 expectPixelFilled( |
| 334 (cx - r / SQRT2).toInt(), (cy - r / SQRT2).toInt(), true); |
| 331 | 335 |
| 332 // (cx - r/SQRT2, cy - r/SQRT2) should be filled. | 336 // (cx - r/SQRT2, cy - r/SQRT2) should be filled. |
| 333 expectPixelFilled((cx + r/SQRT2).toInt(), (cy - r/SQRT2).toInt(), true); | 337 expectPixelFilled( |
| 338 (cx + r / SQRT2).toInt(), (cy - r / SQRT2).toInt(), true); |
| 334 }); | 339 }); |
| 335 }); | 340 }); |
| 336 | 341 |
| 337 group('drawImage_image_element', () { | 342 group('drawImage_image_element', () { |
| 338 setUp(setupFunc); | 343 setUp(setupFunc); |
| 339 tearDown(tearDownFunc); | 344 tearDown(tearDownFunc); |
| 340 // Draw an image to the canvas from an image element. | 345 // Draw an image to the canvas from an image element. |
| 341 test('with 3 params', () { | 346 test('with 3 params', () { |
| 342 var dataUrl = otherCanvas.toDataUrl('image/gif'); | 347 var dataUrl = otherCanvas.toDataUrl('image/gif'); |
| 343 var img = new ImageElement(); | 348 var img = new ImageElement(); |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 386 otherContext.fillStyle = "blue"; | 391 otherContext.fillStyle = "blue"; |
| 387 otherContext.fillRect(5, 5, 5, 5); | 392 otherContext.fillRect(5, 5, 5, 5); |
| 388 var dataUrl = otherCanvas.toDataUrl('image/gif'); | 393 var dataUrl = otherCanvas.toDataUrl('image/gif'); |
| 389 var img = new ImageElement(); | 394 var img = new ImageElement(); |
| 390 | 395 |
| 391 img.onLoad.listen(expectAsync((_) { | 396 img.onLoad.listen(expectAsync((_) { |
| 392 // This will take a 6x6 square from the first canvas from position 2,2 | 397 // This will take a 6x6 square from the first canvas from position 2,2 |
| 393 // and then scale it to a 20x20 square and place it to the second | 398 // and then scale it to a 20x20 square and place it to the second |
| 394 // canvas at 50,50. | 399 // canvas at 50,50. |
| 395 context.drawImageToRect(img, new Rectangle(50, 50, 20, 20), | 400 context.drawImageToRect(img, new Rectangle(50, 50, 20, 20), |
| 396 sourceRect: new Rectangle(2, 2, 6, 6)); | 401 sourceRect: new Rectangle(2, 2, 6, 6)); |
| 397 | 402 |
| 398 checkPixel(readPixel(50, 50), [255, 0, 0, 255]); | 403 checkPixel(readPixel(50, 50), [255, 0, 0, 255]); |
| 399 checkPixel(readPixel(55, 55), [255, 0, 0, 255]); | 404 checkPixel(readPixel(55, 55), [255, 0, 0, 255]); |
| 400 checkPixel(readPixel(60, 50), [255, 0, 0, 255]); | 405 checkPixel(readPixel(60, 50), [255, 0, 0, 255]); |
| 401 checkPixel(readPixel(65, 65), [0, 0, 255, 255]); | 406 checkPixel(readPixel(65, 65), [0, 0, 255, 255]); |
| 402 checkPixel(readPixel(69, 69), [0, 0, 255, 255]); | 407 checkPixel(readPixel(69, 69), [0, 0, 255, 255]); |
| 403 | 408 |
| 404 expectPixelFilled(50, 50); | 409 expectPixelFilled(50, 50); |
| 405 expectPixelFilled(55, 55); | 410 expectPixelFilled(55, 55); |
| 406 expectPixelFilled(59, 59); | 411 expectPixelFilled(59, 59); |
| (...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 487 expectPixelFilled(57, 57); | 492 expectPixelFilled(57, 57); |
| 488 expectPixelUnfilled(58, 58); | 493 expectPixelUnfilled(58, 58); |
| 489 expectPixelUnfilled(0, 0); | 494 expectPixelUnfilled(0, 0); |
| 490 expectPixelUnfilled(70, 70); | 495 expectPixelUnfilled(70, 70); |
| 491 })); | 496 })); |
| 492 | 497 |
| 493 video.onError.listen((_) { | 498 video.onError.listen((_) { |
| 494 fail('URL failed to load.'); | 499 fail('URL failed to load.'); |
| 495 }); | 500 }); |
| 496 | 501 |
| 497 if(video.canPlayType('video/webm; codecs="vp8.0, vorbis"', '') != '') { | 502 if (video.canPlayType('video/webm; codecs="vp8.0, vorbis"', '') != '') { |
| 498 video.src = webmVideoUrl; | 503 video.src = webmVideoUrl; |
| 499 } else if(video.canPlayType('video/mp4; codecs="avc1.4D401E, mp4a.40.2"', | 504 } else if (video.canPlayType( |
| 500 null) != '') { | 505 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"', null) != |
| 506 '') { |
| 501 video.src = mp4VideoUrl; | 507 video.src = mp4VideoUrl; |
| 502 } else { | 508 } else { |
| 503 window.console.log('Video is not supported on this system.'); | 509 window.console.log('Video is not supported on this system.'); |
| 504 } | 510 } |
| 505 }); | 511 }); |
| 506 | 512 |
| 507 test('with 5 params', () { | 513 test('with 5 params', () { |
| 508 video.onCanPlay.listen(expectAsync((_) { | 514 video.onCanPlay.listen(expectAsync((_) { |
| 509 context.drawImageToRect(video, new Rectangle(50, 50, 20, 20)); | 515 context.drawImageToRect(video, new Rectangle(50, 50, 20, 20)); |
| 510 | 516 |
| 511 expectPixelFilled(50, 50); | 517 expectPixelFilled(50, 50); |
| 512 expectPixelFilled(55, 55); | 518 expectPixelFilled(55, 55); |
| 513 expectPixelFilled(59, 59); | 519 expectPixelFilled(59, 59); |
| 514 expectPixelFilled(60, 60); | 520 expectPixelFilled(60, 60); |
| 515 expectPixelFilled(69, 69); | 521 expectPixelFilled(69, 69); |
| 516 expectPixelUnfilled(70, 70); | 522 expectPixelUnfilled(70, 70); |
| 517 expectPixelUnfilled(0, 0); | 523 expectPixelUnfilled(0, 0); |
| 518 expectPixelUnfilled(80, 80); | 524 expectPixelUnfilled(80, 80); |
| 519 })); | 525 })); |
| 520 video.onError.listen((_) { | 526 video.onError.listen((_) { |
| 521 fail('URL failed to load.'); | 527 fail('URL failed to load.'); |
| 522 }); | 528 }); |
| 523 | 529 |
| 524 if(video.canPlayType('video/webm; codecs="vp8.0, vorbis"', '') != '') { | 530 if (video.canPlayType('video/webm; codecs="vp8.0, vorbis"', '') != '') { |
| 525 video.src = webmVideoUrl; | 531 video.src = webmVideoUrl; |
| 526 } else if(video.canPlayType('video/mp4; codecs="avc1.4D401E, mp4a.40.2"', | 532 } else if (video.canPlayType( |
| 527 null) != '') { | 533 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"', null) != |
| 534 '') { |
| 528 video.src = mp4VideoUrl; | 535 video.src = mp4VideoUrl; |
| 529 } else { | 536 } else { |
| 530 // TODO(amouravski): Better fallback? | 537 // TODO(amouravski): Better fallback? |
| 531 window.console.log('Video is not supported on this system.'); | 538 window.console.log('Video is not supported on this system.'); |
| 532 } | 539 } |
| 533 }); | 540 }); |
| 534 | 541 |
| 535 test('with 9 params', () { | 542 test('with 9 params', () { |
| 536 video.onCanPlay.listen(expectAsync((_) { | 543 video.onCanPlay.listen(expectAsync((_) { |
| 537 context.drawImageToRect(video, new Rectangle(50, 50, 20, 20), | 544 context.drawImageToRect(video, new Rectangle(50, 50, 20, 20), |
| 538 sourceRect: new Rectangle(2, 2, 6, 6)); | 545 sourceRect: new Rectangle(2, 2, 6, 6)); |
| 539 | 546 |
| 540 expectPixelFilled(50, 50); | 547 expectPixelFilled(50, 50); |
| 541 expectPixelFilled(55, 55); | 548 expectPixelFilled(55, 55); |
| 542 expectPixelFilled(59, 59); | 549 expectPixelFilled(59, 59); |
| 543 expectPixelFilled(60, 60); | 550 expectPixelFilled(60, 60); |
| 544 expectPixelFilled(69, 69); | 551 expectPixelFilled(69, 69); |
| 545 expectPixelUnfilled(70, 70); | 552 expectPixelUnfilled(70, 70); |
| 546 expectPixelUnfilled(0, 0); | 553 expectPixelUnfilled(0, 0); |
| 547 expectPixelUnfilled(80, 80); | 554 expectPixelUnfilled(80, 80); |
| 548 })); | 555 })); |
| 549 video.onError.listen((_) { | 556 video.onError.listen((_) { |
| 550 fail('URL failed to load.'); | 557 fail('URL failed to load.'); |
| 551 }); | 558 }); |
| 552 | 559 |
| 553 if(video.canPlayType('video/webm; codecs="vp8.0, vorbis"', '') != '') { | 560 if (video.canPlayType('video/webm; codecs="vp8.0, vorbis"', '') != '') { |
| 554 video.src = webmVideoUrl; | 561 video.src = webmVideoUrl; |
| 555 } else if(video.canPlayType('video/mp4; codecs="avc1.4D401E, mp4a.40.2"', | 562 } else if (video.canPlayType( |
| 556 null) != '') { | 563 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"', null) != |
| 564 '') { |
| 557 video.src = mp4VideoUrl; | 565 video.src = mp4VideoUrl; |
| 558 } else { | 566 } else { |
| 559 // TODO(amouravski): Better fallback? | 567 // TODO(amouravski): Better fallback? |
| 560 window.console.log('Video is not supported on this system.'); | 568 window.console.log('Video is not supported on this system.'); |
| 561 } | 569 } |
| 562 }); | 570 }); |
| 563 }); | 571 }); |
| 564 | 572 |
| 565 group('drawImage_video_element_dataUrl', () { | 573 group('drawImage_video_element_dataUrl', () { |
| 566 setUp(setupFunc); | 574 setUp(setupFunc); |
| 567 tearDown(tearDownFunc); | 575 tearDown(tearDownFunc); |
| 568 | 576 |
| 569 test('with 9 params', () { | 577 test('with 9 params', () { |
| 570 video = new VideoElement(); | 578 video = new VideoElement(); |
| 571 canvas = new CanvasElement(); | 579 canvas = new CanvasElement(); |
| 572 video.onCanPlay.listen(expectAsync((_) { | 580 video.onCanPlay.listen(expectAsync((_) { |
| 573 context.drawImageToRect(video, new Rectangle(50, 50, 20, 20), | 581 context.drawImageToRect(video, new Rectangle(50, 50, 20, 20), |
| 574 sourceRect: new Rectangle(2, 2, 6, 6)); | 582 sourceRect: new Rectangle(2, 2, 6, 6)); |
| 575 | 583 |
| 576 expectPixelFilled(50, 50); | 584 expectPixelFilled(50, 50); |
| 577 expectPixelFilled(55, 55); | 585 expectPixelFilled(55, 55); |
| 578 expectPixelFilled(59, 59); | 586 expectPixelFilled(59, 59); |
| 579 expectPixelFilled(60, 60); | 587 expectPixelFilled(60, 60); |
| 580 expectPixelFilled(69, 69); | 588 expectPixelFilled(69, 69); |
| 581 expectPixelUnfilled(70, 70); | 589 expectPixelUnfilled(70, 70); |
| 582 expectPixelUnfilled(0, 0); | 590 expectPixelUnfilled(0, 0); |
| 583 expectPixelUnfilled(80, 80); | 591 expectPixelUnfilled(80, 80); |
| 584 })); | 592 })); |
| 585 video.onError.listen((_) { | 593 video.onError.listen((_) { |
| 586 fail('URL failed to load.'); | 594 fail('URL failed to load.'); |
| 587 }); | 595 }); |
| 588 | 596 |
| 589 if(video.canPlayType('video/webm; codecs="vp8.0, vorbis"', '') != '') { | 597 if (video.canPlayType('video/webm; codecs="vp8.0, vorbis"', '') != '') { |
| 590 video.src = webmVideoDataUrl; | 598 video.src = webmVideoDataUrl; |
| 591 } else if(video.canPlayType('video/mp4; codecs="avc1.4D401E, mp4a.40.2"', | 599 } else if (video.canPlayType( |
| 592 null) != '') { | 600 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"', null) != |
| 601 '') { |
| 593 video.src = mp4VideoDataUrl; | 602 video.src = mp4VideoDataUrl; |
| 594 } else { | 603 } else { |
| 595 // TODO(amouravski): Better fallback? | 604 // TODO(amouravski): Better fallback? |
| 596 window.console.log('Video is not supported on this system.'); | 605 window.console.log('Video is not supported on this system.'); |
| 597 } | 606 } |
| 598 }); | 607 }); |
| 599 }); | 608 }); |
| 600 | 609 |
| 601 group('drawImage_canvas_element', () { | 610 group('drawImage_canvas_element', () { |
| 602 setUp(setupFunc); | 611 setUp(setupFunc); |
| (...skipping 128 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 731 | 740 |
| 732 // The box does not draw after 20 pixels. | 741 // The box does not draw after 20 pixels. |
| 733 expectPixelUnfilled(x - 10, y); | 742 expectPixelUnfilled(x - 10, y); |
| 734 expectPixelUnfilled(x + maxWidth + 1, y); | 743 expectPixelUnfilled(x + maxWidth + 1, y); |
| 735 expectPixelUnfilled(x + maxWidth + 20, y); | 744 expectPixelUnfilled(x + maxWidth + 20, y); |
| 736 expectPixelFilled(x, y); | 745 expectPixelFilled(x, y); |
| 737 expectPixelFilled(x + 10, y); | 746 expectPixelFilled(x + 10, y); |
| 738 }); | 747 }); |
| 739 }); | 748 }); |
| 740 } | 749 } |
| OLD | NEW |