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 @@ ...@@ -13,28 +13,13 @@
} }
</style> </style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
if (window.testRunner) { function repaintTest() {
testRunner.dumpAsText();
}
onload = function() {
if (!window.internals)
return;
window.internals.startTrackingRepaints(document);
// Remove the div's only compositing reason. This should trigger a repaint. // Remove the div's only compositing reason. This should trigger a repaint.
document.getElementById("square").style.webkitBackfaceVisibility = "visible"; 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> </script>
<div id="square"></div> <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. ...@@ -21,37 +21,23 @@ repainting their contents. See https://bugs.webkit.org/show_bug.cgi?id=96087.
margin-top: 25px; margin-top: 25px;
} }
</style> </style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script type="text/javascript"> <script type="text/javascript">
if (window.internals) if (window.internals)
window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true); window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
window.addEventListener('load', function() { function repaintTest() {
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;
// Scroll down. This should not cause any more repaints to the // Scroll down. This should not cause any more repaints to the
// scrolling contents. // scrolling contents.
window.internals.startTrackingRepaints(document); document.getElementById('scroller').scrollTop = 25;
scroller.scrollTop = 25; }
var layerTree = document.getElementById('layerTree'); runRepaintTest();
layerTree.innerText =
window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
});
</script> </script>
</head> </head>
<body> <body>
<div id="scroller"> <div id="scroller">
<div id="content"></div> <div id="content"></div>
</div> </div>
<pre id="layerTree">This text will be replaced with the layer tree.</pre>
</body> </body>
</html> </html>
...@@ -25,17 +25,12 @@ https://bugs.webkit.org/show_bug.cgi?id=100524. ...@@ -25,17 +25,12 @@ https://bugs.webkit.org/show_bug.cgi?id=100524.
height: 1000px; height: 1000px;
} }
</style> </style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script type="text/javascript"> <script type="text/javascript">
if (window.internals) if (window.internals)
window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true); window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
window.addEventListener('load', function() { 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 scroller = document.getElementById('scroller');
var indicator = document.getElementById('indicator'); var indicator = document.getElementById('indicator');
...@@ -45,16 +40,19 @@ https://bugs.webkit.org/show_bug.cgi?id=100524. ...@@ -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 // Scroll all the way to the bottom and change the color of the
// indicator (which is now outside the overflow clip). // indicator (which is now outside the overflow clip).
scroller.scrollTop = 1000; scroller.scrollTop = 1000;
window.internals.startTrackingRepaints(document);
runRepaintTest();
});
function repaintTest() {
var scroller = document.getElementById('scroller');
var indicator = document.getElementById('indicator');
indicator.style.background = 'green'; indicator.style.background = 'green';
// Scroll back up so that the updated (green) indicator is visible. // Scroll back up so that the updated (green) indicator is visible.
var layerTree = document.getElementById('layerTree');
scroller.scrollTop = 0; scroller.scrollTop = 0;
layerTree.innerText = }
window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
});
</script> </script>
</head> </head>
<body> <body>
...@@ -62,6 +60,5 @@ https://bugs.webkit.org/show_bug.cgi?id=100524. ...@@ -62,6 +60,5 @@ https://bugs.webkit.org/show_bug.cgi?id=100524.
<div id="indicator"></div> <div id="indicator"></div>
<div id="content"></div> <div id="content"></div>
</div> </div>
<pre id="layerTree">This text will be replaced with the layer tree.</pre>
</body> </body>
</html> </html>
...@@ -5,14 +5,9 @@ ...@@ -5,14 +5,9 @@
"bounds": [800, 600], "bounds": [800, 600],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true,
"repaintRects": [
[8, 413, 784, 28],
[8, 13, 784, 15],
[0, 421, 800, 28]
],
"children": [ "children": [
{ {
"position": [8, 41], "position": [8, 8],
"bounds": [400, 400], "bounds": [400, 400],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true,
......
...@@ -25,48 +25,20 @@ This test checks that repaint testing works with composited layers. ...@@ -25,48 +25,20 @@ This test checks that repaint testing works with composited layers.
} }
</style> </style>
<script type="text/javascript"> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
window.addEventListener('load', function() { <script>
if (!window.testRunner) { function repaintTest() {
alert('This test requires testRunner to run!');
return;
}
if (!window.internals) {
alert('This test requires window.interals to run!');
return;
}
testRunner.dumpAsText();
var parent = document.getElementById('parent'); var parent = document.getElementById('parent');
var child = document.getElementById('child'); 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'; child.style.background = 'blue';
parent.style.background = 'green'; parent.style.background = 'green';
}
var text = document.getElementById('text'); runRepaintTest();
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;
});
</script> </script>
</head> </head>
<body> <body>
<pre id="text"></pre>
<div id="parent"> <div id="parent">
<div id="child"></div> <div id="child"></div>
</div> </div>
......
...@@ -28,25 +28,17 @@ ...@@ -28,25 +28,17 @@
} }
</style> </style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
if (window.testRunner) function repaintTest() {
testRunner.dumpAsText(); document.getElementById('parent').style.top = "10px";
function test()
{
document.body.offsetHeight;
if (window.internals)
window.internals.startTrackingRepaints(document);
if (window.internals) {
document.getElementById('parent').style.top = "10px";
document.getElementById('layers').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
}
} }
runRepaintTest();
</script> </script>
</head> </head>
<body onload="test()"> <body>
<!-- <!--
https://code.google.com/p/chromium/issues/detail?id=256200 https://code.google.com/p/chromium/issues/detail?id=256200
The parent element is set up uniquely such that it is composited, but it The parent element is set up uniquely such that it is composited, but it
...@@ -56,8 +48,6 @@ ...@@ -56,8 +48,6 @@
<div id="parent"> <div id="parent">
<div id="child"></div> <div id="child"></div>
</div> </div>
<pre id="layers"></pre>
</body> </body>
</html> </html>
...@@ -7,39 +7,18 @@ ...@@ -7,39 +7,18 @@
</div> </div>
</div> </div>
<pre id="output" style="display:none"></pre> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
// Test that moving a RenderLayer that is squashed relative to its squashing container repaints correctly. // 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. // 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.settings.setLayerSquashingEnabled(true);
window.internals.startTrackingRepaints(document);
} function repaintTest()
var updateFunction = function()
{ {
document.getElementById('chip').style.left = "400px"; 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. runRepaintTest();
window.requestAnimationFrame(function() {
window.requestAnimationFrame(updateFunction);
});
</script> </script>
\ No newline at end of file
...@@ -5,40 +5,19 @@ ...@@ -5,40 +5,19 @@
</div> </div>
<div style="position:absolute; top: 400px; left: 400px; height: 200px; width: 200px; background-color: lightblue"> <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 id="imgElement" style="height: 200px; width: 200px; background-color: lightblue">
<div> </div>
</div> </div>
<pre id="output" style="display:none"> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<pre>
<script src="../../resources/run-after-display.js"></script>
<script> <script>
// Test that a repaint for the rect containing the changed background image is issued in the coordinate space of the // 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. // squashing layer, *not* local to the div with the background image on it.
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals) if (window.internals)
internals.settings.setLayerSquashingEnabled(true); internals.settings.setLayerSquashingEnabled(true);
var imgElement = document.querySelector("#imgElement"); function repaintTest() {
var output = document.querySelector("#output"); var imgElement = document.querySelector("#imgElement");
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
imgElement.style.backgroundImage = "url('data:image/gif;base64,R0lGODdhAgACAIABAAAAAP///ywAAAAAAgACAAACA0QCBQA7')"; imgElement.style.backgroundImage = "url('data:image/gif;base64,R0lGODdhAgACAIABAAAAAP///ywAAAAAAgACAAACA0QCBQA7')";
}
if (window.internals) { runRepaintTest();
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();
});
</script> </script>
\ No newline at end of file
...@@ -50,33 +50,21 @@ div:hover { ...@@ -50,33 +50,21 @@ div:hover {
} }
</style> </style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
if (window.internals) if (window.internals)
internals.settings.setLayerSquashingEnabled(true); 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('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> </script>
</head> </head>
<body onload="runTest()"> <body>
<div class="composited box behind"></div> <div class="composited box behind"></div>
<div class="box middle"></div> <div class="box middle"></div>
<img id="repaintdiv" class="repaintdiv"></img> <img id="repaintdiv" class="repaintdiv"></img>
<div class="box top"></div> <div class="box top"></div>
<pre id="testResults" style="display:none">
</div>
</body> </body>
...@@ -22,39 +22,13 @@ ...@@ -22,39 +22,13 @@
</style> </style>
<script src="resources/text-based-repaint.js"></script> <script src="resources/text-based-repaint.js"></script>
<script> <script>
if (window.testRunner) { function repaintTest() {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
function center(){
if (window.internals)
internals.startTrackingRepaints(document);
var mP = document.getElementById("moveMe"); var mP = document.getElementById("moveMe");
mP.style.top = "150px"; mP.style.top = "150px";
mP.style.left = "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> </script>
</head> </head>
...@@ -64,5 +38,4 @@ window.addEventListener("load", throttle); ...@@ -64,5 +38,4 @@ window.addEventListener("load", throttle);
<div id="fixedTransformed"></div> <div id="fixedTransformed"></div>
<div id="fixedOverlapping"></div> <div id="fixedOverlapping"></div>
<div id="moveMe"></div> <div id="moveMe"></div>
<pre id="console"></pre>
</body> </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], "bounds": [800, 600],
"children": [ "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], "bounds": [800, 600],
"children": [ "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], "bounds": [800, 600],
"children": [ "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], "bounds": [800, 600],
"children": [ "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