<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<script src="../../resources/js-test.js"></script>
<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .fullscreen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    div.fullscreen {
        background-color: lightgray;
        text-align: center;
        z-index: -100;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    a {
        text-decoration: none;
    }
</style>
</head>
<body>
    <a class="fullscreen" href="https://www.apple.com">&nbsp;</a>
    <div class="fullscreen" id="description"></div>
</body>
<script>
    description("To test manually, force click on macOS or begin a drag on iPadOS here. The preview highlight rect or targeted drag preview (respectively) should encompass the entire window, instead of just a tiny piece of empty text in the upper left hand corner.");

    function runTest() {
        if (!window.internals)
            return;

        const range = document.createRange();
        range.selectNodeContents(document.querySelector("a.fullscreen"));

        const indicator = internals.textIndicatorForRange(range, { useBoundingRectAndPaintAllContentForComplexRanges : true });
        boundingRect = indicator.textBoundingRectInRootViewCoordinates;

        shouldBeGreaterThanOrEqual("0", "boundingRect.x");
        shouldBeGreaterThanOrEqual("0", "boundingRect.y");
        shouldBeGreaterThanOrEqual("boundingRect.width", "innerWidth");
        shouldBeGreaterThanOrEqual("boundingRect.height", "innerHeight");
    }

    runTest();
</script>
</html>