Chromium Code Reviews Chromium Code Reviews
Issue 315443002:
Compute minimum repaint and show them in overlay (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| OLD | NEW |
|---|---|
| 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 Loading... | |
| 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); | |
|
enne (OOO)
2014/06/06 19:55:16
This doesn't respect the show diffs only checkbox.
Xianzhu
2014/06/07 05:23:06
No. As we don't have minimum repaint baseline, the
| |
| 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, ' + overlay_opacity + ')'; | |
| 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 Loading... | |
| 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 } |
| OLD | NEW |
