<!-- Generated by third_party/blink/tools/run_blinkpy_tests.py
test case: TestRepaintOverlay.test_generate_repaint_overlay_html. -->
<!DOCTYPE HTML>
<html>
<head>
<title>paint/invalidation/repaint-overlay/layers.html</title>
<style>
body {
margin: 0;
padding: 0;
}
#overlay {
width: 2000px;
height: 2000px;
border: 1px solid black;
}
#test_frame {
position: absolute;
width: 800px;
height: 600px;
border: 0;
display: none;
}
canvas {
position: absolute;
}
#actual_canvas {
display: none;
}
</style>
</head>
<body>
<label><input id="show-test" type="checkbox" onchange="toggle_test(this.checked)">Show test</label>
<label><input id="use-solid-colors" type="checkbox" onchange="toggle_solid_color(this.checked)">Use solid colors</label>
<br>
<span id="overlay_type">Expected Invalidations</span>
<div id="overlay">
<iframe id="test_frame"></iframe>
<canvas id="expected_canvas" width="2000" height="2000"></canvas>
<canvas id="actual_canvas" width="2000" height="2000"></canvas>
</div>
<script>
var overlay_opacity = 0.25;
function toggle_test(show_test) {
test_frame.style.display = show_test ? 'block' : 'none';
if (!test_frame.src)
test_frame.src = decodeURIComponent(location.search).substr(1);
}
function toggle_solid_color(use_solid_color) {
overlay_opacity = use_solid_color ? 1 : 0.25;
draw_repaint_rects();
}
var expected = {
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 2016],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"transform": 1
},
{
"name": "LayoutBlockFlow (positioned) DIV id='container'",
"bounds": [100, 100],
"backgroundColor": "#0000FF80",
"invalidations": [
[20, 20, 10, 10]
],
"transform": 2
},
{
"name": "LayoutBlockFlow (relative positioned) DIV id='scrollable'",
"bounds": [302, 302],
"transform": 3
},
{
"name": "LayoutBlockFlow (relative positioned) DIV id='scrollable'",
"position": [1, 1],
"bounds": [300, 300],
"drawsContent": false,
"transform": 3
},
{
"name": "LayoutBlockFlow (relative positioned) DIV id='scrollable'",
"position": [1, 1],
"bounds": [795, 1491],
"drawsContent": false,
"transform": 4
},
{
"name": "LayoutBlockFlow (relative positioned) DIV id='transform'",
"bounds": [200, 200],
"contentsOpaque": true,
"backgroundColor": "#FFFF00",
"invalidations": [
[20, 20, 10, 10]
],
"transform": 6
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -20, 0, 1]
]
},
{
"id": 2,
"parent": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[40, 50, 0, 1]
]
},
{
"id": 3,
"parent": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[64, 53, 0, 1]
]
},
{
"id": 4,
"parent": 3,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -30, 0, 1]
]
},
{
"id": 5,
"parent": 4,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[89, 78, 0, 1]
]
},
{
"id": 6,
"parent": 5,
"transform": [
[3.53553390593274, 3.53553390593274, 0, 0],
[-3.53553390593274, 3.53553390593274, 0, 0],
[0, 0, 1, 0],
[0, 0, 0, 1]
],
"origin": [0, 0]
}
]
}
;
var actual = {
"layers": [
{
"name": "Scrolling background of LayoutView #document",
"bounds": [800, 2016],
"contentsOpaque": true,
"backgroundColor": "#FFFFFF",
"transform": 1
},
{
"name": "LayoutBlockFlow (positioned) DIV id='container'",
"bounds": [100, 100],
"backgroundColor": "#0000FF80",
"invalidations": [
[20, 20, 10, 10]
],
"transform": 2
},
{
"name": "LayoutBlockFlow (relative positioned) DIV id='scrollable'",
"bounds": [302, 302],
"transform": 3
},
{
"name": "LayoutBlockFlow (relative positioned) DIV id='scrollable'",
"position": [1, 1],
"bounds": [300, 300],
"drawsContent": false,
"transform": 3
},
{
"name": "LayoutBlockFlow (relative positioned) DIV id='scrollable'",
"position": [1, 1],
"bounds": [795, 1491],
"drawsContent": false,
"transform": 4
},
{
"name": "LayoutBlockFlow (relative positioned) DIV id='transform'",
"bounds": [200, 200],
"contentsOpaque": true,
"backgroundColor": "#FFFF00",
"invalidations": [
[20, 20, 10, 10]
],
"transform": 6
}
],
"transforms": [
{
"id": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -20, 0, 1]
]
},
{
"id": 2,
"parent": 1,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[40, 50, 0, 1]
]
},
{
"id": 3,
"parent": 2,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[64, 53, 0, 1]
]
},
{
"id": 4,
"parent": 3,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, -30, 0, 1]
]
},
{
"id": 5,
"parent": 4,
"transform": [
[1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[89, 78, 0, 1]
]
},
{
"id": 6,
"parent": 5,
"transform": [
[3.53553390593274, 3.53553390593274, 0, 0],
[-3.53553390593274, 3.53553390593274, 0, 0],
[0, 0, 1, 0],
[0, 0, 0, 1]
],
"origin": [0, 0]
}
]
}
;
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]);
}
}
function draw_layer_rects(context, transforms, layer) {
context.save();
var transform_path = [];
for (var id = layer.transform; id; id = transforms[id].parent)
transform_path.push(transforms[id]);
for (var i = transform_path.length - 1; i >= 0; i--) {
var m = transform_path[i].transform;
if (!m)
continue;
var origin = transform_path[i].origin;
if (origin)
context.translate(origin[0], origin[1]);
context.transform(m[0][0], m[0][1], m[1][0], m[1][1], m[3][0], m[3][1]);
if (origin)
context.translate(-origin[0], -origin[1]);
}
if (layer.position)
context.translate(layer.position[0], layer.position[1]);
if (layer.invalidations)
draw_rects(context, layer.invalidations);
context.restore();
}
function draw_result_rects(context, result) {
var transforms = {};
if (result.transforms) {
for (var i = 0; i < result.transforms.length; ++i) {
var transform = result.transforms[i];
transforms[transform.id] = transform;
}
}
if (result.layers) {
for (var i = 0; i < result.layers.length; ++i)
draw_layer_rects(context, transforms, result.layers[i]);
}
}
function draw_repaint_rects() {
var expected_ctx = expected_canvas.getContext("2d");
expected_ctx.clearRect(0, 0, 2000, 2000);
expected_ctx.fillStyle = 'rgba(255, 0, 0, ' + overlay_opacity + ')';
draw_result_rects(expected_ctx, expected);
var actual_ctx = actual_canvas.getContext("2d");
actual_ctx.clearRect(0, 0, 2000, 2000);
actual_ctx.fillStyle = 'rgba(0, 255, 0, ' + overlay_opacity + ')';
draw_result_rects(actual_ctx, actual);
}
draw_repaint_rects();
var expected_showing = true;
function flip() {
if (expected_showing) {
overlay_type.textContent = 'Actual Invalidations';
expected_canvas.style.display = 'none';
actual_canvas.style.display = 'block';
} else {
overlay_type.textContent = 'Expected Invalidations';
actual_canvas.style.display = 'none';
expected_canvas.style.display = 'block';
}
expected_showing = !expected_showing
}
setInterval(flip, 1500);
</script>
</body>
</html>
Codebase Browser
chromium