| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Text Test: hanging punctuation is scrollable overflow</title> |
| <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> |
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging-punctuation-property"> |
| <meta name="flags" content=""> |
| <link rel="match" href="reference/hanging-scrollable-001-ref.html"> |
| <meta name="assert" content="Hanging characters that overflow their block container are treated as scrollable overflow. "> |
| <style> |
| div { |
| font-family: monospace; |
| font-size: 50px; |
| hanging-punctuation: last; |
| overflow: hidden; |
| color: red; |
| } |
| span {color: white; } |
| </style> |
| |
| <p>Test passes if there is no red below. |
| <table><tr><td><div id="t">X<span>”</span></div></table> |
| <!-- |
| The table is to do sizing based on the min content size. |
| A simpler test could be written using `div { width: min-content; }`, |
| but that is not widely supported yet. |
| --> |
| |
| <script> |
| document.getElementById("t").scrollLeft=100; |
| </script> |