Tools/Scripts/webkitpy/layout_tests/controllers/repaint_overlay.py - Issue 315443002: Compute minimum repaint and show them in overlay

Unified Diff: Tools/Scripts/webkitpy/layout_tests/controllers/repaint_overlay.py

Issue 315443002: Compute minimum repaint and show them in overlay (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Fix the top link in overlay 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 side-by-side diff with in-line comments

Download patch

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..c42e3b3040383d2b1e597bb4884c1dfda6375cb5 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-minimum-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-minimum-repaint.js for how this works" onclick="highlight_under_repaint()">

+ Highlight under-repaint

+</button>

<br>

<span id='type'>Expected Invalidations</span>

+ <canvas id='minimum-repaint' width='2000' height='2000'></canvas>

@@ -72,6 +88,7 @@ Note: This version doesn't support transformation and layer offset yet.<br>

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);

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() {

enne (OOO) 2014/06/05 22:13:42 Why does this need to be a separate canvas?

Xianzhu 2014/06/05 22:51:06 This is to avoid redraw all the rects when flippin

+ 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,

}

« LayoutTests/fast/repaint/resources/text-based-repaint-minimum-repaint.js ('K') | « Source/core/testing/Internals.idl ('k') | no next file » | no next file with comments »