Convert some layout tests to text-based-repaint tests

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

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

git-svn-id: svn://svn.chromium.org/blink/trunk@178496 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 55c2cda1
{ {
"bounds": [785, 621], "bounds": [785, 616],
"children": [ "children": [
{ {
"bounds": [785, 621], "bounds": [785, 616],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true,
"children": [ "children": [
......
...@@ -35,34 +35,18 @@ ...@@ -35,34 +35,18 @@
clip: rect(100px, 200px, 200px, 100px); clip: rect(100px, 200px, 200px, 100px);
} }
</style> </style>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
var alt1 = document.getElementById('alt1'); var alt1 = document.getElementById('alt1');
var alt2 = document.getElementById('alt2'); var alt2 = document.getElementById('alt2');
alt2.disabled = true; alt2.disabled = true;
function toggle() { function repaintTest() {
if (alt1.disabled) { alt2.disabled = false;
alt1.disabled = false; alt1.disabled = true;
alt2.disabled = true;
} else {
alt2.disabled = false;
alt1.disabled = true;
}
} }
function doTest() { runRepaintTest();
internals.startTrackingRepaints(document);
toggle();
document.getElementById("console").textContent = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
testRunner.notifyDone();
}
if (window.testRunner && window.internals) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
runAfterDisplay(doTest);
}
</script> </script>
<div class="spacer"> <div class="spacer">
...@@ -75,4 +59,3 @@ ...@@ -75,4 +59,3 @@
<div class="clipped-composited-child"></div> <div class="clipped-composited-child"></div>
</div> </div>
</div> </div>
<pre id="console"></pre>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<style> <style>
.compositedBehind { .compositedBehind {
...@@ -34,32 +34,13 @@ ...@@ -34,32 +34,13 @@
</style> </style>
<script> <script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals) { if (window.internals) {
/* Note carefully, compositing for fixed position is _disabled_ here */ /* Note carefully, compositing for fixed position is _disabled_ here */
internals.settings.setAcceleratedCompositingForFixedPositionEnabled(false); internals.settings.setAcceleratedCompositingForFixedPositionEnabled(false);
} }
function test() function repaintTest() {
{ window.scrollTo(0, 100);
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
window.scrollTo(0, 100);
runAfterDisplay(function() {
if (window.internals)
document.getElementById('layers').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
if (window.testRunner)
testRunner.notifyDone();
});
});
} }
</script> </script>
...@@ -67,7 +48,7 @@ ...@@ -67,7 +48,7 @@
<body onload="test()"> <body onload="runRepaintTest()">
<!-- <!--
Among other duplicate bugs: https://code.google.com/p/chromium/issues/detail?id=128375 Among other duplicate bugs: https://code.google.com/p/chromium/issues/detail?id=128375
A non-composited fixed-position element can get grouped into a composited container. A non-composited fixed-position element can get grouped into a composited container.
...@@ -80,8 +61,6 @@ ...@@ -80,8 +61,6 @@
<div class="containerOverlapsComposited"> <div class="containerOverlapsComposited">
<div class="fixed"></div> <div class="fixed"></div>
</div> </div>
<pre id="layers"></pre>
</body> </body>
</html> </html>
{ {
"bounds": [785, 4021], "bounds": [785, 4016],
"children": [ "children": [
{ {
"bounds": [785, 4021], "bounds": [785, 4016],
"contentsOpaque": true, "contentsOpaque": true,
"drawsContent": true, "drawsContent": true,
"repaintRects": [ "repaintRects": [
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<style> <style>
.fixedContainer { .fixedContainer {
...@@ -24,37 +24,19 @@ ...@@ -24,37 +24,19 @@
</style> </style>
<script> <script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals) { if (window.internals) {
/* Note carefully, compositing for fixed position is _disabled_ here */ /* Note carefully, compositing for fixed position is _disabled_ here */
internals.settings.setAcceleratedCompositingForFixedPositionEnabled(false); internals.settings.setAcceleratedCompositingForFixedPositionEnabled(false);
} }
function test() function repaintTest()
{ {
runAfterDisplay(function() { window.scrollTo(0, 100);
if (window.internals)
window.internals.startTrackingRepaints(document);
window.scrollTo(0, 100);
runAfterDisplay(function() {
if (window.internals)
document.getElementById('layers').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
if (window.testRunner)
testRunner.notifyDone();
});
});
} }
</script> </script>
</head> </head>
<body style="height:4000px;" onload="test()"> <body style="height:4000px;" onload="runRepaintTest()">
<!-- <!--
Among other duplicate bugs: https://code.google.com/p/chromium/issues/detail?id=151734 Among other duplicate bugs: https://code.google.com/p/chromium/issues/detail?id=151734
...@@ -75,8 +57,6 @@ ...@@ -75,8 +57,6 @@
<div class="fixedContainer"> <div class="fixedContainer">
<div id="foo"></div> <div id="foo"></div>
</div> </div>
<pre id="layers"></pre>
</body> </body>
</html> </html>
...@@ -15,41 +15,27 @@ ...@@ -15,41 +15,27 @@
background-color: silver; background-color: silver;
} }
</style> </style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
if (window.testRunner) function repaintTest()
testRunner.dumpAsText();
function doTest()
{ {
// Force compositing update before changing layer size.
window.internals.layerTreeAsText(document);
var resizingDiv = document.getElementById('resizing'); var resizingDiv = document.getElementById('resizing');
for (var i = 0; i < 2; ++i) { for (var i = 0; i < 2; ++i) {
var newDiv = document.createElement('div'); var newDiv = document.createElement('div');
resizingDiv.appendChild(newDiv); resizingDiv.appendChild(newDiv);
} }
if (window.internals)
window.internals.startTrackingRepaints(document);
for (var i = 0; i < 2; ++i) {
var newDiv = document.createElement('div');
resizingDiv.appendChild(newDiv);
}
if (window.internals)
document.getElementById('layers').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
} }
window.addEventListener('load', doTest, false); window.onload = runRepaintTest;
</script> </script>
</head> </head>
<body> <body>
<div id="resizing"></div> <div id="resizing">
<pre id="layers"></pre> <div></div>
<div></div>
</div>
</body> </body>
</html> </html>
...@@ -14,29 +14,16 @@ ...@@ -14,29 +14,16 @@
<div class="mv-tile" style="background-color: lightblue;"></div> <div class="mv-tile" style="background-color: lightblue;"></div>
</div> </div>
<div class="mv-tile" style="width: 1000px"></div> <div class="mv-tile" style="width: 1000px"></div>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
// This test verifies that a paint invalidation is correctly issued for both the old and new location of // This test verifies that a paint invalidation is correctly issued for both the old and new location of
// the mv-tile element which is *not* removed from the DOM, but nevertheless moves to the left as the other one // the mv-tile element which is *not* removed from the DOM, but nevertheless moves to the left as the other one
// is removed. // is removed.
if (window.testRunner) { function repaintTest() {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
document.querySelector("#foo").remove(); document.querySelector("#foo").remove();
}
if (window.internals) {
testRunner.setCustomTextOutput(window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS));
window.internals.stopTrackingRepaints(document);
}
if (window.testRunner) runRepaintTest();
testRunner.notifyDone();
});
</script> </script>
\ No newline at end of file
...@@ -3,30 +3,15 @@ ...@@ -3,30 +3,15 @@
<div id="foo2" style="height: 1000px; width: 150px; background: lightblue; transform: translateZ(0) "></div> <div id="foo2" style="height: 1000px; width: 150px; background: lightblue; transform: translateZ(0) "></div>
<div id="foo" style="height: 1000px; width: 100px; position: absolute; top: 0px; left: 0px; background: lightgray"></div> <div id="foo" style="height: 1000px; width: 100px; position: absolute; top: 0px; left: 0px; background: lightgray"></div>
</div> </div>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
// This test verifies that a repaint request for a squashed layer that is inside of a scrolling container and much taller // This test verifies that a repaint request for a squashed layer that is inside of a scrolling container and much taller
// than the viewport does not receive an incorrect paint invalidation rect when it is invalidated. In particular, the invalidation // than the viewport does not receive an incorrect paint invalidation rect when it is invalidated. In particular, the invalidation
// rect should not be clipped to the visible viewport. // rect should not be clipped to the visible viewport.
if (window.testRunner) { function repaintTest() {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
document.querySelector("#foo").style.background = 'red'; document.querySelector("#foo").style.background = 'red';
}
if (window.testRunner)
testRunner.setCustomTextOutput(window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS));
if (window.internals)
window.internals.stopTrackingRepaints(document);
if (window.testRunner)
testRunner.notifyDone();
});
runRepaintTest();
</script> </script>
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<style> <style>
#container { #container {
position: absolute; position: absolute;
...@@ -26,29 +26,9 @@ ...@@ -26,29 +26,9 @@
<span class="child"></span> <span class="child"></span>
<span class="child"></span> <span class="child"></span>
</div> </div>
<pre></pre>
<script> <script>
if (window.testRunner) { function repaintTest() {
testRunner.dumpAsText(); document.querySelectorAll('.child')[1].classList.add('embiggen');
testRunner.waitUntilDone();
} }
runRepaintTest();
runAfterDisplay(function() {
document.querySelectorAll('.child')[0].classList.add('embiggen')
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
document.querySelectorAll('.child')[1].classList.add('embiggen')
if (window.internals) {
var layerTree = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
document.querySelector('pre').textContent = layerTree;
}
if (window.testRunner)
testRunner.notifyDone();
});
});
</script> </script>
<!doctype html> <!doctype html>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<!-- The second two divs form a combined squashing layer. display:none'ing the first of them will resize the squashing layer. --> <!-- The second two divs form a combined squashing layer. display:none'ing the first of them will resize the squashing layer. -->
<div style="width: 500px; height: 500px; -webkit-transform: translateZ(0)"></div> <div style="width: 500px; height: 500px; -webkit-transform: translateZ(0)"></div>
<div style="position: absolute; top: 55px; left: 55px; width: 500px; height: 500px; background-color: lightblue"></div> <div style="position: absolute; top: 55px; left: 55px; width: 500px; height: 500px; background-color: lightblue"></div>
<div id="to-be-removed" style="position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; background-color: lightgray"></div> <div id="to-be-removed" style="position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; background-color: lightgray"></div>
<pre id="output" style="display: none"></pre>
<script> <script>
// This test checks that resizing a squashing layer such that the offset of content squashed into it relative to the squashing // This test checks that resizing a squashing layer such that the offset of content squashed into it relative to the squashing
// container causes a repaint of its bounds within the updated squashing layer geometry. // container causes a repaint of its bounds within the updated squashing layer geometry.
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals) if (window.internals)
internals.settings.setLayerSquashingEnabled(true); internals.settings.setLayerSquashingEnabled(true);
runAfterDisplay(function() { function repaintTest() {
if (window.internals)
window.internals.startTrackingRepaints(document);
document.querySelector("#to-be-removed").style.display = 'none'; document.querySelector("#to-be-removed").style.display = 'none';
}
var output = document.querySelector("#output"); runRepaintTest();
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();
});
</script> </script>
\ No newline at end of file
...@@ -3,12 +3,8 @@ ...@@ -3,12 +3,8 @@
<div style="width: 100px; height: 100px; background:lightgray; transform:translateZ(0)"></div> <div style="width: 100px; height: 100px; background:lightgray; transform:translateZ(0)"></div>
<div id="target" style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background:lightblue"></div> <div id="target" style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background:lightblue"></div>
</div> </div>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
if (testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals) if (window.internals)
internals.settings.setLayerSquashingEnabled(true); internals.settings.setLayerSquashingEnabled(true);
...@@ -16,19 +12,10 @@ if (window.internals) ...@@ -16,19 +12,10 @@ if (window.internals)
// was added to fix, the coordinates of the squashing layer paint invalidation rects were not recorded correctly, because some of // was added to fix, the coordinates of the squashing layer paint invalidation rects were not recorded correctly, because some of
// the code computed transformed ancestors incorrectly (it should *not* include the preserve-3d element). // the code computed transformed ancestors incorrectly (it should *not* include the preserve-3d element).
runAfterDisplay(function() { function repaintTest() {
if (internals)
window.internals.startTrackingRepaints(document);
var target = document.getElementById('target'); var target = document.getElementById('target');
target.style.background = 'red'; target.style.background = 'red';
}
if (testRunner) runRepaintTest();
testRunner.setCustomTextOutput(window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS));
if (internals)
window.internals.stopTrackingRepaints(document);
if (testRunner)
testRunner.notifyDone();
});
</script> </script>
<!DOCTYPE html> <!DOCTYPE html>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<div style="width: 200px; height: 200px; transform: translateZ(0); background-color: salmon;"></div> <div style="width: 200px; height: 200px; transform: translateZ(0); background-color: salmon;"></div>
<div style="position: absolute; z-index: 0; top: 8px; width: 100px; height: 100px"> <div style="position: absolute; z-index: 0; top: 8px; width: 100px; height: 100px">
<div id="target" style="width: 100px; height: 100px; transform: translateZ(0); background-color: blue"> <div id="target" style="width: 100px; height: 100px; transform: translateZ(0); background-color: blue">
</div> </div>
<pre></pre>
<script> <script>
if (window.internals) if (window.internals)
internals.settings.setLayerSquashingEnabled(true); internals.settings.setLayerSquashingEnabled(true);
if (window.testRunner) { function repaintTest() {
testRunner.dumpAsText(); document.querySelector('#target').remove();
testRunner.waitUntilDone();
} }
window.addEventListener('load', function() { runRepaintTest();
runAfterDisplay(function() {
window.internals.startTrackingRepaints(document);
document.querySelector('#target').remove();
document.querySelector('pre').textContent =
window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
window.internals.stopTrackingRepaints(document);
if (window.testRunner)
testRunner.notifyDone();
});
});
</script> </script>
<!DOCTYPE html> <!DOCTYPE html>
<div id="target" style="width: 100px; height: 100px; background: lightblue"></div> <div id="target" style="width: 100px; height: 100px; background: lightblue"></div>
<script src="../../resources/run-after-display.js"></script> <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script> <script>
if (testRunner) { function repaintTest() {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
runAfterDisplay(function() {
if (internals)
window.internals.startTrackingRepaints(document);
document.getElementById('target').style.opacity = 0.5; document.getElementById('target').style.opacity = 0.5;
}
if (testRunner) runRepaintTest();
testRunner.setCustomTextOutput(window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS)); </script>
testRunner.notifyDone();
});
</script>
\ No newline at end of file
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