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": [
{
"bounds": [785, 621],
"bounds": [785, 616],
"contentsOpaque": true,
"drawsContent": true,
"children": [
......
......@@ -35,34 +35,18 @@
clip: rect(100px, 200px, 200px, 100px);
}
</style>
<script src="../../resources/run-after-display.js"></script>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
var alt1 = document.getElementById('alt1');
var alt2 = document.getElementById('alt2');
alt2.disabled = true;
function toggle() {
if (alt1.disabled) {
alt1.disabled = false;
alt2.disabled = true;
} else {
function repaintTest() {
alt2.disabled = false;
alt1.disabled = true;
}
}
function doTest() {
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);
}
runRepaintTest();
</script>
<div class="spacer">
......@@ -75,4 +59,3 @@
<div class="clipped-composited-child"></div>
</div>
</div>
<pre id="console"></pre>
......@@ -2,7 +2,7 @@
<html>
<head>
<script src="../../resources/run-after-display.js"></script>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<style>
.compositedBehind {
......@@ -34,32 +34,13 @@
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals) {
/* Note carefully, compositing for fixed position is _disabled_ here */
internals.settings.setAcceleratedCompositingForFixedPositionEnabled(false);
}
function test()
{
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
function repaintTest() {
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>
......@@ -67,7 +48,7 @@
<body onload="test()">
<body onload="runRepaintTest()">
<!--
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.
......@@ -80,8 +61,6 @@
<div class="containerOverlapsComposited">
<div class="fixed"></div>
</div>
<pre id="layers"></pre>
</body>
</html>
{
"bounds": [785, 4021],
"bounds": [785, 4016],
"children": [
{
"bounds": [785, 4021],
"bounds": [785, 4016],
"contentsOpaque": true,
"drawsContent": true,
"repaintRects": [
......
......@@ -2,7 +2,7 @@
<html>
<head>
<script src="../../resources/run-after-display.js"></script>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<style>
.fixedContainer {
......@@ -24,37 +24,19 @@
</style>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals) {
/* Note carefully, compositing for fixed position is _disabled_ here */
internals.settings.setAcceleratedCompositingForFixedPositionEnabled(false);
}
function test()
function repaintTest()
{
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>
</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
......@@ -75,8 +57,6 @@
<div class="fixedContainer">
<div id="foo"></div>
</div>
<pre id="layers"></pre>
</body>
</html>
......@@ -15,41 +15,27 @@
background-color: silver;
}
</style>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
if (window.testRunner)
testRunner.dumpAsText();
function doTest()
function repaintTest()
{
// Force compositing update before changing layer size.
window.internals.layerTreeAsText(document);
var resizingDiv = document.getElementById('resizing');
for (var i = 0; i < 2; ++i) {
var newDiv = document.createElement('div');
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>
</head>
<body>
<div id="resizing"></div>
<pre id="layers"></pre>
<div id="resizing">
<div></div>
<div></div>
</div>
</body>
</html>
......@@ -14,29 +14,16 @@
<div class="mv-tile" style="background-color: lightblue;"></div>
</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>
// 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
// is removed.
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
function repaintTest() {
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)
testRunner.notifyDone();
});
runRepaintTest();
</script>
\ No newline at end of file
......@@ -3,30 +3,15 @@
<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>
<script src="../../resources/run-after-display.js"></script>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
// 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
// rect should not be clipped to the visible viewport.
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
function repaintTest() {
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>
\ No newline at end of file
<!DOCTYPE html>
<script src="../../resources/run-after-display.js"></script>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<style>
#container {
position: absolute;
......@@ -26,29 +26,9 @@
<span class="child"></span>
<span class="child"></span>
</div>
<pre></pre>
<script>
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
function repaintTest() {
document.querySelectorAll('.child')[1].classList.add('embiggen');
}
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();
});
});
runRepaintTest();
</script>
<!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. -->
<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 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>
// 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.
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals)
internals.settings.setLayerSquashingEnabled(true);
runAfterDisplay(function() {
if (window.internals)
window.internals.startTrackingRepaints(document);
function repaintTest() {
document.querySelector("#to-be-removed").style.display = 'none';
}
var output = document.querySelector("#output");
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
......@@ -3,12 +3,8 @@
<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>
<script src="../../resources/run-after-display.js"></script>
<script src="../../fast/repaint/resources/text-based-repaint.js"></script>
<script>
if (testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
if (window.internals)
internals.settings.setLayerSquashingEnabled(true);
......@@ -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
// the code computed transformed ancestors incorrectly (it should *not* include the preserve-3d element).
runAfterDisplay(function() {
if (internals)
window.internals.startTrackingRepaints(document);
function repaintTest() {
var target = document.getElementById('target');
target.style.background = 'red';
}
if (testRunner)
testRunner.setCustomTextOutput(window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS));
if (internals)
window.internals.stopTrackingRepaints(document);
if (testRunner)
testRunner.notifyDone();
});
runRepaintTest();
</script>
<!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="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>
<pre></pre>
<script>
if (window.internals)
internals.settings.setLayerSquashingEnabled(true);
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
window.addEventListener('load', function() {
runAfterDisplay(function() {
window.internals.startTrackingRepaints(document);
function repaintTest() {
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();
});
});
runRepaintTest();
</script>
<!DOCTYPE html>
<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>
if (testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
runAfterDisplay(function() {
if (internals)
window.internals.startTrackingRepaints(document);
function repaintTest() {
document.getElementById('target').style.opacity = 0.5;
if (testRunner)
testRunner.setCustomTextOutput(window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS));
testRunner.notifyDone();
});
}
runRepaintTest();
</script>
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