src/third_party/WebKit/Tools/Scripts/webkitpy/layout_tests/controllers/repaint_overlay.py

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