blob: 3ea28dd1aac2b2587a0c707939c9573454860ee1 [file] [log] [blame]
<!DOCTYPE html>
<style>
.overlap {
height: 500px;
width: 300px;
will-change: transform;
}
.item {
height: 50px;
width: 100px;
background: lightgray;
margin: 15px;
position: absolute;
left: 0px;
}
.inline-block {
display: inline-block;
height: 10px;
width: 40px;
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<!-- This test checks whether repaint rects for selection on squashed layers is correct. -->
<div class="overlap"></div>
<div style="top: 20px" class="item"><div class="inline-block">lorem ipsum</div></div>
<div style="top: 100px" class="item" id="item1"><div class="inline-block">lorem ipsum</div></div>
<div style="top: 180px" class="item" id="item2"><div class="inline-block">lorem ipsum</div></div>
<script>
if (window.testRunner) {
testRunner.dumpAsTextWithPixelResults();
testRunner.waitUntilDone();
}
runAfterLayoutAndPaint(function()
{
if (window.internals)
internals.startTrackingRepaints(document);
var selection = getSelection();
// Case 1: selection that does not have any gaps.
selection.setBaseAndExtent(document.querySelector("#item1"), 0, document.querySelector("#item1"), 1);
let layerTreeAsText = [];
if (window.internals) {
layerTreeAsText.push(internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS));
internals.stopTrackingRepaints(document);
}
selection.empty();
if (window.internals)
internals.startTrackingRepaints(document);
// Case 2: selection with a gap between item1 and item2.
selection.setBaseAndExtent(document.querySelector("#item1"), 0, document.querySelector("#item2"), 1);
if (window.internals) {
layerTreeAsText.push(internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_INVALIDATIONS));
internals.stopTrackingRepaints(document);
}
if (window.testRunner) {
testRunner.setCustomTextOutput(layerTreeAsText.join(''));
testRunner.notifyDone();
}
});
</script>