| <!doctype html> |
| <script src="../../resources/ahem.js"></script> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../assert_selection.js"></script> |
| <script> |
| const kLineHeight = 20; |
| const kStyle = `font: 10px/${kLineHeight}px Ahem; padding: 5px;`; |
| |
| function checkBox(content, style = '') { |
| const sample = [ |
| `<div style="${kStyle}style">`, |
| content, |
| '</div>', |
| ].join(''); |
| |
| selection_test( |
| sample, |
| selection => { |
| const target = selection.document.querySelector('span'); |
| assert_not_equals(`${target.offsetLeft},${target.offsetTop}`, |
| '8,8'); |
| }, |
| sample, |
| style ? `"${content}" with ${style}` : `"${content}"`); |
| } |
| |
| // Note: We don't have test cases for empty line box, e.g. |
| // - <div><span> </span></div> |
| // - <div><span> </span><b style="float:left">x</b></div> |
| // - <div><span> </span><b style="position:absolute">x</b></div> |
| // See [1] for empty line box. |
| // [1] https://drafts.csswg.org/css2/visuren.html#phantom-line-box |
| |
| checkBox('ab<span></span>'); |
| checkBox('ab<span> </span>'); |
| checkBox('ab <span></span>'); |
| checkBox('ab <span> </span>'); |
| checkBox('ab<span></span> '); |
| checkBox('ab<span> </span> '); |
| |
| checkBox('<span></span>xy'); |
| checkBox('<span> </span>xy'); |
| checkBox(' <span></span>xy'); |
| checkBox(' <span> </span>xy'); |
| checkBox('<span></span> xy'); |
| checkBox('<span> </span> xy'); |
| |
| checkBox('ab<span></span>xy'); |
| checkBox('ab<span> </span>xy'); |
| checkBox('ab <span></span>xy'); |
| checkBox('ab <span> </span>xy'); |
| checkBox('ab<span></span> xy'); |
| checkBox('ab<span> </span> xy'); |
| |
| // Soft line wrap at <span> |
| checkBox('ab<span></span>xy', `width: 2ch;`); |
| checkBox('ab<span> </span>xy', `width: 3ch;`); |
| |
| |
| </script> |
