WeasySuite - white-space-collapse-002

Whitespace and bidi control characters

WeasyPrint

This browser

Flags: script
Assertion: All spaces and tabs immediately preceding or following a segment break are removed, ignoring bidi formatting characters as if they were not there.
Source

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