ws-break-spaces-applies-to-010.html (2658B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text Test: 'white-space: break-spaces' applies to 'display: table-footer-group' 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-006-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: table-footer-group' is tested." name="assert"> 12 13 <!-- 14 15 Testing of 'white-space: break-spaces': 16 17 ws-break-spaces-applies-to-001: display: inline 18 19 ws-break-spaces-applies-to-002: display: block 20 21 ws-break-spaces-applies-to-003: display: list-item 22 23 ws-break-spaces-applies-to-005: display: inline-block 24 25 ws-break-spaces-applies-to-006: display: table 26 27 ws-break-spaces-applies-to-007: display: inline-table 28 29 ws-break-spaces-applies-to-008: display: table-row-group 30 31 ws-break-spaces-applies-to-009: display: table-header-group 32 33 ws-break-spaces-applies-to-010: display: table-footer-group 34 35 ws-break-spaces-applies-to-011: display: table-row 36 37 ws-break-spaces-applies-to-012: display: table-column-group 38 39 ws-break-spaces-applies-to-013: display: table-column 40 41 ws-break-spaces-applies-to-014: display: table-cell 42 43 ws-break-spaces-applies-to-015: display: table-caption 44 45 --> 46 47 <style> 48 div#cell, td#reference 49 { 50 border: black solid 2px; 51 font-family: monospace; 52 font-size: 32px; 53 width: 4ch; 54 } 55 56 div#table 57 { 58 display: table; 59 } 60 61 div#test 62 { 63 display: table-footer-group; 64 white-space: break-spaces; 65 } 66 67 div#row 68 { 69 display: table-row; 70 } 71 72 div#cell 73 { 74 display: table-cell; 75 width: 4ch; 76 } 77 78 table 79 { 80 border-spacing: 0px; 81 margin-top: 0.5em; 82 } 83 84 td#reference 85 { 86 padding: 0px; 87 white-space: pre; 88 } 89 </style> 90 91 <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. 92 93 <div id="table"> 94 <div id="test"> 95 <div id="row"> 96 <div id="cell">123 8</div> 97 <!-- 45678 --> 98 <!-- will wrap here ^ --> 99 </div> 100 </div> 101 </div> 102 103 <table><tfoot><tr><td id="reference">123 104 8</table>