Index: Tools/Scripts/webkitpy/layout_tests/controllers/repaint_overlay.py |
diff --git a/Tools/Scripts/webkitpy/layout_tests/controllers/repaint_overlay.py b/Tools/Scripts/webkitpy/layout_tests/controllers/repaint_overlay.py |
index 06521126bf3a8dd0c5a37bfabd8e340f6a2beb59..a15fedb74c5b349e5bb7ebc05d15216df0a6961c 100644 |
--- a/Tools/Scripts/webkitpy/layout_tests/controllers/repaint_overlay.py |
+++ b/Tools/Scripts/webkitpy/layout_tests/controllers/repaint_overlay.py |
@@ -24,6 +24,11 @@ def generate_repaint_overlay_html(test_name, actual_text, expected_text): |
expected_rects = make_js_rect(expected_text) |
actual_rects = make_js_rect(actual_text) |
+ minimum_repaint = '[]' |
+ minimum_repaint_match = re.search('Minimum repaint:\n(\[.*\n\])', actual_text, re.DOTALL) |
+ if minimum_repaint_match: |
+ minimum_repaint = minimum_repaint_match.group(1) |
+ |
return """<!DOCTYPE HTML> |
<html> |
<head> |
@@ -35,21 +40,23 @@ def generate_repaint_overlay_html(test_name, actual_text, expected_text): |
} |
iframe { |
position: absolute; |
- top: 60px; |
+ top: 80px; |
left: 0; |
border: 0; |
z-index: -1; |
} |
canvas { |
position: absolute; |
- top: 60px; |
+ top: 80px; |
left: 0; |
z-index: 1; |
} |
- #actual { display: none; } |
+ #actual, #minimum-repaint { |
+ display: none; |
+ } |
#dump { |
position: absolute; |
- top: 60px; |
+ top: 80px; |
left: 0; |
z-index: 2; |
display: none; |
@@ -57,14 +64,23 @@ def generate_repaint_overlay_html(test_name, actual_text, expected_text): |
</style> |
</head> |
<body> |
-Note: This version doesn't support transformation and layer offset yet.<br> |
-<label><input type="checkbox" checked onchange="toggle_test(this.checked)">Show test</label> |
-<label><input type="checkbox" checked onchange="toggle_diff_only(this.checked)">Show differences only</label> |
+<a href="http://crbug.com/381221">Known issues (layer transformations, layer offsets, etc.)</a><br> |
+<label><input id="show-test" type="checkbox" checked onchange="toggle_test(this.checked)">Show test</label> |
+<label><input id="show-diff-only" type="checkbox" checked onchange="toggle_diff_only(this.checked)">Diffs only</label> |
<label><input type="checkbox" checked onchange="toggle_hide_duplicate_rects(this.checked)">Hide duplicate rects</label> |
-<label><input type="checkbox" onchange="toggle_print_rects(this.checked)">Dump rects</label> |
+<label><input type="checkbox" onchange="toggle_dump_rects(this.checked)">Dump rects</label> |
+<label title="See fast/repaint/resources/text-based-repaint.js for how this works"> |
+ <input id="show-minimum-repaint" type="checkbox" onchange="toggle_minimum_repaint(this.checked)">Minimum repaint |
+</label> |
+<label><input id="use-solid-colors" type="checkbox" onchange="toggle_solid_color(this.checked)">Use solid colors</label> |
+<br> |
+<button title="See fast/repaint/resources/text-based-repaint.js for how this works" onclick="highlight_under_repaint()"> |
+ Highlight under-repaint |
+</button> |
<br> |
<span id='type'>Expected Invalidations</span> |
<div id=overlay> |
+ <canvas id='minimum-repaint' width='2000' height='2000'></canvas> |
<canvas id='expected' width='2000' height='2000'></canvas> |
<canvas id='actual' width='2000' height='2000'></canvas> |
<pre id='dump'></pre> |
@@ -72,6 +88,7 @@ Note: This version doesn't support transformation and layer offset yet.<br> |
<script> |
var show_diff_only = true; |
var hide_duplicate_rects = true; |
+var overlay_opacity = 0.25; |
function toggle_test(show_test) { |
iframe.style.display = show_test ? 'block' : 'none'; |
@@ -87,12 +104,34 @@ function toggle_hide_duplicate_rects(new_hide_duplicate_rects) { |
draw_repaint_rects(); |
} |
-function toggle_print_rects(dump_rects) { |
+function toggle_dump_rects(dump_rects) { |
document.getElementById('dump').style.display = dump_rects ? 'block' : 'none'; |
} |
+function toggle_minimum_repaint(show_minimum_repaint) { |
+ document.getElementById('minimum-repaint').style.display = show_minimum_repaint ? 'block' : 'none'; |
+} |
+ |
+function toggle_solid_color(use_solid_color) { |
+ overlay_opacity = use_solid_color ? 1 : 0.25; |
+ draw_repaint_rects(); |
+ draw_minimum_repaint(); |
+} |
+ |
+function highlight_under_repaint() { |
+ document.getElementById('show-test').checked = false; |
+ toggle_test(false); |
+ document.getElementById('show-diff-only').checked = false; |
+ show_diff_only = false; |
+ document.getElementById('show-minimum-repaint').checked = true; |
+ toggle_minimum_repaint(true); |
+ document.getElementById('use-solid-colors').checked = true; |
+ toggle_solid_color(true); |
+} |
+ |
var original_expected_rects = %(expected_rects)s; |
var original_actual_rects = %(actual_rects)s; |
+var minimum_repaint = %(minimum_repaint)s; |
function rectsEqual(rect1, rect2) { |
return rect1[0] == rect2[0] && rect1[1] == rect2[1] && rect1[2] == rect2[2] && rect1[3] == rect2[3]; |
@@ -126,12 +165,12 @@ function draw_rects(context, rects) { |
for (var i = 0; i < rects.length; i++) { |
var rect = rects[i]; |
context.fillRect(rect[0], rect[1], rect[2], rect[3]); |
- context.strokeRect(rect[0], rect[1], rect[2], rect[3]); |
} |
} |
var expected_canvas = document.getElementById('expected'); |
var actual_canvas = document.getElementById('actual'); |
+var minimum_repaint_canvas = document.getElementById('minimum-repaint'); |
function dump_rects(rects) { |
var result = ''; |
@@ -143,6 +182,7 @@ function dump_rects(rects) { |
function draw_repaint_rects() { |
var expected_rects = original_expected_rects.slice(0); |
var actual_rects = original_actual_rects.slice(0); |
+ |
if (hide_duplicate_rects) { |
removeDuplicateRects(expected_rects); |
removeDuplicateRects(actual_rects); |
@@ -153,21 +193,26 @@ function draw_repaint_rects() { |
document.getElementById('dump').textContent = |
'Expected:\\n' + dump_rects(expected_rects) |
- + '\\nActual:\\n' + dump_rects(actual_rects); |
+ + '\\nActual:\\n' + dump_rects(actual_rects) |
+ + '\\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
|
var expected_ctx = expected_canvas.getContext("2d"); |
- expected_ctx.lineWidth = 0.5; |
- expected_ctx.strokeStyle = 'rgba(255, 0, 0, 1)'; |
- expected_ctx.fillStyle = 'rgba(255, 0, 0, 0.25)'; |
+ expected_ctx.fillStyle = 'rgba(255, 0, 0, ' + overlay_opacity + ')'; |
draw_rects(expected_ctx, expected_rects); |
var actual_ctx = actual_canvas.getContext("2d"); |
- actual_ctx.lineWidth = 1; |
- actual_ctx.strokeStyle = 'rgba(0, 255, 0, 1)'; |
- actual_ctx.fillStyle = 'rgba(0, 255, 0, 0.25)'; |
+ actual_ctx.fillStyle = 'rgba(0, 255, 0, ' + overlay_opacity + ')'; |
draw_rects(actual_ctx, actual_rects); |
} |
+ |
+function draw_minimum_repaint() { |
+ var context = minimum_repaint_canvas.getContext("2d"); |
+ context.fillStyle = 'rgba(0, 0, 0, ' + overlay_opacity + ')'; |
+ draw_rects(context, minimum_repaint); |
+} |
+ |
draw_repaint_rects(); |
+draw_minimum_repaint(); |
var path = decodeURIComponent(location.search).substr(1); |
var iframe = document.createElement('iframe'); |
@@ -201,4 +246,5 @@ setInterval(flip, 3000); |
'title': test_name, |
'expected_rects': expected_rects, |
'actual_rects': actual_rects, |
+ 'minimum_repaint': minimum_repaint, |
} |