ws-break-spaces-applies-to-012.html (2333B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Text Test: 'white-space: break-spaces' does not apply to 'display: table-column-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-012-ref.html"> 10 11 <meta content="In this test, we verify that 'white-space: break-spaces' does not apply to element with 'display: table-column-group'." 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-column-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 } 76 77 table 78 { 79 border-spacing: 0px; 80 margin-top: 0.5em; 81 } 82 83 td#reference 84 { 85 padding: 0px; 86 white-space: normal; 87 } 88 </style> 89 90 <p>Test passes if the characters inside of each black-bordered rectangles are laid out identically. 91 92 <div id="table"> 93 <div id="test"></div> 94 <div id="row"> 95 <div id="cell">123 8</div> 96 <!-- 45678 --> 97 <!-- will wrap here ^ --> 98 </div> 99 </div> 100 101 <table><tr><td id="reference">123 102 8</table>