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

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

Issue 303223008: Overlay expected and actual repaint rects for LayoutTests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Add several small features 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
OLDNEW
(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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698