| 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 ( | 9 return isinstance(text, str) and re.search(r'"paintInvalidations": \[$', tex
t, re.MULTILINE) is not None |
| 10 re.search('"paintInvalidations": \[$', text, re.MULTILINE) is not None o
r | |
| 11 text.find('Minimum repaint:') != -1) | |
| 12 | 10 |
| 13 | 11 |
| 14 def extract_layer_tree(input_str): | 12 def extract_layer_tree(input_str): |
| 15 if not isinstance(input_str, str): | 13 if not isinstance(input_str, str): |
| 16 return '{}' | 14 return '{}' |
| 17 | 15 |
| 18 if input_str[0:2] == '{\n': | 16 if input_str[0:2] == '{\n': |
| 19 start = 0 | 17 start = 0 |
| 20 else: | 18 else: |
| 21 start = input_str.find('\n{\n') | 19 start = input_str.find('\n{\n') |
| 22 if start == -1: | 20 if start == -1: |
| 23 return '{}' | 21 return '{}' |
| 24 | 22 |
| 25 end = input_str.find('\n}\n', start) | 23 end = input_str.find('\n}\n', start) |
| 26 if end == -1: | 24 if end == -1: |
| 27 return '{}' | 25 return '{}' |
| 28 | 26 |
| 29 # FIXME: There may be multiple layer trees in the result. | 27 # FIXME: There may be multiple layer trees in the result. |
| 30 return input_str[start:end + 3] | 28 return input_str[start:end + 3] |
| 31 | 29 |
| 32 | 30 |
| 33 def generate_repaint_overlay_html(test_name, actual_text, expected_text): | 31 def generate_repaint_overlay_html(test_name, actual_text, expected_text): |
| 34 if not result_contains_repaint_rects(actual_text) and not result_contains_re
paint_rects(expected_text): | 32 if not result_contains_repaint_rects(actual_text) and not result_contains_re
paint_rects(expected_text): |
| 35 return '' | 33 return '' |
| 36 | 34 |
| 37 expected_layer_tree = extract_layer_tree(expected_text) | 35 expected_layer_tree = extract_layer_tree(expected_text) |
| 38 actual_layer_tree = extract_layer_tree(actual_text) | 36 actual_layer_tree = extract_layer_tree(actual_text) |
| 39 | 37 |
| 40 minimum_repaint = '[]' | |
| 41 minimum_repaint_match = re.search('Minimum repaint:\n(\[.*\n\])', actual_tex
t, re.DOTALL) | |
| 42 if minimum_repaint_match: | |
| 43 minimum_repaint = minimum_repaint_match.group(1) | |
| 44 | |
| 45 return """<!DOCTYPE HTML> | 38 return """<!DOCTYPE HTML> |
| 46 <html> | 39 <html> |
| 47 <head> | 40 <head> |
| 48 <title>%(title)s</title> | 41 <title>%(title)s</title> |
| 49 <style> | 42 <style> |
| 50 body { | 43 body { |
| 51 margin: 0; | 44 margin: 0; |
| 52 padding: 0; | 45 padding: 0; |
| 53 } | 46 } |
| 54 iframe { | 47 iframe { |
| 55 position: absolute; | 48 position: absolute; |
| 56 top: 80px; | 49 top: 80px; |
| 57 left: 0; | 50 left: 0; |
| 58 border: 0; | 51 border: 0; |
| 59 z-index: -1; | 52 z-index: -1; |
| 60 } | 53 } |
| 61 canvas { | 54 canvas { |
| 62 position: absolute; | 55 position: absolute; |
| 63 top: 80px; | 56 top: 80px; |
| 64 left: 0; | 57 left: 0; |
| 65 z-index: 1; | 58 z-index: 1; |
| 66 } | 59 } |
| 67 #actual, #minimum-repaint { | 60 #actual { |
| 68 display: none; | 61 display: none; |
| 69 } | 62 } |
| 70 </style> | 63 </style> |
| 71 </head> | 64 </head> |
| 72 <body> | 65 <body> |
| 73 <a href="http://crbug.com/381221">Known issues</a><br> | |
| 74 <label><input id="show-test" type="checkbox" checked onchange="toggle_test(this.
checked)">Show test</label> | 66 <label><input id="show-test" type="checkbox" checked onchange="toggle_test(this.
checked)">Show test</label> |
| 75 <label title="See fast/repaint/resources/text-based-repaint.js for how this work
s"> | |
| 76 <input id="show-minimum-repaint" type="checkbox" onchange="toggle_minimum_re
paint(this.checked)">Minimum repaint | |
| 77 </label> | |
| 78 <label><input id="use-solid-colors" type="checkbox" onchange="toggle_solid_color
(this.checked)">Use solid colors</label> | 67 <label><input id="use-solid-colors" type="checkbox" onchange="toggle_solid_color
(this.checked)">Use solid colors</label> |
| 79 <br> | 68 <br> |
| 80 <button title="See fast/repaint/resources/text-based-repaint.js for how this wor
ks" onclick="highlight_under_repaint()"> | 69 <button title="See fast/repaint/resources/text-based-repaint.js for how this wor
ks" onclick="highlight_under_repaint()"> |
| 81 Highlight under-repaint | 70 Highlight under-repaint |
| 82 </button> | 71 </button> |
| 83 <br> | 72 <br> |
| 84 <span id='type'>Expected Invalidations</span> | 73 <span id='type'>Expected Invalidations</span> |
| 85 <div id=overlay> | 74 <div id=overlay> |
| 86 <canvas id='minimum-repaint' width='2000' height='2000'></canvas> | |
| 87 <canvas id='expected' width='2000' height='2000'></canvas> | 75 <canvas id='expected' width='2000' height='2000'></canvas> |
| 88 <canvas id='actual' width='2000' height='2000'></canvas> | 76 <canvas id='actual' width='2000' height='2000'></canvas> |
| 89 </div> | 77 </div> |
| 90 <script> | 78 <script> |
| 91 var overlay_opacity = 0.25; | 79 var overlay_opacity = 0.25; |
| 92 | 80 |
| 93 function toggle_test(show_test) { | 81 function toggle_test(show_test) { |
| 94 iframe.style.display = show_test ? 'block' : 'none'; | 82 iframe.style.display = show_test ? 'block' : 'none'; |
| 95 } | 83 } |
| 96 | 84 |
| 97 function toggle_minimum_repaint(show_minimum_repaint) { | |
| 98 document.getElementById('minimum-repaint').style.display = show_minimum_repa
int ? 'block' : 'none'; | |
| 99 } | |
| 100 | |
| 101 function toggle_solid_color(use_solid_color) { | 85 function toggle_solid_color(use_solid_color) { |
| 102 overlay_opacity = use_solid_color ? 1 : 0.25; | 86 overlay_opacity = use_solid_color ? 1 : 0.25; |
| 103 draw_repaint_rects(); | 87 draw_repaint_rects(); |
| 104 draw_minimum_repaint(); | |
| 105 } | 88 } |
| 106 | 89 |
| 107 function highlight_under_repaint() { | 90 function highlight_under_repaint() { |
| 108 document.getElementById('show-test').checked = false; | 91 document.getElementById('show-test').checked = false; |
| 109 toggle_test(false); | 92 toggle_test(false); |
| 110 document.getElementById('show-minimum-repaint').checked = true; | |
| 111 toggle_minimum_repaint(true); | |
| 112 document.getElementById('use-solid-colors').checked = true; | 93 document.getElementById('use-solid-colors').checked = true; |
| 113 toggle_solid_color(true); | 94 toggle_solid_color(true); |
| 114 } | 95 } |
| 115 | 96 |
| 116 var expected = %(expected)s; | 97 var expected = %(expected)s; |
| 117 var actual = %(actual)s; | 98 var actual = %(actual)s; |
| 118 var minimum_repaint = %(minimum_repaint)s; | |
| 119 | 99 |
| 120 function rectsEqual(rect1, rect2) { | 100 function rectsEqual(rect1, rect2) { |
| 121 return rect1[0] == rect2[0] && rect1[1] == rect2[1] && rect1[2] == rect2[2]
&& rect1[3] == rect2[3]; | 101 return rect1[0] == rect2[0] && rect1[1] == rect2[1] && rect1[2] == rect2[2]
&& rect1[3] == rect2[3]; |
| 122 } | 102 } |
| 123 | 103 |
| 124 function draw_rects(context, rects) { | 104 function draw_rects(context, rects) { |
| 125 for (var i = 0; i < rects.length; ++i) { | 105 for (var i = 0; i < rects.length; ++i) { |
| 126 var rect = rects[i]; | 106 var rect = rects[i]; |
| 127 context.fillRect(rect[0], rect[1], rect[2], rect[3]); | 107 context.fillRect(rect[0], rect[1], rect[2], rect[3]); |
| 128 } | 108 } |
| (...skipping 20 matching lines...) Expand all Loading... |
| 149 } | 129 } |
| 150 if (result.children) { | 130 if (result.children) { |
| 151 for (var i = 0; i < result.children.length; ++i) | 131 for (var i = 0; i < result.children.length; ++i) |
| 152 draw_layer_rects(context, result.children[i]); | 132 draw_layer_rects(context, result.children[i]); |
| 153 } | 133 } |
| 154 context.restore(); | 134 context.restore(); |
| 155 } | 135 } |
| 156 | 136 |
| 157 var expected_canvas = document.getElementById('expected'); | 137 var expected_canvas = document.getElementById('expected'); |
| 158 var actual_canvas = document.getElementById('actual'); | 138 var actual_canvas = document.getElementById('actual'); |
| 159 var minimum_repaint_canvas = document.getElementById('minimum-repaint'); | |
| 160 | 139 |
| 161 function draw_repaint_rects() { | 140 function draw_repaint_rects() { |
| 162 var expected_ctx = expected_canvas.getContext("2d"); | 141 var expected_ctx = expected_canvas.getContext("2d"); |
| 163 expected_ctx.clearRect(0, 0, 2000, 2000); | 142 expected_ctx.clearRect(0, 0, 2000, 2000); |
| 164 expected_ctx.fillStyle = 'rgba(255, 0, 0, ' + overlay_opacity + ')'; | 143 expected_ctx.fillStyle = 'rgba(255, 0, 0, ' + overlay_opacity + ')'; |
| 165 draw_layer_rects(expected_ctx, expected); | 144 draw_layer_rects(expected_ctx, expected); |
| 166 | 145 |
| 167 var actual_ctx = actual_canvas.getContext("2d"); | 146 var actual_ctx = actual_canvas.getContext("2d"); |
| 168 actual_ctx.clearRect(0, 0, 2000, 2000); | 147 actual_ctx.clearRect(0, 0, 2000, 2000); |
| 169 actual_ctx.fillStyle = 'rgba(0, 255, 0, ' + overlay_opacity + ')'; | 148 actual_ctx.fillStyle = 'rgba(0, 255, 0, ' + overlay_opacity + ')'; |
| 170 draw_layer_rects(actual_ctx, actual); | 149 draw_layer_rects(actual_ctx, actual); |
| 171 } | 150 } |
| 172 | 151 |
| 173 function draw_minimum_repaint() { | |
| 174 var context = minimum_repaint_canvas.getContext("2d"); | |
| 175 context.fillStyle = 'rgba(0, 0, 0, 1)'; | |
| 176 draw_rects(context, minimum_repaint); | |
| 177 } | |
| 178 | |
| 179 draw_repaint_rects(); | 152 draw_repaint_rects(); |
| 180 draw_minimum_repaint(); | |
| 181 | 153 |
| 182 var path = decodeURIComponent(location.search).substr(1); | 154 var path = decodeURIComponent(location.search).substr(1); |
| 183 var iframe = document.createElement('iframe'); | 155 var iframe = document.createElement('iframe'); |
| 184 iframe.id = 'test-frame'; | 156 iframe.id = 'test-frame'; |
| 185 iframe.width = 800; | 157 iframe.width = 800; |
| 186 iframe.height = 600; | 158 iframe.height = 600; |
| 187 iframe.src = path; | 159 iframe.src = path; |
| 188 | 160 |
| 189 var overlay = document.getElementById('overlay'); | 161 var overlay = document.getElementById('overlay'); |
| 190 overlay.appendChild(iframe); | 162 overlay.appendChild(iframe); |
| (...skipping 13 matching lines...) Expand all Loading... |
| 204 expected_showing = !expected_showing | 176 expected_showing = !expected_showing |
| 205 } | 177 } |
| 206 setInterval(flip, 3000); | 178 setInterval(flip, 3000); |
| 207 </script> | 179 </script> |
| 208 </body> | 180 </body> |
| 209 </html> | 181 </html> |
| 210 """ % { | 182 """ % { |
| 211 'title': test_name, | 183 'title': test_name, |
| 212 'expected': expected_layer_tree, | 184 'expected': expected_layer_tree, |
| 213 'actual': actual_layer_tree, | 185 'actual': actual_layer_tree, |
| 214 'minimum_repaint': minimum_repaint, | |
| 215 } | 186 } |
| OLD | NEW |