| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Text level 3 Test: text-transform:fullwidth and trailing spaces, with pre-wrap</title> |
| <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> |
| <link rel="help" href="https://www.w3.org/TR/css-text-3/#text-transform-property"> |
| <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> |
| <link rel="match" href="reference/text-transform-fullwidth-009-ref.html"> |
| <meta name="assert" content="full-width does transforms U+0020 spaces to U+3000 after phase 1, but before phase 2, so that end-of-line transformed spaces get the same treatment as natural ones: hang at the end of soft-wrapped lines, and conditionally hang before forced breaks when white-space is pre-wrap."> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <style> |
| div { |
| font: 10px/1 Ahem; |
| margin: 1em 0; |
| } |
| .pre { |
| white-space: pre; |
| } |
| #test, #ref, |
| #test3, #ref3 { |
| width: 2em; |
| text-align: right; |
| white-space: pre-wrap; |
| } |
| #test3, #ref3 { |
| margin-left: 1em; |
| } |
| span { |
| text-transform: full-width; |
| } |
| #test2, #ref2, |
| #test4, #ref4 { |
| width: min-content; |
| margin-left: 1em; |
| white-space: pre-wrap; |
| background: black; |
| } |
| </style> |
| |
| <p>Test passes if all black boxes below have the same width and height and are aligned vertically. |
| <div class=pre> x<br> x</div> |
| <div id=ref>x　x</div> |
| <div id=test>x<span> </span>x</div> |
| <div id=ref2>x　x</div> |
| <div id=test2>x<span> </span>x</div> |
| |
| <div id=ref3>x　<br>x　</div> |
| <div id=test3>x<span> </span><br>x<span> </span></div> |
| <div id=ref4>x　<br>x　</div> |
| <div id=test4>x<span> </span><br>x<span> </span></div> |
