ws-break-spaces-applies-to-001.html (2302B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: inline' element</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property"> 9 <link rel="match" href="reference/ws-break-spaces-applies-to-001-ref.html"> 10 11 <meta content="When 'white-space' is 'break-spaces', then new lines, sequence of white spaces and tabs are preserved and text can wrap, just like pre-wrap, but sequence of preserved white space always takes up space, including at the end of the line and line breaking opportunity exists after every preserved white space character, including between white space characters. In this test, 'display: inline' is tested." name="assert"> 12 13 14 <!-- 15 16 Testing of 'white-space: break-spaces': 17 18 ws-break-spaces-applies-to-001: display: inline 19 20 ws-break-spaces-applies-to-002: display: block 21 22 ws-break-spaces-applies-to-003: display: list-item 23 24 ws-break-spaces-applies-to-005: display: inline-block 25 26 ws-break-spaces-applies-to-006: display: table 27 28 ws-break-spaces-applies-to-007: display: inline-table 29 30 ws-break-spaces-applies-to-008: display: table-row-group 31 32 ws-break-spaces-applies-to-009: display: table-header-group 33 34 ws-break-spaces-applies-to-010: display: table-footer-group 35 36 ws-break-spaces-applies-to-011: display: table-row 37 38 ws-break-spaces-applies-to-012: display: table-column-group 39 40 ws-break-spaces-applies-to-013: display: table-column 41 42 ws-break-spaces-applies-to-014: display: table-cell 43 44 ws-break-spaces-applies-to-015: display: table-caption 45 46 --> 47 48 <style> 49 div#wrapper, div#reference 50 { 51 border: black solid 2px; 52 font-family: monospace; 53 font-size: 32px; 54 margin-bottom: 0.25em; 55 width: 4ch; 56 } 57 58 div#test 59 { 60 display: inline; 61 white-space: break-spaces; 62 } 63 64 div#reference 65 { 66 white-space: pre; 67 } 68 </style> 69 70 <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. 71 72 <div id="wrapper"><div id="test">123 8</div></div> 73 <!-- 45678 --> 74 <!-- will wrap here ^ --> 75 76 <div id="reference">123 77 8</div>