Convert more tests into text-based-repaint tests

- less code
- to be able to use features of text-based-repaint.js

Review URL: https://codereview.chromium.org/408843004

git-svn-id: svn://svn.chromium.org/blink/trunk@178600 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent a782c5e7
......@@ -13,28 +13,13 @@
}
</style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
}
onload = function() {
if (!window.internals)
return;
window.internals.startTrackingRepaints(document);
function repaintTest() {
// Remove the div's only compositing reason. This should trigger a repaint.
document.getElementById("square").style.webkitBackfaceVisibility = "visible";
document.getElementById("layertree").textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
document.getElementById("testResults").style.display = "block";
}
runRepaintTest();
</script>
<div id="square"></div>
<div id="testResults">
<pre id="layertree"></pre>
</div>
......@@ -21,37 +21,23 @@ repainting their contents. See https://bugs.webkit.org/show_bug.cgi?id=96087.
margin-top: 25px;
}
</style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script type="text/javascript">
if (window.internals)
window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
window.addEventListener('load', function() {
if (!window.testRunner || !window.internals) {
alert('This test requires testRunner to run!');
return;
}
testRunner.dumpAsText();
// First paint the entire view including the scrolling element.
var scroller = document.getElementById('scroller');
scroller.offsetTop;
function repaintTest() {
// Scroll down. This should not cause any more repaints to the
// scrolling contents.
window.internals.startTrackingRepaints(document);
scroller.scrollTop = 25;
document.getElementById('scroller').scrollTop = 25;
}
var layerTree = document.getElementById('layerTree');
layerTree.innerText =
window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
});
runRepaintTest();
</script>
</head>
<body>
<div id="scroller">
<div id="content"></div>
</div>
<pre id="layerTree">This text will be replaced with the layer tree.</pre>
</body>
</html>
......@@ -25,17 +25,12 @@ https://bugs.webkit.org/show_bug.cgi?id=100524.
height: 1000px;
}
</style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script type="text/javascript">
if (window.internals)
window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
window.addEventListener('load', function() {
if (!window.testRunner || !window.internals) {
alert('This test requires testRunner to run!');
return;
}
testRunner.dumpAsText();
var scroller = document.getElementById('scroller');
var indicator = document.getElementById('indicator');
......@@ -45,16 +40,19 @@ https://bugs.webkit.org/show_bug.cgi?id=100524.
// Scroll all the way to the bottom and change the color of the
// indicator (which is now outside the overflow clip).
scroller.scrollTop = 1000;
window.internals.startTrackingRepaints(document);
runRepaintTest();
});
function repaintTest() {
var scroller = document.getElementById('scroller');
var indicator = document.getElementById('indicator');
indicator.style.background = 'green';
// Scroll back up so that the updated (green) indicator is visible.
var layerTree = document.getElementById('layerTree');
scroller.scrollTop = 0;
layerTree.innerText =
window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
});
}
</script>
</head>
<body>
......@@ -62,6 +60,5 @@ https://bugs.webkit.org/show_bug.cgi?id=100524.
<div id="indicator"></div>
<div id="content"></div>
</div>
<pre id="layerTree">This text will be replaced with the layer tree.</pre>
</body>
</html>
......@@ -5,14 +5,9 @@
"bounds": [800, 600],
"contentsOpaque": true,
"drawsContent": true,
"repaintRects": [
[8, 413, 784, 28],
[8, 13, 784, 15],
[0, 421, 800, 28]
],
"children": [
{
"position": [8, 41],
"position": [8, 8],
"bounds": [400, 400],
"contentsOpaque": true,
"drawsContent": true,
......
......@@ -25,48 +25,20 @@ This test checks that repaint testing works with composited layers.
}
</style>
<script type="text/javascript">
window.addEventListener('load', function() {
if (!window.testRunner) {
alert('This test requires testRunner to run!');
return;
}
if (!window.internals) {
alert('This test requires window.interals to run!');
return;
}
testRunner.dumpAsText();
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
var parent = document.getElementById('parent');
var child = document.getElementById('child');
// Ensure that we've recalculated style before starting repaint
// tracking (we don't want our lists of invalidated rects to be
// polluted).
document.body.offsetTop;
window.internals.startTrackingRepaints(document);
child.style.background = 'blue';
parent.style.background = 'green';
}
var text = document.getElementById('text');
text.innerHTML = 'This text will be replaced with the layer tree';
// Force a style recalc.
document.body.offsetTop;
var layerTreeText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
text.innerHTML = layerTreeText;
});
runRepaintTest();
</script>
</head>
<body>
<pre id="text"></pre>
<div id="parent">
<div id="child"></div>
</div>
......
......@@ -28,25 +28,17 @@
}
</style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
if (window.testRunner)
testRunner.dumpAsText();
function test()
{
document.body.offsetHeight;
if (window.internals)
window.internals.startTrackingRepaints(document);
if (window.internals) {
function repaintTest() {
document.getElementById('parent').style.top = "10px";
document.getElementById('layers').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
}
}
runRepaintTest();
</script>
</head>
<body onload="test()">
<body>
<!--
https://code.google.com/p/chromium/issues/detail?id=256200
The parent element is set up uniquely such that it is composited, but it
......@@ -56,8 +48,6 @@
<div id="parent">
<div id="child"></div>
</div>
<pre id="layers"></pre>
</body>
</html>
......@@ -7,39 +7,18 @@
</div>
</div>
<pre id="output" style="display:none"></pre>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
// Test that moving a RenderLayer that is squashed relative to its squashing container repaints correctly.
// In particular, the repaint rect needs to be recorded in the correct position relative to the squashing GraphicsLayer.
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals) {
if (window.internals)
window.internals.settings.setLayerSquashingEnabled(true);
window.internals.startTrackingRepaints(document);
}
var updateFunction = function()
function repaintTest()
{
document.getElementById('chip').style.left = "400px";
if (window.internals) {
var data = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
var output = document.getElementById('output');
output.textContent = data;
output.style.display = "block";
}
if (window.testRunner)
testRunner.notifyDone();
}
// Wait two frames before updating the chip's style, so that the document is painted and squashed first.
window.requestAnimationFrame(function() {
window.requestAnimationFrame(updateFunction);
});
runRepaintTest();
</script>
\ No newline at end of file
......@@ -5,40 +5,19 @@
</div>
<div style="position:absolute; top: 400px; left: 400px; height: 200px; width: 200px; background-color: lightblue">
<div id="imgElement" style="height: 200px; width: 200px; background-color: lightblue">
<div>
</div>
</div>
<pre id="output" style="display:none">
<pre>
<script src="../../resources/run-after-display.js"></script>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
// Test that a repaint for the rect containing the changed background image is issued in the coordinate space of the
// squashing layer, *not* local to the div with the background image on it.
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals)
internals.settings.setLayerSquashingEnabled(true);
var imgElement = document.querySelector("#imgElement");
var output = document.querySelector("#output");
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
function repaintTest() {
var imgElement = document.querySelector("#imgElement");
imgElement.style.backgroundImage = "url('data:image/gif;base64,R0lGODdhAgACAIABAAAAAP///ywAAAAAAgACAAACA0QCBQA7')";
if (window.internals) {
output.textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
}
output.style.display = 'block';
if (window.testRunner)
testRunner.notifyDone();
});
}
runRepaintTest();
</script>
\ No newline at end of file
......@@ -50,33 +50,21 @@ div:hover {
}
</style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
if (window.internals)
internals.settings.setLayerSquashingEnabled(true);
if (window.testRunner)
testRunner.dumpAsText();
function runTest()
function repaintTest()
{
if (!window.internals)
return;
document.body.offsetTop;
window.internals.startTrackingRepaints(document);
document.getElementById('repaintdiv').style.background = 'salmon';
document.getElementById('testResults').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
// Display the test results only after test is done so that it does not affect repaint rect results.
document.getElementById('testResults').style.display = "block";
}
runRepaintTest();
</script>
</head>
<body onload="runTest()">
<body>
<div class="composited box behind"></div>
<div class="box middle"></div>
<img id="repaintdiv" class="repaintdiv"></img>
<div class="box top"></div>
<pre id="testResults" style="display:none">
</div>
</body>
......@@ -22,39 +22,13 @@
</style>
<script src="resources/text-based-repaint.js"></script>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function center(){
if (window.internals)
internals.startTrackingRepaints(document);
function repaintTest() {
var mP = document.getElementById("moveMe");
mP.style.top = "150px";
mP.style.left = "150px";
if (!window.testRunner || !window.internals)
return;
var layerTree = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
document.getElementById("console").textContent = layerTree;
window.internals.stopTrackingRepaints(document);
testRunner.notifyDone();
}
var frameWaitCount = 2;
function throttle(){
if (frameWaitCount-- == 0) {
center();
return;
}
requestAnimationFrame(center);
}
window.addEventListener("load", throttle);
runRepaintTest();
</script>
</head>
......@@ -64,5 +38,4 @@ window.addEventListener("load", throttle);
<div id="fixedTransformed"></div>
<div id="fixedOverlapping"></div>
<div id="moveMe"></div>
<pre id="console"></pre>
</body>
(GraphicsLayer
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(contentsOpaque 1)
(drawsContent 1)
(repaint rects
(rect 8.00 13.00 784.00 16.00)
(rect 8.00 413.00 784.00 29.00)
(rect 0.00 421.00 800.00 29.00)
)
(children 1
(GraphicsLayer
(position 8.00 42.00)
(bounds 400.00 400.00)
(contentsOpaque 1)
(drawsContent 1)
(backgroundColor #008000)
(repaint rects
(rect 0.00 0.00 400.00 400.00)
(rect 0.00 0.00 400.00 400.00)
)
(children 1
(GraphicsLayer
(position 50.00 50.00)
(bounds 75.00 75.00)
(contentsOpaque 1)
(drawsContent 1)
(backgroundColor #0000FF)
(repaint rects
(rect 0.00 0.00 75.00 75.00)
(rect 0.00 0.00 75.00 75.00)
)
)
)
)
)
)
)
)
(GraphicsLayer
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(contentsOpaque 1)
(drawsContent 1)
(repaint rects
(rect 8.00 13.00 784.00 16.00)
(rect 8.00 413.00 784.00 29.00)
(rect 0.00 421.00 800.00 29.00)
)
(children 1
(GraphicsLayer
(position 8.00 42.00)
(bounds 400.00 400.00)
(contentsOpaque 1)
(drawsContent 1)
(backgroundColor #008000)
(repaint rects
(rect 0.00 0.00 400.00 400.00)
(rect 0.00 0.00 400.00 400.00)
)
(children 1
(GraphicsLayer
(position 50.00 50.00)
(bounds 75.00 75.00)
(contentsOpaque 1)
(drawsContent 1)
(backgroundColor #0000FF)
(repaint rects
(rect 0.00 0.00 75.00 75.00)
(rect 0.00 0.00 75.00 75.00)
)
)
)
)
)
)
)
)
{
"bounds": [800, 600],
"children": [
{
"bounds": [800, 600],
"contentsOpaque": true,
"drawsContent": true,
"repaintRects": [
[8, 413, 784, 29],
[8, 13, 784, 16],
[0, 421, 800, 29]
],
"children": [
{
"position": [8, 42],
"bounds": [400, 400],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#008000",
"repaintRects": [
[0, 0, 400, 400],
[0, 0, 400, 400]
],
"children": [
{
"position": [50, 50],
"bounds": [75, 75],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#0000FF",
"repaintRects": [
[0, 0, 75, 75],
[0, 0, 75, 75]
]
}
]
}
]
}
]
}
This test checks that we correctly invalidate a shifted fixed positioned element overlapping another fixed positioned element.
For this test, there should be only one green square below.
{
"bounds": [800, 600],
"children": [
......
{
"bounds": [800, 600],
"children": [
{
"bounds": [800, 600],
"contentsOpaque": true,
"drawsContent": true,
"repaintRects": [
[8, 413, 784, 29],
[8, 13, 784, 16],
[0, 421, 800, 29]
],
"children": [
{
"position": [8, 42],
"bounds": [400, 400],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#008000",
"repaintRects": [
[0, 0, 400, 400],
[0, 0, 400, 400]
],
"children": [
{
"position": [50, 50],
"bounds": [75, 75],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#0000FF",
"repaintRects": [
[0, 0, 75, 75],
[0, 0, 75, 75]
]
}
]
}
]
}
]
}
This test checks that we correctly invalidate a shifted fixed positioned element overlapping another fixed positioned element.
For this test, there should be only one green square below.
{
"bounds": [800, 600],
"children": [
......
{
"bounds": [800, 600],
"children": [
{
"bounds": [800, 600],
"contentsOpaque": true,
"drawsContent": true,
"repaintRects": [
[8, 413, 784, 29],
[8, 13, 784, 16],
[0, 421, 800, 29]
],
"children": [
{
"position": [8, 42],
"bounds": [400, 400],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#008000",
"repaintRects": [
[0, 0, 400, 400],
[0, 0, 400, 400]
],
"children": [
{
"position": [50, 50],
"bounds": [75, 75],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#0000FF",
"repaintRects": [
[0, 0, 75, 75],
[0, 0, 75, 75]
]
}
]
}
]
}
]
}
This test checks that we correctly invalidate a shifted fixed positioned element overlapping another fixed positioned element.
For this test, there should be only one green square below.
{
"bounds": [800, 600],
"children": [
......
{
"bounds": [800, 600],
"children": [
{
"bounds": [800, 600],
"contentsOpaque": true,
"drawsContent": true,
"repaintRects": [
[8, 413, 784, 29],
[8, 13, 784, 16],
[0, 421, 800, 29]
],
"children": [
{
"position": [8, 42],
"bounds": [400, 400],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#008000",
"repaintRects": [
[0, 0, 400, 400],
[0, 0, 400, 400]
],
"children": [
{
"position": [50, 50],
"bounds": [75, 75],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#0000FF",
"repaintRects": [
[0, 0, 75, 75],
[0, 0, 75, 75]
]
}
]
}
]
}
]
}
This test checks that we correctly invalidate a shifted fixed positioned element overlapping another fixed positioned element.
For this test, there should be only one green square below.
{
"bounds": [800, 600],
"children": [
......
{
"bounds": [800, 600],
"children": [
{
"bounds": [800, 600],
"contentsOpaque": true,
"drawsContent": true,
"repaintRects": [
[8, 413, 784, 28],
[8, 13, 784, 15],
[0, 421, 800, 28]
],
"children": [
{
"position": [8, 41],
"bounds": [400, 400],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#008000",
"repaintRects": [
[0, 0, 400, 400],
[0, 0, 400, 400]
],
"children": [
{
"position": [50, 50],
"bounds": [75, 75],
"contentsOpaque": true,
"drawsContent": true,
"backgroundColor": "#0000FF",
"repaintRects": [
[0, 0, 75, 75],
[0, 0, 75, 75]
]
}
]
}
]
}
]
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment