Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 4 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-text/white-space/white-space-collapse-002.html - WPT Dashboard Interop Dashboard
<!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'>
<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>