<!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&#x202E;
level&#x202C;here</span></div>
<div id="refRLO1" class="ref"><span>RLOlevel&#x20;here</span></div>
<div id='testRLO2' class="test"><span>RLO&#x20;&#x20;&#x202E;&#x20;
level&#x202C;</span></div>
<div id="refRLO2" class="ref"><span>RLO&#x20;level</span></div>
<div id='testRLO3' class="test"><span>RLO
&#x20;&#x20;&#x20;&#x202E;&#x20;&#x20;&#x20;&#x20;&#x20;level&#x202C;</span></div>
<div id="refRLO3" class="ref"><span>RLO&#x20;level</span></div>
<div id='testRLO4' class="test"><span>RLO&#x20;&#x202E;&#x20;&#x20;
&#x20;&#x20;&#x20;&#x20;&#x20;level&#x202C;</span></div>
<div id="refRLO4" class="ref"><span>RLO&#x20;level</span></div>
<div id='testRLO5' class="test"><span>RLO

&#x202E;

level&#x202C;</span></div>
<div id="refRLO5" class="ref"><span>RLO&#x20;level</span></div>
<div id='testRLE1' class="test"><span>RLE&#x202B;
level&#x202C;here</span></div>
<div id="refRLE1" class="ref"><span>RLElevel&#x20;here</span></div>
<div id='testRLE2' class="test"><span>RLE&#x20;&#x20;&#x202B;&#x20;
level&#x202C;</span></div>
<div id="refRLE2" class="ref"><span>RLE&#x20;level</span></div>
<div id='testRLE3' class="test"><span>RLE
&#x20;&#x20;&#x20;&#x202B;&#x20;&#x20;&#x20;&#x20;&#x20;level&#x202C;</span></div>
<div id="refRLE3" class="ref"><span>RLE&#x20;level</span></div>
<div id='testRLE4' class="test"><span>RLE&#x20;&#x202B;&#x20;&#x20;
&#x20;&#x20;&#x20;&#x20;&#x20;level&#x202C;</span></div>
<div id="refRLE4" class="ref"><span>RLE&#x20;level</span></div>
<div id='testRLE5' class="test"><span>RLE

&#x202B;

level&#x202C;</span></div>
<div id="refRLE5" class="ref"><span>RLE&#x20;level</span></div>
<div id='testRLI1' class="test"><span>RLI&#x2067;
level&#x2069;here</span></div>
<div id="refRLI1" class="ref"><span>RLIlevel&#x20;here</span></div>
<div id='testRLI2' class="test"><span>RLI&#x20;&#x20;&#x2067;&#x20;
level&#x2069;</span></div>
<div id="refRLI2" class="ref"><span>RLI&#x20;level</span></div>
<div id='testRLI3' class="test"><span>RLI
&#x20;&#x20;&#x20;&#x2067;&#x20;&#x20;&#x20;&#x20;&#x20;level&#x2069;</span></div>
<div id="refRLI3" class="ref"><span>RLI&#x20;level</span></div>
<div id='testRLI4' class="test"><span>RLI&#x20;&#x2067;&#x20;&#x20;
&#x20;&#x20;&#x20;&#x20;&#x20;level&#x2069;</span></div>
<div id="refRLI4" class="ref"><span>RLI&#x20;level</span></div>
<div id='testRLI5' class="test"><span>RLI

&#x2067;

level&#x2069;</span></div>
<div id="refRLI5" class="ref"><span>RLI&#x20;level</span></div>
<div id='testRLM1' class="test"><span>RLM&#x200F;
mark</span></div>
<div id="refRLM1" class="ref"><span>RLM&#x20;mark</span></div>
<div id='testRLM2' class="test"><span>RLM&#x20;&#x20;&#x200F;&#x20;
mark</span></div>
<div id="refRLM2" class="ref"><span>RLM&#x20;mark</span></div>
<div id='testRLM3' class="test"><span>RLM
&#x20;&#x20;&#x20;&#x200F;&#x20;&#x20;&#x20;&#x20;&#x20;mark</span></div>
<div id="refRLM3" class="ref"><span>RLM&#x20;mark</span></div>
<div id='testRLM4' class="test"><span>RLM&#x20;&#x200F;&#x20;&#x20;
&#x20;&#x20;&#x20;&#x20;&#x20;mark</span></div>
<div id="refRLM4" class="ref"><span>RLM&#x20;mark</span></div>
<div id='testRLM5' class="test"><span>RLM

&#x200F;

mark</span></div>
<div id="refRLM5" class="ref"><span>RLM&#x20;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>


