LayoutTests/fast/canvas/canvas-composite-video.html - Issue 530723003: canvas2d.drawImage(video) doesn't composite correctly.

Side by Side Diff: LayoutTests/fast/canvas/canvas-composite-video.html

Issue 530723003: canvas2d.drawImage(video) doesn't composite correctly. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: mark fast/canvas/canvas-composite-repaint-by-all-imagesource.html to NeedsRebaseline Created 6 years, 2 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 | Annotate | Revision Log

« no previous file with comments | « LayoutTests/fast/canvas/canvas-composite-repaint-by-all-imagesource.html ('k') | LayoutTests/fast/canvas/canvas-composite-video-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!doctype html>	1 <!doctype html>

2 <html>	2 <html>

3 <head>	3 <head>

4 <title>Test drawImage(image) with canvas with different composite modes.</ti tle>	4 <title>Test drawImage(image) with canvas with different composite modes.</ti tle>

5 <script src="resources/canvas-composite-image-common.js"></script>	5 <script src="resources/canvas-composite-image-common.js"></script>

6 <script type="application/x-javascript">

7 function drawImage(context, compositeIndex, alpha) {

8 context.globalCompositeOperation = compositeTypes[compositeIndex];

9 if (alpha)

10 context.globalAlpha = 0.5;

11 var imageElement = document.getElementById('image');

12 context.drawImage(imageElement, 10, 10);

13 }

14

15 function setupTest() {}

16

17 </script>

18 <style type="text/css">	6 <style type="text/css">

19 body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff ; }	7 body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff ; }

20 canvas { border: 1px solid #999; }	8 canvas { border: 1px solid #999; }

21 div { margin: 10px; }	9 div { margin: 10px; }

22 #output h1 { font-size: medium; font-weight: normal; }	10 #output h1 { font-size: medium; font-weight: normal; }

23 #output h2 { font-size: small; font-weight: normal; }	11 #output h2 { font-size: small; font-weight: normal; }

24 #output div { font-size: small; margin: 0px; }	12 #output div { font-size: small; margin: 0px; }

25 #output .pass { color: green; }	13 #output .pass { color: green; }

26 #output .fail { color: rgb(255, 0, 0); }	14 #output .fail { color: rgb(255, 0, 0); }

27 #output .error { color: rgb(255, 0, 64); }	15 #output .error { color: rgb(255, 0, 64); }

28 td { padding: 2px 5px; }	16 td { padding: 2px 5px; }

29 table { border-collapse: collapse; }	17 table { border-collapse: collapse; }

30 </style>	18 </style>

31 </head>	19 </head>

32 <body onload="runTest();">	20 <body>

33 <div>Test Results</div>	21 <div>Test Results</div>

34 <div><table id='outputtable'></table></div>	22 <div><table id='outputtable'></table></div>

35 <div>Test Image</div>	23 <div>Test Video</div>

36 <div><img id = "image" src="data:image/png;base64,	24 <div><video id="video" loop>

37 iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY	25 <source src="resources/canvas_video.mp4" type='video/mp4' />

38 AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB	26 <source src="resources/canvas_video.webm" type='video/webm' />

39 DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w	27 <source src="resources/canvas_video.ogv" type='video/ogg' />

40 FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC	28 </video></div>

41 iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E	29 <script type="application/x-javascript">

42 rkJggg==	30 function drawImage(context, compositeIndex, alpha) {

43 "></div>	31 context.globalCompositeOperation = compositeTypes[compositeIndex];

44 <div>Test Output</div>	32 if (alpha)

45 <div id='output'></div>	33 context.globalAlpha = 0.5;

	34 var videoElement = document.getElementById('video');

	35 context.drawImage(videoElement, 10, 10);

	36 }

	37

	38 function setupTest() {}

	39

	40 var video = document.getElementById("video");

	41 video.addEventListener("playing", playVideo, true);

	42 video.play();

	43

	44 function playVideo() {

	45 video.removeEventListener("playing", playVideo, true);

	46 // We cannot read pixel after drawing a video because of SecurityError:

	47 // The canvas has been tainted by cross-origin data.

	48 runTest("dumpAsTextWithPixelResults")

	49 }

	50 </script>

46 </body>	51 </body>

47 </html>	52 </html>

OLD	NEW