selection-repaint-with-gaps.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/compositing/squashing/selection-repaint-with-gaps.html
