| <!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\n") |
| 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\n") |
| 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> |
