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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-composite-repaint-by-all-imagesource.html

Issue 2321183002: Move repaint tests (except for svg/) to paint/invalidation (Closed)
Patch Set: - Created 4 years, 3 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
OLDNEW
(Empty)
1 <!doctype html>
2 <html>
3 <head>
4 <title>Check repaint region of fillRect() and drawImage() with different com posite modes.</title>
5 <style type="text/css">
6 body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff ; }
7 canvas { border: 1px solid #999; }
8 div { margin: 10px; }
9 #output h1 { font-size: medium; font-weight: normal; }
10 #output h2 { font-size: small; font-weight: normal; }
11 #output div { font-size: small; margin: 0px; }
12 #output .pass { color: green; }
13 #output .fail { color: rgb(255, 0, 0); }
14 #output .error { color: rgb(255, 0, 64); }
15 td { padding: 2px 5px; }
16 table { border-collapse: collapse; }
17 </style>
18 </head>
19 <body>
20 <div>Test Results</div>
21 <div><table id='outputtable'></table></div>
22 <div>Test Image</div>
23 <div><img id = "image" src="data:image/png;base64,
24 iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY
25 AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB
26 DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w
27 FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC
28 iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E
29 rkJggg==
30 "></div>
31 <div>Test Canvas</div>
32 <div><canvas id = "source-canvas"></canvas></div>
33 <div>Test Video</div>
34 <div><video id="video">
35 <source src="resources/canvas_video.mp4" type='video/mp4' />
36 <source src="resources/canvas_video.webm" type='video/webm' />
37 <source src="resources/canvas_video.ogv" type='video/ogg' />
38 </video></div>
39 <script src="../repaint/resources/text-based-repaint.js"></script>
40 <script type="application/x-javascript">
41 // These map to the rows of the table
42 var compositeTypes = [
43 'source-over','source-in','source-out','source-atop',
44 'destination-over','destination-in','destination-out','destination-atop',
45 'lighter','copy','xor'
46 ];
47
48 // These map to the columns of the table
49 var testNames = [
50 'solid color', 'image', 'canvas', 'video'
51 ];
52
53 function createOutputTable() {
54 var tableEl = document.getElementById('outputtable');
55 var row = tableEl.insertRow(-1);
56 var cell = row.insertCell(-1);
57 var label;
58 for (var j = 0; j < testNames.length; j++) {
59 cell = row.insertCell(-1);
60 label = document.createTextNode(testNames[j]);
61 cell.appendChild(label);
62 }
63 for (var i = 0; i < compositeTypes.length; i++) {
64 row = tableEl.insertRow(-1);
65 cell = row.insertCell(-1);
66 label = document.createTextNode(compositeTypes[i]);
67 cell.appendChild(label);
68 for (var j = 0; j < testNames.length; j++) {
69 var canvas = document.createElement('canvas');
70 canvas.width = 130;
71 canvas.height = 40;
72 canvas.id = compositeTypes[i] + testNames[j];
73 cell = row.insertCell(-1);
74 cell.appendChild(canvas);
75 }
76 }
77 }
78
79 function getContext(compositeIndex, testIndex) {
80 var id = compositeTypes[compositeIndex] + testNames[testIndex];
81 var context = document.getElementById(id).getContext('2d');
82 return context;
83 }
84
85 function setupContext(context) {
86 context.fillStyle = 'blue';
87 context.fillRect(5, 5, 120, 30);
88 context.beginPath();
89 context.moveTo(0, 0);
90 context.lineTo(0, 45);
91 context.lineTo(80, 45);
92 context.lineTo(80, 0);
93 context.clip();
94 context.translate(40, -10);
95 context.scale(0.4, 0.6);
96 context.rotate(Math.PI / 8);
97 context.translate(-10, -10);
98 }
99
100 function prepareRepaintTest() {
101 if (window.testRunner)
102 testRunner.dumpAsText();
103 createOutputTable();
104 for (var i = 0; i < compositeTypes.length; i++) {
105 for (var j = 0; j < testNames.length; j++) {
106 var context = getContext(i, j);
107 context.save();
108 setupContext(context);
109 }
110 }
111 }
112
113 function drawRect(context) {
114 context.fillStyle = 'green';
115 context.fillRect(10, 10, 150, 60);
116 }
117
118 function drawImage(context) {
119 context.drawImage(document.getElementById('image'), 10, 10);
120 }
121
122 function drawCanvas(context) {
123 context.drawImage(document.getElementById('source-canvas'), 10, 10);
124 }
125
126 function drawVideo(context) {
127 context.drawImage(document.getElementById('video'), 10, 10);
128 }
129
130 // callback from text-based-repaint.js
131 function repaintTest() {
132 for (var i = 0; i < compositeTypes.length; i++) {
133 for (var j = 0; j < testNames.length; j++) {
134 var context = getContext(i, j);
135 context.globalCompositeOperation = compositeTypes[i];
136 switch (testNames[j]) {
137 case 'solid color':
138 drawRect(context);
139 break;
140 case 'image':
141 drawImage(context);
142 break;
143 case 'canvas':
144 drawCanvas(context);
145 break;
146 case 'video':
147 drawVideo(context);
148 }
149 context.restore();
150 }
151 }
152 // Because canvas invalidations are processed at the end of the current ta sk,
153 // the repaint test has to end in a subsequent task in order to capture th e repaint.
154 setTimeout(finishRepaintTest, 0);
155 }
156
157 // we can start this test after the video can be played.
158 function startTest() {
159 video.removeEventListener("playing", startTest, true);
160 prepareRepaintTest();
161 runRepaintTest();
162 }
163
164 var video = document.getElementById("video");
165 video.addEventListener("playing", startTest, true);
166 video.play();
167
168 var imageElement = document.getElementById('image');
169 var canvas = document.getElementById('source-canvas');
170 canvas.width = imageElement.width;
171 canvas.height = imageElement.height;
172 var context = canvas.getContext('2d');
173 context.drawImage(imageElement, 0, 0);
174
175 window.testIsAsync = true;
176 </script>
177 </body>
178 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698