| <!doctype html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../assert_selection.js"></script> |
| <script> |
| // This tests moving the caret backward through content of mixed editability. |
| selection_test( |
| [ |
| '<div contenteditable>', |
| 'editable', |
| '<table border="1" contenteditable="false"><tbody><tr><td>', |
| '<div style="display:inline-block;">', |
| '<span>static</span>', |
| '<span contenteditable="plaintext-only">|editable</span>', |
| '</div>', |
| '</td></tr></tbody></table>', |
| 'editable', |
| '</div>', |
| ], |
| selection => selection.modify('move', 'forward', 'character'), |
| [ |
| '<div contenteditable>', |
| 'editable', |
| '<table border="1" contenteditable="false"><tbody><tr><td>', |
| '<div style="display:inline-block;">', |
| '<span>static</span>', |
| '<span contenteditable="plaintext-only">e|ditable</span>', |
| '</div>', |
| '</td></tr></tbody></table>', |
| 'editable', |
| '</div>', |
| ], |
| 'Move forward character'); |
| |
| // The caret should end up back at the start of the editable text inside the |
| // table. |
| selection_test( |
| [ |
| '<div contenteditable>', |
| 'editable', |
| '<table border="1" contenteditable="false"><tbody><tr><td>', |
| '<div style="display:inline-block;">', |
| '<span>static</span>', |
| '<span contenteditable="plaintext-only">e|ditable</span>', |
| '</div>', |
| '</td></tr></tbody></table>', |
| 'editable', |
| '</div>', |
| ], |
| selection => selection.modify('move', 'backward', 'word'), |
| [ |
| '<div contenteditable>', |
| 'editable', |
| '<table border="1" contenteditable="false"><tbody><tr><td>', |
| '<div style="display:inline-block;">', |
| '<span>static</span>', |
| '<span contenteditable="plaintext-only">|editable</span>', |
| '</div>', |
| '</td></tr></tbody></table>', |
| 'editable', |
| '</div>', |
| ], |
| 'Move backward word'); |
| |
| selection_test( |
| [ |
| '<div contenteditable>', |
| 'editable', |
| '<table border="1" contenteditable="false"><tbody><tr><td>', |
| '<div style="display:inline-block;">', |
| '<span contenteditable="plaintext-only">e|ditable</span>', |
| '<span>static</span>', |
| '</div>', |
| '</td></tr></tbody></table>', |
| 'editable', |
| '</div>', |
| ], |
| selection => selection.modify('move', 'forward', 'word'), |
| [ |
| '<div contenteditable>', |
| 'editable', |
| '<table border="1" contenteditable="false"><tbody><tr><td>', |
| '<div style="display:inline-block;">', |
| '<span contenteditable="plaintext-only">editable|</span>', |
| '<span>static</span>', |
| '</div>', |
| '</td></tr></tbody></table>', |
| 'editable', |
| '</div>', |
| ], |
| 'Move forward word'); |
| </script> |
