white-space-collapse-002.html (7567B)
1 <!DOCTYPE html> 2 <html lang="en" > 3 <head> 4 <meta charset="utf-8"> 5 <title>Whitespace and bidi control characters</title> 6 <link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> 7 <link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'> 8 <meta name="assert" content="All spaces and tabs immediately preceding or following a segment break are removed, ignoring bidi formatting characters as if they were not there."> 9 <style type='text/css'> 10 .test span { font-size: 24px; font-family: sans-serif; background-color:#2AA5F7; color: white; } 11 .ref span { font-size: 24px; font-family: sans-serif; background-color:#270CEF; color: white; } 12 </style> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 </head> 16 <body> 17 <div id='log'></div> 18 <div id='testRLO1' class="test"><span>RLO‮ 19 level‬here</span></div> 20 <div id="refRLO1" class="ref"><span>RLOlevel here</span></div> 21 <div id='testRLO2' class="test"><span>RLO  ‮  22 level‬</span></div> 23 <div id="refRLO2" class="ref"><span>RLO level</span></div> 24 <div id='testRLO3' class="test"><span>RLO 25    ‮     level‬</span></div> 26 <div id="refRLO3" class="ref"><span>RLO level</span></div> 27 <div id='testRLO4' class="test"><span>RLO ‮   28      level‬</span></div> 29 <div id="refRLO4" class="ref"><span>RLO level</span></div> 30 <div id='testRLO5' class="test"><span>RLO 31 32 ‮ 33 34 level‬</span></div> 35 <div id="refRLO5" class="ref"><span>RLO level</span></div> 36 <div id='testRLE1' class="test"><span>RLE‫ 37 level‬here</span></div> 38 <div id="refRLE1" class="ref"><span>RLElevel here</span></div> 39 <div id='testRLE2' class="test"><span>RLE  ‫  40 level‬</span></div> 41 <div id="refRLE2" class="ref"><span>RLE level</span></div> 42 <div id='testRLE3' class="test"><span>RLE 43    ‫     level‬</span></div> 44 <div id="refRLE3" class="ref"><span>RLE level</span></div> 45 <div id='testRLE4' class="test"><span>RLE ‫   46      level‬</span></div> 47 <div id="refRLE4" class="ref"><span>RLE level</span></div> 48 <div id='testRLE5' class="test"><span>RLE 49 50 ‫ 51 52 level‬</span></div> 53 <div id="refRLE5" class="ref"><span>RLE level</span></div> 54 <div id='testRLI1' class="test"><span>RLI⁧ 55 level⁩here</span></div> 56 <div id="refRLI1" class="ref"><span>RLIlevel here</span></div> 57 <div id='testRLI2' class="test"><span>RLI  ⁧  58 level⁩</span></div> 59 <div id="refRLI2" class="ref"><span>RLI level</span></div> 60 <div id='testRLI3' class="test"><span>RLI 61    ⁧     level⁩</span></div> 62 <div id="refRLI3" class="ref"><span>RLI level</span></div> 63 <div id='testRLI4' class="test"><span>RLI ⁧   64      level⁩</span></div> 65 <div id="refRLI4" class="ref"><span>RLI level</span></div> 66 <div id='testRLI5' class="test"><span>RLI 67 68 ⁧ 69 70 level⁩</span></div> 71 <div id="refRLI5" class="ref"><span>RLI level</span></div> 72 <div id='testRLM1' class="test"><span>RLM‏ 73 mark</span></div> 74 <div id="refRLM1" class="ref"><span>RLM mark</span></div> 75 <div id='testRLM2' class="test"><span>RLM  ‏  76 mark</span></div> 77 <div id="refRLM2" class="ref"><span>RLM mark</span></div> 78 <div id='testRLM3' class="test"><span>RLM 79    ‏     mark</span></div> 80 <div id="refRLM3" class="ref"><span>RLM mark</span></div> 81 <div id='testRLM4' class="test"><span>RLM ‏   82      mark</span></div> 83 <div id="refRLM4" class="ref"><span>RLM mark</span></div> 84 <div id='testRLM5' class="test"><span>RLM 85 86 ‏ 87 88 mark</span></div> 89 <div id="refRLM5" class="ref"><span>RLM mark</span></div> 90 <script> 91 test(function() { 92 assert_equals(document.getElementById('testRLO1').firstChild.offsetWidth, document.getElementById('refRLO1').firstChild.offsetWidth); 93 }, "RLO 1"); 94 test(function() { 95 assert_equals(document.getElementById('testRLO2').firstChild.offsetWidth, document.getElementById('refRLO2').firstChild.offsetWidth); 96 }, "RLO 2"); 97 test(function() { 98 assert_equals(document.getElementById('testRLO3').firstChild.offsetWidth, document.getElementById('refRLO3').firstChild.offsetWidth); 99 }, "RLO 3"); 100 test(function() { 101 assert_equals(document.getElementById('testRLO4').firstChild.offsetWidth, document.getElementById('refRLO4').firstChild.offsetWidth); 102 }, "RLO 4"); 103 test(function() { 104 assert_equals(document.getElementById('testRLO5').firstChild.offsetWidth, document.getElementById('refRLO5').firstChild.offsetWidth); 105 }, "RLO 5"); 106 107 test(function() { 108 assert_equals(document.getElementById('testRLE1').firstChild.offsetWidth, document.getElementById('refRLE1').firstChild.offsetWidth); 109 }, "RLE 1"); 110 test(function() { 111 assert_equals(document.getElementById('testRLE2').firstChild.offsetWidth, document.getElementById('refRLE2').firstChild.offsetWidth); 112 }, "RLE 2"); 113 test(function() { 114 assert_equals(document.getElementById('testRLE3').firstChild.offsetWidth, document.getElementById('refRLE3').firstChild.offsetWidth); 115 }, "RLE 3"); 116 test(function() { 117 assert_equals(document.getElementById('testRLE4').firstChild.offsetWidth, document.getElementById('refRLE4').firstChild.offsetWidth); 118 }, "RLE 4"); 119 test(function() { 120 assert_equals(document.getElementById('testRLE5').firstChild.offsetWidth, document.getElementById('refRLE5').firstChild.offsetWidth); 121 }, "RLE 5"); 122 123 test(function() { 124 assert_equals(document.getElementById('testRLI1').firstChild.offsetWidth, document.getElementById('refRLI1').firstChild.offsetWidth); 125 }, "RLI 1"); 126 test(function() { 127 assert_equals(document.getElementById('testRLI2').firstChild.offsetWidth, document.getElementById('refRLI2').firstChild.offsetWidth); 128 }, "RLI 2"); 129 test(function() { 130 assert_equals(document.getElementById('testRLI3').firstChild.offsetWidth, document.getElementById('refRLI3').firstChild.offsetWidth); 131 }, "RLI 3"); 132 test(function() { 133 assert_equals(document.getElementById('testRLI4').firstChild.offsetWidth, document.getElementById('refRLI4').firstChild.offsetWidth); 134 }, "RLI 4"); 135 test(function() { 136 assert_equals(document.getElementById('testRLI5').firstChild.offsetWidth, document.getElementById('refRLI5').firstChild.offsetWidth); 137 }, "RLI 5"); 138 139 test(function() { 140 assert_equals(document.getElementById('testRLM1').firstChild.offsetWidth, document.getElementById('refRLM1').firstChild.offsetWidth); 141 }, "RLM 1"); 142 test(function() { 143 assert_equals(document.getElementById('testRLM2').firstChild.offsetWidth, document.getElementById('refRLM2').firstChild.offsetWidth); 144 }, "RLM 2"); 145 test(function() { 146 assert_equals(document.getElementById('testRLM3').firstChild.offsetWidth, document.getElementById('refRLM3').firstChild.offsetWidth); 147 }, "RLM 3"); 148 test(function() { 149 assert_equals(document.getElementById('testRLM4').firstChild.offsetWidth, document.getElementById('refRLM4').firstChild.offsetWidth); 150 }, "RLM 4"); 151 test(function() { 152 assert_equals(document.getElementById('testRLM5').firstChild.offsetWidth, document.getElementById('refRLM5').firstChild.offsetWidth); 153 }, "RLM 5"); 154 </script> 155 <!-- Notes: 156 The first test has an extra word to make the reference easier to create, given that the space ends up at the end of the sequence. 157 --> 158 </body> 159 </html>