| <!DOCTYPE html> |
| <style> |
| #root { |
| background-color: #ddd; |
| font-size: 24pt; |
| position: relative; |
| width: 200px; |
| } |
| .flexbox { |
| display: flex; |
| } |
| .flexbox * { |
| width: 100px; |
| } |
| </style> |
| |
| This test verifies that a selection spanning nested flexbox boundaries |
| is drawn correctly. |
| |
| <div id="root"> |
| <div class="flexbox"> |
| <span id="start">aaa</span> |
| <div class="flexbox"><span>bbb</span></div> |
| </div> |
| <div class="flexbox"> |
| <span>ccc</span> |
| <div class="flexbox"><span id="end">ddd</span></div> |
| </div> |
| </div> |
| <script> |
| |
| var start = document.querySelector('#start'), |
| end = document.querySelector('#end'); |
| getSelection().setBaseAndExtent(start.firstChild, 1, end.firstChild, 2); |
| focus(); |
| |
| </script> |