<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; font-family: ahem; }
body { margin: 0; }
div { position: absolute; top: 0; left: 0; }

.whiteText { color: white; }
.grayText { color: gray; }
.lightGrayText { color: lightgray; }
.darkGrayText { color: dimgray; }
.blackText { color: black; }
.dfGrayText { color: #ddd; }

.whiteBackground { background-color: white; }
.grayBackground { background-color: gray; }
.blackBackground { background-color: black; }
.dfGrayBackground { background-color: #4a525a; }
</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,
            "computeEstimatedBackgroundColor": true,
            "respectTextColor": true,
        };
        var range = internals.rangeFromLocationAndLength(el, 0, 9);
        var indicator = window.internals.textIndicatorForRange(range, indicatorOptions);
        var rects = indicator.textRectsInBoundingRectCoordinates;

        output(`${el.id}: ` + (rects.length == 1 ? "NOT legible" : "legible"));
        for (var rect of rects)
            output(`    ${rect.x} ${rect.y} ${rect.width} ${rect.height}`);
    }

    dumpIndicatorBoundsForElement(document.getElementById("whiteTextWhiteBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("whiteTextGrayBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("whiteTextBlackBackground"));

    dumpIndicatorBoundsForElement(document.getElementById("grayTextWhiteBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("grayTextGrayBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("grayTextBlackBackground"));

    dumpIndicatorBoundsForElement(document.getElementById("lightGrayTextWhiteBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("lightGrayTextGrayBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("lightGrayTextBlackBackground"));

    dumpIndicatorBoundsForElement(document.getElementById("darkGrayTextWhiteBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("darkGrayTextGrayBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("darkGrayTextBlackBackground"));

    dumpIndicatorBoundsForElement(document.getElementById("blackTextWhiteBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("blackTextGrayBackground"));
    dumpIndicatorBoundsForElement(document.getElementById("blackTextBlackBackground"));

    dumpIndicatorBoundsForElement(document.getElementById("dfTextDfBackground"));

    // Remove the test cases so they don't show up in the dump.
    document.getElementById("testCases").innerText = "";
}
</script>
</head>
<body onload="runTest()">
<div id="testCases">
    <div class="whiteText whiteBackground" id="whiteTextWhiteBackground">test<br><br><br>test</div>
    <div class="whiteText grayBackground" id="whiteTextGrayBackground">test<br><br><br>test</div>
    <div class="whiteText blackBackground" id="whiteTextBlackBackground">test<br><br><br>test</div>

    <div class="grayText whiteBackground" id="grayTextWhiteBackground">test<br><br><br>test</div>
    <div class="grayText grayBackground" id="grayTextGrayBackground">test<br><br><br>test</div>
    <div class="grayText blackBackground" id="grayTextBlackBackground">test<br><br><br>test</div>

    <div class="lightGrayText whiteBackground" id="lightGrayTextWhiteBackground">test<br><br><br>test</div>
    <div class="lightGrayText grayBackground" id="lightGrayTextGrayBackground">test<br><br><br>test</div>
    <div class="lightGrayText blackBackground" id="lightGrayTextBlackBackground">test<br><br><br>test</div>

    <div class="darkGrayText whiteBackground" id="darkGrayTextWhiteBackground">test<br><br><br>test</div>
    <div class="darkGrayText grayBackground" id="darkGrayTextGrayBackground">test<br><br><br>test</div>
    <div class="darkGrayText blackBackground" id="darkGrayTextBlackBackground">test<br><br><br>test</div>

    <div class="blackText whiteBackground" id="blackTextWhiteBackground">test<br><br><br>test</div>
    <div class="blackText grayBackground" id="blackTextGrayBackground">test<br><br><br>test</div>
    <div class="blackText blackBackground" id="blackTextBlackBackground">test<br><br><br>test</div>

    <div class="dfGrayText dfGrayBackground" id="dfTextDfBackground">test<br><br><br>test</div>
</div>
<pre id="log"></pre>
</body>
</html>