<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; }
body { margin: 0; }
span { position: absolute; top: 0; left: 0; }
</style>
<script>
if (window.testRunner)
    testRunner.dumpAsText();

function output(s)
{
    window.log.innerText += s + "\n";
}

function runTest()
{
    if (!window.internals) {
        output("This test cannot be run outside of WebKitTestRunner.");
        return;
    }

    function dumpIndicatorBoundsForElement(el)
    {
        var indicatorOptions = {"useBoundingRectAndPaintAllContentForComplexRanges": true};
        var range = internals.rangeFromLocationAndLength(el, 0, 1);
        var indicator = window.internals.textIndicatorForRange(range, indicatorOptions);
        var rect = indicator.textBoundingRectInRootViewCoordinates;
        output(`${el.id}: ${rect.x} ${rect.y} ${rect.width} ${rect.height}`);
    }

    dumpIndicatorBoundsForElement(document.getElementById("imageOnly"));
    dumpIndicatorBoundsForElement(document.getElementById("picture"));
    dumpIndicatorBoundsForElement(document.getElementById("clippedPicture"));
    dumpIndicatorBoundsForElement(document.getElementById("deeperClippedPicture"));
}
</script>
</head>
<body onload="runTest()">
<span id="imageOnly"><img src="../images/resources/green-256x256.jpg"></span>
<span id="picture"><picture><img src="../images/resources/green-256x256.jpg"></picture></span>
<span id="clippedPicture"><picture style="display: inline-block; height: 20px; overflow: hidden;"><img src="../images/resources/green-256x256.jpg"></picture></span>
<span id="deeperClippedPicture"><div style="display: inline-block; height: 20px; overflow: hidden;"><picture style="position: relative; height: 50px; overflow: hidden;"><img src="../images/resources/green-256x256.jpg"></picture></div></span>
<pre id="log"></pre>
</body>
</html>