OLD | NEW |
(Empty) | |
| 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 |
| 3 # found in the LICENSE file. |
| 4 |
| 5 import re |
| 6 |
| 7 |
| 8 def result_contains_repaint_rects(text): |
| 9 return isinstance(text, str) and re.search('^\s*\(repaint rects$', text, re.
MULTILINE) != None |
| 10 |
| 11 |
| 12 def generate_repaint_overlay_html(test_name, actual_text, expected_text): |
| 13 if not result_contains_repaint_rects(expected_text): |
| 14 return '' |
| 15 |
| 16 def make_js_rect(input_str): |
| 17 rect_pattern = '\(rect\s+(\d+\.\d+)\s+(\d+\.\d+)\s+(\d+\.\d+)\s+(\d+\.\d
+)\)' |
| 18 rects = [] |
| 19 for m in re.finditer(rect_pattern, input_str): |
| 20 rects.append('[' + ','.join(m.groups()) + ']') |
| 21 return '[' + ','.join(rects) + ']' |
| 22 |
| 23 # FIXME: Need to consider layer offset and transforms. |
| 24 expected_rects = make_js_rect(expected_text) |
| 25 actual_rects = make_js_rect(actual_text) |
| 26 |
| 27 return """<!DOCTYPE HTML> |
| 28 <html> |
| 29 <head> |
| 30 <title>%(title)s</title> |
| 31 <style> |
| 32 body { |
| 33 margin: 0; |
| 34 padding: 0; |
| 35 } |
| 36 iframe { |
| 37 position: absolute; |
| 38 top: 60px; |
| 39 left: 0; |
| 40 border: 0; |
| 41 z-index: -1; |
| 42 } |
| 43 canvas { |
| 44 position: absolute; |
| 45 top: 60px; |
| 46 left: 0; |
| 47 z-index: 1; |
| 48 } |
| 49 #actual { display: none; } |
| 50 #dump { |
| 51 position: absolute; |
| 52 top: 60px; |
| 53 left: 0; |
| 54 z-index: 2; |
| 55 display: none; |
| 56 } |
| 57 </style> |
| 58 </head> |
| 59 <body> |
| 60 Note: This version doesn't support transformation and layer offset yet.<br> |
| 61 <label><input 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> |
| 63 <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> |
| 65 <br> |
| 66 <span id='type'>Expected Invalidations</span> |
| 67 <div id=overlay> |
| 68 <canvas id='expected' width='2000' height='2000'></canvas> |
| 69 <canvas id='actual' width='2000' height='2000'></canvas> |
| 70 <pre id='dump'></pre> |
| 71 </div> |
| 72 <script> |
| 73 var show_diff_only = true; |
| 74 var hide_duplicate_rects = true; |
| 75 |
| 76 function toggle_test(show_test) { |
| 77 iframe.style.display = show_test ? 'block' : 'none'; |
| 78 } |
| 79 |
| 80 function toggle_diff_only(new_show_diff_only) { |
| 81 show_diff_only = new_show_diff_only; |
| 82 draw_repaint_rects(); |
| 83 } |
| 84 |
| 85 function toggle_hide_duplicate_rects(new_hide_duplicate_rects) { |
| 86 hide_duplicate_rects = new_hide_duplicate_rects; |
| 87 draw_repaint_rects(); |
| 88 } |
| 89 |
| 90 function toggle_print_rects(dump_rects) { |
| 91 document.getElementById('dump').style.display = dump_rects ? 'block' : 'none
'; |
| 92 } |
| 93 |
| 94 var original_expected_rects = %(expected_rects)s; |
| 95 var original_actual_rects = %(actual_rects)s; |
| 96 |
| 97 function rectsEqual(rect1, rect2) { |
| 98 return rect1[0] == rect2[0] && rect1[1] == rect2[1] && rect1[2] == rect2[2]
&& rect1[3] == rect2[3]; |
| 99 } |
| 100 |
| 101 function findDifference(rects1, rects2) { |
| 102 for (var i = rects1.length - 1; i >= 0; i--) { |
| 103 for (var k = rects2.length - 1; k >= 0; k--) { |
| 104 if (rectsEqual(rects1[i], rects2[k])) { |
| 105 rects1.splice(i, 1); |
| 106 rects2.splice(k, 1); |
| 107 break; |
| 108 } |
| 109 } |
| 110 } |
| 111 } |
| 112 |
| 113 function removeDuplicateRects(rects) { |
| 114 for (var i = rects.length - 1; i > 0; i--) { |
| 115 for (var k = i - 1; k >= 0; k--) { |
| 116 if (rectsEqual(rects[i], rects[k])) { |
| 117 rects.splice(i, 1); |
| 118 break; |
| 119 } |
| 120 } |
| 121 } |
| 122 } |
| 123 |
| 124 function draw_rects(context, rects) { |
| 125 context.clearRect(0, 0, 2000, 2000); |
| 126 for (var i = 0; i < rects.length; i++) { |
| 127 var rect = rects[i]; |
| 128 context.fillRect(rect[0], rect[1], rect[2], rect[3]); |
| 129 context.strokeRect(rect[0], rect[1], rect[2], rect[3]); |
| 130 } |
| 131 } |
| 132 |
| 133 var expected_canvas = document.getElementById('expected'); |
| 134 var actual_canvas = document.getElementById('actual'); |
| 135 |
| 136 function dump_rects(rects) { |
| 137 var result = ''; |
| 138 for (var i = 0; i < rects.length; i++) |
| 139 result += '(' + rects[i].toString() + ')\\n'; |
| 140 return result; |
| 141 } |
| 142 |
| 143 function draw_repaint_rects() { |
| 144 var expected_rects = original_expected_rects.slice(0); |
| 145 var actual_rects = original_actual_rects.slice(0); |
| 146 if (hide_duplicate_rects) { |
| 147 removeDuplicateRects(expected_rects); |
| 148 removeDuplicateRects(actual_rects); |
| 149 } |
| 150 |
| 151 if (show_diff_only) |
| 152 findDifference(expected_rects, actual_rects); |
| 153 |
| 154 document.getElementById('dump').textContent = |
| 155 'Expected:\\n' + dump_rects(expected_rects) |
| 156 + '\\nActual:\\n' + dump_rects(actual_rects); |
| 157 |
| 158 var expected_ctx = expected_canvas.getContext("2d"); |
| 159 expected_ctx.lineWidth = 0.5; |
| 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); |
| 163 |
| 164 var actual_ctx = actual_canvas.getContext("2d"); |
| 165 actual_ctx.lineWidth = 1; |
| 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); |
| 169 } |
| 170 draw_repaint_rects(); |
| 171 |
| 172 var path = decodeURIComponent(location.search).substr(1); |
| 173 var iframe = document.createElement('iframe'); |
| 174 iframe.id = 'test-frame'; |
| 175 iframe.width = 800; |
| 176 iframe.height = 600; |
| 177 iframe.src = path; |
| 178 |
| 179 var overlay = document.getElementById('overlay'); |
| 180 overlay.appendChild(iframe); |
| 181 |
| 182 var type = document.getElementById('type'); |
| 183 var expected_showing = true; |
| 184 function flip() { |
| 185 if (expected_showing) { |
| 186 type.textContent = 'Actual Invalidations'; |
| 187 expected_canvas.style.display = 'none'; |
| 188 actual_canvas.style.display = 'block'; |
| 189 } else { |
| 190 type.textContent = 'Expected Invalidations'; |
| 191 actual_canvas.style.display = 'none'; |
| 192 expected_canvas.style.display = 'block'; |
| 193 } |
| 194 expected_showing = !expected_showing |
| 195 } |
| 196 setInterval(flip, 3000); |
| 197 </script> |
| 198 </body> |
| 199 </html> |
| 200 """ % { |
| 201 'title': test_name, |
| 202 'expected_rects': expected_rects, |
| 203 'actual_rects': actual_rects, |
| 204 } |
OLD | NEW |