| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 ::selection { | 3 #t1::selection { |
| 4 background-color: transparent; | 4 background-color: transparent; |
| 5 color: red | 5 color: red |
| 6 } | 6 } |
| 7 .green::selection { | 7 .green::selection { |
| 8 color: green | 8 color: green !important |
| 9 } | 9 } |
| 10 </style> | 10 </style> |
| 11 <span id="t1">This text should be green.</span> | 11 <span id="t1">This text </span><span id="t2">should be green.</span> |
| 12 <script> | 12 <script> |
| 13 if (window.testRunner) | 13 if (window.testRunner) |
| 14 testRunner.waitUntilDone(); | 14 testRunner.waitUntilDone(); |
| 15 | 15 |
| 16 function setSelection(textNode) { | 16 function setSelection(startNode, endNode) { |
| 17 window.getSelection().removeAllRanges(); | 17 window.getSelection().removeAllRanges(); |
| 18 var range = document.createRange(); | 18 var range = document.createRange(); |
| 19 range.setStart(textNode, 0); | 19 range.setStart(startNode, 0); |
| 20 range.setEnd(textNode, textNode.data.length); | 20 range.setEnd(endNode, endNode.data.length); |
| 21 window.getSelection().addRange(range); | 21 window.getSelection().addRange(range); |
| 22 } | 22 } |
| 23 | 23 |
| 24 setSelection(t1.firstChild); | 24 setSelection(t1.firstChild, t2.firstChild); |
| 25 requestAnimationFrame(() => | 25 requestAnimationFrame(() => |
| 26 requestAnimationFrame(() => { | 26 requestAnimationFrame(() => { |
| 27 t1.className = "green"; | 27 t1.className = "green"; |
| 28 t2.className = "green"; |
| 28 if (window.testRunner) | 29 if (window.testRunner) |
| 29 testRunner.notifyDone(); | 30 testRunner.notifyDone(); |
| 30 })); | 31 })); |
| 31 </script> | 32 </script> |
| OLD | NEW |