1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
  
     | 
    
      <!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>
 
     |