1 <!DOCTYPE html>
2 <html lang="en"><head>
3 <meta charset="utf-8">
4 <title>Thai with ZWSP after line break</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="If the character immediately before or immediately after the segment break is the zero-width space character (U+200B), then the break is removed, leaving behind the zero-width space." 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="test1"><span>ภาษา
18 ​ไทย</span></div>
19 <div class="test" id="test2"><span>ภาษา
20 ​ไทย</span></div>
21 <div class="test" id="test3"><span>ภาษา
22 ​ไทย</span></div>
23 <div class="test" id="test4"><span>ภาษา
24 ​ไทย</span></div>
25 <div class="test" id="test5"><span>ภาษา
26
27
28 ​ไทย</span></div>
29 <div class="test" id="test6"><span>ภาษา
30
31
32 ​ไทย</span></div>
33 <div class="ref" id="ref"><span>ภาษาไทย</span></div>
34 <script>
35 test(function() {
36 assert_equals(document.getElementById('test1').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
37 }, "linebreak only");
38 var matches = document.getElementById('test1').firstChild.textContent.match(/\u200B/g)
39 test(function() {
40 assert_equals(matches.length, 1);
41 }, "zwsp retained 1");
42 test(function() {
43 assert_equals(document.getElementById('test2').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
44 }, "spaces linebreak");
45 var matches = document.getElementById('test2').firstChild.textContent.match(/\u200B/g)
46 test(function() {
47 assert_equals(matches.length, 1);
48 }, "zwsp retained 2");
49 test(function() {
50 assert_equals(document.getElementById('test3').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
51 }, "linebreak spaces");
52 var matches = document.getElementById('test3').firstChild.textContent.match(/\u200B/g)
53 test(function() {
54 assert_equals(matches.length, 1);
55 }, "zwsp retained 3");
56 test(function() {
57 assert_equals(document.getElementById('test4').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
58 }, "spaces linebreak spaces");
59 var matches = document.getElementById('test4').firstChild.textContent.match(/\u200B/g)
60 test(function() {
61 assert_equals(matches.length, 1);
62 }, "zwsp retained 4");
63 test(function() {
64 assert_equals(document.getElementById('test5').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
65 }, "multiple linebreaks");
66 var matches = document.getElementById('test5').firstChild.textContent.match(/\u200B/g)
67 test(function() {
68 assert_equals(matches.length, 1);
69 }, "zwsp retained 5");
70 test(function() {
71 assert_equals(document.getElementById('test6').firstChild.offsetWidth, document.getElementById('ref').firstChild.offsetWidth);
72 }, "multiple linebreaks + spaces");
73 var matches = document.getElementById('test6').firstChild.textContent.match(/\u200B/g)
74 test(function() {
75 assert_equals(matches.length, 1);
76 }, "zwsp retained 6");
77 </script>
78 <!-- Notes:
79 The assertion will fail if space is produced for any line in the test paragraph.
80 -->
81
82 </body></html>