| <!-- |
| @BLINK-ALLOW:next* |
| @BLINK-ALLOW:prev* |
| @BLINK-ALLOW:className=* |
| @BLINK-ALLOW:isLineBreakingObject=true |
| @BLINK-ALLOW:notUserSelectableStyle* |
| @WIN-ALLOW:auto-gen* |
| --> |
| <style> |
| /* Make the spans easier to see, for debugging */ |
| /* Each span also has a class name */ |
| span { background-color: rgba(0, 255, 0, .3); } |
| </style> |
| <div role="textbox" contenteditable="true"> |
| <p>Beginning</p> |
| <ol> |
| <li>A plain list item</li> |
| <li> |
| A list item<br>with a br (line break) inside it |
| </li> |
| <li><p role="presentation">A list item with an inner p role=presentation</p></li> |
| <li> |
| <p role="presentation">A list item with both a br and <br>an inner p role=presentation</p> |
| </li> |
| <li> |
| <span class=a1>A list item with <span class=a2>inner <span class=a3>spans</span> </span>on each line</span><br><span clas=b1>and separated by a br</span> |
| </li> |
| <li> |
| <p role="presentation"><span class=a1>A list item with a role presentation, and two inner spans, </span> <span class=a2>each separated by a space</span> |
| </p> |
| </li> |
| <li> |
| <p role="presentation"><span class=a1>A list item with a role presentation, and two inner spans, </span><br><span class=b1>each separated by a br</span> |
| </p> |
| </li> |
| <li> |
| <p role="presentation"><span class=a1>Hello</span><span class=a2><span class=a3 contenteditable="false"></span></span> <span class=b1>world this</span><span class=b2><span class=b3 contenteditable="false"> </span></span><span class=c1>is like docs markup without the weird presentational br</span> |
| </p> |
| </li> |
| <li> |
| <p role="presentation"><span class=a1>Hello</span><span class=a2><span class=a3 contenteditable="false"> <br role="presentation"></span></span><span class=b1>world this</span><span class=b2><span class=b3 contenteditable="false"> <br role="presentation"></span></span><span class=c1>is just like docs, and your kitchen sink</span> |
| </p> |
| </li> |
| </ol> |
| <p>The end</p> |
| </div> |