<!DOCTYPE html>

<html>
<head>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }
    
        async function runTest()
        {
            var output = '';

            function select(element) {
                const range = document.createRange();
                
                range.setStartBefore(element);
                range.setEndAfter(element);
                
                const selection = window.getSelection();
                
                selection.removeAllRanges();
                selection.addRange(range);
            }

            select(document.querySelector('thead tr'));
            if (document.getSelection().toString() == "A\tB\tC\tD\n")
                output += 'PASS: Correctly Selects row in thead';
            else
                output += 'FAIL: Incorrect Selection: ' + document.getSelection().toString();
            output += '<br>';

            const lastHeadCell = [ ...document.querySelectorAll('thead th') ].pop();
            select(lastHeadCell);
            if (document.getSelection().toString() == "D")
                output += 'PASS: Correctly Selects last cell in thead';
            else
                output += 'FAIL: Incorrect Selection: ' + document.getSelection().toString();
            output += '<br>';

            select(document.querySelector('tbody tr'));
            if (document.getSelection().toString() == "1A\t1B\t1C\t1D\n")
                output += 'PASS: Correctly Selects row in tbody';
            else
                output += 'FAIL: Incorrect Selection: ' + document.getSelection().toString();
            output += '<br>';

            const lastBodyCell = [ ...document.querySelectorAll('tbody td') ].pop();
            select(lastBodyCell);
            if (document.getSelection().toString() == "5D")
                output += 'PASS: Correctly Selects last cell in tbody';
            else
                output += 'FAIL: Incorrect Selection: ' + document.getSelection().toString();
            output += '<br>';
            
            document.getElementById('target').innerHTML = output;
            testRunner.notifyDone();
        }

        window.addEventListener('load', runTest, false);
    </script>
        <style>
        #target {
            height: 50px;
            width: 300px;
            background-color: silver;
            font-family: monospace;
            font-size: 18px;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div contenteditable>
    <table border="1">
        <thead>
            <tr>
                <th scope="col">A</th>
                <th scope="col">B</th>
                <th scope="col">C</th>
                <th scope="col">D</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1A</th>
                <td>1B</td>
                <td>1C</td>
                <td>1D</td>
            </tr>
            <tr>
                <th scope="row">2A</th>
                <td>2B</td>
                <td>2C</td>
                <td>2D</td>
            </tr>
            <tr>
                <th scope="row">3A</th>
                <td>3B</td>
                <td>3C</td>
                <td>3D</td>
            </tr>
            <tr>
                <th scope="row">4A</th>
                <td>4B</td>
                <td>4C</td>
                <td>4D</td>
            </tr>
            <tr>
                <th scope="row">5A</th>
                <td>5B</td>
                <td>5C</td>
                <td>5D</td>
            </tr>
        </tbody>
    </table>
</div>
    <div id="target">
    </div>
</body>
</html>
