| <!DOCTYPE html> |
| <html lang="en" > |
| <head> |
| <meta charset="utf-8"> |
| <title>Whitespace and bidi control characters</title> |
| <link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> |
| <link rel='help' href='https://drafts.csswg.org/css-text-3/#line-break-transform'> |
| <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."> |
| <style type='text/css'> |
| .test span { font-size: 24px; font-family: sans-serif; background-color:#2AA5F7; color: white; } |
| .ref span { font-size: 24px; font-family: sans-serif; background-color:#270CEF; color: white; } |
| </style> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div id='log'></div> |
| <div id='testRLO1' class="test"><span>RLO‮ |
| level‬here</span></div> |
| <div id="refRLO1" class="ref"><span>RLOlevel here</span></div> |
| <div id='testRLO2' class="test"><span>RLO  ‮  |
| level‬</span></div> |
| <div id="refRLO2" class="ref"><span>RLO level</span></div> |
| <div id='testRLO3' class="test"><span>RLO |
|    ‮     level‬</span></div> |
| <div id="refRLO3" class="ref"><span>RLO level</span></div> |
| <div id='testRLO4' class="test"><span>RLO ‮   |
|      level‬</span></div> |
| <div id="refRLO4" class="ref"><span>RLO level</span></div> |
| <div id='testRLO5' class="test"><span>RLO |
| |
| ‮ |
| |
| level‬</span></div> |
| <div id="refRLO5" class="ref"><span>RLO level</span></div> |
| <div id='testRLE1' class="test"><span>RLE‫ |
| level‬here</span></div> |
| <div id="refRLE1" class="ref"><span>RLElevel here</span></div> |
| <div id='testRLE2' class="test"><span>RLE  ‫  |
| level‬</span></div> |
| <div id="refRLE2" class="ref"><span>RLE level</span></div> |
| <div id='testRLE3' class="test"><span>RLE |
|    ‫     level‬</span></div> |
| <div id="refRLE3" class="ref"><span>RLE level</span></div> |
| <div id='testRLE4' class="test"><span>RLE ‫   |
|      level‬</span></div> |
| <div id="refRLE4" class="ref"><span>RLE level</span></div> |
| <div id='testRLE5' class="test"><span>RLE |
| |
| ‫ |
| |
| level‬</span></div> |
| <div id="refRLE5" class="ref"><span>RLE level</span></div> |
| <div id='testRLI1' class="test"><span>RLI⁧ |
| level⁩here</span></div> |
| <div id="refRLI1" class="ref"><span>RLIlevel here</span></div> |
| <div id='testRLI2' class="test"><span>RLI  ⁧  |
| level⁩</span></div> |
| <div id="refRLI2" class="ref"><span>RLI level</span></div> |
| <div id='testRLI3' class="test"><span>RLI |
|    ⁧     level⁩</span></div> |
| <div id="refRLI3" class="ref"><span>RLI level</span></div> |
| <div id='testRLI4' class="test"><span>RLI ⁧   |
|      level⁩</span></div> |
| <div id="refRLI4" class="ref"><span>RLI level</span></div> |
| <div id='testRLI5' class="test"><span>RLI |
| |
| ⁧ |
| |
| level⁩</span></div> |
| <div id="refRLI5" class="ref"><span>RLI level</span></div> |
| <div id='testRLM1' class="test"><span>RLM‏ |
| mark</span></div> |
| <div id="refRLM1" class="ref"><span>RLM mark</span></div> |
| <div id='testRLM2' class="test"><span>RLM  ‏  |
| mark</span></div> |
| <div id="refRLM2" class="ref"><span>RLM mark</span></div> |
| <div id='testRLM3' class="test"><span>RLM |
|    ‏     mark</span></div> |
| <div id="refRLM3" class="ref"><span>RLM mark</span></div> |
| <div id='testRLM4' class="test"><span>RLM ‏   |
|      mark</span></div> |
| <div id="refRLM4" class="ref"><span>RLM mark</span></div> |
| <div id='testRLM5' class="test"><span>RLM |
| |
| ‏ |
| |
| mark</span></div> |
| <div id="refRLM5" class="ref"><span>RLM mark</span></div> |
| <script> |
| test(function() { |
| assert_equals(document.getElementById('testRLO1').firstChild.offsetWidth, document.getElementById('refRLO1').firstChild.offsetWidth); |
| }, "RLO 1"); |
| test(function() { |
| assert_equals(document.getElementById('testRLO2').firstChild.offsetWidth, document.getElementById('refRLO2').firstChild.offsetWidth); |
| }, "RLO 2"); |
| test(function() { |
| assert_equals(document.getElementById('testRLO3').firstChild.offsetWidth, document.getElementById('refRLO3').firstChild.offsetWidth); |
| }, "RLO 3"); |
| test(function() { |
| assert_equals(document.getElementById('testRLO4').firstChild.offsetWidth, document.getElementById('refRLO4').firstChild.offsetWidth); |
| }, "RLO 4"); |
| test(function() { |
| assert_equals(document.getElementById('testRLO5').firstChild.offsetWidth, document.getElementById('refRLO5').firstChild.offsetWidth); |
| }, "RLO 5"); |
| |
| test(function() { |
| assert_equals(document.getElementById('testRLE1').firstChild.offsetWidth, document.getElementById('refRLE1').firstChild.offsetWidth); |
| }, "RLE 1"); |
| test(function() { |
| assert_equals(document.getElementById('testRLE2').firstChild.offsetWidth, document.getElementById('refRLE2').firstChild.offsetWidth); |
| }, "RLE 2"); |
| test(function() { |
| assert_equals(document.getElementById('testRLE3').firstChild.offsetWidth, document.getElementById('refRLE3').firstChild.offsetWidth); |
| }, "RLE 3"); |
| test(function() { |
| assert_equals(document.getElementById('testRLE4').firstChild.offsetWidth, document.getElementById('refRLE4').firstChild.offsetWidth); |
| }, "RLE 4"); |
| test(function() { |
| assert_equals(document.getElementById('testRLE5').firstChild.offsetWidth, document.getElementById('refRLE5').firstChild.offsetWidth); |
| }, "RLE 5"); |
| |
| test(function() { |
| assert_equals(document.getElementById('testRLI1').firstChild.offsetWidth, document.getElementById('refRLI1').firstChild.offsetWidth); |
| }, "RLI 1"); |
| test(function() { |
| assert_equals(document.getElementById('testRLI2').firstChild.offsetWidth, document.getElementById('refRLI2').firstChild.offsetWidth); |
| }, "RLI 2"); |
| test(function() { |
| assert_equals(document.getElementById('testRLI3').firstChild.offsetWidth, document.getElementById('refRLI3').firstChild.offsetWidth); |
| }, "RLI 3"); |
| test(function() { |
| assert_equals(document.getElementById('testRLI4').firstChild.offsetWidth, document.getElementById('refRLI4').firstChild.offsetWidth); |
| }, "RLI 4"); |
| test(function() { |
| assert_equals(document.getElementById('testRLI5').firstChild.offsetWidth, document.getElementById('refRLI5').firstChild.offsetWidth); |
| }, "RLI 5"); |
| |
| test(function() { |
| assert_equals(document.getElementById('testRLM1').firstChild.offsetWidth, document.getElementById('refRLM1').firstChild.offsetWidth); |
| }, "RLM 1"); |
| test(function() { |
| assert_equals(document.getElementById('testRLM2').firstChild.offsetWidth, document.getElementById('refRLM2').firstChild.offsetWidth); |
| }, "RLM 2"); |
| test(function() { |
| assert_equals(document.getElementById('testRLM3').firstChild.offsetWidth, document.getElementById('refRLM3').firstChild.offsetWidth); |
| }, "RLM 3"); |
| test(function() { |
| assert_equals(document.getElementById('testRLM4').firstChild.offsetWidth, document.getElementById('refRLM4').firstChild.offsetWidth); |
| }, "RLM 4"); |
| test(function() { |
| assert_equals(document.getElementById('testRLM5').firstChild.offsetWidth, document.getElementById('refRLM5').firstChild.offsetWidth); |
| }, "RLM 5"); |
| </script> |
| <!-- Notes: |
| 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. |
| --> |
| </body> |
| </html> |
| |
| |
