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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: Tools/Scripts/webkitpy/layout_tests/controllers/repaint_overlay.py

Issue 315443002: Compute minimum repaint and show them in overlay (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebase Created 6 years, 6 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 | « Source/core/testing/Internals.idl ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 # Copyright 2014 The Chromium Authors. All rights reserved. 1 # Copyright 2014 The Chromium Authors. All rights reserved.
2 # Use of this source code is governed by a BSD-style license that can be 2 # Use of this source code is governed by a BSD-style license that can be
3 # found in the LICENSE file. 3 # found in the LICENSE file.
4 4
5 import re 5 import re
6 6
7 7
8 def result_contains_repaint_rects(text): 8 def result_contains_repaint_rects(text):
9 return isinstance(text, str) and re.search('^\s*\(repaint rects$', text, re. MULTILINE) != None 9 return isinstance(text, str) and re.search('^\s*\(repaint rects$', text, re. MULTILINE) != None
10 10
11 11
12 def generate_repaint_overlay_html(test_name, actual_text, expected_text): 12 def generate_repaint_overlay_html(test_name, actual_text, expected_text):
13 if not result_contains_repaint_rects(expected_text): 13 if not result_contains_repaint_rects(expected_text):
14 return '' 14 return ''
15 15
16 def make_js_rect(input_str): 16 def make_js_rect(input_str):
17 rect_pattern = '\(rect\s+(\d+\.\d+)\s+(\d+\.\d+)\s+(\d+\.\d+)\s+(\d+\.\d +)\)' 17 rect_pattern = '\(rect\s+(\d+\.\d+)\s+(\d+\.\d+)\s+(\d+\.\d+)\s+(\d+\.\d +)\)'
18 rects = [] 18 rects = []
19 for m in re.finditer(rect_pattern, input_str): 19 for m in re.finditer(rect_pattern, input_str):
20 rects.append('[' + ','.join(m.groups()) + ']') 20 rects.append('[' + ','.join(m.groups()) + ']')
21 return '[' + ','.join(rects) + ']' 21 return '[' + ','.join(rects) + ']'
22 22
23 # FIXME: Need to consider layer offset and transforms. 23 # FIXME: Need to consider layer offset and transforms.
24 expected_rects = make_js_rect(expected_text) 24 expected_rects = make_js_rect(expected_text)
25 actual_rects = make_js_rect(actual_text) 25 actual_rects = make_js_rect(actual_text)
26 26
27 minimum_repaint = '[]'
28 minimum_repaint_match = re.search('Minimum repaint:\n(\[.*\n\])', actual_tex t, re.DOTALL)
29 if minimum_repaint_match:
30 minimum_repaint = minimum_repaint_match.group(1)
31
27 return """<!DOCTYPE HTML> 32 return """<!DOCTYPE HTML>
28 <html> 33 <html>
29 <head> 34 <head>
30 <title>%(title)s</title> 35 <title>%(title)s</title>
31 <style> 36 <style>
32 body { 37 body {
33 margin: 0; 38 margin: 0;
34 padding: 0; 39 padding: 0;
35 } 40 }
36 iframe { 41 iframe {
37 position: absolute; 42 position: absolute;
38 top: 60px; 43 top: 80px;
39 left: 0; 44 left: 0;
40 border: 0; 45 border: 0;
41 z-index: -1; 46 z-index: -1;
42 } 47 }
43 canvas { 48 canvas {
44 position: absolute; 49 position: absolute;
45 top: 60px; 50 top: 80px;
46 left: 0; 51 left: 0;
47 z-index: 1; 52 z-index: 1;
48 } 53 }
49 #actual { display: none; } 54 #actual, #minimum-repaint {
55 display: none;
56 }
50 #dump { 57 #dump {
51 position: absolute; 58 position: absolute;
52 top: 60px; 59 top: 80px;
53 left: 0; 60 left: 0;
54 z-index: 2; 61 z-index: 2;
55 display: none; 62 display: none;
56 } 63 }
57 </style> 64 </style>
58 </head> 65 </head>
59 <body> 66 <body>
60 Note: This version doesn't support transformation and layer offset yet.<br> 67 <a href="http://crbug.com/381221">Known issues (layer transformations, layer off sets, etc.)</a><br>
61 <label><input type="checkbox" checked onchange="toggle_test(this.checked)">Show test</label> 68 <label><input id="show-test" type="checkbox" checked onchange="toggle_test(this. checked)">Show test</label>
62 <label><input type="checkbox" checked onchange="toggle_diff_only(this.checked)"> Show differences only</label> 69 <label><input id="show-diff-only" type="checkbox" checked onchange="toggle_diff_ only(this.checked)">Diffs only</label>
63 <label><input type="checkbox" checked onchange="toggle_hide_duplicate_rects(this .checked)">Hide duplicate rects</label> 70 <label><input type="checkbox" checked onchange="toggle_hide_duplicate_rects(this .checked)">Hide duplicate rects</label>
64 <label><input type="checkbox" onchange="toggle_print_rects(this.checked)">Dump r ects</label> 71 <label><input type="checkbox" onchange="toggle_dump_rects(this.checked)">Dump re cts</label>
72 <label title="See fast/repaint/resources/text-based-repaint.js for how this work s">
73 <input id="show-minimum-repaint" type="checkbox" onchange="toggle_minimum_re paint(this.checked)">Minimum repaint
74 </label>
75 <label><input id="use-solid-colors" type="checkbox" onchange="toggle_solid_color (this.checked)">Use solid colors</label>
76 <br>
77 <button title="See fast/repaint/resources/text-based-repaint.js for how this wor ks" onclick="highlight_under_repaint()">
78 Highlight under-repaint
79 </button>
65 <br> 80 <br>
66 <span id='type'>Expected Invalidations</span> 81 <span id='type'>Expected Invalidations</span>
67 <div id=overlay> 82 <div id=overlay>
83 <canvas id='minimum-repaint' width='2000' height='2000'></canvas>
68 <canvas id='expected' width='2000' height='2000'></canvas> 84 <canvas id='expected' width='2000' height='2000'></canvas>
69 <canvas id='actual' width='2000' height='2000'></canvas> 85 <canvas id='actual' width='2000' height='2000'></canvas>
70 <pre id='dump'></pre> 86 <pre id='dump'></pre>
71 </div> 87 </div>
72 <script> 88 <script>
73 var show_diff_only = true; 89 var show_diff_only = true;
74 var hide_duplicate_rects = true; 90 var hide_duplicate_rects = true;
91 var overlay_opacity = 0.25;
75 92
76 function toggle_test(show_test) { 93 function toggle_test(show_test) {
77 iframe.style.display = show_test ? 'block' : 'none'; 94 iframe.style.display = show_test ? 'block' : 'none';
78 } 95 }
79 96
80 function toggle_diff_only(new_show_diff_only) { 97 function toggle_diff_only(new_show_diff_only) {
81 show_diff_only = new_show_diff_only; 98 show_diff_only = new_show_diff_only;
82 draw_repaint_rects(); 99 draw_repaint_rects();
83 } 100 }
84 101
85 function toggle_hide_duplicate_rects(new_hide_duplicate_rects) { 102 function toggle_hide_duplicate_rects(new_hide_duplicate_rects) {
86 hide_duplicate_rects = new_hide_duplicate_rects; 103 hide_duplicate_rects = new_hide_duplicate_rects;
87 draw_repaint_rects(); 104 draw_repaint_rects();
88 } 105 }
89 106
90 function toggle_print_rects(dump_rects) { 107 function toggle_dump_rects(dump_rects) {
91 document.getElementById('dump').style.display = dump_rects ? 'block' : 'none '; 108 document.getElementById('dump').style.display = dump_rects ? 'block' : 'none ';
92 } 109 }
93 110
111 function toggle_minimum_repaint(show_minimum_repaint) {
112 document.getElementById('minimum-repaint').style.display = show_minimum_repa int ? 'block' : 'none';
113 }
114
115 function toggle_solid_color(use_solid_color) {
116 overlay_opacity = use_solid_color ? 1 : 0.25;
117 draw_repaint_rects();
118 draw_minimum_repaint();
119 }
120
121 function highlight_under_repaint() {
122 document.getElementById('show-test').checked = false;
123 toggle_test(false);
124 document.getElementById('show-diff-only').checked = false;
125 show_diff_only = false;
126 document.getElementById('show-minimum-repaint').checked = true;
127 toggle_minimum_repaint(true);
128 document.getElementById('use-solid-colors').checked = true;
129 toggle_solid_color(true);
130 }
131
94 var original_expected_rects = %(expected_rects)s; 132 var original_expected_rects = %(expected_rects)s;
95 var original_actual_rects = %(actual_rects)s; 133 var original_actual_rects = %(actual_rects)s;
134 var minimum_repaint = %(minimum_repaint)s;
96 135
97 function rectsEqual(rect1, rect2) { 136 function rectsEqual(rect1, rect2) {
98 return rect1[0] == rect2[0] && rect1[1] == rect2[1] && rect1[2] == rect2[2] && rect1[3] == rect2[3]; 137 return rect1[0] == rect2[0] && rect1[1] == rect2[1] && rect1[2] == rect2[2] && rect1[3] == rect2[3];
99 } 138 }
100 139
101 function findDifference(rects1, rects2) { 140 function findDifference(rects1, rects2) {
102 for (var i = rects1.length - 1; i >= 0; i--) { 141 for (var i = rects1.length - 1; i >= 0; i--) {
103 for (var k = rects2.length - 1; k >= 0; k--) { 142 for (var k = rects2.length - 1; k >= 0; k--) {
104 if (rectsEqual(rects1[i], rects2[k])) { 143 if (rectsEqual(rects1[i], rects2[k])) {
105 rects1.splice(i, 1); 144 rects1.splice(i, 1);
(...skipping 13 matching lines...) Expand all
119 } 158 }
120 } 159 }
121 } 160 }
122 } 161 }
123 162
124 function draw_rects(context, rects) { 163 function draw_rects(context, rects) {
125 context.clearRect(0, 0, 2000, 2000); 164 context.clearRect(0, 0, 2000, 2000);
126 for (var i = 0; i < rects.length; i++) { 165 for (var i = 0; i < rects.length; i++) {
127 var rect = rects[i]; 166 var rect = rects[i];
128 context.fillRect(rect[0], rect[1], rect[2], rect[3]); 167 context.fillRect(rect[0], rect[1], rect[2], rect[3]);
129 context.strokeRect(rect[0], rect[1], rect[2], rect[3]);
130 } 168 }
131 } 169 }
132 170
133 var expected_canvas = document.getElementById('expected'); 171 var expected_canvas = document.getElementById('expected');
134 var actual_canvas = document.getElementById('actual'); 172 var actual_canvas = document.getElementById('actual');
173 var minimum_repaint_canvas = document.getElementById('minimum-repaint');
135 174
136 function dump_rects(rects) { 175 function dump_rects(rects) {
137 var result = ''; 176 var result = '';
138 for (var i = 0; i < rects.length; i++) 177 for (var i = 0; i < rects.length; i++)
139 result += '(' + rects[i].toString() + ')\\n'; 178 result += '(' + rects[i].toString() + ')\\n';
140 return result; 179 return result;
141 } 180 }
142 181
143 function draw_repaint_rects() { 182 function draw_repaint_rects() {
144 var expected_rects = original_expected_rects.slice(0); 183 var expected_rects = original_expected_rects.slice(0);
145 var actual_rects = original_actual_rects.slice(0); 184 var actual_rects = original_actual_rects.slice(0);
185
146 if (hide_duplicate_rects) { 186 if (hide_duplicate_rects) {
147 removeDuplicateRects(expected_rects); 187 removeDuplicateRects(expected_rects);
148 removeDuplicateRects(actual_rects); 188 removeDuplicateRects(actual_rects);
149 } 189 }
150 190
151 if (show_diff_only) 191 if (show_diff_only)
152 findDifference(expected_rects, actual_rects); 192 findDifference(expected_rects, actual_rects);
153 193
154 document.getElementById('dump').textContent = 194 document.getElementById('dump').textContent =
155 'Expected:\\n' + dump_rects(expected_rects) 195 'Expected:\\n' + dump_rects(expected_rects)
156 + '\\nActual:\\n' + dump_rects(actual_rects); 196 + '\\nActual:\\n' + dump_rects(actual_rects)
197 + '\\nMinimal:\\n' + dump_rects(minimum_repaint);
157 198
158 var expected_ctx = expected_canvas.getContext("2d"); 199 var expected_ctx = expected_canvas.getContext("2d");
159 expected_ctx.lineWidth = 0.5; 200 expected_ctx.fillStyle = 'rgba(255, 0, 0, ' + overlay_opacity + ')';
160 expected_ctx.strokeStyle = 'rgba(255, 0, 0, 1)';
161 expected_ctx.fillStyle = 'rgba(255, 0, 0, 0.25)';
162 draw_rects(expected_ctx, expected_rects); 201 draw_rects(expected_ctx, expected_rects);
163 202
164 var actual_ctx = actual_canvas.getContext("2d"); 203 var actual_ctx = actual_canvas.getContext("2d");
165 actual_ctx.lineWidth = 1; 204 actual_ctx.fillStyle = 'rgba(0, 255, 0, ' + overlay_opacity + ')';
166 actual_ctx.strokeStyle = 'rgba(0, 255, 0, 1)';
167 actual_ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
168 draw_rects(actual_ctx, actual_rects); 205 draw_rects(actual_ctx, actual_rects);
169 } 206 }
207
208 function draw_minimum_repaint() {
209 var context = minimum_repaint_canvas.getContext("2d");
210 context.fillStyle = 'rgba(0, 0, 0, 1)';
211 draw_rects(context, minimum_repaint);
212 }
213
170 draw_repaint_rects(); 214 draw_repaint_rects();
215 draw_minimum_repaint();
171 216
172 var path = decodeURIComponent(location.search).substr(1); 217 var path = decodeURIComponent(location.search).substr(1);
173 var iframe = document.createElement('iframe'); 218 var iframe = document.createElement('iframe');
174 iframe.id = 'test-frame'; 219 iframe.id = 'test-frame';
175 iframe.width = 800; 220 iframe.width = 800;
176 iframe.height = 600; 221 iframe.height = 600;
177 iframe.src = path; 222 iframe.src = path;
178 223
179 var overlay = document.getElementById('overlay'); 224 var overlay = document.getElementById('overlay');
180 overlay.appendChild(iframe); 225 overlay.appendChild(iframe);
(...skipping 13 matching lines...) Expand all
194 expected_showing = !expected_showing 239 expected_showing = !expected_showing
195 } 240 }
196 setInterval(flip, 3000); 241 setInterval(flip, 3000);
197 </script> 242 </script>
198 </body> 243 </body>
199 </html> 244 </html>
200 """ % { 245 """ % {
201 'title': test_name, 246 'title': test_name,
202 'expected_rects': expected_rects, 247 'expected_rects': expected_rects,
203 'actual_rects': actual_rects, 248 'actual_rects': actual_rects,
249 'minimum_repaint': minimum_repaint,
204 } 250 }
OLDNEW
« no previous file with comments | « Source/core/testing/Internals.idl ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698