| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Selection painting test</title> | 4 <title>Selection painting test</title> |
| 5 <style> | 5 <style> |
| 6 div { | 6 div { |
| 7 margin: 0; | 7 margin: 0; |
| 8 padding: 0; | 8 padding: 0; |
| 9 display: inline-block; | 9 display: inline-block; |
| 10 } | 10 } |
| 11 </style> | 11 </style> |
| 12 </head> | 12 </head> |
| 13 <body> | 13 <body> |
| 14 <div> | 14 <div> |
| 15 <span>There</span> <span>should</span> <span>be</span> | 15 <span>There</span> <span>should</span> <span>be</span> |
| 16 <span>no</span> <span>white</span> <span>gaps</span> | 16 <span>no</span> <span>white</span> <span>gaps</span> |
| 17 <span>between</span> <span>words</span>. | 17 <span>between</span> <span>words</span>. |
| 18 </div> | 18 </div> |
| 19 <script> | 19 <script> |
| 20 window.getSelection().selectAllChildren(document.body.firstElementCh
ild); | 20 const div = document.querySelector('div'); |
| 21 // Select from before |<span>There</span>| to after |<span>words</sp
an>.|. |
| 22 window.getSelection().setBaseAndExtent(div.firstChild, div.firstChil
d.length, div.lastChild, 1); |
| 21 </script> | 23 </script> |
| 22 </body> | 24 </body> |
| 23 </html> | 25 </html> |
| OLD | NEW |