| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div[contenteditable] { |
| top: 0; |
| left: 0; |
| position: absolute; |
| font-size: 20px; |
| outline: none; |
| caret-color: transparent; |
| } |
| |
| #overlay { |
| position: fixed; |
| font-size: 20px; |
| visibility: hidden; |
| top: 0; |
| left: 0; |
| } |
| |
| .container { |
| position: relative; |
| } |
| |
| .box { |
| visibility: visible; |
| width: calc(100% + 4px); |
| height: calc(100% + 4px); |
| border: 4px solid black; |
| box-sizing: border-box; |
| left: -2px; |
| top: -2px; |
| position: absolute; |
| } |
| |
| .description { |
| margin-top: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <div contenteditable>Test </div> |
| <p class="description">This test verifies that highlights can be specified when setting marked text.</p> |
| <div id="overlay">Test <span class="container"><span class="box"></span>one</span><span class="container"><span class="box"></span>two</span><span class="container"><span class="box"></span>three</span></div> |
| |
| <script> |
| const editor = document.querySelector("div[contenteditable]"); |
| editor.focus(); |
| getSelection().setPosition(editor, 1); |
| |
| if (window.textInputController) { |
| textInputController.setMarkedText("onetwothree", 11, 11, true, [ |
| { from: 0, length: 3, color: "#FF000033" }, |
| { from: 3, length: 3, color: "#00FF0033" }, |
| { from: 6, length: 5, color: "#0000FF33" } |
| ]); |
| } |
| </script> |
| </body> |
| </html> |
